@acms-subir/core 0.1.0 → 0.3.0

package/src/components/EventPage.astro

@@ -0,0 +1,178 @@
+---
+// The built-in event page (feature image, date block, place, button, add to
+// calendar, share, related events). Themes replace it with
+// templates/event.astro, which receives the same props. Every element
+// carries a stable .pc-ev-* class for CSS overrides.
+import type { CalEvent, Calendar, Settings } from '../lib/schema';
+import { CALENDAR, eventIcsUrl, eventUrl, calendarPageUrl } from '../lib/calendar/config';
+import { addToCalendarLinks, eventTimeZone, formatOccurrence, safeColor, type Occurrence } from '../lib/calendar/events';
+import { describeRepeat } from '../lib/calendar/rrule';
+import { eventCardHtml, safeHref } from '../lib/calendar/cards';
+import { siteLocale } from '../lib/dates';
+
+interface Props {
+  event: CalEvent;
+  occurrence: Occurrence;
+  settings: Settings;
+  calendars: Calendar[];
+  html: string;
+  upcoming: Pick<Occurrence, 'event' | 'start' | 'end' | 'allDay' | 'days'>[];
+  origin: string;
+  preview?: boolean;
+  // RSVP state when the event takes RSVPs (null otherwise)
+  rsvp?: { going: number; left: number | null; maxSeats: number; error: string; open: boolean } | null;
+}
+const { event: e, occurrence: o, settings, calendars, html, upcoming, origin, preview = false, rsvp = null } = Astro.props;
+const tz = eventTimeZone(e, settings);
+const locale = siteLocale(settings);
+const f = formatOccurrence(o, tz, locale);
+const pageUrl = origin + eventUrl(e.slug);
+const links = addToCalendarLinks(e, o, { pageUrl, icsUrl: eventIcsUrl(e.slug), tz });
+const repeats = describeRepeat(e.rrule, e.start, (ymd) => {
+  const [y, m, d] = ymd.split('-').map(Number);
+  return new Date(Date.UTC(y, m - 1, d)).toLocaleDateString(locale, { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' });
+});
+const ctaHref = safeHref(e.cta.href);
+const mapHref = e.location.url
+  ? safeHref(e.location.url)
+  : e.location.address
+    ? `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent([e.location.name, e.location.address].filter(Boolean).join(', '))}`
+    : '';
+const fieldRows = CALENDAR.eventFields.filter((fd) => e.fields[fd.key]).map((fd) => ({ label: fd.label, value: e.fields[fd.key], type: fd.type }));
+const visibleTags = e.tags.filter((t) => !t.startsWith('#'));
+const I = {
+  pin: 'M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12zM12 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z',
+  clock: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 7v5l3 2',
+  repeat: 'M17 2l4 4-4 4M3 11V9a3 3 0 0 1 3-3h15M7 22l-4-4 4-4M21 13v2a3 3 0 0 1-3 3H3',
+  cal: 'M3 5.5h18v15H3zM3 10h18M8 3v4M16 3v4',
+  share: 'M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1.5 1.5M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6l1.5-1.5',
+  info: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 11v5M12 8h.01',
+  video: 'M3 7h12v10H3zM15 10l6-3v10l-6-3',
+};
+const online = /zoom\.us|meet\.google|teams\.microsoft|webex|whereby|jit\.si/i.test(e.location.url);
+---
+
+<article class={`pc-ev-page${e.cancelled ? ' is-cancelled' : ''}`}>
+  {preview && <p class="pc-ev-preview">Preview — only you can see this {e.status === 'published' ? 'version' : 'draft'}.</p>}
+  {e.cover && (
+    <figure class="pc-ev-hero"><img src={e.cover} alt={e.coverAlt} /></figure>
+  )}
+  <div class="pc-ev-layout">
+    <div class="pc-ev-main">
+      {(calendars.length > 0 || visibleTags.length > 0) && (
+        <div class="pc-ev-chips">
+          {calendars.map((c) => (
+            <a class="pc-ev-chip" href={calendarPageUrl(c.slug)}><i style={`background:${safeColor(c.color)}`} aria-hidden="true" />{c.name}</a>
+          ))}
+          {visibleTags.map((t) => <span class="pc-ev-chip is-tag">{t}</span>)}
+        </div>
+      )}
+      <h1 class="pc-ev-title">{e.title}</h1>
+      {e.cancelled && <p class="pc-ev-cancelled"><b>This event is cancelled.</b> It stays listed so nobody is left wondering.</p>}
+      {e.excerpt && <p class="pc-ev-lede">{e.excerpt}</p>}
+      <div class="pc-ev-body post-content" set:html={html} />
+    </div>
+
+    <aside class="pc-ev-side" aria-label="Event details">
+      <div class="pc-ev-date">
+        <span class="pc-ev-tile" aria-hidden="true"><b>{f.month}</b><span>{f.day}</span></span>
+        <div>
+          <b>{f.date}</b>
+          <span>{f.time}</span>
+        </div>
+      </div>
+      {(e.location.name || e.location.address || e.location.url) && (
+        <div class="pc-ev-fact">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d={online && !e.location.address ? I.video : I.pin} /></svg>
+          <div>
+            {e.location.name && <b>{e.location.name}</b>}
+            {(e.location.address || mapHref) && (
+              <span>
+                {e.location.address}
+                {mapHref && <>{e.location.address && ' · '}<a href={mapHref} target="_blank" rel="noopener">{online ? 'Join online' : 'Map'}</a></>}
+              </span>
+            )}
+          </div>
+        </div>
+      )}
+      {repeats && (
+        <div class="pc-ev-fact">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d={I.repeat} /></svg>
+          <div><b>{repeats}</b><span>Showing {f.date}</span></div>
+        </div>
+      )}
+      {fieldRows.map((r) => (
+        <div class="pc-ev-fact">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d={I.info} /></svg>
+          <div><span>{r.label}</span><b>{r.type === 'url' && safeHref(r.value) ? <a href={safeHref(r.value)} target="_blank" rel="noopener">{r.value.replace(/^https?:\/\//, '')}</a> : r.value}</b></div>
+        </div>
+      ))}
+      {rsvp ? (
+        <div class="pc-ev-rsvp">
+          <p class="pc-ev-going"><b>{rsvp.going}</b> going{rsvp.left !== null && <> · <b>{rsvp.left}</b> {rsvp.left === 1 ? 'spot' : 'spots'} left</>}</p>
+          {rsvp.open && (rsvp.left === null || rsvp.left > 0) ? (
+            <details class="pc-ev-rsvpform" open={Boolean(rsvp.error)}>
+              <summary class="pc-ev-cta">Save my seat</summary>
+              <form method="post">
+                {rsvp.error && <p class="pc-bk-error">{rsvp.error}</p>}
+                <label class="pc-bk-field"><span>Your name</span><input name="name" required autocomplete="name" /></label>
+                <label class="pc-bk-field"><span>Email</span><input name="email" type="email" required autocomplete="email" /></label>
+                {rsvp.maxSeats > 1 && (
+                  <label class="pc-bk-field"><span>Seats</span>
+                    <select name="seats">{Array.from({ length: Math.min(rsvp.maxSeats, rsvp.left ?? rsvp.maxSeats) }, (_, i) => <option value={i + 1}>{i + 1}</option>)}</select>
+                  </label>
+                )}
+                <button class="pc-bk-submit" type="submit">{e.rsvp.autoConfirm ? 'Confirm my seat' : 'Request a seat'}</button>
+              </form>
+            </details>
+          ) : <p class="pc-ev-full">{rsvp.open ? 'This event is full.' : 'RSVPs are closed.'}</p>}
+        </div>
+      ) : e.cta.label && ctaHref && !e.cancelled && (
+        <a class={`pc-ev-cta${e.cta.style === 'outline' ? ' is-outline' : ''}`} href={ctaHref}>{e.cta.label}</a>
+      )}
+      <details class="pc-ev-add">
+        <summary>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d={I.cal} /></svg>
+          Add to calendar
+        </summary>
+        <div class="pc-ev-add-menu">
+          <a href={links.google} target="_blank" rel="noopener">Google Calendar</a>
+          <a href={links.ics}>Apple Calendar</a>
+          <a href={links.outlook} target="_blank" rel="noopener">Outlook</a>
+          <a href={links.ics} download={`${e.slug}.ics`}>Download .ics</a>
+        </div>
+      </details>
+      <button type="button" class="pc-ev-share" data-url={pageUrl} data-title={e.title}>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d={I.share} /></svg>
+        <span>Share</span>
+      </button>
+    </aside>
+  </div>
+
+  {upcoming.length > 0 && (
+    <section class="pc-ev-more">
+      <h2>More events</h2>
+      <div class="pc-ev-cards" data-layout="grid" set:html={upcoming.map((u) => eventCardHtml(u, settings, { showImage: true })).join('')} />
+      <a class="pc-ev-all" href={CALENDAR.base}>See the full calendar →</a>
+    </section>
+  )}
+</article>
+
+<script>
+  // share sheet where available, else copy the link
+  document.querySelectorAll<HTMLButtonElement>('.pc-ev-share').forEach((b) => b.addEventListener('click', async () => {
+    const url = b.dataset.url ?? location.href;
+    if (navigator.share) {
+      try { await navigator.share({ title: b.dataset.title, url }); return; } catch { /* dismissed */ }
+    }
+    await navigator.clipboard.writeText(url);
+    const label = b.querySelector('span');
+    if (label) { label.textContent = 'Link copied'; setTimeout(() => (label.textContent = 'Share'), 1400); }
+  }));
+  // one open menu; outside click closes
+  document.addEventListener('click', (ev) => {
+    document.querySelectorAll<HTMLDetailsElement>('details.pc-ev-add[open]').forEach((d) => {
+      if (!(ev.target instanceof Node && d.contains(ev.target))) d.open = false;
+    });
+  });
+</script>

package/src/components/LegalPage.astro

@@ -0,0 +1,27 @@
+---
+import Site from '../layouts/Site.astro';
+import WidgetRenderer from './WidgetRenderer.astro';
+import { getRepo } from '../lib/repo';
+import { defaultPolicy, LEGAL } from '../lib/legal';
+import { expandDynamicBlocks } from '../lib/dynamicBlocks';
+interface Props { policy: 'privacy' | 'terms' }
+const { policy } = Astro.props;
+const repo = await getRepo(Astro.locals);
+const [settings, page] = await Promise.all([repo.getSettings(), repo.getPageBySlug(policy)]);
+const custom = page?.status === 'published' ? page : null;
+const standard = defaultPolicy(policy, settings);
+const html = custom?.bodyHtml ? await expandDynamicBlocks(custom.bodyHtml, repo) : '';
+---
+<Site title={custom?.title || standard.title} noindex={!custom && !standard.complete}>
+  {custom ? (
+    html ? <article class="page-body" set:html={html} /> : <WidgetRenderer pageId={custom.id} blocks={custom.blocks} />
+  ) : (
+    <article class="page-body">
+      <h1>{standard.title}</h1>
+      {LEGAL.updatedAt && <p>Last updated: <time datetime={LEGAL.updatedAt}>{LEGAL.updatedAt}</time></p>}
+      {!standard.complete && <p><strong>Standard notice:</strong> The site operator has not yet completed its identity and contact details. This page describes the standard site features and needs the operator’s site-specific information.</p>}
+      {standard.sections.map(section => <section><h2>{section.title}</h2><p>{section.text}</p></section>)}
+      {LEGAL.contactEmail && <p><a href={`mailto:${LEGAL.contactEmail}`}>Contact the site operator</a></p>}
+    </article>
+  )}
+</Site>

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,81 +128,141 @@ 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());
+  // narrow screens show one pane at a time
+  const [view, setView] = useState<'edit' | 'preview' | 'insights'>('edit');
+
+  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';
+
+  const clickable = links.filter((l) => l.kind === 'link' || l.kind === 'email' || l.kind === 'phone' || l.kind === 'vcard');
+  const totalClicks = clickable.reduce((n, l) => n + l.clicks, 0);
+  const topClicks = [...clickable].sort((x, y) => y.clicks - x.clicks);
 
   return (
-    <div className="lm-layout">
-      <div>
-        <div className="card card-pad lm-profile" style={{ marginBottom: 16 }}>
+    <div className={`lm-layout view-${view}`}>
+      <div className="lm-views seg" role="tablist" aria-label="Links page view">
+        {(['edit', 'preview', 'insights'] as const).map((v) => (
+          <button key={v} type="button" role="tab" aria-selected={view === v} onClick={() => { setView(v); if (v === 'preview') setTick((t) => t + 1); }}>
+            {v[0].toUpperCase() + v.slice(1)}
+          </button>
+        ))}
+      </div>
+      <div className="lm-editor">
+        <div className="lm-profile">
           <div className="lm-avatarwrap">
             <button
               type="button"
@@ -203,7 +273,7 @@ export default function LinksManager({ links: initial, settings, unsplashEnabled
               {profile.linksAvatar ? (
                 <img src={profile.linksAvatar} alt="" />
               ) : (
-                <span aria-hidden="true">{(profile.linksName.trim()[0] ?? '?').toUpperCase()}</span>
+                <svg aria-hidden="true" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M4 8h3l2-3h6l2 3h3v11H4zM12 11a3 3 0 1 0 0 6 3 3 0 0 0 0-6z" /></svg>
               )}
               <span className="lm-avatar-hint">Edit</span>
             </button>
@@ -212,7 +282,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>
@@ -242,50 +312,60 @@ export default function LinksManager({ links: initial, settings, unsplashEnabled
           </div>
         </div>
 
-        <div className="card card-pad" style={{ marginBottom: 16 }}>
-          <div className="lm-picker-head">
-            <p className="card-title">{pickerOpen && sitesOpen ? 'Choose a site' : 'Add block'}</p>
-            {pickerOpen && sitesOpen && (
-              <button type="button" className="btn sm ghost" onClick={() => setSitesOpen(false)}>‹ All blocks</button>
-            )}
-            <button type="button" className="btn sm ghost" onClick={() => { setPickerOpen((v) => !v); setSitesOpen(false); }}>
-              {pickerOpen ? 'Close' : '+ Add'}
-            </button>
-          </div>
-          {pickerOpen && !sitesOpen && TILE_GROUPS.map((g) => (
-            <div key={g.label}>
-              <p className="lm-group-label">{g.label}</p>
-              <div className="lm-tiles">
-                {g.tiles.map((t) => (
-                  <button
-                    key={t.key}
-                    type="button"
-                    className="lm-tile"
-                    onClick={() => (t.kind === 'site' ? setSitesOpen(true) : void add(NEW_ITEM[t.kind]))}
-                  >
-                    <span className="lm-tile-ico" dangerouslySetInnerHTML={{ __html: TILE_ICONS[t.key] }} />
-                    <span className="lm-tile-body">
-                      <b>{t.name}</b>
-                      <span>{t.desc}</span>
-                    </span>
-                  </button>
-                ))}
-              </div>
-            </div>
-          ))}
-          {pickerOpen && sitesOpen && (
-            <div className="lm-sites">
-              {SITES.map((s) => (
-                <button key={s.name} type="button" className="lm-site" onClick={() => addSite(s)} style={{ color: `#${s.si.hex}` }}>
-                  <span className="lm-site-ico" dangerouslySetInnerHTML={{ __html: svgOf(s.si) }} />
-                  <span>{s.name}</span>
-                </button>
+        <div className="lm-addwrap">
+          <button
+            type="button"
+            className={`lm-addbtn ${pickerOpen ? 'is-open' : ''}`}
+            aria-expanded={pickerOpen}
+            onClick={() => { setPickerOpen((v) => !v); setSitesOpen(false); }}
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M12 5v14M5 12h14" /></svg>
+            Add block
+          </button>
+          {pickerOpen && (
+            <div className="lm-picker">
+              {sitesOpen && (
+                <div className="lm-picker-head">
+                  <button type="button" className="btn sm ghost" onClick={() => setSitesOpen(false)}>‹ All blocks</button>
+                  <b>Choose a site</b>
+                </div>
+              )}
+              {!sitesOpen && TILE_GROUPS.map((g) => (
+                <div key={g.label}>
+                  <p className="lm-group-label">{g.label}</p>
+                  <div className="lm-tiles">
+                    {g.tiles.map((t) => (
+                      <button
+                        key={t.key}
+                        type="button"
+                        className="lm-tile"
+                        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">
+                          <b>{t.name}</b>
+                          <span>{t.desc}</span>
+                        </span>
+                      </button>
+                    ))}
+                  </div>
+                </div>
               ))}
+              {sitesOpen && (
+                <div className="lm-sites">
+                  {SITES.map((s) => (
+                    <button key={s.name} type="button" className="lm-site" onClick={() => addSite(s)} style={{ color: `#${s.si.hex}` }}>
+                      <span className="lm-site-ico" dangerouslySetInnerHTML={{ __html: svgOf(s.si) }} />
+                      <span>{s.name}</span>
+                    </button>
+                  ))}
+                </div>
+              )}
             </div>
           )}
         </div>
 
-        <div className="card rowlist">
+        <div className="lm-list rowlist">
           <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
             <SortableContext items={links.map((l) => l.id)} strategy={verticalListSortingStrategy}>
               {links.map((l) => (
@@ -304,7 +384,7 @@ export default function LinksManager({ links: initial, settings, unsplashEnabled
               ))}
             </SortableContext>
           </DndContext>
-          {links.length === 0 && <p className="hint empty">Nothing here yet — add your first block above.</p>}
+          {links.length === 0 && <p className="hint lm-empty">Nothing here yet — add your first block above.</p>}
         </div>
       </div>
 
@@ -315,23 +395,52 @@ 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>
-          <div style={{ display: 'flex', gap: 2 }}>
-            <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>
+          <span className="lm-url">{location.host}/links</span>
+          <button
+            type="button"
+            className="icon-btn"
+            title="Copy link"
+            aria-label="Copy link"
+            onClick={() => void navigator.clipboard.writeText(`${location.origin}/links`)}
+          >
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 9h11v11H9zM5 15H4V4h11v1" /></svg>
+          </button>
+          <a className="icon-btn" href="/links" target="_blank" rel="noopener" title="Open in tab" aria-label="Open in tab">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5" /></svg>
+          </a>
         </div>
         <div className="lm-phone">
           <iframe key={tick} src="/links" title="Links page preview" />
         </div>
+        <p className="lm-stat"><b>{totalClicks.toLocaleString()}</b> total clicks · <span className={`lm-savestate ${saveState === 'saved' && dirty ? 'dirty' : saveState}`}>{saveLabel}</span></p>
       </aside>
+
+      <section className="lm-insights" aria-label="Insights">
+        <div className="card-head"><b>Clicks by block</b><span className="hint">{totalClicks.toLocaleString()} total</span></div>
+        {topClicks.length === 0 && <p className="hint">No buttons yet.</p>}
+        {topClicks.map((l) => (
+          <div key={l.id} className="mini-row bar-row">
+            <i style={{ width: `${topClicks[0].clicks ? (l.clicks / topClicks[0].clicks) * 100 : 0}%` }} />
+            <span className="grow">{l.label || l.url || 'Untitled'}{l.meta?.hidden ? ' · hidden' : ''}</span>
+            <b>{l.clicks.toLocaleString()}</b>
+          </div>
+        ))}
+      </section>
+
+      {dirty && (
+        <div className="lm-savebar" role="status">
+          <span>{saveState === 'error' ? 'Save failed — try again' : 'Unsaved changes'}</span>
+          <button type="button" className="btn sm" onClick={discard} disabled={saveState === 'saving'}>Discard</button>
+          <button type="button" className="btn sm primary" onClick={() => void saveAll()} disabled={saveState === 'saving'}>
+            {saveState === 'saving' ? 'Saving…' : 'Save changes'}
+          </button>
+        </div>
+      )}
     </div>
   );
 }
@@ -372,7 +481,7 @@ function ItemRow({
   return (
     <div
       ref={setNodeRef}
-      className={`lm-item ${isDragging ? 'is-dragging' : ''}`}
+      className={`lm-item ${isDragging ? 'is-dragging' : ''} ${link.meta?.hidden ? 'is-hidden' : ''}`}
       style={{ transform: CSS.Transform.toString(transform), transition }}
     >
       <div className={`row lm-row ${hasEditorPane && editorOpen ? 'is-open' : ''}`}>
@@ -467,6 +576,16 @@ function ItemRow({
             {editorOpen ? 'Done' : expandLabel}
           </button>
         )}
+        <button
+          type="button"
+          role="switch"
+          aria-checked={!link.meta?.hidden}
+          className={`lm-switch ${link.meta?.hidden ? '' : 'on'}`}
+          title={link.meta?.hidden ? 'Hidden on the page — click to show' : 'Visible — click to hide'}
+          onClick={() => onEdit(link.id, { meta: { ...link.meta, hidden: !link.meta?.hidden } }, true)}
+        >
+          <i />
+        </button>
         <button type="button" className="btn sm ghost danger reveal" onClick={() => onDelete(link.id)}>Delete</button>
       </div>