AppTopBar: add dark status bar

src/masto/base.ts

@@ -1,6 +1,8 @@
 import { createCacheBucket } from "~platform/cache";
 
-export const cacheBucket = /* @__PURE__ */ createCacheBucket("mastodon");
+export const CACHE_BUCKET_NAME = "mastodon"
+
+export const cacheBucket = /* @__PURE__ */ createCacheBucket(CACHE_BUCKET_NAME);
 
 export function toSmallCamelCase<T>(object: T) :T {
   if (!object || typeof object !== "object") {

src/material/AppTopBar.css

@@ -1,6 +1,31 @@
 .AppTopBar {
-  & > .toolbar {
+  &::before {
+    contain: strict;
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--safe-area-inset-top, 0);
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+
+  &>.MuiToolbar-root {
     padding-top: var(--safe-area-inset-top, 0px);
     gap: 8px;
+
+    &>button:first-child,
+    &>.MuiButtonBase-root:first-child {
+      margin-left: -0.15em;
+    }
+
+    &>button:last-child,
+    &>.MuiButtonBase-root:last-child {
+      margin-right: -0.15em;
+    }
+
+    &>.title {
+      margin-top: -0.2ch;
+    }
   }
-}
+}

src/material/AppTopBar.tsx

@@ -20,7 +20,6 @@ const AppTopBar: ParentComponent<{
     >
       <Toolbar
         variant={windowSize.width > windowSize.height ? "dense" : "regular"}
-        class="toolbar"
         sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
       >
         {props.children}

src/settings/Language.tsx

@@ -25,6 +25,7 @@ import type { Template } from "@solid-primitives/i18n";
 import { useStore } from "@nanostores/solid";
 import { $settings } from "./stores";
 import { useNavigator } from "~platform/StackedRouter";
+import AppTopBar from "~material/AppTopBar";
 
 const ChooseLang: Component = () => {
   const { pop } = useNavigator();
@@ -54,17 +55,12 @@ const ChooseLang: Component = () => {
   return (
     <Scaffold
       topbar={
-        <AppBar position="static">
-          <Toolbar
-            variant="dense"
-            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
-          >
-            <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
-              <ArrowBack />
-            </IconButton>
-            <Title>{t("Choose Language")}</Title>
-          </Toolbar>
-        </AppBar>
+        <AppTopBar>
+          <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
+            <ArrowBack />
+          </IconButton>
+          <Title>{t("Choose Language")}</Title>
+        </AppTopBar>
       }
     >
       <List

src/settings/Motions.tsx

@@ -18,6 +18,7 @@ import { createTranslator } from "~platform/i18n";
 import { useStore } from "@nanostores/solid";
 import { $settings } from "./stores";
 import { useNavigator } from "~platform/StackedRouter";
+import AppTopBar from "~material/AppTopBar";
 
 const Motions: Component = () => {
   const {pop} = useNavigator();
@@ -31,17 +32,12 @@ const Motions: Component = () => {
   return (
     <Scaffold
       topbar={
-        <AppBar position="static">
-          <Toolbar
-            variant="dense"
-            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
-          >
-            <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
+        <AppTopBar>
+          <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
               <ArrowBack />
             </IconButton>
             <Title>{t("motions")}</Title>
-          </Toolbar>
-        </AppBar>
+        </AppTopBar>
       }
     >
       <List

src/settings/Region.tsx

@@ -23,9 +23,10 @@ import type { Template } from "@solid-primitives/i18n";
 import { $settings } from "./stores";
 import { useStore } from "@nanostores/solid";
 import { useNavigator } from "~platform/StackedRouter";
+import AppTopBar from "~material/AppTopBar";
 
 const ChooseRegion: Component = () => {
-  const {pop} = useNavigator();
+  const { pop } = useNavigator();
   const [t] = createTranslator(
     () => import("./i18n/generic.json"),
     (code) =>
@@ -49,17 +50,12 @@ const ChooseRegion: Component = () => {
   return (
     <Scaffold
       topbar={
-        <AppBar position="static">
-          <Toolbar
-            variant="dense"
-            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
-          >
-            <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
-              <ArrowBack />
-            </IconButton>
-            <Title>{t("Choose Region")}</Title>
-          </Toolbar>
-        </AppBar>
+        <AppTopBar>
+          <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
+            <ArrowBack />
+          </IconButton>
+          <Title>{t("Choose Region")}</Title>
+        </AppTopBar>
       }
     >
       <List

src/settings/Settings.tsx

@@ -18,6 +18,7 @@ import {
 import {
   Animation as AnimationIcon,
   Close as CloseIcon,
+  DeleteForever,
   Logout,
   Public as PublicIcon,
   Refresh as RefreshIcon,
@@ -40,6 +41,7 @@ import { type Template } from "@solid-primitives/i18n";
 import { useServiceWorker } from "~platform/host.js";
 import { useSessions } from "../masto/clients.js";
 import { useNavigator } from "~platform/StackedRouter.jsx";
+import AppTopBar from "~material/AppTopBar.jsx";
 
 type Inset = {
   top?: number;
@@ -141,11 +143,16 @@ function setupSafeAreaEmulation(name: string) {
   }
 }
 
+const $$SAFE_AREA_EMU = "$$SAFE_AREA_EMU";
+
 if (import.meta.hot) {
-  import.meta.hot.accept((mod) => {
-    if (!mod) return;
+  import.meta.hot.on("vite:beforeUpdate", () => {
+    import.meta.hot!.data[$$SAFE_AREA_EMU] = screenOrientationCallback;
+  });
+
+  import.meta.hot.on("vite:afterUpdate", () => {
+    screenOrientationCallback = import.meta.hot?.data?.[$$SAFE_AREA_EMU];
     if (screenOrientationCallback) {
-      mod["screenOrientationCallback"] = screenOrientationCallback;
       setTimeout(screenOrientationCallback, 0);
     }
   });
@@ -193,17 +200,12 @@ const Settings: Component = () => {
   return (
     <Scaffold
       topbar={
-        <AppBar position="static">
-          <Toolbar
-            variant="dense"
-            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
-          >
-            <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
-              <CloseIcon />
-            </IconButton>
-            <Title>{t("Settings")}</Title>
-          </Toolbar>
-        </AppBar>
+        <AppTopBar>
+          <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
+            <CloseIcon />
+          </IconButton>
+          <Title>{t("Settings")}</Title>
+        </AppTopBar>
       }
     >
       <List class="setting-list" use:solid-styled>
@@ -270,6 +272,17 @@ const Settings: Component = () => {
           </ListItemButton>
           <Divider />
         </li>
+        <li>
+          <ListSubheader>Storage</ListSubheader>
+          <ListItemButton disabled>
+            <ListItemIcon>
+              <DeleteForever />
+            </ListItemIcon>
+            <ListItemText secondary={"The cache is managed by your browser."}>
+              Clear cache...
+            </ListItemText>
+          </ListItemButton>
+        </li>
         <li>
           <ListSubheader>{t("This Application")}</ListSubheader>
           <ListItemButton component={A} href="./language">

src/timelines/Home.tsx

@@ -31,6 +31,7 @@ import {
   createSingluarItemSelection,
   default as ItemSelectionProvider,
 } from "./toots/ItemSelectionProvider";
+import AppTopBar from "~material/AppTopBar";
 
 const Home: ParentComponent = (props) => {
   let panelList: HTMLDivElement;
@@ -165,40 +166,34 @@ const Home: ParentComponent = (props) => {
     <>
       <Scaffold
         topbar={
-          <AppBar position="static">
-            <Toolbar
-              variant="dense"
-              class="responsive"
-              sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
-            >
-              <Tabs>
-                <Tab focus={isTabFocus(0)} onClick={[onTabClick, 0]}>
-                  Home
-                </Tab>
-                <Tab focus={isTabFocus(1)} onClick={[onTabClick, 1]}>
-                  Trending
-                </Tab>
-                <Tab focus={isTabFocus(2)} onClick={[onTabClick, 2]}>
-                  Public
-                </Tab>
-              </Tabs>
-              <ProfileMenuButton profile={profiles()[0]}>
-                <MenuItem
-                  onClick={(e) =>
-                    $settings.setKey(
-                      "prefetchTootsDisabled",
-                      !$settings.get().prefetchTootsDisabled,
-                    )
-                  }
-                >
-                  <ListItemText>Prefetch Toots</ListItemText>
-                  <ListItemSecondaryAction>
-                    <Switch checked={prefetching()}></Switch>
-                  </ListItemSecondaryAction>
-                </MenuItem>
-              </ProfileMenuButton>
-            </Toolbar>
-          </AppBar>
+          <AppTopBar>
+            <Tabs>
+              <Tab focus={isTabFocus(0)} onClick={[onTabClick, 0]}>
+                Home
+              </Tab>
+              <Tab focus={isTabFocus(1)} onClick={[onTabClick, 1]}>
+                Trending
+              </Tab>
+              <Tab focus={isTabFocus(2)} onClick={[onTabClick, 2]}>
+                Public
+              </Tab>
+            </Tabs>
+            <ProfileMenuButton profile={profiles()[0]}>
+              <MenuItem
+                onClick={(e) =>
+                  $settings.setKey(
+                    "prefetchTootsDisabled",
+                    !$settings.get().prefetchTootsDisabled,
+                  )
+                }
+              >
+                <ListItemText>Prefetch Toots</ListItemText>
+                <ListItemSecondaryAction>
+                  <Switch checked={prefetching()}></Switch>
+                </ListItemSecondaryAction>
+              </MenuItem>
+            </ProfileMenuButton>
+          </AppTopBar>
         }
       >
         <ItemSelectionProvider value={selectionState}>