@acms-subir/core 0.2.0 → 0.3.1

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

@@ -61,6 +61,7 @@ const SITES = [
 ];
 
 const TILE_ICONS: Record<string, string> = {
+  live: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M3 5h12v14H3zM15 10l6-4v12l-6-4"/></svg>',
   site: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 3l4 2.3v4.4L12 12 8 9.7V5.3L12 3zM6 13l4 2.3v4.4L6 22l-4-2.3v-4.4L6 13zM18 13l4 2.3v4.4L18 22l-4-2.3v-4.4L18 13z"/></svg>',
   link: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M10 14a5 5 0 007.07 0l2.83-2.83a5 5 0 00-7.07-7.07L11 5.93M14 10a5 5 0 00-7.07 0L4.1 12.83a5 5 0 007.07 7.07L13 18.07"/></svg>',
   email: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>',
@@ -87,6 +88,7 @@ const TILE_GROUPS: { label: string; tiles: Tile[] }[] = [
   {
     label: 'Content & layout',
     tiles: [
+      { key: 'live', kind: 'live', name: 'Live video', desc: 'Your shared live broadcast' },
       { key: 'heading', kind: 'heading', name: 'Heading', desc: 'Group your links' },
       { key: 'text', kind: 'text', name: 'Text', desc: 'Non-clickable copy' },
       { key: 'spacer', kind: 'spacer', name: 'Spacer', desc: 'Blank vertical space' },
@@ -96,6 +98,7 @@ const TILE_GROUPS: { label: string; tiles: Tile[] }[] = [
 ];
 
 const NEW_ITEM: Record<Kind, Partial<Link>> = {
+  live: { kind: 'live', label: 'Live video', url: '' },
   link: { kind: 'link', label: 'New link', url: '', icon: '' },
   email: { kind: 'email', label: 'E-mail me', url: '', icon: '✉️' },
   phone: { kind: 'phone', label: 'Call me', url: '', icon: '📞' },
@@ -128,6 +131,8 @@ 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);
+  // 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(
@@ -246,10 +251,21 @@ export default function LinksManager({ links: initial, settings, unsplashEnabled
     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"
@@ -260,7 +276,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>
@@ -299,50 +315,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) : 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) => (
@@ -361,7 +387,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>
 
@@ -377,23 +403,47 @@ export default function LinksManager({ links: initial, settings, unsplashEnabled
 
       <aside className="lm-preview">
         <div className="lm-preview-bar">
-          <span className="lm-preview-label">Live preview</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>
+          <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>
   );
 }
@@ -401,6 +451,7 @@ export default function LinksManager({ links: initial, settings, unsplashEnabled
 // ---- rows -----------------------------------------------------------------
 
 const KIND_BADGE: Partial<Record<Kind, string>> = {
+  live: '●',
   heading: 'H', text: 'T', spacer: '↕', html: 'HTML', email: '@', phone: 'TEL', vcard: 'VCF',
 };
 
@@ -434,7 +485,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' : ''}`}>
@@ -446,7 +497,7 @@ function ItemRow({
           <span className="lm-badge">{KIND_BADGE[k]}</span>
         )}
 
-        {k === 'spacer' ? (
+        {k === 'live' ? <span style={{ flex: 1 }}>Live video · <a href="/admin/live">Manage broadcast</a></span> : k === 'spacer' ? (
           <>
             <span className="bare strong" style={{ padding: '5px 8px' }}>Spacer</span>
             <select
@@ -529,6 +580,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>