feat: push temporary outage information

src/pages/RevoltApp.tsx

@@ -1,7 +1,9 @@
 import { Docked, OverlappingPanels, ShowIf } from "react-overlapping-panels";
-import { Switch, Route, useLocation } from "react-router-dom";
+import { Switch, Route, useLocation, Link } from "react-router-dom";
 import styled, { css } from "styled-components/macro";
 
+import { useState } from "preact/hooks";
+
 import ContextMenus from "../lib/ContextMenus";
 import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
 
@@ -39,13 +41,32 @@ const StatusBar = styled.div`
     align-items: center;
     justify-content: center;
     font-size: 13px;
-    gap: 14px;
+    //gap: 14px;
+    gap: 8px;
+
+    user-select: none;
 
     .button {
         padding: 5px;
         border: 1px solid white;
         border-radius: var(--border-radius);
     }
+
+    a {
+        cursor: pointer;
+        color: var(--foreground);
+    }
+
+    .title {
+        flex-grow: 1;
+        text-align: center;
+    }
+
+    .actions {
+        gap: 12px;
+        display: flex;
+        padding-right: 4px;
+    }
 `;
 
 const Routes = styled.div.attrs({ "data-component": "routes" })<{
@@ -91,12 +112,25 @@ export default function App() {
         path.startsWith("/invite") ||
         path.includes("/settings");
 
+    const [statusBar, setStatusBar] = useState(true);
+
     return (
         <>
-            {/*<StatusBar>
-                <div className="title">Planned outage: CDN (~2 hours)</div>
-                <div className="button">View status</div>
-            </StatusBar>*/}
+            {statusBar && (
+                <StatusBar>
+                    <div className="title">Partial outage: CDN</div>
+                    <div class="actions">
+                        <Link to="/invites/Testers">
+                            <a>
+                                <div className="button">Updates</div>
+                            </a>
+                        </Link>
+                        <a onClick={() => setStatusBar(false)}>
+                            <div className="button">Dismiss</div>
+                        </a>
+                    </div>
+                </StatusBar>
+            )}
             <AppContainer>
                 {window.isNative && !window.native.getConfig().frame && (
                     <Titlebar />