/* cards.jsx — карточки записей/напоминаний и модальные окна. */
/* ============================================================ КАРТОЧКА ЗАПИСИ */
// view: active | archived | trash; onAction(note, 'pin'|'archive'|'unarchive'|'trash'|'restore'|'purge')
function NoteCard({ note, onOpen, onAction, view = "active", index = 0 }) {
const body = note.summary || note.raw_text;
const rem = note.reminder && note.reminder.status === "pending" ? formatRemind(note.reminder.remind_at) : null;
const atts = note.attachments || [];
const media = atts.filter((a) => a.type === "image" || a.type === "video");
const links = atts.filter((a) => a.type === "link");
// действия зависят от вида
const actions = view === "trash"
? [{ k: "restore", icon: "refresh", label: "Вернуть", tone: "accent" }, { k: "purge", icon: "trash", label: "Навсегда", tone: "danger" }]
: view === "archived"
? [{ k: "unarchive", icon: "inbox", label: "Из архива", tone: "accent" }, { k: "trash", icon: "trash", label: "В корзину", tone: "danger" }]
: [{ k: "pin", icon: "star", label: note.pinned ? "Открепить" : "Закрепить", tone: "amber" }, { k: "archive", icon: "inbox", label: "В архив", tone: "muted" }, { k: "trash", icon: "trash", label: "Удалить", tone: "danger" }];
const [dx, setDx] = React.useState(0);
const [open, setOpen] = React.useState(false);
const start = React.useRef(null);
const moved = React.useRef(false);
const revealW = actions.length * 60;
const onStart = (e) => { start.current = e.touches[0].clientX; moved.current = false; };
const onMove = (e) => {
if (start.current == null) return;
let d = e.touches[0].clientX - start.current + (open ? -revealW : 0);
if (Math.abs(d - (open ? -revealW : 0)) > 6) moved.current = true;
d = Math.max(-revealW - 20, Math.min(0, d));
setDx(d);
};
const onEnd = () => {
const shouldOpen = dx < -revealW / 2;
setOpen(shouldOpen);
setDx(shouldOpen ? -revealW : 0);
start.current = null;
};
const handleClick = () => {
if (moved.current) return;
if (open) { setOpen(false); setDx(0); return; }
onOpen(note);
};
const doAction = (k) => { setOpen(false); setDx(0); onAction && onAction(note, k); };
return (
{/* задний слой действий (свайп) — виден только во время свайпа */}
{actions.map((a) => (
))}
{/* действия на ховере (десктоп) */}
{actions.map((a) => (
))}
{note.pinned && view === "active" &&
}
{formatCreated(note.created_at)}
{body}
{note.summary && (
{note.raw_text}
)}
{(note.tags.length > 0 || rem) && (
{rem && (
{rem.text}
)}
{note.tags.map((t) => {t})}
)}
{atts.length > 0 && (
{media.slice(0, 3).map((a) => (
{a.type === "image" && a.url ? (
) : (
)}
{a.type === "video" &&
}
))}
{links.slice(0, 2).map((a) => (
{a.name || hostOf(a.url)}
))}
{atts.length > media.slice(0,3).length + links.slice(0,2).length && (
+{atts.length - media.slice(0,3).length - links.slice(0,2).length}
)}
{tags.map((t) => onChange(tags.filter((x) => x !== t))}>{t})}
setVal(e.target.value)}
onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); add(); } if (e.key === "Backspace" && !val && tags.length) onChange(tags.slice(0, -1)); }}
onBlur={add}
placeholder={tags.length ? "" : "добавить тег…"}
className="flex-1 min-w-[80px] bg-transparent outline-none text-[13px] text-[var(--text)] placeholder:text-[var(--muted)]"
/>
);
}
/* ===================================================== РЕДАКТОР ВЛОЖЕНИЙ */
function AttachmentEditor({ attachments, onChange }) {
const [linkUrl, setLinkUrl] = React.useState("");
const [adding, setAdding] = React.useState(false);
const fileRef = React.useRef(null);
const addLink = () => {
let u = linkUrl.trim();
if (!u) return;
if (!/^https?:\/\//i.test(u)) u = "https://" + u;
onChange([...attachments, { id: api._uuid(), type: "link", url: u, name: hostOf(u) }]);
setLinkUrl(""); setAdding(false);
};
const [uploading, setUploading] = React.useState(false);
const onFiles = async (e) => {
const files = [...(e.target.files || [])];
e.target.value = "";
if (!files.length) return;
setUploading(true);
const next = [];
for (const f of files) {
try {
const up = await api.uploadMedia(f); // → постоянный /media/... URL
next.push({ id: api._uuid(), type: up.type, url: up.url, name: up.name || f.name, size: up.size });
} catch (err) {
next.push({ id: api._uuid(), type: f.type.startsWith("video") ? "video" : "image", url: URL.createObjectURL(f), name: f.name });
}
}
setUploading(false);
onChange([...attachments, ...next]);
};
const remove = (id) => onChange(attachments.filter((a) => a.id !== id));
return (
{attachments.length > 0 && (
{attachments.map((a) => (
))}
)}
{adding ? (
setLinkUrl(e.target.value)}
onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); addLink(); } if (e.key === "Escape") setAdding(false); }}
placeholder="https://…"
className="flex-1 rounded-xl border border-[var(--border)] bg-[var(--surface-2)] px-3 h-9 text-[13px] text-[var(--text)] outline-none focus:border-[var(--accent)] transition"
/>
) : (
)}
{formatCreated(note.created_at)}