add update notification

src/renderer/Layout.jsx

@@ -5,6 +5,7 @@ import shortid from 'shortid'
 import { defaultAnimation } from './components/Animations'
 import Titlebar from './components/Titlebar'
 import styles from './Layout.module.css'
+import Update from './components/Update'
 
 const Animation = posed.div(defaultAnimation)
 
@@ -13,6 +14,7 @@ export default function Layout({ children }) {
     <>
       {process.platform === 'darwin' && <Titlebar />}
       <div className={styles.app}>
+        <Update />
         <PoseGroup animateOnMount>
           <Animation key={shortid.generate()}>{children}</Animation>
         </PoseGroup>

src/renderer/Layout.module.css

@@ -5,12 +5,9 @@
   width: 100%;
   height: 100%;
   overflow-y: auto;
+  position: relative;
 }
 
 :global(.darwin) .app {
   padding-top: calc(35px + 10%);
 }
-
-:global(.fullscreen.darwin) .app {
-  transform: translate3d(0, -36px, 0);
-}

src/renderer/components/Update.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import useSWR from 'swr'
+import pkg from '../../../package.json'
+import { openUrl, fetchData } from '../../utils'
+import styles from './Update.module.css'
+
+export default function Update() {
+  const url =
+    'https://api.github.com/repos/kremalicious/blowfish/releases/latest'
+  const { data } = useSWR(url, fetchData)
+
+  if (!data || !data.tag_name) return null
+
+  const hasUpdate = data.tag_name !== `v${pkg.version}`
+
+  return hasUpdate ? (
+    <a
+      onClick={() =>
+        openUrl('https://github.com/kremalicious/blowfish/releases')
+      }
+      className={styles.update}
+    >
+      Update available
+    </a>
+  ) : null
+}

src/renderer/components/Update.module.css

@@ -0,0 +1,20 @@
+.update {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.75rem;
+  padding: 0.2rem 0.5rem;
+  font-size: 0.8rem;
+  font-weight: bold;
+  border: 1px solid transparent;
+  border-radius: 0.2rem;
+}
+
+.update:hover,
+.update:focus {
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+:global(.dark) .update:hover,
+:global(.dark) .update:focus {
+  border-color: rgba(255, 255, 255, 0.2);
+}