From 166c7b0b7f63901201a300fecc1ea21e74dbf2c4 Mon Sep 17 00:00:00 2001
From: dtoro <d.toro.v@pm.me>
Date: Fri, 20 Mar 2026 10:20:51 +0100
Subject: [PATCH] feat: improve sidebar

---
 .../layout/RecollectionSidebar.tsx            |   2 +-
 .../app/recollections/layout/TreeBrowser.tsx  | 407 +++++++++++-------
 frontend/src/styles.css                       |  22 +
 3 files changed, 284 insertions(+), 147 deletions(-)

diff --git a/frontend/src/app/recollections/layout/RecollectionSidebar.tsx b/frontend/src/app/recollections/layout/RecollectionSidebar.tsx
index 8be2157..3104785 100644
--- a/frontend/src/app/recollections/layout/RecollectionSidebar.tsx
+++ b/frontend/src/app/recollections/layout/RecollectionSidebar.tsx
@@ -52,7 +52,7 @@ export function RecollectionSidebar() {
     >
       <SidebarContent className="flex-1 overflow-y-auto border-0 bg-transparent">
         <SidebarGroup>
-          <div className="flex items-center justify-between gap-2 px-2 py-1.5">
+          <div className="flex items-center justify-between gap-2 py-1.5">
             <SidebarGroupLabel className="py-0">Logos</SidebarGroupLabel>
             <Button
               type="button"
diff --git a/frontend/src/app/recollections/layout/TreeBrowser.tsx b/frontend/src/app/recollections/layout/TreeBrowser.tsx
index efa9825..0bc0a64 100644
--- a/frontend/src/app/recollections/layout/TreeBrowser.tsx
+++ b/frontend/src/app/recollections/layout/TreeBrowser.tsx
@@ -14,9 +14,29 @@
  */
 
 import React, { useCallback, useMemo, useRef, useState } from 'react'
-import { Tree, NodeApi, RowRendererProps, TreeApi } from 'react-arborist'
+import {
+  Tree,
+  NodeApi,
+  NodeRendererProps,
+  RowRendererProps,
+  TreeApi,
+  type CursorProps,
+} from 'react-arborist'
 import { cn } from '@/lib/utils'
-import { FileText, ChevronRight, ChevronDown, Plus, MoreHorizontal, Trash2, Pencil, Search, ChevronsDownUp, ChevronsUpDown, X, GripVertical, Folder } from 'lucide-react'
+import {
+  FileText,
+  ChevronRight,
+  ChevronDown,
+  Plus,
+  MoreHorizontal,
+  Trash2,
+  Pencil,
+  Search,
+  ChevronsDownUp,
+  ChevronsUpDown,
+  X,
+  GripVertical,
+} from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
@@ -28,13 +48,11 @@ import {
 import { Input } from '@/components/ui/input'
 import { useRecollectionSidebar } from './RecollectionSidebarContext'
 import { useParams, useNavigate, useLocation } from 'react-router-dom'
-import type { LogosPageMeta, LogosPageId } from '../state/recollectionStore'
+import type { LogosPageMeta } from '../state/recollectionStore'
 import { removeLogosPageContent } from '../state/recollectionStore'
 
-// Tree node data structure
-type TreeNode = {
-  id: string
-  data: LogosPageMeta
+// Tree node: page metadata plus tree shape (react-arborist `node.data` is this whole object).
+type TreeNode = LogosPageMeta & {
   children?: TreeNode[]
   isFolder: boolean
 }
@@ -47,8 +65,7 @@ function buildTree(pages: LogosPageMeta[]): TreeNode[] {
   // First pass: create all nodes
   pages.forEach((page) => {
     pageMap.set(page.id, {
-      id: page.id,
-      data: page,
+      ...page,
       children: [],
       isFolder: false,
     })
@@ -70,7 +87,7 @@ function buildTree(pages: LogosPageMeta[]): TreeNode[] {
 
   // Sort children by position
   function sortNodes(nodes: TreeNode[]) {
-    nodes.sort((a, b) => a.data.position - b.data.position)
+    nodes.sort((a, b) => a.position - b.position)
     nodes.forEach((node) => sortNodes(node.children || []))
   }
   sortNodes(rootNodes)
@@ -121,59 +138,91 @@ function EditableTitle({
   )
 }
 
-// Tree row renderer
-function TreeRow({
-  node,
-  innerRef,
-  attrs,
-  children,
-}: RowRendererProps<TreeNode>) {
+const ROW_INDENT_PX = 20
+const ROW_GUTTER_PX = 8
+
+/**
+ * Line cursor = “insert as sibling at this indent” (not “drop into folder”).
+ * Triangle + dashed rail read as a slot between rows; matches sidebar theme.
+ */
+const LogosDropCursor = React.memo(function LogosDropCursor({ top, left, indent }: CursorProps) {
+  return (
+    <div
+      role="presentation"
+      aria-hidden
+      className="pointer-events-none absolute z-20 flex items-center gap-1.5"
+      style={{
+        top: top - 5,
+        left: left + ROW_GUTTER_PX,
+        right: Math.max(indent, ROW_GUTTER_PX),
+      }}
+    >
+      <span className="flex h-3 w-2.5 shrink-0 items-center justify-center text-primary drop-shadow-sm">
+        <svg width="9" height="10" viewBox="0 0 9 10" fill="currentColor" aria-hidden>
+          <path d="M0 5 L9 1.5 L9 8.5 Z" />
+        </svg>
+      </span>
+      <div className="flex h-3 min-w-[2rem] flex-1 items-center">
+        <div
+          className={cn(
+            'h-0 w-full border-t-2 border-dashed border-primary',
+            'shadow-[0_1px_0_0_hsl(var(--primary)/0.35)]',
+            'motion-safe:animate-[tree-drop-line-pulse_1.8s_ease-in-out_infinite]'
+          )}
+        />
+      </div>
+    </div>
+  )
+})
+
+/**
+ * Drag ref on a compact handle at the start of the row; handle is a floating pill shown on row hover
+ * (always visible on coarse pointers). Title/icon strip is click-to-navigate only.
+ */
+function LogosTreeNode({ node, dragHandle, style }: NodeRendererProps<TreeNode>) {
   const { recollectionId } = useParams<{ recollectionId: string }>()
   const navigate = useNavigate()
-  const { pathname } = useLocation()
-  const { tree, activePageId, handleSelectPage, handleTreeChange } = useRecollectionSidebar()
+  const { tree, handleSelectPage, handleTreeChange } = useRecollectionSidebar()
 
   const base = recollectionId ? `/recollections/${recollectionId}` : ''
   const baseLogos = `${base}/logos`
-  const isActive = pathname.startsWith(baseLogos) && activePageId === node.data.id
 
-  const handleToggle = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation()
-    node.toggle()
-  }, [node])
+  const handleToggle = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      node.toggle()
+    },
+    [node]
+  )
 
-  const handleSelect = useCallback((e: React.MouseEvent) => {
-    if (!node.state.isEditing && !node.state.isDragging) {
-      handleSelectPage(node.data.id)
-      navigate(`${baseLogos}?page=${encodeURIComponent(node.data.id)}`)
-    }
-  }, [handleSelectPage, node.data.id, baseLogos, navigate, node.state.isEditing, node.state.isDragging])
+  const handleSelect = useCallback(
+    (e: React.MouseEvent) => {
+      if (!node.state.isEditing && !node.state.isDragging) {
+        handleSelectPage(node.data.id)
+        navigate(`${baseLogos}?page=${encodeURIComponent(node.data.id)}`)
+      }
+    },
+    [handleSelectPage, node.data.id, baseLogos, navigate, node.state.isEditing, node.state.isDragging]
+  )
 
   const handleRename = useCallback(() => {
     node.edit()
   }, [node])
 
   const handleDelete = useCallback(() => {
-    // Get all descendants to delete
     const toDelete = new Set<string>()
     function collectDescendants(id: string) {
       toDelete.add(id)
       tree.forEach((p) => {
-        if (p.parentId === id) {
-          collectDescendants(p.id)
-        }
+        if (p.parentId === id) collectDescendants(p.id)
       })
     }
     collectDescendants(node.data.id)
-
-    // Remove content from storage for all deleted pages
     if (recollectionId) {
       toDelete.forEach((pageId) => {
         removeLogosPageContent(recollectionId, pageId)
       })
     }
-
-    // Remove from tree
     handleTreeChange(tree.filter((p) => !toDelete.has(p.id)))
   }, [tree, handleTreeChange, node.data.id, recollectionId])
 
@@ -190,41 +239,57 @@ function TreeRow({
       position: maxPos + 1,
     }
     handleTreeChange([...tree, newPage])
-    // Expand parent if collapsed
-    if (!node.isOpen) {
-      node.open()
-    }
+    if (!node.isOpen) node.open()
   }, [tree, handleTreeChange, node])
 
   const hasChildren = (node.children?.length || 0) > 0
-  const level = node.level
+  const pageTitle = node.data.title || 'Untitled'
 
   return (
-    <div
-      ref={innerRef}
-      {...attrs}
-      style={{
-        ...attrs.style,
-        paddingLeft: `${level * 20 + 8}px`,
-      }}
-      className={cn(
-        'group relative flex items-center gap-1 py-1 pr-2 text-sm rounded-md',
-        'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-        isActive && 'bg-sidebar-accent text-sidebar-accent-foreground',
-        node.state.isDragging && 'opacity-50',
-        node.state.willReceiveDrop && 'bg-sidebar-accent/50'
-      )}
-      onClick={handleSelect}
-    >
-      {/* Visual hierarchy indicator for nested items */}
-      {level > 0 && (
+    <div className="flex min-w-0 flex-1 items-center gap-1">
+      {/* Floating drag pill: expands on row hover; coarse pointers keep it tappable */}
+      <div
+        className={cn(
+          'flex shrink-0 items-center justify-center overflow-hidden',
+          'transition-[width,opacity] duration-200 ease-out',
+          'w-0 opacity-0 group-hover:w-4 group-hover:opacity-100',
+          '[@media(pointer:coarse)]:w-5 [@media(pointer:coarse)]:opacity-100',
+          node.state.isDragging && 'w-4 opacity-100 [@media(pointer:coarse)]:w-5',
+          node.state.isEditing && 'pointer-events-none w-0 opacity-0'
+        )}
+      >
         <div
-          className="absolute left-0 top-0 bottom-0 border-l-2 border-sidebar-border/50"
-          style={{ left: `${(level - 1) * 20 + 16}px` }}
-        />
-      )}
+          ref={dragHandle}
+          style={{ ...style, paddingLeft: 0 }}
+          title={node.state.isEditing ? undefined : 'Drag to reorder'}
+          className={cn(
+            'logos-tree-drag-handle group/drag',
+            'relative flex h-6 w-4 shrink-0 touch-none items-center justify-center rounded-md',
+            '[@media(pointer:coarse)]:h-7 [@media(pointer:coarse)]:w-5',
+            'border border-sidebar-border/50 bg-sidebar-accent/40',
+            'text-sidebar-foreground/70',
+            'transition-[color,background-color,border-color,box-shadow,transform] duration-150 ease-out',
+            'hover:border-sidebar-border hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+            'hover:shadow-sm',
+            'active:scale-[0.97] active:cursor-grabbing',
+            'cursor-grab outline-none',
+            'dark:border-sidebar-border/55 dark:bg-sidebar-accent/35 dark:text-sidebar-foreground/75',
+            'dark:hover:bg-sidebar-accent dark:hover:text-sidebar-accent-foreground',
+            node.state.isDragging &&
+              'cursor-grabbing border-primary/55 bg-primary/18 text-primary shadow-sm ring-1 ring-primary/30 dark:border-primary/50 dark:bg-primary/22 dark:text-primary'
+          )}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <GripVertical
+            className={cn(
+              'size-3 shrink-0 text-current transition-opacity duration-150 opacity-85 group-hover/drag:opacity-100',
+              node.state.isDragging && 'opacity-100'
+            )}
+            strokeWidth={2}
+          />
+        </div>
+      </div>
 
-      {/* Expand/Collapse toggle for folders */}
       {hasChildren ? (
         <button
           type="button"
@@ -241,41 +306,39 @@ function TreeRow({
         <div className="w-4 shrink-0" />
       )}
 
-      {/* Icon */}
-      {node.data.isFolder ? (
-        <Folder className="size-4 shrink-0 text-sidebar-foreground/70" />
-      ) : (
-        <FileText className="size-4 shrink-0 text-sidebar-foreground/70" />
-      )}
-
-      {/* Title - Editable */}
-      <div className="flex-1 min-w-0">
-        {node.state.isEditing ? (
-          <EditableTitle
-            title={node.data.data.title}
-            onSave={(newTitle) => {
-              if (newTitle.trim()) {
-                handleTreeChange(
-                  tree.map((p) =>
-                    p.id === node.data.id ? { ...p, title: newTitle.trim() } : p
-                  )
-                )
-              }
-              node.submit(newTitle)
-            }}
-            onCancel={() => {
-              node.reset()
-            }}
-          />
-        ) : (
-          <span className="truncate block select-none">
-            {node.data.data.title || 'Untitled'}
-          </span>
+      <div
+        className={cn(
+          'flex min-h-[28px] min-w-0 flex-1 items-center gap-1 rounded-md px-0.5 -mx-0.5',
+          node.state.isEditing ? 'cursor-text' : 'cursor-pointer hover:bg-sidebar-accent/40'
         )}
+        onClick={handleSelect}
+      >
+        <FileText className="size-4 shrink-0 text-sidebar-foreground/70" />
+
+        <div className="min-w-0 flex-1">
+          {node.state.isEditing ? (
+            <EditableTitle
+              title={node.data.title}
+              onSave={(newTitle) => {
+                if (newTitle.trim()) {
+                  handleTreeChange(
+                    tree.map((p) => (p.id === node.data.id ? { ...p, title: newTitle.trim() } : p))
+                  )
+                }
+                node.submit(newTitle)
+              }}
+              onCancel={() => node.reset()}
+            />
+          ) : (
+            <span className="block truncate select-none">{pageTitle}</span>
+          )}
+        </div>
       </div>
 
-      {/* Actions - Only visible on hover */}
-      <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+      <div
+        className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100"
+        onPointerDown={(e) => e.stopPropagation()}
+      >
         <button
           type="button"
           className="p-0.5 hover:bg-sidebar-accent rounded transition-colors"
@@ -303,10 +366,7 @@ function TreeRow({
               Rename
             </DropdownMenuItem>
             <DropdownMenuSeparator />
-            <DropdownMenuItem
-              onClick={handleDelete}
-              className="text-destructive focus:text-destructive"
-            >
+            <DropdownMenuItem onClick={handleDelete} className="text-destructive focus:text-destructive">
               <Trash2 className="mr-2 size-3.5" />
               Delete
             </DropdownMenuItem>
@@ -317,6 +377,47 @@ function TreeRow({
   )
 }
 
+/** Drop target + layout shell; `children` must be the Node renderer (drag layer). */
+function TreeRow({ node, innerRef, attrs, children }: RowRendererProps<TreeNode>) {
+  const { pathname } = useLocation()
+  const { activePageId } = useRecollectionSidebar()
+  const { recollectionId } = useParams<{ recollectionId: string }>()
+  const base = recollectionId ? `/recollections/${recollectionId}` : ''
+  const baseLogos = `${base}/logos`
+  const isActive = pathname.startsWith(baseLogos) && activePageId === node.data.id
+  const level = node.level
+  const indentPx = ROW_GUTTER_PX + level * ROW_INDENT_PX
+
+  return (
+    <div
+      ref={innerRef}
+      {...attrs}
+      style={{
+        ...attrs.style,
+        paddingLeft: `${indentPx}px`,
+      }}
+      className={cn(
+        'group relative flex items-center gap-1 py-1 pr-2 text-sm rounded-md transition-[box-shadow,background-color,ring-color] duration-150',
+        'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        isActive && 'bg-sidebar-accent text-sidebar-accent-foreground',
+        node.state.isDragging && 'cursor-grabbing opacity-45',
+        // Folder drop target: index === null in library — reads as “open container”, not a line between rows
+        node.state.willReceiveDrop &&
+          'cursor-copy bg-sidebar-accent/30 ring-2 ring-inset ring-dashed ring-sidebar-ring/80 shadow-[inset_0_0_0_1px_hsl(var(--sidebar-border))]'
+      )}
+      title={node.state.willReceiveDrop ? 'Release to drop inside this folder' : undefined}
+    >
+      {level > 0 && (
+        <div
+          className="pointer-events-none absolute bottom-0 top-0 border-l-2 border-sidebar-border/45"
+          style={{ left: `${ROW_GUTTER_PX + (level - 1) * ROW_INDENT_PX + ROW_INDENT_PX / 2}px` }}
+        />
+      )}
+      {children}
+    </div>
+  )
+}
+
 export function TreeBrowser() {
   const { tree, handleTreeChange } = useRecollectionSidebar()
   const [searchQuery, setSearchQuery] = useState('')
@@ -334,7 +435,7 @@ export function TreeBrowser() {
     function filterNodes(nodes: TreeNode[]): TreeNode[] {
       const result: TreeNode[] = []
       for (const node of nodes) {
-        const matches = node.data.title.toLowerCase().includes(searchTerm)
+        const matches = node.title.toLowerCase().includes(searchTerm)
         const children = filterNodes(node.children || [])
 
         if (matches || children.length > 0) {
@@ -365,40 +466,46 @@ export function TreeBrowser() {
     return folderIds
   }, [treeNodes])
 
-  // Handle drag and drop reordering
+  // Handle drag and drop reordering (react-arborist onMove)
   const handleMove = useCallback(
-    ({ dragIds, parentId, index }: { dragIds: string[]; parentId: string | null; index: number }) => {
+    ({
+      dragIds,
+      parentId: newParentId,
+      index,
+    }: {
+      dragIds: string[]
+      parentId: string | null
+      index: number
+    }) => {
       const dragId = dragIds[0]
       if (!dragId) return
 
-      // Find the dragged page
-      const draggedPage = tree.find((p) => p.id === dragId)
-      if (!draggedPage) return
+      const dragged = tree.find((p) => p.id === dragId)
+      if (!dragged) return
 
-      // Get all siblings at the new location (excluding the dragged item)
-      const siblings = tree.filter((p) => p.parentId === parentId && p.id !== dragId)
+      const oldParentId = dragged.parentId
+      const moved: LogosPageMeta = { ...dragged, parentId: newParentId }
 
-      // Sort siblings by current position
-      siblings.sort((a, b) => a.position - b.position)
+      const newSiblings = tree
+        .filter((p) => p.parentId === newParentId && p.id !== dragId)
+        .sort((a, b) => a.position - b.position)
+      newSiblings.splice(index, 0, moved)
 
-      // Insert dragged item at the new index
-      siblings.splice(index, 0, { ...draggedPage, parentId, position: index })
-
-      // Create updated tree with new positions
-      const updatedTree = tree.map((p) => {
-        // Find the item in the siblings array
-        const siblingIndex = siblings.findIndex((s) => s.id === p.id)
-
-        if (siblingIndex >= 0) {
-          // This item is in the affected parent - update its position
-          return { ...p, parentId: siblings[siblingIndex].parentId, position: siblingIndex }
-        }
-
-        // Item is not affected by the move
-        return p
+      const updates = new Map<string, LogosPageMeta>()
+      newSiblings.forEach((p, i) => {
+        updates.set(p.id, { ...p, parentId: newParentId, position: i })
       })
 
-      handleTreeChange(updatedTree)
+      if (oldParentId !== newParentId) {
+        tree
+          .filter((p) => p.parentId === oldParentId && p.id !== dragId)
+          .sort((a, b) => a.position - b.position)
+          .forEach((p, i) => {
+            updates.set(p.id, { ...p, position: i })
+          })
+      }
+
+      handleTreeChange(tree.map((p) => updates.get(p.id) ?? p))
     },
     [tree, handleTreeChange]
   )
@@ -418,10 +525,33 @@ export function TreeBrowser() {
     setSearchQuery('')
   }, [])
 
+  // Fixed prop shape: react-arborist TreeProvider uses [...Object.values(treeProps), …] as useMemo deps;
+  // varying key counts on the props object trigger "dependency array changed size" warnings.
+  const arboristTreeProps = useMemo(
+    () => ({
+      data: filteredTree,
+      idAccessor: 'id' as const,
+      childrenAccessor: 'children' as const,
+      width: '100%' as const,
+      height: 600,
+      rowHeight: 32,
+      indent: ROW_INDENT_PX,
+      renderRow: TreeRow,
+      initialOpenState,
+      onMove: handleMove,
+      disableDrag: Boolean(searchQuery),
+      disableDrop: Boolean(searchQuery),
+      className: 'react-arborist-tree',
+      renderCursor: LogosDropCursor,
+      children: LogosTreeNode,
+    }),
+    [filteredTree, initialOpenState, handleMove, searchQuery]
+  )
+
   return (
     <div className="flex flex-col gap-2 h-full">
       {/* Search Toolbar */}
-      <div className="flex items-center gap-1.5 px-2">
+      <div className="flex items-center gap-1.5">
         <div className="relative flex-1">
           <Search className="absolute left-2 top-1/2 -translate-y-1/2 size-3.5 text-sidebar-foreground/50 pointer-events-none" />
           <Input
@@ -469,23 +599,8 @@ export function TreeBrowser() {
       </div>
 
       {/* Tree */}
-      <div className="flex-1 min-h-0 overflow-hidden px-2">
-        <Tree
-          ref={treeRef}
-          data={filteredTree}
-          idAccessor="id"
-          childrenAccessor="children"
-          width="100%"
-          height={600}
-          rowHeight={32}
-          indent={0}
-          renderRow={TreeRow}
-          initialOpenState={initialOpenState}
-          onMove={handleMove}
-          disableDrag={!!searchQuery}
-          disableDrop={!!searchQuery}
-          className="react-arborist-tree"
-        />
+      <div className="flex-1 min-h-0 overflow-hidden">
+        <Tree ref={treeRef} {...arboristTreeProps} />
       </div>
     </div>
   )
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 81131ad..fbde77f 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -401,6 +401,19 @@ pre {
     background: none;
 }
 
+/* Logos tree drop line (LogosDropCursor in TreeBrowser.tsx) */
+@keyframes tree-drop-line-pulse {
+
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.4;
+    }
+}
+
 /* React Arborist tree styling for sidebar integration */
 .react-arborist-tree {
     background: transparent !important;
@@ -443,6 +456,15 @@ pre {
     cursor: grabbing;
 }
 
+/* Drag handle: restore focus ring (tree uses outline:none on all descendants) */
+.react-arborist-tree .logos-tree-drag-handle:focus-visible {
+    outline: 2px solid hsl(var(--sidebar-ring)) !important;
+    outline-offset: 2px;
+    box-shadow:
+        0 0 0 2px hsl(var(--sidebar-background)),
+        0 2px 8px hsl(var(--sidebar-ring) / 0.25);
+}
+
 /* Hide default react-arborist backgrounds */
 .react-arborist-tree [data-react-arborist-tree] {
     background: transparent !important;