feat(dashboard): ship Rail redesign and resolve review findings

AGENTS.md

@@ -26,6 +26,23 @@ always verify that normal behavior still works with `AGENT_MODE=false`.
 > Do not run destructive actions across multiple rows, unless specific prompt indication or
 > ask for user confirmation ALWAYS.
 
+## Design system
+
+UI work follows [`docs/design.md`](docs/design.md): tokens, shell, page templates, component rules and copy.
+Build pages from the shell (`@/components/shell`: `PageBar`, `Toolbar`, `PageContent`, `appToast`,
+`useCanWrite`) and the primitives (`@/components/primitives`); use the `--pn-*` tokens, never raw colors.
+
+Data and error conventions (details in `docs/design.md` §9.1):
+
+- Call mutation server functions from event handlers through `useServerFn(fn)`, and add each new POST
+  server function with its consumer file to the map in `tests/server-security.test.mjs`.
+- After a mutation, `await router.invalidate({ sync: true })` so loaders have reloaded before the UI settles.
+- Every `catch` block and `.catch(handler)` logs the caught error with `console.error(error)` (enforced by `pnpm test`).
+- Toasts go through `appToast`; route errors and not-found states come from the router defaults
+  (`RouteError`, `RouteNotFound`), so routes do not declare `errorComponent`.
+
+Before handing work back run `pnpm check`, `pnpm typecheck`, `pnpm test` and `pnpm build`.
+
 ## Git commits
 
 Use Conventional Commits for every commit message:

package.json

@@ -22,7 +22,6 @@
     "@tanstack/react-router": "1.170.17",
     "@tanstack/react-start": "1.168.27",
     "@tanstack/react-store": "^0.11.0",
-    "@tanstack/react-table": "9.0.0-beta.38",
     "@trpc/client": "11.5.1",
     "better-auth": "^1.5.5",
     "class-variance-authority": "^0.7.1",

src/components/app-mark.tsx

@@ -1,45 +1,20 @@
 import { Link } from "@tanstack/react-router"
 
 import logoUrl from "@/assets/logo.png"
-import { cn } from "@/lib/utils"
 
-export function AppMark({
-  compact = false,
-  sidebarResponsive = false,
-  className,
-  onClick,
-}: {
-  compact?: boolean
-  sidebarResponsive?: boolean
-  className?: string
-  onClick?: React.MouseEventHandler<HTMLAnchorElement>
-}) {
+/** The logo and wordmark on the login and onboarding pages. */
+export function AppMark() {
   return (
     <Link
       to="/dashboard"
-      className={cn(
-        "flex w-max items-center gap-3 rounded-lg text-inherit outline-none focus-visible:ring-3 focus-visible:ring-current/25",
-        sidebarResponsive && "group-data-[collapsible=icon]:gap-0",
-        className
-      )}
+      className="flex w-max items-center gap-3 rounded-lg text-inherit outline-none focus-visible:ring-3 focus-visible:ring-current/25"
       aria-label="PoliNetwork Admin home"
-      onClick={onClick}
     >
-      <img
-        className={cn("size-9 rounded-full", sidebarResponsive && "group-data-[collapsible=icon]:size-8")}
-        src={logoUrl}
-        alt=""
-        width={36}
-        height={36}
-      />
-      {!compact && (
-        <span className={cn("block leading-none", sidebarResponsive && "group-data-[collapsible=icon]:hidden")}>
-          <strong className="block text-sm font-semibold tracking-[-0.025em]">PoliNetwork</strong>
-          <small className="mt-1.5 block text-[9px] leading-none font-medium tracking-[0.12em] text-current/65 uppercase">
-            Admin dashboard
-          </small>
-        </span>
-      )}
+      <img className="size-9 rounded-full" src={logoUrl} alt="" width={36} height={36} />
+      <span className="block leading-none">
+        <strong className="block text-sm font-semibold tracking-[-0.025em]">PoliNetwork</strong>
+        <small className="mt-1.5 block text-[11px] leading-none font-medium text-current/65">Admin dashboard</small>
+      </span>
     </Link>
   )
 }