feat(web): connect quick share flow

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

web/src/features/home/Home.tsx

@@ -0,0 +1,99 @@
+import { lazy, Suspense, useCallback, useState, type DragEvent } from 'react';
+import { channelPath, navigate, sharePath } from '@/app/navigation';
+import type { ChannelInfo, Share } from '@/core-bridge/types';
+import { ComposeSheet } from '@/features/channel/ComposeSheet';
+import type { ClipboardPayload } from '@/lib/clipboard';
+import { useGlobalPaste } from '@/lib/useGlobalPaste';
+import { useChannels } from '@/store/channels';
+import { useShares } from '@/store/shares';
+import { Button } from '@/ui/Button';
+import { ChannelList } from './ChannelList';
+import { CreateSheet } from './CreateSheet';
+import { QuickShare } from './QuickShare';
+import styles from './Home.module.css';
+
+const ScanSheet = lazy(() => import('@/features/scan/ScanSheet').then((m) => ({ default: m.ScanSheet })));
+
+/** 初始状态:什么都没创建时看到的页面。核心是「快速分享」 */
+export function Home() {
+  const createDraft = useShares((s) => s.createDraft);
+  const loadDemo = useChannels((s) => s.loadDemo);
+  const loadShareDemo = useShares((s) => s.loadDemo);
+  const [createOpen, setCreateOpen] = useState(false);
+  const [scanOpen, setScanOpen] = useState(false);
+  const [composeOpen, setComposeOpen] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const [failed, setFailed] = useState(false);
+
+  const open = (c: ChannelInfo | Share) => navigate('state' in c ? sharePath(c.id) : channelPath(c.id));
+
+  const share = useCallback(
+    async (p: ClipboardPayload) => {
+      if (busy || (p.files.length === 0 && !p.text)) return;
+      setBusy(true);
+      setFailed(false);
+      try {
+        open(await createDraft(p));
+      } catch {
+        setFailed(true);
+      } finally {
+        setBusy(false);
+      }
+    },
+    [busy, createDraft],
+  );
+
+  useGlobalPaste(share);
+
+  function onDragOver(e: DragEvent) {
+    if (!e.dataTransfer.types.includes('Files')) return;
+    e.preventDefault();
+    setDragging(true);
+  }
+
+  function onDrop(e: DragEvent) {
+    e.preventDefault();
+    setDragging(false);
+    void share({ files: [...e.dataTransfer.files], text: '' });
+  }
+
+  return (
+    <div className={styles.page} onDragOver={onDragOver} onDragLeave={() => setDragging(false)} onDrop={onDrop}>
+      <main className={styles.main}>
+        <header className={styles.head}>
+          <h1 className={styles.logo}>WebDrop</h1>
+          <p className={styles.sub}>在自己的设备之间快速传文件和文本,也可以分享给别人。</p>
+        </header>
+
+        <QuickShare busy={busy} dragging={dragging} onShare={share} onCompose={() => setComposeOpen(true)} />
+        {failed ? <p role="alert" className={styles.error}>创建分享失败,请重试。</p> : null}
+
+        <ChannelList kind="share" title="我的分享" onOpen={open} />
+
+        <div className={styles.divider}>常驻频道:多台自己的设备之间同步</div>
+        <div className={styles.actions}>
+          <Button icon="edit" onClick={() => setCreateOpen(true)}>新建频道</Button>
+          <Button icon="scan" onClick={() => setScanOpen(true)}>加入频道</Button>
+        </div>
+
+        <ChannelList kind="channel" title="我的频道" onOpen={open} />
+
+        <p className={styles.note}>
+          加密频道的密钥只在链接里,服务器看不到内容。持有链接的人可以读取该频道的全部历史。
+        </p>
+        {import.meta.env.DEV ? (
+          <Button variant="ghost" onClick={() => { loadDemo(); loadShareDemo(); }}>载入演示数据</Button>
+        ) : null}
+      </main>
+
+      {createOpen ? <CreateSheet onClose={() => setCreateOpen(false)} onCreated={open} /> : null}
+      <Suspense fallback={null}>
+        {scanOpen ? <ScanSheet onClose={() => setScanOpen(false)} onJoined={open} /> : null}
+      </Suspense>
+      {composeOpen ? (
+        <ComposeSheet onClose={() => setComposeOpen(false)} onSubmit={(text) => void share({ files: [], text })} />
+      ) : null}
+    </div>
+  );
+}