AppTopBar: automatically switch toolbar variant

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

src/timelines/TootBottomSheet.tsx

@@ -29,6 +29,10 @@ import TootList from "./TootList";
 import "./TootBottomSheet.css";
 import { useNavigator } from "~platform/StackedRouter";
 import BackButton from "~platform/BackButton";
+import ItemSelectionProvider, {
+  createSingluarItemSelection,
+} from "./toots/ItemSelectionProvider";
+import AppTopBar from "~material/AppTopBar";
 
 let cachedEntry: [string, mastodon.v1.Status] | undefined;
 
@@ -44,13 +48,11 @@ function getCache(acct: string, id: string) {
 
 const TootBottomSheet: Component = (props) => {
   const params = useParams<{ acct: string; id: string }>();
-  const location = useLocation<{
+  const { push } = useNavigator();
-    tootReply?: boolean;
-  }>();
-  const { pop, push } = useNavigator();
   const time = createTimeSource();
   const acctText = () => decodeURIComponent(params.acct);
   const session = useSessionForAcctStr(acctText);
+  const [, selectionState] = createSingluarItemSelection();
 
   const [remoteToot, { mutate: setRemoteToot }] = createResource(
     () => [session().client, params.id] as const,
@@ -247,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
-            variant="dense"
-            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
         >
           <BackButton color="inherit" />
           <Title component="div" class="name" use:solid-styled>
             <span innerHTML={tootDisplayName() ?? "Someone"}></span>
             <span>'s toot</span>
           </Title>
-          </Toolbar>
+        </AppTopBar>
-        </AppBar>
       }
       class="TootBottomSheet"
     >
@@ -322,11 +317,13 @@ const TootBottomSheet: Component = (props) => {
             </div>
           </Show>
 
+          <ItemSelectionProvider value={selectionState}>
             <TootList
               threads={descendants.list}
               onUnknownThread={descendants.getPath}
               onChangeToot={descendants.set}
             />
+          </ItemSelectionProvider>
         </TimeSourceProvider>
       </div>
     </Scaffold>

src/timelines/toots/TootContent.tsx

@@ -17,7 +17,7 @@ function preventDefault(event: Event) {
   event.preventDefault();
 }
 
-export type TootContentProps = JSX.HTMLAttributes<HTMLDivElement> & {
+export type TootContentProps = JSX.HTMLAttributes<HTMLElement> & {
   source?: string;
   emojis?: mastodon.v1.CustomEmoji[];
   mentions: mastodon.v1.StatusMention[];
@@ -58,7 +58,7 @@ const TootContent: Component<TootContentProps> = (oprops) => {
   };
 
   return (
-    <div
+    <section
       ref={(ref) => {
         createRenderEffect(() => {
           const finder = clientFinder();
@@ -104,7 +104,7 @@ const TootContent: Component<TootContentProps> = (oprops) => {
           }
         ></div>
       </Show>
-    </div>
+    </section>
   );
 };