11 changed files with 279 additions and 406 deletions
--- a/src/accounts/stores.ts
+++ b/src/accounts/stores.ts
@ -6,19 +6,10 @@ import {
 } from "masto";
 import { createMastoClientFor } from "../masto/clients";

-export type RemoteServer = {
+export type Account = {
  site: string;
-};
-
-export type AccountKey = RemoteServer & {
  accessToken: string;
-};

-export function isAccountKey(object: RemoteServer): object is AccountKey {
-  return !!(object as Record<string, unknown>)["accessToken"];
-}
-
-export type Account = AccountKey & {
  tokenType: string;
  scope: string;
  createdAt: number;
@ -26,10 +17,6 @@ export type Account = AccountKey & {
  inf?: mastodon.v1.AccountCredentials;
 };

-export function isAccount(object: RemoteServer) {
-  return isAccountKey(object) && !!(object as Record<string, unknown>)["tokenType"];
-}
-
 export const $accounts = persistentAtom<Account[]>("accounts", [], {
  encode: JSON.stringify,
  decode: JSON.parse,
--- a/src/masto/base.ts
+++ b/src/masto/base.ts
@ -1,23 +0,0 @@
-import { createCacheBucket } from "~platform/cache";
-
-export const cacheBucket = /* @__PURE__ */ createCacheBucket("mastodon");
-
-export function toSmallCamelCase<T>(object: T) :T {
-  if (!object || typeof object !== "object") {
-    return object;
-  } else if (Array.isArray(object)) {
-    return object.map(toSmallCamelCase) as T
-  }
-
-  const result = {} as Record<keyof any, unknown>;
-  for (const k in object) {
-    const value = toSmallCamelCase(object[k])
-    const nk =
-      typeof k === "string"
-        ? k.replace(/_(.)/g, (_, match) => match.toUpperCase())
-        : k;
-    result[nk] = value;
-  }
-
-  return result as T;
-}
--- a/src/masto/clients.ts
+++ b/src/masto/clients.ts
@ -7,7 +7,7 @@ import {
  untrack,
  useContext,
 } from "solid-js";
-import { Account, type RemoteServer } from "../accounts/stores";
+import { Account } from "../accounts/stores";
 import { createRestAPIClient, mastodon } from "masto";
 import { useLocation } from "@solidjs/router";
 import { useNavigator } from "~platform/StackedRouter";
@ -115,7 +115,7 @@ export function useDefaultSession() {
 * - If the username is not present, any session on the site is returned; or,
 * - If no available session available for the pattern, an unauthorised session is returned.
 *
- * In an unauthorised session, the `.account` is {@link RemoteServer} and the `client` is an
+ * In an unauthorised session, the `.account` is `undefined` and the `client` is an
 * unauthorised client for the site. This client may not available for some operations.
 */
 export function useSessionForAcctStr(acct: Accessor<string>) {
@ -131,8 +131,8 @@ export function useSessionForAcctStr(acct: Accessor<string>) {
    return (
      authedSession ?? {
        client: createUnauthorizedClient(inputSite),
-        account: { site: inputSite } as RemoteServer, // TODO: we need some security checks here?
-      } as const
+        account: undefined,
+      }
    );
  });
 }
--- a/src/masto/statuses.ts
+++ b/src/masto/statuses.ts
@ -1,30 +0,0 @@
-import { CachedFetch } from "~platform/cache";
-import { cacheBucket, toSmallCamelCase } from "./base";
-import {
-  isAccountKey,
-  type RemoteServer,
-} from "../accounts/stores";
-import type { mastodon } from "masto";
-
-
-
-export const fetchStatus = /* @__PURE__ */ new CachedFetch(
-  cacheBucket,
-  (session: RemoteServer, id: string) => {
-    const headers = new Headers({
-      Accept: "application/json",
-    });
-    if (isAccountKey(session)) {
-      headers.set("Authorization", `Bearer ${session.accessToken}`);
-    }
-    return {
-      url: new URL(`./api/v1/statuses/${id}`, session.site).toString(),
-      headers,
-    };
-  },
-  async (response) => {
-    return toSmallCamelCase(
-      await response.json(),
-    ) as unknown as mastodon.v1.Status;
-  },
-);
--- a/src/platform/cache.ts
+++ b/src/platform/cache.ts
@ -1,145 +0,0 @@
-import { addMinutes, formatRFC7231 } from "date-fns";
-import {
-  createRenderEffect,
-  createResource,
-  untrack,
-} from "solid-js";
-
-export function createCacheBucket(name: string) {
-  let bucket: Cache | undefined;
-
-  return async () => {
-    if (bucket) {
-      return bucket;
-    }
-
-    bucket = await self.caches.open(name);
-
-    return bucket;
-  };
-}
-
-export type FetchRequest = {
-  url: string;
-  headers?: HeadersInit | Headers;
-};
-
-async function searchCache(request: Request) {
-  return await self.caches.match(request);
-}
-
-/**
- * Create a {@link fetch} helper with additional caching support.
- */
-export class CachedFetch<
-  Transformer extends (response: Response) => any,
-  Keyer extends (...args: any[]) => FetchRequest,
-> {
-  private cacheBucket: () => Promise<Cache>;
-  keyFor: Keyer;
-  private transform: Transformer;
-
-  constructor(
-    cacheBucket: () => Promise<Cache>,
-    keyFor: Keyer,
-    tranformer: Transformer,
-  ) {
-    this.cacheBucket = cacheBucket;
-    this.keyFor = keyFor;
-    this.transform = tranformer;
-  }
-
-  private async validateCache(request: Request) {
-    const buk = await this.cacheBucket();
-    const response = await fetch(request);
-    buk.put(request, response.clone());
-    return response;
-  }
-
-  private request(...args: Parameters<Keyer>) {
-    const { url, ...init } = this.keyFor(...args);
-    const request = new Request(url, init);
-    return request;
-  }
-
-  /**
-   * Race between the cache and the network result,
-   * use the fastest result.
-   *
-   * The cache will be revalidated.
-   */
-  async fastest(
-    ...args: Parameters<Keyer>
-  ): Promise<Awaited<ReturnType<Transformer>>> {
-    const request = this.request(...args);
-    const validating = this.validateCache(request);
-
-    const searching = searchCache(request);
-
-    const earlyResult = await Promise.race([validating, searching]);
-
-    if (earlyResult) {
-      return await this.transform(earlyResult);
-    }
-
-    return await this.transform(await validating);
-  }
-
-  /**
-   * Validate and return the result.
-   */
-  async validate(
-    ...args: Parameters<Keyer>
-  ): Promise<Awaited<ReturnType<Transformer>>> {
-    return await this.transform(
-      await this.validateCache(this.request(...args)),
-    );
-  }
-
-  /**  Set a response as the cache.
-   * Recommend to set `Expires` or `Cache-Control` to limit its live time.
-   */
-  async set(key: Parameters<Keyer>, response: Response) {
-    const buk = await this.cacheBucket();
-    await buk.put(this.request(...key), response);
-  }
-
-  /**  Set a json object as the cache.
-   * Only available for 5 minutes.
-   */
-  async setJson(key: Parameters<Keyer>, object: unknown) {
-    const response = new Response(JSON.stringify(object), {
-      status: 200,
-      headers: {
-        "Content-Type": "application/json",
-        Expires: formatRFC7231(addMinutes(new Date(), 5)),
-        "X-Cache-Src": "set",
-      },
-    });
-
-    await this.set(key, response);
-  }
-
-  /**
-   * Return a resource, using the cache at first, and revalidate
-   * later.
-   */
-  cachedAndRevalidate(args: () => Parameters<Keyer>) {
-    const res = createResource(args, (p) => this.validate(...p));
-
-    const checkCacheIfStillLoading = async () => {
-      const saved = await searchCache(this.request(...args()));
-      if (!saved) {
-        return;
-      }
-      const transformed = await this.transform(saved);
-      if (res[0].loading) {
-        res[1].mutate(transformed);
-      }
-    };
-
-    createRenderEffect(() => void untrack(() => checkCacheIfStillLoading()));
-
-    return res;
-  }
-}
--- a/src/profiles/Profile.tsx
+++ b/src/profiles/Profile.tsx
@ -1,5 +1,6 @@
 import {
  catchError,
+  createRenderEffect,
  createResource,
  createSignal,
  createUniqueId,
@ -13,6 +14,7 @@ import {
 } from "solid-js";
 import Scaffold from "~material/Scaffold";
 import {
+  AppBar,
  Avatar,
  Button,
  Checkbox,
@ -24,6 +26,7 @@ import {
  ListItemSecondaryAction,
  ListItemText,
  MenuItem,
+  Toolbar,
 } from "@suid/material";
 import {
  Close,
@ -60,7 +63,6 @@ import {
  default as ItemSelectionProvider,
 } from "../timelines/toots/ItemSelectionProvider";
 import AppTopBar from "~material/AppTopBar";
-import type { Account } from "../accounts/stores";

 const Profile: Component = () => {
  const { pop } = useNavigator();
@ -115,7 +117,7 @@ const Profile: Component = () => {
  };

  const isCurrentSessionProfile = () => {
-    return (session().account as Account).inf?.url === profile()?.url;
+    return session().account?.inf?.url === profile()?.url;
  };

  const [recentTootFilter, setRecentTootFilter] = createSignal({
@ -170,8 +172,8 @@ const Profile: Component = () => {

  const sessionDisplayName = createMemo(() =>
    resolveCustomEmoji(
-      (session().account as Account).inf?.displayName || "",
-      (session().account as Account).inf?.emojis ?? [],
+      session().account?.inf?.displayName || "",
+      session().account?.inf?.emojis ?? [],
    ),
  );

@ -242,7 +244,7 @@ const Profile: Component = () => {
          <Show when={session().account}>
            <MenuItem>
              <ListItemAvatar>
-                <Avatar src={(session().account as Account).inf?.avatar} />
+                <Avatar src={session().account?.inf?.avatar} />
              </ListItemAvatar>
              <ListItemText secondary={"Default account"}>
                <span innerHTML={sessionDisplayName()}></span>
@ -365,7 +367,7 @@ const Profile: Component = () => {
            aria-label={`${relationship()?.following ? "Unfollow" : "Follow"} on your home timeline`}
          >
            <ListItemAvatar>
-              <Avatar src={(session().account as Account).inf?.avatar}></Avatar>
+              <Avatar src={session().account?.inf?.avatar}></Avatar>
            </ListItemAvatar>
            <ListItemText
              secondary={
--- a/src/timelines/RegularToot.tsx
+++ b/src/timelines/RegularToot.tsx
@ -23,7 +23,6 @@ import TootPoll from "./toots/TootPoll";
 import TootActionGroup from "./toots/TootActionGroup.js";
 import TootAuthorGroup from "./toots/TootAuthorGroup.js";
 import "./RegularToot.css";
-import { vibrate } from "~platform/hardware.js";

 export type TootEnv = {
  boost: (value: mastodon.v1.Status) => void;
@ -53,107 +52,6 @@ export function useTootEnv() {
  return env;
 }

-/**
- * Create default toot env.
- *
- * This function does not provides the "reply" action.
- */
-export function createDefaultTootEnv(
-  client: () => mastodon.rest.Client | undefined,
-  setToot: (id: string, status: mastodon.v1.Status) => void,
-): TootEnv {
-  return {
-    async bookmark(status: mastodon.v1.Status) {
-      const c = client();
-      if (!c) return;
-
-      const result = await (status.bookmarked
-        ? c.v1.statuses.$select(status.id).unbookmark()
-        : c.v1.statuses.$select(status.id).bookmark());
-
-      setToot(result.id, result);
-    },
-
-    async boost(status: mastodon.v1.Status) {
-      const c = client();
-      if (!c) return;
-
-      vibrate(50);
-      const rootStatus = status.reblog ? status.reblog : status;
-      const reblogged = rootStatus.reblogged;
-      if (status.reblog) {
-        setToot(status.id, {
-          ...status,
-          reblog: { ...status.reblog!, reblogged: !reblogged },
-          reblogged: !reblogged,
-        });
-      } else {
-        setToot(status.id, {
-          ...status,
-          reblogged: !reblogged,
-        });
-      }
-      // modified the original
-
-      const result = reblogged
-        ? await c.v1.statuses.$select(status.id).unreblog()
-        : (await c.v1.statuses.$select(status.id).reblog());
-
-      if (status.reblog && !reblogged) {
-        // When calling /reblog, the result is the boost object (the actor
-        // is the calling account); for /unreblog, the result is the original
-        // toot. So we only do this trick only on the reblogging.
-        setToot(status.id, {
-          ...status,
-          reblog: result.reblog,
-        });
-      } else {
-        setToot(status.id, result);
-      }
-    },
-
-    async favourite(status: mastodon.v1.Status) {
-      const c = client();
-      if (!c) return;
-
-      const ovalue = status.favourited;
-      setToot(status.id, { ...status, favourited: !ovalue });
-
-      const result = ovalue
-        ? await c.v1.statuses.$select(status.id).unfavourite()
-        : await c.v1.statuses.$select(status.id).favourite();
-      setToot(status.id, result);
-    },
-
-    async vote(status: mastodon.v1.Status, votes: readonly number[]) {
-      const c = client();
-      if (!c) return;
-
-      const toot = status.reblog ?? status;
-      if (!toot.poll) return;
-
-      const npoll = await c.v1.polls.$select(toot.poll.id).votes.create({
-        choices: votes,
-      });
-
-      if (status.reblog) {
-        setToot(status.id, {
-          ...status,
-          reblog: {
-            ...status.reblog,
-            poll: npoll,
-          },
-        });
-      } else {
-        setToot(status.id, {
-          ...status,
-          poll: npoll,
-        });
-      }
-    },
-  };
-}
-
 type RegularTootProps = {
  status: mastodon.v1.Status;
  actionable?: boolean;
@ -305,7 +203,7 @@ const RegularToot: Component<RegularTootProps> = (oprops) => {
            class={cardStyle.cardNoPad}
            style={{ "margin-top": "8px" }}
          />
-          <TootActionGroup value={status()} class={cardStyle.cardGutSkip} />
+          <TootActionGroup value={toot()} class={cardStyle.cardGutSkip} />
        </Show>
      </article>
    </>
--- a/src/timelines/TootBottomSheet.tsx
+++ b/src/timelines/TootBottomSheet.tsx
@ -1,17 +1,26 @@
-import { useParams } from "@solidjs/router";
-import { catchError, createResource, Show, type Component } from "solid-js";
+import { useLocation, useParams } from "@solidjs/router";
+import {
+  catchError,
+  createEffect,
+  createRenderEffect,
+  createResource,
+  Show,
+  type Component,
+} from "solid-js";
 import Scaffold from "~material/Scaffold";
-import { CircularProgress } from "@suid/material";
+import { AppBar, CircularProgress, IconButton, Toolbar } from "@suid/material";
 import { Title } from "~material/typography";
+import { Close as CloseIcon } from "@suid/icons-material";
 import { useSessionForAcctStr } from "../masto/clients";
 import { resolveCustomEmoji } from "../masto/toot";
 import RegularToot, {
-  createDefaultTootEnv,
  findElementActionable,
  TootEnvProvider,
 } from "./RegularToot";
+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 TootComposer from "./TootComposer";
 import { useDocumentTitle } from "../utils";
@ -24,8 +33,18 @@ import ItemSelectionProvider, {
  createSingluarItemSelection,
 } from "./toots/ItemSelectionProvider";
 import AppTopBar from "~material/AppTopBar";
-import { fetchStatus } from "../masto/statuses";
-import { type Account } from "../accounts/stores";
+
+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 }>();
@ -35,19 +54,29 @@ const TootBottomSheet: Component = (props) => {
  const session = useSessionForAcctStr(acctText);
  const [, selectionState] = createSingluarItemSelection();

-  const [remoteToot, { mutate: setRemoteToot }] =
-    fetchStatus.cachedAndRevalidate(
-      () => [session().account, params.id] as const,
-    );
+  const [remoteToot, { mutate: setRemoteToot }] = createResource(
+    () => [session().client, params.id] as const,
+    async ([client, id]) => {
+      return await client.v1.statuses.$select(id).fetch();
+    },
+  );

  const toot = () =>
    catchError(remoteToot, (error) => {
      console.error(error);
-    });
+    }) ?? getCache(acctText(), params.id);
+
+  createEffect((lastTootId?: string) => {
+    const tootId = toot()?.id;
+    if (!tootId || lastTootId === tootId) return tootId;
+    const elementId = `toot-${tootId}`;
+    document.getElementById(elementId)?.scrollIntoView({ behavior: "smooth" });
+    return tootId;
+  });

  const [tootContextErrorUncaught, { refetch: refetchContext }] =
    createResource(
-      () => [session().client, toot()?.reblog?.id ?? params.id] as const,
+      () => [session().client, params.id] as const,
      async ([client, id]) => {
        return await client.v1.statuses.$select(id).context.fetch();
      },
@ -65,6 +94,12 @@ const TootBottomSheet: Component = (props) => {
    () => tootContext()?.descendants,
  );

+  createEffect(() => {
+    if (ancestors.list.length > 0) {
+      document.querySelector(`#toot-${toot()!.id}`)?.scrollIntoView();
+    }
+  });
+
  useDocumentTitle(() => {
    const t = toot()?.reblog ?? toot();
    const name = t?.account.displayName ?? "Someone";
@ -83,10 +118,49 @@ const TootBottomSheet: Component = (props) => {
    return s.account ? s : undefined;
  };

-  const mainTootEnv = createDefaultTootEnv(
-    () => actSession()?.client,
-    (_, status) => setRemoteToot(status),
-  );
+  const onBookmark = async () => {
+    const status = remoteToot()!;
+    const client = actSession()!.client;
+    setRemoteToot(
+      Object.assign({}, status, {
+        bookmarked: !status.bookmarked,
+      }),
+    );
+    const result = await (status.bookmarked
+      ? client.v1.statuses.$select(status.id).unbookmark()
+      : client.v1.statuses.$select(status.id).bookmark());
+    setRemoteToot(result);
+  };
+
+  const onBoost = async () => {
+    const status = remoteToot()!;
+    const client = actSession()!.client;
+    vibrate(50);
+    setRemoteToot(
+      Object.assign({}, status, {
+        reblogged: !status.reblogged,
+      }),
+    );
+    const result = await (status.reblogged
+      ? client.v1.statuses.$select(status.id).unreblog()
+      : client.v1.statuses.$select(status.id).reblog());
+    vibrate([20, 30]);
+    setRemoteToot(result.reblog!);
+  };
+
+  const onFav = async () => {
+    const status = remoteToot()!;
+    const client = actSession()!.client;
+    setRemoteToot(
+      Object.assign({}, status, {
+        favourited: !status.favourited,
+      }),
+    );
+    const result = await (status.favourited
+      ? client.v1.statuses.$select(status.id).favourite()
+      : client.v1.statuses.$select(status.id).unfavourite());
+    setRemoteToot(result);
+  };

  const defaultMentions = () => {
    const tootAcct = remoteToot()?.reblog?.account ?? remoteToot()?.account;
@ -100,6 +174,33 @@ const TootBottomSheet: Component = (props) => {
    return Array.from(new Set(values).keys());
  };

+  const vote = async (status: mastodon.v1.Status, votes: readonly number[]) => {
+    const client = session()?.client;
+    if (!client) return;
+
+    const toot = status.reblog ?? status;
+    if (!toot.poll) return;
+
+    const npoll = await client.v1.polls.$select(toot.poll.id).votes.create({
+      choices: votes,
+    });
+
+    if (status.reblog) {
+      setRemoteToot({
+        ...status,
+        reblog: {
+          ...status.reblog,
+          poll: npoll,
+        },
+      });
+    } else {
+      setRemoteToot({
+        ...status,
+        poll: npoll,
+      });
+    }
+  };
+
  const handleMainTootClick = (
    event: MouseEvent & { currentTarget: HTMLElement },
  ) => {
@ -165,51 +266,58 @@ const TootBottomSheet: Component = (props) => {
    >
      <div class="Scrollable">
        <TimeSourceProvider value={time}>
-          <ItemSelectionProvider value={selectionState}>
-            <TootList
-              threads={ancestors.list}
-              onUnknownThread={ancestors.getPath}
-              onChangeToot={ancestors.set}
+          <TootList
+            threads={ancestors.list}
+            onUnknownThread={ancestors.getPath}
+            onChangeToot={ancestors.set}
+          />
+
+          <article>
+            <Show when={toot()}>
+              <TootEnvProvider
+                value={{
+                  bookmark: onBookmark,
+                  boost: onBoost,
+                  favourite: onFav,
+                  vote,
+                }}
+              >
+                <RegularToot
+                  id={`toot-${toot()!.id}`}
+                  class={cards.card}
+                  style={{
+                    "scroll-margin-top":
+                      "calc(var(--scaffold-topbar-height) + 20px)",
+                    cursor: "auto",
+                    "user-select": "auto",
+                  }}
+                  status={toot()!}
+                  actionable={!!actSession()}
+                  evaluated={true}
+                  onClick={handleMainTootClick}
+                ></RegularToot>
+              </TootEnvProvider>
+            </Show>
+          </article>
+
+          <Show when={session()!.account}>
+            <TootComposer
+              mentions={defaultMentions()}
+              profile={session().account!}
+              replyToDisplayName={toot()?.account?.displayName || ""}
+              client={session().client}
+              onSent={() => refetchContext()}
+              inReplyToId={remoteToot()?.reblog?.id ?? remoteToot()?.id}
            />
+          </Show>

-            <article>
-              <Show when={toot()}>
-                <TootEnvProvider value={mainTootEnv}>
-                  <RegularToot
-                    id={`toot-${toot()!.id}`}
-                    class={cards.card}
-                    style={{
-                      "scroll-margin-top":
-                        "calc(var(--scaffold-topbar-height) + 20px)",
-                      cursor: "auto",
-                      "user-select": "auto",
-                    }}
-                    status={toot()!}
-                    actionable={!!actSession()}
-                    evaluated={true}
-                    onClick={handleMainTootClick}
-                  ></RegularToot>
-                </TootEnvProvider>
-              </Show>
-            </article>
-
-            <Show when={(session().account as Account).inf}>
-              <TootComposer
-                mentions={defaultMentions()}
-                profile={(session().account! as Account).inf}
-                replyToDisplayName={toot()?.account?.displayName || ""}
-                client={session().client}
-                onSent={() => refetchContext()}
-                inReplyToId={remoteToot()?.reblog?.id ?? remoteToot()?.id}
-              />
-            </Show>
-
-            <Show when={tootContextErrorUncaught.loading}>
-              <div class="progress-line">
-                <CircularProgress style="width: 1.5em; height: 1.5em;" />
-              </div>
-            </Show>
+          <Show when={tootContextErrorUncaught.loading}>
+            <div class="progress-line">
+              <CircularProgress style="width: 1.5em; height: 1.5em;" />
+            </div>
+          </Show>

+          <ItemSelectionProvider value={selectionState}>
            <TootList
              threads={descendants.list}
              onUnknownThread={descendants.getPath}
--- a/src/timelines/TootComposer.tsx
+++ b/src/timelines/TootComposer.tsx
@ -216,7 +216,7 @@ function cancelEvent(event: Event) {
 const TootComposer: Component<{
  ref?: Ref<HTMLDivElement>;
  style?: JSX.CSSProperties;
-  profile?: mastodon.v1.Account;
+  profile?: Account;
  replyToDisplayName?: string;
  mentions?: readonly string[];
  client?: mastodon.rest.Client;
@ -248,15 +248,15 @@ const TootComposer: Component<{

  createEffect(() => {
    if (active()) {
-      setTimeout(() => inputRef!.focus(), 0);
+      setTimeout(() => inputRef.focus(), 0);
    }
  });

  createEffect(() => {
-    if (inputRef!.value !== "") return;
+    if (inputRef.value !== "") return;
    if (props.mentions) {
      const prepText = props.mentions.join(" ") + " ";
-      inputRef!.value = prepText;
+      inputRef.value = prepText;
    }
  });

@ -294,7 +294,7 @@ const TootComposer: Component<{
    try {
      const status = await client.v1.statuses.create(
        {
-          status: inputRef!.value,
+          status: inputRef.value,
          language: language(),
          visibility: visibility(),
          inReplyToId: props.inReplyToId,
@ -309,7 +309,7 @@ const TootComposer: Component<{
      );

      props.onSent?.(status);
-      inputRef!.value = "";
+      inputRef.value = "";
    } finally {
      setSending(false);
    }
@ -363,7 +363,7 @@ const TootComposer: Component<{
      <div class="reply-input">
        <Show when={props.profile}>
          <Avatar
-            src={props.profile!.avatar}
+            src={props.profile!.inf?.avatar}
            sx={{ marginLeft: "-0.25em" }}
          />
        </Show>
--- a/src/timelines/TootList.tsx
+++ b/src/timelines/TootList.tsx
@ -1,16 +1,19 @@
 import {
  Component,
+  createSignal,
  ErrorBoundary,
  type Ref,
+  createSelector,
  Index,
  createMemo,
  For,
  createUniqueId,
 } from "solid-js";
 import { type mastodon } from "masto";
+import { vibrate } from "~platform/hardware";
 import { useDefaultSession } from "../masto/clients";
+import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
 import RegularToot, {
-  createDefaultTootEnv,
  findElementActionable,
  findRootToot,
  TootEnvProvider,
@ -20,7 +23,6 @@ import type { ThreadNode } from "../masto/timelines";
 import { useNavigator } from "~platform/StackedRouter";
 import { ANIM_CURVE_STD } from "~material/theme";
 import { useItemSelection } from "./toots/ItemSelectionProvider";
-import { fetchStatus } from "../masto/statuses";

 function durationOf(rect0: DOMRect, rect1: DOMRect) {
  const distancelt = Math.sqrt(
@ -59,12 +61,62 @@ const TootList: Component<{
  const [isExpanded, setExpanded] = useItemSelection();
  const { push } = useNavigator();

-  const tootEnv = createDefaultTootEnv(
-    () => session()?.client,
-    (...args) => props.onChangeToot(...args),
-  );
+  const onBookmark = async (status: mastodon.v1.Status) => {
+    const client = session()?.client;
+    if (!client) return;

-  const openFullScreenToot = async (
+    const result = await (status.bookmarked
+      ? client.v1.statuses.$select(status.id).unbookmark()
+      : client.v1.statuses.$select(status.id).bookmark());
+    props.onChangeToot(result.id, result);
+  };
+
+  const toggleBoost = async (status: mastodon.v1.Status) => {
+    const client = session()?.client;
+    if (!client) return;
+
+    vibrate(50);
+    const rootStatus = status.reblog ? status.reblog : status;
+    const reblogged = rootStatus.reblogged;
+    if (status.reblog) {
+      props.onChangeToot(status.id, {
+        ...status,
+        reblog: { ...status.reblog, reblogged: !reblogged },
+      });
+    } else {
+      props.onChangeToot(status.id, {
+        ...status,
+        reblogged: !reblogged,
+      });
+    }
+
+    const result = reblogged
+      ? await client.v1.statuses.$select(status.id).unreblog()
+      : (await client.v1.statuses.$select(status.id).reblog()).reblog!;
+
+    if (status.reblog) {
+      props.onChangeToot(status.id, {
+        ...status,
+        reblog: result,
+      });
+    } else {
+      props.onChangeToot(status.id, result);
+    }
+  };
+
+  const toggleFavourite = async (status: mastodon.v1.Status) => {
+    const client = session()?.client;
+    if (!client) return;
+    const ovalue = status.favourited;
+    props.onChangeToot(status.id, { ...status, favourited: !ovalue });
+
+    const result = ovalue
+      ? await client.v1.statuses.$select(status.id).unfavourite()
+      : await client.v1.statuses.$select(status.id).favourite();
+    props.onChangeToot(status.id, result);
+  };
+
+  const openFullScreenToot = (
    toot: mastodon.v1.Status,
    srcElement: HTMLElement,
    reply?: boolean,
@ -78,7 +130,7 @@ const TootList: Component<{
    }

    const acct = `${inf.username}@${p.site}`;
-    await fetchStatus.setJson([p, toot.id], toot)
+    setTootBottomSheetCache(acct, toot);

    push(`/${encodeURIComponent(acct)}/toot/${toot.id}`, {
      animateOpen(element) {
@ -182,6 +234,33 @@ const TootList: Component<{
    openFullScreenToot(status, element, true);
  };

+  const vote = async (status: mastodon.v1.Status, votes: readonly number[]) => {
+    const client = session()?.client;
+    if (!client) return;
+
+    const toot = status.reblog ?? status;
+    if (!toot.poll) return;
+
+    const npoll = await client.v1.polls.$select(toot.poll.id).votes.create({
+      choices: votes,
+    });
+
+    if (status.reblog) {
+      props.onChangeToot(status.id, {
+        ...status,
+        reblog: {
+          ...status.reblog,
+          poll: npoll,
+        },
+      });
+    } else {
+      props.onChangeToot(status.id, {
+        ...status,
+        poll: npoll,
+      });
+    }
+  };
+
  return (
    <ErrorBoundary
      fallback={(err, reset) => {
@ -191,8 +270,11 @@ const TootList: Component<{
    >
      <TootEnvProvider
        value={{
-          ...tootEnv,
+          boost: toggleBoost,
+          bookmark: onBookmark,
+          favourite: toggleFavourite,
          reply: reply,
+          vote: vote,
        }}
      >
        <div ref={props.ref} id={props.id} class="toot-list">
--- a/src/timelines/toots/TootActionGroup.tsx
+++ b/src/timelines/toots/TootActionGroup.tsx
@ -24,19 +24,13 @@ function isolatedCallback(e: MouseEvent) {
  e.stopPropagation();
 }

-/**
- * The actions of the toot card.
- *
- * The `value` must be the original toot (contains `reblog` if
- * it's a boost), since the value will be passed to the callbacks.
- */
 function TootActionGroup<T extends mastodon.v1.Status>(props: {
  value: T;
  class?: string;
 }) {
  const { reply, boost, favourite, bookmark } = useTootEnv();
  let actGrpElement: HTMLDivElement;
-  const toot = () => props.value.reblog ?? props.value;
+  const toot = () => props.value;
  return (
    <div
      ref={actGrpElement!}