@meith/web 0.29.0 → 0.30.0

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/api/v1/[...path]/route.ts

@@ -16,6 +16,7 @@ import type { Actor } from '@meith/authorization'
 import { isAppError, metrics, statusForError, toPublicError, withSpan } from '@meith/core'
 import { currentRequestId } from '@meith/core/logger'
 
+import { readJsonBody } from '@/server/api/body'
 import { JSON_MEDIA_TYPE } from '@/server/api/http'
 import { handlerFor } from '@/server/api/registry'
 import {
@@ -161,13 +162,30 @@ async function respondTo(
     )
   }
 
+  let body: Record<string, unknown> | null = null
+  if (matched.route.request !== undefined) {
+    const outcome = await readJsonBody(request)
+    if (outcome.kind === 'too-large') {
+      return fail(
+        413,
+        'payload_too_large',
+        'The request body is larger than the API allows.',
+        headers,
+      )
+    }
+    if (outcome.kind === 'invalid') {
+      return fail(400, 'invalid_body', 'The request body is not valid JSON.', headers)
+    }
+    body = outcome.body
+  }
+
   try {
     const result = await handler({
       actor: caller.actor,
       token: caller.authenticated?.token ?? null,
       params: matched.params,
       url,
-      body: matched.route.request === undefined ? null : await readJsonBody(request),
+      body,
     })
 
     return json(result.body, result.status, headers)
@@ -180,17 +198,6 @@ async function respondTo(
   }
 }
 
-async function readJsonBody(request: NextRequest): Promise<Record<string, unknown> | null> {
-  try {
-    const parsed: unknown = await request.json()
-    return typeof parsed === 'object' && parsed !== null
-      ? (parsed as Record<string, unknown>)
-      : null
-  } catch {
-    return null
-  }
-}
-
 export async function GET(request: NextRequest): Promise<Response> {
   return handle(request, 'GET')
 }

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.0",
+  "version": "0.30.0",
   "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.0",
-    "@meith/admin": "0.29.0",
-    "@meith/antispam": "0.29.0",
-    "@meith/api": "0.29.0",
-    "@meith/attachments": "0.29.0",
-    "@meith/authorization": "0.29.0",
-    "@meith/avatars": "0.29.0",
-    "@meith/core": "0.29.0",
-    "@meith/db": "0.29.0",
-    "@meith/demo": "0.29.0",
-    "@meith/drafts": "0.29.0",
-    "@meith/drivers": "0.29.0",
-    "@meith/events": "0.29.0",
-    "@meith/forums": "0.29.0",
-    "@meith/groups": "0.29.0",
-    "@meith/i18n": "0.29.0",
-    "@meith/import": "0.29.0",
-    "@meith/install": "0.29.0",
-    "@meith/mail": "0.29.0",
-    "@meith/markdown": "0.29.0",
-    "@meith/marketplace": "0.29.0",
-    "@meith/messages": "0.29.0",
-    "@meith/moderation": "0.29.0",
-    "@meith/notifications": "0.29.0",
-    "@meith/plugin-calendar": "0.29.0",
-    "@meith/plugin-dues": "0.29.0",
-    "@meith/plugin-kit": "0.29.0",
-    "@meith/polls": "0.29.0",
-    "@meith/posts": "0.29.0",
-    "@meith/profile-fields": "0.29.0",
-    "@meith/relations": "0.29.0",
-    "@meith/reputation": "0.29.0",
-    "@meith/runtime": "0.29.0",
-    "@meith/search": "0.29.0",
-    "@meith/settings": "0.29.0",
-    "@meith/signatures": "0.29.0",
-    "@meith/subscriptions": "0.29.0",
-    "@meith/tasks": "0.29.0",
-    "@meith/theme-clubhouse": "0.29.0",
-    "@meith/theme-default": "0.29.0",
-    "@meith/theme-kit": "0.29.0",
-    "@meith/theme-midnight": "0.29.0",
-    "@meith/theme-phasebook": "0.29.0",
-    "@meith/theme-raidframe": "0.29.0",
-    "@meith/threads": "0.29.0",
-    "@meith/ui": "0.29.0",
-    "@meith/upgrade": "0.29.0"
+    "@meith/accounts": "0.30.0",
+    "@meith/admin": "0.30.0",
+    "@meith/antispam": "0.30.0",
+    "@meith/api": "0.30.0",
+    "@meith/attachments": "0.30.0",
+    "@meith/authorization": "0.30.0",
+    "@meith/avatars": "0.30.0",
+    "@meith/core": "0.30.0",
+    "@meith/db": "0.30.0",
+    "@meith/demo": "0.30.0",
+    "@meith/drafts": "0.30.0",
+    "@meith/drivers": "0.30.0",
+    "@meith/events": "0.30.0",
+    "@meith/forums": "0.30.0",
+    "@meith/groups": "0.30.0",
+    "@meith/i18n": "0.30.0",
+    "@meith/import": "0.30.0",
+    "@meith/install": "0.30.0",
+    "@meith/mail": "0.30.0",
+    "@meith/markdown": "0.30.0",
+    "@meith/marketplace": "0.30.0",
+    "@meith/messages": "0.30.0",
+    "@meith/moderation": "0.30.0",
+    "@meith/notifications": "0.30.0",
+    "@meith/plugin-calendar": "0.30.0",
+    "@meith/plugin-dues": "0.30.0",
+    "@meith/plugin-kit": "0.30.0",
+    "@meith/polls": "0.30.0",
+    "@meith/posts": "0.30.0",
+    "@meith/profile-fields": "0.30.0",
+    "@meith/relations": "0.30.0",
+    "@meith/reputation": "0.30.0",
+    "@meith/runtime": "0.30.0",
+    "@meith/search": "0.30.0",
+    "@meith/settings": "0.30.0",
+    "@meith/signatures": "0.30.0",
+    "@meith/subscriptions": "0.30.0",
+    "@meith/tasks": "0.30.0",
+    "@meith/theme-clubhouse": "0.30.0",
+    "@meith/theme-default": "0.30.0",
+    "@meith/theme-kit": "0.30.0",
+    "@meith/theme-midnight": "0.30.0",
+    "@meith/theme-phasebook": "0.30.0",
+    "@meith/theme-raidframe": "0.30.0",
+    "@meith/threads": "0.30.0",
+    "@meith/ui": "0.30.0",
+    "@meith/upgrade": "0.30.0"
   },
   "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/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/server/api/body.ts

@@ -0,0 +1,79 @@
+import 'server-only'
+
+export const MAX_API_BODY_BYTES = 256 * 1024
+
+export type JsonBodyOutcome =
+  | { readonly kind: 'ok'; readonly body: Record<string, unknown> | null }
+  | { readonly kind: 'too-large' }
+  | { readonly kind: 'invalid' }
+
+async function readBounded(
+  request: Request,
+  limit: number,
+): Promise<Uint8Array | 'too-large' | 'unreadable'> {
+  const stream = request.body
+  if (stream === null) {
+    try {
+      const whole = new Uint8Array(await request.arrayBuffer())
+      return whole.byteLength > limit ? 'too-large' : whole
+    } catch {
+      return 'unreadable'
+    }
+  }
+
+  const reader = stream.getReader()
+  const chunks: Uint8Array[] = []
+  let total = 0
+
+  try {
+    let step = await reader.read()
+    while (!step.done) {
+      const chunk = step.value
+      if (chunk !== undefined) {
+        total += chunk.byteLength
+        if (total > limit) {
+          await reader.cancel().catch(() => {})
+          return 'too-large'
+        }
+        chunks.push(chunk)
+      }
+      step = await reader.read()
+    }
+  } catch {
+    return 'unreadable'
+  }
+
+  const body = new Uint8Array(total)
+  let offset = 0
+  for (const chunk of chunks) {
+    body.set(chunk, offset)
+    offset += chunk.byteLength
+  }
+  return body
+}
+
+export async function readJsonBody(
+  request: Request,
+  limit: number = MAX_API_BODY_BYTES,
+): Promise<JsonBodyOutcome> {
+  const declared = Number(request.headers.get('content-length') ?? '')
+  if (Number.isFinite(declared) && declared > limit) return { kind: 'too-large' }
+
+  const bytes = await readBounded(request, limit)
+  if (bytes === 'too-large') return { kind: 'too-large' }
+  if (bytes === 'unreadable') return { kind: 'invalid' }
+  if (bytes.byteLength === 0) return { kind: 'ok', body: null }
+
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(new TextDecoder().decode(bytes))
+  } catch {
+    return { kind: 'invalid' }
+  }
+
+  return {
+    kind: 'ok',
+    body:
+      typeof parsed === 'object' && parsed !== null ? (parsed as Record<string, unknown>) : null,
+  }
+}

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/same-origin.ts

@@ -1,7 +1,21 @@
 import 'server-only'
 
-function boardHost(request: Request): string | null {
-  const host = request.headers.get('x-forwarded-host') ?? request.headers.get('host')
+import { env } from '@meith/core'
+
+function canonicalOrigin(): URL | null {
+  const configured = env.APP_URL
+  if (configured === undefined || configured === '') return null
+
+  try {
+    return new URL(configured)
+  } catch {
+    return null
+  }
+}
+
+function requestHost(request: Request): string | null {
+  const forwarded = env.TRUSTED_PROXY_HOPS > 0 ? request.headers.get('x-forwarded-host') : null
+  const host = forwarded ?? request.headers.get('host')
   if (host === null) return null
 
   const trimmed = host.trim().toLowerCase()
@@ -12,14 +26,23 @@ export function isSameOrigin(request: Request): boolean {
   const origin = request.headers.get('origin')?.trim()
 
   if (origin !== undefined && origin !== '' && origin !== 'null') {
-    const host = boardHost(request)
-    if (host === null) return false
-
+    let presented: URL
     try {
-      return new URL(origin).host.toLowerCase() === host
+      presented = new URL(origin)
     } catch {
       return false
     }
+
+    const canonical = canonicalOrigin()
+    if (canonical !== null) {
+      return (
+        presented.host.toLowerCase() === canonical.host.toLowerCase() &&
+        presented.protocol === canonical.protocol
+      )
+    }
+
+    const host = requestHost(request)
+    return host !== null && presented.host.toLowerCase() === host
   }
 
   const site = request.headers.get('sec-fetch-site')

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.0'
+export const CODE_VERSION = '0.30.0'
 
 export interface UpgradeApplied {
   readonly plugins: readonly string[]

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),