@acms-subir/core 0.0.1

package/src/components/LinksManager.tsx

@@ -0,0 +1,694 @@
+import { 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';
+import { CSS } from '@dnd-kit/utilities';
+import Prism from 'prismjs';
+import {
+  siGithub, siX, siInstagram, siYoutube, siTiktok, siFacebook, siTwitch, siDiscord,
+  siSpotify, siReddit, siBluesky, siMastodon, siSubstack, siPatreon, siWhatsapp,
+  siTelegram, siPinterest, siMedium, siKofi, siBuymeacoffee, siThreads, siSnapchat, siDribbble,
+} from 'simple-icons';
+import { actions } from 'astro:actions';
+import type { Link, Settings } from '../lib/schema';
+import { ImagePicker } from './editor/ImagePicker';
+
+// Links manager: profile (name + bio), an "add block" picker with typed blocks
+// (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.
+
+type SaveState = 'saved' | 'saving' | 'error';
+type Kind = Link['kind'];
+
+interface Props {
+  links: Link[];
+  settings: Settings;
+  unsplashEnabled: boolean;
+}
+
+const svgOf = (si: { path: string }) =>
+  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="${si.path}"/></svg>`;
+
+const SITES = [
+  { si: siGithub, name: 'GitHub', url: 'https://github.com/' },
+  { si: siX, name: 'X', url: 'https://x.com/' },
+  { si: siInstagram, name: 'Instagram', url: 'https://instagram.com/' },
+  { si: siYoutube, name: 'YouTube', url: 'https://youtube.com/@' },
+  { si: siTiktok, name: 'TikTok', url: 'https://tiktok.com/@' },
+  { si: siFacebook, name: 'Facebook', url: 'https://facebook.com/' },
+  { si: siTwitch, name: 'Twitch', url: 'https://twitch.tv/' },
+  { si: siDiscord, name: 'Discord', url: 'https://discord.gg/' },
+  { si: siSpotify, name: 'Spotify', url: 'https://open.spotify.com/' },
+  { si: siReddit, name: 'Reddit', url: 'https://reddit.com/u/' },
+  { si: siBluesky, name: 'Bluesky', url: 'https://bsky.app/profile/' },
+  { si: siMastodon, name: 'Mastodon', url: 'https://mastodon.social/@' },
+  { si: siThreads, name: 'Threads', url: 'https://threads.net/@' },
+  { si: siSubstack, name: 'Substack', url: 'https://substack.com/@' },
+  { si: siMedium, name: 'Medium', url: 'https://medium.com/@' },
+  { si: siPatreon, name: 'Patreon', url: 'https://patreon.com/' },
+  { si: siKofi, name: 'Ko-fi', url: 'https://ko-fi.com/' },
+  { si: siBuymeacoffee, name: 'Buy Me a Coffee', url: 'https://buymeacoffee.com/' },
+  { si: siWhatsapp, name: 'WhatsApp', url: 'https://wa.me/' },
+  { si: siTelegram, name: 'Telegram', url: 'https://t.me/' },
+  { si: siSnapchat, name: 'Snapchat', url: 'https://snapchat.com/add/' },
+  { si: siPinterest, name: 'Pinterest', url: 'https://pinterest.com/' },
+  { si: siDribbble, name: 'Dribbble', url: 'https://dribbble.com/' },
+];
+
+const TILE_ICONS: Record<string, string> = {
+  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>',
+  phone: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M5 4h4l2 5-2.5 1.5a12 12 0 005 5L15 13l5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z"/></svg>',
+  heading: '<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="M7 9h10M7 12.5h6"/></svg>',
+  spacer: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M4 9h16M4 15h16M12 3v2M12 19v2"/></svg>',
+  text: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M5 5h14M12 5v14M8 19h8"/></svg>',
+  vcard: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="9" cy="11" r="2.2"/><path d="M5.5 17.5c.6-2 2-3 3.5-3s2.9 1 3.5 3M15 9h4M15 13h4"/></svg>',
+  html: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M9 6l-5 6 5 6M15 6l5 6-5 6"/></svg>',
+};
+
+interface Tile { key: string; kind: Kind | 'site'; name: string; desc: string }
+const TILE_GROUPS: { label: string; tiles: Tile[] }[] = [
+  {
+    label: 'Buttons',
+    tiles: [
+      { key: 'site', kind: 'site', name: 'Predefined site', desc: 'Auto brand color + icon' },
+      { key: 'link', kind: 'link', name: 'Custom link', desc: 'Emoji, image or favicon' },
+      { key: 'email', kind: 'email', name: 'E-mail', desc: 'Opens the mail app' },
+      { key: 'phone', kind: 'phone', name: 'Phone', desc: 'Opens the dialer' },
+      { key: 'vcard', kind: 'vcard', name: 'Vcard', desc: 'Downloadable contact' },
+    ],
+  },
+  {
+    label: 'Content & layout',
+    tiles: [
+      { 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' },
+      { key: 'html', kind: 'html', name: 'HTML block', desc: 'Custom HTML/CSS/JS' },
+    ],
+  },
+];
+
+const NEW_ITEM: Record<Kind, Partial<Link>> = {
+  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: '📞' },
+  heading: { kind: 'heading', label: 'Section', url: '' },
+  text: { kind: 'text', label: '', url: '', html: '' },
+  spacer: { kind: 'spacer', label: '', url: '', meta: { size: 'm' } },
+  vcard: { kind: 'vcard', label: 'Save my contact', url: '', icon: '👤', meta: {} },
+  html: { kind: 'html', label: 'Custom block', url: '', html: '' },
+};
+
+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({
+    linksName: settings.linksName || settings.siteTitle,
+    linksBio: settings.linksBio || settings.tagline,
+    linksAvatar: settings.linksAvatar,
+  });
+  const [avatarPickerOpen, setAvatarPickerOpen] = useState(false);
+  const [pickerOpen, setPickerOpen] = useState(initial.length === 0);
+  const [sitesOpen, setSitesOpen] = useState(false);
+  const [openEditor, setOpenEditor] = useState<Record<string, boolean>>({});
+  const [iconPickerFor, setIconPickerFor] = useState<string | null>(null);
+  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 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) {
+    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) {
+    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;
+    });
+  }
+
+  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}` } });
+  }
+
+  function remove(id: string) {
+    if (!window.confirm('Delete this block?')) return;
+    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;
+    });
+  }
+
+  const saveLabel = saveState === 'saved' ? 'Saved' : saveState === 'saving' ? 'Saving…' : 'Save failed — edit to retry';
+
+  return (
+    <div className="lm-layout">
+      <div>
+        <div className="card card-pad lm-profile" style={{ marginBottom: 16 }}>
+          <div className="lm-avatarwrap">
+            <button
+              type="button"
+              className="lm-avatar"
+              title={profile.linksAvatar ? 'Change profile photo' : 'Add profile photo'}
+              onClick={() => setAvatarPickerOpen(true)}
+            >
+              {profile.linksAvatar ? (
+                <img src={profile.linksAvatar} alt="" />
+              ) : (
+                <span aria-hidden="true">{(profile.linksName.trim()[0] ?? '?').toUpperCase()}</span>
+              )}
+              <span className="lm-avatar-hint">Edit</span>
+            </button>
+            {profile.linksAvatar && (
+              <button
+                type="button"
+                className="lm-avatar-remove"
+                title="Remove photo"
+                onClick={() => { setProfile((p) => ({ ...p, linksAvatar: '' })); void run(() => actions.settings.update({ linksAvatar: '' })); }}
+              >
+                ✕
+              </button>
+            )}
+          </div>
+          <div className="lm-profile-fields">
+            <input
+              type="text"
+              className="lm-profile-name"
+              placeholder="Your name"
+              aria-label="Display name"
+              value={profile.linksName}
+              onChange={(e) => editProfile({ linksName: e.target.value })}
+            />
+            <textarea
+              className="lm-profile-bio"
+              rows={2}
+              placeholder="Write a short bio…"
+              aria-label="Bio"
+              value={profile.linksBio}
+              onChange={(e) => {
+                e.target.style.height = 'auto';
+                e.target.style.height = `${e.target.scrollHeight}px`;
+                editProfile({ linksBio: e.target.value });
+              }}
+            />
+          </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>
+          )}
+        </div>
+
+        <div className="card rowlist">
+          <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
+            <SortableContext items={links.map((l) => l.id)} strategy={verticalListSortingStrategy}>
+              {links.map((l) => (
+                <ItemRow
+                  key={l.id}
+                  link={l}
+                  editorOpen={!!openEditor[l.id]}
+                  onToggleEditor={() => setOpenEditor((o) => ({ ...o, [l.id]: !o[l.id] }))}
+                  iconPickerOpen={iconPickerFor === l.id}
+                  onToggleIconPicker={() => setIconPickerFor((cur) => (cur === l.id ? null : l.id))}
+                  colorPickerOpen={colorPickerFor === l.id}
+                  onToggleColorPicker={() => setColorPickerFor((cur) => (cur === l.id ? null : l.id))}
+                  onEdit={edit}
+                  onDelete={remove}
+                />
+              ))}
+            </SortableContext>
+          </DndContext>
+          {links.length === 0 && <p className="hint empty">Nothing here yet — add your first block above.</p>}
+        </div>
+      </div>
+
+      <ImagePicker
+        open={avatarPickerOpen}
+        unsplashEnabled={unsplashEnabled}
+        onClose={() => setAvatarPickerOpen(false)}
+        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>
+        </div>
+        <div className="lm-phone">
+          <iframe key={tick} src="/links" title="Links page preview" />
+        </div>
+      </aside>
+    </div>
+  );
+}
+
+// ---- rows -----------------------------------------------------------------
+
+const KIND_BADGE: Partial<Record<Kind, string>> = {
+  heading: 'H', text: 'T', spacer: '↕', html: 'HTML', email: '@', phone: 'TEL', vcard: 'VCF',
+};
+
+function ItemRow({
+  link,
+  editorOpen,
+  onToggleEditor,
+  iconPickerOpen,
+  onToggleIconPicker,
+  colorPickerOpen,
+  onToggleColorPicker,
+  onEdit,
+  onDelete,
+}: {
+  link: Link;
+  editorOpen: boolean;
+  onToggleEditor: () => void;
+  iconPickerOpen: boolean;
+  onToggleIconPicker: () => void;
+  colorPickerOpen: boolean;
+  onToggleColorPicker: () => void;
+  onEdit: (id: string, patch: Partial<Pick<Link, 'label' | 'url' | 'icon' | 'html' | 'meta'>>, instant?: boolean) => void;
+  onDelete: (id: string) => void;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: link.id });
+  const k = link.kind;
+  const hasIcon = k === 'link' || k === 'email' || k === 'phone' || k === 'vcard';
+  const hasEditorPane = k === 'html' || k === 'text' || k === 'vcard';
+  const expandLabel = k === 'html' ? 'Edit code' : k === 'text' ? 'Edit text' : 'Edit contact';
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={`lm-item ${isDragging ? 'is-dragging' : ''}`}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+    >
+      <div className={`row lm-row ${hasEditorPane && editorOpen ? 'is-open' : ''}`}>
+        <button type="button" className="lm-handle" title="Drag to reorder" {...attributes} {...listeners}>⠿</button>
+
+        {hasIcon ? (
+          <IconControl link={link} open={iconPickerOpen} onToggle={onToggleIconPicker} onEdit={onEdit} />
+        ) : (
+          <span className="lm-badge">{KIND_BADGE[k]}</span>
+        )}
+
+        {k === 'spacer' ? (
+          <>
+            <span className="bare strong" style={{ padding: '5px 8px' }}>Spacer</span>
+            <select
+              className="lm-select"
+              value={String(link.meta.size ?? 'm')}
+              onChange={(e) => onEdit(link.id, { meta: { ...link.meta, size: e.target.value } }, true)}
+            >
+              <option value="s">Small</option>
+              <option value="m">Medium</option>
+              <option value="l">Large</option>
+            </select>
+            <span style={{ flex: 1 }} />
+          </>
+        ) : k === 'text' ? (
+          <>
+            <span className="meta dim" style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'left' }}>
+              {link.html.replace(/\s+/g, ' ').slice(0, 70) || 'empty — click Edit text'}
+            </span>
+          </>
+        ) : (
+          <input
+            type="text"
+            className={`bare ${k === 'heading' ? 'strong lm-headinput' : 'strong'}`}
+            aria-label="Label"
+            placeholder={k === 'heading' ? 'Section heading' : 'Label'}
+            style={{ flex: k === 'link' || k === 'email' || k === 'phone' ? '0 1 200px' : 1 }}
+            value={link.label}
+            onChange={(e) => onEdit(link.id, { label: e.target.value })}
+          />
+        )}
+
+        {k === 'link' && (
+          <input
+            type="url"
+            className="bare dim"
+            aria-label="URL"
+            placeholder="https://…"
+            style={{ flex: 1 }}
+            value={link.url}
+            onChange={(e) => onEdit(link.id, { url: e.target.value })}
+          />
+        )}
+        {k === 'email' && (
+          <input
+            type="email"
+            className="bare dim"
+            aria-label="E-mail address"
+            placeholder="you@example.com"
+            style={{ flex: 1 }}
+            value={link.url}
+            onChange={(e) => onEdit(link.id, { url: e.target.value })}
+          />
+        )}
+        {k === 'phone' && (
+          <input
+            type="tel"
+            className="bare dim"
+            aria-label="Phone number"
+            placeholder="+1 555 000 1234"
+            style={{ flex: 1 }}
+            value={link.url}
+            onChange={(e) => onEdit(link.id, { url: e.target.value })}
+          />
+        )}
+        {k === 'html' && (
+          <span className="meta dim" style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'left' }}>
+            {link.html.replace(/\s+/g, ' ').slice(0, 50) || 'empty — click Edit code'}
+          </span>
+        )}
+        {k === 'vcard' && <span style={{ flex: 1 }} />}
+
+        {(k === 'link' || k === 'email' || k === 'phone') && (
+          <span className="meta">{link.clicks} {link.clicks === 1 ? 'click' : 'clicks'}</span>
+        )}
+        {hasIcon && (
+          <ColorControl link={link} open={colorPickerOpen} onToggle={onToggleColorPicker} onEdit={onEdit} />
+        )}
+        {hasEditorPane && (
+          <button type="button" className={`btn sm ${editorOpen ? '' : 'ghost'}`} onClick={onToggleEditor}>
+            {editorOpen ? 'Done' : expandLabel}
+          </button>
+        )}
+        <button type="button" className="btn sm ghost danger reveal" onClick={() => onDelete(link.id)}>Delete</button>
+      </div>
+
+      {k === 'html' && editorOpen && (
+        <CodeEditor
+          value={link.html}
+          onChange={(v) => onEdit(link.id, { html: v })}
+          placeholder={'<!-- HTML, <style> and <script> all work — rendered inline on the links page -->'}
+        />
+      )}
+      {k === 'text' && editorOpen && (
+        <textarea
+          className="lm-plaintext"
+          rows={4}
+          placeholder="Static text shown on the page — line breaks are kept."
+          value={link.html}
+          onChange={(e) => onEdit(link.id, { html: e.target.value })}
+        />
+      )}
+      {k === 'vcard' && editorOpen && (
+        <div className="lm-fields">
+          {([
+            ['firstName', 'First name'], ['lastName', 'Last name'], ['org', 'Company / org'],
+            ['phone', 'Phone'], ['email', 'E-mail'], ['url', 'Website'],
+          ] as [string, string][]).map(([key, label]) => (
+            <label key={key} className="field">
+              <span>{label}</span>
+              <input
+                type="text"
+                value={String(link.meta[key] ?? '')}
+                onChange={(e) => onEdit(link.id, { meta: { ...link.meta, [key]: e.target.value } })}
+              />
+            </label>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---- icon control ---------------------------------------------------------
+
+function IconControl({
+  link,
+  open,
+  onToggle,
+  onEdit,
+}: {
+  link: Link;
+  open: boolean;
+  onToggle: () => void;
+  onEdit: (id: string, patch: Partial<Pick<Link, 'icon'>>, instant?: boolean) => void;
+}) {
+  const icon = link.icon.trim();
+  let face: React.ReactNode;
+  if (icon.startsWith('<svg')) {
+    face = <span className="lm-iconface" style={{ color: String(link.meta.color ?? 'currentColor') }} dangerouslySetInnerHTML={{ __html: icon }} />;
+  } else if (icon === 'favicon') {
+    let src = '';
+    try { src = `https://www.google.com/s2/favicons?domain=${new URL(link.url).hostname}&sz=64`; } catch { /* no url yet */ }
+    face = src ? <img src={src} alt="" /> : <span className="lm-iconface-empty">◌</span>;
+  } else if (icon.startsWith('http') || icon.startsWith('/')) {
+    face = <img src={icon} alt="" />;
+  } else if (icon) {
+    face = <span style={{ fontSize: 16 }}>{icon}</span>;
+  } else {
+    face = <span className="lm-iconface-empty">＋</span>;
+  }
+
+  return (
+    <div className="lm-iconwrap">
+      <button type="button" className="lm-iconbtn" title="Icon: emoji, image or favicon" onClick={onToggle}>
+        {face}
+      </button>
+      {open && (
+        <div className="lm-iconpop">
+          <label className="field">
+            <span>Emoji</span>
+            <input
+              type="text"
+              placeholder="🔗"
+              value={!icon.startsWith('<svg') && icon !== 'favicon' && !icon.startsWith('http') && !icon.startsWith('/') ? icon : ''}
+              onChange={(e) => onEdit(link.id, { icon: e.target.value })}
+            />
+          </label>
+          <label className="field">
+            <span>Image URL</span>
+            <input
+              type="url"
+              placeholder="https://…/logo.png"
+              value={icon.startsWith('http') || icon.startsWith('/') ? icon : ''}
+              onChange={(e) => onEdit(link.id, { icon: e.target.value })}
+            />
+          </label>
+          <div style={{ display: 'flex', gap: 6 }}>
+            {link.kind === 'link' && (
+              <button
+                type="button"
+                className={`btn sm ${icon === 'favicon' ? 'primary' : ''}`}
+                title="Use the website's own icon"
+                onClick={() => onEdit(link.id, { icon: 'favicon' }, true)}
+              >
+                Use favicon
+              </button>
+            )}
+            <button type="button" className="btn sm ghost" onClick={() => onEdit(link.id, { icon: '' }, true)}>None</button>
+            <button type="button" className="btn sm ghost" style={{ marginLeft: 'auto' }} onClick={onToggle}>Done</button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---- color control --------------------------------------------------------
+
+const HEX = /^#[0-9a-f]{6}$/i;
+
+// same auto-contrast rule the public page uses when no text color is set
+function contrastText(bg: string): string {
+  const [r, g, b] = [1, 3, 5].map((i) => parseInt(bg.slice(i, i + 2), 16));
+  return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.62 ? '#1e1f24' : '#ffffff';
+}
+
+function ColorControl({
+  link,
+  open,
+  onToggle,
+  onEdit,
+}: {
+  link: Link;
+  open: boolean;
+  onToggle: () => void;
+  onEdit: (id: string, patch: Partial<Pick<Link, 'meta'>>, instant?: boolean) => void;
+}) {
+  const color = typeof link.meta.color === 'string' && HEX.test(link.meta.color) ? link.meta.color : '';
+  const textColor = typeof link.meta.textColor === 'string' && HEX.test(link.meta.textColor) ? link.meta.textColor : '';
+
+  function setMeta(key: 'color' | 'textColor', value: string | null, instant = false) {
+    const meta = { ...link.meta };
+    if (value === null) delete meta[key];
+    else meta[key] = value;
+    onEdit(link.id, { meta }, instant);
+  }
+
+  return (
+    <div className="lm-iconwrap">
+      <button type="button" className="lm-iconbtn" title="Button & text color" onClick={onToggle}>
+        {color || textColor ? (
+          <span
+            className="lm-colorswatch"
+            style={{ background: color || 'transparent', color: textColor || (color ? contrastText(color) : 'var(--text)') }}
+          >
+            A
+          </span>
+        ) : (
+          <span className="lm-colorswatch lm-colorswatch-empty">A</span>
+        )}
+      </button>
+      {open && (
+        <div className="lm-iconpop lm-colorpop">
+          <div className="lm-colorrow">
+            <span>Button color</span>
+            <input
+              type="color"
+              aria-label="Button color"
+              value={color || '#ffffff'}
+              onChange={(e) => setMeta('color', e.target.value)}
+            />
+            {color && (
+              <button type="button" className="btn sm ghost" title="Use the theme's default background" onClick={() => setMeta('color', null, true)}>
+                Reset
+              </button>
+            )}
+          </div>
+          <div className="lm-colorrow">
+            <span>Text color</span>
+            <input
+              type="color"
+              aria-label="Text color"
+              value={textColor || (color ? contrastText(color) : '#1e1f24')}
+              onChange={(e) => setMeta('textColor', e.target.value)}
+            />
+            {textColor && (
+              <button type="button" className="btn sm ghost" title="Pick automatically to match the button color" onClick={() => setMeta('textColor', null, true)}>
+                Auto
+              </button>
+            )}
+          </div>
+          <div style={{ display: 'flex' }}>
+            <button type="button" className="btn sm ghost" style={{ marginLeft: 'auto' }} onClick={onToggle}>Done</button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---- code editor ----------------------------------------------------------
+
+// Syntax-highlighted code editor: a transparent textarea typed into directly,
+// with a Prism-highlighted <pre> perfectly aligned underneath (VS Code Dark+
+// colors in admin.css). Prism's default bundle tokenizes HTML with inline
+// <script> as JS and <style> as CSS.
+function CodeEditor({ value, onChange, placeholder }: { value: string; onChange: (v: string) => void; placeholder: string }) {
+  const preRef = useRef<HTMLPreElement>(null);
+  const highlighted = Prism.highlight(value, Prism.languages.markup, 'markup');
+  return (
+    <div className="lm-codewrap">
+      <pre ref={preRef} className="lm-codehl" aria-hidden="true" dangerouslySetInnerHTML={{ __html: highlighted + '\n' }} />
+      <textarea
+        className="lm-code"
+        rows={8}
+        spellCheck={false}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onScroll={(e) => {
+          const p = preRef.current;
+          if (p) { p.scrollTop = e.currentTarget.scrollTop; p.scrollLeft = e.currentTarget.scrollLeft; }
+        }}
+      />
+    </div>
+  );
+}