@meith/web 0.29.1 → 0.30.1

package/app/admin/settings/page.tsx

@@ -3,16 +3,19 @@ import { redirect } from 'next/navigation'
 
 import { buttonVariants, Card, CardContent, CardFooter, cn, Input } from '@meith/ui'
 
+import { FaviconUploadForm } from '@/components/admin/branding-forms'
 import { MailTestCard } from '@/components/admin/mail-test-card'
 import { AdminSettingsForm } from '@/components/admin/settings-form'
 import { PanelPage } from '@/components/shell/panel-page'
 import { adminPageContext } from '@/server/admin'
 import { boardUrlResolution } from '@/server/board-url'
+import { faviconKey, faviconSrc } from '@/server/branding'
 import { getTranslator, tr } from '@/server/i18n'
+import { MAX_IMAGE_BYTES } from '@/server/image-upload'
 import { assessMailReadiness } from '@/server/mail-health'
 import { pushReadiness } from '@/server/push'
 import { getSettings } from '@/server/settings'
-import { mailTestCardCopy, settingsFormCopy } from '@/view/admin-panel-copy'
+import { faviconFormsCopy, mailTestCardCopy, settingsFormCopy } from '@/view/admin-panel-copy'
 import { buildAdminSettingsModel, DEFAULT_SETTING_GROUP, settingsHref } from '@/view/admin-settings'
 
 export async function generateMetadata(): Promise<Metadata> {
@@ -49,6 +52,8 @@ export default async function AdminSettingsPage({
 
   const push = model.activeGroup === 'push' ? await pushReadiness() : null
 
+  const favicon = model.activeGroup === 'board' ? await faviconKey() : null
+
   return (
     <PanelPage title={await tr('page.board-settings')} lede={t.t('adminSettings.lede')}>
       <Card>
@@ -184,6 +189,24 @@ export default async function AdminSettingsPage({
         </section>
       )}
 
+      {model.activeGroup === 'board' && (
+        <section className="flex flex-col gap-3">
+          <div className="flex flex-col gap-1">
+            <h2 className="font-heading text-lg font-semibold">
+              {t.t('setting.board.favicon.label')}
+            </h2>
+            <p className="text-sm text-muted-foreground">
+              {t.t('setting.board.favicon.description')}
+            </p>
+          </div>
+          <FaviconUploadForm
+            src={favicon === null ? null : faviconSrc(favicon)}
+            maxKib={MAX_IMAGE_BYTES / 1024}
+            copy={faviconFormsCopy(t)}
+          />
+        </section>
+      )}
+
       <AdminSettingsForm groups={model.groups} copy={settingsFormCopy(t)} />
     </PanelPage>
   )

package/app/brand/favicon/route.ts

@@ -0,0 +1,18 @@
+import { drivers } from '@meith/drivers'
+
+import { faviconKey } from '@/server/branding'
+import { imageHeaders } from '@/server/image-upload'
+
+export const dynamic = 'force-dynamic'
+
+export async function GET(): Promise<Response> {
+  const key = await faviconKey()
+  if (key === null) return new Response(null, { status: 404 })
+
+  const bytes = await drivers().files.get(key)
+  if (bytes === undefined) return new Response(null, { status: 404 })
+
+  return new Response(bytes as unknown as BodyInit, {
+    headers: imageHeaders(key, bytes.byteLength),
+  })
+}

package/app/icon.ts

@@ -1,13 +1,27 @@
-import { buildFaviconSvg, loadBrandInfo } from '@/server/brand-assets'
+import {
+  buildFaviconSvg,
+  faviconDataUri,
+  loadBrandInfo,
+  loadFaviconAsset,
+} from '@/server/brand-assets'
 
 export const dynamic = 'force-dynamic'
 
 export const contentType = 'image/svg+xml'
 
 export default async function Icon(): Promise<Response> {
+  const asset = await loadFaviconAsset()
+
+  if (asset !== null && asset.type === 'image/svg+xml') {
+    return new Response(asset.bytes as unknown as BodyInit, {
+      headers: { 'Content-Type': 'image/svg+xml' },
+    })
+  }
+
   const info = await loadBrandInfo()
+  const embedded = asset === null ? null : faviconDataUri(asset)
 
-  return new Response(buildFaviconSvg(info), {
+  return new Response(buildFaviconSvg(info, embedded), {
     headers: { 'Content-Type': 'image/svg+xml' },
   })
 }

package/app/layout.tsx

@@ -10,6 +10,7 @@ import { CopyProvider } from '@/components/shell/copy'
 import { CrashNoticeProvider } from '@/components/shell/crash-notice'
 import { DemoBanner } from '@/components/shell/demo-banner'
 import { GroupNameStyle } from '@/components/shell/group-name-style'
+import { ServiceWorkerRegistrar } from '@/components/shell/service-worker'
 import { ThemeRuntimeStyle } from '@/components/shell/theme-runtime-style'
 import { TimezoneProbe } from '@/components/shell/timezone-probe'
 import { crashNotice } from '@/server/error-notice'
@@ -104,6 +105,7 @@ export default async function RootLayout({
         <ThemeRuntimeStyle />
         <GroupNameStyle />
         <TimezoneProbe />
+        <ServiceWorkerRegistrar />
       </head>
       <body className="font-sans antialiased">
         <DemoBanner />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/web",
-  "version": "0.29.1",
+  "version": "0.30.1",
   "description": "The board itself: the Next.js app, and the forum-web bin that materializes it into an external board workspace.",
   "license": "MIT",
   "repository": {
@@ -43,53 +43,53 @@
     "react-dom": "19.2.8",
     "tailwindcss": "^4.3.3",
     "typescript": "7.0.2",
-    "@meith/accounts": "0.29.1",
-    "@meith/admin": "0.29.1",
-    "@meith/antispam": "0.29.1",
-    "@meith/api": "0.29.1",
-    "@meith/attachments": "0.29.1",
-    "@meith/authorization": "0.29.1",
-    "@meith/avatars": "0.29.1",
-    "@meith/core": "0.29.1",
-    "@meith/db": "0.29.1",
-    "@meith/demo": "0.29.1",
-    "@meith/drafts": "0.29.1",
-    "@meith/drivers": "0.29.1",
-    "@meith/events": "0.29.1",
-    "@meith/forums": "0.29.1",
-    "@meith/groups": "0.29.1",
-    "@meith/i18n": "0.29.1",
-    "@meith/import": "0.29.1",
-    "@meith/install": "0.29.1",
-    "@meith/mail": "0.29.1",
-    "@meith/markdown": "0.29.1",
-    "@meith/marketplace": "0.29.1",
-    "@meith/messages": "0.29.1",
-    "@meith/moderation": "0.29.1",
-    "@meith/notifications": "0.29.1",
-    "@meith/plugin-calendar": "0.29.1",
-    "@meith/plugin-dues": "0.29.1",
-    "@meith/plugin-kit": "0.29.1",
-    "@meith/polls": "0.29.1",
-    "@meith/posts": "0.29.1",
-    "@meith/profile-fields": "0.29.1",
-    "@meith/relations": "0.29.1",
-    "@meith/reputation": "0.29.1",
-    "@meith/runtime": "0.29.1",
-    "@meith/search": "0.29.1",
-    "@meith/settings": "0.29.1",
-    "@meith/signatures": "0.29.1",
-    "@meith/subscriptions": "0.29.1",
-    "@meith/tasks": "0.29.1",
-    "@meith/theme-clubhouse": "0.29.1",
-    "@meith/theme-default": "0.29.1",
-    "@meith/theme-kit": "0.29.1",
-    "@meith/theme-midnight": "0.29.1",
-    "@meith/theme-phasebook": "0.29.1",
-    "@meith/theme-raidframe": "0.29.1",
-    "@meith/threads": "0.29.1",
-    "@meith/ui": "0.29.1",
-    "@meith/upgrade": "0.29.1"
+    "@meith/accounts": "0.30.1",
+    "@meith/admin": "0.30.1",
+    "@meith/antispam": "0.30.1",
+    "@meith/api": "0.30.1",
+    "@meith/attachments": "0.30.1",
+    "@meith/authorization": "0.30.1",
+    "@meith/avatars": "0.30.1",
+    "@meith/core": "0.30.1",
+    "@meith/db": "0.30.1",
+    "@meith/drafts": "0.30.1",
+    "@meith/demo": "0.30.1",
+    "@meith/drivers": "0.30.1",
+    "@meith/events": "0.30.1",
+    "@meith/groups": "0.30.1",
+    "@meith/forums": "0.30.1",
+    "@meith/i18n": "0.30.1",
+    "@meith/import": "0.30.1",
+    "@meith/install": "0.30.1",
+    "@meith/mail": "0.30.1",
+    "@meith/markdown": "0.30.1",
+    "@meith/marketplace": "0.30.1",
+    "@meith/messages": "0.30.1",
+    "@meith/moderation": "0.30.1",
+    "@meith/notifications": "0.30.1",
+    "@meith/plugin-calendar": "0.30.1",
+    "@meith/plugin-dues": "0.30.1",
+    "@meith/plugin-kit": "0.30.1",
+    "@meith/polls": "0.30.1",
+    "@meith/posts": "0.30.1",
+    "@meith/profile-fields": "0.30.1",
+    "@meith/relations": "0.30.1",
+    "@meith/reputation": "0.30.1",
+    "@meith/runtime": "0.30.1",
+    "@meith/search": "0.30.1",
+    "@meith/settings": "0.30.1",
+    "@meith/signatures": "0.30.1",
+    "@meith/subscriptions": "0.30.1",
+    "@meith/tasks": "0.30.1",
+    "@meith/theme-clubhouse": "0.30.1",
+    "@meith/theme-default": "0.30.1",
+    "@meith/theme-kit": "0.30.1",
+    "@meith/theme-midnight": "0.30.1",
+    "@meith/theme-phasebook": "0.30.1",
+    "@meith/theme-raidframe": "0.30.1",
+    "@meith/threads": "0.30.1",
+    "@meith/ui": "0.30.1",
+    "@meith/upgrade": "0.30.1"
   },
   "scripts": {
     "dev": "next dev",

package/public/sw.js

@@ -44,8 +44,8 @@ self.addEventListener('push', (event) => {
     body: typeof payload.body === 'string' ? payload.body : '',
     tag: typeof payload.id === 'number' ? `meith-${payload.id}` : 'meith',
     data: { href: targetUrl(payload.href) },
-    icon: '/apple-icon.png',
-    badge: '/icon-light-32x32.png',
+    icon: '/brand/icon-192.png',
+    badge: '/brand/icon-192.png',
     timestamp: Date.now(),
   }
 

package/src/components/admin/branding-forms.tsx

@@ -4,7 +4,12 @@ import { useActionState } from 'react'
 
 import { PANEL_CARD } from '@/components/shell/panel-list'
 import { EMPTY_STATE } from '@/server/auth-form-state'
-import { removeLogoAction, saveLogoAction } from '@/server/branding-actions'
+import {
+  removeFaviconAction,
+  removeLogoAction,
+  saveFaviconAction,
+  saveLogoAction,
+} from '@/server/branding-actions'
 
 import { FormError, PendingButton, SubmitButton } from '../auth/form-controls'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
@@ -20,6 +25,69 @@ export interface LogoSlot {
 const GHOST =
   'inline-flex h-8 items-center justify-center rounded-md border border-border px-3 text-xs font-medium hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
 
+export function FaviconUploadForm({
+  src,
+  maxKib,
+  copy,
+}: {
+  src: string | null
+  maxKib: number
+  copy: Copy
+}) {
+  const [saved, saveAction] = useActionState(saveFaviconAction, EMPTY_STATE)
+  const [removed, removeAction] = useActionState(removeFaviconAction, EMPTY_STATE)
+
+  return (
+    <div className={PANEL_CARD}>
+      <FormError message={saved.error ?? removed.error} />
+      <Saved when={saved.notice === 'saved'}>{fromCopy(copy, 'adminPanel.favicon.saved')}</Saved>
+      <Saved when={removed.notice === 'removed'}>
+        {fromCopy(copy, 'adminPanel.favicon.removed')}
+      </Saved>
+
+      <div className="flex min-h-16 items-center justify-center rounded-md border border-border bg-card p-3">
+        {src === null ? (
+          <span className="text-xs text-muted-foreground">
+            {fromCopy(copy, 'adminPanel.favicon.nothing')}
+          </span>
+        ) : (
+          <img src={src} alt="" className="size-8 object-contain" />
+        )}
+      </div>
+
+      <form action={saveAction} className="flex flex-col gap-2">
+        <label htmlFor="favicon" className="sr-only">
+          {fromCopy(copy, 'adminPanel.branding.upload')}
+        </label>
+        <input
+          id="favicon"
+          type="file"
+          name="favicon"
+          accept="image/png,image/jpeg,image/webp,image/svg+xml"
+          required
+          className="w-full text-xs file:mr-3 file:rounded-md file:border file:border-border file:bg-background file:px-3 file:py-1.5 file:text-xs file:font-medium"
+        />
+        <p className="text-xs text-muted-foreground">
+          {formatFromCopy(copy, 'adminPanel.favicon.formats', { maxKib })}
+        </p>
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="min-w-32">
+            <SubmitButton>{fromCopy(copy, 'adminPanel.branding.upload')}</SubmitButton>
+          </span>
+        </div>
+      </form>
+
+      {src !== null && (
+        <form action={removeAction}>
+          <PendingButton showWorking className={GHOST}>
+            {fromCopy(copy, 'admin.remove')}
+          </PendingButton>
+        </form>
+      )}
+    </div>
+  )
+}
+
 export function LogoUploadForm({
   slot,
   maxKib,

package/src/components/shell/install-action.tsx

@@ -0,0 +1,86 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import { INSTALL_BANNER_COOKIE, INSTALL_BANNER_COOKIE_MAX_AGE } from '@/view/install-banner'
+
+interface InstallPrompt extends Event {
+  prompt(): Promise<void>
+  readonly userChoice: Promise<{ readonly outcome: 'accepted' | 'dismissed' }>
+}
+
+interface CookieStoreLike {
+  set(init: {
+    readonly name: string
+    readonly value: string
+    readonly path: string
+    readonly expires: number
+    readonly sameSite: 'lax'
+  }): Promise<void>
+}
+
+function isInstallPrompt(event: Event): event is InstallPrompt {
+  return 'prompt' in event && 'userChoice' in event
+}
+
+const BUTTON =
+  'inline-flex h-8 items-center rounded-md border border-border bg-background px-3 text-xs font-medium text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'
+
+export function InstallAction({ label, how }: { label: string; how: string }) {
+  const [pending, setPending] = useState<InstallPrompt | null>(null)
+
+  useEffect(() => {
+    const capture = (event: Event) => {
+      if (!isInstallPrompt(event)) return
+      event.preventDefault()
+      setPending(event)
+    }
+    const installed = () => setPending(null)
+
+    window.addEventListener('beforeinstallprompt', capture)
+    window.addEventListener('appinstalled', installed)
+    return () => {
+      window.removeEventListener('beforeinstallprompt', capture)
+      window.removeEventListener('appinstalled', installed)
+    }
+  }, [])
+
+  if (pending !== null) {
+    const install = () => {
+      const prompt = pending
+      setPending(null)
+      prompt
+        .prompt()
+        .then(() => prompt.userChoice)
+        .then((choice) => {
+          if (choice.outcome !== 'accepted') return
+          const store = (window as { cookieStore?: CookieStoreLike }).cookieStore
+          return store?.set({
+            name: INSTALL_BANNER_COOKIE,
+            value: '1',
+            path: '/',
+            expires: Date.now() + INSTALL_BANNER_COOKIE_MAX_AGE * 1000,
+            sameSite: 'lax',
+          })
+        })
+        .catch(() => {})
+    }
+
+    return (
+      <button type="button" onClick={install} className={BUTTON}>
+        {label}
+      </button>
+    )
+  }
+
+  return (
+    <details>
+      <summary className={`${BUTTON} cursor-pointer list-none [&::-webkit-details-marker]:hidden`}>
+        {label}
+      </summary>
+      <p className="absolute inset-x-0 bottom-full z-10 mb-2 rounded-md border border-border bg-card p-3 text-xs text-muted-foreground shadow-lg">
+        {how}
+      </p>
+    </details>
+  )
+}

package/src/components/shell/install-banner.tsx

@@ -0,0 +1,29 @@
+import { PendingButton } from '@/components/auth/form-controls'
+import { InstallAction } from '@/components/shell/install-action'
+import { BOARD_MEASURE } from '@/components/shell/measure'
+import type { InstallBannerModel } from '@/server/install-banner'
+import { dismissInstallBannerAction } from '@/server/install-banner-actions'
+
+export function InstallBanner({ message, how, installLabel, dismissLabel }: InstallBannerModel) {
+  return (
+    <div className="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-card text-sm text-foreground shadow-lg md:hidden [@media(display-mode:standalone)]:hidden">
+      <div
+        className={`${BOARD_MEASURE} relative flex flex-wrap items-center justify-between gap-x-4 gap-y-2 py-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]`}
+      >
+        <p>{message}</p>
+
+        <div className="flex items-center gap-3">
+          <InstallAction label={installLabel} how={how} />
+          <form action={dismissInstallBannerAction}>
+            <PendingButton
+              showWorking
+              className="text-xs text-muted-foreground hover:text-foreground"
+            >
+              {dismissLabel}
+            </PendingButton>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/shell/page-shell.tsx

@@ -3,6 +3,7 @@ import { currentRequestId } from '@meith/core/logger'
 import { requireSlot, slotCopy } from '@meith/theme-kit'
 
 import { LogoutForm } from '@/components/account/logout-form'
+import { InstallBanner } from '@/components/shell/install-banner'
 import { NotificationMenu } from '@/components/shell/notification-menu'
 import { OnboardingBanner } from '@/components/shell/onboarding-banner'
 import { ThemeSwitcher } from '@/components/shell/theme-switcher'
@@ -10,6 +11,7 @@ import { avatarsFor } from '@/server/avatars'
 import { currentLogo } from '@/server/branding'
 import { getContainer } from '@/server/container'
 import { getTranslator } from '@/server/i18n'
+import { installBanner } from '@/server/install-banner'
 import { legalFooterLinks } from '@/server/legal'
 import { unreadMessageCount } from '@/server/messages'
 import { boardNavigation } from '@/server/navigation'
@@ -119,6 +121,7 @@ export async function PageShell({ actor, children }: { actor: Actor; children: R
   const jump = built === null ? null : await filterView('view.forum-jump', built, pluginContext)
 
   const onboarding = await onboardingBanner(actor).catch(() => null)
+  const install = await installBanner().catch(() => null)
 
   const translator = await getTranslator()
 
@@ -151,17 +154,25 @@ export async function PageShell({ actor, children }: { actor: Actor; children: R
 
       {await boardRegion('header.notice', actor)}
 
+      {install !== null && <InstallBanner {...install} />}
       {onboarding !== null && <OnboardingBanner {...onboarding} />}
 
       {children}
 
-      {jump !== null && jump.forums.length > 0 && (
-        <ForumJump {...jump} copy={slotCopy(theme, 'ForumJump', translator)} />
-      )}
-
-      <ThemeSwitcher />
-
-      <Footer {...footerModel} copy={slotCopy(theme, 'Footer', translator)} />
+      <Footer
+        {...footerModel}
+        regions={{
+          controls: (
+            <>
+              {jump !== null && jump.forums.length > 0 && (
+                <ForumJump {...jump} copy={slotCopy(theme, 'ForumJump', translator)} />
+              )}
+              <ThemeSwitcher />
+            </>
+          ),
+        }}
+        copy={slotCopy(theme, 'Footer', translator)}
+      />
     </Shell>
   )
 }

package/src/components/shell/service-worker.tsx

@@ -0,0 +1,12 @@
+import { cspNonce } from '@/server/nonce'
+
+const REGISTER = `(function(){try{
+if(!('serviceWorker' in navigator))return;
+var go=function(){navigator.serviceWorker.register('/sw.js',{scope:'/'}).catch(function(){});};
+if(document.readyState==='complete')go();
+else window.addEventListener('load',go,{once:true});
+}catch(e){}})();`
+
+export async function ServiceWorkerRegistrar() {
+  return <script nonce={await cspNonce()} dangerouslySetInnerHTML={{ __html: REGISTER }} />
+}

package/src/components/shell/theme-switcher.tsx

@@ -1,6 +1,5 @@
 import { PendingButton } from '@/components/auth/form-controls'
 import { MonitorIcon, MoonIcon, SunIcon } from '@/components/shell/appearance-icons'
-import { BOARD_MEASURE } from '@/components/shell/measure'
 import { setAppearanceAction } from '@/server/appearance-actions'
 import { getTranslator } from '@/server/i18n'
 import { currentColourScheme, currentThemeKey } from '@/server/theme'
@@ -31,67 +30,61 @@ export async function ThemeSwitcher() {
   ])
 
   return (
-    <div className="border-t border-border bg-card text-card-foreground">
-      <div
-        className={`${BOARD_MEASURE} flex flex-wrap items-center justify-end gap-x-4 gap-y-2 py-2`}
-      >
-        <section
-          aria-label={t.t('appearance.section')}
-          className="flex flex-wrap items-center justify-end gap-x-4 gap-y-2"
+    <section
+      aria-label={t.t('appearance.section')}
+      className="flex flex-wrap items-center justify-end gap-x-4 gap-y-2"
+    >
+      {choices.length > 1 && (
+        <form action={setAppearanceAction} className="flex items-center gap-2">
+          <label htmlFor="appearance-theme" className="text-xs text-muted-foreground">
+            {t.t('appearance.theme')}
+          </label>
+          <select id="appearance-theme" name="theme" defaultValue={theme} className={CONTROL}>
+            {choices.map((choice) => (
+              <option key={choice.key} value={choice.key}>
+                {choice.title}
+              </option>
+            ))}
+          </select>
+          <PendingButton
+            showWorking
+            className="h-8 rounded-md border border-border px-2.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+          >
+            {t.t('appearance.apply')}
+          </PendingButton>
+        </form>
+      )}
+
+      <form action={setAppearanceAction}>
+        <span
+          role="group"
+          aria-label={t.t('appearance.schemeGroup')}
+          className="inline-flex items-center overflow-hidden rounded-md border border-border text-muted-foreground"
         >
-          {choices.length > 1 && (
-            <form action={setAppearanceAction} className="flex items-center gap-2">
-              <label htmlFor="appearance-theme" className="text-xs text-muted-foreground">
-                {t.t('appearance.theme')}
-              </label>
-              <select id="appearance-theme" name="theme" defaultValue={theme} className={CONTROL}>
-                {choices.map((choice) => (
-                  <option key={choice.key} value={choice.key}>
-                    {choice.title}
-                  </option>
-                ))}
-              </select>
+          {COLOUR_SCHEMES.map((option) => {
+            const Icon = SCHEME_ICON[option]
+            const label = t.t(SCHEME_LABEL_KEY[option])
+            const selected = scheme === option
+            return (
               <PendingButton
-                showWorking
-                className="h-8 rounded-md border border-border px-2.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+                key={option}
+                name="scheme"
+                value={option}
+                title={label}
+                aria-pressed={selected}
+                className={`inline-flex h-8 items-center justify-center border-border px-2.5 transition-colors [&:not(:first-child)]:border-l focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring ${
+                  selected
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-background hover:bg-accent hover:text-accent-foreground'
+                }`}
               >
-                {t.t('appearance.apply')}
+                <Icon />
+                <span className="sr-only">{label}</span>
               </PendingButton>
-            </form>
-          )}
-
-          <form action={setAppearanceAction}>
-            <span
-              role="group"
-              aria-label={t.t('appearance.schemeGroup')}
-              className="inline-flex items-center overflow-hidden rounded-md border border-border text-muted-foreground"
-            >
-              {COLOUR_SCHEMES.map((option) => {
-                const Icon = SCHEME_ICON[option]
-                const label = t.t(SCHEME_LABEL_KEY[option])
-                const selected = scheme === option
-                return (
-                  <PendingButton
-                    key={option}
-                    name="scheme"
-                    value={option}
-                    title={label}
-                    aria-pressed={selected}
-                    className={`inline-flex h-8 items-center justify-center border-border px-2.5 transition-colors [&:not(:first-child)]:border-l focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring ${
-                      selected
-                        ? 'bg-primary text-primary-foreground'
-                        : 'bg-background hover:bg-accent hover:text-accent-foreground'
-                    }`}
-                  >
-                    <Icon />
-                    <span className="sr-only">{label}</span>
-                  </PendingButton>
-                )
-              })}
-            </span>
-          </form>
-        </section>
-      </div>
-    </div>
+            )
+          })}
+        </span>
+      </form>
+    </section>
   )
 }

package/src/server/brand-assets.ts

@@ -6,7 +6,7 @@ import { colourToHex } from '@meith/theme-kit'
 
 import { BOARD_TITLE } from '@/view/shell'
 
-import { logoKey } from './branding'
+import { faviconKey, logoKey } from './branding'
 import { contentTypeFor } from './image-upload'
 import { getSettings } from './settings'
 import { getBoardThemeStyle } from './theme-runtime'
@@ -33,6 +33,8 @@ export interface BrandInfo {
 
 const EMBEDDABLE_LOGO_TYPES = new Set(['image/png', 'image/jpeg'])
 
+const EMBEDDABLE_FAVICON_TYPES = new Set(['image/png', 'image/jpeg', 'image/webp', 'image/svg+xml'])
+
 const MAX_EMBEDDED_LOGO_BYTES = 192 * 1024
 
 const DESCRIPTION_LIMIT = 160
@@ -104,6 +106,40 @@ export async function loadBrandInfo(): Promise<BrandInfo> {
   }
 }
 
+export interface FaviconAsset {
+  readonly type: string
+  readonly bytes: Uint8Array
+}
+
+export async function loadFaviconAsset(): Promise<FaviconAsset | null> {
+  try {
+    const key = await faviconKey()
+    if (key === null) return null
+
+    const type = contentTypeFor(key)
+    const bytes = await drivers().files.get(key)
+    if (bytes === undefined || bytes.byteLength === 0) return null
+    if (bytes.byteLength > MAX_EMBEDDED_LOGO_BYTES) return null
+
+    return { type, bytes: new Uint8Array(bytes) }
+  } catch {
+    return null
+  }
+}
+
+export function faviconDataUri(asset: FaviconAsset): string | null {
+  if (!EMBEDDABLE_FAVICON_TYPES.has(asset.type)) return null
+  return `data:${asset.type};base64,${Buffer.from(asset.bytes).toString('base64')}`
+}
+
+export async function loadMarkDataUri(): Promise<string | null> {
+  const asset = await loadFaviconAsset()
+  if (asset !== null && EMBEDDABLE_LOGO_TYPES.has(asset.type)) {
+    return `data:${asset.type};base64,${Buffer.from(asset.bytes).toString('base64')}`
+  }
+  return loadLogoDataUri('light')
+}
+
 export async function loadLogoDataUri(scheme: BrandScheme): Promise<string | null> {
   try {
     const key = (await logoKey(scheme)) ?? (await logoKey(scheme === 'light' ? 'dark' : 'light'))
@@ -131,7 +167,15 @@ function escapeXml(value: string): string {
     .replaceAll("'", '&#39;')
 }
 
-export function buildFaviconSvg(info: BrandInfo): string {
+export function buildFaviconSvg(info: BrandInfo, embedded?: string | null): string {
+  if (embedded !== undefined && embedded !== null && embedded !== '') {
+    return [
+      `<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">`,
+      `<image href="${escapeXml(embedded)}" width="64" height="64" preserveAspectRatio="xMidYMid meet"/>`,
+      `</svg>`,
+    ].join('')
+  }
+
   const label = escapeXml(info.initials)
   return [
     `<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">`,

package/src/server/brand-mark.tsx

@@ -3,7 +3,7 @@ import 'server-only'
 import { ImageResponse } from 'next/og'
 import type { ReactElement } from 'react'
 
-import { type BrandInfo, loadBrandInfo, loadLogoDataUri } from './brand-assets'
+import { type BrandInfo, loadBrandInfo, loadLogoDataUri, loadMarkDataUri } from './brand-assets'
 
 interface MarkOptions {
   readonly size: number
@@ -94,7 +94,7 @@ function socialElement(info: BrandInfo, logo: string | null): ReactElement {
 
 export async function renderBrandMark(size: number, maskable = false): Promise<ImageResponse> {
   const info = await loadBrandInfo()
-  const logo = await loadLogoDataUri('light')
+  const logo = await loadMarkDataUri()
 
   return new ImageResponse(markElement(info, logo, { size, maskable }), {
     width: size,

package/src/server/branding-actions.ts

@@ -5,7 +5,15 @@ import { msg } from '@meith/i18n'
 
 import { recordAdminAction, requireAdmin } from './admin'
 import type { FormState } from './auth-form-state'
-import { isLogoScheme, LOGO_FIELD, removeLogo, saveLogo } from './branding'
+import {
+  FAVICON_FIELD,
+  isLogoScheme,
+  LOGO_FIELD,
+  removeFavicon,
+  removeLogo,
+  saveFavicon,
+  saveLogo,
+} from './branding'
 import { formStateReporter } from './form-state-reporter'
 
 const toFormState = formStateReporter('branding', 'logo write failed')
@@ -51,3 +59,34 @@ export async function removeLogoAction(_prev: FormState, form: FormData): Promis
     return toFormState(err)
   }
 }
+
+export async function saveFaviconAction(_prev: FormState, form: FormData): Promise<FormState> {
+  try {
+    await requireAdmin()
+
+    const file = form.get(FAVICON_FIELD)
+    if (!(file instanceof File) || file.size === 0) {
+      throw new ValidationError(msg('error.app.choose-image-first'))
+    }
+
+    await saveFavicon(file)
+    await recordAdminAction({ action: 'branding.favicon_saved', detail: { bytes: file.size } })
+
+    return { notice: 'saved' }
+  } catch (err) {
+    return toFormState(err)
+  }
+}
+
+export async function removeFaviconAction(_prev: FormState, _form: FormData): Promise<FormState> {
+  try {
+    await requireAdmin()
+
+    await removeFavicon()
+    await recordAdminAction({ action: 'branding.favicon_removed', detail: {} })
+
+    return { notice: 'removed' }
+  } catch (err) {
+    return toFormState(err)
+  }
+}

package/src/server/branding.ts

@@ -5,7 +5,14 @@ import { cache } from 'react'
 import { CacheTags } from '@meith/core'
 import { getDb, PostgresSettingsRepository } from '@meith/db'
 import { drivers } from '@meith/drivers'
-import { isLogoKey, type LogoScheme, logoPath, saveSettings } from '@meith/settings'
+import {
+  faviconPath,
+  isFaviconKey,
+  isLogoKey,
+  type LogoScheme,
+  logoPath,
+  saveSettings,
+} from '@meith/settings'
 
 import { forgetImage, storeImage } from './image-upload'
 import { getSettings } from './settings'
@@ -53,8 +60,33 @@ export async function logoKey(scheme: LogoScheme): Promise<string | null> {
   return isLogoKey(key) ? key : null
 }
 
+export const FAVICON_FIELD = 'favicon'
+
+export async function saveFavicon(file: File): Promise<void> {
+  const key = await storeImage('board', 'favicon', file)
+
+  const previous = (await getSettings()).get('board.favicon')
+  await writeSetting('board.favicon', key)
+
+  if (previous !== key) await forgetImage(previous)
+}
+
+export async function removeFavicon(): Promise<void> {
+  const previous = (await getSettings()).get('board.favicon')
+  await writeSetting('board.favicon', '')
+
+  await forgetImage(previous)
+}
+
+export async function faviconKey(): Promise<string | null> {
+  const key = (await getSettings()).get('board.favicon')
+  return isFaviconKey(key) ? key : null
+}
+
 export const logoSrc = logoPath
 
+export const faviconSrc = faviconPath
+
 export interface BoardLogo {
   readonly src: string
   readonly darkSrc: string | null

package/src/server/install-banner-actions.ts

@@ -0,0 +1,18 @@
+'use server'
+
+import { cookies } from 'next/headers'
+
+import { INSTALL_BANNER_COOKIE, INSTALL_BANNER_COOKIE_MAX_AGE } from '@/view/install-banner'
+
+import { redirectToCurrentPath } from './redirect-back'
+
+export async function dismissInstallBannerAction(): Promise<void> {
+  ;(await cookies()).set(INSTALL_BANNER_COOKIE, '1', {
+    path: '/',
+    maxAge: INSTALL_BANNER_COOKIE_MAX_AGE,
+    sameSite: 'lax',
+    httpOnly: false,
+  })
+
+  await redirectToCurrentPath()
+}

package/src/server/install-banner.ts

@@ -0,0 +1,29 @@
+import 'server-only'
+
+import { cookies } from 'next/headers'
+
+import { INSTALL_BANNER_COOKIE } from '@/view/install-banner'
+
+import { getTranslator } from './i18n'
+import { getSettings } from './settings'
+
+export interface InstallBannerModel {
+  readonly message: string
+  readonly how: string
+  readonly installLabel: string
+  readonly dismissLabel: string
+}
+
+export async function installBanner(): Promise<InstallBannerModel | null> {
+  const settings = await getSettings()
+  if (!settings.get('board.install_banner')) return null
+  if ((await cookies()).get(INSTALL_BANNER_COOKIE)?.value === '1') return null
+
+  const t = await getTranslator()
+  return {
+    message: t.t('installBanner.message', { board: settings.get('board.name') }),
+    how: t.t('installBanner.how'),
+    installLabel: t.t('installBanner.install'),
+    dismissLabel: t.t('installBanner.dismiss'),
+  }
+}

package/src/server/upgrade-notice.ts

@@ -16,7 +16,7 @@ import { planUpgrade, type UpgradeState, upgradeNotice } from '@meith/upgrade'
 
 import { activeDefinitions } from './plugin-host'
 
-export const CODE_VERSION = '0.29.1'
+export const CODE_VERSION = '0.30.1'
 
 export interface UpgradeApplied {
   readonly plugins: readonly string[]

package/src/theme/contract.fixture.ts

@@ -180,8 +180,9 @@ export const SLOT_FIXTURES: { readonly [K in SlotName]?: SlotFixture<K> } = {
       links: [{ label: 'Contact', href: '/contact' }],
       timezoneLabel: 'Europe/London',
       poweredBy: { label: 'Powered by Meith', href: 'https://meith.dev' },
+      regions: { controls: region('footer-controls') },
     },
-    requires: ['Europe/London', '/contact'],
+    requires: ['Europe/London', '/contact', region('footer-controls')],
   },
 
   Notice: {

package/src/view/admin-panel-copy.ts

@@ -180,6 +180,22 @@ export function brandingFormsCopy(
   }
 }
 
+export function faviconFormsCopy(t: Translator = untranslated()): Readonly<Record<string, string>> {
+  return {
+    ...adminSharedCopy(t),
+    ...copyFor(
+      [
+        'adminPanel.favicon.saved',
+        'adminPanel.favicon.removed',
+        'adminPanel.favicon.nothing',
+        'adminPanel.branding.upload',
+      ],
+      t,
+    ),
+    ...patternCopy(['adminPanel.favicon.formats'], t),
+  }
+}
+
 export function badgeFormsCopy(t: Translator = untranslated()): Readonly<Record<string, string>> {
   return {
     ...adminSharedCopy(t),

package/src/view/install-banner.ts

@@ -0,0 +1,3 @@
+export const INSTALL_BANNER_COOKIE = 'meith_install_banner'
+
+export const INSTALL_BANNER_COOKIE_MAX_AGE = 60 * 60 * 24 * 365