design

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "papercrate-frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@tabler/icons-react": "3.11.0",
         "axios": "1.7.7",
         "react": "18.3.1",
         "react-dom": "18.3.1",
@@ -1963,6 +1964,32 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/@tabler/icons": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.11.0.tgz",
+      "integrity": "sha512-/vZinJNvCYhdAB+RUsyCpanSPuOEKHHIZi4Uu0Bw7ilewHnQhCWUPrT704uHCRli2ROl7spADPmWzAqOganA5A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      }
+    },
+    "node_modules/@tabler/icons-react": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.11.0.tgz",
+      "integrity": "sha512-xHNBi9mns1slvqos+7LkP3ube4CjWrANMbxMaorzwzO9J/+y1sAEG/sN8CV8FmtpYW/9/gDR+OWCjjLLg0RmAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tabler/icons": "3.11.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.6",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.6.tgz",

frontend/package.json

@@ -9,6 +9,7 @@
     "lint": "echo \"No linting configured\""
   },
   "dependencies": {
+    "@tabler/icons-react": "3.11.0",
     "axios": "1.7.7",
     "react": "18.3.1",
     "react-dom": "18.3.1",

frontend/src/index.jsx

@@ -24,6 +24,14 @@ import './styles.css';
 import AssetManager, { getAssetFromVersion, resolveDocumentAssetUrl } from './asset_manager';
 import useApiError from './hooks/useApiError';
 import SkeuomorphicWorkspace from './skeuomorphic_ws';
+import {
+  IconChevronRight,
+  IconDownload as TablerDownload,
+  IconFolderFilled,
+  IconPencil,
+  IconTagFilled,
+  IconTrash,
+} from '@tabler/icons-react';
 
 const runtimeApiBase =
   typeof window !== 'undefined' && window.__PAPERCRATE_API_BASE_URL
@@ -175,150 +183,6 @@ const getTagColorStyle = (hex) => {
   };
 };
 
-
-const IconChevronRight = ({ className }) => (
-  <svg
-    className={className ? `icon ${className}` : 'icon'}
-    viewBox="0 0 24 24"
-    role="img"
-    aria-hidden="true"
-    focusable="false"
-  >
-    <path
-      d="M9 6l6 6-6 6"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const IconTrash = ({ className }) => (
-  <svg
-    className={className ? `icon ${className}` : 'icon'}
-    viewBox="0 0 24 24"
-    role="img"
-    aria-hidden="true"
-    focusable="false"
-  >
-    <path
-      d="M4 7h16"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M10 11v6m4-6v6"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M9 7V4h6v3"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const IconDownload = ({ className }) => (
-  <svg
-    className={className ? `icon ${className}` : 'icon'}
-    viewBox="0 0 24 24"
-    role="img"
-    aria-hidden="true"
-    focusable="false"
-  >
-    <path
-      d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M7 11l5 5 5-5"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M12 5v11"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const IconEdit = ({ className }) => (
-  <svg
-    className={className ? `icon ${className}` : 'icon'}
-    viewBox="0 0 24 24"
-    role="img"
-    aria-hidden="true"
-    focusable="false"
-  >
-    <path
-      d="M12 20h9"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const IconFolder = ({ className }) => (
-  <svg
-    className={className ? `icon ${className}` : 'icon'}
-    viewBox="0 0 24 24"
-    role="img"
-    aria-hidden="true"
-    focusable="false"
-  >
-    <path
-      d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.6"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
 const createRootNode = () => ({
   id: 'root',
   name: DEFAULT_FOLDER_NAME,
@@ -386,10 +250,20 @@ const FolderNode = ({
   onFolderDragEnd,
   draggingFolderId,
 }) => {
-  const canToggle = node.id === 'root' || node.children.length > 0 || !node.loaded;
+  const isRoot = node.id === 'root';
-  const icon = canToggle ? <IconChevronRight className="toggle-icon" /> : null;
+  const hasChildren = node.children.length > 0;
-  const canDrag = node.id !== 'root';
+  const canToggle = !isRoot && (hasChildren || !node.loaded);
+  const showChevron = !isRoot && hasChildren;
+  const icon = showChevron ? (
+    <IconChevronRight className="icon toggle-icon" size="1em" stroke={1.6} />
+  ) : null;
+  const canDrag = !isRoot;
   const isDragging = draggingFolderId === node.id;
+  const isExpanded = isRoot ? true : Boolean(node.expanded);
+  const rowClasses = ['folder-row'];
+  if (isSelected) {
+    rowClasses.push('active');
+  }
 
   const handleToggleClick = (event) => {
     event.stopPropagation();
@@ -401,7 +275,7 @@ const FolderNode = ({
   return (
     <li className={`folder-node${isDragging ? ' is-dragging' : ''}`}>
       <div
-        className={`folder-row${isSelected ? ' active' : ''}`}
+        className={rowClasses.join(' ')}
         draggable={canDrag}
         onClick={() => onSelect(node.id)}
         onDragOver={(event) => onDragOver(event, node.id)}
@@ -417,13 +291,22 @@ const FolderNode = ({
           }
         }}
       >
-        <span
+        {!isRoot && (
-          className={`toggle${canToggle ? '' : ' invisible'}${node.expanded ? ' expanded' : ''}`}
+          <span
-          onClick={handleToggleClick}
+            className={`toggle${showChevron ? '' : ' invisible'}${isExpanded ? ' expanded' : ''}`}
-        >
+            onClick={handleToggleClick}
-          {icon}
+          >
+            {icon}
+          </span>
+        )}
+        <span className="name">
+          <IconFolderFilled
+            className="icon icon--fill folder-icon"
+            size="1em"
+            stroke={0}
+          />
+          {node.name}
         </span>
-        <span className="name">{node.name}</span>
         {node.id !== 'root' && (
           <button
             type="button"
@@ -435,12 +318,12 @@ const FolderNode = ({
             title="Delete folder"
             aria-label={`Delete folder ${node.name}`}
           >
-            <IconTrash className="icon-trash" />
+            <IconTrash className="icon icon-trash" size="1em" stroke={1.6} />
           </button>
         )}
       </div>
-      {node.expanded && node.children.length > 0 && (
+      {isExpanded && node.children.length > 0 && (
-        <ul className="folder-children">
+        <ul className={`folder-children${depth === 0 ? ' folder-children--level1' : ''}`}>
           {renderChildren(node.children, depth + 1)}
         </ul>
       )}
@@ -530,6 +413,8 @@ const DocumentsTable = ({
   breadcrumbs,
   onRefresh,
   onShowSkeuoWorkspace = () => {},
+  onRequestCreateFolder = () => {},
+  creatingFolder = false,
   subfolders,
   documents,
   searchResults,
@@ -654,6 +539,13 @@ const DocumentsTable = ({
           )}
         </div>
         <div className="header-actions">
+          <button
+            type="button"
+            onClick={onRequestCreateFolder}
+            disabled={creatingFolder}
+          >
+            {creatingFolder ? 'Creating…' : 'New folder'}
+          </button>
           <button className="secondary" onClick={onRefresh}>
             Refresh
           </button>
@@ -732,7 +624,11 @@ const DocumentsTable = ({
                       >
                         <td className="thumb-cell">
                           <div className="thumb-placeholder icon">
-                            <IconFolder className="icon-inline" />
+                            <IconFolderFilled
+                              className="icon icon--fill icon-inline"
+                              size="1.1em"
+                              stroke={0}
+                            />
                           </div>
                         </td>
                         <td>{folder.name}</td>
@@ -836,7 +732,11 @@ const DocumentsTable = ({
                               onAuxClick={(event) => event.stopPropagation()}
                               onContextMenu={(event) => event.stopPropagation()}
                             >
-                              <IconDownload className="icon-inline" />
+                            <TablerDownload
+                              className="icon icon-inline"
+                              size="1em"
+                              stroke={1.6}
+                            />
                               <span>Download</span>
                             </a>
                           ) : (
@@ -1222,7 +1122,7 @@ const DetailPanel = ({
                 aria-label="Edit title"
                 title="Edit title"
               >
-                <IconEdit className="icon-inline" />
+                <IconPencil className="icon icon-inline" size="1em" stroke={1.6} />
               </button>
             </>
           )}
@@ -1266,7 +1166,7 @@ const DetailPanel = ({
               }
             }}
           >
-            <IconDownload className="icon-inline" />
+            <TablerDownload className="icon icon-inline" size="1em" stroke={1.6} />
             <span>Download</span>
           </a>
           <button
@@ -1507,7 +1407,7 @@ const PreviewWorkspace = ({
               }
             }}
           >
-            <IconDownload className="icon-inline" />
+            <TablerDownload className="icon icon-inline" size="1em" stroke={1.6} />
             <span>Download</span>
           </a>
           <button
@@ -1547,7 +1447,6 @@ const Sidebar = ({
   onDrop,
   onDragOver,
   onDragLeave,
-  onCreateFolder,
   onDeleteFolder,
   selectedFolder,
   onFolderDragStart,
@@ -1603,43 +1502,38 @@ const Sidebar = ({
 
   return (
     <aside className="sidebar column">
-      <div className="column-header">
+      <div className="sidebar-section sidebar-section--folders">
-        <h2>Folders</h2>
+        <div className="sidebar-section__header">
+          <h3>Folders</h3>
+        </div>
+        <ul className="folder-tree">
+          {rootNode && renderNodes([rootNode.id], 0)}
+        </ul>
       </div>
-      <div className="column-body">
+      <div className="sidebar-section">
-        <form
+        <div className="sidebar-section__header">
-          className="new-folder-form inline"
+          <h3>Tags</h3>
-          onSubmit={(event) => {
+          <span className="meta">{tags.length}</span>
-            event.preventDefault();
+        </div>
-            const input = event.currentTarget.elements['folder-name'];
+        <span
-            const value = input.value.trim();
+          role="button"
-            if (!value) return;
+          tabIndex={0}
-            onCreateFolder(value, () => {
+          className={`sidebar-item${isTagsRoute ? ' active' : ''}`}
-              input.value = '';
+          onClick={handleShowTags}
-            });
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+              event.preventDefault();
+              handleShowTags();
+            }
           }}
         >
-          <input name="folder-name" placeholder="New folder name" required />
+          <IconTagFilled
-          <button type="submit">Create</button>
+            className="icon icon--fill sidebar-item__icon"
-        </form>
+            size="1em"
-        <div className="folder-tree-scroller">
+            stroke={0}
-          <ul className="folder-tree">
+          />
-            {rootNode && renderNodes([rootNode.id], 0)}
+          <span>All tags</span>
-          </ul>
+        </span>
-        </div>
-        <div className="sidebar-section">
-          <div className="sidebar-section__header">
-            <h3>Tags</h3>
-            <span className="meta">{tags.length}</span>
-          </div>
-          <button
-            type="button"
-            className={`sidebar-link${isTagsRoute ? ' active' : ''}`}
-            onClick={handleShowTags}
-          >
-            All tags
-          </button>
-        </div>
       </div>
     </aside>
   );
@@ -1896,6 +1790,11 @@ const AppLayout = () => {
     [reportApiError],
   );
   const [loading, setLoading] = useState(false);
+  const [isCreateFolderModalOpen, setCreateFolderModalOpen] = useState(false);
+  const [newFolderName, setNewFolderName] = useState('');
+  const [createFolderError, setCreateFolderError] = useState('');
+  const [creatingFolder, setCreatingFolder] = useState(false);
+  const createFolderInputRef = useRef(null);
   const [folderNodes, setFolderNodes] = useState(() => {
     const rootNode = createRootNode();
     return new Map([[rootNode.id, rootNode]]);
@@ -2063,6 +1962,7 @@ const AppLayout = () => {
   const bootstrapInitializedRef = useRef(false);
   const selectionInitializedRef = useRef(false);
   const dragCounterRef = useRef(0);
+  const prefetchedFoldersRef = useRef(new Set(['root']));
   const selectionAnchorRef = useRef(routeDocumentId);
   const selectionOrderRef = useRef(initialSelection);
 
@@ -2098,6 +1998,7 @@ const AppLayout = () => {
     setPreviewEntries(() => new Map());
     previewInflightRef.current = new Map();
     dragCounterRef.current = 0;
+    prefetchedFoldersRef.current = new Set(['root']);
     breadcrumbFetchRef.current = new Set();
     bootstrapInitializedRef.current = false;
     selectionInitializedRef.current = false;
@@ -2613,6 +2514,7 @@ const AppLayout = () => {
           name: folderId === 'root' ? DEFAULT_FOLDER_NAME : data.folder?.name || existingNode.name,
           parentId: data.folder?.parent_id ?? existingNode.parentId ?? 'root',
           children: childIds,
+          expanded: folderId === 'root' ? true : existingNode.expanded,
           loaded: true,
         });
 
@@ -2641,6 +2543,33 @@ const AppLayout = () => {
     },
     [assetManager, folderContents],
   );
+  const greedyPrefetchFolders = useCallback(
+    async (startIds) => {
+      const queue = Array.isArray(startIds) ? [...startIds] : [];
+      const visited = prefetchedFoldersRef.current;
+
+      while (queue.length) {
+        const nextId = queue.shift();
+        if (!nextId || visited.has(nextId)) {
+          continue;
+        }
+        visited.add(nextId);
+
+        try {
+          const contents = await ensureFolderData(nextId, { force: false });
+          const subfolders = Array.isArray(contents?.subfolders) ? contents.subfolders : [];
+          subfolders.forEach((entry) => {
+            if (entry?.id && !visited.has(entry.id)) {
+              queue.push(entry.id);
+            }
+          });
+        } catch (error) {
+          console.warn('[Folders] Failed to prefetch folder tree for', nextId, error);
+        }
+      }
+    },
+    [ensureFolderData],
+  );
 
   const isInvalidFolderDrop = useCallback(
     (sourceId, targetId) => {
@@ -2882,6 +2811,13 @@ const AppLayout = () => {
       if (showLoading) setLoading(true);
       try {
         const contents = await ensureFolderData(targetId, { force: true });
+        if (targetId !== 'root') {
+          try {
+            await ensureFolderData('root', { force: false });
+          } catch (error) {
+            console.warn('Failed to refresh root folder tree', error);
+          }
+        }
         const nextSelectedId = applySelectedFolder(targetId, contents);
         setSearchResults(null);
         if (nextSelectedId) {
@@ -2896,6 +2832,28 @@ const AppLayout = () => {
     [ensureFolderData, applySelectedFolder, ensureDocumentDetail, notifyApiError],
   );
 
+  useEffect(() => {
+    if (!folderContents || typeof folderContents.forEach !== 'function') {
+      return;
+    }
+
+    const pendingIds = [];
+    folderContents.forEach((contents) => {
+      const subfolders = Array.isArray(contents?.subfolders) ? contents.subfolders : [];
+      subfolders.forEach((entry) => {
+        if (entry?.id && !prefetchedFoldersRef.current.has(entry.id)) {
+          pendingIds.push(entry.id);
+        }
+      });
+    });
+
+    if (!pendingIds.length) {
+      return;
+    }
+
+    greedyPrefetchFolders(pendingIds).catch(() => {});
+  }, [folderContents, greedyPrefetchFolders]);
+
   const selectFolder = useCallback(
     async (folderId, { replace = false, immediate = false } = {}) => {
       const targetId = folderId && folderId !== 'root' ? folderId : 'root';
@@ -4284,17 +4242,18 @@ const AppLayout = () => {
     async (name, onSuccess) => {
       if (!token) {
         setStatusMessage('Log in to create folders.', 'error');
-        return;
+        return false;
       }
       if (!name.trim()) {
         setStatusMessage('Folder name cannot be empty.', 'error');
-        return;
+        return false;
       }
       const payload = {
         name: name.trim(),
         parent_id: selectedFolder === 'root' ? null : selectedFolder,
       };
       setLoading(true);
+      let succeeded = false;
       try {
         const { data } = await api.post('/folders', payload);
         onSuccess();
@@ -4321,16 +4280,94 @@ const AppLayout = () => {
           return next;
         });
         await ensureFolderData(selectedFolder, { force: true });
+        succeeded = true;
       } catch (error) {
         const message = error.response?.data?.error || 'Failed to create folder.';
         notifyApiError(error, message);
+        succeeded = false;
       } finally {
         setLoading(false);
       }
+      return succeeded;
     },
     [token, selectedFolder, ensureFolderData, notifyApiError, setStatusMessage],
   );
 
+  const openCreateFolderModal = useCallback(() => {
+    setNewFolderName('');
+    setCreateFolderError('');
+    setCreateFolderModalOpen(true);
+  }, []);
+
+  const closeCreateFolderModal = useCallback(() => {
+    if (creatingFolder) {
+      return;
+    }
+    setCreateFolderModalOpen(false);
+    setNewFolderName('');
+    setCreateFolderError('');
+  }, [creatingFolder]);
+
+  const handleCreateFolderSubmit = useCallback(
+    async (event) => {
+      event.preventDefault();
+      const trimmed = newFolderName.trim();
+      if (!trimmed) {
+        setCreateFolderError('Folder name cannot be empty.');
+        return;
+      }
+
+      if (!token) {
+        setCreateFolderError('Log in to create folders.');
+        return;
+      }
+
+      setCreatingFolder(true);
+      setCreateFolderError('');
+
+      try {
+        const success = await handleFolderCreate(trimmed, () => {
+          setCreateFolderModalOpen(false);
+          setNewFolderName('');
+          setCreateFolderError('');
+        });
+        if (!success) {
+          setCreateFolderError('Unable to create folder. Check the status message for details.');
+        }
+      } finally {
+        setCreatingFolder(false);
+      }
+    },
+    [newFolderName, handleFolderCreate, token],
+  );
+
+  useEffect(() => {
+    if (!isCreateFolderModalOpen) {
+      return;
+    }
+    const node = createFolderInputRef.current;
+    if (node) {
+      node.focus();
+      node.select();
+    }
+  }, [isCreateFolderModalOpen]);
+
+  useEffect(() => {
+    if (!isCreateFolderModalOpen) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        closeCreateFolderModal();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isCreateFolderModalOpen, closeCreateFolderModal]);
+
   useEffect(() => {
     if (!token) return undefined;
 
@@ -4555,6 +4592,9 @@ const AppLayout = () => {
           notifyApiError(error, 'Failed to load folder.');
         }
       }
+      if (folderId === 'root') {
+        return;
+      }
       setFolderNodes((prev) => {
         const next = new Map(prev);
         const current = next.get(folderId);
@@ -4991,7 +5031,6 @@ const AppLayout = () => {
     onDrop: folderClickHandlers.onDrop,
     onDragOver: folderClickHandlers.onDragOver,
     onDragLeave: folderClickHandlers.onDragLeave,
-    onCreateFolder: handleFolderCreate,
     onDeleteFolder: handleFolderDelete,
     selectedFolder,
     onFolderDragStart: handleFolderDragStart,
@@ -5018,6 +5057,8 @@ const AppLayout = () => {
     breadcrumbs,
     onRefresh: refreshCurrentFolder,
     onShowSkeuoWorkspace: showSkeuoWorkspace,
+    onRequestCreateFolder: openCreateFolderModal,
+    creatingFolder,
     subfolders: currentSubfolders,
     documents,
     searchResults,
@@ -5211,6 +5252,54 @@ const AppLayout = () => {
           </div>
         </header>
         <Outlet />
+        {isCreateFolderModalOpen && (
+          <div
+            className="modal-backdrop"
+            role="presentation"
+            onClick={closeCreateFolderModal}
+          >
+            <div
+              className="modal"
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby="create-folder-title"
+              onClick={(event) => event.stopPropagation()}
+            >
+              <h3 id="create-folder-title">Create folder</h3>
+              <form className="modal__form" onSubmit={handleCreateFolderSubmit}>
+                <label htmlFor="new-folder-name">Folder name</label>
+                <input
+                  id="new-folder-name"
+                  ref={createFolderInputRef}
+                  value={newFolderName}
+                  onChange={(event) => {
+                    setNewFolderName(event.target.value);
+                    if (createFolderError) {
+                      setCreateFolderError('');
+                    }
+                  }}
+                  placeholder="Enter folder name"
+                  disabled={creatingFolder}
+                  autoComplete="off"
+                />
+                {createFolderError && <p className="modal__error">{createFolderError}</p>}
+                <div className="modal__actions">
+                  <button
+                    type="button"
+                    className="secondary"
+                    onClick={closeCreateFolderModal}
+                    disabled={creatingFolder}
+                  >
+                    Cancel
+                  </button>
+                  <button type="submit" disabled={creatingFolder}>
+                    {creatingFolder ? 'Creating…' : 'Create'}
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        )}
       </div>
     </AppShellContext.Provider>
   );

frontend/src/skeuomorphic_ws.css

@@ -12,7 +12,7 @@
   flex-direction: column;
   min-height: 0;
   position: relative;
-  background: #7a7c7c;
+  background-color: var(--surface-subtle);
 }
 
 .skeuo-header {
@@ -21,7 +21,7 @@
   justify-content: space-between;
   gap: 1rem;
   padding: 0.75rem 1rem 0.5rem;
-  background-color: var(--surface-subtle, rgba(255, 255, 255, 0.08));
+  background-color: var(--surface-subtle);
 }
 
 .skeuo-header__meta {
@@ -277,6 +277,20 @@ body.skeuo-cursor-remove * {
   overflow: hidden;
 }
 
+.skeuo-item__card--empty {
+  background:
+    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.32), transparent 60%),
+    radial-gradient(circle at 72% 78%, rgba(0, 0, 0, 0.08), transparent 65%),
+    linear-gradient(135deg, #e6e1d6 0%, #d2cdc2 100%);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
 .skeuo-item__card img {
 }
 
@@ -286,3 +300,25 @@ body.skeuo-cursor-remove * {
   letter-spacing: normal;
   color: var(--muted);
 }
+
+.skeuo-item__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  gap: 0.5rem;
+  padding: 1rem;
+  text-align: center;
+}
+
+.skeuo-item__title {
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: #3b3b3b;
+  max-width: 90%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

frontend/src/skeuomorphic_ws.jsx

@@ -22,13 +22,10 @@ const TAG_MIME_TYPES = ['application/x-papercrate-tag', 'text/papercrate-tag'];
 const resolveSizeKey = (doc) =>
   doc?.id || doc?.document_id || doc?.uuid || doc?.original_name || doc?.title || 'doc';
 
-const CARD_WIDTH_MIN = 200;
+const CARD_MIN = 240;
-const CARD_WIDTH_MAX = 260;
+const CARD_MAX = 340;
-const CARD_HEIGHT_MIN = 240;
+const EMPTY_CARD_ASPECT = 1.4;
-const CARD_HEIGHT_MAX = 340;
+const ZOOM_FILL_RATIO = 0.99;
-const CARD_ASPECT_MIN = 0.8; // height / width
-const CARD_ASPECT_MAX = 1.35;
-const ZOOM_FILL_RATIO = 0.97;
 const ZOOM_MIN_SCALE = 1.05;
 const ZOOM_MAX_SCALE = 5;
 const TAG_REMOVE_DISTANCE = 160;
@@ -554,54 +551,40 @@ const SkeuomorphicWorkspace = ({
 
     const intrinsic = resolvePreviewDimensions(doc);
     if (intrinsic?.width && intrinsic?.height) {
-      const ratio = intrinsic.height / intrinsic.width || 1;
       width = intrinsic.width;
       height = intrinsic.height;
-
-      // scale down to fit within max bounds
-      if (width > CARD_WIDTH_MAX || height > CARD_HEIGHT_MAX) {
-        const scale = Math.min(CARD_WIDTH_MAX / width, CARD_HEIGHT_MAX / height);
-        width *= scale;
-        height *= scale;
-      }
-
-      // scale up to satisfy minimum bounds while respecting ratio
-      if (width < CARD_WIDTH_MIN || height < CARD_HEIGHT_MIN) {
-        const scale = Math.max(CARD_WIDTH_MIN / width, CARD_HEIGHT_MIN / height);
-        width *= scale;
-        height *= scale;
-        if (width > CARD_WIDTH_MAX || height > CARD_HEIGHT_MAX) {
-          const downScale = Math.min(CARD_WIDTH_MAX / width, CARD_HEIGHT_MAX / height);
-          width *= downScale;
-          height *= downScale;
-        }
-      }
-
-      width = clamp(width, CARD_WIDTH_MIN, CARD_WIDTH_MAX);
-      height = clamp(height, CARD_HEIGHT_MIN, CARD_HEIGHT_MAX);
     } else {
-      const widthSeed = seededRandom(`${key}:width`);
+      const seed = seededRandom(`${key}:size`);
-      const ratioSeed = seededRandom(`${key}:ratio`);
+      width = CARD_MIN + seed * (Math.min(CARD_MAX, CARD_MAX / EMPTY_CARD_ASPECT) - CARD_MIN);
-      const ratio = CARD_ASPECT_MIN + ratioSeed * (CARD_ASPECT_MAX - CARD_ASPECT_MIN);
+      width = clamp(width, CARD_MIN, Math.min(CARD_MAX, CARD_MAX / EMPTY_CARD_ASPECT));
-      width = CARD_WIDTH_MIN + widthSeed * (CARD_WIDTH_MAX - CARD_WIDTH_MIN);
+      height = width * EMPTY_CARD_ASPECT;
-      height = width * ratio;
-
-      if (width > CARD_WIDTH_MAX || height > CARD_HEIGHT_MAX) {
-        const scale = Math.min(CARD_WIDTH_MAX / width, CARD_HEIGHT_MAX / height);
-        width *= scale;
-        height *= scale;
-      }
-
-      if (width < CARD_WIDTH_MIN || height < CARD_HEIGHT_MIN) {
-        const scale = Math.max(CARD_WIDTH_MIN / width, CARD_HEIGHT_MIN / height);
-        width *= scale;
-        height *= scale;
-      }
-
-      width = clamp(width, CARD_WIDTH_MIN, CARD_WIDTH_MAX);
-      height = clamp(height, CARD_HEIGHT_MIN, CARD_HEIGHT_MAX);
     }
 
+    if (!Number.isFinite(width) || width <= 0) {
+      width = CARD_MIN;
+    }
+    if (!Number.isFinite(height) || height <= 0) {
+      height = CARD_MIN;
+    }
+
+    const scaleDown = Math.min(1, CARD_MAX / width, CARD_MAX / height);
+    width *= scaleDown;
+    height *= scaleDown;
+
+    const minDim = Math.min(width, height);
+    if (minDim < CARD_MIN) {
+      const scaleUp = CARD_MIN / minDim;
+      width *= scaleUp;
+      height *= scaleUp;
+
+      const adjust = Math.min(1, CARD_MAX / width, CARD_MAX / height);
+      width *= adjust;
+      height *= adjust;
+    }
+
+    width = clamp(width, CARD_MIN, CARD_MAX);
+    height = clamp(height, CARD_MIN, CARD_MAX);
+
     const size = { width, height };
     docSizeMapRef.current.set(key, size);
     return size;
@@ -636,8 +619,8 @@ const SkeuomorphicWorkspace = ({
     (doc, cardWidth, cardHeight) => {
       const canvasWidth = canvasSize.width || DEFAULT_CANVAS_WIDTH;
       const canvasHeight = canvasSize.height || DEFAULT_CANVAS_HEIGHT;
-      const safeCardWidth = cardWidth || CARD_WIDTH_MIN;
+      const safeCardWidth = cardWidth || CARD_MIN;
-      const safeCardHeight = cardHeight || CARD_HEIGHT_MIN;
+      const safeCardHeight = cardHeight || CARD_MIN;
       const usableWidth = Math.max(canvasWidth - CANVAS_PADDING * 2, safeCardWidth);
       const usableHeight = Math.max(canvasHeight - CANVAS_PADDING * 2, safeCardHeight);
       const viewportTargetWidth = usableWidth * ZOOM_FILL_RATIO;
@@ -1406,6 +1389,7 @@ const SkeuomorphicWorkspace = ({
             const tagsStyle = { '--tag-scale': inverseTagScale };
             const previewUrl = resolvePreviewUrl(doc);
             const imageUrl = previewUrl;
+            const hasPreview = Boolean(imageUrl);
             const title = doc.title || doc.original_name || 'Document';
             const dragging = draggingId === doc.id;
             const tags = Array.isArray(doc.tags) ? doc.tags : [];
@@ -1422,6 +1406,8 @@ const SkeuomorphicWorkspace = ({
             if (dropActive) itemClasses.push('is-tag-target');
             if (dropPending) itemClasses.push('is-tag-pending');
             if (!matchesFilter) itemClasses.push('is-filtered-out');
+            const cardClasses = ['skeuo-item__card'];
+            if (!hasPreview) cardClasses.push('skeuo-item__card--empty');
             const docTagTokens = docTagKeys.join(' ');
             return (
               <div
@@ -1458,11 +1444,16 @@ const SkeuomorphicWorkspace = ({
                 }}
               >
                 <div className="skeuo-item__body" style={bodyStyle}>
-                  <div className="skeuo-item__card">
+                  <div className={cardClasses.join(' ')}>
-                    {imageUrl ? (
+                    {hasPreview ? (
                       <img src={imageUrl} alt={title} />
                     ) : (
-                      <div className="skeuo-item__placeholder">DOC</div>
+                      <div className="skeuo-item__empty">
+                        <div className="skeuo-item__placeholder">DOC</div>
+                        <div className="skeuo-item__title" title={title}>
+                          {title}
+                        </div>
+                      </div>
                     )}
                   </div>
                   {tags.length > 0 && (

frontend/src/styles.css

@@ -1,15 +1,56 @@
 :root {
   color-scheme: light;
-  --bg: #f4f5f7;
+  /* Neutrals */
+  --bg: #f6f7f9;
   --surface: #ffffff;
-  --surface-subtle: #f8f9fb;
+  --surface-subtle: #fbfbfd;
-  --fg: #1b1f24;
+  --fg: #1e2127;
-  --muted: #5f6673;
+  --muted: #646a75;
-  --border: #d0d5dd;
+  --border: #dde1e6;
-  --accent: #2b5cff;
+  --shadow-faint: rgba(0, 0, 0, 0.06);
-  --accent-soft: rgba(43, 92, 255, 0.12);
+  --shadow-soft: rgba(0, 0, 0, 0.12);
-  --danger: #d92c20;
+  --shadow-medium: rgba(0, 0, 0, 0.18);
-  --success: #12805a;
+  --overlay-backdrop: rgba(30, 33, 39, 0.45);
+  --overlay-shadow: rgba(30, 33, 39, 0.18);
+
+  /* Accent (primary action, selection, focus) */
+  --accent: #3f6ad8;
+  --accent-hover: #365cb9;
+  --on-accent: #ffffff;
+
+  /* Soft tints & outlines (for chips, row hovers, subtle fills) */
+  --accent-soft: rgba(63, 106, 216, 0.12);
+  --accent-elevated: rgba(63, 106, 216, 0.16);
+  --accent-elevated-strong: rgba(63, 106, 216, 0.22);
+  --accent-outline: rgba(63, 106, 216, 0.45);
+  --accent-outline-strong: rgba(63, 106, 216, 0.9);
+  --accent-focus: rgba(63, 106, 216, 0.85);
+
+  /* States specific to explorer UX */
+  --row-hover-bg: rgba(63, 106, 216, 0.06);
+  --row-active-bg: rgba(63, 106, 216, 0.12);
+  --sidebar-hover-bg: rgba(63, 106, 216, 0.08);
+  --sidebar-active-bg: rgba(63, 106, 216, 0.16);
+  --selection-ring: #9bb6ff;
+
+  /* Semantic colors */
+  --success: #2e7d6b;
+  --success-subtle: rgba(46, 125, 107, 0.12);
+  --warning: #b98a2e;
+  --warning-subtle: rgba(185, 138, 46, 0.12);
+  --danger: #cc5a52;
+  --danger-border: rgba(204, 90, 82, 0.45);
+  --danger-soft: rgba(204, 90, 82, 0.12);
+  --danger-subtle: rgba(204, 90, 82, 0.08);
+
+  /* File-type accents (used for icons/labels) */
+  --file-folder: #e6a23c;   /* folders */
+  --file-doc: #3f6ad8;      /* docs */
+  --file-code: #5b9b5f;     /* code */
+  --file-image: #9a6bd1;    /* images */
+  --file-audio: #db6f9a;    /* audio */
+  --file-archive: #9c7a59;  /* zips */
+
   font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 15px;
 }
@@ -37,7 +78,7 @@ button {
   border: 1px solid transparent;
   padding: 0.35rem 0.85rem;
   background: var(--accent);
-  color: #fff;
+  color: var(--on-accent);
   cursor: pointer;
   font-weight: 500;
   transition: background 0.15s ease, border-color 0.15s ease;
@@ -49,7 +90,7 @@ button[disabled] {
 }
 
 button:hover:not([disabled]) {
-  background: #2047d9;
+  background: var(--accent-hover);
 }
 
 a.button-link {
@@ -61,7 +102,7 @@ a.button-link {
   border: 1px solid transparent;
   padding: 0.35rem 0.85rem;
   background: var(--accent);
-  color: #fff;
+  color: var(--on-accent);
   text-decoration: none;
   font-weight: 500;
   transition: background 0.15s ease, border-color 0.15s ease;
@@ -73,7 +114,7 @@ a.button-link[aria-disabled='true'] {
 }
 
 a.button-link:hover:not([aria-disabled='true']) {
-  background: #2047d9;
+  background: var(--accent-hover);
 }
 
 button.secondary {
@@ -89,12 +130,12 @@ button.secondary:hover:not([disabled]) {
 button.danger {
   background: transparent;
   color: var(--danger);
-  border-color: rgba(217, 44, 32, 0.45);
+  border-color: var(--danger-border);
 }
 
 button.danger:hover:not([disabled]) {
   border-color: var(--danger);
-  background: rgba(217, 44, 32, 0.08);
+  background: var(--danger-subtle);
 }
 
 button.icon-button {
@@ -150,6 +191,11 @@ button.icon-button.ghost:hover:not([disabled]) {
   fill: none;
 }
 
+.icon--fill path {
+  stroke: none;
+  fill: currentColor;
+}
+
 .app-shell {
   height: 100%;
   display: flex;
@@ -327,7 +373,7 @@ button.icon-button.ghost:hover:not([disabled]) {
 }
 
 .tags-table tr.editing {
-  background: rgba(43, 92, 255, 0.08);
+  background: var(--sidebar-hover-bg);
 }
 
 .tags-table__label {
@@ -342,7 +388,7 @@ button.icon-button.ghost:hover:not([disabled]) {
   width: 1rem;
   height: 1rem;
   border-radius: 2px;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 0 0 1px var(--shadow-faint);
 }
 
 .tags-panel__error {
@@ -501,22 +547,31 @@ button.icon-button.ghost:hover:not([disabled]) {
   cursor: pointer;
   color: var(--fg);
   transition: background 0.12s ease, color 0.12s ease;
-  font-size: 0.78rem;
 }
 
 .folder-row span.name {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.folder-row span.name .folder-icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  color: var(--accent);
+}
+
 .folder-row:hover {
-  background: var(--surface-subtle);
+  background: var(--sidebar-hover-bg);
 }
 
 .folder-row.active {
-  background: rgba(43, 92, 255, 0.12);
+  background: var(--sidebar-active-bg);
   color: var(--fg);
 }
 
@@ -563,6 +618,10 @@ button.icon-button.ghost:hover:not([disabled]) {
   padding: 0;
 }
 
+.folder-children.folder-children--level1 {
+  margin-left: 0;
+}
+
 .sidebar-section {
   margin-top: 1rem;
   display: flex;
@@ -570,6 +629,21 @@ button.icon-button.ghost:hover:not([disabled]) {
   gap: 0.4rem;
 }
 
+.sidebar {
+  gap: 0.28rem;
+  overflow-y: auto;
+}
+
+.sidebar-section:first-of-type,
+.sidebar-section--folders {
+  margin-top: 0;
+}
+
+.sidebar-section--folders {
+  display: flex;
+  flex-direction: column;
+}
+
 .sidebar-section__header {
   display: flex;
   align-items: center;
@@ -587,28 +661,47 @@ button.icon-button.ghost:hover:not([disabled]) {
   color: inherit;
 }
 
-.sidebar-link {
+.sidebar-item {
   border: none;
   background: transparent;
-  padding: 0.3rem 0.3rem;
+  padding: 0.16rem 0.26rem;
   text-align: left;
-  font-size: 0.82rem;
   color: var(--fg);
-  border-radius: 3px;
+  border-radius: 2px;
   cursor: pointer;
   transition: background 0.12s ease, color 0.12s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.38rem;
+  width: 100%;
 }
 
-.sidebar-link:hover {
+.sidebar-item:hover {
-  background: var(--surface-subtle);
+  background: var(--sidebar-hover-bg);
 }
 
-.sidebar-link.active {
+.sidebar-item.active {
-  background: rgba(43, 92, 255, 0.12);
+  background: var(--sidebar-active-bg);
   color: var(--accent);
   font-weight: 600;
 }
 
+.sidebar-item:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.sidebar-item__icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  color: var(--accent);
+}
+
+.sidebar-item.active .sidebar-item__icon {
+  color: currentColor;
+}
+
 .folder-row.is-drop-target {
   outline: 2px dashed var(--accent);
   outline-offset: 2px;
@@ -685,7 +778,7 @@ button.icon-button.ghost:hover:not([disabled]) {
   height: 48px;
   object-fit: cover;
   border-radius: 3px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
+  box-shadow: 0 1px 3px var(--shadow-medium);
 }
 
 .thumb-placeholder {
@@ -739,8 +832,8 @@ button.icon-button.ghost:hover:not([disabled]) {
 }
 
 .documents-panel tbody tr.folder.focused {
-  box-shadow: inset 2px 0 0 rgba(43, 92, 255, 0.45);
+  box-shadow: inset 2px 0 0 var(--accent-outline);
-  background: rgba(43, 92, 255, 0.08);
+  background: var(--sidebar-hover-bg);
 }
 
 .documents-panel tbody tr.document {
@@ -748,8 +841,8 @@ button.icon-button.ghost:hover:not([disabled]) {
 }
 
 .documents-panel tbody tr.document.selected {
-  background: rgba(43, 92, 255, 0.12);
+  background: var(--accent-soft);
-  box-shadow: inset 2px 0 0 rgba(43, 92, 255, 0.9);
+  box-shadow: inset 2px 0 0 var(--accent-outline-strong);
 }
 
 .documents-panel tbody tr.document,
@@ -760,7 +853,7 @@ button.icon-button.ghost:hover:not([disabled]) {
 }
 
 .documents-panel tbody tr.document.focused:not(.selected) {
-  box-shadow: inset 2px 0 0 rgba(43, 92, 255, 0.45);
+  box-shadow: inset 2px 0 0 var(--accent-outline);
 }
 
 .doc-name {
@@ -980,7 +1073,7 @@ button.icon-button.ghost:hover:not([disabled]) {
   align-items: center;
   justify-content: center;
   transition: transform 120ms ease;
-  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
+  filter: drop-shadow(0 2px 6px var(--shadow-soft));
   transform-origin: center;
   border-radius: 6px;
   overflow: hidden;
@@ -1018,10 +1111,10 @@ button.icon-button.ghost:hover:not([disabled]) {
 
 .preview-stack__image:hover,
 .preview-stack__image:focus-visible {
-  outline-color: rgba(24, 119, 242, 0.85);
+  outline-color: var(--accent-focus);
   box-shadow:
-    inset 0 0 0 999px rgba(24, 119, 242, 0.18),
+    inset 0 0 0 999px var(--accent-elevated),
-    0 6px 18px rgba(24, 119, 242, 0.24);
+    0 6px 18px var(--accent-elevated-strong);
   filter: saturate(118%) brightness(1.05);
 }
 
@@ -1127,19 +1220,19 @@ form.inline {
 }
 
 .status-banner.success {
-  background: rgba(18, 128, 90, 0.1);
+  background: var(--success-subtle);
   color: var(--success);
 }
 
 .status-banner.error {
-  background: rgba(217, 44, 32, 0.1);
+  background: var(--danger-soft);
   color: var(--danger);
 }
 
 .drop-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(43, 92, 255, 0.12);
+  background: var(--accent-soft);
   backdrop-filter: blur(4px);
   display: none;
   align-items: center;
@@ -1161,6 +1254,57 @@ form.inline {
   box-shadow: none;
   border: 1px solid var(--border);
 }
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--overlay-backdrop);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  z-index: 3000;
+}
+
+.modal {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  box-shadow: 0 18px 42px var(--overlay-shadow);
+  width: min(360px, 100%);
+  padding: 1.6rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.modal h3 {
+  margin: 0;
+  font-size: 1.15rem;
+  font-weight: 600;
+}
+
+.modal__form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.9rem;
+}
+
+.modal__form label {
+  font-weight: 600;
+  font-size: 0.9rem;
+}
+
+.modal__error {
+  margin: -0.45rem 0 0;
+  font-size: 0.85rem;
+  color: var(--danger);
+}
+
+.modal__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.6rem;
+}
 
 @media (max-width: 1080px) {
   .app-main {
@@ -1187,22 +1331,6 @@ form.inline {
     min-height: auto;
   }
 }
-.sidebar .column-body {
-  gap: 0.28rem;
-}
-
-.new-folder-form {
-  display: flex;
-  gap: 0.45rem;
-}
-
-.folder-tree-scroller {
-  flex: 1;
-  overflow-y: auto;
-  padding-right: 0.4rem;
-  margin-right: -0.4rem;
-  min-height: 0;
-}
 .login-screen {
   min-height: 100vh;
   display: flex;