Merge pull request #470 from SyncNos/crh1

Refactor reader controls and improve menu layout

Author: chiimagnus

README.zh-CN.md

@@ -89,6 +89,7 @@ YouTube 和 Bilibili 视频页可采集页面已加载的字幕 / 转录内容
 - **文章评论线程**：网页文章支持本地 threaded comments（详情页 + inpage 面板）；可通过侧栏“附加选区”按钮把当前选区附加为引用（无选区会清空引用）；点击/聚焦输入框不再自动附加；并随 Zip v2 备份恢复与文章同步链路保留。
 - **智能当前页抓取**：popup 会自动判断页面类型并触发“抓取 AI 对话”或“抓取文章”。
 - **图片缓存**：可选开启 AI 对话与网页文章图片本地缓存，支持在详情页手动补全历史 AI 对话图片。
+- **详情页更多菜单**：阅读设置、缓存图片和字数统计等次级操作统一收进右上角更多菜单，正文页头保持更简洁。
 - **反防盗链图片缓存**：网页文章图片命中规则时会自动缓存，即使关闭网页文章图片缓存开关也不会影响抓取主链路。
 - **Markdown 阅读风格**：在 Inpage 设置中选择 Medium / Notion / Book，控制 popup / app 里的 markdown 渲染样式。
 - **数据库备份 / 恢复**：完整导出和导入本地会话库（包含 `image_cache` 与 `article_comments` 评论线程），敏感信息（OAuth token 等）自动排除。

src/ui/AGENTS.md

@@ -45,6 +45,7 @@
 
 - 优先复用现有 class 组合与 shared style（例如 `src/ui/shared/button-styles.ts`）。
 - 新增 UI 状态尽量用 token 或现有 utility，不要引入新的一套“局部常量”。
+- 详情页的次级操作优先收进右上角更多菜单，菜单内入口应使用竖排的 `menu-item` 风格，避免在正文 header 里散落多个并列按钮。
 - 在可交互元素上保留可见的 `focus-visible` 样式（避免键盘可访问性回退）。
 
 ## 4. 自检命令（手动）

src/ui/conversations/ConversationDetailPane.tsx

@@ -1,4 +1,4 @@
-import { ChevronLeft } from 'lucide-react';
+import { ChevronLeft, MoreHorizontal } from 'lucide-react';
 
 import { ChatDetailView } from '@ui/conversations/views/ChatDetailView';
 import { ArticleReaderView } from '@ui/conversations/views/ArticleReaderView';
@@ -9,7 +9,8 @@ import { useChatOutlineActiveIndex } from '@ui/conversations/chat-outline/useCha
 import { t, formatConversationTitle } from '@i18n';
 import { useConversationsApp } from '@viewmodels/conversations/conversations-context';
 import { DetailHeaderActionBar } from '@ui/conversations/DetailHeaderActionBar';
-import { buttonTintClassName, headerButtonClassName } from '@ui/shared/button-styles';
+import { buttonMenuItemClassName, headerButtonClassName } from '@ui/shared/button-styles';
+import { MenuPopover } from '@ui/shared/MenuPopover';
 import { tooltipAttrs } from '@ui/shared/AppTooltip';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { countWordsFromMessages } from '@services/shared/word-count';
@@ -61,7 +62,6 @@ export function ConversationDetailPane({
   const openActions = safeActions.filter((action) => action.slot === 'open');
   const toolActions = safeActions.filter((action) => action.slot === 'tools');
 
-  const outlineButtonClass = buttonTintClassName();
   const headerIconButtonClass = headerButtonClassName();
   const kindView = conversationKinds.pick(selected as any)?.view ?? DEFAULT_VIEW;
   const isArticleRenderer = kindView.renderer === 'article';
@@ -160,6 +160,7 @@ export function ConversationDetailPane({
   const [urlEditing, setUrlEditing] = useState(false);
   const [urlDraft, setUrlDraft] = useState('');
   const [urlCleaning, setUrlCleaning] = useState(false);
+  const [moreMenuOpen, setMoreMenuOpen] = useState(false);
   const urlInputRef = useRef<HTMLInputElement | null>(null);
   const displayedUrl = String((selected as any)?.url || '').trim();
   const wordCount = useMemo(() => {
@@ -172,12 +173,32 @@ export function ConversationDetailPane({
     wordCount != null && Number.isFinite(wordCount)
       ? `${wordCountLabel} ${Math.max(0, Math.floor(wordCount)).toLocaleString()}`
       : '';
+  const hasReaderMoreMenuContent =
+    readerFeatures.textLayout || readerFeatures.theme || readerFeatures.narration;
+  const hasMoreMenuContent = Boolean(wordCountText) || toolActions.length > 0 || hasReaderMoreMenuContent;
+  const moreMenuPanelClassName =
+    'tw-w-[214px] tw-max-w-[min(214px,calc(100vw-28px))] tw-text-[var(--text-primary)]';
+  const closeMoreMenu = useCallback(() => {
+    setMoreMenuOpen(false);
+    setReaderToolbarPortalTarget(null);
+  }, []);
+  const handleMoreMenuOpenChange = useCallback(
+    (next: boolean) => {
+      if (next) {
+        setMoreMenuOpen(true);
+        return;
+      }
+      closeMoreMenu();
+    },
+    [closeMoreMenu],
+  );
 
   useEffect(() => {
     setUrlEditing(false);
     setUrlDraft('');
     setUrlCleaning(false);
-  }, [activeId]);
+    closeMoreMenu();
+  }, [activeId, selected?.id, closeMoreMenu]);
 
   useEffect(() => {
     userMessageElByIdRef.current.clear();
@@ -353,18 +374,9 @@ export function ConversationDetailPane({
                           }}
                           aria-label={displayedUrl ? 'Edit URL' : 'Set URL'}
                           title={displayedUrl || t('noLinkAvailable')}
-                        >
+                          >
                           {displayedUrl || t('noLinkAvailable')}
                         </button>
-                        {wordCountText ? (
-                          <span
-                            className="tw-inline-flex tw-items-center tw-rounded-[var(--radius-chip)] tw-border tw-border-[var(--border)] tw-px-2 tw-py-0.5 tw-text-[10px] tw-font-extrabold tw-text-[var(--text-secondary)]"
-                            aria-label={wordCountText}
-                            {...tooltipAttrs(wordCountText)}
-                          >
-                            {wordCountText}
-                          </span>
-                        ) : null}
                       </>
                     )}
                   </div>
@@ -376,27 +388,14 @@ export function ConversationDetailPane({
               </div>
             </div>
             <div className="tw-flex tw-shrink-0 tw-items-center tw-justify-end tw-gap-2 tw-whitespace-nowrap">
-              {isArticleRenderer ? (
-                <div
-                  ref={setReaderToolbarPortalTarget}
-                  className="tw-flex tw-items-center tw-gap-2"
-                  data-reader-header-toolbar-slot="true"
-                />
-              ) : null}
-              <DetailHeaderActionBar
-                actions={toolActions}
-                buttonClassName={outlineButtonClass}
-                menuTriggerLabel={t('detailHeaderToolsMenuLabel')}
-                menuTriggerAriaLabel={t('detailHeaderToolsMenuAria')}
-                menuAriaLabel={t('detailHeaderToolsMenuAria')}
-              />
               <DetailHeaderActionBar
                 actions={openActions}
                 buttonClassName={headerIconButtonClass}
                 iconOnly
                 menuTriggerLabel={t('detailHeaderOpenInMenuLabel')}
                 menuTriggerAriaLabel={t('detailHeaderOpenInMenuAria')}
                 menuAriaLabel={t('detailHeaderOpenInMenuAria')}
+                className="tw-order-1"
               />
 
               {canOpenCommentsSidebar ? (
@@ -405,7 +404,7 @@ export function ConversationDetailPane({
                   onClick={() => {
                     onTriggerCommentsSidebar?.();
                   }}
-                  className={headerButtonClassName()}
+                  className={[headerButtonClassName(), 'tw-order-2'].join(' ')}
                   aria-label={commentsSidebarLabel}
                   {...tooltipAttrs(commentsSidebarLabel)}
                   aria-pressed={commentsSidebarOpen ? 'true' : 'false'}
@@ -424,6 +423,75 @@ export function ConversationDetailPane({
                   <span className="tw-sr-only">{commentsSidebarLabel}</span>
                 </button>
               ) : null}
+              {hasMoreMenuContent ? (
+                <MenuPopover
+                  open={moreMenuOpen}
+                  onOpenChange={handleMoreMenuOpenChange}
+                  ariaLabel={t('moreButton')}
+                  side="bottom"
+                  align="end"
+                  panelMinWidth={214}
+                  panelClassName={moreMenuPanelClassName}
+                  className="tw-order-3"
+                  trigger={(triggerProps) => (
+                    <button
+                      {...triggerProps}
+                      data-detail-header-more-trigger="true"
+                      aria-label={t('moreButton')}
+                      className={headerIconButtonClass}
+                    >
+                      <MoreHorizontal size={14} strokeWidth={2} aria-hidden="true" />
+                      <span className="tw-sr-only">{t('moreButton')}</span>
+                    </button>
+                  )}
+                >
+                  {moreMenuOpen ? (
+                    <div className="tw-flex tw-flex-col tw-gap-1">
+                      {hasReaderMoreMenuContent ? (
+                        <div
+                          ref={setReaderToolbarPortalTarget}
+                          className="tw-flex tw-flex-col tw-gap-1"
+                          data-reader-header-toolbar-slot="true"
+                        />
+                      ) : null}
+
+                      {toolActions.length ? (
+                        <div
+                          className={[
+                            hasReaderMoreMenuContent ? 'tw-border-t tw-border-[var(--border)] tw-pt-1' : '',
+                            'tw-flex tw-flex-col tw-gap-1',
+                          ]
+                            .filter(Boolean)
+                            .join(' ')}
+                        >
+                          <DetailHeaderActionBar
+                            actions={toolActions}
+                            buttonClassName={buttonMenuItemClassName()}
+                            showLabelAlways
+                            closeMenuOnActionTrigger={closeMoreMenu}
+                            className="tw-w-full"
+                          />
+                        </div>
+                      ) : null}
+
+                      {wordCountText ? (
+                        <div
+                          className={[
+                            hasReaderMoreMenuContent || toolActions.length ? 'tw-border-t tw-border-[var(--border)] tw-pt-1' : '',
+                            'tw-px-2 tw-py-1 tw-text-[11px] tw-font-semibold tw-text-[var(--text-secondary)]',
+                          ]
+                            .filter(Boolean)
+                            .join(' ')}
+                          data-detail-word-count-row="true"
+                          {...tooltipAttrs(wordCountText)}
+                        >
+                          {wordCountText}
+                        </div>
+                      ) : null}
+                    </div>
+                  ) : null}
+                </MenuPopover>
+              ) : null}
             </div>
 
             {isChatRenderer ? (
@@ -446,18 +514,6 @@ export function ConversationDetailPane({
             'tw-relative tw-pb-3 md:tw-pb-4',
           ].join(' ')}
         >
-          {wordCountText && urlEditing ? (
-            <div className="tw-flex tw-justify-end">
-              <span
-                className="tw-inline-flex tw-items-center tw-rounded-[var(--radius-chip)] tw-border tw-border-[var(--border)] tw-px-2 tw-py-0.5 tw-text-[10px] tw-font-extrabold tw-text-[var(--text-secondary)]"
-                aria-label={wordCountText}
-                {...tooltipAttrs(wordCountText)}
-              >
-                {wordCountText}
-              </span>
-            </div>
-          ) : null}
-
           {isArticleRenderer ? (
             <ArticleReaderView
               selected={selected}

src/ui/conversations/ConversationsScene.tsx

@@ -152,32 +152,30 @@ export function ConversationsScene({
   if (isNarrow) {
     if (narrowRoute === 'detail') {
       return (
-        <div className="tw-flex tw-h-full tw-min-h-0 tw-w-full tw-min-w-0 tw-flex-col tw-bg-[var(--bg-card)] tw-text-[var(--text-primary)]">
-          <div className="route-scroll tw-min-h-0 tw-flex-1 tw-overflow-auto tw-overflow-x-hidden tw-bg-[var(--bg-card)]">
-            <ConversationDetailPane
-              onBack={returnToList}
-              onTriggerCommentsSidebar={
-                canOpenCommentsFromDetail
-                  ? () => {
-                      if (typeof onOpenCommentsExternally === 'function') {
-                        onOpenCommentsExternally();
-                        return;
-                      }
-                      if (!commentsSidebarRuntime) return;
-                      openComments();
-                      void commentsSidebarRuntime.sidebarController.open({
-                        focusComposer: true,
-                        source: narrowCommentsOpenSource,
-                        ensureContext: false,
-                      });
+        <div className="route-scroll tw-flex tw-h-full tw-min-h-0 tw-w-full tw-min-w-0 tw-flex-col tw-overflow-auto tw-overflow-x-hidden tw-bg-[var(--bg-card)] tw-text-[var(--text-primary)]">
+          <ConversationDetailPane
+            onBack={returnToList}
+            onTriggerCommentsSidebar={
+              canOpenCommentsFromDetail
+                ? () => {
+                    if (typeof onOpenCommentsExternally === 'function') {
+                      onOpenCommentsExternally();
+                      return;
                     }
-                  : undefined
-              }
-              onCommentsLocatorRootChange={(root) => {
-                commentsSidebarRuntime?.setLocatorRoot(root);
-              }}
-            />
-          </div>
+                    if (!commentsSidebarRuntime) return;
+                    openComments();
+                    void commentsSidebarRuntime.sidebarController.open({
+                      focusComposer: true,
+                      source: narrowCommentsOpenSource,
+                      ensureContext: false,
+                    });
+                  }
+                : undefined
+            }
+            onCommentsLocatorRootChange={(root) => {
+              commentsSidebarRuntime?.setLocatorRoot(root);
+            }}
+          />
         </div>
       );
     }

src/ui/conversations/DetailHeaderActionBar.tsx

@@ -11,6 +11,8 @@ export type DetailHeaderActionBarProps = {
   actions: DetailHeaderAction[];
   buttonClassName: string;
   iconOnly?: boolean;
+  showLabelAlways?: boolean;
+  closeMenuOnActionTrigger?: () => void;
   triggerIcon?: ReactNode;
   menuTriggerLabel?: string;
   menuTriggerAriaLabel?: string;
@@ -22,6 +24,8 @@ export function DetailHeaderActionBar({
   actions,
   buttonClassName,
   iconOnly = false,
+  showLabelAlways = false,
+  closeMenuOnActionTrigger,
   triggerIcon,
   menuTriggerLabel,
   menuTriggerAriaLabel,
@@ -91,17 +95,18 @@ export function DetailHeaderActionBar({
     const icon = resolveActionIcon(action);
     const resolvedTriggerIcon = triggerIcon ||
       (iconOnly ? <ExternalLink size={16} strokeWidth={2} aria-hidden="true" /> : icon) || (
-        <ExternalLink size={16} strokeWidth={2} aria-hidden="true" />
-      );
+      <ExternalLink size={16} strokeWidth={2} aria-hidden="true" />
+    );
     const triggerButtonClassName = iconOnly ? buttonClassName : [buttonClassName, 'tw-text-[13px]'].join(' ');
     return (
-      <div className={className || 'tw-flex tw-items-center tw-gap-2'}>
+      <div className={['tw-flex tw-items-center tw-gap-2', className || ''].join(' ').trim()}>
         <button
           key={action.id}
           type="button"
           {...tooltipAttrs(action.label)}
           onClick={() => {
             void handleTrigger(action);
+            closeMenuOnActionTrigger?.();
           }}
           className={triggerButtonClassName}
           aria-label={action.label}
@@ -113,10 +118,16 @@ export function DetailHeaderActionBar({
           ) : (
             <span className="tw-inline-flex tw-items-center tw-gap-1.5">
               {resolvedTriggerIcon}
-              <span className="tw-hidden md:tw-inline tw-whitespace-nowrap">{buttonLabel}</span>
+              <span className={showLabelAlways ? 'tw-whitespace-nowrap' : 'tw-hidden md:tw-inline tw-whitespace-nowrap'}>
+                {buttonLabel}
+              </span>
               {busy && action.showBusyProgress ? (
                 <span
-                  className="tw-hidden md:tw-inline-flex tw-h-1.5 tw-w-14 tw-overflow-hidden tw-rounded-full tw-bg-[var(--bg-sunken)]"
+                  className={
+                    showLabelAlways
+                      ? 'tw-inline-flex tw-h-1.5 tw-w-14 tw-overflow-hidden tw-rounded-full tw-bg-[var(--bg-sunken)]'
+                      : 'tw-hidden md:tw-inline-flex tw-h-1.5 tw-w-14 tw-overflow-hidden tw-rounded-full tw-bg-[var(--bg-sunken)]'
+                  }
                   aria-hidden="true"
                 >
                   <span className="tw-h-full tw-w-1/2 tw-animate-pulse tw-rounded-full tw-bg-[var(--accent)]" />
@@ -143,7 +154,7 @@ export function DetailHeaderActionBar({
   const menuButtonClass = buttonMenuItemClassName();
 
   return (
-    <div className={className || 'tw-flex tw-items-center tw-gap-2'}>
+    <div className={['tw-flex tw-items-center tw-gap-2', className || ''].join(' ').trim()}>
       <MenuPopover
         open={menuOpen}
         onOpenChange={setMenuOpen}
@@ -165,7 +176,13 @@ export function DetailHeaderActionBar({
               <>
                 <span className="tw-inline-flex tw-items-center tw-gap-1.5">
                   {resolvedTriggerIcon}
-                  <span className="tw-hidden md:tw-inline tw-whitespace-nowrap tw-leading-none">{triggerLabel}</span>
+                  <span
+                    className={
+                      showLabelAlways ? 'tw-whitespace-nowrap tw-leading-none' : 'tw-hidden md:tw-inline tw-whitespace-nowrap tw-leading-none'
+                    }
+                  >
+                    {triggerLabel}
+                  </span>
                 </span>
                 <span
                   className="tw-ml-1 tw-w-[14px] tw-text-center tw-text-[12px] tw-font-black tw-leading-none tw-text-[var(--text-secondary)]"
@@ -185,8 +202,9 @@ export function DetailHeaderActionBar({
             type="button"
             role="menuitem"
             onClick={() => {
-              setMenuOpen(false);
               void handleTrigger(action);
+              setMenuOpen(false);
+              closeMenuOnActionTrigger?.();
             }}
             aria-disabled={action.disabled ? 'true' : undefined}
             disabled={busy || !!action.disabled}