@acms-subir/core 0.0.2 → 0.2.0

package/src/actions/index.ts

@@ -12,7 +12,7 @@ import { isPrivateHost } from '../lib/net';
 import { normalizeCalendarSrc } from '../lib/calendar/src';
 import { getCalendarEvents } from '../lib/calendar/ics';
 import { siteLocale } from '../lib/dates';
-import { normalizePageLocale } from '../lib/i18n';
+import { normalizePageLocale, localeHomeUrl } from '../lib/i18n';
 
 // All admin mutations live here. The middleware only guards /admin pages,
 // so every action re-checks the session itself.
@@ -71,8 +71,17 @@ export const server = {
         if (data.collection !== undefined && !CONTENT.collections[data.collection]) {
           throw new ActionError({ code: 'BAD_REQUEST', message: `Unknown collection "${data.collection}".` });
         }
-        const movesUrl = data.slug !== undefined || data.collection !== undefined;
-        const before = movesUrl ? await repo.getPost(id) : null;
+        const before = await repo.getPost(id);
+        if (!before) throw new ActionError({ code: 'NOT_FOUND', message: 'Post not found.' });
+        // A live (published/scheduled) post never takes content edits
+        // directly: they stage into the pending draft until the user hits
+        // Update. Status transitions stay deliberate, immediate writes.
+        const transitions = data.status !== undefined && data.status !== before.status;
+        if ((before.status === 'published' || before.status === 'scheduled') && !transitions) {
+          const { status: _status, scheduledAt: _scheduledAt, authorId: _authorId, ...staged } = data;
+          await repo.savePostDraft(id, staged);
+          return { post: (await repo.getPost(id))! };
+        }
         await repo.updatePost(id, data);
         // any new tag names become registry entries with slugs for archives
         if (data.tags !== undefined) await repo.ensureTags(data.tags);
@@ -80,7 +89,32 @@ export const server = {
         if (!post) throw new ActionError({ code: 'NOT_FOUND', message: 'Post not found.' });
         // a published post whose slug or collection changed leaves a 301
         // behind so old links keep working
-        if (before && before.status === 'published' && (before.slug !== post.slug || before.collection !== post.collection)) {
+        if (before.status === 'published' && (before.slug !== post.slug || before.collection !== post.collection)) {
+          await repo
+            .createRedirect({
+              fromPath: collectionUrl(before.collection, before.slug),
+              toPath: collectionUrl(post.collection, post.slug),
+            })
+            .catch(() => {});
+          invalidateRedirectCache();
+        }
+        return { post };
+      },
+    }),
+    // Update button: copy the pending draft onto the live columns. The
+    // deferred side-effects (tag registry, slug-change 301) happen here —
+    // the moment the change actually goes live.
+    applyUpdate: defineAction({
+      input: z.object({ id: z.string() }),
+      handler: async ({ id }, ctx) => {
+        requireAdmin(ctx);
+        const repo = await getRepo(ctx.locals);
+        const before = await repo.getPost(id);
+        if (!before) throw new ActionError({ code: 'NOT_FOUND', message: 'Post not found.' });
+        await repo.applyPostDraft(id);
+        const post = (await repo.getPost(id))!;
+        if (post.tags.length) await repo.ensureTags(post.tags);
+        if (before.status === 'published' && (before.slug !== post.slug || before.collection !== post.collection)) {
           await repo
             .createRedirect({
               fromPath: collectionUrl(before.collection, before.slug),
@@ -92,6 +126,17 @@ export const server = {
         return { post };
       },
     }),
+    discardChanges: defineAction({
+      input: z.object({ id: z.string() }),
+      handler: async ({ id }, ctx) => {
+        requireAdmin(ctx);
+        const repo = await getRepo(ctx.locals);
+        await repo.discardPostDraft(id);
+        const post = await repo.getPost(id);
+        if (!post) throw new ActionError({ code: 'NOT_FOUND', message: 'Post not found.' });
+        return { post };
+      },
+    }),
     delete: defineAction({
       input: z.object({ id: z.string() }),
       handler: async ({ id }, ctx) => {
@@ -125,24 +170,59 @@ export const server = {
         if (data.slug !== undefined) data.slug = slugify(data.slug);
         // default locale stores as '', unknown codes fall back to it
         if (data.locale !== undefined) data.locale = normalizePageLocale(data.locale);
-        const before = data.slug !== undefined ? await repo.getPage(id) : null;
+        const before = await repo.getPage(id);
+        if (!before) throw new ActionError({ code: 'NOT_FOUND', message: 'Page not found.' });
         const cleanBlocks =
           blocks === undefined
             ? undefined
             : blocks
                 .filter((b) => widgetTypes.includes(b.type as WidgetType))
                 .map((b) => ({ ...b, type: b.type as WidgetType, config: parseConfig(b.type as WidgetType, b.config) as Record<string, unknown> }));
+        // live pages stage their edits until Update, same as posts
+        const transitions = data.status !== undefined && data.status !== before.status;
+        if ((before.status === 'published' || before.status === 'scheduled') && !transitions) {
+          const { status: _status, ...staged } = data;
+          await repo.savePageDraft(id, { ...staged, blocks: cleanBlocks });
+          return { page: (await repo.getPage(id))! };
+        }
         await repo.updatePage(id, { ...data, blocks: cleanBlocks });
         const page = await repo.getPage(id);
         if (!page) throw new ActionError({ code: 'NOT_FOUND', message: 'Page not found.' });
         // renaming a published slug leaves a 301 behind so old links keep working
-        if (before && before.status === 'published' && before.slug !== page.slug && !page.isHome) {
+        if (before.status === 'published' && before.slug !== page.slug && !page.isHome) {
           await repo.createRedirect({ fromPath: `/${before.slug}`, toPath: `/${page.slug}` }).catch(() => {});
           invalidateRedirectCache();
         }
         return { page };
       },
     }),
+    applyUpdate: defineAction({
+      input: z.object({ id: z.string() }),
+      handler: async ({ id }, ctx) => {
+        requireAdmin(ctx);
+        const repo = await getRepo(ctx.locals);
+        const before = await repo.getPage(id);
+        if (!before) throw new ActionError({ code: 'NOT_FOUND', message: 'Page not found.' });
+        await repo.applyPageDraft(id);
+        const page = (await repo.getPage(id))!;
+        if (before.status === 'published' && before.slug !== page.slug && !page.isHome) {
+          await repo.createRedirect({ fromPath: `/${before.slug}`, toPath: `/${page.slug}` }).catch(() => {});
+          invalidateRedirectCache();
+        }
+        return { page };
+      },
+    }),
+    discardChanges: defineAction({
+      input: z.object({ id: z.string() }),
+      handler: async ({ id }, ctx) => {
+        requireAdmin(ctx);
+        const repo = await getRepo(ctx.locals);
+        await repo.discardPageDraft(id);
+        const page = await repo.getPage(id);
+        if (!page) throw new ActionError({ code: 'NOT_FOUND', message: 'Page not found.' });
+        return { page };
+      },
+    }),
     delete: defineAction({
       input: z.object({ id: z.string() }),
       handler: async ({ id }, ctx) => {
@@ -309,6 +389,41 @@ export const server = {
         return { ok: true };
       },
     }),
+    // Design-screen staging: edits stage in settings.draftDesign (previewed
+    // via ?designPreview=1) until "Publish design" applies them live.
+    saveDesignDraft: defineAction({
+      input: z.object({
+        activeTheme: z.string().optional(),
+        designOverrides: z.record(z.any()).optional(),
+        siteLogo: z.string().optional(),
+        siteFavicon: z.string().optional(),
+        siteCover: z.string().optional(),
+      }),
+      handler: async (data, ctx) => {
+        requireAdmin(ctx);
+        const repo = await getRepo(ctx.locals);
+        await repo.saveDesignDraft(data);
+        return { ok: true };
+      },
+    }),
+    applyDesign: defineAction({
+      input: z.object({}),
+      handler: async (_input, ctx) => {
+        requireAdmin(ctx);
+        const repo = await getRepo(ctx.locals);
+        await repo.applyDesignDraft();
+        return { ok: true };
+      },
+    }),
+    discardDesign: defineAction({
+      input: z.object({}),
+      handler: async (_input, ctx) => {
+        requireAdmin(ctx);
+        const repo = await getRepo(ctx.locals);
+        await repo.discardDesignDraft();
+        return { ok: true };
+      },
+    }),
   },
 
   tags: {
@@ -322,6 +437,41 @@ export const server = {
     }),
   },
 
+  snippets: {
+    list: defineAction({
+      input: z.object({}),
+      handler: async (_input, ctx) => {
+        requireAdmin(ctx);
+        const repo = await getRepo(ctx.locals);
+        return { snippets: await repo.listSnippets() };
+      },
+    }),
+    create: defineAction({
+      input: z.object({ name: z.string().min(1).max(80), contentJson: z.string().min(2) }),
+      handler: async ({ name, contentJson }, ctx) => {
+        requireAdmin(ctx);
+        // must be a JSON array of ProseMirror nodes — reject anything else
+        // before it can break the editor on re-insert
+        let parsed: unknown;
+        try { parsed = JSON.parse(contentJson); } catch { parsed = null; }
+        if (!Array.isArray(parsed) || !parsed.length) {
+          throw new ActionError({ code: 'BAD_REQUEST', message: 'Select some content first.' });
+        }
+        const repo = await getRepo(ctx.locals);
+        return { snippet: await repo.createSnippet({ name, contentJson }) };
+      },
+    }),
+    delete: defineAction({
+      input: z.object({ id: z.string() }),
+      handler: async ({ id }, ctx) => {
+        requireAdmin(ctx);
+        const repo = await getRepo(ctx.locals);
+        await repo.deleteSnippet(id);
+        return { ok: true };
+      },
+    }),
+  },
+
   users: {
     list: defineAction({
       input: z.object({}),
@@ -333,6 +483,34 @@ export const server = {
     }),
   },
 
+  linkTargets: {
+    // ⌘K internal link search: published posts + pages matched by title or
+    // URL. Drafts are excluded on purpose — linking to one would 404 until
+    // it's published.
+    search: defineAction({
+      input: z.object({ query: z.string().min(1) }),
+      handler: async ({ query }, ctx) => {
+        requireAdmin(ctx);
+        const repo = await getRepo(ctx.locals);
+        const q = query.toLowerCase();
+        const [posts, pages] = await Promise.all([repo.listPosts(), repo.listPages()]);
+        const targets = [
+          ...pages
+            .filter((p) => p.status === 'published')
+            .map((p) => ({ kind: 'Page', title: p.title, url: p.isHome ? localeHomeUrl(p.locale) : `/${p.slug}` })),
+          ...posts
+            .filter((p) => p.status === 'published')
+            .map((p) => ({
+              kind: (CONTENT.collections[p.collection] ?? CONTENT.posts).singular,
+              title: p.title,
+              url: collectionUrl(p.collection, p.slug),
+            })),
+        ].filter((t) => t.title.toLowerCase().includes(q) || t.url.toLowerCase().includes(q));
+        return { targets: targets.slice(0, 8) };
+      },
+    }),
+  },
+
   bookmark: {
     // Server-side link-metadata fetch for the bookmark card (no CORS in the
     // browser). Fetches the page, scrapes OG/meta tags, returns a compact

package/src/components/DesignManager.tsx

@@ -7,6 +7,10 @@ import { ImagePicker } from './editor/ImagePicker';
 // token overrides on top (saved to settings.designOverrides — the theme files
 // are never written to), set the site logo, and export the effective design
 // as a committable theme.json.
+//
+// Every change stages into settings.draftDesign — the preview iframe renders
+// the staged design (?designPreview=1, admin-only) while visitors keep the
+// live one until "Publish design" applies it.
 
 type SaveState = 'saved' | 'saving' | 'error';
 
@@ -33,6 +37,8 @@ interface Pairing { key: string; label: string; headingFont: string; bodyFont: s
 
 interface Props {
   settings: Settings;
+  // true when settings.draftDesign held staged changes at load time
+  pendingDesign: boolean;
   themes: ThemeInfo[];
   pairings: Pairing[];
   unsplashEnabled: boolean;
@@ -80,7 +86,8 @@ const DEVICES = [
 ] as const;
 type DeviceKey = (typeof DEVICES)[number]['key'];
 
-export default function DesignManager({ settings, themes, pairings, unsplashEnabled, postPreviewPath }: Props) {
+export default function DesignManager({ settings, pendingDesign, themes, pairings, unsplashEnabled, postPreviewPath }: Props) {
+  const [pending, setPending] = useState(pendingDesign);
   const [activeTheme, setActiveTheme] = useState(settings.activeTheme || 'ink');
   const [overrides, setOverrides] = useState<Record<string, unknown>>(
     (settings.designOverrides as Record<string, unknown>) ?? {}
@@ -113,22 +120,45 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
 
   const theme = themes.find((t) => t.slug === activeTheme) ?? themes[0];
 
+  // saves stage into settings.draftDesign — the live site is untouched
+  const doSave = async () => {
+    const { activeTheme, overrides, siteLogo, siteFavicon, siteCover } = latest.current;
+    const { error } = await actions.settings.saveDesignDraft({
+      activeTheme,
+      designOverrides: overrides,
+      siteLogo,
+      siteFavicon,
+      siteCover,
+    });
+    if (error) { setSaveState('error'); return false; }
+    setSaveState('saved');
+    setPending(true);
+    setTick((t) => t + 1);
+    return true;
+  };
+
   const scheduleSave = () => {
     setSaveState('saving');
     if (timer.current) clearTimeout(timer.current);
-    timer.current = setTimeout(async () => {
-      const { activeTheme, overrides, siteLogo, siteFavicon, siteCover } = latest.current;
-      const { error } = await actions.settings.update({
-        activeTheme,
-        designOverrides: overrides,
-        siteLogo,
-        siteFavicon,
-        siteCover,
-      });
-      if (error) { setSaveState('error'); return; }
-      setSaveState('saved');
-      setTick((t) => t + 1);
-    }, 500);
+    timer.current = setTimeout(doSave, 500);
+  };
+
+  // Publish design: flush any queued save into the staged blob, then apply it
+  const publishDesign = async () => {
+    if (timer.current) { clearTimeout(timer.current); timer.current = null; }
+    if (!(await doSave())) return;
+    const { error } = await actions.settings.applyDesign({});
+    if (error) { setSaveState('error'); return; }
+    setPending(false);
+    setTick((t) => t + 1);
+  };
+
+  const discardDesign = async () => {
+    if (!window.confirm('Discard the staged design changes and go back to the live design? This cannot be undone.')) return;
+    if (timer.current) { clearTimeout(timer.current); timer.current = null; }
+    const { error } = await actions.settings.discardDesign({});
+    if (error) { setSaveState('error'); return; }
+    location.reload(); // rehydrate the controls from the live design
   };
 
   const setOv = (key: string, value: unknown) => {
@@ -186,7 +216,7 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
           <div className="dm-cardhead">
             <p className="dm-sub">
               Active theme: <b>{theme.name}</b> · loaded from <code>src/themes/{theme.slug}/</code> —
-              values below override it. Overrides apply instantly.
+              values below override it. Changes stage privately in the preview; press <b>Publish design</b> to go live.
             </p>
             <div className="dm-headactions">
               {overrideCount > 0 && (
@@ -195,8 +225,14 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
                 </button>
               )}
               <span className={`lm-savestate ${saveState}`}>
-                {saveState === 'saving' ? 'Saving…' : saveState === 'error' ? 'Save failed' : 'Saved'}
+                {saveState === 'saving' ? 'Saving…' : saveState === 'error' ? 'Save failed' : pending ? 'Staged — not live yet' : 'Live design'}
               </span>
+              {pending && (
+                <>
+                  <button className="btn sm ghost" type="button" onClick={discardDesign}>Discard</button>
+                  <button className="btn sm primary" type="button" onClick={publishDesign}>Publish design</button>
+                </>
+              )}
             </div>
           </div>
 
@@ -494,7 +530,7 @@ export default function DesignManager({ settings, themes, pairings, unsplashEnab
             <div className="dm-frame" ref={frameRef}>
               <iframe
                 key={`${previewPage}-${tick}`}
-                src={`${previewPage === 'post' && postPreviewPath ? postPreviewPath : '/'}?design=${tick}`}
+                src={`${previewPage === 'post' && postPreviewPath ? postPreviewPath : '/'}?designPreview=1&design=${tick}`}
                 title="Site preview"
                 style={{
                   width: device.width,

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>