feat: refactor katalogos

frontend/src/app/recollections/logos/LogosPage.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useCallback, useEffect, useMemo, useRef, useState, forwardRef } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams, useLocation, useNavigate } from 'react-router-dom'
 import { usePlatform } from '@/app/kosmos/KosmosContext'
 import { FluxIcon } from '@/lib/icons'
 import { useCreateBlockNote, getDefaultReactSlashMenuItems, SuggestionMenuController } from '@blocknote/react'
@@ -24,6 +24,7 @@ import {
 } from '../state/recollectionStore'
 import { logosSchema } from './logosSchema'
 import { LogosSidebar } from './LogosSidebar'
+import { KatalogosPage } from '../katalogos/KatalogosPage'
 import { toast } from 'sonner'
 
 /** Wraps BlockNoteView so refs go to a div, not the function component (avoids ref warning). */
@@ -63,6 +64,8 @@ const MAIN_PAGE_ID: LogosPageId = 'main'
 
 export function LogosPage() {
   const { recollectionId } = useParams<{ recollectionId: string }>()
+  const { pathname } = useLocation()
+  const navigate = useNavigate()
   const { recollections } = usePlatform()
   const { theme } = useTheme()
   const { setLogosSlot } = useRecollectionActions()
@@ -70,6 +73,21 @@ export function LogosPage() {
   const [tree, setTree] = useState<LogosPageMeta[]>([])
   const [activePageId, setActivePageId] = useState<LogosPageId | null>(null)
   const [reloadKey, setReloadKey] = useState(0)
+
+  const isKatalogosView = pathname.endsWith('/logos/katalogos')
+  const baseLogosPath = recollectionId ? `/recollections/${recollectionId}/logos` : ''
+
+  const handleSelectPage = useCallback(
+    (id: LogosPageId) => {
+      setActivePageId(id)
+      if (recollectionId) navigate(`${baseLogosPath}`)
+    },
+    [recollectionId, baseLogosPath, navigate]
+  )
+
+  const handleSelectKatalogos = useCallback(() => {
+    if (recollectionId) navigate(`${baseLogosPath}/katalogos`)
+  }, [recollectionId, baseLogosPath, navigate])
   const saveTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const [saveStatus, setSaveStatus] = useState<'saved' | 'unsaved' | 'saving'>('saved')
 
@@ -160,7 +178,10 @@ export function LogosPage() {
   }, [editor, recollectionId, activePageId, persistContent])
 
   useEffect(() => {
-    if (!editor || !recollectionId || !activePageId) return
+    if (isKatalogosView || !editor || !recollectionId || !activePageId) {
+      if (isKatalogosView) setLogosSlot(null)
+      return
+    }
     const slot = {
       saveStatus,
       onSave,
@@ -173,7 +194,7 @@ export function LogosPage() {
     }
     setLogosSlot(slot)
     return () => setLogosSlot(null)
-  }, [setLogosSlot, saveStatus, onSave, editor, recollectionId, activePageId])
+  }, [isKatalogosView, setLogosSlot, saveStatus, onSave, editor, recollectionId, activePageId])
 
   const activePage = tree.find((p) => p.id === activePageId)
 
@@ -214,17 +235,32 @@ export function LogosPage() {
     )
   }
 
+  const sidebarProps = {
+    recollectionId: recollectionId!,
+    tree,
+    onTreeChange: handleTreeChange,
+    activePageId,
+    onSelectPage: handleSelectPage,
+    onDeletePage: handleDeletePage,
+    isKatalogosView,
+    onSelectKatalogos: handleSelectKatalogos,
+  }
+
+  if (isKatalogosView) {
+    return (
+      <div className="flex h-full min-h-0 flex-1 flex-row bg-background">
+        <LogosSidebar {...sidebarProps} />
+        <div className="flex min-w-0 flex-1 flex-col overflow-auto">
+          <KatalogosPage />
+        </div>
+      </div>
+    )
+  }
+
   if (activePageId == null || !editor) {
     return (
       <div className="flex h-full min-h-0 flex-1 flex-col bg-background">
-        <LogosSidebar
-          recollectionId={recollectionId}
-          tree={tree}
-          onTreeChange={handleTreeChange}
-          activePageId={activePageId}
-          onSelectPage={setActivePageId}
-          onDeletePage={handleDeletePage}
-        />
+        <LogosSidebar {...sidebarProps} />
         <div className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
           {tree.length === 0 ? 'Loading…' : 'Select a page'}
         </div>
@@ -234,19 +270,9 @@ export function LogosPage() {
 
   return (
     <div className="flex h-full min-h-0 flex-1 flex-row bg-background">
-      <LogosSidebar
-        recollectionId={recollectionId}
-        tree={tree}
-        onTreeChange={handleTreeChange}
-        activePageId={activePageId}
-        onSelectPage={setActivePageId}
-        onDeletePage={handleDeletePage}
-      />
+      <LogosSidebar {...sidebarProps} />
       <div className="flex min-w-0 flex-1 flex-col overflow-auto">
         <div className="mx-auto w-full max-w-3xl p-4">
-          <h1 className="mb-4 truncate font-serif text-2xl font-semibold tracking-tight text-foreground">
-            {activePage?.title ?? recollection?.name ?? 'Untitled'}
-          </h1>
           <BlockNoteViewWrapper
             editor={editor as any}
             theme={theme}