From 435b9b256ab738ad35c3442750bdf37cd7ff462f Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Thu, 15 Jan 2026 11:19:50 +0900
Subject: [PATCH 01/10] =?UTF-8?q?feat:=20=EB=A7=88=EC=8A=A4=ED=86=A0?=
 =?UTF-8?q?=EB=8F=88=20=ED=83=80=EC=9E=84=EB=9D=BC=EC=9D=B8=EC=97=90=20?=
 =?UTF-8?q?=EB=B6=81=EB=A7=88=ED=81=AC=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- MastodonApi 인터페이스에 bookmark/unbookmark 메서드 추가
- MastodonHttpClient에서 API 호출 구현 (POST /api/v1/statuses/:id/bookmark)
- Status 타입에 bookmarked 필드 추가
- TimelineItem 메뉴에 북마크/북마크 취소 버튼 추가
- App.tsx, StatusModal.tsx, ProfileModal.tsx에 핸들러 구현
- 낙관적 업데이트와 실패 롤백 로직 포함
- 성공 시 토스트 메시지 표시 기능 추가
- UnifiedApiClient에 북마크 메서드 라우팅 추가
---
 src/App.tsx                        | 59 ++++++++++++++++++++++++++++--
 src/domain/types.ts                |  1 +
 src/infra/MastodonHttpClient.ts    | 12 ++++++
 src/infra/UnifiedApiClient.ts      |  8 ++++
 src/infra/mastodonMapper.ts        |  4 ++
 src/services/MastodonApi.ts        |  5 ++-
 src/ui/components/ProfileModal.tsx | 28 ++++++++++++--
 src/ui/components/StatusModal.tsx  | 17 ++++++---
 src/ui/components/TimelineItem.tsx | 18 +++++++--
 9 files changed, 135 insertions(+), 17 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index fa7b957..1f4a7b3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -529,6 +529,34 @@ const TimelineSection = ({
     }
   };
 
+  const handleToggleBookmark = async (status: Status) => {
+    if (!account) {
+      onError("계정을 선택해주세요.");
+      return;
+    }
+    onError(null);
+    const isBookmarking = !status.bookmarked;
+    const optimistic = {
+      ...status,
+      bookmarked: isBookmarking
+    };
+    timeline.updateItem(optimistic);
+    try {
+      const updated = status.bookmarked
+        ? await services.api.unbookmark(account, status.id)
+        : await services.api.bookmark(account, status.id);
+      timeline.updateItem(updated);
+      if (isBookmarking) {
+        showToast("북마크했습니다.");
+      } else {
+        showToast("북마크를 취소했습니다.");
+      }
+    } catch (err) {
+      onError(err instanceof Error ? err.message : "북마크 처리에 실패했습니다.");
+      timeline.updateItem(status);
+    }
+  };
+
   const handleReact = useCallback(
     (status: Status, reaction: ReactionInput) => {
       onReact(account, status, reaction);
@@ -678,8 +706,9 @@ const TimelineSection = ({
                              onReply={(item) => onReply(item, account)}
                              onStatusClick={(status) => onStatusClick(status, account)}
                              onToggleFavourite={handleToggleFavourite}
-                            onToggleReblog={handleToggleReblog}
-                            onDelete={handleDeleteStatus}
+                             onToggleReblog={handleToggleReblog}
+                             onToggleBookmark={handleToggleBookmark}
+                             onDelete={handleDeleteStatus}
                             onReact={handleReact}
                             onProfileClick={(item) => onProfileClick(item, account)}
                             activeHandle={
@@ -810,8 +839,9 @@ const TimelineSection = ({
                  onReply={(item) => onReply(item, account)}
                  onStatusClick={(status) => onStatusClick(status, account)}
                  onToggleFavourite={handleToggleFavourite}
-                onToggleReblog={handleToggleReblog}
-                onDelete={handleDeleteStatus}
+                 onToggleReblog={handleToggleReblog}
+                 onToggleBookmark={handleToggleBookmark}
+                 onDelete={handleDeleteStatus}
                 onReact={handleReact}
                 onProfileClick={(item) => onProfileClick(item, account)}
                 activeHandle={
@@ -2067,6 +2097,27 @@ onAccountChange={setSectionAccount}
               setActionError(err instanceof Error ? err.message : "부스트 처리에 실패했습니다.");
             }
           }}
+          onToggleBookmark={async (status) => {
+            if (!composeAccount) {
+              setActionError("계정을 선택해주세요.");
+              return;
+            }
+            setActionError(null);
+            const isBookmarking = !status.bookmarked;
+            try {
+              const updated = status.bookmarked
+                ? await services.api.unbookmark(composeAccount, status.id)
+                : await services.api.bookmark(composeAccount, status.id);
+              setSelectedStatus(updated);
+              if (isBookmarking) {
+                showToast("북마크했습니다.");
+              } else {
+                showToast("북마크를 취소했습니다.");
+              }
+            } catch (err) {
+              setActionError(err instanceof Error ? err.message : "북마크 처리에 실패했습니다.");
+            }
+          }}
           onDelete={async (status) => {
             if (!composeAccount) {
               return;
diff --git a/src/domain/types.ts b/src/domain/types.ts
index 6eee19a..c36276f 100644
--- a/src/domain/types.ts
+++ b/src/domain/types.ts
@@ -94,6 +94,7 @@ export type Status = {
   reactions: Reaction[];
   reblogged: boolean;
   favourited: boolean;
+  bookmarked: boolean;
   inReplyToId: string | null;
   mentions: Mention[];
   mediaAttachments: MediaAttachment[];
diff --git a/src/infra/MastodonHttpClient.ts b/src/infra/MastodonHttpClient.ts
index bb141e0..807f329 100644
--- a/src/infra/MastodonHttpClient.ts
+++ b/src/infra/MastodonHttpClient.ts
@@ -283,6 +283,10 @@ export class MastodonHttpClient implements MastodonApi {
     return mapAccountRelationship(data);
   }
 
+  async fetchThreadContext(account: Account, statusId: string): Promise<ThreadContext> {
+    return this.fetchContext(account, statusId);
+  }
+
   async fetchAccountStatuses(
     account: Account,
     accountId: string,
@@ -386,6 +390,14 @@ export class MastodonHttpClient implements MastodonApi {
     return this.postAction(account, statusId, "unfavourite");
   }
 
+  async bookmark(account: Account, statusId: string): Promise<Status> {
+    return this.postAction(account, statusId, "bookmark");
+  }
+
+  async unbookmark(account: Account, statusId: string): Promise<Status> {
+    return this.postAction(account, statusId, "unbookmark");
+  }
+
   async createReaction(_account: Account, _statusId: string, _reaction: string): Promise<Status> {
     throw new Error("리액션은 미스키 계정에서만 사용할 수 있습니다.");
   }
diff --git a/src/infra/UnifiedApiClient.ts b/src/infra/UnifiedApiClient.ts
index df9d50e..c6139df 100644
--- a/src/infra/UnifiedApiClient.ts
+++ b/src/infra/UnifiedApiClient.ts
@@ -95,6 +95,14 @@ export class UnifiedApiClient implements MastodonApi {
     return this.getClient(account).unfavourite(account, statusId);
   }
 
+  bookmark(account: Account, statusId: string) {
+    return this.getClient(account).bookmark(account, statusId);
+  }
+
+  unbookmark(account: Account, statusId: string) {
+    return this.getClient(account).unbookmark(account, statusId);
+  }
+
   createReaction(account: Account, statusId: string, reaction: string) {
     return this.getClient(account).createReaction(account, statusId, reaction);
   }
diff --git a/src/infra/mastodonMapper.ts b/src/infra/mastodonMapper.ts
index 19168f6..ba315be 100644
--- a/src/infra/mastodonMapper.ts
+++ b/src/infra/mastodonMapper.ts
@@ -259,6 +259,7 @@ export const mapStatus = (raw: unknown): Status => {
     reactions,
     reblogged: Boolean(value.reblogged ?? false),
     favourited: Boolean(value.favourited ?? false),
+    bookmarked: Boolean(value.bookmarked ?? false),
     inReplyToId: value.in_reply_to_id ? String(value.in_reply_to_id) : null,
     mentions: mapMentions(value.mentions),
     mediaAttachments: mapMediaAttachments(value.media_attachments),
@@ -327,6 +328,8 @@ export const mapNotificationToStatus = (raw: unknown): Status | null => {
     accountUrl,
     accountAvatarUrl,
     content,
+    htmlContent: "",
+    hasRichContent: false,
     url: target?.url ?? null,
     visibility: target?.visibility ?? "public",
     spoilerText: "",
@@ -338,6 +341,7 @@ export const mapNotificationToStatus = (raw: unknown): Status | null => {
     reactions: [],
     reblogged: false,
     favourited: false,
+    bookmarked: false,
     inReplyToId: target?.inReplyToId ?? null,
     mentions: [],
     mediaAttachments: target?.mediaAttachments ?? [],
diff --git a/src/services/MastodonApi.ts b/src/services/MastodonApi.ts
index c181188..ccb56a3 100644
--- a/src/services/MastodonApi.ts
+++ b/src/services/MastodonApi.ts
@@ -1,4 +1,4 @@
-import type { Account, AccountRelationship, Status, TimelineType, Visibility, InstanceInfo, UserProfile } from "../domain/types";
+import type { Account, AccountRelationship, Status, TimelineType, Visibility, InstanceInfo, UserProfile, ThreadContext } from "../domain/types";
 import type { CustomEmoji } from "../domain/types";
 
 export type CreateStatusInput = {
@@ -21,6 +21,8 @@ export interface MastodonApi {
   deleteStatus(account: Account, statusId: string): Promise<void>;
   favourite(account: Account, statusId: string): Promise<Status>;
   unfavourite(account: Account, statusId: string): Promise<Status>;
+  bookmark(account: Account, statusId: string): Promise<Status>;
+  unbookmark(account: Account, statusId: string): Promise<Status>;
   createReaction(account: Account, statusId: string, reaction: string): Promise<Status>;
   deleteReaction(account: Account, statusId: string): Promise<Status>;
   reblog(account: Account, statusId: string): Promise<Status>;
@@ -36,4 +38,5 @@ export interface MastodonApi {
   blockAccount(account: Account, accountId: string): Promise<AccountRelationship>;
   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>;
 }
diff --git a/src/ui/components/ProfileModal.tsx b/src/ui/components/ProfileModal.tsx
index d77a481..f65c606 100644
--- a/src/ui/components/ProfileModal.tsx
+++ b/src/ui/components/ProfileModal.tsx
@@ -365,6 +365,27 @@ export const ProfileModal = ({
     [account, api, updateItem]
   );
 
+  const handleToggleBookmark = useCallback(
+    async (target: Status) => {
+      if (!account) {
+        setItemsError("계정을 선택해 주세요.");
+        return;
+      }
+      setItemsError(null);
+      const isBookmarking = !target.bookmarked;
+      try {
+        const updated = target.bookmarked
+          ? await api.unbookmark(account, target.id)
+          : await api.bookmark(account, target.id);
+        updateItem(updated);
+        showToast(isBookmarking ? "북마크했습니다." : "북마크를 취소했습니다.");
+      } catch (error) {
+        setItemsError(error instanceof Error ? error.message : "북마크 처리에 실패했습니다.");
+      }
+    },
+    [account, api, updateItem, showToast]
+  );
+
   const handleDeleteStatus = useCallback(
     async (target: Status) => {
       if (!account) {
@@ -959,9 +980,10 @@ export const ProfileModal = ({
                   key={item.id}
                   status={item}
                   onReply={(target) => onReply(target, account)}
-                  onToggleFavourite={handleToggleFavourite}
-                  onToggleReblog={handleToggleReblog}
-                  onDelete={handleDeleteStatus}
+                   onToggleFavourite={handleToggleFavourite}
+                   onToggleReblog={handleToggleReblog}
+                   onToggleBookmark={handleToggleBookmark}
+                   onDelete={handleDeleteStatus}
                   onReact={handleReact}
                   onStatusClick={onStatusClick}
                   onProfileClick={(target) => onProfileClick(target, account)}
diff --git a/src/ui/components/StatusModal.tsx b/src/ui/components/StatusModal.tsx
index d65a77f..3c28f00 100644
--- a/src/ui/components/StatusModal.tsx
+++ b/src/ui/components/StatusModal.tsx
@@ -15,6 +15,7 @@ export const StatusModal = ({
   onReply,
   onToggleFavourite,
   onToggleReblog,
+  onToggleBookmark,
   onDelete,
   onProfileClick,
   activeHandle,
@@ -33,6 +34,7 @@ export const StatusModal = ({
   onReply: (status: Status) => void;
   onToggleFavourite: (status: Status) => void;
   onToggleReblog: (status: Status) => void;
+  onToggleBookmark: (status: Status) => void;
   onDelete?: (status: Status) => void;
   onProfileClick?: (status: Status, account: Account | null) => void;
   activeHandle: string;
@@ -194,12 +196,13 @@ export const StatusModal = ({
             <div className="thread-context thread-ancestors">
               {threadContext.ancestors.map((ancestorStatus) => (
                 <div key={ancestorStatus.id} className="thread-item thread-ancestor">
-                  <TimelineItem
-                    status={ancestorStatus}
-                    onReply={onReply}
-                    onToggleFavourite={onToggleFavourite}
-                    onToggleReblog={onToggleReblog}
-                    onDelete={onDelete || (() => {})}
+                   <TimelineItem
+                     status={ancestorStatus}
+                     onReply={onReply}
+                     onToggleFavourite={onToggleFavourite}
+                     onToggleReblog={onToggleReblog}
+                     onToggleBookmark={onToggleBookmark}
+                     onDelete={onDelete || (() => {})}
                     onProfileClick={handleProfileClick}
                     activeHandle={activeHandle}
                     activeAccountHandle={activeAccountHandle}
@@ -229,6 +232,7 @@ export const StatusModal = ({
             onReply={onReply}
             onToggleFavourite={onToggleFavourite}
             onToggleReblog={onToggleReblog}
+            onToggleBookmark={onToggleBookmark}
             onDelete={onDelete || (() => {})}
             onProfileClick={handleProfileClick}
             activeHandle={activeHandle}
@@ -258,6 +262,7 @@ export const StatusModal = ({
                     onReply={onReply}
                     onToggleFavourite={onToggleFavourite}
                     onToggleReblog={onToggleReblog}
+                    onToggleBookmark={onToggleBookmark}
                     onDelete={onDelete || (() => {})}
                     onProfileClick={handleProfileClick}
                     activeHandle={activeHandle}
diff --git a/src/ui/components/TimelineItem.tsx b/src/ui/components/TimelineItem.tsx
index f21915f..773de1d 100644
--- a/src/ui/components/TimelineItem.tsx
+++ b/src/ui/components/TimelineItem.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import type { Account, CustomEmoji, Mention, ReactionInput, Status } from "../../domain/types";
 import type { MastodonApi } from "../../services/MastodonApi";
 import { sanitizeHtml } from "../utils/htmlSanitizer";
-import { renderTextWithLinks } from "../utils/linkify";
+import { renderTextWithLinks, type MentionLink } from "../utils/linkify";
 import BoostIcon from "../assets/boost-icon.svg?react";
 import ReplyIcon from "../assets/reply-icon.svg?react";
 import TrashIcon from "../assets/trash-icon.svg?react";
@@ -30,6 +30,7 @@ export const TimelineItem = ({
   onToggleFavourite,
   onToggleReblog,
   onDelete,
+  onToggleBookmark,
   onReact,
   onProfileClick,
   onStatusClick,
@@ -49,6 +50,7 @@ export const TimelineItem = ({
   onToggleFavourite: (status: Status) => void;
   onToggleReblog: (status: Status) => void;
   onDelete: (status: Status) => void;
+  onToggleBookmark: (status: Status) => void;
   onReact?: (status: Status, reaction: ReactionInput) => void;
   onProfileClick?: (status: Status) => void;
   onStatusClick?: (status: Status) => void;
@@ -473,6 +475,7 @@ export const TimelineItem = ({
       reactions: [],
       reblogged: false,
       favourited: false,
+      bookmarked: false,
       inReplyToId: null,
       mentions: [],
       mediaAttachments: [],
@@ -486,11 +489,11 @@ export const TimelineItem = ({
     [displayStatus.createdAt, displayStatus.id]
   );
   const handleMentionClick = useCallback(
-    (mention: Mention) => {
+    (mention: MentionLink) => {
       if (!onProfileClick || !mention.id) {
         return;
       }
-      onProfileClick(buildMentionStatus(mention));
+      onProfileClick(buildMentionStatus(mention as Mention));
     },
     [buildMentionStatus, onProfileClick]
   );
@@ -861,6 +864,15 @@ export const TimelineItem = ({
             <>
               <div className="overlay-backdrop" aria-hidden="true" />
               <div ref={menuRef} className="section-menu-panel status-menu-panel" role="menu">
+                <button 
+                  type="button" 
+                  onClick={() => {
+                    onToggleBookmark(displayStatus);
+                    setMenuOpen(false);
+                  }}
+                >
+                  {displayStatus.bookmarked ? "북마크 취소" : "북마크"}
+                </button>
                 <button type="button" onClick={handleOpenOrigin} disabled={!originUrl}>
                   원본 서버에서 보기
                 </button>

From c542b508243360d2cae8a1dab6dc79c9b41f74eb Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Thu, 15 Jan 2026 13:28:13 +0900
Subject: [PATCH 02/10] =?UTF-8?q?feat:=20=EB=B6=81=EB=A7=88=ED=81=AC=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=84=EB=9D=BC=EC=9D=B8=20=EA=B5=AC=EB=B6=84?=
 =?UTF-8?q?=EC=84=A0=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20UI=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 타임라인 선택기에 북마크 앞 구분선 추가
- 북마크 아이콘 추가 및 렌더링 로직 개선
- 구분선 컴포넌트 스타일링 추가
- 타임라인 타입 관련 타입 안전성 강화
---
 src/App.tsx                     | 35 ++++++++++++++++++++++++++-------
 src/domain/types.ts             |  2 +-
 src/infra/MastodonHttpClient.ts | 16 +++++++++++++++
 src/infra/UnifiedApiClient.ts   |  4 ++++
 src/services/MastodonApi.ts     |  1 +
 src/ui/hooks/useTimeline.ts     | 16 ++++++++++++---
 src/ui/styles/components.css    |  7 +++++++
 src/ui/utils/timeline.ts        | 22 ++++++++++++++++-----
 8 files changed, 87 insertions(+), 16 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1f4a7b3..39c7ce3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -132,8 +132,10 @@ const buildOptimisticReactionStatus = (
   };
 };
 
-const TimelineIcon = ({ timeline }: { timeline: TimelineType }) => {
+const TimelineIcon = ({ timeline }: { timeline: TimelineType | string }) => {
   switch (timeline) {
+    case "divider-before-bookmarks":
+      return null;
     case "home":
       return (
         <svg viewBox="0 0 24 24" aria-hidden="true">
@@ -183,6 +185,12 @@ const TimelineIcon = ({ timeline }: { timeline: TimelineType }) => {
           <path d="M13.73 21a2 2 0 0 1-3.46 0" />
         </svg>
       );
+     case "bookmarks":
+      return (
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+        </svg>
+      );
     default:
       return null;
   }
@@ -400,8 +408,12 @@ const TimelineSection = ({
     timelineType,
     onNotification: handleNotification
   });
-  const actionsDisabled = timelineType === "notifications";
-  const emptyMessage = timelineType === "notifications" ? "표시할 알림이 없습니다." : "표시할 글이 없습니다.";
+  const actionsDisabled = timelineType === "notifications" || timelineType === "bookmarks";
+  const emptyMessage = timelineType === "notifications" 
+    ? "표시할 알림이 없습니다." 
+    : timelineType === "bookmarks" 
+      ? "북마크한 글이 없습니다."
+      : "표시할 글이 없습니다.";
 
   useEffect(() => {
     if (!timeline.error) {
@@ -637,7 +649,13 @@ const TimelineSection = ({
                   aria-label="타임라인 선택"
                 >
                   {timelineOptions.map((option) => {
-                    const isSelected = timelineType === option.id;
+                    if (option.isDivider) {
+                      return (
+                        <div key={option.id} className="timeline-selector-divider" role="separator" />
+                      );
+                    }
+                    
+                    const isSelected = !option.isDivider && timelineType === option.id;
                     return (
                       <button
                         key={option.id}
@@ -645,11 +663,14 @@ const TimelineSection = ({
                         className={isSelected ? "is-active" : ""}
                         aria-pressed={isSelected}
                         onClick={() => {
-                          onTimelineChange(section.id, option.id);
-                          setTimelineMenuOpen(false);
+                          if (!option.isDivider) {
+                            onTimelineChange(section.id, option.id as TimelineType);
+                            setTimelineMenuOpen(false);
+                          }
                         }}
+                        disabled={option.isDivider}
                       >
-                        <TimelineIcon timeline={option.id} />
+                        {!option.isDivider && <TimelineIcon timeline={option.id as TimelineType} />}
                         <span>{option.label}</span>
                       </button>
                     );
diff --git a/src/domain/types.ts b/src/domain/types.ts
index c36276f..322acd6 100644
--- a/src/domain/types.ts
+++ b/src/domain/types.ts
@@ -2,7 +2,7 @@ export type Visibility = "public" | "unlisted" | "private" | "direct";
 
 export type AccountPlatform = "mastodon" | "misskey";
 
-export type TimelineType = "home" | "local" | "federated" | "social" | "global" | "notifications";
+export type TimelineType = "home" | "local" | "federated" | "social" | "global" | "notifications" | "bookmarks";
 
 export type Account = {
   id: string;
diff --git a/src/infra/MastodonHttpClient.ts b/src/infra/MastodonHttpClient.ts
index 807f329..4072968 100644
--- a/src/infra/MastodonHttpClient.ts
+++ b/src/infra/MastodonHttpClient.ts
@@ -110,6 +110,22 @@ export class MastodonHttpClient implements MastodonApi {
     return data.map(mapStatus);
   }
 
+  async fetchBookmarks(account: Account, limit: number = 20, maxId?: string): Promise<Status[]> {
+    const url = new URL(`${account.instanceUrl}/api/v1/bookmarks`);
+    url.searchParams.set("limit", String(limit));
+    if (maxId) {
+      url.searchParams.set("max_id", maxId);
+    }
+    const response = await fetch(url.toString(), {
+      headers: buildHeaders(account)
+    });
+    if (!response.ok) {
+      throw new Error("북마크를 불러오지 못했습니다.");
+    }
+    const data = (await response.json()) as unknown[];
+    return data.map(mapStatus);
+  }
+
   async fetchCustomEmojis(account: Account): Promise<CustomEmoji[]> {
     const response = await fetch(`${account.instanceUrl}/api/v1/custom_emojis`, {
       headers: buildHeaders(account)
diff --git a/src/infra/UnifiedApiClient.ts b/src/infra/UnifiedApiClient.ts
index c6139df..cc7aa29 100644
--- a/src/infra/UnifiedApiClient.ts
+++ b/src/infra/UnifiedApiClient.ts
@@ -75,6 +75,10 @@ export class UnifiedApiClient implements MastodonApi {
     return this.getClient(account).fetchAccountStatuses(account, accountId, limit, maxId);
   }
 
+  fetchBookmarks(account: Account, limit?: number, maxId?: string) {
+    return this.getClient(account).fetchBookmarks(account, limit, maxId);
+  }
+
   uploadMedia(account: Account, file: File) {
     return this.getClient(account).uploadMedia(account, file);
   }
diff --git a/src/services/MastodonApi.ts b/src/services/MastodonApi.ts
index ccb56a3..2f63add 100644
--- a/src/services/MastodonApi.ts
+++ b/src/services/MastodonApi.ts
@@ -23,6 +23,7 @@ export interface MastodonApi {
   unfavourite(account: Account, statusId: string): Promise<Status>;
   bookmark(account: Account, statusId: string): Promise<Status>;
   unbookmark(account: Account, statusId: string): Promise<Status>;
+  fetchBookmarks(account: Account, limit?: number, maxId?: string): Promise<Status[]>;
   createReaction(account: Account, statusId: string, reaction: string): Promise<Status>;
   deleteReaction(account: Account, statusId: string): Promise<Status>;
   reblog(account: Account, statusId: string): Promise<Status>;
diff --git a/src/ui/hooks/useTimeline.ts b/src/ui/hooks/useTimeline.ts
index a3b7213..6fe0ef6 100644
--- a/src/ui/hooks/useTimeline.ts
+++ b/src/ui/hooks/useTimeline.ts
@@ -65,7 +65,12 @@ export const useTimeline = (params: {
     setError(null);
     setItems([]);
     try {
-      const timeline = await api.fetchTimeline(account, timelineType, 30);
+      let timeline: Status[];
+      if (timelineType === "bookmarks") {
+        timeline = await api.fetchBookmarks(account, 30);
+      } else {
+        timeline = await api.fetchTimeline(account, timelineType, 30);
+      }
       setItems(timeline);
       setHasMore(timeline.length > 0);
     } catch (err) {
@@ -85,7 +90,12 @@ export const useTimeline = (params: {
     }
     setLoadingMore(true);
     try {
-      const next = await api.fetchTimeline(account, timelineType, 20, lastId);
+      let next: Status[];
+      if (timelineType === "bookmarks") {
+        next = await api.fetchBookmarks(account, 20, lastId);
+      } else {
+        next = await api.fetchTimeline(account, timelineType, 20, lastId);
+      }
       setItems((current) => appendStatuses(current, next));
       if (next.length === 0) {
         setHasMore(false);
@@ -111,7 +121,7 @@ export const useTimeline = (params: {
     disconnectRef.current = null;
     notificationDisconnectRef.current?.();
     notificationDisconnectRef.current = null;
-    if (!account || !enableStreaming) {
+    if (!account || !enableStreaming || timelineType === "bookmarks") {
       return;
     }
 
diff --git a/src/ui/styles/components.css b/src/ui/styles/components.css
index c7331ca..62aea13 100644
--- a/src/ui/styles/components.css
+++ b/src/ui/styles/components.css
@@ -1113,6 +1113,13 @@ button.ghost {
   gap: 8px;
 }
 
+.timeline-selector-divider {
+  height: 1px;
+  background: var(--color-sidebar-divider);
+  margin: 4px 0;
+  opacity: 0.6;
+}
+
 .timeline-selector-panel svg {
   width: 18px;
   height: 18px;
diff --git a/src/ui/utils/timeline.ts b/src/ui/utils/timeline.ts
index d666076..d8676d8 100644
--- a/src/ui/utils/timeline.ts
+++ b/src/ui/utils/timeline.ts
@@ -1,8 +1,9 @@
 import type { AccountPlatform, TimelineType } from "../../domain/types";
 
 export type TimelineOption = {
-  id: TimelineType;
+  id: TimelineType | "divider-before-bookmarks";
   label: string;
+  isDivider?: boolean;
 };
 
 const TIMELINE_LABELS: Record<TimelineType, string> = {
@@ -11,10 +12,11 @@ const TIMELINE_LABELS: Record<TimelineType, string> = {
   federated: "연합",
   social: "소셜",
   global: "글로벌",
-  notifications: "알림"
+  notifications: "알림",
+  bookmarks: "북마크"
 };
 
-const MASTODON_TIMELINES: TimelineType[] = ["home", "local", "federated", "notifications"];
+const MASTODON_TIMELINES: TimelineType[] = ["home", "local", "federated", "notifications", "bookmarks"];
 const MISSKEY_TIMELINES: TimelineType[] = ["home", "local", "social", "global", "notifications"];
 const ALL_TIMELINES: TimelineType[] = [
   "home",
@@ -22,7 +24,8 @@ const ALL_TIMELINES: TimelineType[] = [
   "federated",
   "social",
   "global",
-  "notifications"
+  "notifications",
+  "bookmarks"
 ];
 const TIMELINE_TYPE_SET = new Set<string>(ALL_TIMELINES);
 
@@ -41,10 +44,19 @@ export const getTimelineOptions = (
         ? MISSKEY_TIMELINES
         : ALL_TIMELINES;
   const list = includeNotifications ? baseList : baseList.filter((id) => id !== "notifications");
-  return list.map((id) => ({
+  
+  const options: TimelineOption[] = list.map((id) => ({
     id,
     label: TIMELINE_LABELS[id]
   }));
+  
+  // 북마크 앞에 구분선 추가
+  const bookmarkIndex = options.findIndex(option => option.id === "bookmarks");
+  if (bookmarkIndex > 0) {
+    options.splice(bookmarkIndex, 0, { id: "divider-before-bookmarks", label: "---", isDivider: true });
+  }
+  
+  return options;
 };
 
 export const normalizeTimelineType = (

From 684b9f29ba6304f7012affad0f69dc3d5a724afc Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Thu, 15 Jan 2026 13:43:31 +0900
Subject: [PATCH 03/10] =?UTF-8?q?docs:=20PR=20=EC=83=9D=EC=84=B1=20?=
 =?UTF-8?q?=EA=B7=9C=EC=B9=99=20=EB=B0=8F=20CJK=20=EB=AC=B8=EC=9E=90=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC=20=EA=B0=80=EC=9D=B4=EB=93=9C=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- feature/* 브랜치는 develop, release/* 브랜치는 main을 베이스로 하는 규칙 명시
- 파일 분석 시 CJK 문자 깨짐 방지 가이드라인 추가
- AGENTS.md와 CLAUDE.md 양쪽에 동일한 규칙 적용
---
 AGENTS.md | 5 ++++-
 CLAUDE.MD | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index ed7145c..993c6b5 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,4 +1,4 @@
-# AGENTS.md
+# AGENTS.md
 
 ## 기본 원칙
 - SOLID 원칙을 준수한다.
@@ -17,6 +17,7 @@
 - 모든 소스 파일은 UTF-8 (BOM 없음)으로 저장한다.
 - 커밋 전 텍스트 깨짐 검사: `rg -n "�" src`, `rg -n "[\u00C0-\u00FF]" src`
 - UI 문자열에 한글 외의 CJK 문자가 섞여 있으면 원인을 확인하고 교체한다.
+- 분석을 위하여 파일을 읽을 때는 CJK 문자가 깨지지 않도록 해야 한다.
 
 ## 작업 플로우
 - 작업 시작 전: `develop` 최신화 → 새 feature 브랜치 생성.
@@ -30,3 +31,5 @@
 - PR 본문은 마크다운이 깨지지 않도록 멀티라인(heredoc) 방식으로 작성한다.
 - PR 제목/본문의 한글 인코딩이 깨지지 않도록 UTF-8로 작성·확인한다.
 - PR URL은 코드 블록 없이 클릭 가능한 일반 텍스트로 제공한다.
+- PR 생성 시 feature/* 브랜치는 반드시 develop 브랜치를 베이스로 삼는다.
+- PR 생성 시 release/* 브랜치는 반드시 main 브랜치를 베이스로 삼는다.
diff --git a/CLAUDE.MD b/CLAUDE.MD
index 7e27b1b..e57c56b 100644
--- a/CLAUDE.MD
+++ b/CLAUDE.MD
@@ -25,8 +25,11 @@
 - PR 본문은 마크다운이 깨지지 않도록 멀티라인(heredoc) 방식으로 작성한다.
 - PR 제목/본문의 한글 인코딩이 깨지지 않도록 UTF-8로 작성·확인한다.
 - PR URL은 코드 블록 없이 클릭 가능한 일반 텍스트로 제공한다.
+- PR 생성 시 feature/* 브랜치는 반드시 develop 브랜치를 베이스로 삼는다.
+- PR 생성 시 release/* 브랜치는 반드시 main 브랜치를 베이스로 삼는다.
 
 ## 인코딩/텍스트 품질
 - 모든 소스 파일은 UTF-8 (BOM 없음)으로 저장한다.
 - 커밋 전 텍스트 깨짐 검사: `rg -n "�" src`, `rg -n "[\u00C0-\u00FF]" src`
-- UI 문자열에 한글 외의 CJK 문자가 섞여 있으면 원인을 확인하고 교체한다.
\ No newline at end of file
+- UI 문자열에 한글 외의 CJK 문자가 섞여 있으면 원인을 확인하고 교체한다.
+- 분석을 위하여 파일을 읽을 때는 CJK 문자가 깨지지 않도록 해야 한다.
\ No newline at end of file

From 29be98c43d5a26c7bc2b0baee1d3a23db22a578f Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Thu, 15 Jan 2026 16:33:56 +0900
Subject: [PATCH 04/10] =?UTF-8?q?feat:=20=EB=BD=80=EB=AA=A8=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9C=20=ED=83=80=EC=9D=B4=EB=A8=B8=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 사이드바에 뽀모도로 타이머 패널 추가
- 집중(25분) / 휴식(5분) / 긴 휴식(30분) 사이클 자동 전환
- 타이머 완료 시 알림음 및 glow 효과
- 설정에서 타이머 표시 여부 및 시간 커스터마이징 가능
- 라이트/다크 모드 색상 지원

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/App.tsx                         |  93 +++++++++++++
 src/ui/components/PomodoroTimer.tsx | 201 ++++++++++++++++++++++++++++
 src/ui/styles/base.css              |   3 +
 src/ui/styles/components.css        | 115 ++++++++++++++++
 src/ui/styles/themes/dark.css       |   6 +
 5 files changed, 418 insertions(+)
 create mode 100644 src/ui/components/PomodoroTimer.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 39c7ce3..c68b934 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import { ComposeBox } from "./ui/components/ComposeBox";
 import { ProfileModal } from "./ui/components/ProfileModal";
 import { StatusModal } from "./ui/components/StatusModal";
 import { TimelineItem } from "./ui/components/TimelineItem";
+import { PomodoroTimer } from "./ui/components/PomodoroTimer";
 import { useTimeline } from "./ui/hooks/useTimeline";
 import { useClickOutside } from "./ui/hooks/useClickOutside";
 import { useAppContext } from "./ui/state/AppContext";
@@ -948,6 +949,21 @@ export const App = () => {
   const [showMisskeyReactions, setShowMisskeyReactions] = useState(() => {
     return localStorage.getItem("textodon.reactions") !== "off";
   });
+  const [showPomodoro, setShowPomodoro] = useState(() => {
+    return localStorage.getItem("textodon.pomodoro") !== "off";
+  });
+  const [pomodoroFocus, setPomodoroFocus] = useState(() => {
+    const stored = localStorage.getItem("textodon.pomodoro.focus");
+    return stored ? Number(stored) : 25;
+  });
+  const [pomodoroBreak, setPomodoroBreak] = useState(() => {
+    const stored = localStorage.getItem("textodon.pomodoro.break");
+    return stored ? Number(stored) : 5;
+  });
+  const [pomodoroLongBreak, setPomodoroLongBreak] = useState(() => {
+    const stored = localStorage.getItem("textodon.pomodoro.longBreak");
+    return stored ? Number(stored) : 30;
+  });
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [settingsAccountId, setSettingsAccountId] = useState<string | null>(null);
   const [reauthLoading, setReauthLoading] = useState(false);
@@ -1246,6 +1262,22 @@ export const App = () => {
     localStorage.setItem("textodon.reactions", showMisskeyReactions ? "on" : "off");
   }, [showMisskeyReactions]);
 
+  useEffect(() => {
+    localStorage.setItem("textodon.pomodoro", showPomodoro ? "on" : "off");
+  }, [showPomodoro]);
+
+  useEffect(() => {
+    localStorage.setItem("textodon.pomodoro.focus", String(pomodoroFocus));
+  }, [pomodoroFocus]);
+
+  useEffect(() => {
+    localStorage.setItem("textodon.pomodoro.break", String(pomodoroBreak));
+  }, [pomodoroBreak]);
+
+  useEffect(() => {
+    localStorage.setItem("textodon.pomodoro.longBreak", String(pomodoroLongBreak));
+  }, [pomodoroLongBreak]);
+
   const closeMobileMenu = useCallback(() => {
     setMobileMenuOpen(false);
     setMobileComposeOpen(false);
@@ -1673,6 +1705,13 @@ export const App = () => {
               />
             ) : null}
           </div>
+          {route === "home" && showPomodoro ? (
+            <PomodoroTimer
+              focusMinutes={pomodoroFocus}
+              breakMinutes={pomodoroBreak}
+              longBreakMinutes={pomodoroLongBreak}
+            />
+          ) : null}
           {route === "home" ? (
             <section className="panel sidebar-panel">
               <div className="brand">
@@ -2037,6 +2076,60 @@ onAccountChange={setSectionAccount}
                 <option value="large">대</option>
               </select>
             </div>
+            <div className="settings-item">
+              <div>
+                <strong>뽀모도로 타이머</strong>
+                <p>사이드바에 뽀모도로 타이머를 표시합니다.</p>
+              </div>
+              <label className="switch">
+                <input
+                  type="checkbox"
+                  checked={showPomodoro}
+                  onChange={(event) => setShowPomodoro(event.target.checked)}
+                />
+                <span className="slider" aria-hidden="true" />
+              </label>
+            </div>
+            {showPomodoro ? (
+              <div className="settings-item settings-item-pomodoro">
+                <div>
+                  <strong>뽀모도로 시간 설정</strong>
+                  <p>집중, 휴식, 긴 휴식 시간을 분 단위로 설정합니다.</p>
+                </div>
+                <div className="pomodoro-time-inputs">
+                  <label>
+                    집중
+                    <input
+                      type="number"
+                      min="1"
+                      max="60"
+                      value={pomodoroFocus}
+                      onChange={(event) => setPomodoroFocus(Number(event.target.value))}
+                    />
+                  </label>
+                  <label>
+                    휴식
+                    <input
+                      type="number"
+                      min="1"
+                      max="30"
+                      value={pomodoroBreak}
+                      onChange={(event) => setPomodoroBreak(Number(event.target.value))}
+                    />
+                  </label>
+                  <label>
+                    긴 휴식
+                    <input
+                      type="number"
+                      min="1"
+                      max="60"
+                      value={pomodoroLongBreak}
+                      onChange={(event) => setPomodoroLongBreak(Number(event.target.value))}
+                    />
+                  </label>
+                </div>
+              </div>
+            ) : null}
             <div className="settings-item">
               <div>
                 <strong>로컬 저장소 초기화</strong>
diff --git a/src/ui/components/PomodoroTimer.tsx b/src/ui/components/PomodoroTimer.tsx
new file mode 100644
index 0000000..6458045
--- /dev/null
+++ b/src/ui/components/PomodoroTimer.tsx
@@ -0,0 +1,201 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+type SessionType = "focus" | "break" | "longBreak";
+
+type PomodoroTimerProps = {
+  focusMinutes?: number;
+  breakMinutes?: number;
+  longBreakMinutes?: number;
+};
+
+const TOTAL_SESSIONS = 8;
+
+const getSessionLabel = (type: SessionType): string => {
+  switch (type) {
+    case "focus":
+      return "집중";
+    case "break":
+      return "휴식";
+    case "longBreak":
+      return "긴 휴식";
+  }
+};
+
+const formatTime = (seconds: number): string => {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+};
+
+export const PomodoroTimer = ({
+  focusMinutes = 25,
+  breakMinutes = 5,
+  longBreakMinutes = 30,
+}: PomodoroTimerProps) => {
+  const focusDuration = focusMinutes * 60;
+  const breakDuration = breakMinutes * 60;
+  const longBreakDuration = longBreakMinutes * 60;
+
+  const getSessionInfo = useCallback(
+    (sess: number): { type: SessionType; duration: number } => {
+      if (sess === 8) {
+        return { type: "longBreak", duration: longBreakDuration };
+      }
+      if (sess % 2 === 0) {
+        return { type: "break", duration: breakDuration };
+      }
+      return { type: "focus", duration: focusDuration };
+    },
+    [focusDuration, breakDuration, longBreakDuration]
+  );
+
+  const [session, setSession] = useState(1);
+  const [timeLeft, setTimeLeft] = useState(focusDuration);
+  const [isRunning, setIsRunning] = useState(false);
+  const [isBlinking, setIsBlinking] = useState(false);
+  const intervalRef = useRef<number | null>(null);
+  const audioContextRef = useRef<AudioContext | null>(null);
+
+  const sessionInfo = useMemo(() => getSessionInfo(session), [session, getSessionInfo]);
+
+  const playNotificationSound = useCallback(() => {
+    try {
+      if (!audioContextRef.current) {
+        audioContextRef.current = new AudioContext();
+      }
+      const ctx = audioContextRef.current;
+      const oscillator = ctx.createOscillator();
+      const gainNode = ctx.createGain();
+
+      oscillator.connect(gainNode);
+      gainNode.connect(ctx.destination);
+
+      oscillator.frequency.value = 800;
+      oscillator.type = "sine";
+      gainNode.gain.setValueAtTime(0.3, ctx.currentTime);
+      gainNode.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.5);
+
+      oscillator.start(ctx.currentTime);
+      oscillator.stop(ctx.currentTime + 0.5);
+    } catch {
+      // AudioContext가 지원되지 않는 환경에서는 무시
+    }
+  }, []);
+
+  const handleSessionToggle = useCallback(() => {
+    const nextSession = session >= TOTAL_SESSIONS ? 1 : session + 1;
+    const nextInfo = getSessionInfo(nextSession);
+    setSession(nextSession);
+    setTimeLeft(nextInfo.duration);
+    setIsRunning(false);
+    setIsBlinking(false);
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, [session, getSessionInfo]);
+
+  const handleStart = useCallback(() => {
+    setIsBlinking(false);
+    setIsRunning((prev) => !prev);
+  }, []);
+
+  const handleReset = useCallback(() => {
+    setIsBlinking(false);
+    setSession(1);
+    setTimeLeft(focusDuration);
+    setIsRunning(false);
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, [focusDuration]);
+
+  // 설정이 변경되면 현재 세션 시간 업데이트
+  useEffect(() => {
+    const info = getSessionInfo(session);
+    setTimeLeft(info.duration);
+    setIsRunning(false);
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, [focusDuration, breakDuration, longBreakDuration]);
+
+  useEffect(() => {
+    if (isRunning) {
+      intervalRef.current = window.setInterval(() => {
+        setTimeLeft((prev) => {
+          if (prev <= 1) {
+            playNotificationSound();
+            setIsBlinking(true);
+            const nextSession = session >= TOTAL_SESSIONS ? 1 : session + 1;
+            const nextInfo = getSessionInfo(nextSession);
+            setSession(nextSession);
+            setIsRunning(false);
+            if (intervalRef.current) {
+              clearInterval(intervalRef.current);
+              intervalRef.current = null;
+            }
+            return nextInfo.duration;
+          }
+          return prev - 1;
+        });
+      }, 1000);
+    } else if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [isRunning, session, playNotificationSound]);
+
+  const focusCount = Math.ceil(session / 2);
+
+  const handlePanelClick = useCallback(() => {
+    if (isBlinking) {
+      setIsBlinking(false);
+    }
+  }, [isBlinking]);
+
+  return (
+    <section
+      className={`panel pomodoro-panel${isBlinking ? " blinking" : ""}`}
+      onClick={handlePanelClick}
+    >
+      <div className="pomodoro-row">
+        <button
+          type="button"
+          className={`pomodoro-mode-toggle${sessionInfo.type === "break" ? " break" : ""}${sessionInfo.type === "longBreak" ? " long-break" : ""}`}
+          onClick={handleSessionToggle}
+          aria-label="다음 세션으로 전환"
+        >
+          {getSessionLabel(sessionInfo.type)} {sessionInfo.type === "focus" ? focusCount : ""}
+        </button>
+        <span className="pomodoro-time" aria-live="polite" aria-atomic="true">
+          {formatTime(timeLeft)}
+        </span>
+        <div className="pomodoro-controls">
+          <button
+            type="button"
+            className="pomodoro-button pomodoro-start"
+            onClick={handleStart}
+          >
+            {isRunning ? "정지" : "시작"}
+          </button>
+          <button
+            type="button"
+            className="pomodoro-button pomodoro-reset"
+            onClick={handleReset}
+          >
+            리셋
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/src/ui/styles/base.css b/src/ui/styles/base.css
index 9fc7dc3..f8f7a54 100644
--- a/src/ui/styles/base.css
+++ b/src/ui/styles/base.css
@@ -175,6 +175,9 @@
   --notification-badge-bg: #c04b3c;
   --notification-badge-text: #fff6f0;
   --notification-badge-ring: #fffdfa;
+  --color-pomodoro-focus: #ff6347;
+  --color-pomodoro-break: #22c55e;
+  --color-pomodoro-long-break: #3b82f6;
 }
 
 :root[data-color-scheme="light"] {
diff --git a/src/ui/styles/components.css b/src/ui/styles/components.css
index 1cee010..04eda7a 100644
--- a/src/ui/styles/components.css
+++ b/src/ui/styles/components.css
@@ -297,6 +297,36 @@
   cursor: not-allowed;
 }
 
+.settings-item-pomodoro {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.pomodoro-time-inputs {
+  display: flex;
+  gap: 12px;
+}
+
+.pomodoro-time-inputs label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+.pomodoro-time-inputs input {
+  width: 60px;
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid var(--color-settings-select-border);
+  border-radius: 6px;
+  background: var(--color-settings-select-bg);
+  color: var(--color-settings-select-text);
+  font-size: 14px;
+  font-family: inherit;
+}
+
 .account-list {
   list-style: none;
   padding: 0;
@@ -2667,3 +2697,88 @@ button.ghost {
     display: inline-flex;
   }
 }
+
+/* Pomodoro Timer */
+.pomodoro-panel {
+  padding: 12px 16px;
+}
+
+.pomodoro-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.pomodoro-mode-toggle {
+  padding: 6px 12px;
+  border: none;
+  border-radius: 6px;
+  background: var(--color-pomodoro-focus);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.pomodoro-mode-toggle.break {
+  background: var(--color-pomodoro-break);
+}
+
+.pomodoro-mode-toggle.long-break {
+  background: var(--color-pomodoro-long-break);
+}
+
+.pomodoro-time {
+  flex: 1;
+  font-size: 24px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text);
+  letter-spacing: -0.02em;
+  text-align: center;
+}
+
+.pomodoro-controls {
+  display: flex;
+  gap: 6px;
+}
+
+.pomodoro-button {
+  padding: 6px 10px;
+  border: none;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.pomodoro-start {
+  background: var(--color-action-bg);
+  color: var(--color-action-text);
+}
+
+.pomodoro-reset {
+  background: var(--color-input-bg);
+  color: var(--color-text-secondary);
+}
+
+.pomodoro-panel.blinking {
+  animation: pomodoro-glow 1.5s ease-in-out infinite;
+}
+
+@keyframes pomodoro-glow {
+  0%, 100% {
+    box-shadow: var(--shadow-panel);
+  }
+  50% {
+    box-shadow: 0 0 20px 4px var(--color-pomodoro-focus);
+  }
+}
+
+@media (max-width: 900px) {
+  .pomodoro-panel {
+    display: none;
+  }
+}
diff --git a/src/ui/styles/themes/dark.css b/src/ui/styles/themes/dark.css
index 7f3f287..d65185a 100644
--- a/src/ui/styles/themes/dark.css
+++ b/src/ui/styles/themes/dark.css
@@ -147,6 +147,9 @@
     --color-empty-text: #c4b6a6;
     --color-hint-text: #c4b6a6;
     --color-replying-bg: #2a241f;
+    --color-pomodoro-focus: #e05a4a;
+    --color-pomodoro-break: #3da35d;
+    --color-pomodoro-long-break: #5a9cf0;
   }
 
   :root:not([data-color-scheme="light"])[data-theme="christmas"] {
@@ -765,6 +768,9 @@
   --color-empty-text: #c4b6a6;
   --color-hint-text: #c4b6a6;
   --color-replying-bg: #2a241f;
+  --color-pomodoro-focus: #e05a4a;
+  --color-pomodoro-break: #3da35d;
+  --color-pomodoro-long-break: #5a9cf0;
 }
 
 :root[data-color-scheme="dark"][data-theme="christmas"] {

From de4fee6182d0f9cc038befe4e201fc0cc82707d1 Mon Sep 17 00:00:00 2001
From: Euigyom Kim <egkim@dehol.kr>
Date: Thu, 15 Jan 2026 17:31:00 +0900
Subject: [PATCH 05/10] =?UTF-8?q?chore:=20=EB=BD=80=EB=AA=A8=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9C=20=ED=83=80=EC=9D=B4=EB=A8=B8=20=EA=B8=B0=EB=B3=B8?=
 =?UTF-8?q?=EA=B0=92=EC=9D=84=20=EC=88=A8=EA=B9=80=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/App.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index c68b934..01409d6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -950,7 +950,7 @@ export const App = () => {
     return localStorage.getItem("textodon.reactions") !== "off";
   });
   const [showPomodoro, setShowPomodoro] = useState(() => {
-    return localStorage.getItem("textodon.pomodoro") !== "off";
+    return localStorage.getItem("textodon.pomodoro") === "on";
   });
   const [pomodoroFocus, setPomodoroFocus] = useState(() => {
     const stored = localStorage.getItem("textodon.pomodoro.focus");

From 196fa5df4b66eb48aabca67489af01d32d062ba7 Mon Sep 17 00:00:00 2001
From: opencode <opencode@example.com>
Date: Thu, 15 Jan 2026 21:21:37 +0900
Subject: [PATCH 06/10] =?UTF-8?q?feat:=20=EB=BD=80=EB=AA=A8=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9C=20=EC=A7=91=EC=A4=91=20=EC=84=B8=EC=85=98=20=EC=A4=91?=
 =?UTF-8?q?=20=ED=83=80=EC=9E=84=EB=9D=BC=EC=9D=B8=20=ED=9D=90=EB=A6=BC?=
 =?UTF-8?q?=ED=9A=A8=EA=B3=BC=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 집중 세션 진행 중(isRunning=true)에만 타임라인 블러 적용
- 컨테이너 외곽선(border/shadow)은 블러에서 제외하여 선명 유지
- 블러된 타임라인 중앙에 안내 문구 추가
- 안내 문구 깜빡임 현상 해결 및 렌더링 안정화
- 부드러운 애니메이션과 테마 호환성 확보

주요 변경사항:
- PomodoroTimer 컴포넌트에 onSessionTypeChange, onRunningChange 콜백 추가
- App.tsx에 뽀모도로 상태 관리 및 조건부 블러 로직 구현
- CSS에 .panel-content.pomodoro-focus-blur 및 안내 문구 스타일 추가
- 패널 구조 개선으로 외곽선 블러 문제 해결
---
 src/App.tsx                         | 16 ++++++-
 src/ui/components/PomodoroTimer.tsx | 14 ++++++
 src/ui/styles/layout.css            | 69 ++++++++++++++++++++++++++++-
 3 files changed, 97 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 01409d6..06c114c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -964,6 +964,8 @@ export const App = () => {
     const stored = localStorage.getItem("textodon.pomodoro.longBreak");
     return stored ? Number(stored) : 30;
   });
+  const [pomodoroSessionType, setPomodoroSessionType] = useState<"focus" | "break" | "longBreak">("focus");
+  const [pomodoroIsRunning, setPomodoroIsRunning] = useState(false);
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [settingsAccountId, setSettingsAccountId] = useState<string | null>(null);
   const [reauthLoading, setReauthLoading] = useState(false);
@@ -1710,6 +1712,8 @@ export const App = () => {
               focusMinutes={pomodoroFocus}
               breakMinutes={pomodoroBreak}
               longBreakMinutes={pomodoroLongBreak}
+              onSessionTypeChange={setPomodoroSessionType}
+              onRunningChange={setPomodoroIsRunning}
             />
           ) : null}
           {route === "home" ? (
@@ -1786,7 +1790,16 @@ export const App = () => {
             {oauthLoading ? <p className="empty">OAuth 인증 중...</p> : null}
             {route === "home" ? (
               <section className="panel">
-                {sections.length > 0 ? (
+                {showPomodoro && pomodoroSessionType === "focus" && pomodoroIsRunning ? (
+                  <div className="pomodoro-focus-message">
+                    <div className="pomodoro-focus-message-content">
+                      <h2>🎯 집중 세션 진행 중</h2>
+                      <p>뽀모도로 타이머가 동작 중입니다.<br />타임라인은 집중이 끝날 때까지 숨겨집니다.</p>
+                    </div>
+                  </div>
+                ) : null}
+                <div className={`panel-content${showPomodoro && pomodoroSessionType === "focus" && pomodoroIsRunning ? " pomodoro-focus-blur" : ""}`}>
+                  {sections.length > 0 ? (
                   <div
                     className={`timeline-board${isBoardDragging ? " is-dragging" : ""}`}
                     ref={timelineBoardRef}
@@ -1844,6 +1857,7 @@ onAccountChange={setSectionAccount}
                     })}
                   </div>
                 ) : null}
+                </div>
               </section>
             ) : null}
             {route === "terms" ? <TermsPage /> : null}
diff --git a/src/ui/components/PomodoroTimer.tsx b/src/ui/components/PomodoroTimer.tsx
index 6458045..e35b090 100644
--- a/src/ui/components/PomodoroTimer.tsx
+++ b/src/ui/components/PomodoroTimer.tsx
@@ -6,6 +6,8 @@ type PomodoroTimerProps = {
   focusMinutes?: number;
   breakMinutes?: number;
   longBreakMinutes?: number;
+  onSessionTypeChange?: (type: SessionType) => void;
+  onRunningChange?: (isRunning: boolean) => void;
 };
 
 const TOTAL_SESSIONS = 8;
@@ -31,6 +33,8 @@ export const PomodoroTimer = ({
   focusMinutes = 25,
   breakMinutes = 5,
   longBreakMinutes = 30,
+  onSessionTypeChange,
+  onRunningChange,
 }: PomodoroTimerProps) => {
   const focusDuration = focusMinutes * 60;
   const breakDuration = breakMinutes * 60;
@@ -58,6 +62,16 @@ export const PomodoroTimer = ({
 
   const sessionInfo = useMemo(() => getSessionInfo(session), [session, getSessionInfo]);
 
+  // 세션 타입 변경 시 부모 컴포넌트에 알림
+  useEffect(() => {
+    onSessionTypeChange?.(sessionInfo.type);
+  }, [sessionInfo.type, onSessionTypeChange]);
+
+  // 실행 상태 변경 시 부모 컴포넌트에 알림
+  useEffect(() => {
+    onRunningChange?.(isRunning);
+  }, [isRunning, onRunningChange]);
+
   const playNotificationSound = useCallback(() => {
     try {
       if (!audioContextRef.current) {
diff --git a/src/ui/styles/layout.css b/src/ui/styles/layout.css
index c44aa66..568181b 100644
--- a/src/ui/styles/layout.css
+++ b/src/ui/styles/layout.css
@@ -1,4 +1,4 @@
-.app {
+.app {
   padding: 16px 32px 8px;
   min-height: 100%;
 }
@@ -104,6 +104,7 @@ aside {
   border-radius: 16px;
   padding: 16px;
   box-shadow: var(--shadow-panel);
+  position: relative;
 }
 
 .panel h2 {
@@ -111,6 +112,72 @@ aside {
   font-size: 18px;
 }
 
+.panel-content {
+  position: relative;
+  border-radius: 15px; /* 패널 border-radius와 일치 */
+  overflow: hidden;
+}
+
+.panel-content.pomodoro-focus-blur {
+  filter: blur(5px);
+  opacity: 0.3;
+  transition: filter 0.3s ease, opacity 0.3s ease;
+  pointer-events: none;
+}
+
+.pomodoro-focus-message {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  pointer-events: none;
+}
+
+.pomodoro-focus-message-content {
+  text-align: center;
+  padding: 32px;
+  background: var(--color-panel-bg);
+  border-radius: 16px;
+  box-shadow: var(--shadow-panel), 0 20px 40px rgba(0, 0, 0, 0.15);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--color-panel-border);
+  max-width: 400px;
+  animation: pomodoro-message-appear 0.3s ease-out;
+  position: relative;
+  transform: translateZ(0); /* GPU 가속 */
+}
+
+.pomodoro-focus-message-content h2 {
+  margin: 0 0 16px 0;
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--color-text);
+  line-height: 1.3;
+}
+
+.pomodoro-focus-message-content p {
+  margin: 0;
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  line-height: 1.6;
+}
+
+@keyframes pomodoro-message-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.9) translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
 .main-column {
   display: flex;
   flex-direction: column;

From 7abb59b9625a573231ba5d3186340a6024660f4e Mon Sep 17 00:00:00 2001
From: opencode <opencode@example.com>
Date: Thu, 15 Jan 2026 21:31:34 +0900
Subject: [PATCH 07/10] =?UTF-8?q?fix:=20=EB=BD=80=EB=AA=A8=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9C=20=EC=A7=91=EC=A4=91=20=EC=A4=91=EC=95=99=20=EB=A9=94?=
 =?UTF-8?q?=EC=8B=9C=EC=A7=80=20z-index=20=EC=A1=B0=EC=A0=95=20(rebased)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/styles/layout.css | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/ui/styles/layout.css b/src/ui/styles/layout.css
index 568181b..94682c7 100644
--- a/src/ui/styles/layout.css
+++ b/src/ui/styles/layout.css
@@ -112,6 +112,11 @@ aside {
   font-size: 18px;
 }
 
+<<<<<<< HEAD
+=======
+<<<<<<< Updated upstream
+=======
+>>>>>>> 108613c (fix: 뽀모도로 집중 중앙 메시지 z-index 조정)
 .panel-content {
   position: relative;
   border-radius: 15px; /* 패널 border-radius와 일치 */
@@ -134,7 +139,7 @@ aside {
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 100;
+  z-index: 50;
   pointer-events: none;
 }
 
@@ -178,6 +183,10 @@ aside {
   }
 }
 
+<<<<<<< HEAD
+=======
+>>>>>>> Stashed changes
+>>>>>>> 108613c (fix: 뽀모도로 집중 중앙 메시지 z-index 조정)
 .main-column {
   display: flex;
   flex-direction: column;

From 3ed1bfdfe3c42d746ed109a6fc56d69aaef02e09 Mon Sep 17 00:00:00 2001
From: opencode <opencode@example.com>
Date: Thu, 15 Jan 2026 21:34:04 +0900
Subject: [PATCH 08/10] =?UTF-8?q?fix:=20CSS=EC=97=90=EC=84=9C=20Git=20?=
 =?UTF-8?q?=EC=B6=A9=EB=8F=8C=20=EA=B8=B0=ED=98=B8=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 뽀모도로 블러 관련 CSS에 남아있던 merge 충돌 기호 제거
- 빌드 경고 해결 및 안정적인 프로덕션 빌드 확보
- z-index 수정은 그대로 유지
---
 src/ui/styles/layout.css | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/ui/styles/layout.css b/src/ui/styles/layout.css
index 94682c7..3375b3a 100644
--- a/src/ui/styles/layout.css
+++ b/src/ui/styles/layout.css
@@ -112,11 +112,6 @@ aside {
   font-size: 18px;
 }
 
-<<<<<<< HEAD
-=======
-<<<<<<< Updated upstream
-=======
->>>>>>> 108613c (fix: 뽀모도로 집중 중앙 메시지 z-index 조정)
 .panel-content {
   position: relative;
   border-radius: 15px; /* 패널 border-radius와 일치 */
@@ -183,10 +178,6 @@ aside {
   }
 }
 
-<<<<<<< HEAD
-=======
->>>>>>> Stashed changes
->>>>>>> 108613c (fix: 뽀모도로 집중 중앙 메시지 z-index 조정)
 .main-column {
   display: flex;
   flex-direction: column;

From b51ed7779f6728bcd99ec269e708d764a30c2ab5 Mon Sep 17 00:00:00 2001
From: opencode <opencode@example.com>
Date: Fri, 16 Jan 2026 18:16:46 +0900
Subject: [PATCH 09/10] =?UTF-8?q?feat:=20=EB=8B=B5=EA=B8=80=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=EC=8B=9C=20=EC=99=B8=EB=B6=80=20=EC=84=9C=EB=B2=84?=
 =?UTF-8?q?=20=EC=82=AC=EC=9A=A9=EC=9E=90=EC=97=90=EA=B2=8C=20=ED=92=80=20?=
 =?UTF-8?q?=ED=95=B8=EB=93=A4=20=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- formatReplyHandle 유틸리티 함수 추가
- 같은 서버 사용자: @username, 다른 서버 사용자: @username@domain
- handleReply 함수와 replySummary에 적용하여 외부 서버 사용자에게만 풀 핸들 표시
---
 src/App.tsx             |  7 ++++---
 src/ui/utils/account.ts | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 06c114c..9f6ff0c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,7 +11,7 @@ import { useTimeline } from "./ui/hooks/useTimeline";
 import { useClickOutside } from "./ui/hooks/useClickOutside";
 import { useAppContext } from "./ui/state/AppContext";
 import type { AccountsState, AppServices } from "./ui/state/AppContext";
-import { createAccountId, formatHandle, normalizeInstanceUrl } from "./ui/utils/account";
+import { createAccountId, formatHandle, formatReplyHandle, normalizeInstanceUrl } from "./ui/utils/account";
 import { clearPendingOAuth, createOauthState, loadPendingOAuth, loadRegisteredApp, saveRegisteredApp, storePendingOAuth } from "./ui/utils/oauth";
 import { getTimelineLabel, getTimelineOptions, normalizeTimelineType } from "./ui/utils/timeline";
 import { sanitizeHtml } from "./ui/utils/htmlSanitizer";
@@ -1035,7 +1035,7 @@ export const App = () => {
   const dragStateRef = useRef<{ startX: number; scrollLeft: number; pointerId: number } | null>(null);
   const [isBoardDragging, setIsBoardDragging] = useState(false);
   const replySummary = replyTarget
-    ? `@${replyTarget.accountHandle} · ${replyTarget.content.slice(0, 80)}`
+    ? `@${formatReplyHandle(replyTarget.accountHandle, replyTarget.accountUrl, composeAccount?.instanceUrl ?? "")} · ${replyTarget.content.slice(0, 80)}`
     : null;
   const [route, setRoute] = useState<Route>(() => parseRoute());
   const timelineListeners = useRef<Map<string, Set<(status: Status) => void>>>(new Map());
@@ -1493,7 +1493,8 @@ export const App = () => {
     }
     setComposeAccountId(account.id);
     setReplyTarget(status);
-    setMentionSeed(`@${status.accountHandle}`);
+    const formattedHandle = formatReplyHandle(status.accountHandle, status.accountUrl, account.instanceUrl);
+    setMentionSeed(`@${formattedHandle}`);
     setSelectedStatus(null);
   };
 
diff --git a/src/ui/utils/account.ts b/src/ui/utils/account.ts
index b6151ab..06e96f6 100644
--- a/src/ui/utils/account.ts
+++ b/src/ui/utils/account.ts
@@ -26,6 +26,40 @@ export const formatHandle = (handle: string, instanceUrl: string): string => {
   }
 };
 
+export const formatReplyHandle = (
+  accountHandle: string,
+  accountUrl: string | null,
+  currentAccountInstanceUrl: string
+): string => {
+  if (!accountHandle) {
+    return "";
+  }
+  
+  // If handle already includes domain, return as-is
+  if (accountHandle.includes("@")) {
+    return accountHandle;
+  }
+  
+  // Try to determine if user is from the same server
+  if (accountUrl) {
+    try {
+      const userHost = new URL(accountUrl).hostname;
+      const currentHost = new URL(currentAccountInstanceUrl).hostname;
+      
+      // If different servers, use full handle
+      if (userHost !== currentHost) {
+        return `${accountHandle}@${userHost}`;
+      }
+    } catch {
+      // If URL parsing fails, fall back to simple handle
+      return accountHandle;
+    }
+  }
+  
+  // Same server or couldn't determine, use simple handle
+  return accountHandle;
+};
+
 export const parseAccountLabel = (
   label: string
 ): { displayName: string; handle: string } | null => {

From 9d570ba10d6f3b478997e3e34868ae0a4936be61 Mon Sep 17 00:00:00 2001
From: opencode <opencode@example.com>
Date: Fri, 16 Jan 2026 20:04:04 +0900
Subject: [PATCH 10/10] =?UTF-8?q?fix:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B2=84=ED=8A=BC=20=EB=B3=B4=EB=8D=94=20?=
 =?UTF-8?q?=EC=83=89=EC=83=81=EC=9D=84=20input-border=EC=99=80=20=ED=86=B5?=
 =?UTF-8?q?=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 이미지 추가 버튼의 보더 색상을 --color-attachment-add-border에서 --color-input-border로 변경
- 모든 테마에서 불필요한 --color-attachment-add-border 변수 제거
- 입력 필드와 일관된 UI 색상 제공
---
 src/ui/styles/components.css   |  2 +-
 src/ui/styles/themes/dark.css  | 10 +++++-----
 src/ui/styles/themes/light.css |  8 ++++----
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/ui/styles/components.css b/src/ui/styles/components.css
index 04eda7a..7f313e5 100644
--- a/src/ui/styles/components.css
+++ b/src/ui/styles/components.css
@@ -1746,7 +1746,7 @@ button.ghost {
 /* 첨부 영역 내의 이미지 추가 버튼 */
 .compose-attachments .file-button.attachment-thumb {
   background: transparent;
-  border: 1px dashed var(--color-attachment-add-border);
+  border: 1px dashed var(--color-input-border);
   color: var(--color-attachment-add-text);
   flex-shrink: 0;
 }
diff --git a/src/ui/styles/themes/dark.css b/src/ui/styles/themes/dark.css
index d65185a..a637fa5 100644
--- a/src/ui/styles/themes/dark.css
+++ b/src/ui/styles/themes/dark.css
@@ -112,7 +112,7 @@
     --color-compose-input-bg: #151310;
     --color-attachments-bg: #1a1814;
     --color-attachments-border: #3a312a;
-    --color-attachment-add-border: #8fa6cf;
+
     --color-attachment-add-text: #c4b6a6;
     --color-action-bg: #4a6cb6;
     --color-action-text: #edf3ff;
@@ -238,7 +238,7 @@
     --color-compose-input-bg: #1a100f;
     --color-attachments-bg: #2a1b19;
     --color-attachments-border: #3b2624;
-    --color-attachment-add-border: #cf8c8c;
+
     --color-attachment-add-text: #cf8c8c;
     --color-action-bg: #8f2f2f;
     --color-action-text: #fff1f1;
@@ -349,7 +349,7 @@
     --color-compose-input-bg: #181e2a;
     --color-attachments-bg: #212a3a;
     --color-attachments-border: #2e3b50;
-    --color-attachment-add-border: #f0a6c8;
+
     --color-attachment-add-text: #d7ddea;
     --color-action-bg: #7db4f0;
     --color-action-text: #0f1c2a;
@@ -466,7 +466,7 @@
     --color-compose-input-bg: #101010;
     --color-attachments-bg: #181818;
     --color-attachments-border: #3a3a3a;
-    --color-attachment-add-border: #f0f0f0;
+
     --color-attachment-add-text: #d6d6d6;
     --color-action-bg: #e6e6e6;
     --color-action-text: #111111;
@@ -586,7 +586,7 @@
     --color-compose-input-bg: #0a120e;
     --color-attachments-bg: #101c15;
     --color-attachments-border: #1f3a2b;
-    --color-attachment-add-border: #6ce48b;
+
     --color-attachment-add-text: #8cd49a;
     --color-action-bg: #39b56b;
     --color-action-text: #0b140f;
diff --git a/src/ui/styles/themes/light.css b/src/ui/styles/themes/light.css
index 411c26c..6f1062e 100644
--- a/src/ui/styles/themes/light.css
+++ b/src/ui/styles/themes/light.css
@@ -108,7 +108,7 @@
   --color-compose-input-bg: #fff7f2;
   --color-attachments-bg: #f3e4dc;
   --color-attachments-border: #ead7cc;
-  --color-attachment-add-border: #c9b9a6;
+  
   --color-attachment-add-text: #7b3f3f;
 }
 
@@ -223,7 +223,7 @@
   --color-compose-input-bg: #f7fbff;
   --color-attachments-bg: #e9f2fb;
   --color-attachments-border: #d6e5f2;
-  --color-attachment-add-border: #aeb7c6;
+  
   --color-attachment-add-text: #4a6b86;
 }
 
@@ -338,7 +338,7 @@
   --color-compose-input-bg: #ffffff;
   --color-attachments-bg: #f1f1f1;
   --color-attachments-border: #1d1d1d;
-  --color-attachment-add-border: #9e9e9e;
+  
   --color-attachment-add-text: #2a2a2a;
   --color-delete-button-bg: #c62828;
   --color-delete-button-text: #fff5f5;
@@ -457,7 +457,7 @@
   --color-compose-input-bg: #f6fff6;
   --color-attachments-bg: #e9f5ec;
   --color-attachments-border: #cfe6d5;
-  --color-attachment-add-border: #a8cdb4;
+  
   --color-attachment-add-text: #2f6b46;
   --color-delete-button-bg: #b13b3b;
   --color-delete-button-text: #fff4f4;