Merge pull request #47 from beNative/codex/make-treeview-spacing-and-indent-configurable

Add settings for document tree spacing

Author: beNative

App.tsx

@@ -1136,6 +1136,8 @@ const MainApp: React.FC = () => {
                                         onRenameTemplate={handleRenameTemplate}
                                         onNewTemplate={handleNewTemplate}
                                         onNewFromTemplate={() => setCreateFromTemplateOpen(true)}
+                                        documentTreeIndent={settings.documentTreeIndent}
+                                        documentTreeVerticalSpacing={settings.documentTreeVerticalSpacing}
                                     />
                                 </aside>
                                 <div 

components/PromptList.tsx

@@ -8,6 +8,8 @@ interface DocumentListProps {
   documents: DocumentOrFolder[]; // needed for the empty state check
   selectedIds: Set<string>;
   focusedItemId: string | null;
+  indentPerLevel: number;
+  verticalSpacing: number;
   onSelectNode: (id: string, e: React.MouseEvent) => void;
   onDeleteNode: (id: string, shiftKey?: boolean) => void;
   onRenameNode: (id: string, newTitle: string) => void;
@@ -24,8 +26,27 @@ interface DocumentListProps {
   onRenameComplete: () => void;
 }
 
-const DocumentList: React.FC<DocumentListProps> = ({ 
-  tree, documents, selectedIds, focusedItemId, onSelectNode, onDeleteNode, onRenameNode, onMoveNode, onDropFiles, onCopyNodeContent, searchTerm, expandedIds, onToggleExpand, onMoveUp, onMoveDown, onContextMenu, renamingNodeId, onRenameComplete
+const DocumentList: React.FC<DocumentListProps> = ({
+  tree,
+  documents,
+  selectedIds,
+  focusedItemId,
+  indentPerLevel,
+  verticalSpacing,
+  onSelectNode,
+  onDeleteNode,
+  onRenameNode,
+  onMoveNode,
+  onDropFiles,
+  onCopyNodeContent,
+  searchTerm,
+  expandedIds,
+  onToggleExpand,
+  onMoveUp,
+  onMoveDown,
+  onContextMenu,
+  renamingNodeId,
+  onRenameComplete
 }) => {
   // Fix: Corrected useState declaration syntax from `=>` to `=`. This resolves all subsequent "cannot find name" errors.
   const [isRootDropping, setIsRootDropping] = useState(false);
@@ -95,12 +116,14 @@ const DocumentList: React.FC<DocumentListProps> = ({
         onDragLeave={handleRootDragLeave}
         onContextMenu={handleRootContextMenu}
     >
-        <ul className="space-y-0 p-1">
+        <ul className="space-y-0 p-1 m-0 list-none">
         {tree.map((node, index) => (
             <DocumentTreeItem
                 key={node.id}
                 node={node}
                 level={0}
+                indentPerLevel={indentPerLevel}
+                verticalSpacing={verticalSpacing}
                 selectedIds={selectedIds}
                 focusedItemId={focusedItemId}
                 expandedIds={displayExpandedIds}

components/PromptTreeItem.tsx

@@ -11,6 +11,8 @@ export interface DocumentNode extends DocumentOrFolder {
 interface DocumentTreeItemProps {
   node: DocumentNode;
   level: number;
+  indentPerLevel: number;
+  verticalSpacing: number;
   selectedIds: Set<string>;
   focusedItemId: string | null;
   expandedIds: Set<string>;
@@ -76,7 +78,9 @@ const DocumentTreeItem: React.FC<DocumentTreeItemProps> = (props) => {
     canMoveDown,
     onContextMenu,
     renamingNodeId,
-    onRenameComplete
+    onRenameComplete,
+    indentPerLevel,
+    verticalSpacing
   } = props;
 
   const [isRenaming, setIsRenaming] = useState(false);
@@ -184,6 +188,11 @@ const DocumentTreeItem: React.FC<DocumentTreeItemProps> = (props) => {
     onContextMenu(e, node.id);
   }
 
+  const safeIndent = Math.max(indentPerLevel, 0);
+  const paddingTopBottom = Math.max(verticalSpacing, 0);
+  const basePaddingLeft = 4; // matches Tailwind px-1 for consistent baseline spacing
+  const rowPaddingLeft = basePaddingLeft + Math.max(level, 0) * safeIndent;
+
   return (
     <li
       ref={itemRef}
@@ -193,14 +202,14 @@ const DocumentTreeItem: React.FC<DocumentTreeItemProps> = (props) => {
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
       onContextMenu={handleContextMenu}
-      style={{ paddingLeft: `${level * 16}px` }}
       className="relative"
       data-item-id={node.id}
     >
         <div
             onClick={(e) => !isRenaming && onSelectNode(node.id, e)}
             onDoubleClick={(e) => !isRenaming && handleRenameStart(e)}
-            className={`w-full text-left p-1 rounded-md group flex justify-between items-center transition-colors duration-150 text-xs relative focus:outline-none ${
+            style={{ paddingTop: `${paddingTopBottom}px`, paddingBottom: `${paddingTopBottom}px`, paddingLeft: `${rowPaddingLeft}px` }}
+            className={`w-full text-left pr-1 rounded-md group flex justify-between items-center transition-colors duration-150 text-xs relative focus:outline-none ${
                 isSelected ? 'bg-tree-selected text-text-main' : 'hover:bg-border-color/30 text-text-secondary hover:text-text-main'
             } ${isFocused ? 'ring-2 ring-primary ring-offset-[-2px] ring-offset-secondary' : ''}`}
         >
@@ -261,13 +270,17 @@ const DocumentTreeItem: React.FC<DocumentTreeItemProps> = (props) => {
         {dropPosition === 'inside' && <div className="absolute inset-0 border-2 border-primary rounded-md pointer-events-none bg-primary/10" />}
 
         {isFolder && isExpanded && (
-            <ul>
+            <ul
+                className="m-0 pl-0 list-none space-y-0"
+            >
                 {node.children.map((childNode, index) => (
-                    <DocumentTreeItem 
-                        key={childNode.id} 
-                        {...props} 
-                        node={childNode} 
+                    <DocumentTreeItem
+                        key={childNode.id}
+                        {...props}
+                        node={childNode}
                         level={level + 1}
+                        indentPerLevel={indentPerLevel}
+                        verticalSpacing={verticalSpacing}
                         canMoveUp={index > 0}
                         canMoveDown={index < node.children.length - 1}
                     />

components/SettingsView.tsx

@@ -587,6 +587,36 @@ const AppearanceSettingsSection: React.FC<Pick<SectionProps, 'settings' | 'setCu
                         <span className="font-semibold text-text-main tabular-nums min-w-[50px] text-right text-xs">{settings.uiScale}%</span>
                     </div>
                 </SettingRow>
+                <SettingRow label="Document Tree Row Spacing" description="Adjust the vertical padding used for each entry in the sidebar tree.">
+                    <div className="flex items-center gap-4 w-60">
+                        <input
+                            id="documentTreeVerticalSpacing"
+                            type="range"
+                            min="0"
+                            max="16"
+                            step="1"
+                            value={settings.documentTreeVerticalSpacing}
+                            onChange={(e) => setCurrentSettings(prev => ({ ...prev, documentTreeVerticalSpacing: Number(e.target.value) }))}
+                            className="w-full h-2 bg-border-color rounded-lg appearance-none cursor-pointer range-slider"
+                        />
+                        <span className="font-semibold text-text-main tabular-nums min-w-[50px] text-right text-xs">{settings.documentTreeVerticalSpacing}px</span>
+                    </div>
+                </SettingRow>
+                <SettingRow label="Document Tree Indent" description="Control how far nested folders and documents are indented.">
+                    <div className="flex items-center gap-4 w-60">
+                        <input
+                            id="documentTreeIndent"
+                            type="range"
+                            min="0"
+                            max="32"
+                            step="1"
+                            value={settings.documentTreeIndent}
+                            onChange={(e) => setCurrentSettings(prev => ({ ...prev, documentTreeIndent: Number(e.target.value) }))}
+                            className="w-full h-2 bg-border-color rounded-lg appearance-none cursor-pointer range-slider"
+                        />
+                        <span className="font-semibold text-text-main tabular-nums min-w-[50px] text-right text-xs">{settings.documentTreeIndent}px</span>
+                    </div>
+                </SettingRow>
                 <SettingRow label="Icon Set" description="Customize the look of icons throughout the application.">
                     <div className="grid grid-cols-3 gap-3 w-80">
                          <CardButton name="Heroicons" value="heroicons" isSelected={settings.iconSet === 'heroicons'} onClick={(v) => setCurrentSettings(s => ({...s, iconSet: v}))}>

components/Sidebar.tsx

@@ -51,6 +51,8 @@ interface SidebarProps {
   onRenameTemplate: (id: string, newTitle: string) => void;
   onNewTemplate: () => void;
   onNewFromTemplate: () => void;
+  documentTreeIndent: number;
+  documentTreeVerticalSpacing: number;
 }
 
 const DEFAULT_TEMPLATES_PANEL_HEIGHT = 160;
@@ -360,11 +362,13 @@ const Sidebar: React.FC<SidebarProps> = (props) => {
                     </div>
                 </header>
                 <div className="flex-1 overflow-y-auto">
-                <DocumentList 
+                <DocumentList
                     tree={documentTree}
                     documents={props.documents}
                     selectedIds={props.selectedIds}
                     focusedItemId={focusedItemId}
+                    indentPerLevel={props.documentTreeIndent}
+                    verticalSpacing={props.documentTreeVerticalSpacing}
                     onSelectNode={props.onSelectNode}
                     onDeleteNode={props.onDeleteNode}
                     onRenameNode={props.onRenameNode}

constants.ts

@@ -25,6 +25,8 @@ export const DEFAULT_SETTINGS: Settings = {
   autoSaveLogs: false,
   allowPrerelease: false,
   uiScale: 100,
+  documentTreeIndent: 16,
+  documentTreeVerticalSpacing: 4,
   customShortcuts: {},
   markdownFontSize: 16,
   markdownLineHeight: 1.7,