Toot*: support favourite

src/timelines/Thread.tsx

@@ -1,9 +1,5 @@
 import type { mastodon } from "masto";
-import {
-  For,
-  type Component,
-  type Ref,
-} from "solid-js";
+import { Index, type Component, type Ref } from "solid-js";
 import RegularToot, { findRootToot } from "./RegularToot";
 import cardStyle from "../material/cards.module.css";
 import { css } from "solid-styled";
@@ -17,6 +13,7 @@ type TootActions = {
   onBoost(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
   onBookmark(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
   onReply(target: TootActionTarget, element: HTMLElement): void;
+  onFavourite(status: mastodon.v1.Status): void
 };
 
 type ThreadProps = {
@@ -45,41 +42,47 @@ const Thread: Component<ThreadProps> = (props) => {
     props.onReply({ client: props.client, status }, element);
   };
 
+  const threading = () => props.toots.length > 1;
+
+  const posThread = (index: number) => {
+    if (!threading()) return;
+
+    if (index === 0) {
+      return "top";
+    } else if (index === props.toots.length - 1) {
+      return "bottom";
+    }
+    return "middle";
+  };
+
   css`
-  .thread {
-    user-select: none;
-    cursor: pointer;
-  }
-  `
+    .thread {
+      user-select: none;
+      cursor: pointer;
+    }
+  `;
   return (
     <article ref={props.ref} class="thread" aria-setsize={props.toots.length}>
-      <For each={props.toots}>
+      <Index each={props.toots}>
         {(status, index) => {
-          const useThread = props.toots.length > 1;
-          const threadPosition = useThread
-            ? index() === 0
-              ? "top"
-              : index() === props.toots.length - 1
-                ? "bottom"
-                : "middle"
-            : undefined;
           return (
             <RegularToot
-              data-status-id={status.id}
-              data-thread-sort={index()}
-              status={status}
-              thread={threadPosition}
+              data-status-id={status().id}
+              data-thread-sort={index}
+              status={status()}
+              thread={posThread(index)}
               class={cardStyle.card}
-              evaluated={props.isExpended(status)}
-              actionable={props.isExpended(status)}
+              evaluated={props.isExpended(status())}
+              actionable={props.isExpended(status())}
               onBookmark={(s) => bookmark(s)}
               onRetoot={(s) => boost(s)}
+              onFavourite={props.onFavourite}
               onReply={reply}
-              onClick={[props.onItemClick, status]}
+              onClick={[props.onItemClick, status()]}
             />
           );
         }}
-      </For>
+      </Index>
     </article>
   );
 };

src/timelines/TootList.tsx

@@ -38,7 +38,7 @@ const TootList: Component<{
     props.onChangeToot(result.id, result);
   };
 
-  const onBoost = async (
+  const toggleBoost = async (
     client: mastodon.rest.Client,
     status: mastodon.v1.Status,
   ) => {
@@ -46,23 +46,39 @@ const TootList: Component<{
     const rootStatus = status.reblog ? status.reblog : status;
     const reblogged = rootStatus.reblogged;
     if (status.reblog) {
-      status.reblog = { ...status.reblog, reblogged: !reblogged };
-      props.onChangeToot(status.id, status);
+      props.onChangeToot(status.id, {
+        ...status,
+        reblog: { ...status.reblog, reblogged: !reblogged },
+      });
     } else {
-      props.onChangeToot(
-        status.id,
-        Object.assign(status, {
-          reblogged: !reblogged,
-        }),
-      );
+      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!;
-    props.onChangeToot(
-      status.id,
-      Object.assign(status.reblog ?? status, result.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;
+    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 = (
@@ -144,6 +160,13 @@ const TootList: Component<{
     openFullScreenToot(status, element, true);
   };
 
+  const getPath = (itemId: string) => {
+    return props
+      .onUnknownThread(itemId)!
+      .reverse()
+      .map((x) => x.value);
+  };
+
   return (
     <ErrorBoundary
       fallback={(err, reset) => {
@@ -152,16 +175,14 @@ const TootList: Component<{
     >
       <div ref={props.ref} id={props.id} class="toot-list">
         <For each={props.threads}>
-          {(itemId, index) => {
-            const path = props.onUnknownThread(itemId)!;
-            const toots = path.reverse().map((x) => x.value);
-
+          {(itemId) => {
             return (
               <Thread
-                toots={toots}
-                onBoost={onBoost}
+                toots={getPath(itemId)}
+                onBoost={toggleBoost}
                 onBookmark={onBookmark}
                 onReply={onReply}
+                onFavourite={toggleFavourite}
                 client={session()?.client!}
                 isExpended={checkIsExpended}
                 onItemClick={onItemClick}