ReplyEditor: added only UI

src/timelines/TootBottomSheet.tsx

@@ -8,12 +8,16 @@ import {
   type Component,
 } from "solid-js";
 import Scaffold from "../material/Scaffold";
-import { AppBar, Avatar, CircularProgress, IconButton, Toolbar } from "@suid/material";
+import {
+  AppBar,
+  CircularProgress,
+  IconButton,
+  Toolbar,
+} from "@suid/material";
 import { Title } from "../material/typography";
 import {
   ArrowBack as BackIcon,
   Close as CloseIcon,
-  Send,
 } from "@suid/icons-material";
 import { createUnauthorizedClient, useSessions } from "../masto/clients";
 import { resolveCustomEmoji } from "../masto/toot";
@@ -22,6 +26,8 @@ import type { mastodon } from "masto";
 import cards from "../material/cards.module.css";
 import { css } from "solid-styled";
 import { vibrate } from "../platform/hardware";
+import { createTimeSource, TimeSourceProvider } from "../platform/timesrc";
+import ReplyEditor from "./ReplyEditor";
 
 let cachedEntry: [string, mastodon.v1.Status] | undefined;
 
@@ -35,11 +41,14 @@ function getCache(acct: string, id: string) {
   }
 }
 
+
+
 const TootBottomSheet: Component = (props) => {
   const params = useParams<{ acct: string; id: string }>();
   const location = useLocation<{ tootBottomSheetPushedCount?: number }>();
   const navigate = useNavigate();
   const allSession = useSessions();
+  const time = createTimeSource();
   const acctText = () => decodeURIComponent(params.acct);
   const session = () => {
     const [inputUsername, inputSite] = acctText().split("@", 2);
@@ -164,12 +173,6 @@ const TootBottomSheet: Component = (props) => {
   };
 
   css`
-    .bottom-dock {
-      position: sticky;
-      bottom: 0;
-      z-index: var(--tutu-zidx-nav);
-    }
-
     .name :global(img) {
       max-height: 1em;
     }
@@ -203,74 +206,69 @@ const TootBottomSheet: Component = (props) => {
         </AppBar>
       }
     >
-      <For each={ancestors()}>
-        {(item) => (
-          <RegularToot
-            id={`toot-${item.id}`}
-            class={cards.card}
-            status={item}
-            actionable={false}
-            onClick={[switchContext, item]}
-          ></RegularToot>
-        )}
-      </For>
+      <TimeSourceProvider value={time}>
+        <For each={ancestors()}>
+          {(item) => (
+            <RegularToot
+              id={`toot-${item.id}`}
+              class={cards.card}
+              status={item}
+              actionable={false}
+              onClick={[switchContext, item]}
+            ></RegularToot>
+          )}
+        </For>
 
-      <article>
-        <Show when={toot()}>
-          <RegularToot
-            id={`toot-${toot()!.id}`}
-            class={cards.card}
-            style={{
-              "scroll-margin-top": "calc(var(--scaffold-topbar-height) + 20px)",
-            }}
-            status={toot()!}
-            actionable={!!actSession()}
-            evaluated={true}
-            onBookmark={onBookmark}
-            onRetoot={onBoost}
-            onFavourite={onFav}
-          ></RegularToot>
-        </Show>
-      </article>
+        <article>
+          <Show when={toot()}>
+            <RegularToot
+              id={`toot-${toot()!.id}`}
+              class={cards.card}
+              style={{
+                "scroll-margin-top":
+                  "calc(var(--scaffold-topbar-height) + 20px)",
+              }}
+              status={toot()!}
+              actionable={!!actSession()}
+              evaluated={true}
+              onBookmark={onBookmark}
+              onRetoot={onBoost}
+              onFavourite={onFav}
+            ></RegularToot>
+          </Show>
+        </article>
 
-      <Show when={tootContext.loading}>
-        <div
-          style={{
-            display: "flex",
-            "justify-content": "center",
-            "margin-block": "12px",
-          }}
-        >
-          <CircularProgress style="width: 1.5em; height: 1.5em;" />
-        </div>
-      </Show>
-
-      <For each={descendants()}>
-        {(item) => (
-          <RegularToot
-            id={`toot-${item.id}`}
-            class={cards.card}
-            status={item}
-            actionable={false}
-            onClick={[switchContext, item]}
-          ></RegularToot>
-        )}
-      </For>
-
-      <div class="bottom-dock">
         <Show when={profile()}>
-          <div style="display: flex; gap: 8px; background: var(--tutu-color-surface); padding: 8px 8px calc(var(--safe-area-inset-bottom, 0px) + 8px);">
-            <Avatar src={profile()!.inf?.avatar} />
-            <textarea
-              placeholder={`Reply to ${toot()?.account?.displayName ?? ""}...`}
-              style={{ width: "100%", border: "none" }}
-            ></textarea>
-            <IconButton>
-              <Send />
-            </IconButton>
+          <ReplyEditor
+            profile={profile()!}
+            replyToDisplayName={toot()?.account?.displayName || ""}
+          />
+        </Show>
+
+        <Show when={tootContext.loading}>
+          <div
+            style={{
+              display: "flex",
+              "justify-content": "center",
+              "margin-block": "12px",
+            }}
+          >
+            <CircularProgress style="width: 1.5em; height: 1.5em;" />
           </div>
         </Show>
-      </div>
+
+        <For each={descendants()}>
+          {(item) => (
+            <RegularToot
+              id={`toot-${item.id}`}
+              class={cards.card}
+              status={item}
+              actionable={false}
+              onClick={[switchContext, item]}
+            ></RegularToot>
+          )}
+        </For>
+      </TimeSourceProvider>
     </Scaffold>
   );
 };