feat(): improve offline support

ui/src/about/AboutPage.tsx

@@ -4,12 +4,13 @@ import Center from '../components/Center'
 import { VERSION } from '../constants'
 import Page from '../layout/Page'
 import styles from './AboutPage.module.css'
+import logo from './logo.svg'
 
 export default () => (
   <Page title="About">
     <Center className={styles.about}>
       <h1>
-        <img src={process.env.PUBLIC_URL + '/logo.svg'} />
+        <img src={logo} />
       </h1>
       <span>({VERSION})</span>
       <p>Read your Internet article flow in one place with complete peace of mind and freedom.</p>

ui/src/components/NetworkStatus.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react'
+
+import useOnlineStatus from '../hooks/useOnlineStatus'
+
+interface Props {
+  status: 'online' | 'offline'
+  children: ReactNode
+}
+
+function NetworkStatus({ status, children }: Props) {
+  const isOnline = useOnlineStatus()
+  const display = (isOnline && status == 'online') || (!isOnline && status == 'offline')
+
+  if (display) {
+    return <>{children}</>
+  } else {
+    return null
+  }
+}
+
+export default NetworkStatus