Merge pull request #198 from deholic/release/v0.13.0

release: v0.13.0

Author: deholic

src/App.tsx

@@ -422,6 +422,27 @@ export class MastodonHttpClient implements MastodonApi {
     throw new Error("리액션은 미스키 계정에서만 사용할 수 있습니다.");
   }
 
+  async fetchNoteState(
+    account: Account,
+    noteId: string
+  ): Promise<{ isFavourited: boolean; isReblogged: boolean; bookmarked: boolean }> {
+    const response = await fetch(`${account.instanceUrl}/api/v1/statuses/${noteId}`, {
+      headers: {
+        "Authorization": `Bearer ${account.accessToken}`
+      }
+    });
+    if (!response.ok) {
+      throw new Error("게시물 상태를 불러오지 못했습니다.");
+    }
+    const data = (await response.json()) as unknown;
+    const status = mapStatus(data);
+    return {
+      isFavourited: status.favourited,
+      isReblogged: status.reblogged,
+      bookmarked: status.bookmarked
+    };
+  }
+
   async reblog(account: Account, statusId: string): Promise<Status> {
     return this.postAction(account, statusId, "reblog");
   }

src/infra/MastodonHttpClient.ts

@@ -40,4 +40,8 @@ export interface MastodonApi {
   unblockAccount(account: Account, accountId: string): Promise<AccountRelationship>;
   fetchAccountStatuses(account: Account, accountId: string, limit: number, maxId?: string): Promise<Status[]>;
   fetchThreadContext(account: Account, statusId: string): Promise<ThreadContext>;
+  fetchNoteState(
+    account: Account,
+    noteId: string
+  ): Promise<{ isFavourited: boolean; isReblogged: boolean; bookmarked: boolean }>;
 }

src/services/MastodonApi.ts

@@ -1,5 +1,6 @@
-import React, { useMemo, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import type { Account } from "../../domain/types";
+import type { Ref } from "react";
 import { formatHandle } from "../utils/account";
 import { useClickOutside } from "../hooks/useClickOutside";
 import { AccountLabel } from "./AccountLabel";
@@ -8,15 +9,24 @@ export const AccountSelector = ({
   accounts,
   activeAccountId,
   setActiveAccount,
+  onSelectionDone,
+  summaryRef,
+  summaryTitle,
   variant = "panel"
 }: {
   accounts: Account[];
   activeAccountId: string | null;
   setActiveAccount: (id: string) => void;
+  onSelectionDone?: () => void;
+  summaryRef?: Ref<HTMLElement>;
+  summaryTitle?: string;
   variant?: "panel" | "inline";
 }) => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [highlightedAccountId, setHighlightedAccountId] = useState<string | null>(null);
+  const detailsRef = useRef<HTMLDetailsElement | null>(null);
   const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const selectionChangeRef = useRef(false);
 
   useClickOutside(dropdownRef, dropdownOpen, () => setDropdownOpen(false));
 
@@ -25,6 +35,75 @@ export const AccountSelector = ({
     [accounts, activeAccountId]
   );
 
+  useEffect(() => {
+    if (!dropdownOpen) {
+      setHighlightedAccountId(null);
+      return;
+    }
+    setHighlightedAccountId(activeAccountId ?? accounts[0]?.id ?? null);
+  }, [activeAccountId, accounts, dropdownOpen]);
+
+  useEffect(() => {
+    if (!dropdownOpen && selectionChangeRef.current) {
+      selectionChangeRef.current = false;
+      onSelectionDone?.();
+    }
+  }, [dropdownOpen, onSelectionDone]);
+
+  useEffect(() => {
+    if (!dropdownOpen) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!dropdownOpen) {
+        return;
+      }
+      if (!detailsRef.current?.contains(document.activeElement)) {
+        return;
+      }
+      if (accounts.length === 0) {
+        return;
+      }
+
+      const currentIndex = Math.max(
+        0,
+        accounts.findIndex((account) => account.id === (highlightedAccountId ?? activeAccountId))
+      );
+
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        const offset = event.key === "ArrowDown" ? 1 : -1;
+        const nextIndex = (currentIndex + offset + accounts.length) % accounts.length;
+        const nextAccount = accounts[nextIndex];
+        if (nextAccount) {
+          setHighlightedAccountId(nextAccount.id);
+          selectionChangeRef.current = true;
+          setActiveAccount(nextAccount.id);
+        }
+        return;
+      }
+
+      if (event.key === "Enter") {
+        event.preventDefault();
+        if (highlightedAccountId) {
+          selectionChangeRef.current = true;
+          setActiveAccount(highlightedAccountId);
+        }
+        setDropdownOpen(false);
+        return;
+      }
+
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setDropdownOpen(false);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [accounts, activeAccountId, dropdownOpen, highlightedAccountId, setActiveAccount]);
+
   const wrapperClassName =
     variant === "panel" ? "panel account-selector-panel" : "account-selector-inline";
   const Wrapper = variant === "panel" ? "section" : "div";
@@ -33,11 +112,16 @@ export const AccountSelector = ({
     <Wrapper className={wrapperClassName}>
       <div className="account-selector-header">
         <details
+          ref={detailsRef}
           className="account-selector"
           open={dropdownOpen}
           onToggle={(event) => setDropdownOpen(event.currentTarget.open)}
         >
-          <summary className="account-selector-summary">
+          <summary
+            ref={summaryRef}
+            className="account-selector-summary"
+            title={summaryTitle ?? "계정 선택 (Ctrl+Shift+A)"}
+          >
             {activeAccount ? (
               <AccountLabel
                 avatarUrl={activeAccount.avatarUrl}
@@ -59,11 +143,22 @@ export const AccountSelector = ({
             <ul className="account-list">
               {accounts.map((account) => {
                 const isActiveAccount = account.id === activeAccountId;
+                const classNames = [] as string[];
+                if (account.id === highlightedAccountId) {
+                  classNames.push("is-highlighted");
+                }
+                if (isActiveAccount) {
+                  classNames.push("active");
+                }
                 return (
-                  <li key={account.id} className={isActiveAccount ? "active" : ""}>
+                  <li
+                    key={account.id}
+                    className={classNames.join(" ")}
+                  >
                     <button
                       type="button"
                       onClick={() => {
+                        selectionChangeRef.current = true;
                         setActiveAccount(account.id);
                         setDropdownOpen(false);
                       }}