Codecov Report

❌ Patch coverage is 52.94118% with 40 lines in your changes missing coverage. Please review.

📢 Thoughts on this report? Let us know!

Hey @JerryLiu369 👋 整体方案很不错！useSyncExternalStore + 模块级 store 的思路很干净，按 source 分区避免了 sendbox/workspace 互相干扰，trackUpload + finish() 的 try/finally 也保证了状态清理。下面有几点想讨论一下：

1. XHR 缺少 abort 事件处理 🟠

uploadFileViaHttp 里只监听了 load 和 error，没有处理 abort。如果请求被中断（比如用户导航离开，或者未来要加取消功能），Promise 会永远 pending，tracker.finish() 永远不会被调用 → 上传状态卡死 → 发送按钮永久禁用。

建议加上：

xhr.addEventListener('abort', () => {
  reject(new Error('Upload aborted'));
});

这样 finally 里的 tracker.finish() 就能正常执行了。

2. getSnapshot 闭包稳定性 🟠

export function useUploadState(source?: UploadSource): UploadStateSnapshot {
  const getSnapshot = source ? () => sourceSnapshots[source] : () => globalSnapshot;
  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
}

每次渲染都会创建新闭包，useSyncExternalStore 检测到引用变化后会重新订阅（unsubscribe → subscribe）。功能没问题，但可以提到模块顶层来避免这个开销：

const getGlobalSnapshot = () => globalSnapshot;
const snapshotGetters: Record<UploadSource, () => UploadStateSnapshot> = {
  sendbox: () => sourceSnapshots.sendbox,
  workspace: () => sourceSnapshots.workspace,
};

export function useUploadState(source?: UploadSource): UploadStateSnapshot {
  const getSnapshot = source ? snapshotGetters[source] : getGlobalSnapshot;
  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
}

3. UploadProgressBar 的内联 style 🟡

组件里有不少内联 style（padding, fontSize, borderRadius 等），项目约定优先用 UnoCSS utility classes。动态的 width 保留 style 没问题，但静态属性建议迁移成 class，比如：

<div className='px-12px py-4px text-12px color-text-3'>
  <div className='h-3px rd-2px bg-fill-3 overflow-hidden'>
    <div
      className='h-full rd-2px bg-primary-6 transition-width duration-200 ease'
      style={{ width: `${overallPercent}%` }}
    />
  </div>
</div>

4. defaultValue 里的模板字符串 🟡

defaultValue: `Uploading ${activeCount} file(s)...`

这里用了 JS 模板字符串，fallback 时不会走 i18next 的插值/复数管线。建议改成：

defaultValue: 'Uploading {{count}} file(s)...'

虽然实际翻译文件都已经有值了，但 defaultValue 作为最后防线还是用 i18next 语法更保险。

5. 测试文件的导入路径 🔵

import { trackUpload, useUploadState } from '../../src/renderer/hooks/file/useUploadState';

项目里一般用 @renderer/* 别名，这里用了相对路径，小问题，顺手改了就好。

总结：方案本身没问题，主要是 #1 的 abort 处理建议加上，不然状态可能卡住。其他几点优先级不高，看你的节奏处理就行。

Thanks for the thorough review, @kaizhou-lab!

All 5 points have been addressed:

1. XHR abort handler — Added xhr.addEventListener('abort', () => reject(new Error('Upload aborted'))) so the Promise rejects and tracker.finish() is always called via the finally block.

2. Snapshot getter stability — Moved snapshot getters to module level as suggested: getGlobalSnapshot and sourceSnapshotGetters are now stable references, avoiding the re-subscription churn on each render.

3. UnoCSS classes — Replaced all static inline styles in UploadProgressBar with UnoCSS utility classes. The dynamic width percentage is kept as an inline style since it can't be expressed statically.

4. i18next defaultValue syntax — Changed to use {{count}} interpolation syntax so the fallback goes through the i18next pipeline correctly.

5. Test import alias — Updated to use the @renderer/* alias instead of the relative path.