feat(web): connect quick share flow

Signed-off-by: JustMe <mr.toing@outlook.com>

web/src/features/share/DraftRow.tsx

@@ -0,0 +1,32 @@
+import { formatSize } from '@/lib/format';
+import { useShareSession } from '@/store/shareSession';
+import { Button } from '@/ui/Button';
+import { titleOf } from '@/features/item/summary';
+import { Tile } from '@/features/item/Tile';
+import styles from './DraftRow.module.css';
+
+/** 草稿里的一行:可以移除。只在草稿阶段存在 */
+export function DraftRow({ id }: { id: string }) {
+  const item = useShareSession((s) => s.byId[id]);
+  const removeItem = useShareSession((s) => s.removeItem);
+  if (!item) return null;
+
+  const receiving = item.state.kind === 'receiving' ? item.state.progress : null;
+  const size = item.kind === 'file' ? item.size : new Blob([item.text]).size;
+
+  return (
+    <li className={styles.row}>
+      <Tile item={item} />
+      <span className={styles.text}>
+        <span className={styles.title}>{titleOf(item)}</span>
+        <span className={styles.sub}>{formatSize(size)}{receiving !== null ? ` · 传输中 ${Math.round(receiving * 100)}%` : ''}</span>
+        {receiving !== null ? (
+          <span className={styles.bar} role="progressbar" aria-valuenow={Math.round(receiving * 100)}>
+            <span className={styles.fill} style={{ width: `${Math.round(receiving * 100)}%` }} />
+          </span>
+        ) : null}
+      </span>
+      <Button variant="ghost" icon="close" label="移除" onClick={() => void removeItem(id)} />
+    </li>
+  );
+}