package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package",
   "name": "tutu",
-  "version": "1.0.4",
+  "version": "1.0.3",
   "description": "",
   "private": true,
   "type": "module",

src/App.css

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

src/material/BottomSheet.module.css

@@ -31,8 +31,7 @@
       bottom: 0;
       height: 100vh;
       height: 100dvh;
-      max-height: 100vh;
-      max-height: 100dvh;
+      max-height: 100%;
     }
   }
 

src/material/BottomSheet.tsx

@@ -1,15 +1,11 @@
 import {
-  children,
   createEffect,
   createRenderEffect,
-  createSignal,
   onCleanup,
   onMount,
   startTransition,
   useTransition,
-  type ChildrenReturn,
   type ParentComponent,
-  type ResolvedChildren,
 } from "solid-js";
 import styles from "./BottomSheet.module.css";
 import { useHeroSignal } from "../platform/anim";
@@ -44,21 +40,17 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   let element: HTMLDialogElement;
   let animation: Animation | undefined;
   const hero = useHeroSignal(HERO);
-  const [cache, setCache] = createSignal<ResolvedChildren | undefined>();
-  const ochildren = children(() => props.children);
 
-  const [pending] = useTransition();
+  const [pending] = useTransition()
 
   createEffect(() => {
     if (props.open) {
       if (!element.open && !pending()) {
         animatedOpen();
-        setCache(ochildren());
       }
     } else {
       if (element.open) {
         animatedClose();
-        setCache(undefined);
       }
     }
   });
@@ -123,7 +115,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
 
   return (
     <dialog class={styles.bottomSheet} ref={element!}>
-      {ochildren() ?? cache()}
+      {props.children}
     </dialog>
   );
 };

src/material/theme.css

@@ -18,12 +18,6 @@
       --body-size: 0.9375rem;
     }
   }
-
-  input,
-  textarea {
-    /* iOS will zoom in if the font-size is smaller than 16px (or 1rem? i dont know) */
-    font-size: 1rem;
-  }
 }
 
 [lang^="zh"],
@@ -105,7 +99,6 @@
   --tutu-anim-curve-sharp: cubic-bezier(0.4, 0, 0.6, 1);
 
   @media (max-width: 300px) {
-
     /* XS screen, like wearables */
     & {
       --tutu-transition-shadow: box-shadow 157.5ms var(--tutu-anim-curve-std);
@@ -113,7 +106,6 @@
   }
 
   @media (max-width: 600px) {
-
     /* Mobile */
     & {
       --tutu-transition-shadow: box-shadow 225ms var(--tutu-anim-curve-std);
@@ -121,7 +113,6 @@
   }
 
   @media (max-width: 1200px) {
-
     /* Tablet */
     & {
       --tutu-transition-shadow: box-shadow 292.5ms var(--tutu-anim-curve-std);
@@ -148,4 +139,4 @@
 
 body {
   font-size: var(--body-size, 1rem);
-}
+}

src/settings/Settings.tsx

@@ -50,7 +50,7 @@ const Settings: ParentComponent = () => {
       topbar={
         <AppBar position="static">
           <Toolbar variant="dense" sx={{paddingTop: "var(--safe-area-inset-top, 0px)"}}>
-            <IconButton color="inherit" onClick={[navigate, -1]} disableRipple>
+            <IconButton color="inherit" onClick={[navigate, -1]}>
               <CloseIcon />
             </IconButton>
             <Title>Settings</Title>

src/timelines/CompactToot.tsx

@@ -39,7 +39,7 @@ const CompactToot: Component<CompactTootProps> = (props) => {
           @{toot().account.username}@{new URL(toot().account.url).hostname}
         </span>
         <time datetime={toot().createdAt}>
-          {formatRelative(props.now, toot().createdAt)}
+          {formatRelative(toot().createdAt, props.now)}
         </time>
       </div>
       <div

src/timelines/Home.tsx

@@ -43,7 +43,6 @@ import PullDownToRefresh from "./PullDownToRefresh";
 import { HeroSourceProvider, type HeroSource } from "../platform/anim";
 import { useNavigate } from "@solidjs/router";
 import { useSignedInProfiles } from "../masto/acct";
-import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
 
 const TimelinePanel: Component<{
   client: mastodon.rest.Client;
@@ -289,7 +288,6 @@ const Home: ParentComponent = (props) => {
     const rect = srcElement?.getBoundingClientRect();
     setHeroSrc((x) => Object.assign({}, x, { [BOTTOM_SHEET_HERO]: rect }));
     const acct = `${inf.username}@${p.account.site}`;
-    setTootBottomSheetCache(acct, toot);
     navigate(`/${encodeURIComponent(acct)}/${toot.id}`);
   };
 

src/timelines/RegularToot.tsx

@@ -177,7 +177,7 @@ function TootAuthorGroup(props: { status: mastodon.v1.Status; now: Date }) {
           }}
         />
         <time datetime={toot().createdAt}>
-          {formatRelative(props.now, toot().createdAt)}
+          {formatRelative(toot().createdAt, props.now)}
         </time>
         <span>
           @{toot().account.username}@{new URL(toot().account.url).hostname}

src/timelines/TootBottomSheet.tsx

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