refactor(web): 提取共享的圆形多选勾选框组件，统一5处重复实现

创建群聊、消息多选、我的收藏多选、黑名单多选、转发选择器——这5个
地方各自手写了一份几乎一样的"圆形+选中变实心+里面check图标"勾选框
markup，样式上有细微且无意的差异（比如有的选中态多画了一圈边框、
用的灰色深浅不完全一致），上次只修了转发选择器一处，用户指出创建
群聊那里同样丑、而且问了"这种组件不该统一做吗"——確实该統一。

新增 `app/SelectionCheckbox.tsx`，把上次在转发选择器里验证过的
矢量勾选图标方案抽成共享组件，5处全部换成调用它。以后这个视觉样式
要再调整，改一个文件就够了，不会再出现"修好了一处，另外四处还是
老样子"的情况。

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web/src/app/SelectionCheckbox.tsx

@@ -0,0 +1,32 @@
+interface SelectionCheckboxProps {
+  selected: boolean;
+  className?: string;
+}
+
+/**
+ * Shared circular multi-select indicator -- every list in this app that lets you pick multiple
+ * items (forward targets, message multi-select, create-group contact picker, favorites, blocklist)
+ * used to hand-copy this same circle-that-fills-with-a-checkmark markup into its own file, each
+ * with small, accidental class differences (a stray extra border in the selected state here, a
+ * slightly different gray there) -- fixing the same visual bug five separate times is exactly the
+ * failure mode a shared component exists to prevent.
+ *
+ * Draws the checkmark as a hand-drawn SVG path, not the Material Icons font glyph `Icon` uses
+ * everywhere else: the font's hinting isn't tuned for a ~13px glyph inside a 20px circle, so above
+ * 1x pixel density it renders visibly soft/asymmetric where a vector path stays crisp at any scale.
+ * A deliberate one-off exception to this app's usual `Icon`-for-everything convention, not a second
+ * icon system -- scoped to this one selection indicator.
+ */
+export function SelectionCheckbox({ selected, className = '' }: SelectionCheckboxProps) {
+  return (
+    <span
+      className={`grid h-5 w-5 flex-none place-items-center rounded-full ${selected ? 'bg-accent' : 'border-[1.5px] border-[#c5cad2] bg-white'} ${className}`}
+    >
+      {selected ? (
+        <svg viewBox="0 0 16 16" fill="none" className="h-3 w-3 text-white" 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>
+      ) : null}
+    </span>
+  );
+}

web/src/features/contacts/BlocklistView.tsx

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 
 import { Avatar } from '@/app/Avatar';
 import { Icon } from '@/app/Icon';
+import { SelectionCheckbox } from '@/app/SelectionCheckbox';
 import { Toast } from '@/app/Toast';
 import { fetchAllPages } from '@/lib/api/client';
 import { batchUnblockUsers, getBlocks, unblockUser } from '@/lib/api/friends';
@@ -114,15 +115,7 @@ export function BlocklistView() {
               onKeyDown={selectMode ? (e) => e.key === 'Enter' && toggleSelected(b.user.user_id) : undefined}
               className={`flex items-center gap-3 rounded-xl bg-white px-4 py-3 shadow-bubble ${selectMode ? 'cursor-pointer' : ''}`}
             >
-              {selectMode ? (
+              {selectMode ? <SelectionCheckbox selected={selected.has(b.user.user_id)} /> : null}
-                <span
-                  className={`grid h-5 w-5 flex-none place-items-center rounded-full border text-xs text-white ${
-                    selected.has(b.user.user_id) ? 'border-accent bg-accent' : 'border-[#d5d9df] bg-white'
-                  }`}
-                >
-                  {selected.has(b.user.user_id) ? <Icon name="check" className="text-[14px]" /> : null}
-                </span>
-              ) : null}
               <Avatar
                 id={b.user.user_id}
                 name={b.user.display_name}

web/src/features/favorites/FavoritesLayout.tsx

@@ -4,6 +4,7 @@ import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-q
 import { Link } from 'react-router-dom';
 
 import { Icon } from '@/app/Icon';
+import { SelectionCheckbox } from '@/app/SelectionCheckbox';
 import { Toast } from '@/app/Toast';
 import { AudioAttachment } from '@/features/messages/AttachmentPreview';
 import { ForwardPickerModal } from '@/features/messages/ForwardPickerModal';
@@ -189,15 +190,7 @@ function FavoriteCard({ item, selectMode, selected, onToggle }: { item: Favorite
     >
       <div className="relative">
         {body}
-        {selectMode ? (
+        {selectMode ? <SelectionCheckbox selected={selected} className="absolute -right-1 -top-1" /> : null}
-          <span
-            className={`absolute -right-1 -top-1 grid h-5 w-5 place-items-center rounded-full text-[13px] text-white ${
-              selected ? 'bg-accent' : 'border-[1.5px] border-[#c5cad2] bg-white'
-            }`}
-          >
-            {selected ? <Icon name="check" className="text-[14px]" /> : null}
-          </span>
-        ) : null}
       </div>
       <div className="flex items-center justify-between border-t border-border-list-item pt-2.5 text-xs text-text-tertiary-3">
         <SourceLine source={item.source} />

web/src/features/groups/CreateGroupModal.tsx

@@ -3,6 +3,7 @@ import { useMemo, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 
 import { Icon } from '@/app/Icon';
+import { SelectionCheckbox } from '@/app/SelectionCheckbox';
 import { fetchAllPages } from '@/lib/api/client';
 import { getFriends } from '@/lib/api/friends';
 import { createGroup, getGroupGovernance, updateGroupGovernance } from '@/lib/api/groups';
@@ -133,13 +134,7 @@ export function CreateGroupModal({ onClose, onCreated }: CreateGroupModalProps)
                           onClick={() => toggle(f.user_id, label)}
                           className="flex w-full items-center gap-3 rounded-lg px-2 py-2 text-left hover:bg-surface-rail"
                         >
-                          <span
+                          <SelectionCheckbox selected={checked} />
-                            className={`grid h-5 w-5 flex-none place-items-center rounded-full ${
-                              checked ? 'bg-accent text-white' : 'border-[1.5px] border-[#c5cad2]'
-                            }`}
-                          >
-                            {checked ? <Icon name="check" className="text-[13px]" /> : null}
-                          </span>
                           <span
                             className={`grid h-9 w-9 flex-none place-items-center rounded-lg text-sm font-medium text-white ${avatarBgClass(f.user_id)}`}
                           >

web/src/features/messages/ForwardPickerModal.tsx

@@ -3,6 +3,7 @@ import { useMemo, useState } from 'react';
 import type { Contact } from 'tinode-sdk';
 
 import { Icon } from '@/app/Icon';
+import { SelectionCheckbox } from '@/app/SelectionCheckbox';
 import { avatarBgClass, avatarLetter } from '@/lib/avatar';
 import { useEscapeKey } from '@/lib/hooks';
 import { useChatList, useTinode } from '@/lib/tinode/hooks';
@@ -14,19 +15,6 @@ 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
@@ -115,11 +103,7 @@ export function ForwardPickerModal({ onPick, onClose }: ForwardPickerModalProps)
           {avatarLetter(c.public?.fn)}
         </span>
         <span className="min-w-0 flex-1 truncate text-sm text-text-body">{c.public?.fn || c.topic}</span>
-        <span
+        <SelectionCheckbox selected={isSelected} />
-          className={`grid h-5 w-5 flex-none place-items-center rounded-full ${isSelected ? 'bg-accent' : 'border-[1.5px] border-[#c5cad2]'}`}
-        >
-          {isSelected ? <CheckMark className="h-3 w-3 text-white" /> : null}
-        </span>
       </button>
     );
   };

web/src/features/messages/MessageBubble.tsx

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 
 import { Avatar } from '@/app/Avatar';
 import { Icon } from '@/app/Icon';
+import { SelectionCheckbox } from '@/app/SelectionCheckbox';
 import { avatarBgClass, avatarLetter } from '@/lib/avatar';
 import { callResultDisplay, contactCardContentOf, isRecalled, isServerDeleted, systemNoticeText, type ContactCardContent } from '@/lib/messages/dispatch';
 import { renderDrafty } from '@/lib/messages/drafty';
@@ -119,14 +120,8 @@ export function MessageRow({
         isRecalled(msg) ? (
           <div className="h-5 w-5 flex-none" />
         ) : (
-          <button
+          <button type="button" onClick={() => typeof msg.seq === 'number' && onToggleSelect?.(msg.seq)} className="flex-none">
-            type="button"
+            <SelectionCheckbox selected={selected} />
-            onClick={() => typeof msg.seq === 'number' && onToggleSelect?.(msg.seq)}
-            className={`grid h-5 w-5 flex-none place-items-center rounded-full text-[13px] text-white ${
-              selected ? 'bg-accent' : 'border-[1.5px] border-[#c5cad2]'
-            }`}
-          >
-            {selected ? <Icon name="check" className="text-[14px]" /> : null}
           </button>
         )
       ) : null}