@meith/web 0.30.0 → 0.31.0

package/package.json

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

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/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/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.30.0'
+export const CODE_VERSION = '0.31.0'
 
 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/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