justme
4b8d0b5a5f
- chat: left-aligned discord-style messages with grouped senders, hover actions, an auto-growing composer and file cards - send: render messages and files locally first and replace the placeholder when the worker publishes the real item; failures keep the text with a retry action - navigation: space rail plus a flatter channel list with the space name header and collapsible groups - members: right pane tabs (files / members) grouped by online, offline and pending users, with a prominent invite action and a top bar shortcut - notifications: toast host for invite results; invitees get a toast with an accept action, and the invitation payload now carries the space name and inviter inside the encrypted grant - users over devices: drop device names, the device list and device rename/release; senders show the account (guests show as guest) and the share panel only keeps links - follow contract 7.0.0 (max_members, members_used, members_full, /join) - docs: ui-design and frontend updated for the new layout and concepts
47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
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 [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>}
|
|
</button>
|
|
{open ? (
|
|
<textarea
|
|
className={styles.input}
|
|
rows={4}
|
|
placeholder="常改的草稿放这里,所有设备实时同步"
|
|
value={text}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
onBlur={() => setDraft(null)}
|
|
/>
|
|
) : null}
|
|
</section>
|
|
);
|
|
}
|