TootBottomSheet: boost, favourite and bookmark (#6)

src/timelines/TootBottomSheet.tsx

@@ -25,6 +25,7 @@ import RegularToot from "./RegularToot";
 import type { mastodon } from "masto";
 import cards from "../material/cards.module.css";
 import { css } from "solid-styled";
+import { vibrate } from "../platform/hardware";
 
 let cachedEntry: [string, mastodon.v1.Status] | undefined;
 
@@ -61,7 +62,7 @@ const TootBottomSheet: Component = (props) => {
     return session().account;
   };
 
-  const [remoteToot] = createResource(
+  const [remoteToot, { mutate: setRemoteToot }] = createResource(
     () => [session().client, params.id] as const,
     async ([client, id]) => {
       return await client.v1.statuses.$select(id).fetch();
@@ -95,6 +96,45 @@ const TootBottomSheet: Component = (props) => {
     return "A toot";
   };
 
+  const actSession = () => {
+    const s = session();
+    return s.account ? s : undefined;
+  };
+
+  const onBookmark = async () => {
+    const status = remoteToot()!;
+    const client = actSession()!.client;
+    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);
+  };
+
+  const onFav = async () => {
+    const status = remoteToot()!;
+    const client = actSession()!.client;
+    const result = await (status.favourited
+      ? client.v1.statuses.$select(status.id).favourite()
+      : client.v1.statuses.$select(status.id).unfavourite());
+    setRemoteToot(result);
+  };
+
   css`
     .bottom-dock {
       position: sticky;
@@ -140,6 +180,7 @@ const TootBottomSheet: Component = (props) => {
             id={`toot-${item.id}`}
             class={cards.card}
             status={item}
+            actionable={false}
           ></RegularToot>
         )}
       </For>
@@ -149,10 +190,15 @@ const TootBottomSheet: Component = (props) => {
           <RegularToot
             id={`toot-${toot()!.id}`}
             class={cards.card}
-            style={{ "scroll-margin-top": "calc(var(--scaffold-topbar-height) + 20px)" }}
+            style={{
+              "scroll-margin-top": "calc(var(--scaffold-topbar-height) + 20px)",
+            }}
             status={toot()!}
-            actionable={true}
+            actionable={!!actSession()}
             evaluated={true}
+            onBookmark={onBookmark}
+            onRetoot={onBoost}
+            onFavourite={onFav}
           ></RegularToot>
         </Show>
       </article>
@@ -175,6 +221,7 @@ const TootBottomSheet: Component = (props) => {
             id={`toot-${item.id}`}
             class={cards.card}
             status={item}
+            actionable={false}
           ></RegularToot>
         )}
       </For>