@acms-subir/core 0.1.0 → 0.3.0

package/src/layouts/Admin.astro

@@ -2,6 +2,10 @@
 import { getRepo } from '../lib/repo';
 import { BRAND } from '../lib/brand';
 import { CONTENT } from '../lib/content';
+import { CALENDAR, bookingsEnabled } from '../lib/calendar/config';
+import { validateSession, SESSION_COOKIE, OWNER_ENV } from '../lib/auth';
+import ThemeScript from '../components/ThemeScript.astro';
+import CommandPalette from '../components/CommandPalette';
 import '../styles/admin.css';
 
 interface Props {
@@ -14,12 +18,24 @@ interface Props {
 const { title, section, wide = false } = Astro.props;
 
 const repo = await getRepo(Astro.locals);
-const [pages, posts, links, home] = await Promise.all([
+const sessionUserId = (await validateSession(Astro.cookies.get(SESSION_COOKIE)?.value, Astro.locals));
+const [pages, posts, links, home, settings, sessionUser] = await Promise.all([
   repo.listPages(),
   repo.listPosts(),
   repo.listLinks(),
   repo.getHomePage(),
+  repo.getSettings(),
+  sessionUserId && sessionUserId !== OWNER_ENV ? repo.getUser(sessionUserId) : Promise.resolve(null),
 ]);
+// pending booking requests, shown as a count on the Bookings nav item
+const pendingBookings = bookingsEnabled() ? (await repo.listBookings({ from: Date.now(), statuses: ['pending'] })).length : 0;
+const me = {
+  name: sessionUser?.name || 'Admin',
+  role: sessionUserId === OWNER_ENV ? 'Owner' : sessionUser?.role === 'owner' ? 'Owner' : 'Editor',
+  avatar: sessionUser?.avatar || '',
+};
+const initials = me.name.split(/\s+/).map((w) => w[0] ?? '').join('').slice(0, 2).toUpperCase();
+const siteName = settings.siteTitle || BRAND.name;
 
 const icons: Record<string, string> = {
   dashboard: 'M3 3h7v9H3zM14 3h7v5h-7zM14 12h7v9h-7zM3 16h7v5H3z',
@@ -30,34 +46,107 @@ const icons: Record<string, string> = {
   links: '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',
   tags: 'M3 12V3h9l9 9-9 9zM7.5 7.5h0',
   users: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8M22 21v-2a4 4 0 0 0-3-3.87M15 3.13a4 4 0 0 1 0 7.75',
-  settings: 'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM19 12a7 7 0 0 0-.1-1.2l2-1.6-2-3.4-2.4 1a7 7 0 0 0-2-1.2L14 3h-4l-.5 2.6a7 7 0 0 0-2 1.2l-2.4-1-2 3.4 2 1.6A7 7 0 0 0 5 12a7 7 0 0 0 .1 1.2l-2 1.6 2 3.4 2.4-1a7 7 0 0 0 2 1.2L10 21h4l.5-2.6a7 7 0 0 0 2-1.2l2.4 1 2-3.4-2-1.6A7 7 0 0 0 19 12z',
+  settings: 'M4 7h10M18 7h2M4 17h4M12 17h8M14 5v4M8 15v4',
   design: 'M12 3c3.2 3.7 6 7 6 10.2a6 6 0 1 1-12 0C6 10 8.8 6.7 12 3zM9.5 14.5a2.5 2.5 0 0 0 5 0',
   navigation: 'M4 6h16M4 12h10M4 18h13M19 11l3 3-3 3',
+  search: 'M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4',
+  write: 'M4 20h4L19 9l-4-4L4 16zM13.5 6.5l4 4',
+  chev: 'M6 9l6 6 6-6',
+  chevr: 'M9 6l6 6-6 6',
+  updown: 'M8 9l4-4 4 4M8 15l4 4 4-4',
+  side: 'M4 4h16v16H4zM9 4v16',
+  sun: 'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4',
+  moon: 'M20 14.5A8 8 0 0 1 9.5 4 8 8 0 1 0 20 14.5z',
+  monitor: 'M3 4h18v12H3zM8 20h8M12 16v4',
+  globe: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM3 12h18M12 3c2.5 2.4 3.8 5.6 3.8 9S14.5 18.6 12 21c-2.5-2.4-3.8-5.6-3.8-9S9.5 5.4 12 3z',
+  out: 'M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3',
+  more: 'M5 12h.01M12 12h.01M19 12h.01',
+  user: 'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 21a8 8 0 0 1 16 0',
+  calendar: 'M3 5.5h18v15H3zM3 10h18M8 3v4M16 3v4',
+  calendars: 'M4 6h.01M4 12h.01M4 18h.01M8 6h12M8 12h12M8 18h12',
+  bookings: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 7v5l3 2',
+  resources: 'M3 21V9l9-5 9 5v12M9 21v-6h6v6',
+  plug: 'M9 7V3M15 7V3M6 7h12v4a6 6 0 0 1-12 0zM12 17v4',
 };
 
 // one sidebar entry per configured collection, in config order
 const byCollection = new Map<string, number>();
 for (const p of posts) byCollection.set(p.collection, (byCollection.get(p.collection) ?? 0) + 1);
-const collectionItems = Object.entries(CONTENT.collections).map(([key, c]) => ({
+const collections = Object.entries(CONTENT.collections);
+const firstCollection = collections[0]?.[0] ?? 'posts';
+const collectionItems = collections.map(([key, c]) => ({
   key: `c:${key}`,
   label: c.plural,
   href: `/admin/c/${key}`,
   icon: icons.posts,
-  count: byCollection.get(key) ?? 0,
+  count: byCollection.get(key) ?? 0 as number | null,
 }));
 
-const items = [
-  { key: 'dashboard', label: 'Dashboard', href: '/admin', icon: icons.dashboard, count: null },
-  { key: 'home', label: 'Home Page', href: home ? `/admin/pages/${home.id}` : '/admin/pages', icon: icons.home, count: null },
-  { key: 'pages', label: 'Pages', href: '/admin/pages', icon: icons.pages, count: pages.length },
-  ...collectionItems,
-  { key: 'tags', label: 'Tags', href: '/admin/tags', icon: icons.tags, count: null },
-  { key: 'media', label: 'Media', href: '/admin/media', icon: icons.media, count: null },
-  { key: 'links', label: 'Links', href: '/admin/links', icon: icons.links, count: links.length },
-  { key: 'users', label: 'Users', href: '/admin/users', icon: icons.users, count: null },
-  { key: 'design', label: 'Design', href: '/admin/design', icon: icons.design, count: null },
-  { key: 'navigation', label: 'Navigation', href: '/admin/navigation', icon: icons.navigation, count: null },
-  { key: 'settings', label: 'Settings', href: '/admin/settings', icon: icons.settings, count: null },
+type Item = { key: string; label: string; href: string; icon: string; count: number | null; attention?: boolean };
+const groups: { id: string; label: string; items: Item[] }[] = [
+  {
+    id: 'main',
+    label: '',
+    items: [
+      { key: 'dashboard', label: 'Overview', href: '/admin', icon: icons.dashboard, count: null },
+      { key: 'home', label: 'Home page', href: home ? `/admin/pages/${home.id}` : '/admin/pages', icon: icons.home, count: null },
+    ],
+  },
+  {
+    id: 'content',
+    label: 'Content',
+    items: [
+      ...collectionItems,
+      { key: 'pages', label: 'Pages', href: '/admin/pages', icon: icons.pages, count: pages.length },
+      { key: 'tags', label: 'Tags', href: '/admin/tags', icon: icons.tags, count: null },
+      { key: 'media', label: 'Media', href: '/admin/media', icon: icons.media, count: null },
+    ],
+  },
+  ...(CALENDAR.enabled
+    ? [{
+        id: 'calendar',
+        label: 'Calendar',
+        items: [
+          { key: 'calendar:events', label: 'Events', href: '/admin/calendar/events', icon: icons.calendar, count: null },
+          ...(bookingsEnabled()
+            ? [
+                { key: 'calendar:bookings', label: 'Bookings', href: '/admin/calendar/bookings', icon: icons.bookings, count: pendingBookings || null, attention: pendingBookings > 0 },
+                { key: 'calendar:resources', label: 'Resources', href: '/admin/calendar/resources', icon: icons.resources, count: null },
+              ]
+            : []),
+          { key: 'calendar:calendars', label: 'Calendars', href: '/admin/calendar/calendars', icon: icons.calendars, count: null },
+          { key: 'calendar:integrations', label: 'API & webhooks', href: '/admin/calendar/integrations', icon: icons.plug, count: null },
+        ],
+      }]
+    : []),
+  {
+    id: 'site',
+    label: 'Site',
+    items: [
+      { key: 'design', label: 'Design', href: '/admin/design', icon: icons.design, count: null },
+      { key: 'navigation', label: 'Navigation', href: '/admin/navigation', icon: icons.navigation, count: null },
+      { key: 'links', label: 'Links page', href: '/admin/links', icon: icons.links, count: links.length },
+    ],
+  },
+  {
+    id: 'team',
+    label: 'Team',
+    items: [
+      { key: 'users', label: 'Users', href: '/admin/users', icon: icons.users, count: null },
+      { key: 'ai', label: 'Document import', href: '/admin/ai', icon: icons.posts, count: null },
+      { key: 'settings', label: 'Settings', href: '/admin/settings', icon: icons.settings, count: null },
+    ],
+  },
+];
+const activeGroup = groups.find((g) => g.items.some((i) => i.key === section));
+const crumbGroup = activeGroup?.label ?? '';
+
+// bottom tab bar (phones): Home · Content · Links · Search · More
+const tabActive = section === 'dashboard' ? 'home' : section.startsWith('c:') || section === 'pages' ? 'content' : section === 'links' ? 'links' : 'more';
+const themeOpts = [
+  { key: 'light', label: 'Light', icon: icons.sun },
+  { key: 'dark', label: 'Dark', icon: icons.moon },
+  { key: 'system', label: 'Auto', icon: icons.monitor },
 ];
 ---
 
@@ -65,55 +154,206 @@ const items = [
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta name="robots" content="noindex" />
     <title>{title} · {BRAND.name} admin</title>
+    <ThemeScript />
+    <script is:inline>
+      // restore the collapsed rail before paint
+      try { if (localStorage.getItem('acms-rail') === '1') document.documentElement.classList.add('rail-pending'); } catch {}
+    </script>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
   </head>
   <body>
-    <div class="shell">
-      <aside class="sidebar">
+    <div class="shell" id="acms-shell">
+      <aside class="sidebar" aria-label="Admin navigation">
         <div class="brand">
-          <svg width="22" height="22" viewBox="0 0 24 24" role="img" aria-label={BRAND.name}>
-            <rect x="1" y="3" width="22" height="4.4" rx="1.9" fill="#e7e8ec" />
-            <rect x="1" y="10" width="12.5" height="4.4" rx="1.9" fill="#ff8a4c" />
-            <rect x="1" y="17" width="17.5" height="4.4" rx="1.9" fill="#e7e8ec" opacity="0.48" />
+          <svg width="20" height="20" viewBox="0 0 24 24" role="img" aria-label={BRAND.name}>
+            <rect x="1" y="3" width="22" height="4.4" rx="1.9" fill="currentColor" opacity="0.85" />
+            <rect x="1" y="10" width="12.5" height="4.4" rx="1.9" fill="var(--accent)" />
+            <rect x="1" y="17" width="17.5" height="4.4" rx="1.9" fill="currentColor" opacity="0.35" />
           </svg>
-          <div>
-            <div class="brand-name">{BRAND.name}</div>
-            <div class="brand-sub">v{BRAND.version} · {BRAND.stack}</div>
-          </div>
+          <span class="brand-name" title={`v${BRAND.version} · ${BRAND.stack}`}>{siteName}</span>
+          <button class="icon-btn" type="button" id="acms-rail-toggle" aria-label="Collapse sidebar" title="Collapse sidebar">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={icons.side} /></svg>
+          </button>
         </div>
-        {items.map((it) => (
-          <a class={`nav-item ${section === it.key ? 'active' : ''}`} href={it.href}>
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-              <path d={it.icon} />
-            </svg>
-            {it.label}
-            {it.count !== null && <span class="count">{it.count}</span>}
-          </a>
-        ))}
-        <div class="nav-sep" />
-        <a class="nav-item" href="/" target="_blank" rel="noopener">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM3 12h18M12 3c2.5 2.4 3.8 5.6 3.8 9S14.5 18.6 12 21c-2.5-2.4-3.8-5.6-3.8-9S9.5 5.4 12 3z" />
-          </svg>
-          View site
+        <button class="side-search" type="button" data-cmdk title="Search or jump to (⌘K)">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d={icons.search} /></svg>
+          <span>Search</span><kbd>⌘K</kbd>
+        </button>
+        <a class="nav-item" href={`/admin/c/${firstCollection}?new=1`} title={`Write a ${(CONTENT.collections[firstCollection] ?? CONTENT.posts).singular.toLowerCase()}`}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={icons.write} /></svg>
+          <span>Write a {(CONTENT.collections[firstCollection] ?? CONTENT.posts).singular.toLowerCase()}</span>
         </a>
+        <nav class="nav-scroll">
+          {groups.map((g) => {
+            const links = g.items.map((it) => (
+              <a class={`nav-item ${section === it.key ? 'active' : ''}`} href={it.href} title={it.label} aria-current={section === it.key ? 'page' : undefined}>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={it.icon} /></svg>
+                <span>{it.label}</span>
+                {it.count !== null && <span class={`count${it.attention ? ' is-attention' : ''}`}>{it.count}</span>}
+              </a>
+            ));
+            return g.label ? (
+              <details class="nav-group" data-group={g.id} open>
+                <summary>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d={icons.chev} /></svg>
+                  {g.label}
+                </summary>
+                {links}
+              </details>
+            ) : <div>{links}</div>;
+          })}
+        </nav>
         <div class="sidebar-foot">
-          Signed in · <a href="/admin/logout">Sign out</a>
+          <button class="account" type="button" id="acms-account" aria-haspopup="menu" aria-expanded="false">
+            <span class="avatar">{me.avatar ? <img src={me.avatar} alt="" /> : initials}</span>
+            <span class="who"><b>{me.name}</b><small>{me.role}</small></span>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={icons.updown} /></svg>
+          </button>
+          <div class="menu-pop" id="acms-account-menu" role="menu" hidden>
+            <div class="menu-label">Appearance</div>
+            <div class="seg block" role="group" aria-label="Theme">
+              {themeOpts.map((t) => (
+                <button type="button" data-set-theme={t.key}>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={t.icon} /></svg>{t.label}
+                </button>
+              ))}
+            </div>
+            <div class="menu-sep" />
+            <a class="menu-item" href="/" target="_blank" rel="noopener" role="menuitem">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={icons.globe} /></svg>View site
+            </a>
+            <a class="menu-item" href="/admin/logout" role="menuitem">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={icons.out} /></svg>Sign out
+            </a>
+          </div>
         </div>
       </aside>
+
       <div class="main">
-        <div class="topbar">
-          <div class="crumb">{BRAND.name} / <b>{title}</b></div>
-          <a class="btn sm ghost" href="/" target="_blank" rel="noopener">Open site ↗</a>
+        <main class="panel" id="acms-panel">
+          <div class="topbar">
+            <div class="crumb">
+              {crumbGroup && <span>{crumbGroup}</span>}
+              {crumbGroup && <span class="sl">/</span>}
+              <b>{title}</b>
+            </div>
+            <div class="topbar-actions">
+              <slot name="topbar" />
+              <a class="btn sm ghost" href="/" target="_blank" rel="noopener">View site ↗</a>
+            </div>
+          </div>
+          <div class={`content ${wide ? 'content-wide' : ''}`}>
+            <slot />
+          </div>
+        </main>
+      </div>
+    </div>
+
+    <nav class="tabbar" aria-label="Sections">
+      <a href="/admin" class={tabActive === 'home' ? 'active' : ''}>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={icons.home} /></svg>Home
+      </a>
+      <a href={`/admin/c/${firstCollection}`} class={tabActive === 'content' ? 'active' : ''}>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={icons.posts} /></svg>Content
+      </a>
+      <a href="/admin/links" class={tabActive === 'links' ? 'active' : ''}>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={icons.links} /></svg>Links
+      </a>
+      <button type="button" data-cmdk>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={icons.search} /></svg>Search
+      </button>
+      <button type="button" class={tabActive === 'more' ? 'active' : ''} id="acms-more-open">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d={icons.more} /></svg>More
+      </button>
+    </nav>
+
+    <dialog class="sheet" id="acms-more" aria-label="More">
+      <div class="sheet-grab" />
+      <div class="sheet-body">
+        <div class="sheet-title">More</div>
+        <div class="glist">
+          <div class="glist-row">
+            <span class="avatar" style="width:34px;height:34px;font-size:12px">{me.avatar ? <img src={me.avatar} alt="" /> : initials}</span>
+            <span class="grow"><b>{me.name}</b><br /><small class="hint">{me.role} · {siteName}</small></span>
+          </div>
         </div>
-        <div class={`content ${wide ? 'content-wide' : ''}`}>
-          <slot />
+        <div class="sheet-label">Appearance</div>
+        <div class="seg" role="group" aria-label="Theme" style="display:flex;margin-bottom:12px">
+          {themeOpts.map((t) => (
+            <button type="button" data-set-theme={t.key} style="flex:1;padding:8px 4px">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={t.icon} /></svg>{t.label}
+            </button>
+          ))}
+        </div>
+        {groups.map((g) => (
+          <div class="glist">
+            {g.items
+              .filter((it) => !['dashboard', `c:${firstCollection}`, 'links'].includes(it.key))
+              .map((it) => (
+                <a href={it.href} aria-current={section === it.key ? 'page' : undefined}>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={it.icon} /></svg>
+                  <span class="grow">{it.label}</span>
+                  {it.count !== null && <span class="count">{it.count}</span>}
+                  <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d={icons.chevr} /></svg>
+                </a>
+              ))}
+          </div>
+        ))}
+        <div class="glist">
+          <a href="/" target="_blank" rel="noopener">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={icons.globe} /></svg>
+            <span class="grow">View site</span>
+          </a>
+          <a href="/admin/logout" class="danger">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={icons.out} /></svg>
+            <span class="grow">Sign out</span>
+          </a>
         </div>
       </div>
-    </div>
+    </dialog>
+
+    <CommandPalette client:idle collections={collections.map(([key, c]) => ({ key, singular: c.singular, plural: c.plural }))} />
+
+    <script>
+      const shell = document.getElementById('acms-shell');
+      // collapsed rail, remembered per browser
+      if (document.documentElement.classList.contains('rail-pending')) shell?.classList.add('is-rail');
+      document.getElementById('acms-rail-toggle')?.addEventListener('click', () => {
+        const on = !shell?.classList.contains('is-rail');
+        shell?.classList.toggle('is-rail', on);
+        try { localStorage.setItem('acms-rail', on ? '1' : '0'); } catch {}
+      });
+
+      // nav groups remember open/closed
+      document.querySelectorAll<HTMLDetailsElement>('details.nav-group').forEach((d) => {
+        const k = `acms-nav-${d.dataset.group}`;
+        try { if (localStorage.getItem(k) === '0' && !d.querySelector('.active')) d.open = false; } catch {}
+        d.addEventListener('toggle', () => { try { localStorage.setItem(k, d.open ? '1' : '0'); } catch {} });
+      });
+
+      // account menu
+      const acct = document.getElementById('acms-account');
+      const menu = document.getElementById('acms-account-menu');
+      const close = () => { if (menu) menu.hidden = true; acct?.setAttribute('aria-expanded', 'false'); };
+      acct?.addEventListener('click', (e) => {
+        e.stopPropagation();
+        if (!menu) return;
+        menu.hidden = !menu.hidden;
+        acct.setAttribute('aria-expanded', String(!menu.hidden));
+      });
+      document.addEventListener('click', (e) => {
+        if (menu && !menu.hidden && !(e.target instanceof Node && menu.contains(e.target))) close();
+      });
+      document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close(); });
+
+      // More sheet (phones)
+      const sheet = document.getElementById('acms-more') as HTMLDialogElement | null;
+      document.getElementById('acms-more-open')?.addEventListener('click', () => sheet?.showModal());
+      sheet?.addEventListener('click', (e) => { if (e.target === sheet) sheet.close(); });
+    </script>
   </body>
 </html>