From 5f91e6fdf022b89e749cdacba4f3cc83c8ffb90a Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Thu, 29 Jan 2026 09:24:42 +0900
Subject: [PATCH 1/2] refactor: tighten modal state and emoji overlay

---
 src/App.tsx                      |  11 +-
 src/infra/UnifiedApiClient.ts    |  13 +-
 src/ui/components/ComposeBox.tsx | 390 ++++++++++++++++---------------
 src/ui/styles/components.css     |   2 +
 4 files changed, 208 insertions(+), 208 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d2f9246..523e57c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -135,6 +135,7 @@ export const App = () => {
   );
   const [replyTarget, setReplyTarget] = useState<Status | null>(null);
   const [selectedStatus, setSelectedStatus] = useState<Status | null>(null);
+  const [selectedStatusThreadAccount, setSelectedStatusThreadAccount] = useState<Account | null>(null);
   const [selectedTimelineStatus, setSelectedTimelineStatus] = useState<SelectedTimelineStatus | null>(null);
   const [profileTargets, setProfileTargets] = useState<ProfileTarget[]>([]);
   const [statusModalZIndex, setStatusModalZIndex] = useState<number | null>(null);
@@ -891,8 +892,7 @@ export const App = () => {
   const handleStatusClick = (status: Status, columnAccount: Account | null) => {
     setSelectedStatus(status);
     setStatusModalZIndex(nextModalZIndexRef.current++);
-    // Status에 columnAccount 정보를 임시 저장
-    (status as any).__columnAccount = columnAccount;
+    setSelectedStatusThreadAccount(columnAccount);
   };
 
   const handleProfileOpen = useCallback((target: Status, columnAccount: Account | null) => {
@@ -915,6 +915,7 @@ export const App = () => {
   const handleCloseStatusModal = () => {
     setSelectedStatus(null);
     setStatusModalZIndex(null);
+    setSelectedStatusThreadAccount(null);
   };
 
   const handleReaction = useCallback(
@@ -1052,7 +1053,7 @@ export const App = () => {
     <div className="app">
       <header className="app-header">
         <a href="#/" className="app-logo" aria-label="Deck 홈">
-          <img src={logoUrl} alt="Deck logo" />
+          <img src={logoUrl} alt="Deck 로고" />
         </a>
         <div className="app-header-actions">
           <button
@@ -1122,7 +1123,7 @@ export const App = () => {
           {route === "home" ? (
             <section className="panel sidebar-panel">
               <div className="brand">
-                <img src={logoUrl} alt="Deck logo" />
+                <img src={logoUrl} alt="Deck 로고" />
                 <div className="brand-text">
                   <h1>Deck</h1>
                   <p>오픈소스 페디버스 웹 클라이언트</p>
@@ -1370,7 +1371,7 @@ export const App = () => {
         <StatusModal
           status={selectedStatus}
           account={composeAccount}
-          threadAccount={(selectedStatus as any).__columnAccount || null}
+          threadAccount={selectedStatusThreadAccount}
           api={services.api}
           zIndex={statusModalZIndex ?? undefined}
           onClose={handleCloseStatusModal}
diff --git a/src/infra/UnifiedApiClient.ts b/src/infra/UnifiedApiClient.ts
index 03558a0..5785554 100644
--- a/src/infra/UnifiedApiClient.ts
+++ b/src/infra/UnifiedApiClient.ts
@@ -31,8 +31,7 @@ export class UnifiedApiClient implements MastodonApi {
   }
 
   fetchInstanceInfo(account: Account): Promise<InstanceInfo> {
-    const client = this.getClient(account) as any;
-    return client.fetchInstanceInfo(account);
+    return this.getClient(account).fetchInstanceInfo(account);
   }
 
   fetchAccountProfile(account: Account, accountId: string) {
@@ -128,14 +127,6 @@ export class UnifiedApiClient implements MastodonApi {
   }
 
   async fetchThreadContext(account: Account, statusId: string): Promise<ThreadContext> {
-    if (account.platform === "misskey") {
-      // MisskeyHttpClient에는 fetchConversation 메서드가 있음
-      const misskeyClient = this.getClient(account) as any;
-      return misskeyClient.fetchConversation(account, statusId);
-    } else {
-      // MastodonHttpClient에는 fetchContext 메서드가 있음
-      const mastodonClient = this.getClient(account) as any;
-      return mastodonClient.fetchContext(account, statusId);
-    }
+    return this.getClient(account).fetchThreadContext(account, statusId);
   }
 }
diff --git a/src/ui/components/ComposeBox.tsx b/src/ui/components/ComposeBox.tsx
index a909c96..67e947c 100644
--- a/src/ui/components/ComposeBox.tsx
+++ b/src/ui/components/ComposeBox.tsx
@@ -3,6 +3,7 @@ import type { Account, Visibility } from "../../domain/types";
 import type { MastodonApi } from "../../services/MastodonApi";
 import { useEmojiManager, type EmojiItem } from "../hooks/useEmojiManager";
 import { useImageZoom } from "../hooks/useImageZoom";
+import { useClickOutside } from "../hooks/useClickOutside";
 import { useToast } from "../state/ToastContext";
 import {
   calculateCharacterCount,
@@ -308,6 +309,8 @@ export const ComposeBox = ({
     }
   }, [emojiPanelOpen, account, loadEmojis]);
 
+  useClickOutside(emojiPanelRef, emojiPanelOpen, () => setEmojiPanelOpen(false), [emojiToggleRef]);
+
   useEffect(() => {
     if (!emojiPanelOpen) {
       setEmojiSearchQuery("");
@@ -1072,144 +1075,57 @@ export const ComposeBox = ({
           </div>
         </div>
         {emojiPanelOpen ? (
-          <div
-            className="compose-emoji-panel"
-            role="region"
-            aria-label="이모지 팔렛트"
-            ref={emojiPanelRef}
-            onKeyDown={handleEmojiPanelKeyDown}
-            data-emoji-picker-open="true"
-            tabIndex={-1}
-          >
-            {!account ? <p className="compose-emoji-empty">계정을 선택해주세요.</p> : null}
-            {account ? (
-              <div className="compose-emoji-search">
-                <input
-                  type="text"
-                  value={emojiSearchQuery}
-                  onChange={(event) => setEmojiSearchQuery(event.target.value)}
-                  placeholder="이모지 검색"
-                  aria-label="이모지 검색"
-                  disabled={emojiStatus === "loading"}
-                />
-              </div>
-            ) : null}
-            {account && emojiStatus === "loading" ? (
-              <p className="compose-emoji-empty">이모지를 불러오는 중...</p>
-            ) : null}
-            {account && emojiStatus === "error" ? (
-              <div className="compose-emoji-empty">
-                <p>{emojiError ?? "이모지를 불러오지 못했습니다."}</p>
-                <button type="button" className="ghost" onClick={() => loadEmojis()}>
-                  다시 불러오기
-                </button>
-              </div>
-            ) : null}
-             {account && emojiCategories.length === 0 ? (
-              <p className="compose-emoji-empty">사용할 수 있는 이모지가 없습니다.</p>
-            ) : null}
-            {account && emojiCategories.length > 0 ? (
-              <>
-                {hasEmojiSearch ? (
-                  <section className="compose-emoji-category">
-                    <div className="compose-emoji-category-toggle is-static">
-                      <span>검색 결과</span>
-                      <span className="compose-emoji-count">{emojiSearchResults.length}</span>
-                    </div>
-                    {emojiSearchResults.length > 0 ? (
-                      <div className="compose-emoji-grid">
-                        {emojiSearchResults.map((emoji) => (
-                          <button
-                            key={`search:${emoji.id}`}
-                            type="button"
-                            className="compose-emoji-button"
-                            onClick={() => handleEmojiSelect(emoji)}
-                            aria-label={`이모지 ${emoji.label}`}
-                            title={emoji.shortcode ? `:${emoji.shortcode}:` : undefined}
-                            data-emoji-nav="emoji"
-                            data-emoji-id={emoji.id}
-                          >
-                            {emoji.unicode ? (
-                              <span className="compose-emoji-text" aria-hidden="true">
-                                {emoji.unicode}
-                              </span>
-                            ) : emoji.url ? (
-                              <img src={emoji.url} alt="" loading="lazy" />
-                            ) : null}
-                          </button>
-                        ))}
+          <>
+            <div className="overlay-backdrop" aria-hidden="true" onClick={() => setEmojiPanelOpen(false)} />
+            <div
+              className="compose-emoji-panel"
+              role="region"
+              aria-label="이모지 팔렛트"
+              ref={emojiPanelRef}
+              onKeyDown={handleEmojiPanelKeyDown}
+              data-emoji-picker-open="true"
+              tabIndex={-1}
+            >
+              {!account ? <p className="compose-emoji-empty">계정을 선택해주세요.</p> : null}
+              {account ? (
+                <div className="compose-emoji-search">
+                  <input
+                    type="text"
+                    value={emojiSearchQuery}
+                    onChange={(event) => setEmojiSearchQuery(event.target.value)}
+                    placeholder="이모지 검색"
+                    aria-label="이모지 검색"
+                    disabled={emojiStatus === "loading"}
+                  />
+                </div>
+              ) : null}
+              {account && emojiStatus === "loading" ? (
+                <p className="compose-emoji-empty">이모지를 불러오는 중...</p>
+              ) : null}
+              {account && emojiStatus === "error" ? (
+                <div className="compose-emoji-empty">
+                  <p>{emojiError ?? "이모지를 불러오지 못했습니다."}</p>
+                  <button type="button" className="ghost" onClick={() => loadEmojis()}>
+                    다시 불러오기
+                  </button>
+                </div>
+              ) : null}
+              {account && emojiCategories.length === 0 ? (
+                <p className="compose-emoji-empty">사용할 수 있는 이모지가 없습니다.</p>
+              ) : null}
+              {account && emojiCategories.length > 0 ? (
+                <>
+                  {hasEmojiSearch ? (
+                    <section className="compose-emoji-category">
+                      <div className="compose-emoji-category-toggle is-static">
+                        <span>검색 결과</span>
+                        <span className="compose-emoji-count">{emojiSearchResults.length}</span>
                       </div>
-                    ) : (
-                      <p className="compose-emoji-empty">검색 결과가 없습니다.</p>
-                    )}
-                  </section>
-                ) : null}
-                {(() => {
-                  const recentCategory = emojiCategories.find((item) => item.id === "recent");
-                  if (!recentCategory) return null;
-                  const categoryKey = `${account.instanceUrl}::${recentCategory.id}`;
-                  const isCollapsed = !recentOpen;
-                  return (
-                    <section key={categoryKey} className="compose-emoji-category">
-                      <button
-                        type="button"
-                        className="compose-emoji-category-toggle"
-                        onClick={() => handleToggleCategory(recentCategory.id)}
-                        aria-expanded={!isCollapsed}
-                        data-emoji-nav="category"
-                        data-emoji-category-id={recentCategory.id}
-                      >
-                        <span>{recentCategory.label}</span>
-                        <span className="compose-emoji-count">{recentCategory.emojis.length}</span>
-                      </button>
-                      {isCollapsed ? null : (
-                        <div className="compose-emoji-grid">
-                          {recentCategory.emojis.map((emoji) => (
-                            <button
-                              key={`${recentCategory.id}:${emoji.id}`}
-                              type="button"
-                              className="compose-emoji-button"
-                              onClick={() => handleEmojiSelect(emoji)}
-                              aria-label={`이모지 ${emoji.label}`}
-                              title={emoji.shortcode ? `:${emoji.shortcode}:` : undefined}
-                              data-emoji-nav="emoji"
-                              data-emoji-id={emoji.id}
-                            >
-                              {emoji.unicode ? (
-                                <span className="compose-emoji-text" aria-hidden="true">
-                                  {emoji.unicode}
-                                </span>
-                              ) : emoji.url ? (
-                                <img src={emoji.url} alt="" loading="lazy" />
-                              ) : null}
-                            </button>
-                          ))}
-                        </div>
-                      )}
-                    </section>
-                  );
-                })()}
-                {customEmojiCategories.map((category) => {
-                  const categoryKey = `${account.instanceUrl}::${category.id}`;
-                  const isCollapsed = !expandedCategories.has(category.id);
-                  return (
-                    <section key={categoryKey} className="compose-emoji-category">
-                      <button
-                        type="button"
-                        className="compose-emoji-category-toggle"
-                        onClick={() => handleToggleCategory(category.id)}
-                        aria-expanded={!isCollapsed}
-                        data-emoji-nav="category"
-                        data-emoji-category-id={category.id}
-                      >
-                        <span>{category.label}</span>
-                        <span className="compose-emoji-count">{category.emojis.length}</span>
-                      </button>
-                      {isCollapsed ? null : (
+                      {emojiSearchResults.length > 0 ? (
                         <div className="compose-emoji-grid">
-                          {category.emojis.map((emoji) => (
+                          {emojiSearchResults.map((emoji) => (
                             <button
-                              key={`${category.id}:${emoji.id}`}
+                              key={`search:${emoji.id}`}
                               type="button"
                               className="compose-emoji-button"
                               onClick={() => handleEmojiSelect(emoji)}
@@ -1228,66 +1144,156 @@ export const ComposeBox = ({
                             </button>
                           ))}
                         </div>
+                      ) : (
+                        <p className="compose-emoji-empty">검색 결과가 없습니다.</p>
                       )}
                     </section>
-                  );
-                })}
-                {customEmojiCategories.length > 0 && standardEmojiCategories.length > 0 ? (
-                  <div
-                    className="compose-emoji-divider"
-                    role="separator"
-                    aria-label="표준 이모지 구분선"
-                  >
-                    <span>표준 이모지</span>
-                  </div>
-                ) : null}
-                {standardEmojiCategories.map((category) => {
-                  const categoryKey = `${account.instanceUrl}::${category.id}`;
-                  const isCollapsed = !expandedCategories.has(category.id);
-                  return (
-                    <section key={categoryKey} className="compose-emoji-category">
-                      <button
-                        type="button"
-                        className="compose-emoji-category-toggle"
-                        onClick={() => handleToggleCategory(category.id)}
-                        aria-expanded={!isCollapsed}
-                        data-emoji-nav="category"
-                        data-emoji-category-id={category.id}
-                      >
-                        <span>{category.label}</span>
-                        <span className="compose-emoji-count">{category.emojis.length}</span>
-                      </button>
-                      {isCollapsed ? null : (
-                        <div className="compose-emoji-grid">
-                          {category.emojis.map((emoji) => (
-                            <button
-                              key={`${category.id}:${emoji.id}`}
-                              type="button"
-                              className="compose-emoji-button"
-                              onClick={() => handleEmojiSelect(emoji)}
-                              aria-label={`이모지 ${emoji.label}`}
-                              title={emoji.shortcode ? `:${emoji.shortcode}:` : undefined}
-                              data-emoji-nav="emoji"
-                              data-emoji-id={emoji.id}
-                            >
-                              {emoji.unicode ? (
-                                <span className="compose-emoji-text" aria-hidden="true">
-                                  {emoji.unicode}
-                                </span>
-                              ) : emoji.url ? (
-                                <img src={emoji.url} alt="" loading="lazy" />
-                              ) : null}
-                            </button>
-                          ))}
-                        </div>
-                      )}
-                    </section>
-                  );
-                })}
-              </>
-            ) : null}
+                  ) : null}
+                  {(() => {
+                    const recentCategory = emojiCategories.find((item) => item.id === "recent");
+                    if (!recentCategory) return null;
+                    const categoryKey = `${account.instanceUrl}::${recentCategory.id}`;
+                    const isCollapsed = !recentOpen;
+                    return (
+                      <section key={categoryKey} className="compose-emoji-category">
+                        <button
+                          type="button"
+                          className="compose-emoji-category-toggle"
+                          onClick={() => handleToggleCategory(recentCategory.id)}
+                          aria-expanded={!isCollapsed}
+                          data-emoji-nav="category"
+                          data-emoji-category-id={recentCategory.id}
+                        >
+                          <span>{recentCategory.label}</span>
+                          <span className="compose-emoji-count">{recentCategory.emojis.length}</span>
+                        </button>
+                        {isCollapsed ? null : (
+                          <div className="compose-emoji-grid">
+                            {recentCategory.emojis.map((emoji) => (
+                              <button
+                                key={`${recentCategory.id}:${emoji.id}`}
+                                type="button"
+                                className="compose-emoji-button"
+                                onClick={() => handleEmojiSelect(emoji)}
+                                aria-label={`이모지 ${emoji.label}`}
+                                title={emoji.shortcode ? `:${emoji.shortcode}:` : undefined}
+                                data-emoji-nav="emoji"
+                                data-emoji-id={emoji.id}
+                              >
+                                {emoji.unicode ? (
+                                  <span className="compose-emoji-text" aria-hidden="true">
+                                    {emoji.unicode}
+                                  </span>
+                                ) : emoji.url ? (
+                                  <img src={emoji.url} alt="" loading="lazy" />
+                                ) : null}
+                              </button>
+                            ))}
+                          </div>
+                        )}
+                      </section>
+                    );
+                  })()}
+                  {customEmojiCategories.map((category) => {
+                    const categoryKey = `${account.instanceUrl}::${category.id}`;
+                    const isCollapsed = !expandedCategories.has(category.id);
+                    return (
+                      <section key={categoryKey} className="compose-emoji-category">
+                        <button
+                          type="button"
+                          className="compose-emoji-category-toggle"
+                          onClick={() => handleToggleCategory(category.id)}
+                          aria-expanded={!isCollapsed}
+                          data-emoji-nav="category"
+                          data-emoji-category-id={category.id}
+                        >
+                          <span>{category.label}</span>
+                          <span className="compose-emoji-count">{category.emojis.length}</span>
+                        </button>
+                        {isCollapsed ? null : (
+                          <div className="compose-emoji-grid">
+                            {category.emojis.map((emoji) => (
+                              <button
+                                key={`${category.id}:${emoji.id}`}
+                                type="button"
+                                className="compose-emoji-button"
+                                onClick={() => handleEmojiSelect(emoji)}
+                                aria-label={`이모지 ${emoji.label}`}
+                                title={emoji.shortcode ? `:${emoji.shortcode}:` : undefined}
+                                data-emoji-nav="emoji"
+                                data-emoji-id={emoji.id}
+                              >
+                                {emoji.unicode ? (
+                                  <span className="compose-emoji-text" aria-hidden="true">
+                                    {emoji.unicode}
+                                  </span>
+                                ) : emoji.url ? (
+                                  <img src={emoji.url} alt="" loading="lazy" />
+                                ) : null}
+                              </button>
+                            ))}
+                          </div>
+                        )}
+                      </section>
+                    );
+                  })}
+                  {customEmojiCategories.length > 0 && standardEmojiCategories.length > 0 ? (
+                    <div
+                      className="compose-emoji-divider"
+                      role="separator"
+                      aria-label="표준 이모지 구분선"
+                    >
+                      <span>표준 이모지</span>
+                    </div>
+                  ) : null}
+                  {standardEmojiCategories.map((category) => {
+                    const categoryKey = `${account.instanceUrl}::${category.id}`;
+                    const isCollapsed = !expandedCategories.has(category.id);
+                    return (
+                      <section key={categoryKey} className="compose-emoji-category">
+                        <button
+                          type="button"
+                          className="compose-emoji-category-toggle"
+                          onClick={() => handleToggleCategory(category.id)}
+                          aria-expanded={!isCollapsed}
+                          data-emoji-nav="category"
+                          data-emoji-category-id={category.id}
+                        >
+                          <span>{category.label}</span>
+                          <span className="compose-emoji-count">{category.emojis.length}</span>
+                        </button>
+                        {isCollapsed ? null : (
+                          <div className="compose-emoji-grid">
+                            {category.emojis.map((emoji) => (
+                              <button
+                                key={`${category.id}:${emoji.id}`}
+                                type="button"
+                                className="compose-emoji-button"
+                                onClick={() => handleEmojiSelect(emoji)}
+                                aria-label={`이모지 ${emoji.label}`}
+                                title={emoji.shortcode ? `:${emoji.shortcode}:` : undefined}
+                                data-emoji-nav="emoji"
+                                data-emoji-id={emoji.id}
+                              >
+                                {emoji.unicode ? (
+                                  <span className="compose-emoji-text" aria-hidden="true">
+                                    {emoji.unicode}
+                                  </span>
+                                ) : emoji.url ? (
+                                  <img src={emoji.url} alt="" loading="lazy" />
+                                ) : null}
+                              </button>
+                            ))}
+                          </div>
+                        )}
+                      </section>
+                    );
+                  })}
+                </>
+              ) : null}
 
-          </div>
+            </div>
+          </>
         ) : null}
       </form>
       {isSubmitting ? (
diff --git a/src/ui/styles/components.css b/src/ui/styles/components.css
index b336506..37360b3 100644
--- a/src/ui/styles/components.css
+++ b/src/ui/styles/components.css
@@ -921,6 +921,8 @@
 }
 
 .compose-emoji-panel {
+  position: relative;
+  z-index: 20;
   margin-top: 12px;
   border: 1px solid var(--color-emoji-panel-border);
   border-radius: 12px;

From 1680cde30311ddf84951a98d024603332d685e54 Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Thu, 29 Jan 2026 09:31:14 +0900
Subject: [PATCH 2/2] fix: enable menu navigation from shortcut open

---
 src/ui/components/TimelineSection.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/ui/components/TimelineSection.tsx b/src/ui/components/TimelineSection.tsx
index 417fada..a2f114b 100644
--- a/src/ui/components/TimelineSection.tsx
+++ b/src/ui/components/TimelineSection.tsx
@@ -739,6 +739,20 @@ export const TimelineSection = ({
     ]
   );
 
+  useEffect(() => {
+    if (!timelineMenuOpen && !notificationsOpen && !menuOpen) {
+      return;
+    }
+    const onKeyDown = (event: KeyboardEvent) => {
+      const handled = handleTimelineShortcuts(event);
+      if (handled) {
+        event.stopPropagation();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown, { capture: true });
+    return () => window.removeEventListener("keydown", onKeyDown, { capture: true });
+  }, [handleTimelineShortcuts, menuOpen, notificationsOpen, timelineMenuOpen]);
+
   useEffect(() => {
     registerTimelineShortcutHandler(section.id, handleTimelineShortcuts);
     return () => registerTimelineShortcutHandler(section.id, null);