src/masto/base.ts

@@ -1,8 +1,6 @@
 import { createCacheBucket } from "~platform/cache";
 
-export const CACHE_BUCKET_NAME = "mastodon"
+export const cacheBucket = /* @__PURE__ */ createCacheBucket("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,31 +1,6 @@
 .AppTopBar {
-  &::before {
+  & > .toolbar {
-    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,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">
-          <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
+          <Toolbar
-            <ArrowBack />
+            variant="dense"
-          </IconButton>
+            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
-          <Title>{t("Choose Language")}</Title>
+          >
-        </AppTopBar>
+            <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
+              <ArrowBack />
+            </IconButton>
+            <Title>{t("Choose Language")}</Title>
+          </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">
-          <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
+          <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">
-          <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
+          <Toolbar
-            <ArrowBack />
+            variant="dense"
-          </IconButton>
+            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
-          <Title>{t("Choose Region")}</Title>
+          >
-        </AppTopBar>
+            <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
+              <ArrowBack />
+            </IconButton>
+            <Title>{t("Choose Region")}</Title>
+          </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.accept((mod) => {
-    import.meta.hot!.data[$$SAFE_AREA_EMU] = screenOrientationCallback;
+    if (!mod) return;
-  });
-
-  import.meta.hot.on("vite:afterUpdate", () => {
-    screenOrientationCallback = import.meta.hot?.data?.[$$SAFE_AREA_EMU];
     if (screenOrientationCallback) {
+      mod["screenOrientationCallback"] = screenOrientationCallback;
       setTimeout(screenOrientationCallback, 0);
     }
   });
@@ -200,12 +193,17 @@ const Settings: Component = () => {
   return (
     <Scaffold
       topbar={
-        <AppTopBar>
+        <AppBar position="static">
-          <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
+          <Toolbar
-            <CloseIcon />
+            variant="dense"
-          </IconButton>
+            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
-          <Title>{t("Settings")}</Title>
+          >
-        </AppTopBar>
+            <IconButton color="inherit" onClick={[pop, 1]} disableRipple>
+              <CloseIcon />
+            </IconButton>
+            <Title>{t("Settings")}</Title>
+          </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,34 +165,40 @@ const Home: ParentComponent = (props) => {
     <>
       <Scaffold
         topbar={
-          <AppTopBar>
+          <AppBar position="static">
-            <Tabs>
+            <Toolbar
-              <Tab focus={isTabFocus(0)} onClick={[onTabClick, 0]}>
+              variant="dense"
-                Home
+              class="responsive"
-              </Tab>
+              sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
-              <Tab focus={isTabFocus(1)} onClick={[onTabClick, 1]}>
+            >
-                Trending
+              <Tabs>
-              </Tab>
+                <Tab focus={isTabFocus(0)} onClick={[onTabClick, 0]}>
-              <Tab focus={isTabFocus(2)} onClick={[onTabClick, 2]}>
+                  Home
-                Public
+                </Tab>
-              </Tab>
+                <Tab focus={isTabFocus(1)} onClick={[onTabClick, 1]}>
-            </Tabs>
+                  Trending
-            <ProfileMenuButton profile={profiles()[0]}>
+                </Tab>
-              <MenuItem
+                <Tab focus={isTabFocus(2)} onClick={[onTabClick, 2]}>
-                onClick={(e) =>
+                  Public
-                  $settings.setKey(
+                </Tab>
-                    "prefetchTootsDisabled",
+              </Tabs>
-                    !$settings.get().prefetchTootsDisabled,
+              <ProfileMenuButton profile={profiles()[0]}>
-                  )
+                <MenuItem
-                }
+                  onClick={(e) =>
-              >
+                    $settings.setKey(
-                <ListItemText>Prefetch Toots</ListItemText>
+                      "prefetchTootsDisabled",
-                <ListItemSecondaryAction>
+                      !$settings.get().prefetchTootsDisabled,
-                  <Switch checked={prefetching()}></Switch>
+                    )
-                </ListItemSecondaryAction>
+                  }
-              </MenuItem>
+                >
-            </ProfileMenuButton>
+                  <ListItemText>Prefetch Toots</ListItemText>
-          </AppTopBar>
+                  <ListItemSecondaryAction>
+                    <Switch checked={prefetching()}></Switch>
+                  </ListItemSecondaryAction>
+                </MenuItem>
+              </ProfileMenuButton>
+            </Toolbar>
+          </AppBar>
         }
       >
         <ItemSelectionProvider value={selectionState}>