src/masto/base.ts

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

src/material/AppTopBar.css

@@ -1,31 +1,6 @@
 .AppTopBar {
-  &::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 {
+  & > .toolbar {
     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,6 +20,7 @@ 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,7 +25,6 @@ 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();
@@ -55,12 +54,17 @@ const ChooseLang: Component = () => {
   return (
     <Scaffold
       topbar={
-        <AppTopBar>
+        <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>
-        </AppTopBar>
+          </Toolbar>
+        </AppBar>
       }
     >
       <List

src/settings/Motions.tsx

@@ -18,7 +18,6 @@ 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();
@@ -32,12 +31,17 @@ const Motions: Component = () => {
   return (
     <Scaffold
       topbar={
-        <AppTopBar>
+        <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("motions")}</Title>
-        </AppTopBar>
+          </Toolbar>
+        </AppBar>
       }
     >
       <List

src/settings/Region.tsx

@@ -23,10 +23,9 @@ 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) =>
@@ -50,12 +49,17 @@ const ChooseRegion: Component = () => {
   return (
     <Scaffold
       topbar={
-        <AppTopBar>
+        <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>
-        </AppTopBar>
+          </Toolbar>
+        </AppBar>
       }
     >
       <List

src/settings/Settings.tsx

@@ -18,7 +18,6 @@ import {
 import {
   Animation as AnimationIcon,
   Close as CloseIcon,
-  DeleteForever,
   Logout,
   Public as PublicIcon,
   Refresh as RefreshIcon,
@@ -41,7 +40,6 @@ 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;
@@ -143,16 +141,11 @@ function setupSafeAreaEmulation(name: string) {
   }
 }
 
-const $$SAFE_AREA_EMU = "$$SAFE_AREA_EMU";
-
 if (import.meta.hot) {
-  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];
+  import.meta.hot.accept((mod) => {
+    if (!mod) return;
     if (screenOrientationCallback) {
+      mod["screenOrientationCallback"] = screenOrientationCallback;
       setTimeout(screenOrientationCallback, 0);
     }
   });
@@ -200,12 +193,17 @@ const Settings: Component = () => {
   return (
     <Scaffold
       topbar={
-        <AppTopBar>
+        <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>
-        </AppTopBar>
+          </Toolbar>
+        </AppBar>
       }
     >
       <List class="setting-list" use:solid-styled>
@@ -272,17 +270,6 @@ 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,7 +31,6 @@ import {
   createSingluarItemSelection,
   default as ItemSelectionProvider,
 } from "./toots/ItemSelectionProvider";
-import AppTopBar from "~material/AppTopBar";
 
 const Home: ParentComponent = (props) => {
   let panelList: HTMLDivElement;
@@ -166,7 +165,12 @@ const Home: ParentComponent = (props) => {
     <>
       <Scaffold
         topbar={
-          <AppTopBar>
+          <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
@@ -193,7 +197,8 @@ const Home: ParentComponent = (props) => {
                   </ListItemSecondaryAction>
                 </MenuItem>
               </ProfileMenuButton>
-          </AppTopBar>
+            </Toolbar>
+          </AppBar>
         }
       >
         <ItemSelectionProvider value={selectionState}>