From 0a2febe334a751395265990298a9dec323e6deeb Mon Sep 17 00:00:00 2001
From: Gerald Leban <gerald.leban0@gmail.com>
Date: Tue, 6 Oct 2026 11:32:13 +0200
Subject: [PATCH] refactor(layouts): consolidate to single BaseLayout, remove
 app/auth/settings layouts

---
 inertia/layouts/app.tsx      | 103 ----------------------
 inertia/layouts/auth.tsx     |  10 ---
 inertia/layouts/base.tsx     |   6 ++
 inertia/layouts/settings.tsx |  35 --------
 inertia/pages/auth/login.tsx | 163 ++++++++++++++++++-----------------
 inertia/pages/kits/edit.tsx  | 144 ++++++++++++++++---------------
 inertia/pages/kits/new.tsx   |  50 +++++------
 7 files changed, 189 insertions(+), 322 deletions(-)
 delete mode 100644 inertia/layouts/app.tsx
 delete mode 100644 inertia/layouts/auth.tsx
 delete mode 100644 inertia/layouts/settings.tsx

diff --git a/inertia/layouts/app.tsx b/inertia/layouts/app.tsx
deleted file mode 100644
index b6af78f..0000000
--- a/inertia/layouts/app.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { useState } from 'react'
-import Logo from '~/components/logo'
-import { type ReactNode } from 'react'
-import { LogOut, Menu, X } from 'lucide-react'
-import { Form } from '@adonisjs/inertia/react'
-import { usePage } from '@inertiajs/react'
-import FlashToasts from '~/components/flash_toasts'
-import ThemeToggle from '~/components/theme_toggle'
-import { Button } from '~/components/ui/button'
-import { Avatar, AvatarFallback } from '~/components/ui/avatar'
-
-function UserAvatar({ did }: { did: string }) {
-  const initials = did.replace('did:', '').slice(0, 2).toUpperCase()
-  return (
-    <Avatar>
-      <AvatarFallback>{initials}</AvatarFallback>
-    </Avatar>
-  )
-}
-
-export default function AppLayout({ children }: { children: ReactNode }) {
-  const { props } = usePage()
-  const user = props.user as { did: string } | undefined
-  const [drawerOpen, setDrawerOpen] = useState(false)
-
-  return (
-    <div className="flex min-h-full flex-col">
-      <header className="sticky top-0 z-40 h-14 border-b-2 border-black bg-background">
-        <div className="mx-auto flex h-full max-w-5xl items-center justify-between px-4">
-          <Logo size={26} />
-
-          <div className="hidden items-center gap-3 md:flex">
-            <ThemeToggle />
-            {user && <UserAvatar did={user.did} />}
-            <Form route="oauth.logout">
-              <Button type="submit" variant="outline" size="sm">
-                <LogOut />
-                Log out
-              </Button>
-            </Form>
-          </div>
-
-          <div className="flex items-center gap-2 md:hidden">
-            {user && <UserAvatar did={user.did} />}
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              aria-label="Open menu"
-              onClick={() => setDrawerOpen(true)}
-            >
-              <Menu />
-            </Button>
-          </div>
-        </div>
-      </header>
-
-      {drawerOpen && (
-        <>
-          <div
-            className="fixed inset-0 z-50 bg-black/40"
-            onClick={() => setDrawerOpen(false)}
-            aria-hidden
-          />
-          <aside className="fixed top-0 right-0 z-50 flex h-full w-72 flex-col border-l-2 border-black bg-background shadow-[-4px_0_0_0_black]">
-            <div className="flex items-center justify-between border-b-2 border-black px-4 py-3">
-              <Logo size={22} />
-              <Button
-                type="button"
-                variant="ghost"
-                size="icon"
-                aria-label="Close menu"
-                onClick={() => setDrawerOpen(false)}
-              >
-                <X />
-              </Button>
-            </div>
-
-            <div className="flex flex-1 flex-col gap-2 p-4">
-              {user && (
-                <div className="flex items-center gap-3 border-2 border-black bg-muted px-3 py-2">
-                  <UserAvatar did={user.did} />
-                  <span className="font-head text-sm font-bold truncate">{user.did}</span>
-                </div>
-              )}
-              <ThemeToggle />
-              <Form route="oauth.logout">
-                <Button type="submit" variant="outline" size="sm" className="w-full justify-start">
-                  <LogOut />
-                  Log out
-                </Button>
-              </Form>
-            </div>
-          </aside>
-        </>
-      )}
-
-      <main className="mx-auto w-full max-w-5xl flex-1 px-4 py-8">{children}</main>
-
-      <FlashToasts />
-    </div>
-  )
-}
diff --git a/inertia/layouts/auth.tsx b/inertia/layouts/auth.tsx
deleted file mode 100644
index 3482b8b..0000000
--- a/inertia/layouts/auth.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { type ReactNode } from 'react'
-import BaseLayout from '~/layouts/base'
-
-export default function AuthLayout({ children }: { children: ReactNode }) {
-  return (
-    <BaseLayout>
-      <main className="flex flex-1 items-center justify-center p-4 sm:p-6 lg:p-10">{children}</main>
-    </BaseLayout>
-  )
-}
diff --git a/inertia/layouts/base.tsx b/inertia/layouts/base.tsx
index ccc85f0..2523b84 100644
--- a/inertia/layouts/base.tsx
+++ b/inertia/layouts/base.tsx
@@ -23,6 +23,12 @@ export default function BaseLayout({ children }: { children: ReactNode }) {
             </span>
           </div>
 
+          <div className="hidden items-center gap-1 sm:flex">
+            <Button variant="ghost" size="sm" render={<Link route="stats" />}>
+              Stats
+            </Button>
+          </div>
+
           <div className="flex items-center gap-2">
             <UserSearchDialog />
             <ThemeToggle variant="outline" />
diff --git a/inertia/layouts/settings.tsx b/inertia/layouts/settings.tsx
deleted file mode 100644
index a64e246..0000000
--- a/inertia/layouts/settings.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import Page from '~/components/page'
-import { type ReactNode } from 'react'
-import NavLink, { type NavItem } from '~/components/nav_link'
-
-/**
- * The pages of the settings area, listed in the sidebar. Register a route
- * for each page and add it here, for example:
- *
- * `{ label: 'Profile', route: 'settings.profile', icon: User }`
- */
-const items: NavItem[] = []
-
-/**
- * Renders the settings heading, a sidebar of links and a card holding the
- * current page. Nest it under the app layout from each settings page:
- *
- * `Profile.layout = [AppLayout, SettingsLayout]`
- */
-export default function SettingsLayout({ children }: { children: ReactNode }) {
-  return (
-    <Page title="Settings" description="Manage your account settings and preferences.">
-      <div className="sidebar-layout">
-        <nav className="sidebar-layout__nav" aria-label="Settings">
-          {items.map(({ label, route, icon: Icon }) => (
-            <NavLink key={label} route={route} exact className="sidebar-layout__item">
-              {Icon && <Icon size={16} />}
-              {label}
-            </NavLink>
-          ))}
-        </nav>
-        <div className="sidebar-layout__content panel">{children}</div>
-      </div>
-    </Page>
-  )
-}
diff --git a/inertia/pages/auth/login.tsx b/inertia/pages/auth/login.tsx
index abfc4ef..71dbe9e 100644
--- a/inertia/pages/auth/login.tsx
+++ b/inertia/pages/auth/login.tsx
@@ -1,5 +1,5 @@
 import { useState, useRef } from 'react'
-import AuthLayout from '~/layouts/auth'
+import BaseLayout from '~/layouts/base'
 import { Form } from '@adonisjs/inertia/react'
 import { usePage } from '@inertiajs/react'
 import { Button } from '~/components/ui/button'
@@ -24,92 +24,97 @@ export default function Login() {
   }
 
   return (
-    <section aria-labelledby="auth-heading" className="w-full max-w-6xl py-4 sm:py-8 lg:py-12">
-      <div className="grid w-full items-center gap-12 lg:min-h-[36rem] lg:grid-cols-2 lg:gap-20">
-        <div className="motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4 fill-mode-backwards duration-500 flex max-w-lg flex-col justify-center">
-          <h1
-            id="auth-heading"
-            className="font-head text-3xl sm:text-4xl lg:text-5xl font-black mb-4 leading-tight tracking-tight text-foreground"
-          >
-            Open your Gunpla hangar.
-          </h1>
+    <main className="mx-auto w-full max-w-6xl px-4 sm:px-6 py-8 sm:py-12">
+      <section aria-labelledby="auth-heading">
+        <div className="grid w-full items-center gap-12 lg:min-h-[36rem] lg:grid-cols-2 lg:gap-20">
+          <div className="motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4 fill-mode-backwards duration-500 flex max-w-lg flex-col justify-center">
+            <h1
+              id="auth-heading"
+              className="font-head text-3xl sm:text-4xl lg:text-5xl font-black mb-4 leading-tight tracking-tight text-foreground"
+            >
+              Open your Gunpla hangar.
+            </h1>
 
-          <p className="font-sans mb-8 text-base sm:text-lg text-muted-foreground leading-relaxed">
-            Sign in to track your kits, log your build progress, and share your shelf with the
-            community.
-          </p>
+            <p className="font-sans mb-8 text-base sm:text-lg text-muted-foreground leading-relaxed">
+              Sign in to track your kits, log your build progress, and share your shelf with the
+              community.
+            </p>
 
-          <Form route="oauth.login" className="space-y-4">
-            {({ errors, processing }) => (
-              <>
-                <Field className="space-y-1.5">
-                  <FieldLabel
-                    htmlFor="handle-trigger"
-                    className="font-head text-sm font-bold text-foreground"
-                  >
-                    Bluesky Handle or DID
-                  </FieldLabel>
-                  <button
-                    id="handle-trigger"
-                    type="button"
-                    onClick={() => setDialogOpen(true)}
-                    aria-haspopup="dialog"
-                    className="flex h-12 w-full items-center gap-3 border-2 bg-card px-4 text-left shadow-sm transition-colors hover:bg-muted"
-                  >
-                    <Search className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
-                    <span
-                      className={
-                        selectedHandle
-                          ? 'font-sans text-base text-foreground'
-                          : 'font-sans text-base text-muted-foreground'
-                      }
+            <Form route="oauth.login" className="space-y-4">
+              {({ errors, processing }) => (
+                <>
+                  <Field className="space-y-1.5">
+                    <FieldLabel
+                      htmlFor="handle-trigger"
+                      className="font-head text-sm font-bold text-foreground"
                     >
-                      {selectedHandle || 'handle.bsky.social'}
-                    </span>
-                  </button>
-                  <input ref={hiddenInputRef} type="hidden" name="input" value={selectedHandle} />
-                  {errors.input && (
-                    <FieldError className="text-sm font-semibold text-destructive mt-1">
-                      {errors.input}
-                    </FieldError>
-                  )}
-                </Field>
-
-                <Button
-                  type="submit"
-                  disabled={processing}
-                  className="w-full justify-between h-13 px-6 text-base sm:text-lg font-head font-bold shadow-md hover:shadow-lg active:shadow-none bg-primary text-primary-foreground hover:bg-primary-hover border-2 border-border"
-                >
-                  <span>{processing ? 'Connecting…' : 'Continue with Bluesky'}</span>
-                  <ArrowRight className="ms-2 size-5 shrink-0" aria-hidden="true" />
-                </Button>
-              </>
-            )}
-          </Form>
+                      Bluesky Handle or DID
+                    </FieldLabel>
+                    <button
+                      id="handle-trigger"
+                      type="button"
+                      onClick={() => setDialogOpen(true)}
+                      aria-haspopup="dialog"
+                      className="flex h-12 w-full items-center gap-3 border-2 bg-card px-4 text-left shadow-sm transition-colors hover:bg-muted"
+                    >
+                      <Search
+                        className="size-4 shrink-0 text-muted-foreground"
+                        aria-hidden="true"
+                      />
+                      <span
+                        className={
+                          selectedHandle
+                            ? 'font-sans text-base text-foreground'
+                            : 'font-sans text-base text-muted-foreground'
+                        }
+                      >
+                        {selectedHandle || 'handle.bsky.social'}
+                      </span>
+                    </button>
+                    <input ref={hiddenInputRef} type="hidden" name="input" value={selectedHandle} />
+                    {errors.input && (
+                      <FieldError className="text-sm font-semibold text-destructive mt-1">
+                        {errors.input}
+                      </FieldError>
+                    )}
+                  </Field>
 
-          <UserSearchDialog
-            open={dialogOpen}
-            onOpenChange={setDialogOpen}
-            onSelect={handleSelect}
-          />
-        </div>
+                  <Button
+                    type="submit"
+                    disabled={processing}
+                    className="w-full justify-between h-13 px-6 text-base sm:text-lg font-head font-bold shadow-md hover:shadow-lg active:shadow-none bg-primary text-primary-foreground hover:bg-primary-hover border-2 border-border"
+                  >
+                    <span>{processing ? 'Connecting…' : 'Continue with Bluesky'}</span>
+                    <ArrowRight className="ms-2 size-5 shrink-0" aria-hidden="true" />
+                  </Button>
+                </>
+              )}
+            </Form>
 
-        <div className="motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4 fill-mode-backwards duration-500 [animation-delay:100ms] hidden items-center justify-center lg:flex">
-          <div className="w-full max-w-sm">
-            <KitPreview
-              name={kit?.name ?? 'RX-78-2 Gundam Ver. 2.0'}
-              grade={kit?.grade ?? 'RG'}
-              scale={kit?.scale ?? '1/144'}
-              manufacturer={kit?.manufacturer ?? 'Bandai'}
-              status={kit?.status ?? 'done'}
-              photoUrl={kit?.photoUrl}
-              photoCount={kit?.photoCount}
+            <UserSearchDialog
+              open={dialogOpen}
+              onOpenChange={setDialogOpen}
+              onSelect={handleSelect}
             />
           </div>
+
+          <div className="motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4 fill-mode-backwards duration-500 [animation-delay:100ms] hidden items-center justify-center lg:flex">
+            <div className="w-full max-w-sm">
+              <KitPreview
+                name={kit?.name ?? 'RX-78-2 Gundam Ver. 2.0'}
+                grade={kit?.grade ?? 'RG'}
+                scale={kit?.scale ?? '1/144'}
+                manufacturer={kit?.manufacturer ?? 'Bandai'}
+                status={kit?.status ?? 'done'}
+                photoUrl={kit?.photoUrl}
+                photoCount={kit?.photoCount}
+              />
+            </div>
+          </div>
         </div>
-      </div>
-    </section>
+      </section>
+    </main>
   )
 }
 
-Login.layout = [AuthLayout]
+Login.layout = [BaseLayout]
diff --git a/inertia/pages/kits/edit.tsx b/inertia/pages/kits/edit.tsx
index b670c55..f795bee 100644
--- a/inertia/pages/kits/edit.tsx
+++ b/inertia/pages/kits/edit.tsx
@@ -1,5 +1,5 @@
 import { useState, useMemo } from 'react'
-import AppLayout from '~/layouts/app'
+import BaseLayout from '~/layouts/base'
 import Page from '~/components/page'
 import { Form } from '@adonisjs/inertia/react'
 import { Button } from '~/components/ui/button'
@@ -63,84 +63,86 @@ export default function KitsEdit({ kit }: PageProps) {
   const [photos, setPhotos] = useState<PhotoEntry[]>(initialPhotos)
 
   return (
-    <Page title={`Edit ${kit.name}`} back={{ route: 'shelf', label: 'My shelf' }}>
-      <div className="grid gap-8 lg:grid-cols-[1fr_300px]">
-        <Form
-          className="lg:col-start-1 lg:row-start-1"
-          route="kits.update"
-          routeParams={[kit.rkey]}
-          method="put"
-          encType="multipart/form-data"
-        >
-          {({ errors, processing }) => (
-            <>
-              <input type="hidden" name="photosSubmitted" value="true" />
-              {photos
-                .filter(
-                  (p): p is Extract<PhotoEntry, { kind: 'existing' }> => p.kind === 'existing'
-                )
-                .map((p) => (
-                  <input key={p.id} type="hidden" name="existingPhotos[]" value={p.cid} />
-                ))}
-              <FieldGroup>
-                <KitFormFields values={values} onChange={handleChange} errors={errors} />
-                <KitPhotoField photos={photos} onChange={setPhotos} error={errors.photos} />
-                <div className="flex gap-2 pt-1">
-                  <Button type="submit" disabled={processing}>
-                    {processing ? 'Saving…' : 'Save changes'}
-                  </Button>
-                </div>
-              </FieldGroup>
-            </>
-          )}
-        </Form>
+    <main className="mx-auto w-full max-w-6xl px-4 sm:px-6 py-8">
+      <Page title={`Edit ${kit.name}`} back={{ route: 'shelf', label: 'My shelf' }}>
+        <div className="grid gap-8 lg:grid-cols-[1fr_300px]">
+          <Form
+            className="lg:col-start-1 lg:row-start-1"
+            route="kits.update"
+            routeParams={[kit.rkey]}
+            method="put"
+            encType="multipart/form-data"
+          >
+            {({ errors, processing }) => (
+              <>
+                <input type="hidden" name="photosSubmitted" value="true" />
+                {photos
+                  .filter(
+                    (p): p is Extract<PhotoEntry, { kind: 'existing' }> => p.kind === 'existing'
+                  )
+                  .map((p) => (
+                    <input key={p.id} type="hidden" name="existingPhotos[]" value={p.cid} />
+                  ))}
+                <FieldGroup>
+                  <KitFormFields values={values} onChange={handleChange} errors={errors} />
+                  <KitPhotoField photos={photos} onChange={setPhotos} error={errors.photos} />
+                  <div className="flex gap-2 pt-1">
+                    <Button type="submit" disabled={processing}>
+                      {processing ? 'Saving…' : 'Save changes'}
+                    </Button>
+                  </div>
+                </FieldGroup>
+              </>
+            )}
+          </Form>
 
-        <KitPreviewAside
-          {...values}
-          photoUrl={photos[0] ? getPhotoUrl(photos[0]) : null}
-          photoCount={photos.length}
-          description="Live preview of this kit on your shelf and in community feeds."
-          className="lg:col-start-2 lg:row-start-1 lg:row-span-2"
-        />
+          <KitPreviewAside
+            {...values}
+            photoUrl={photos[0] ? getPhotoUrl(photos[0]) : null}
+            photoCount={photos.length}
+            description="Live preview of this kit on your shelf and in community feeds."
+            className="lg:col-start-2 lg:row-start-1 lg:row-span-2"
+          />
 
-        <div className="border-2 border-black bg-destructive/10 p-4 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] lg:col-start-1 lg:row-start-2">
-          <h3 className="font-head text-sm font-bold text-destructive">Danger Zone</h3>
-          <p className="mt-1 mb-4 text-xs text-muted-foreground">
-            Deleting this kit permanently removes it from your shelf and deletes the record from
-            your ATProto repository.
-          </p>
-          {!confirmDelete ? (
-            <Button
-              type="button"
-              variant="destructive"
-              size="sm"
-              onClick={() => setConfirmDelete(true)}
-            >
-              Delete kit
-            </Button>
-          ) : (
-            <div className="flex items-center gap-2">
-              <Form route="kits.destroy" routeParams={[kit.rkey]} method="delete">
-                {({ processing }) => (
-                  <Button type="submit" variant="destructive" size="sm" disabled={processing}>
-                    {processing ? 'Deleting…' : 'Confirm delete'}
-                  </Button>
-                )}
-              </Form>
+          <div className="border-2 border-black bg-destructive/10 p-4 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] lg:col-start-1 lg:row-start-2">
+            <h3 className="font-head text-sm font-bold text-destructive">Danger Zone</h3>
+            <p className="mt-1 mb-4 text-xs text-muted-foreground">
+              Deleting this kit permanently removes it from your shelf and deletes the record from
+              your ATProto repository.
+            </p>
+            {!confirmDelete ? (
               <Button
                 type="button"
-                variant="outline"
+                variant="destructive"
                 size="sm"
-                onClick={() => setConfirmDelete(false)}
+                onClick={() => setConfirmDelete(true)}
               >
-                Cancel
+                Delete kit
               </Button>
-            </div>
-          )}
+            ) : (
+              <div className="flex items-center gap-2">
+                <Form route="kits.destroy" routeParams={[kit.rkey]} method="delete">
+                  {({ processing }) => (
+                    <Button type="submit" variant="destructive" size="sm" disabled={processing}>
+                      {processing ? 'Deleting…' : 'Confirm delete'}
+                    </Button>
+                  )}
+                </Form>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setConfirmDelete(false)}
+                >
+                  Cancel
+                </Button>
+              </div>
+            )}
+          </div>
         </div>
-      </div>
-    </Page>
+      </Page>
+    </main>
   )
 }
 
-KitsEdit.layout = [AppLayout]
+KitsEdit.layout = [BaseLayout]
diff --git a/inertia/pages/kits/new.tsx b/inertia/pages/kits/new.tsx
index b17971d..6cc7d77 100644
--- a/inertia/pages/kits/new.tsx
+++ b/inertia/pages/kits/new.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import AppLayout from '~/layouts/app'
+import BaseLayout from '~/layouts/base'
 import Page from '~/components/page'
 import { Form } from '@adonisjs/inertia/react'
 import { Button } from '~/components/ui/button'
@@ -23,30 +23,32 @@ export default function KitsNew() {
     setValues((prev) => ({ ...prev, [field]: value }))
 
   return (
-    <Page title="Add kit" back={{ route: 'shelf', label: 'My shelf' }}>
-      <div className="grid gap-8 lg:grid-cols-[1fr_300px]">
-        <Form route="kits.store" encType="multipart/form-data">
-          {({ errors, processing }) => (
-            <FieldGroup>
-              <KitFormFields values={values} onChange={handleChange} errors={errors} />
-              <KitPhotoField photos={photos} onChange={setPhotos} error={errors.photos} />
-              <div className="flex gap-2 pt-1">
-                <Button type="submit" disabled={processing}>
-                  {processing ? 'Adding…' : 'Add kit'}
-                </Button>
-              </div>
-            </FieldGroup>
-          )}
-        </Form>
+    <main className="mx-auto w-full max-w-6xl px-4 sm:px-6 py-8">
+      <Page title="Add kit" back={{ route: 'shelf', label: 'My shelf' }}>
+        <div className="grid gap-8 lg:grid-cols-[1fr_300px]">
+          <Form route="kits.store" encType="multipart/form-data">
+            {({ errors, processing }) => (
+              <FieldGroup>
+                <KitFormFields values={values} onChange={handleChange} errors={errors} />
+                <KitPhotoField photos={photos} onChange={setPhotos} error={errors.photos} />
+                <div className="flex gap-2 pt-1">
+                  <Button type="submit" disabled={processing}>
+                    {processing ? 'Adding…' : 'Add kit'}
+                  </Button>
+                </div>
+              </FieldGroup>
+            )}
+          </Form>
 
-        <KitPreviewAside
-          {...values}
-          photoUrl={photos[0] ? getPhotoUrl(photos[0]) : null}
-          photoCount={photos.length}
-        />
-      </div>
-    </Page>
+          <KitPreviewAside
+            {...values}
+            photoUrl={photos[0] ? getPhotoUrl(photos[0]) : null}
+            photoCount={photos.length}
+          />
+        </div>
+      </Page>
+    </main>
   )
 }
 
-KitsNew.layout = [AppLayout]
+KitsNew.layout = [BaseLayout]
-- 
2.54.0