From 3280b92a096c4ddd1e0bf596da66256f9304817d Mon Sep 17 00:00:00 2001
From: Your Name <aa@bb.com>
Date: Thu, 10 Sep 2026 19:25:36 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20=E8=BD=AC=E5=8F=91=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=99=A8=E5=8B=BE=E9=80=89=E6=A0=B7=E5=BC=8F=E6=94=B9?=
 =?UTF-8?q?=E7=94=A8=E7=9F=A2=E9=87=8F=E5=9B=BE=E6=A0=87=EF=BC=8C=E5=A5=BD?=
 =?UTF-8?q?=E5=8F=8B/=E7=BE=A4=E8=81=8A=E5=8F=AF=E5=88=86=E5=88=AB?=
 =?UTF-8?q?=E5=B1=95=E5=BC=80=E6=94=B6=E8=B5=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

原来的勾选图标是Material Icons字体里的"check"字形，在20px圆圈里塞
14px字体图标，字体本身没有针对这么小的尺寸做过精细调校，稍微放大
一点看就是个不规整的糊状图案。换成手绘SVG勾选路径（矢量、任何缩放
比例下都清晰），并去掉了选中态多余的一层border（原来选中时背景色
和边框色叠在一起，等于多画了一圈没必要的描边）。

好友、群聊两个分组标题现在都可以点击收起/展开（各自独立），列表长
的时候可以先收起不relevant的那一类，收起状态下已经选中的项不会被
清空，"全选"按钮无论展开收起都能点。

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../features/messages/ForwardPickerModal.tsx  | 62 ++++++++++++-------
 1 file changed, 38 insertions(+), 24 deletions(-)

diff --git a/web/src/features/messages/ForwardPickerModal.tsx b/web/src/features/messages/ForwardPickerModal.tsx
index f27e19fd..55a7d03e 100644
--- a/web/src/features/messages/ForwardPickerModal.tsx
+++ b/web/src/features/messages/ForwardPickerModal.tsx
@@ -14,6 +14,19 @@ interface ForwardPickerModalProps {
   onClose: () => void;
 }
 
+/** A hand-drawn checkmark instead of the Material Icons font glyph this row used to use -- the font
+ *  glyph's hinting isn't tuned for a 14px render inside a 20px circle, so at anything above 1x pixel
+ *  density it comes out visibly soft/asymmetric where a vector path stays crisp at any scale. Not a
+ *  systemic swap (`Icon` is still how the rest of the app draws icons) -- scoped to this one
+ *  selection indicator, which is the one a user actually screenshotted and flagged as rough-looking. */
+function CheckMark({ className = '' }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" className={className} aria-hidden="true">
+      <path d="M3.5 8.5L6.5 11.5L12.5 4.5" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
 /**
  * README §3.6: multi-select targets + an optional comment, sent in one action. Used by the message
  * context menu's single-message "转发", the multi-select bulk bar's "转发", and favorites' bulk
@@ -30,6 +43,9 @@ export function ForwardPickerModal({ onPick, onClose }: ForwardPickerModalProps)
   const [query, setQuery] = useState('');
   const [selected, setSelected] = useState<Set<string>>(new Set());
   const [comment, setComment] = useState('');
+  // Both start expanded -- collapsing is for a long list getting in the way of the OTHER section,
+  // not a default state anyone would want on first open.
+  const [collapsed, setCollapsed] = useState<{ friends: boolean; groups: boolean }>({ friends: false, groups: false });
   useEscapeKey(onClose);
   const filtered = contacts.filter((c) => !query.trim() || (c.public?.fn || '').includes(query.trim()));
 
@@ -75,6 +91,10 @@ export function ForwardPickerModal({ onPick, onClose }: ForwardPickerModalProps)
     });
   };
 
+  const toggleCollapsed = (section: 'friends' | 'groups') => {
+    setCollapsed((prev) => ({ ...prev, [section]: !prev[section] }));
+  };
+
   const send = () => {
     if (selected.size === 0) return;
     onPick([...selected], comment.trim());
@@ -96,14 +116,26 @@ export function ForwardPickerModal({ onPick, onClose }: ForwardPickerModalProps)
         </span>
         <span className="min-w-0 flex-1 truncate text-sm text-text-body">{c.public?.fn || c.topic}</span>
         <span
-          className={`grid h-5 w-5 flex-none place-items-center rounded-full border ${isSelected ? 'border-accent bg-accent' : 'border-[#d5d9df]'}`}
+          className={`grid h-5 w-5 flex-none place-items-center rounded-full ${isSelected ? 'bg-accent' : 'border-[1.5px] border-[#c5cad2]'}`}
         >
-          {isSelected ? <Icon name="check" className="text-[14px] text-white" /> : null}
+          {isSelected ? <CheckMark className="h-3 w-3 text-white" /> : null}
         </span>
       </button>
     );
   };
 
+  const renderSectionHeader = (label: string, section: 'friends' | 'groups', topics: string[], allSelected: boolean) => (
+    <div className="flex items-center justify-between px-3 pb-1 pt-2">
+      <button type="button" onClick={() => toggleCollapsed(section)} className="flex items-center gap-0.5 text-xs text-text-tertiary-2">
+        <Icon name="chevron_right" className={`text-sm transition-transform ${collapsed[section] ? '' : 'rotate-90'}`} />
+        {label}
+      </button>
+      <button type="button" onClick={() => toggleSectionSelectAll(topics, allSelected)} className="text-xs text-accent">
+        {allSelected ? '取消全选' : '全选'}
+      </button>
+    </div>
+  );
+
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#22262d]/25" onClick={onClose}>
       <div className="flex h-[560px] w-[420px] flex-col rounded-xl bg-white shadow-modal" onClick={(e) => e.stopPropagation()}>
@@ -130,32 +162,14 @@ export function ForwardPickerModal({ onPick, onClose }: ForwardPickerModalProps)
         <div className="flex-1 overflow-y-auto px-2 py-2">
           {friends.length ? (
             <>
-              <div className="flex items-center justify-between px-3 pb-1 pt-2">
-                <span className="text-xs text-text-tertiary-2">好友</span>
-                <button
-                  type="button"
-                  onClick={() => toggleSectionSelectAll(friendTopics, allFriendsSelected)}
-                  className="text-xs text-accent"
-                >
-                  {allFriendsSelected ? '取消全选' : '全选'}
-                </button>
-              </div>
-              {friends.map(renderRow)}
+              {renderSectionHeader('好友', 'friends', friendTopics, allFriendsSelected)}
+              {collapsed.friends ? null : friends.map(renderRow)}
             </>
           ) : null}
           {groups.length ? (
             <>
-              <div className="flex items-center justify-between px-3 pb-1 pt-2">
-                <span className="text-xs text-text-tertiary-2">群聊</span>
-                <button
-                  type="button"
-                  onClick={() => toggleSectionSelectAll(groupTopics, allGroupsSelected)}
-                  className="text-xs text-accent"
-                >
-                  {allGroupsSelected ? '取消全选' : '全选'}
-                </button>
-              </div>
-              {groups.map(renderRow)}
+              {renderSectionHeader('群聊', 'groups', groupTopics, allGroupsSelected)}
+              {collapsed.groups ? null : groups.map(renderRow)}
             </>
           ) : null}
           {!friends.length && !groups.length ? (