corrected folder upload and virtualization

src/workspaces/components/Workspace/WorkspaceView.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react';
 import type { LayoutNode, WorkspaceDefinition, WidgetRegistry } from './types';
-import { splitPanel, removePanel, setWidget, updateSizes, countPanels } from './layout-utils';
+import { splitPanel, removePanel, setWidget, updateSizes, countPanels, hasAnyWidget } from './layout-utils';
 import { WorkspaceProvider } from './WorkspaceContext';
 import { WorkspaceHeader } from './WorkspaceHeader';
 import { WorkspaceRenderer } from './WorkspaceRenderer';
@@ -14,7 +14,7 @@ type WorkspaceViewProps = {
 };
 
 export const WorkspaceView = ({ workspace, name, layout, onLayoutChange, registry }: WorkspaceViewProps) => {
-  const [editing, setEditing] = useState(false);
+  const [editing, setEditing] = useState(() => !hasAnyWidget(layout));
 
   const handleSetWidget = useCallback(
     (panelId: string, widgetType: string | null) => {

src/workspaces/components/Workspace/index.ts

@@ -1,4 +1,4 @@
 export type { LayoutNode, LayoutGroup, LayoutPanel, WorkspaceDefinition, WidgetRegistry, WidgetRegistryEntry } from './types';
-export { createDefaultLayout, splitPanel, removePanel, setWidget, updateSizes, pruneEmptyPanels, countPanels } from './layout-utils';
+export { createDefaultLayout, splitPanel, removePanel, setWidget, updateSizes, pruneEmptyPanels, countPanels, hasAnyWidget } from './layout-utils';
 export { WorkspaceProvider, useWorkspace } from './WorkspaceContext';
 export { WorkspaceView } from './WorkspaceView';

src/workspaces/components/Workspace/layout-utils.ts

@@ -156,3 +156,8 @@ export function countPanels(node: LayoutNode): number {
   if (node.type === 'panel') return 1;
   return node.children.reduce((sum, child) => sum + countPanels(child.node), 0);
 }
+
+export function hasAnyWidget(node: LayoutNode): boolean {
+  if (node.type === 'panel') return node.widgetType !== null;
+  return node.children.some((child) => hasAnyWidget(child.node));
+}

src/workspaces/widgets/FileBrowser/Toolbar.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState, useCallback } from 'react';
 import { FolderPlus, Upload, FolderUp, Scissors, Copy, ClipboardPaste, Trash2, X, Check } from 'lucide-react';
 
 type ToolbarProps = {
@@ -28,11 +28,9 @@ export const Toolbar = ({
   const [folderName, setFolderName] = useState('');
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const folderInputRef = useRef<HTMLInputElement | null>(null);
-
-  useEffect(() => {
-    const input = folderInputRef.current;
-    if (!input) return;
-    input.setAttribute('webkitdirectory', '');
+  const setFolderInputRef = useCallback((input: HTMLInputElement | null) => {
+    folderInputRef.current = input;
+    if (input) input.setAttribute('webkitdirectory', '');
   }, []);
 
   const handleCreate = () => {
@@ -43,6 +41,34 @@ export const Toolbar = ({
     setShowInput(false);
   };
 
+  const hiddenInputs = (
+    <>
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple
+        className="hidden"
+        onChange={(ev) => {
+          if (ev.target.files?.length) {
+            onUpload(ev.target.files);
+            ev.target.value = '';
+          }
+        }}
+      />
+      <input
+        ref={setFolderInputRef}
+        type="file"
+        className="hidden"
+        onChange={(ev) => {
+          if (ev.target.files?.length) {
+            onUpload(ev.target.files);
+            ev.target.value = '';
+          }
+        }}
+      />
+    </>
+  );
+
   if (selectionCount > 0) {
     return (
       <div className="flex items-center gap-1">
@@ -87,6 +113,7 @@ export const Toolbar = ({
         >
           <X className="h-4 w-4" />
         </button>
+        {hiddenInputs}
       </div>
     );
   }
@@ -169,29 +196,7 @@ export const Toolbar = ({
         </button>
       )}
 
-      <input
-        ref={fileInputRef}
-        type="file"
-        multiple
-        className="hidden"
-        onChange={(ev) => {
-          if (ev.target.files?.length) {
-            onUpload(ev.target.files);
-            ev.target.value = '';
-          }
-        }}
-      />
-      <input
-        ref={folderInputRef}
-        type="file"
-        className="hidden"
-        onChange={(ev) => {
-          if (ev.target.files?.length) {
-            onUpload(ev.target.files);
-            ev.target.value = '';
-          }
-        }}
-      />
+      {hiddenInputs}
     </div>
   );
 };