From e09864bbedc4c2fcf4411e3483a49373f0131d7e Mon Sep 17 00:00:00 2001
From: "Zimin A.N." <zimin.an@nstart.space>
Date: Mon, 4 May 2026 01:57:52 +0300
Subject: [PATCH] fix(admin-ui): split /dictionaries into layout + index for
 nested route
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

После regen routeTree.gen.ts /dictionaries/$name стал child route /dictionaries.
dictionaries.tsx рендерил карточки без <Outlet/> — клик по карточке менял URL,
но child компонент негде было рендерить, поэтому видна та же страница со списком.

Разнёс по конвенции:
- dictionaries.tsx — layout с <Outlet/>
- dictionaries.index.tsx — карточки списка (matches /dictionaries)
- dictionaries.$name.tsx — без изменений (matches /dictionaries/{name})
---
 ordinis-admin-ui/src/routeTree.gen.ts         | 30 +++++++++++--
 .../src/routes/dictionaries.index.tsx         | 43 +++++++++++++++++++
 ordinis-admin-ui/src/routes/dictionaries.tsx  | 42 ++----------------
 3 files changed, 73 insertions(+), 42 deletions(-)
 create mode 100644 ordinis-admin-ui/src/routes/dictionaries.index.tsx

diff --git a/ordinis-admin-ui/src/routeTree.gen.ts b/ordinis-admin-ui/src/routeTree.gen.ts
index 820a3c6..d03b429 100644
--- a/ordinis-admin-ui/src/routeTree.gen.ts
+++ b/ordinis-admin-ui/src/routeTree.gen.ts
@@ -11,6 +11,7 @@
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as DictionariesRouteImport } from './routes/dictionaries'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as DictionariesIndexRouteImport } from './routes/dictionaries.index'
 import { Route as DictionariesNameRouteImport } from './routes/dictionaries.$name'
 
 const DictionariesRoute = DictionariesRouteImport.update({
@@ -23,6 +24,11 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const DictionariesIndexRoute = DictionariesIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => DictionariesRoute,
+} as any)
 const DictionariesNameRoute = DictionariesNameRouteImport.update({
   id: '/$name',
   path: '/$name',
@@ -33,24 +39,31 @@ export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/dictionaries': typeof DictionariesRouteWithChildren
   '/dictionaries/$name': typeof DictionariesNameRoute
+  '/dictionaries/': typeof DictionariesIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
-  '/dictionaries': typeof DictionariesRouteWithChildren
   '/dictionaries/$name': typeof DictionariesNameRoute
+  '/dictionaries': typeof DictionariesIndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/dictionaries': typeof DictionariesRouteWithChildren
   '/dictionaries/$name': typeof DictionariesNameRoute
+  '/dictionaries/': typeof DictionariesIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/dictionaries' | '/dictionaries/$name'
+  fullPaths: '/' | '/dictionaries' | '/dictionaries/$name' | '/dictionaries/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/dictionaries' | '/dictionaries/$name'
-  id: '__root__' | '/' | '/dictionaries' | '/dictionaries/$name'
+  to: '/' | '/dictionaries/$name' | '/dictionaries'
+  id:
+    | '__root__'
+    | '/'
+    | '/dictionaries'
+    | '/dictionaries/$name'
+    | '/dictionaries/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -74,6 +87,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/dictionaries/': {
+      id: '/dictionaries/'
+      path: '/'
+      fullPath: '/dictionaries/'
+      preLoaderRoute: typeof DictionariesIndexRouteImport
+      parentRoute: typeof DictionariesRoute
+    }
     '/dictionaries/$name': {
       id: '/dictionaries/$name'
       path: '/$name'
@@ -86,10 +106,12 @@ declare module '@tanstack/react-router' {
 
 interface DictionariesRouteChildren {
   DictionariesNameRoute: typeof DictionariesNameRoute
+  DictionariesIndexRoute: typeof DictionariesIndexRoute
 }
 
 const DictionariesRouteChildren: DictionariesRouteChildren = {
   DictionariesNameRoute: DictionariesNameRoute,
+  DictionariesIndexRoute: DictionariesIndexRoute,
 }
 
 const DictionariesRouteWithChildren = DictionariesRoute._addFileChildren(
diff --git a/ordinis-admin-ui/src/routes/dictionaries.index.tsx b/ordinis-admin-ui/src/routes/dictionaries.index.tsx
new file mode 100644
index 0000000..f61247e
--- /dev/null
+++ b/ordinis-admin-ui/src/routes/dictionaries.index.tsx
@@ -0,0 +1,43 @@
+import { createFileRoute, Link } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { useDictionaries } from '@/api/queries'
+
+export const Route = createFileRoute('/dictionaries/')({
+  component: DictionariesPage,
+})
+
+function DictionariesPage() {
+  const { t } = useTranslation()
+  const { data, isLoading, error } = useDictionaries()
+
+  if (isLoading) return <p className="text-zinc-500">{t('loading')}</p>
+  if (error) return <p className="text-red-600">{t('error.failed')}: {String(error)}</p>
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {(data ?? []).map((d) => (
+        <Link
+          key={d.id}
+          to="/dictionaries/$name"
+          params={{ name: d.name }}
+          className="border border-zinc-200 rounded-lg p-4 hover:border-brand-500 hover:shadow-sm transition bg-white"
+        >
+          <div className="flex items-center justify-between mb-1">
+            <h2 className="font-semibold text-zinc-900">{d.displayName ?? d.name}</h2>
+            <span className="text-xs px-2 py-0.5 rounded bg-brand-50 text-brand-700">
+              {d.scope}
+            </span>
+          </div>
+          <p className="text-sm text-zinc-600 line-clamp-2 mb-2">{d.description}</p>
+          <div className="flex gap-2 text-xs text-zinc-400">
+            <span>v{d.schemaVersion}</span>
+            <span>·</span>
+            <span>{d.bundle}</span>
+            <span>·</span>
+            <span>{d.supportedLocales.join(', ')}</span>
+          </div>
+        </Link>
+      ))}
+    </div>
+  )
+}
diff --git a/ordinis-admin-ui/src/routes/dictionaries.tsx b/ordinis-admin-ui/src/routes/dictionaries.tsx
index 75b1397..076b369 100644
--- a/ordinis-admin-ui/src/routes/dictionaries.tsx
+++ b/ordinis-admin-ui/src/routes/dictionaries.tsx
@@ -1,43 +1,9 @@
-import { createFileRoute, Link } from '@tanstack/react-router'
-import { useTranslation } from 'react-i18next'
-import { useDictionaries } from '@/api/queries'
+import { createFileRoute, Outlet } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/dictionaries')({
-  component: DictionariesPage,
+  component: DictionariesLayout,
 })
 
-function DictionariesPage() {
-  const { t } = useTranslation()
-  const { data, isLoading, error } = useDictionaries()
-
-  if (isLoading) return <p className="text-zinc-500">{t('loading')}</p>
-  if (error) return <p className="text-red-600">{t('error.failed')}: {String(error)}</p>
-
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      {(data ?? []).map((d) => (
-        <Link
-          key={d.id}
-          to="/dictionaries/$name"
-          params={{ name: d.name }}
-          className="border border-zinc-200 rounded-lg p-4 hover:border-brand-500 hover:shadow-sm transition bg-white"
-        >
-          <div className="flex items-center justify-between mb-1">
-            <h2 className="font-semibold text-zinc-900">{d.displayName ?? d.name}</h2>
-            <span className="text-xs px-2 py-0.5 rounded bg-brand-50 text-brand-700">
-              {d.scope}
-            </span>
-          </div>
-          <p className="text-sm text-zinc-600 line-clamp-2 mb-2">{d.description}</p>
-          <div className="flex gap-2 text-xs text-zinc-400">
-            <span>v{d.schemaVersion}</span>
-            <span>·</span>
-            <span>{d.bundle}</span>
-            <span>·</span>
-            <span>{d.supportedLocales.join(', ')}</span>
-          </div>
-        </Link>
-      ))}
-    </div>
-  )
+function DictionariesLayout() {
+  return <Outlet />
 }