TootBottomSheet: basic layout

src/App.css

@@ -8,5 +8,5 @@
 }
 
 .custom-emoji {
-  width: 1.25em;
+  width: 1em;
 }

src/timelines/TootBottomSheet.tsx

@@ -1,45 +1,57 @@
 import { useNavigate, useParams } from "@solidjs/router";
-import { createEffect, createResource, Show, type Component } from "solid-js";
+import {
+  createEffect,
+  createRenderEffect,
+  createResource,
+  Show,
+  type Component,
+} from "solid-js";
 import Scaffold from "../material/Scaffold";
 import TootThread from "./TootThread";
-import { AppBar, IconButton, Toolbar } from "@suid/material";
+import { AppBar, Avatar, IconButton, Toolbar } from "@suid/material";
 import { Title } from "../material/typography";
-import { Close as CloseIcon } from "@suid/icons-material";
+import { Close as CloseIcon, Send } from "@suid/icons-material";
 import { isiOS } from "../platform/host";
 import { createUnauthorizedClient, useSessions } from "../masto/clients";
 import { resolveCustomEmoji } from "../masto/toot";
 import RegularToot from "./RegularToot";
 import type { mastodon } from "masto";
+import cards from "../material/cards.module.css";
+import { css } from "solid-styled";
 
 let cachedEntry: [string, mastodon.v1.Status] | undefined;
 
 export function setCache(acct: string, status: mastodon.v1.Status) {
-  cachedEntry = [acct, status]
+  cachedEntry = [acct, status];
 }
 
 function getCache(acct: string, id: string) {
   if (acct === cachedEntry?.[0] && id === cachedEntry?.[1].id) {
-    return cachedEntry[1]
+    return cachedEntry[1];
   }
 }
 
-
 const TootBottomSheet: Component = (props) => {
   const params = useParams<{ acct: string; id: string }>();
   const navigate = useNavigate();
   const allSession = useSessions();
-  const acctText = () => decodeURIComponent(params.acct)
+  const acctText = () => decodeURIComponent(params.acct);
   const session = () => {
-    const [inputUsername, inputSite] = acctText().split(
-      "@",
-      2,
-    );
+    const [inputUsername, inputSite] = acctText().split("@", 2);
     const authedSession = allSession().find(
       (x) =>
         x.account.site === inputSite &&
         x.account.inf?.username === inputUsername,
     );
-    return authedSession ?? { client: createUnauthorizedClient(inputSite) };
+    return (
+      authedSession ?? {
+        client: createUnauthorizedClient(inputSite),
+        account: undefined,
+      }
+    );
+  };
+  const profile = () => {
+    return session().account;
   };
 
   const [remoteToot] = createResource(
@@ -60,6 +72,17 @@ const TootBottomSheet: Component = (props) => {
     return "A toot";
   };
 
+  css`
+    .bottom-dock {
+      position: sticky;
+      bottom: 0;
+    }
+
+    .name :global(img) {
+      max-height: 1em;
+    }
+  `;
+
   return (
     <Scaffold
       topbar={
@@ -78,14 +101,39 @@ const TootBottomSheet: Component = (props) => {
             <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
               <CloseIcon />
             </IconButton>
-            <Title>{tootTitle}</Title>
+            <Title
+              class="name"
+              ref={(e: HTMLElement) =>
+                createRenderEffect(() => (e.innerHTML = tootTitle()))
+              }
+            ></Title>
           </Toolbar>
         </AppBar>
       }
     >
-      <div>
+      <article>
         <Show when={toot()}>
-          <RegularToot status={toot()!}></RegularToot>
+          <RegularToot
+            class={cards.card}
+            status={toot()!}
+            actionable={true}
+            evaluated={true}
+          ></RegularToot>
+        </Show>
+      </article>
+
+      <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%", "font-size": "1rem", border: "none" }}
+            ></textarea>
+            <IconButton>
+              <Send />
+            </IconButton>
+          </div>
         </Show>
       </div>
     </Scaffold>