feat: refactor katalogos

2026-03-16 21:29:09 +01:00
parent febca67c9b
commit 5bce586db6
7 changed files with 257 additions and 423 deletions
--- a/frontend/src/app/recollections/layout/RecollectionActionsContext.tsx
+++ b/frontend/src/app/recollections/layout/RecollectionActionsContext.tsx
@@ -120,7 +120,7 @@ export function RecollectionActionsProvider({ children }: { children: React.Reac
  pathnameRef.current = pathname

  const isFluxActive = pathname.endsWith('/flux')
-  const isLogosActive = pathname.endsWith('/logos') || /\/recollections\/[^/]+\/?$/.test(pathname)
+  const isLogosActive = pathname.includes('/logos') || /\/recollections\/[^/]+\/?$/.test(pathname)
  const activeSlot = isFluxActive ? flux : isLogosActive ? logos : null

  const setFluxSlot = useCallback((slot: FluxSlot | null) => {
@@ -179,7 +179,7 @@ export function RecollectionActionsProvider({ children }: { children: React.Reac
          )
          const currentPath = pathnameRef.current
          const fluxActive = currentPath.endsWith('/flux')
-          const logosActive = currentPath.endsWith('/logos') || /\/recollections\/[^/]+\/?$/.test(currentPath)
+          const logosActive = currentPath.includes('/logos') || /\/recollections\/[^/]+\/?$/.test(currentPath)
          if (written.graph && fluxActive && fluxRef.current?.onRefreshFromStore) {
            fluxRef.current.onRefreshFromStore(written.graph)
          }
--- a/frontend/src/app/recollections/layout/RecollectionViewSwitcher.tsx
+++ b/frontend/src/app/recollections/layout/RecollectionViewSwitcher.tsx
@@ -5,7 +5,7 @@

 import React, { useCallback, useEffect } from 'react'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
-import { FluxIcon, LogosIcon, RecollectionsIcon } from '@/lib/icons'
+import { FluxIcon, LogosIcon } from '@/lib/icons'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'

 function shortcutLabel() {
@@ -19,17 +19,13 @@ export function RecollectionViewSwitcher() {
  const navigate = useNavigate()
  const base = recollectionId ? `/recollections/${recollectionId}` : ''

-  type Mode = 'logos' | 'katalogos' | 'flux'
-  const mode: Mode = pathname.endsWith('/flux')
-    ? 'flux'
-    : pathname.endsWith('/katalogos')
-      ? 'katalogos'
-      : 'logos'
+  type Mode = 'logos' | 'flux'
+  const mode: Mode = pathname.endsWith('/flux') ? 'flux' : 'logos'

  const goRelative = useCallback(
    (delta: 1 | -1) => {
      if (!base) return
-      const order: Mode[] = ['logos', 'katalogos', 'flux']
+      const order: Mode[] = ['logos', 'flux']
      const currentIndex = order.indexOf(mode)
      const nextMode = order[(currentIndex + (delta === 1 ? 1 : order.length - 1)) % order.length]
      navigate(`${base}/${nextMode}`)
@@ -61,11 +57,7 @@ export function RecollectionViewSwitcher() {

  const shortcut = shortcutLabel()
  const tooltipText =
-    mode === 'logos'
-      ? `Logos · Next: Katalogos (${shortcut})`
-      : mode === 'katalogos'
-        ? `Katalogos · Next: Flux (${shortcut})`
-        : `Flux · Next: Logos (${shortcut})`
+    mode === 'logos' ? `Logos · Next: Flux (${shortcut})` : `Flux · Next: Logos (${shortcut})`

  return (
    <div className="flex shrink-0 items-center gap-2">
@@ -75,34 +67,20 @@ export function RecollectionViewSwitcher() {
            <button
              type="button"
              onClick={toggle}
-              aria-label={
-                mode === 'logos'
-                  ? 'Switch to Katalogos'
-                  : mode === 'katalogos'
-                    ? 'Switch to Flux'
-                    : 'Switch to Logos'
-              }
+              aria-label={mode === 'logos' ? 'Switch to Flux' : 'Switch to Logos'}
              className="h-7 w-7 shrink-0 overflow-hidden rounded-full border border-border/60 bg-background shadow-md transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            >
              <div className="h-full w-full overflow-hidden">
                <div
                  className="flex w-full flex-col transition-transform duration-200 ease-out"
                  style={{
-                    height: '300%',
-                    transform:
-                      mode === 'logos'
-                        ? 'translateY(0)'
-                        : mode === 'katalogos'
-                          ? 'translateY(-33.3333%)'
-                          : 'translateY(-66.6667%)',
+                    height: '200%',
+                    transform: mode === 'logos' ? 'translateY(0)' : 'translateY(-50%)',
                  }}
                >
                  <div className="flex h-9 w-full items-center justify-center">
                    <LogosIcon className="size-3.5 shrink-0 text-muted-foreground" />
                  </div>
-                  <div className="flex h-9 w-full items-center justify-center">
-                    <RecollectionsIcon className="size-3.5 shrink-0 text-muted-foreground" />
-                  </div>
                  <div className="flex h-9 w-full items-center justify-center">
                    <FluxIcon className="size-3.5 shrink-0 text-muted-foreground" />
                  </div>
@@ -117,20 +95,12 @@ export function RecollectionViewSwitcher() {
        <div
          className="flex w-full flex-col transition-transform duration-200 ease-out"
          style={{
-            transform:
-              mode === 'logos'
-                ? 'translateY(0)'
-                : mode === 'katalogos'
-                  ? 'translateY(-33.3333%)'
-                  : 'translateY(-66.6667%)',
+            transform: mode === 'logos' ? 'translateY(0)' : 'translateY(-50%)',
          }}
        >
          <span className="flex h-9 flex-shrink-0 items-center text-sm font-medium text-foreground">
            Logos
          </span>
-          <span className="flex h-9 flex-shrink-0 items-center text-sm font-medium text-foreground">
-            Katalogos
-          </span>
          <span className="flex h-9 flex-shrink-0 items-center text-sm font-medium text-foreground">
            Flux
          </span>
--- a/frontend/src/app/recollections/logos/LogosPage.tsx
+++ b/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}
--- a/frontend/src/app/recollections/logos/LogosSidebar.tsx
+++ b/frontend/src/app/recollections/logos/LogosSidebar.tsx
@@ -1,8 +1,8 @@
 /**
- * Logos sidebar: one-level page/subpage hierarchy. Create, rename, delete, reorder.
+ * Logos sidebar: single-level pages under Logos (no subpages). Sidebar-07 style nav with Logos + Katalogos sections.
 */

-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import {
  DropdownMenu,
  DropdownMenuContent,
@@ -19,8 +19,15 @@ import {
  DialogTitle,
 } from '@/components/ui/dialog'
 import {
-  ChevronDown,
-  ChevronRight,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuItem,
+  sidebarMenuButtonVariants,
+} from '@/components/ui/sidebar'
+import {
  FileText,
  MoreHorizontal,
  Pencil,
@@ -29,8 +36,8 @@ import {
  ArrowUp,
  ArrowDown,
 } from 'lucide-react'
-import type { LogosPageId, LogosPageMeta } from '../state/recollectionStore'
 import { cn } from '@/lib/utils'
+import type { LogosPageId, LogosPageMeta } from '../state/recollectionStore'

 const DEFAULT_PAGE_TITLE = 'Untitled'

@@ -49,6 +56,10 @@ export type LogosSidebarProps = {
  activePageId: LogosPageId | null
  onSelectPage: (id: LogosPageId) => void
  onDeletePage?: (pageId: LogosPageId) => void
+  /** When true, the Katalogos item is selected. */
+  isKatalogosView?: boolean
+  /** Called when user selects the Katalogos item (parent should navigate to .../logos/katalogos). */
+  onSelectKatalogos?: () => void
 }

 export function LogosSidebar({
@@ -58,40 +69,15 @@ export function LogosSidebar({
  activePageId,
  onSelectPage,
  onDeletePage,
+  isKatalogosView = false,
+  onSelectKatalogos,
 }: LogosSidebarProps) {
-  const [expandedPages, setExpandedPages] = useState<Set<LogosPageId>>(new Set())
-  const expandedInitializedRef = useRef(false)
-  const [editingId, setEditingId] = useState<LogosPageId | null>(null)
-  const [editTitle, setEditTitle] = useState('')
+  const [renameTarget, setRenameTarget] = useState<LogosPageMeta | null>(null)
+  const [renameTitle, setRenameTitle] = useState('')
  const [deleteTarget, setDeleteTarget] = useState<LogosPageMeta | null>(null)

  const pages = tree.filter((p) => p.parentId === null).sort(sortByPosition)

-  // Default: expand parent pages that have subpages so children are visible on first load.
-  useEffect(() => {
-    if (tree.length === 0 || expandedInitializedRef.current) return
-    expandedInitializedRef.current = true
-    const parentIdsWithChildren = tree
-      .filter((p) => p.parentId === null && tree.some((s) => s.parentId === p.id))
-      .map((p) => p.id)
-    if (parentIdsWithChildren.length > 0) {
-      setExpandedPages((prev) => {
-        const next = new Set(prev)
-        parentIdsWithChildren.forEach((id) => next.add(id))
-        return next
-      })
-    }
-  }, [tree])
-
-  const toggleExpanded = useCallback((id: LogosPageId) => {
-    setExpandedPages((prev) => {
-      const next = new Set(prev)
-      if (next.has(id)) next.delete(id)
-      else next.add(id)
-      return next
-    })
-  }, [])
-
  const updatePage = useCallback(
    (id: LogosPageId, patch: Partial<Pick<LogosPageMeta, 'title' | 'position'>>) => {
      const next = tree.map((p) => (p.id === id ? { ...p, ...patch } : p))
@@ -109,42 +95,23 @@ export function LogosSidebar({
      position: maxPos + 1,
    }
    onTreeChange([...tree, newPage])
-    setEditingId(newPage.id)
-    setEditTitle(newPage.title)
+    setRenameTarget(newPage)
+    setRenameTitle(newPage.title)
    onSelectPage(newPage.id)
  }, [tree, pages, onTreeChange, onSelectPage])

-  const addSubpage = useCallback(
-    (parentId: LogosPageId) => {
-      const siblings = tree.filter((p) => p.parentId === parentId).sort(sortByPosition)
-      const maxPos = siblings.length === 0 ? 0 : Math.max(...siblings.map((p) => p.position)) + 1
-      const newPage: LogosPageMeta = {
-        id: generatePageId(),
-        title: DEFAULT_PAGE_TITLE,
-        parentId,
-        position: maxPos,
-      }
-      onTreeChange([...tree, newPage])
-      setExpandedPages((prev) => new Set(prev).add(parentId))
-      setEditingId(newPage.id)
-      setEditTitle(newPage.title)
-      onSelectPage(newPage.id)
-    },
-    [tree, onTreeChange, onSelectPage]
-  )
-
  const startRename = useCallback((page: LogosPageMeta) => {
-    setEditingId(page.id)
-    setEditTitle(page.title)
+    setRenameTarget(page)
+    setRenameTitle(page.title)
  }, [])

  const commitRename = useCallback(() => {
-    if (editingId && editTitle.trim()) {
-      updatePage(editingId, { title: editTitle.trim() })
+    if (renameTarget && renameTitle.trim()) {
+      updatePage(renameTarget.id, { title: renameTitle.trim() })
    }
-    setEditingId(null)
-    setEditTitle('')
-  }, [editingId, editTitle, updatePage])
+    setRenameTarget(null)
+    setRenameTitle('')
+  }, [renameTarget, renameTitle, updatePage])

  const movePage = useCallback(
    (id: LogosPageId, delta: number) => {
@@ -171,11 +138,10 @@ export function LogosSidebar({

  const removePage = useCallback(
    (page: LogosPageMeta) => {
-      const toRemove = [page.id, ...tree.filter((p) => p.parentId === page.id).map((p) => p.id)]
-      onTreeChange(tree.filter((p) => !toRemove.includes(p.id)))
-      toRemove.forEach((id) => onDeletePage?.(id))
-      if (activePageId && toRemove.includes(activePageId)) {
-        const remaining = tree.filter((p) => !toRemove.includes(p.id)).sort(sortByPosition)
+      onTreeChange(tree.filter((p) => p.id !== page.id))
+      onDeletePage?.(page.id)
+      if (activePageId === page.id) {
+        const remaining = tree.filter((p) => p.id !== page.id).sort(sortByPosition)
        const first = remaining[0]
        if (first) onSelectPage(first.id)
      }
@@ -184,125 +150,185 @@ export function LogosSidebar({
    [tree, activePageId, onTreeChange, onDeletePage, onSelectPage]
  )

-  const subpages = (parentId: LogosPageId) =>
-    tree.filter((p) => p.parentId === parentId).sort(sortByPosition)
-
-  const isPage = (p: LogosPageMeta) => p.parentId === null
+  const renderPageActions = useCallback(
+    (page: LogosPageMeta, options: { canMoveUp: boolean; canMoveDown: boolean }) => {
+      const { canMoveUp, canMoveDown } = options
+      return (
+        <span
+          data-sidebar="menu-action"
+          className={cn(
+            'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+            'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0'
+          )}
+        >
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6 shrink-0"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <MoreHorizontal className="size-3.5" />
+                <span className="sr-only">Actions</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-48" onClick={(e) => e.stopPropagation()}>
+              <DropdownMenuItem
+                onClick={() => {
+                  startRename(page)
+                  onSelectPage(page.id)
+                }}
+              >
+                <Pencil className="mr-2 size-3.5" />
+                Rename
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={() => movePage(page.id, -1)} disabled={!canMoveUp}>
+                <ArrowUp className="mr-2 size-3.5" />
+                Move up
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => movePage(page.id, 1)} disabled={!canMoveDown}>
+                <ArrowDown className="mr-2 size-3.5" />
+                Move down
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={() => setDeleteTarget(page)} className="text-destructive focus:text-destructive">
+                <Trash2 className="mr-2 size-3.5" />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </span>
+      )
+    },
+    [startRename, onSelectPage, movePage]
+  )

  return (
-    <div className="flex h-full w-64 shrink-0 flex-col border-r border-border bg-muted/30">
-      <div className="flex shrink-0 items-center justify-between border-b border-border/60 px-2 py-2">
-        <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+    <div className="flex h-full w-[var(--sidebar-width)] shrink-0 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground" style={{ '--sidebar-width': '16rem' } as React.CSSProperties}>
+      <div className="flex shrink-0 items-center justify-between border-b border-sidebar-border px-2 py-2">
+        <span className="text-xs font-medium text-sidebar-foreground/70">
          Pages
        </span>
        <Button
          type="button"
          variant="ghost"
          size="sm"
-          className="h-7 gap-1 px-2 text-xs"
+          className="h-7 gap-1 px-2 text-xs text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
          onClick={addPage}
        >
          <Plus className="size-3.5" />
          New page
        </Button>
      </div>
-      <div className="flex-1 overflow-y-auto py-1">
-        {pages.length === 0 ? (
-          <div className="px-3 py-4 text-center text-xs text-muted-foreground">
-            No pages yet.
-            <br />
-            <Button
-              type="button"
-              variant="link"
-              className="h-auto p-0 text-xs"
-              onClick={addPage}
-            >
-              Create your first page
+      <SidebarContent className="flex-1 overflow-y-auto border-0 bg-transparent">
+        <SidebarGroup>
+          <SidebarGroupLabel>Prologos</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {pages.length === 0 ? (
+                <div className="px-2 py-2 text-center text-xs text-sidebar-foreground/70">
+                  <Button
+                    type="button"
+                    variant="link"
+                    className="h-auto p-0 text-xs text-sidebar-foreground/70 hover:text-sidebar-foreground"
+                    onClick={addPage}
+                  >
+                    Create your first page
+                  </Button>
+                </div>
+              ) : (
+                pages.map((page) => {
+                  const canMoveUp = pages.indexOf(page) > 0
+                  const canMoveDown = pages.indexOf(page) < pages.length - 1
+                  const isActive = activePageId === page.id
+                  return (
+                    <SidebarMenuItem key={page.id}>
+                      <button
+                        type="button"
+                        data-active={isActive}
+                        className={cn(sidebarMenuButtonVariants({ size: 'default' }), 'w-full')}
+                        onClick={() => onSelectPage(page.id)}
+                      >
+                        <FileText className="size-4 shrink-0 text-sidebar-foreground/70" />
+                        <span className="truncate">{page.title || DEFAULT_PAGE_TITLE}</span>
+                      </button>
+                      {renderPageActions(page, { canMoveUp, canMoveDown })}
+                    </SidebarMenuItem>
+                  )
+                })
+              )}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+        <SidebarGroup>
+          <SidebarGroupLabel>Katalogos</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <button
+                  type="button"
+                  data-active={isKatalogosView}
+                  className={cn(sidebarMenuButtonVariants({ size: 'default' }), 'w-full')}
+                  onClick={onSelectKatalogos}
+                >
+                  <FileText className="size-4 shrink-0 text-sidebar-foreground/70" />
+                  <span className="truncate">Katalogos</span>
+                </button>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <Dialog
+        open={!!renameTarget}
+        onOpenChange={(open) => {
+          if (!open) {
+            setRenameTarget(null)
+            setRenameTitle('')
+          }
+        }}
+      >
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Rename page</DialogTitle>
+          </DialogHeader>
+          <input
+            type="text"
+            className="w-full rounded border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+            value={renameTitle}
+            onChange={(e) => setRenameTitle(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') commitRename()
+              if (e.key === 'Escape') {
+                setRenameTarget(null)
+                setRenameTitle('')
+              }
+            }}
+            aria-label="Page title"
+          />
+          <DialogFooter className="gap-2 sm:gap-0">
+            <Button type="button" variant="outline" onClick={() => { setRenameTarget(null); setRenameTitle('') }}>
+              Cancel
            </Button>
-          </div>
-        ) : (
-          <ul className="flex flex-col gap-0.5 px-1">
-            {pages.map((page) => {
-              const subs = subpages(page.id)
-              const expanded = expandedPages.has(page.id)
-              const isActive = activePageId === page.id
-              return (
-                <li key={page.id} className="flex flex-col gap-0.5">
-                  <PageRow
-                    page={page}
-                    isSubpage={false}
-                    isActive={isActive}
-                    isEditing={editingId === page.id}
-                    editTitle={editTitle}
-                    onEditTitleChange={setEditTitle}
-                    onCommitRename={commitRename}
-                    onStartRename={() => startRename(page)}
-                    onSelect={() => onSelectPage(page.id)}
-                    onExpandToggle={() => toggleExpanded(page.id)}
-                    expanded={expanded}
-                    hasSubpages={subs.length > 0}
-                    onAddSubpage={() => addSubpage(page.id)}
-                    onMoveUp={() => movePage(page.id, -1)}
-                    onMoveDown={() => movePage(page.id, 1)}
-                    onDelete={() => setDeleteTarget(page)}
-                    canMoveUp={pages.indexOf(page) > 0}
-                    canMoveDown={pages.indexOf(page) < pages.length - 1}
-                  />
-                  {expanded && (
-                    <ul className="ml-3 flex flex-col gap-0.5 border-l border-border/60 pl-2">
-                      {subs.map((sub, i) => {
-                        const subActive = activePageId === sub.id
-                        const subEditing = editingId === sub.id
-                        return (
-                          <li key={sub.id}>
-                            <PageRow
-                              page={sub}
-                              isSubpage
-                              isActive={subActive}
-                              isEditing={subEditing}
-                              editTitle={editTitle}
-                              onEditTitleChange={setEditTitle}
-                              onCommitRename={commitRename}
-                              onStartRename={() => startRename(sub)}
-                              onSelect={() => onSelectPage(sub.id)}
-                              onAddSubpage={undefined}
-                              onMoveUp={() => movePage(sub.id, -1)}
-                              onMoveDown={() => movePage(sub.id, 1)}
-                              onDelete={() => setDeleteTarget(sub)}
-                              canMoveUp={i > 0}
-                              canMoveDown={i < subs.length - 1}
-                            />
-                          </li>
-                        )
-                      })}
-                    </ul>
-                  )}
-                </li>
-              )
-            })}
-          </ul>
-        )}
-      </div>
+            <Button type="button" onClick={commitRename}>
+              Save
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>

      <Dialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
-            <DialogTitle>
-              {deleteTarget && isPage(deleteTarget)
-                ? 'Delete page and subpages?'
-                : 'Delete subpage?'}
-            </DialogTitle>
+            <DialogTitle>Delete page?</DialogTitle>
          </DialogHeader>
          {deleteTarget && (
            <p className="text-sm text-muted-foreground">
-              {isPage(deleteTarget) && subpages(deleteTarget.id).length > 0 ? (
-                <>
-                  &quot;{deleteTarget.title}&quot; and its {subpages(deleteTarget.id).length}{' '}
-                  subpage(s) will be permanently removed.
-                </>
-              ) : (
-                <> &quot;{deleteTarget.title}&quot; will be permanently removed.</>
-              )}
+              &quot;{deleteTarget.title}&quot; will be permanently removed.
            </p>
          )}
          <DialogFooter className="gap-2 sm:gap-0">
@@ -322,160 +348,3 @@ export function LogosSidebar({
    </div>
  )
 }
-
-type PageRowProps = {
-  page: LogosPageMeta
-  isSubpage: boolean
-  isActive: boolean
-  isEditing: boolean
-  editTitle: string
-  onEditTitleChange: (v: string) => void
-  onCommitRename: () => void
-  onStartRename: () => void
-  onSelect: () => void
-  onExpandToggle?: () => void
-  expanded?: boolean
-  hasSubpages?: boolean
-  onAddSubpage?: () => void
-  onMoveUp: () => void
-  onMoveDown: () => void
-  onDelete: () => void
-  canMoveUp: boolean
-  canMoveDown: boolean
-}
-
-function PageRow({
-  page,
-  isSubpage,
-  isActive,
-  isEditing,
-  editTitle,
-  onEditTitleChange,
-  onCommitRename,
-  onStartRename,
-  onSelect,
-  onExpandToggle,
-  expanded,
-  hasSubpages,
-  onAddSubpage,
-  onMoveUp,
-  onMoveDown,
-  onDelete,
-  canMoveUp,
-  canMoveDown,
-}: PageRowProps) {
-  const isParentRow = onExpandToggle != null
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') onCommitRename()
-    if (e.key === 'Escape') {
-      onEditTitleChange(page.title)
-      onCommitRename()
-    }
-  }
-
-  return (
-    <div
-      className={cn(
-        'group flex w-full items-center gap-0.5 rounded-md pr-1',
-        isActive && 'bg-accent text-accent-foreground',
-        !isActive && 'hover:bg-accent/80'
-      )}
-    >
-      {isParentRow ? (
-        // VSCode-like "twisty gutter" so labels align nicely.
-        <span className="flex h-8 w-4 shrink-0 items-center justify-center">
-          {hasSubpages ? (
-            <button
-              type="button"
-              className="flex size-4 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1"
-              onClick={(e) => {
-                e.stopPropagation()
-                e.preventDefault()
-                onExpandToggle?.()
-              }}
-              aria-expanded={expanded}
-              aria-label={expanded ? 'Collapse subpages' : 'Expand subpages'}
-            >
-              {expanded ? (
-                <ChevronDown className="size-3.5 shrink-0" />
-              ) : (
-                <ChevronRight className="size-3.5 shrink-0" />
-              )}
-            </button>
-          ) : (
-            <span className="inline-block size-4" aria-hidden />
-          )}
-        </span>
-      ) : isSubpage ? (
-        <span className="flex h-8 w-4 shrink-0 items-center justify-center">
-          <span className="inline-block size-4" aria-hidden />
-        </span>
-      ) : null}
-      {isSubpage && <span className="w-2 shrink-0" />}
-      {isEditing ? (
-        <input
-          type="text"
-          className="h-7 min-w-0 flex-1 rounded border border-input bg-background px-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
-          value={editTitle}
-          onChange={(e) => onEditTitleChange(e.target.value)}
-          onBlur={onCommitRename}
-          onKeyDown={handleKeyDown}
-          autoFocus
-          aria-label="Page title"
-        />
-      ) : (
-        <button
-          type="button"
-          className="flex min-w-0 flex-1 items-center gap-1.5 rounded px-1.5 py-1.5 text-left text-sm"
-          onClick={onSelect}
-        >
-          <FileText className="size-3.5 shrink-0 text-muted-foreground" />
-          <span className="truncate">{page.title || DEFAULT_PAGE_TITLE}</span>
-        </button>
-      )}
-      {!isEditing && (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              className="h-6 w-6 shrink-0 opacity-0 group-hover:opacity-100"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <MoreHorizontal className="size-3.5" />
-              <span className="sr-only">Actions</span>
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-48" onClick={(e) => e.stopPropagation()}>
-            <DropdownMenuItem onClick={() => { onStartRename(); onSelect(); }}>
-              <Pencil className="mr-2 size-3.5" />
-              Rename
-            </DropdownMenuItem>
-            {onAddSubpage != null && (
-              <DropdownMenuItem onClick={onAddSubpage}>
-                <Plus className="mr-2 size-3.5" />
-                New subpage
-              </DropdownMenuItem>
-            )}
-            <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={onMoveUp} disabled={!canMoveUp}>
-              <ArrowUp className="mr-2 size-3.5" />
-              Move up
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={onMoveDown} disabled={!canMoveDown}>
-              <ArrowDown className="mr-2 size-3.5" />
-              Move down
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={onDelete} className="text-destructive focus:text-destructive">
-              <Trash2 className="mr-2 size-3.5" />
-              Delete
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )}
-    </div>
-  )
-}
--- a/frontend/src/components/ui/sidebar.tsx
+++ b/frontend/src/components/ui/sidebar.tsx
@@ -758,6 +758,7 @@ export {
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
+  sidebarMenuButtonVariants,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -10,7 +10,6 @@ import { RecollectionsPage } from './app/recollections/RecollectionsPage'
 import { RecollectionLayout } from './app/recollections/RecollectionLayout'
 import { LogosPage } from './app/recollections/logos/LogosPage'
 import { FluxRoute } from './app/recollections/flux/FluxRoute'
-import { KatalogosPage } from './app/recollections/katalogos/KatalogosPage'
 import './lib/prismSetup'
 import 'prismjs/themes/prism.css'
 import './styles.css'
@@ -30,7 +29,7 @@ createRoot(document.getElementById('root')!).render(
            <Route path="recollections/:recollectionId" element={<RecollectionLayout />}>
              <Route index element={<Navigate to="logos" replace />} />
              <Route path="logos" element={<LogosPage />} />
-              <Route path="katalogos" element={<KatalogosPage />} />
+              <Route path="logos/katalogos" element={<LogosPage />} />
              <Route path="flux" element={<FluxRoute />} />
            </Route>
          </Route>
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -373,18 +373,23 @@ pre {
 .token.nunjucks-var {
    color: #7c3aed;
 }
+
 .token.nunjucks-tag {
    color: #c2410c;
 }
+
 .token.nunjucks-comment {
    color: #0d9488;
 }
+
 .dark .token.nunjucks-var {
    color: #a78bfa;
 }
+
 .dark .token.nunjucks-tag {
    color: #fb923c;
 }
+
 .dark .token.nunjucks-comment {
    color: #2dd4bf;
 }
@@ -394,40 +399,4 @@ pre {
 .code-editor .token.entity,
 .code-editor .token.url {
    background: none;
-}
-
-/* BlockNote (Logos editor): font sizes to match app typography (Tailwind text-sm–text-lg scale) */
-.logos-blocknote .bn-editor {
-    font-size: 0.875rem; /* text-sm */
-    line-height: 1.5;
-}
-.logos-blocknote .bn-inline-content {
-    font-size: inherit;
-    line-height: inherit;
-}
-.logos-blocknote [data-content-type="heading"][data-level="1"] .bn-inline-content {
-    font-size: 1.25rem; /* text-xl */
-    font-weight: 600;
-    line-height: 1.3;
-}
-.logos-blocknote [data-content-type="heading"][data-level="2"] .bn-inline-content {
-    font-size: 1.125rem; /* text-lg */
-    font-weight: 600;
-    line-height: 1.35;
-}
-.logos-blocknote [data-content-type="heading"][data-level="3"] .bn-inline-content {
-    font-size: 1rem; /* text-base */
-    font-weight: 600;
-    line-height: 1.4;
-}
-.logos-blocknote [data-content-type="paragraph"] .bn-inline-content {
-    font-size: 0.875rem;
-}
-.logos-blocknote [data-content-type="bulletListItem"] .bn-inline-content,
-.logos-blocknote [data-content-type="numberedListItem"] .bn-inline-content {
-    font-size: 0.875rem;
-}
-.logos-blocknote [data-content-type="codeBlock"] .bn-inline-content,
-.logos-blocknote [data-content-type="code"] .bn-inline-content {
-    font-size: 0.8125rem; /* slightly smaller for code */
-}
+}