Merge pull request #103 from beNative/codex/fix-folder-overview-visibility

Ensure folder overview activates after adding folders

Author: beNative

App.tsx

@@ -991,11 +991,12 @@ const MainApp: React.FC = () => {
 
     useEffect(() => {
         const documentIds = new Set(items.filter(item => item.type === 'document').map(item => item.id));
+        const allItemIds = new Set(items.map(item => item.id));
         setTabState(prev => {
             const filteredOrder = prev.order.filter(id => documentIds.has(id));
             const orderChanged = filteredOrder.length !== prev.order.length;
             let nextActive = prev.activeId;
-            if (nextActive && !documentIds.has(nextActive)) {
+            if (nextActive && !allItemIds.has(nextActive)) {
                 nextActive = filteredOrder[filteredOrder.length - 1] ?? null;
             }
             if (!orderChanged && nextActive === prev.activeId) {
@@ -2009,6 +2010,7 @@ const MainApp: React.FC = () => {
         { id: 'new-document', name: 'Create New Document', action: () => handleNewDocument(), category: 'File', icon: PlusIcon, shortcut: ['Control', 'N'], keywords: 'add create file' },
         { id: 'new-code-file', name: 'Create New Code File', action: handleOpenNewCodeFileModal, category: 'File', icon: CodeIcon, shortcut: ['Control', 'Shift', 'N'], keywords: 'add create script' },
         { id: 'new-folder', name: 'Create New Folder', action: handleNewRootFolder, category: 'File', icon: FolderPlusIcon, keywords: 'add create directory' },
+        { id: 'new-subfolder', name: 'Create New Subfolder', action: handleNewSubfolder, category: 'File', icon: FolderDownIcon, keywords: 'add create directory child' },
         { id: 'new-template', name: 'Create New Template', action: handleNewTemplate, category: 'File', icon: DocumentDuplicateIcon, keywords: 'add create template' },
         { id: 'new-from-template', name: 'New Document from Template...', action: () => { addLog('INFO', 'Command: New Document from Template.'); setCreateFromTemplateOpen(true); }, category: 'File', icon: DocumentDuplicateIcon, keywords: 'add create file instance' },
         { id: 'duplicate-item', name: 'Duplicate Selection', action: handleDuplicateSelection, category: 'File', icon: CopyIcon, keywords: 'copy clone' },
@@ -2020,7 +2022,7 @@ const MainApp: React.FC = () => {
         { id: 'toggle-info', name: 'Toggle Info View', action: () => { addLog('INFO', 'Command: Toggle Info View.'); setView(v => v === 'info' ? 'editor' : 'info'); }, category: 'View', icon: InfoIcon, keywords: 'help docs readme' },
         { id: 'open-about', name: 'About DocForge', action: handleOpenAbout, category: 'Help', icon: SparklesIcon, keywords: 'about credits information' },
         { id: 'toggle-logs', name: 'Toggle Logs Panel', action: () => { addLog('INFO', 'Command: Toggle Logs Panel.'); setIsLoggerVisible(v => !v); }, category: 'View', icon: TerminalIcon, keywords: 'debug console' },
-    ], [handleNewDocument, handleOpenNewCodeFileModal, handleNewRootFolder, handleDeleteSelection, handleNewTemplate, toggleSettingsView, handleDuplicateSelection, selectedIds, addLog, handleToggleCommandPalette, handleFormatDocument, handleOpenAbout]);
+    ], [handleNewDocument, handleOpenNewCodeFileModal, handleNewRootFolder, handleNewSubfolder, handleDeleteSelection, handleNewTemplate, toggleSettingsView, handleDuplicateSelection, selectedIds, addLog, handleToggleCommandPalette, handleFormatDocument, handleOpenAbout]);
 
     const enrichedCommands = useMemo(() => {
       return commands.map(command => {

components/Sidebar.tsx

@@ -4,7 +4,7 @@ import DocumentList from './PromptList';
 import TemplateList from './TemplateList';
 import type { DocumentOrFolder, DocumentTemplate, Command, DraggedNodeTransfer } from '../types';
 import IconButton from './IconButton';
-import { FolderPlusIcon, PlusIcon, SearchIcon, DocumentDuplicateIcon, ChevronDownIcon, ChevronRightIcon, ExpandAllIcon, CollapseAllIcon, CodeIcon, XIcon } from './Icons';
+import { FolderPlusIcon, PlusIcon, SearchIcon, DocumentDuplicateIcon, ChevronDownIcon, ChevronRightIcon, ExpandAllIcon, CollapseAllIcon, CodeIcon, XIcon, FolderDownIcon } from './Icons';
 import { DocumentNode } from './PromptTreeItem';
 import { storageService } from '../services/storageService';
 import { LOCAL_STORAGE_KEYS } from '../constants';
@@ -84,6 +84,14 @@ const Sidebar: React.FC<SidebarProps> = (props) => {
 
   const openDocumentIdSet = useMemo(() => new Set(props.openDocumentIds), [props.openDocumentIds]);
 
+  const canCreateSubfolder = useMemo(() => {
+    if (!props.activeNodeId) {
+      return false;
+    }
+    const activeItem = props.documents.find(item => item.id === props.activeNodeId);
+    return activeItem?.type === 'folder' ?? false;
+  }, [props.documents, props.activeNodeId]);
+
 
   const sidebarRef = useRef<HTMLDivElement>(null);
   const isResizingTemplates = useRef(false);
@@ -371,6 +379,16 @@ const Sidebar: React.FC<SidebarProps> = (props) => {
                     <IconButton onClick={props.onNewCodeFile} tooltip={getTooltip('new-code-file', 'New Code File')} size="xs" tooltipPosition="bottom">
                         <CodeIcon className="w-4 h-4" />
                     </IconButton>
+                    <IconButton
+                        onClick={props.onNewSubfolder}
+                        tooltip={canCreateSubfolder ? getTooltip('new-subfolder', 'New Subfolder') : 'Select a folder to add a subfolder'}
+                        size="xs"
+                        tooltipPosition="bottom"
+                        disabled={!canCreateSubfolder}
+                        className={!canCreateSubfolder ? 'opacity-40 cursor-not-allowed' : ''}
+                    >
+                        <FolderDownIcon className="w-4 h-4" />
+                    </IconButton>
                     <IconButton onClick={props.onNewRootFolder} tooltip={getTooltip('new-folder', 'New Root Folder')} size="xs" tooltipPosition="bottom">
                         <FolderPlusIcon className="w-4 h-4" />
                     </IconButton>