From d66bc8ffe16a364c892e0bf7515da187e46e04f0 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Mon, 25 Nov 2024 20:31:21 +0800
Subject: [PATCH 1/4] TootContent: renderas section element

---
 src/timelines/toots/TootContent.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/timelines/toots/TootContent.tsx b/src/timelines/toots/TootContent.tsx
index 2960794..956ff45 100644
--- a/src/timelines/toots/TootContent.tsx
+++ b/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>
   );
 };
 

From 47e36a354bac3ebfb256f3b281b7d02f03181df8 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Tue, 26 Nov 2024 15:07:36 +0800
Subject: [PATCH 2/4] TootBottomSheet: fix toot could not expand

---
 src/timelines/TootBottomSheet.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/timelines/TootBottomSheet.tsx b/src/timelines/TootBottomSheet.tsx
index 065a754..79c3ac4 100644
--- a/src/timelines/TootBottomSheet.tsx
+++ b/src/timelines/TootBottomSheet.tsx
@@ -29,6 +29,9 @@ import TootList from "./TootList";
 import "./TootBottomSheet.css";
 import { useNavigator } from "~platform/StackedRouter";
 import BackButton from "~platform/BackButton";
+import ItemSelectionProvider, {
+  createSingluarItemSelection,
+} from "./toots/ItemSelectionProvider";
 
 let cachedEntry: [string, mastodon.v1.Status] | undefined;
 
@@ -44,13 +47,11 @@ function getCache(acct: string, id: string) {
 
 const TootBottomSheet: Component = (props) => {
   const params = useParams<{ acct: string; id: string }>();
-  const location = useLocation<{
-    tootReply?: boolean;
-  }>();
-  const { pop, push } = useNavigator();
+  const { 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,
@@ -322,11 +323,13 @@ const TootBottomSheet: Component = (props) => {
             </div>
           </Show>
 
-          <TootList
-            threads={descendants.list}
-            onUnknownThread={descendants.getPath}
-            onChangeToot={descendants.set}
-          />
+          <ItemSelectionProvider value={selectionState}>
+            <TootList
+              threads={descendants.list}
+              onUnknownThread={descendants.getPath}
+              onChangeToot={descendants.set}
+            />
+          </ItemSelectionProvider>
         </TimeSourceProvider>
       </div>
     </Scaffold>

From bece50643ff29326e74ed9e55dc20ff222dff50e Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Tue, 26 Nov 2024 15:18:45 +0800
Subject: [PATCH 3/4] material: add AppTopBar

---
 src/material/AppTopBar.css        |  5 +++++
 src/material/AppTopBar.tsx        | 28 ++++++++++++++++++++++++++++
 src/timelines/TootBottomSheet.tsx | 26 ++++++++++----------------
 3 files changed, 43 insertions(+), 16 deletions(-)
 create mode 100644 src/material/AppTopBar.css
 create mode 100644 src/material/AppTopBar.tsx

diff --git a/src/material/AppTopBar.css b/src/material/AppTopBar.css
new file mode 100644
index 0000000..27169b7
--- /dev/null
+++ b/src/material/AppTopBar.css
@@ -0,0 +1,5 @@
+.AppTopBar {
+  & > .toolbar {
+    padding-top: var(--safe-area-inset-top, 0px);
+  }
+}
diff --git a/src/material/AppTopBar.tsx b/src/material/AppTopBar.tsx
new file mode 100644
index 0000000..b786646
--- /dev/null
+++ b/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;
diff --git a/src/timelines/TootBottomSheet.tsx b/src/timelines/TootBottomSheet.tsx
index 79c3ac4..eecc8fc 100644
--- a/src/timelines/TootBottomSheet.tsx
+++ b/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
-          sx={{
-            backgroundColor: "var(--tutu-color-surface)",
+        <AppTopBar
+          style={{
+            "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>
-        </AppBar>
+          <BackButton color="inherit" />
+          <Title component="div" class="name" use:solid-styled>
+            <span innerHTML={tootDisplayName() ?? "Someone"}></span>
+            <span>'s toot</span>
+          </Title>
+        </AppTopBar>
       }
       class="TootBottomSheet"
     >

From b2d8c1bb2e425029fa2cbeb24fbf6c17573f0f47 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Tue, 26 Nov 2024 15:30:39 +0800
Subject: [PATCH 4/4] AppTopBar: automatically switch toolbar variant

---
 src/material/AppTopBar.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/material/AppTopBar.tsx b/src/material/AppTopBar.tsx
index b786646..dca5852 100644
--- a/src/material/AppTopBar.tsx
+++ b/src/material/AppTopBar.tsx
@@ -1,12 +1,15 @@
 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 || ""}`}
@@ -15,7 +18,7 @@ const AppTopBar: ParentComponent<{
       {...rest}
     >
       <Toolbar
-        variant="dense"
+        variant={windowSize.width > windowSize.height ? "dense" : "regular"}
         class="toolbar"
         sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
       >