chore: merge branch 'ui/glass-header'

src/pages/RevoltApp.tsx

@@ -1,14 +1,16 @@
 import { Docked, OverlappingPanels, ShowIf } from "react-overlapping-panels";
 import { Switch, Route, useLocation } from "react-router-dom";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 import ContextMenus from "../lib/ContextMenus";
 import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
 
+import { useApplicationState } from "../mobx/State";
+import { SIDEBAR_CHANNELS } from "../mobx/stores/Layout";
+
 import Popovers from "../context/intermediate/Popovers";
 import Notifications from "../context/revoltjs/Notifications";
 import StateMonitor from "../context/revoltjs/StateMonitor";
-import SyncManager from "../context/revoltjs/SyncManager";
 
 import { Titlebar } from "../components/native/Titlebar";
 import BottomNavigation from "../components/navigation/BottomNavigation";
@@ -24,12 +26,54 @@ import ChannelSettings from "./settings/ChannelSettings";
 import ServerSettings from "./settings/ServerSettings";
 import Settings from "./settings/Settings";
 
-const Routes = styled.div`
+const AppContainer = styled.div`
+    background-size: cover !important;
+    background-position: center center !important;
+`;
+
+const StatusBar = styled.div`
+    height: 40px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    gap: 14px;
+
+    .button {
+        padding: 5px;
+        border: 1px solid white;
+        border-radius: var(--border-radius);
+    }
+`;
+
+const Routes = styled.div.attrs({ "data-component": "routes" })<{
+    borders: boolean;
+}>`
     min-width: 0;
     display: flex;
-    overflow: hidden;
+    position: relative;
     flex-direction: column;
+
     background: var(--primary-background);
+
+    /*background-color: rgba(
+        var(--primary-background-rgb),
+        max(var(--min-opacity), 0.75)
+    );*/
+    //backdrop-filter: blur(10px);
+
+    ${() =>
+        isTouchscreenDevice &&
+        css`
+            overflow: hidden;
+        `}
+
+    ${(props) =>
+        props.borders &&
+        css`
+            border-start-start-radius: 8px;
+        `}
 `;
 
 export default function App() {
@@ -37,6 +81,7 @@ export default function App() {
     const fixedBottomNav =
         path === "/" || path === "/settings" || path.startsWith("/friends");
     const inChannel = path.includes("/channel");
+    const inServer = path.includes("/server");
     const inSpecial =
         (path.startsWith("/friends") && isTouchscreenDevice) ||
         path.startsWith("/invite") ||
@@ -44,90 +89,102 @@ export default function App() {
 
     return (
         <>
-            {window.isNative && !window.native.getConfig().frame && (
-                <Titlebar />
-            )}
-            <OverlappingPanels
-                width="100vw"
-                height={
-                    window.isNative && !window.native.getConfig().frame
-                        ? "calc(var(--app-height) - var(--titlebar-height))"
-                        : "var(--app-height)"
-                }
-                leftPanel={
-                    inSpecial
-                        ? undefined
-                        : { width: 288, component: <LeftSidebar /> }
-                }
-                rightPanel={
-                    !inSpecial && inChannel
-                        ? { width: 236, component: <RightSidebar /> }
-                        : undefined
-                }
-                bottomNav={{
-                    component: <BottomNavigation />,
-                    showIf: fixedBottomNav ? ShowIf.Always : ShowIf.Left,
-                    height: 50,
-                }}
-                docked={isTouchscreenDevice ? Docked.None : Docked.Left}>
-                <Routes>
-                    <Switch>
-                        <Route
-                            path="/server/:server/channel/:channel/settings/:page"
-                            component={ChannelSettings}
-                        />
-                        <Route
-                            path="/server/:server/channel/:channel/settings"
-                            component={ChannelSettings}
-                        />
-                        <Route
-                            path="/server/:server/settings/:page"
-                            component={ServerSettings}
-                        />
-                        <Route
-                            path="/server/:server/settings"
-                            component={ServerSettings}
-                        />
-                        <Route
-                            path="/channel/:channel/settings/:page"
-                            component={ChannelSettings}
-                        />
-                        <Route
-                            path="/channel/:channel/settings"
-                            component={ChannelSettings}
-                        />
+            {/*<StatusBar>
+                <div className="title">Planned outage: CDN (~2 hours)</div>
+                <div className="button">View status</div>
+            </StatusBar>*/}
+            <AppContainer>
+                {window.isNative && !window.native.getConfig().frame && (
+                    <Titlebar />
+                )}
+                <OverlappingPanels
+                    width="100vw"
+                    height={
+                        window.isNative && !window.native.getConfig().frame
+                            ? "calc(var(--app-height) - var(--titlebar-height))"
+                            : "var(--app-height)"
+                    }
+                    leftPanel={
+                        inSpecial
+                            ? undefined
+                            : { width: 288, component: <LeftSidebar /> }
+                    }
+                    rightPanel={
+                        !inSpecial && inChannel
+                            ? { width: 236, component: <RightSidebar /> }
+                            : undefined
+                    }
+                    bottomNav={{
+                        component: <BottomNavigation />,
+                        showIf: fixedBottomNav ? ShowIf.Always : ShowIf.Left,
+                        height: 50,
+                    }}
+                    docked={isTouchscreenDevice ? Docked.None : Docked.Left}>
+                    <Routes borders={inServer}>
+                        <Switch>
+                            <Route
+                                path="/server/:server/channel/:channel/settings/:page"
+                                component={ChannelSettings}
+                            />
+                            <Route
+                                path="/server/:server/channel/:channel/settings"
+                                component={ChannelSettings}
+                            />
+                            <Route
+                                path="/server/:server/settings/:page"
+                                component={ServerSettings}
+                            />
+                            <Route
+                                path="/server/:server/settings"
+                                component={ServerSettings}
+                            />
+                            <Route
+                                path="/channel/:channel/settings/:page"
+                                component={ChannelSettings}
+                            />
+                            <Route
+                                path="/channel/:channel/settings"
+                                component={ChannelSettings}
+                            />
 
-                        <Route
-                            path="/channel/:channel/:message"
-                            component={Channel}
-                        />
-                        <Route
-                            path="/server/:server/channel/:channel/:message"
-                            component={Channel}
-                        />
+                            <Route
+                                path="/channel/:channel/:message"
+                                component={Channel}
+                            />
+                            <Route
+                                path="/server/:server/channel/:channel/:message"
+                                component={Channel}
+                            />
 
-                        <Route
-                            path="/server/:server/channel/:channel"
-                            component={Channel}
-                        />
-                        <Route path="/server/:server" component={Channel} />
-                        <Route path="/channel/:channel" component={Channel} />
+                            <Route
+                                path="/server/:server/channel/:channel"
+                                component={Channel}
+                            />
+                            <Route path="/server/:server" component={Channel} />
+                            <Route
+                                path="/channel/:channel"
+                                component={Channel}
+                            />
 
-                        <Route path="/settings/:page" component={Settings} />
-                        <Route path="/settings" component={Settings} />
+                            <Route
+                                path="/settings/:page"
+                                component={Settings}
+                            />
+                            <Route path="/settings" component={Settings} />
 
-                        <Route path="/dev" component={Developer} />
-                        <Route path="/friends" component={Friends} />
-                        <Route path="/open/:id" component={Open} />
-                        <Route path="/bot/:id" component={InviteBot} />
-                        <Route path="/" component={Home} />
-                    </Switch>
-                </Routes>
-                <ContextMenus />
-                <Popovers />
-                <Notifications />
-                <StateMonitor />
-            </OverlappingPanels>
+                            <Route path="/dev" component={Developer} />
+                            <Route path="/friends" component={Friends} />
+                            <Route path="/open/:id" component={Open} />
+                            <Route path="/bot/:id" component={InviteBot} />
+                            <Route path="/" component={Home} />
+                        </Switch>
+                    </Routes>
+                    <ContextMenus />
+                    <Popovers />
+                    <Notifications />
+                    <StateMonitor />
+                </OverlappingPanels>
+            </AppContainer>
         </>
     );
 }