@acms-subir/core 0.1.0 → 0.2.0

package/src/components/LinksManager.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { DndContext, PointerSensor, KeyboardSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
 import type { DragEndEvent } from '@dnd-kit/core';
 import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
@@ -17,6 +17,10 @@ import { ImagePicker } from './editor/ImagePicker';
 // (brand-preset links, custom links, email, phone, heading, spacer, text,
 // vcard, raw HTML), drag-to-reorder, inline editing with an icon picker
 // (emoji / image / favicon), and a phone-framed live preview of /links.
+//
+// Edits stay local until "Save changes" commits them all at once — the live
+// /links page never sees a half-arranged state. Discard restores the saved
+// state.
 
 type SaveState = 'saved' | 'saving' | 'error';
 type Kind = Link['kind'];
@@ -102,14 +106,20 @@ const NEW_ITEM: Record<Kind, Partial<Link>> = {
   html: { kind: 'html', label: 'Custom block', url: '', html: '' },
 };
 
+// unsaved additions carry a temp id until links.create returns the real one
+const isTemp = (id: string) => id.startsWith('tmp-');
+
 export default function LinksManager({ links: initial, settings, unsplashEnabled }: Props) {
   const [links, setLinks] = useState<Link[]>(initial);
   // links-page identity — its own fields, seeded from site title/tagline until set
-  const [profile, setProfile] = useState({
+  const initialProfile = {
     linksName: settings.linksName || settings.siteTitle,
     linksBio: settings.linksBio || settings.tagline,
     linksAvatar: settings.linksAvatar,
-  });
+  };
+  const [profile, setProfile] = useState(initialProfile);
+  // last state the server has — dirty compares against this
+  const [saved, setSaved] = useState({ links: initial, profile: initialProfile });
   const [avatarPickerOpen, setAvatarPickerOpen] = useState(false);
   const [pickerOpen, setPickerOpen] = useState(initial.length === 0);
   const [sitesOpen, setSitesOpen] = useState(false);
@@ -118,76 +128,123 @@ export default function LinksManager({ links: initial, settings, unsplashEnabled
   const [colorPickerFor, setColorPickerFor] = useState<string | null>(null);
   const [saveState, setSaveState] = useState<SaveState>('saved');
   const [tick, setTick] = useState(0);
-  const pending = useRef(0);
-  const timers = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
+
+  const linkShape = (l: Link) => ({ id: l.id, kind: l.kind, label: l.label, url: l.url, icon: l.icon, html: l.html, meta: l.meta });
+  const dirty = useMemo(
+    () =>
+      JSON.stringify({ links: links.map(linkShape), profile }) !==
+      JSON.stringify({ links: saved.links.map(linkShape), profile: saved.profile }),
+    [links, profile, saved]
+  );
+
+  // unsaved edits live only in this tab — warn before losing them
+  useEffect(() => {
+    if (!dirty) return;
+    const onLeave = (e: BeforeUnloadEvent) => e.preventDefault();
+    window.addEventListener('beforeunload', onLeave);
+    return () => window.removeEventListener('beforeunload', onLeave);
+  }, [dirty]);
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
 
-  // every mutation runs through this so the save chip and preview stay honest
-  async function run(fn: () => Promise<{ error?: unknown }>) {
-    pending.current += 1;
-    setSaveState('saving');
-    const r = await fn();
-    pending.current -= 1;
-    if (r.error) setSaveState('error');
-    else if (pending.current === 0) {
-      setSaveState('saved');
-      setTick((t) => t + 1);
-    }
-  }
-
-  function debounced(key: string, fn: () => void, ms = 600) {
-    const prev = timers.current.get(key);
-    if (prev) clearTimeout(prev);
-    timers.current.set(key, setTimeout(() => { timers.current.delete(key); fn(); }, ms));
-  }
-
-  function edit(id: string, patch: Partial<Pick<Link, 'label' | 'url' | 'icon' | 'html' | 'meta'>>, instant = false) {
+  function edit(id: string, patch: Partial<Pick<Link, 'label' | 'url' | 'icon' | 'html' | 'meta'>>) {
     setLinks((ls) => ls.map((l) => (l.id === id ? { ...l, ...patch } : l)));
-    if (instant) void run(() => actions.links.update({ id, ...patch }));
-    else debounced(id, () => void run(() => actions.links.update({ id, ...patch })));
   }
 
   function editProfile(patch: Partial<typeof profile>) {
     setProfile((p) => ({ ...p, ...patch }));
-    debounced('profile', () => void run(() => actions.settings.update(patch)));
   }
 
-  async function add(data: Partial<Link>, openIt = true) {
+  function add(data: Partial<Link>, openIt = true) {
     setPickerOpen(false);
     setSitesOpen(false);
-    await run(async () => {
-      const r = await actions.links.create(data as Parameters<typeof actions.links.create>[0]);
-      if (!r.error && openIt) setOpenEditor((o) => ({ ...o, [r.data.link.id]: true }));
-      if (!r.error) setLinks((ls) => [...ls, r.data.link]);
-      return r;
-    });
+    const id = `tmp-${crypto.randomUUID()}`;
+    setLinks((ls) => [
+      ...ls,
+      { id, kind: 'link', label: '', url: '', icon: '', html: '', meta: {}, clicks: 0, order: ls.length, ...data } as Link,
+    ]);
+    if (openIt) setOpenEditor((o) => ({ ...o, [id]: true }));
   }
 
   function addSite(site: (typeof SITES)[number]) {
-    void add({ kind: 'link', label: site.name, url: site.url, icon: svgOf(site.si), meta: { color: `#${site.si.hex}` } });
+    add({ kind: 'link', label: site.name, url: site.url, icon: svgOf(site.si), meta: { color: `#${site.si.hex}` } }, false);
   }
 
   function remove(id: string) {
-    if (!window.confirm('Delete this block?')) return;
+    // local until Save — Discard brings it back
     setLinks((ls) => ls.filter((l) => l.id !== id));
-    void run(() => actions.links.delete({ id }));
   }
 
   function onDragEnd(e: DragEndEvent) {
     const { active, over } = e;
     if (!over || active.id === over.id) return;
-    setLinks((ls) => {
-      const next = arrayMove(ls, ls.findIndex((l) => l.id === active.id), ls.findIndex((l) => l.id === over.id));
-      void run(() => actions.links.reorder({ ids: next.map((l) => l.id) }));
-      return next;
-    });
+    setLinks((ls) => arrayMove(ls, ls.findIndex((l) => l.id === active.id), ls.findIndex((l) => l.id === over.id)));
+  }
+
+  // one commit for everything: deletes, creates (temp ids become real),
+  // updates, the display order, then the profile fields
+  async function saveAll() {
+    setSaveState('saving');
+    try {
+      const savedById = new Map(saved.links.map((l) => [l.id, l]));
+      const keptIds = new Set(links.map((l) => l.id));
+      for (const l of saved.links) {
+        if (!keptIds.has(l.id)) {
+          const r = await actions.links.delete({ id: l.id });
+          if (r.error) throw r.error;
+        }
+      }
+      const next: Link[] = [];
+      for (const l of links) {
+        if (isTemp(l.id)) {
+          const r = await actions.links.create({ kind: l.kind, label: l.label, url: l.url, icon: l.icon, html: l.html, meta: l.meta });
+          if (r.error) throw r.error;
+          next.push({ ...l, id: r.data.link.id, order: r.data.link.order });
+        } else {
+          const prev = savedById.get(l.id);
+          if (prev && JSON.stringify(linkShape(prev)) !== JSON.stringify(linkShape(l))) {
+            const r = await actions.links.update({ id: l.id, label: l.label, url: l.url, icon: l.icon, html: l.html, meta: l.meta });
+            if (r.error) throw r.error;
+          }
+          next.push(l);
+        }
+      }
+      if (next.length) {
+        const r = await actions.links.reorder({ ids: next.map((l) => l.id) });
+        if (r.error) throw r.error;
+      }
+      if (JSON.stringify(profile) !== JSON.stringify(saved.profile)) {
+        const r = await actions.settings.update(profile);
+        if (r.error) throw r.error;
+      }
+      // reopen editors under the real ids so panes don't collapse mid-edit
+      setOpenEditor((o) => {
+        const remap: Record<string, boolean> = {};
+        links.forEach((l, i) => { if (o[l.id]) remap[next[i]?.id ?? l.id] = true; });
+        return remap;
+      });
+      setLinks(next);
+      setSaved({ links: next, profile });
+      setSaveState('saved');
+      setTick((t) => t + 1);
+    } catch {
+      setSaveState('error');
+    }
   }
 
-  const saveLabel = saveState === 'saved' ? 'Saved' : saveState === 'saving' ? 'Saving…' : 'Save failed — edit to retry';
+  function discard() {
+    setLinks(saved.links);
+    setProfile(saved.profile);
+    setSaveState('saved');
+  }
+
+  const saveLabel =
+    saveState === 'saving' ? 'Saving…' :
+    saveState === 'error' ? 'Save failed' :
+    dirty ? 'Unsaved changes — not live yet' : 'Live';
 
   return (
     <div className="lm-layout">
@@ -212,7 +269,7 @@ export default function LinksManager({ links: initial, settings, unsplashEnabled
                 type="button"
                 className="lm-avatar-remove"
                 title="Remove photo"
-                onClick={() => { setProfile((p) => ({ ...p, linksAvatar: '' })); void run(() => actions.settings.update({ linksAvatar: '' })); }}
+                onClick={() => setProfile((p) => ({ ...p, linksAvatar: '' }))}
               >
                 ✕
               </button>
@@ -261,7 +318,7 @@ export default function LinksManager({ links: initial, settings, unsplashEnabled
                     key={t.key}
                     type="button"
                     className="lm-tile"
-                    onClick={() => (t.kind === 'site' ? setSitesOpen(true) : void add(NEW_ITEM[t.kind]))}
+                    onClick={() => (t.kind === 'site' ? setSitesOpen(true) : add(NEW_ITEM[t.kind]))}
                   >
                     <span className="lm-tile-ico" dangerouslySetInnerHTML={{ __html: TILE_ICONS[t.key] }} />
                     <span className="lm-tile-body">
@@ -315,15 +372,20 @@ export default function LinksManager({ links: initial, settings, unsplashEnabled
         onSelect={(img) => {
           setAvatarPickerOpen(false);
           setProfile((p) => ({ ...p, linksAvatar: img.src }));
-          void run(() => actions.settings.update({ linksAvatar: img.src }));
         }}
       />
 
       <aside className="lm-preview">
         <div className="lm-preview-bar">
           <span className="lm-preview-label">Live preview</span>
-          <span className={`lm-savestate ${saveState}`}>{saveLabel}</span>
+          <span className={`lm-savestate ${saveState === 'saved' && dirty ? 'dirty' : saveState}`}>{saveLabel}</span>
           <div style={{ display: 'flex', gap: 2 }}>
+            {dirty && (
+              <>
+                <button type="button" className="btn sm ghost" onClick={discard} disabled={saveState === 'saving'}>Discard</button>
+                <button type="button" className="btn sm primary" onClick={() => void saveAll()} disabled={saveState === 'saving'}>Save changes</button>
+              </>
+            )}
             <button type="button" className="btn sm ghost" title="Refresh" onClick={() => setTick((t) => t + 1)}>↻</button>
             <a className="btn sm ghost" href="/links" target="_blank" rel="noopener" title="Open in tab">↗</a>
           </div>

package/src/components/NavManager.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { DndContext, PointerSensor, KeyboardSensor, closestCenter, useSensor, useSensors } from '@dnd-kit/core';
 import type { DragEndEvent } from '@dnd-kit/core';
 import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
@@ -10,6 +10,9 @@ import type { NavItem, NavArea } from '../lib/schema';
 // auto-list of published pages (which stays as a fallback while the header
 // area is empty); footer renders above the footer text; social feeds the
 // footer social row and share UIs.
+//
+// Edits stay local until "Save changes" commits them all at once — the live
+// nav never sees a half-rearranged state. Discard restores the saved state.
 
 type SaveState = 'saved' | 'saving' | 'error';
 
@@ -19,6 +22,9 @@ const AREAS: { key: NavArea; title: string; hint: string }[] = [
   { key: 'social', title: 'Social', hint: 'Footer social row — also used for share links on posts.' },
 ];
 
+// unsaved additions carry a temp id until nav.create returns the real one
+const isTemp = (id: string) => id.startsWith('tmp-');
+
 function Row({
   item, onEdit, onArea, onDelete,
 }: {
@@ -63,52 +69,45 @@ function Row({
 
 export default function NavManager({ items: initial }: { items: NavItem[] }) {
   const [items, setItems] = useState<NavItem[]>(initial);
+  // last state the server has — dirty compares against this
+  const [saved, setSaved] = useState<NavItem[]>(initial);
   const [saveState, setSaveState] = useState<SaveState>('saved');
-  const pending = useRef(0);
-  const timers = useRef<Map<string, ReturnType<typeof setTimeout>>>(new Map());
+
+  const dirty = useMemo(
+    () =>
+      JSON.stringify(items.map(({ id, label, url, area }) => ({ id, label, url, area }))) !==
+      JSON.stringify(saved.map(({ id, label, url, area }) => ({ id, label, url, area }))),
+    [items, saved]
+  );
+
+  // unsaved edits live only in this tab — warn before losing them
+  useEffect(() => {
+    if (!dirty) return;
+    const onLeave = (e: BeforeUnloadEvent) => e.preventDefault();
+    window.addEventListener('beforeunload', onLeave);
+    return () => window.removeEventListener('beforeunload', onLeave);
+  }, [dirty]);
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
 
-  async function run(fn: () => Promise<{ error?: unknown }>) {
-    pending.current += 1;
-    setSaveState('saving');
-    const r = await fn();
-    pending.current -= 1;
-    if (r.error) setSaveState('error');
-    else if (pending.current === 0) setSaveState('saved');
-  }
-
-  function debounced(key: string, fn: () => void, ms = 600) {
-    const prev = timers.current.get(key);
-    if (prev) clearTimeout(prev);
-    timers.current.set(key, setTimeout(() => { timers.current.delete(key); fn(); }, ms));
-  }
-
   function edit(id: string, patch: Partial<Pick<NavItem, 'label' | 'url'>>) {
     setItems((ls) => ls.map((n) => (n.id === id ? { ...n, ...patch } : n)));
-    debounced(id, () => void run(() => actions.nav.update({ id, ...patch })));
   }
 
   function setArea(id: string, area: NavArea) {
     setItems((ls) => ls.map((n) => (n.id === id ? { ...n, area } : n)));
-    void run(() => actions.nav.update({ id, area }));
   }
 
-  async function add(area: NavArea) {
-    await run(async () => {
-      const r = await actions.nav.create({ label: 'New link', url: '/', area });
-      if (!r.error) setItems((ls) => [...ls, r.data.item]);
-      return r;
-    });
+  function add(area: NavArea) {
+    setItems((ls) => [...ls, { id: `tmp-${crypto.randomUUID()}`, label: 'New link', url: '/', area, order: ls.length }]);
   }
 
   function remove(id: string) {
-    if (!window.confirm('Delete this navigation item?')) return;
+    // local until Save — Discard brings it back
     setItems((ls) => ls.filter((n) => n.id !== id));
-    void run(() => actions.nav.delete({ id }));
   }
 
   function onDragEnd(area: NavArea, e: DragEndEvent) {
@@ -119,21 +118,68 @@ export default function NavManager({ items: initial }: { items: NavItem[] }) {
       const rest = ls.filter((n) => n.area !== area);
       const from = group.findIndex((n) => n.id === active.id);
       const to = group.findIndex((n) => n.id === over.id);
-      const moved = arrayMove(group, from, to);
-      const next = [...rest, ...moved];
-      // persist the full display order: header, footer, social, each in order
-      const ordered = AREAS.flatMap((a) => next.filter((n) => n.area === a.key)).map((n) => n.id);
-      void run(() => actions.nav.reorder({ ids: ordered }));
-      return next;
+      return [...rest, ...arrayMove(group, from, to)];
     });
   }
 
+  // one commit for everything: deletes, creates (temp ids become real),
+  // updates, then the full display order
+  async function saveAll() {
+    setSaveState('saving');
+    try {
+      const savedById = new Map(saved.map((n) => [n.id, n]));
+      const keptIds = new Set(items.map((n) => n.id));
+      for (const n of saved) {
+        if (!keptIds.has(n.id)) {
+          const r = await actions.nav.delete({ id: n.id });
+          if (r.error) throw r.error;
+        }
+      }
+      const next: NavItem[] = [];
+      for (const n of items) {
+        if (isTemp(n.id)) {
+          const r = await actions.nav.create({ label: n.label, url: n.url, area: n.area });
+          if (r.error) throw r.error;
+          next.push({ ...n, id: r.data.item.id });
+        } else {
+          const prev = savedById.get(n.id);
+          if (prev && (prev.label !== n.label || prev.url !== n.url || prev.area !== n.area)) {
+            const r = await actions.nav.update({ id: n.id, label: n.label, url: n.url, area: n.area });
+            if (r.error) throw r.error;
+          }
+          next.push(n);
+        }
+      }
+      const ordered = AREAS.flatMap((a) => next.filter((n) => n.area === a.key)).map((n) => n.id);
+      if (ordered.length) {
+        const r = await actions.nav.reorder({ ids: ordered });
+        if (r.error) throw r.error;
+      }
+      setItems(next);
+      setSaved(next);
+      setSaveState('saved');
+    } catch {
+      setSaveState('error');
+    }
+  }
+
+  function discard() {
+    setItems(saved);
+    setSaveState('saved');
+  }
+
   return (
     <div className="nm">
       <div className="nm-head">
-        <span className={`lm-savestate ${saveState}`}>
-          {saveState === 'saving' ? 'Saving…' : saveState === 'error' ? 'Save failed' : 'Saved'}
+        <span className={`lm-savestate ${saveState === 'saved' && dirty ? 'dirty' : saveState}`}>
+          {saveState === 'saving' ? 'Saving…' : saveState === 'error' ? 'Save failed' : dirty ? 'Unsaved changes — not live yet' : 'Live'}
         </span>
+        {dirty && (
+          <>
+            <button className="btn sm ghost" type="button" onClick={discard} disabled={saveState === 'saving'}>Discard</button>
+            <button className="btn sm primary" type="button" onClick={() => void saveAll()} disabled={saveState === 'saving'}>Save changes</button>
+          </>
+        )}
       </div>
       {AREAS.map((a) => {
         const group = items.filter((n) => n.area === a.key);
@@ -144,7 +190,7 @@ export default function NavManager({ items: initial }: { items: NavItem[] }) {
                 <p className="card-title">{a.title}</p>
                 <p className="hint">{a.hint}</p>
               </div>
-              <button className="btn sm" type="button" onClick={() => void add(a.key)}>+ Add item</button>
+              <button className="btn sm" type="button" onClick={() => add(a.key)}>+ Add item</button>
             </div>
             {group.length === 0 && <p className="nm-empty">No items yet.</p>}
             <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={(e) => onDragEnd(a.key, e)}>