material: add AppTopBar

src/material/AppTopBar.css

@@ -0,0 +1,5 @@
+.AppTopBar {
+  & > .toolbar {
+    padding-top: var(--safe-area-inset-top, 0px);
+  }
+}

src/material/AppTopBar.tsx

@@ -0,0 +1,28 @@
+import { AppBar, Toolbar } from "@suid/material";
+import { splitProps, type JSX, type ParentComponent } from "solid-js";
+import "./AppTopBar.css";
+
+const AppTopBar: ParentComponent<{
+  class?: string;
+  style?: JSX.HTMLAttributes<HTMLElement>["style"];
+}> = (oprops) => {
+  const [props, rest] = splitProps(oprops, ["children", "class"]);
+  return (
+    <AppBar
+      class={`AppTopBar ${props.class || ""}`}
+      elevation={1}
+      position="static"
+      {...rest}
+    >
+      <Toolbar
+        variant="dense"
+        class="toolbar"
+        sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
+      >
+        {props.children}
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default AppTopBar;

src/timelines/TootBottomSheet.tsx

@@ -32,6 +32,7 @@ import BackButton from "~platform/BackButton";
 import ItemSelectionProvider, {
   createSingluarItemSelection,
 } from "./toots/ItemSelectionProvider";
+import AppTopBar from "~material/AppTopBar";
 
 let cachedEntry: [string, mastodon.v1.Status] | undefined;
 
@@ -248,25 +249,18 @@ const TootBottomSheet: Component = (props) => {
   return (
     <Scaffold
       topbar={
-        <AppBar
+        <AppTopBar
-          sx={{
+          style={{
-            backgroundColor: "var(--tutu-color-surface)",
+            "background-color": "var(--tutu-color-surface)",
             color: "var(--tutu-color-on-surface)",
           }}
-          elevation={1}
-          position="static"
         >
-          <Toolbar
+          <BackButton color="inherit" />
-            variant="dense"
+          <Title component="div" class="name" use:solid-styled>
-            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
+            <span innerHTML={tootDisplayName() ?? "Someone"}></span>
-          >
+            <span>'s toot</span>
-            <BackButton color="inherit" />
+          </Title>
-            <Title component="div" class="name" use:solid-styled>
+        </AppTopBar>
-              <span innerHTML={tootDisplayName() ?? "Someone"}></span>
-              <span>'s toot</span>
-            </Title>
-          </Toolbar>
-        </AppBar>
       }
       class="TootBottomSheet"
     >