Profile: use AppTopBar

src/material/AppTopBar.css

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

src/material/AppTopBar.tsx

@@ -2,11 +2,12 @@ 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";
+import type { AppBarProps } from "@suid/material/AppBar";
 
 const AppTopBar: ParentComponent<{
   class?: string;
   style?: JSX.HTMLAttributes<HTMLElement>["style"];
-}> = (oprops) => {
+} & AppBarProps> = (oprops) => {
   const [props, rest] = splitProps(oprops, ["children", "class"]);
   const windowSize = useWindowSize();
 

src/material/BottomSheet.tsx

@@ -13,6 +13,7 @@ import {
   animateSlideInFromRight,
   animateSlideOutToRight,
 } from "~platform/anim";
+import { isPointNotInRect } from "~platform/dom";
 
 export type BottomSheetProps = {
   open?: boolean;
@@ -120,12 +121,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     event.stopPropagation();
     if (event.target !== event.currentTarget) return;
     const rect = event.currentTarget.getBoundingClientRect();
-    const isNotInDialog =
+    if (isPointNotInRect(rect, event.clientX, event.clientY)) {
-      event.clientY < rect.top ||
-      event.clientY > rect.bottom ||
-      event.clientX < rect.left ||
-      event.clientX > rect.right;
-    if (isNotInDialog) {
       props.onClose?.("backdrop");
     }
   };

src/material/Scaffold.css

@@ -6,19 +6,6 @@
   .MuiToolbar-root {
     margin-left: var(--safe-area-inset-left);
     margin-right: var(--safe-area-inset-right);
-
-    >.MuiButtonBase-root {
-      &:first-child {
-        margin-left: -0.5em;
-        margin-right: 24px;
-      }
-
-      &:last-child {
-        margin-right: -0.5em;
-        margin-left: 24px;
-      }
-
-    }
   }
 }
 
@@ -40,5 +27,6 @@
 .Scaffold {
   height: 100%;
   width: 100%;
+  display: contents;
   background-color: var(--tutu-color-surface);
 }

src/platform/StackedRouter.tsx

@@ -19,6 +19,7 @@ import { animateSlideInFromRight, animateSlideOutToRight } from "./anim";
 import { ANIM_CURVE_DECELERATION, ANIM_CURVE_STD } from "~material/theme";
 import { makeEventListener } from "@solid-primitives/event-listener";
 import { useWindowSize } from "@solid-primitives/resize-observer";
+import { isPointNotInRect } from "./dom";
 
 export type StackedRouterProps = Omit<RouterProps, "url">;
 
@@ -173,12 +174,7 @@ function onDialogClick(
 ) {
   if (event.target !== event.currentTarget) return;
   const rect = event.currentTarget.getBoundingClientRect();
-  const isNotInDialog =
+  if (isPointNotInRect(rect, event.clientX, event.clientY)) {
-    event.clientY < rect.top ||
-    event.clientY > rect.bottom ||
-    event.clientX < rect.left ||
-    event.clientX > rect.right;
-  if (isNotInDialog) {
     onClose();
   }
 }

src/platform/dom.ts

@@ -0,0 +1,5 @@
+export function isPointNotInRect(rect: DOMRect, ptX: number, ptY: number) {
+  return (
+    ptY < rect.top || ptY > rect.bottom || ptX < rect.left || ptX > rect.right
+  );
+}

src/profiles/Profile.tsx

@@ -62,6 +62,7 @@ import {
   createSingluarItemSelection,
   default as ItemSelectionProvider,
 } from "../timelines/toots/ItemSelectionProvider";
+import AppTopBar from "~material/AppTopBar";
 
 const Profile: Component = () => {
   const { pop } = useNavigator();
@@ -195,44 +196,38 @@ const Profile: Component = () => {
   return (
     <Scaffold
       topbar={
-        <AppBar
+        <AppTopBar
           role="navigation"
           position="static"
           color={scrolledPastBanner() ? "primary" : "transparent"}
           elevation={scrolledPastBanner() ? undefined : 0}
+          style={{
+            color: scrolledPastBanner()
+              ? undefined
+              : bannerSampledColors()?.text,
+          }}
         >
-          <Toolbar
+          <IconButton color="inherit" onClick={[pop, 1]} aria-label="Close">
-            variant="dense"
+            <Close />
-            sx={{
+          </IconButton>
-              display: "flex",
+          <Title
-              color: scrolledPastBanner()
+            class="Profile__page-title"
-                ? undefined
+            style={{
-                : bannerSampledColors()?.text,
+              visibility: scrolledPastBanner() ? undefined : "hidden",
-              paddingTop: "var(--safe-area-inset-top)",
             }}
-          >
+            innerHTML={displayName()}
-            <IconButton color="inherit" onClick={[pop, 1]} aria-label="Close">
+          ></Title>
-              <Close />
-            </IconButton>
-            <Title
-              class="Profile__page-title"
-              style={{
-                visibility: scrolledPastBanner() ? undefined : "hidden",
-              }}
-              innerHTML={displayName()}
-            ></Title>
 
-            <IconButton
+          <IconButton
-              id={menuButId}
+            id={menuButId}
-              aria-controls={optMenuId}
+            aria-controls={optMenuId}
-              color="inherit"
+            color="inherit"
-              onClick={[setMenuOpen, true]}
+            onClick={[setMenuOpen, true]}
-              aria-label="Open Options for the Profile"
+            aria-label="Open Options for the Profile"
-            >
+          >
-              <MoreVert />
+            <MoreVert />
-            </IconButton>
+          </IconButton>
-          </Toolbar>
+        </AppTopBar>
-        </AppBar>
       }
       class="Profile"
     >