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

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

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

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

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 ? (
-                <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}
+              {selectMode ? <SelectionCheckbox selected={selected.has(b.user.user_id)} /> : null}
               <Avatar
                 id={b.user.user_id}
                 name={b.user.display_name}