feat(web): connect quick share flow

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

web/src/features/channel/Notepad.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useRef, useState } from 'react';
+import { useWorkspace } from '@/store/workspace';
+import { Icon } from '@/ui/Icon';
+import styles from './Notepad.module.css';
+
+const SAVE_DELAY_MS = 400;
+
+/** 共享便签:频道唯一的快照槽,最后写入者胜(protocol §9)。默认折叠,不占首屏 */
+export function Notepad({ defaultOpen = false }: { defaultOpen?: boolean }) {
+  const snapshot = useWorkspace((s) => s.snapshot);
+  const setSnapshot = useWorkspace((s) => s.setSnapshot);
+  const editor = useWorkspace((s) => s.devices.find((d) => d.editing && !d.self)?.name);
+  const [open, setOpen] = useState(defaultOpen);
+  const [draft, setDraft] = useState<string | null>(null);
+  const timer = useRef<number | undefined>(undefined);
+
+  useEffect(() => () => clearTimeout(timer.current), []);
+
+  function onChange(text: string) {
+    setDraft(text);
+    clearTimeout(timer.current);
+    timer.current = window.setTimeout(() => void setSnapshot(text), SAVE_DELAY_MS);
+  }
+
+  const text = draft ?? snapshot.text;
+  const firstLine = text.split('\n').find((l) => l.trim() !== '') ?? '空';
+
+  return (
+    <section className={styles.pad}>
+      <button type="button" className={styles.head} aria-expanded={open} onClick={() => setOpen((v) => !v)}>
+        <span className={`${styles.chev} ${open ? styles.open : ''}`}><Icon name="chevronRight" size={16} /></span>
+        <span className={styles.title}>便签</span>
+        {open ? null : <span className={styles.preview}>{firstLine}</span>}
+        {editor ? <span className={styles.editing}>{editor} 正在编辑</span> : null}
+      </button>
+      {open ? (
+        <textarea
+          className={styles.input}
+          rows={4}
+          placeholder="常改的草稿放这里,所有设备实时同步"
+          value={text}
+          onChange={(e) => onChange(e.target.value)}
+          onBlur={() => setDraft(null)}
+        />
+      ) : null}
+    </section>
+  );
+}