From 2f15f38ab110a831166b7500681705b2f5c4bd6b Mon Sep 17 00:00:00 2001
From: "pouriade.com" <did:plc:3sapfnszmvjc6wa4ml3ybkwb>
Date: Tue, 27 Oct 2026 22:45:52 -0700
Subject: [PATCH] Share detail pages' back link and not-found page

BackLink replaces the backLink class on five pages, and MissingPage
the four hand-built pages for a role, model, plugin, or key that
isn't there.
---
 .../src/features/admin/pages/ModelAdmin.tsx   | 18 ++++-----
 .../features/admin/pages/NewPluginAdmin.tsx   | 11 ++----
 .../src/features/admin/pages/PluginAdmin.tsx  | 23 +++++------
 .../src/features/admin/pages/RoleAdmin.tsx    | 18 ++++-----
 .../settings/pages/ApiKeyModelSettings.tsx    | 18 ++++-----
 apps/web/src/shared/ui/SettingsPage.tsx       | 38 +++++++++++++++++--
 6 files changed, 73 insertions(+), 53 deletions(-)

diff --git a/apps/web/src/features/admin/pages/ModelAdmin.tsx b/apps/web/src/features/admin/pages/ModelAdmin.tsx
index 89d75d4..b97c3f9 100644
--- a/apps/web/src/features/admin/pages/ModelAdmin.tsx
+++ b/apps/web/src/features/admin/pages/ModelAdmin.tsx
@@ -1,14 +1,14 @@
 import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
-import { Link, useNavigate } from '@tanstack/react-router'
+import { useNavigate } from '@tanstack/react-router'
 import { api, json, read } from '../../../shared/api.ts'
 import { formKey, useAppForm } from '../../../shared/form.tsx'
-import { ArrowLeftIcon } from '../../../shared/icons.tsx'
 import { ErrorAlert } from '../../../shared/ui/Alert.tsx'
 import { Code } from '../../../shared/ui/Code.tsx'
 import {
-  backLink,
+  BackLink,
   Callout,
   ConfirmButton,
+  MissingPage,
   type Save,
   SaveBar,
   SettingRow,
@@ -51,15 +51,15 @@ export function ModelAdmin(props: ModelAdminProps) {
     (candidate) => candidate.provider === props.provider && candidate.id === props.modelId,
   )
   const back = (
-    <Link to="/admin/plugins/$id" params={{ id: props.pluginId }} className={backLink}>
-      <ArrowLeftIcon /> Plugin
-    </Link>
+    <BackLink to="/admin/plugins/$id" params={{ id: props.pluginId }}>
+      Plugin
+    </BackLink>
   )
   if (!model)
     return (
-      <SettingsPage title="Model" back={back}>
-        <p role="alert">This model isn't offered.</p>
-      </SettingsPage>
+      <MissingPage title="Model" back={back}>
+        This model isn't offered.
+      </MissingPage>
     )
   return (
     <SettingsPage
diff --git a/apps/web/src/features/admin/pages/NewPluginAdmin.tsx b/apps/web/src/features/admin/pages/NewPluginAdmin.tsx
index 8ffe356..207b09c 100644
--- a/apps/web/src/features/admin/pages/NewPluginAdmin.tsx
+++ b/apps/web/src/features/admin/pages/NewPluginAdmin.tsx
@@ -1,15 +1,14 @@
 import { useStore as useFormStore } from '@tanstack/react-form'
 import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
-import { Link, useNavigate } from '@tanstack/react-router'
+import { useNavigate } from '@tanstack/react-router'
 import { api, json, read } from '../../../shared/api.ts'
 import { issuesOf } from '../../../shared/errors.ts'
 import { useAppForm } from '../../../shared/form.tsx'
-import { ArrowLeftIcon } from '../../../shared/icons.tsx'
 import { SchemaFields } from '../../../shared/schema-fields/SchemaFields.tsx'
 import { Select } from '../../../shared/ui/Select.tsx'
 import {
   AddBar,
-  backLink,
+  BackLink,
   SettingRow,
   SettingsGroup,
   SettingsPage,
@@ -48,11 +47,7 @@ export function NewPluginAdmin() {
     <SettingsPage
       title="Add plugin"
       description="Pick an installed package and fill in its options. You can change them later on its page."
-      back={
-        <Link to="/admin/plugins" className={backLink}>
-          <ArrowLeftIcon /> Plugins
-        </Link>
-      }
+      back={<BackLink to="/admin/plugins">Plugins</BackLink>}
     >
       <form.AppForm>
         <form.Form>
diff --git a/apps/web/src/features/admin/pages/PluginAdmin.tsx b/apps/web/src/features/admin/pages/PluginAdmin.tsx
index f73fbf1..05ef336 100644
--- a/apps/web/src/features/admin/pages/PluginAdmin.tsx
+++ b/apps/web/src/features/admin/pages/PluginAdmin.tsx
@@ -1,11 +1,16 @@
 import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
-import { Link, useNavigate } from '@tanstack/react-router'
+import { useNavigate } from '@tanstack/react-router'
 import { api, json, read } from '../../../shared/api.ts'
 import { issuesOf, messageOf } from '../../../shared/errors.ts'
 import { formKey } from '../../../shared/form.tsx'
-import { ArrowLeftIcon } from '../../../shared/icons.tsx'
 import { Code } from '../../../shared/ui/Code.tsx'
-import { backLink, Callout, type Save, SettingsPage } from '../../../shared/ui/SettingsPage.tsx'
+import {
+  BackLink,
+  Callout,
+  MissingPage,
+  type Save,
+  SettingsPage,
+} from '../../../shared/ui/SettingsPage.tsx'
 import { type PluginChange, PluginForm } from '../components/PluginForm.tsx'
 import { PluginStatus } from '../components/PluginStatus.tsx'
 import { usePluginsChanged } from '../hooks/changes.ts'
@@ -35,16 +40,12 @@ export function PluginAdmin(props: PluginAdminProps) {
     },
   })
   const instance = plugins.find((candidate) => candidate.id === props.id)
-  const back = (
-    <Link to="/admin/plugins" className={backLink}>
-      <ArrowLeftIcon /> Plugins
-    </Link>
-  )
+  const back = <BackLink to="/admin/plugins">Plugins</BackLink>
   if (!instance)
     return (
-      <SettingsPage title="Plugin" back={back}>
-        <p role="alert">This plugin isn't configured.</p>
-      </SettingsPage>
+      <MissingPage title="Plugin" back={back}>
+        This plugin isn't configured.
+      </MissingPage>
     )
   return (
     <SettingsPage
diff --git a/apps/web/src/features/admin/pages/RoleAdmin.tsx b/apps/web/src/features/admin/pages/RoleAdmin.tsx
index b2fa9d3..3a5ad00 100644
--- a/apps/web/src/features/admin/pages/RoleAdmin.tsx
+++ b/apps/web/src/features/admin/pages/RoleAdmin.tsx
@@ -1,18 +1,18 @@
 import { noop, useMutation, useSuspenseQuery } from '@tanstack/react-query'
-import { Link, useNavigate } from '@tanstack/react-router'
+import { useNavigate } from '@tanstack/react-router'
 import { api, json, read } from '../../../shared/api.ts'
 import { cn } from '../../../shared/cn.ts'
 import { lastError } from '../../../shared/errors.ts'
 import { formKey, useAppForm } from '../../../shared/form.tsx'
-import { ArrowLeftIcon } from '../../../shared/icons.tsx'
 import { splitLines } from '../../../shared/lines.ts'
 import { ErrorAlert } from '../../../shared/ui/Alert.tsx'
 import { Badge } from '../../../shared/ui/Badge.tsx'
 import * as ItemList from '../../../shared/ui/ItemList.tsx'
 import {
-  backLink,
+  BackLink,
   ConfirmButton,
   inlineForm,
+  MissingPage,
   type Save,
   SaveBar,
   SettingRow,
@@ -41,16 +41,12 @@ export function RoleAdmin(props: RoleAdminProps) {
     },
   })
   const role = data.roles.find((candidate) => candidate.name === props.name)
-  const back = (
-    <Link to="/admin/roles" className={backLink}>
-      <ArrowLeftIcon /> Roles
-    </Link>
-  )
+  const back = <BackLink to="/admin/roles">Roles</BackLink>
   if (!role)
     return (
-      <SettingsPage title={props.name} back={back}>
-        <p role="alert">This role doesn't exist.</p>
-      </SettingsPage>
+      <MissingPage title={props.name} back={back}>
+        This role doesn't exist.
+      </MissingPage>
     )
   return (
     <SettingsPage
diff --git a/apps/web/src/features/settings/pages/ApiKeyModelSettings.tsx b/apps/web/src/features/settings/pages/ApiKeyModelSettings.tsx
index ff884d1..e39c61e 100644
--- a/apps/web/src/features/settings/pages/ApiKeyModelSettings.tsx
+++ b/apps/web/src/features/settings/pages/ApiKeyModelSettings.tsx
@@ -1,10 +1,9 @@
 import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
-import { Link, useNavigate } from '@tanstack/react-router'
+import { useNavigate } from '@tanstack/react-router'
 import { useState } from 'react'
 import { api, json, read } from '../../../shared/api.ts'
 import { cn } from '../../../shared/cn.ts'
 import { formKey, useAppForm } from '../../../shared/form.tsx'
-import { ArrowLeftIcon } from '../../../shared/icons.tsx'
 import { ErrorAlert } from '../../../shared/ui/Alert.tsx'
 import { Button } from '../../../shared/ui/Button.tsx'
 import { CloseButton } from '../../../shared/ui/CloseButton.tsx'
@@ -13,10 +12,11 @@ import { Input } from '../../../shared/ui/controls.tsx'
 import { undivided } from '../../../shared/ui/divided-rows.ts'
 import * as ItemList from '../../../shared/ui/ItemList.tsx'
 import {
-  backLink,
+  BackLink,
   Callout,
   ConfirmButton,
   inlineForm,
+  MissingPage,
   type Save,
   SaveBar,
   SettingRow,
@@ -62,16 +62,12 @@ export function ApiKeyModelSettings(props: ApiKeyModelSettingsProps) {
     },
   })
   const credential = credentials.find((candidate) => candidate.id === props.id)
-  const back = (
-    <Link to="/settings/api-keys" className={backLink}>
-      <ArrowLeftIcon /> API keys
-    </Link>
-  )
+  const back = <BackLink to="/settings/api-keys">API keys</BackLink>
   if (!credential)
     return (
-      <SettingsPage title="API key" back={back}>
-        <p role="alert">This key isn't saved anymore.</p>
-      </SettingsPage>
+      <MissingPage title="API key" back={back}>
+        This key isn't saved anymore.
+      </MissingPage>
     )
   const provider = providers.find((p) => p.id === credential.providerId)
   const providerName = provider?.name ?? credential.providerId
diff --git a/apps/web/src/shared/ui/SettingsPage.tsx b/apps/web/src/shared/ui/SettingsPage.tsx
index a154cc9..5836804 100644
--- a/apps/web/src/shared/ui/SettingsPage.tsx
+++ b/apps/web/src/shared/ui/SettingsPage.tsx
@@ -1,9 +1,10 @@
 import { useStore } from '@tanstack/react-form'
+import { Link, type LinkProps } from '@tanstack/react-router'
 import { type ReactNode, useId, useRef, useState } from 'react'
 import { flushSync } from 'react-dom'
 import { cn } from '../cn.ts'
 import { useFormContext } from '../form.tsx'
-import { CheckIcon } from '../icons.tsx'
+import { ArrowLeftIcon, CheckIcon } from '../icons.tsx'
 import { ErrorAlert } from './Alert.tsx'
 import { Button, IconButton } from './Button.tsx'
 import { Radio } from './controls.tsx'
@@ -21,7 +22,7 @@ interface PageProps {
   title: ReactNode
   /** One line under the title saying what the section is for. */
   description?: ReactNode
-  /** A link above the title back to where this page was opened from, styled with backLink. */
+  /** A link above the title back to where this page was opened from, a BackLink. */
   back?: ReactNode
   /** Buttons or links beside the title that act on the whole page, such as adding an item. */
   actions?: ReactNode
@@ -53,8 +54,39 @@ export function SettingsPage(props: PageProps) {
   )
 }
 
+interface BackLinkProps extends Omit<LinkProps, 'children'> {
+  /** The page it leads back to, such as "Roles". */
+  children: string
+}
+
 /** The way back to the page this one was opened from, quiet above the title. */
-export const backLink = 'inline-flex items-center gap-1.5 text-muted no-underline hover:text-ink'
+export function BackLink(props: BackLinkProps) {
+  const { children, ...link } = props
+  return (
+    <Link
+      {...link}
+      className="inline-flex items-center gap-1.5 text-muted no-underline hover:text-ink"
+    >
+      <ArrowLeftIcon /> {children}
+    </Link>
+  )
+}
+
+interface MissingProps {
+  title: string
+  back: ReactNode
+  /** What is missing, such as "This role doesn't exist." */
+  children: ReactNode
+}
+
+/** A detail page for something that isn't there, as when it was deleted in another tab. */
+export function MissingPage(props: MissingProps) {
+  return (
+    <SettingsPage title={props.title} back={props.back}>
+      <p role="alert">{props.children}</p>
+    </SettingsPage>
+  )
+}
 
 interface GroupProps {
   title?: string
-- 
knotmirror 0.0.1