Add offline-banner UI

vibecamp · Sep 24, 2024 · 9e871ca · 9e871ca
1 parent 88231ce
commit 9e871ca
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/front-end/src/components/App.tsx b/front-end/src/components/App.tsx
@@ -2,6 +2,7 @@ import React, { FC, useEffect, useMemo } from 'react'
 
 import { exists } from '../../../back-end/utils/misc'
 import useHashState from '../hooks/useHashState'
+import useIsOffline from '../hooks/useIsOffline'
 import { StoreContext, useNewStoreInstance } from '../hooks/useStore'
 import useWindowSize from '../hooks/useWindowSize'
 import Account from './Account'
@@ -90,6 +91,7 @@ export default React.memo(() => {
 
 const Nav = React.memo((props: { views: readonly View[] }) => {
     const { hashState } = useHashState()
+    const isOffline = useIsOffline()
 
     return (
         <div className='nav'>
@@ -109,6 +111,10 @@ const Nav = React.memo((props: { views: readonly View[] }) => {
                     </a>
                 )
             })}
+
+            <div className={`offline-banner ${!isOffline ? 'hidden' : ''}`}>
+                Currently offline
+            </div>
         </div>
     )
 })
diff --git a/front-end/src/index.scss b/front-end/src/index.scss
@@ -131,6 +131,7 @@ a {
 }
 
 .nav {
+    position: relative;
     min-height: 60px;
     background: var(--color-background-2);
     border-top: var(--controls-border);
@@ -141,6 +142,25 @@ a {
     flex-grow: 0;
     flex-shrink: 0;
 
+    .offline-banner {
+        position: absolute;
+        bottom: 100%;
+        left: 0;
+        width: 100vw;
+        padding: 2px;
+        font-size: 10px;
+        text-align: center;
+        background: var(--color-danger);
+        color: rgba(255, 255, 255, 0.9);
+
+        transition: transform 0.2s ease-out, opacity 0.2s ease-out;
+
+        &.hidden {
+            transform: translateX(-100vw);
+            opacity: 0;
+        }
+    }
+
     a {
         appearance: none;
         border: none;