foo

backend/migrations/202503240003_add_metadata_to_document_versions/down.sql

@@ -0,0 +1,2 @@
+ALTER TABLE document_versions
+    DROP COLUMN metadata;

backend/migrations/202503240003_add_metadata_to_document_versions/up.sql

@@ -0,0 +1,2 @@
+ALTER TABLE document_versions
+    ADD COLUMN metadata JSONB NOT NULL DEFAULT '{}'::jsonb;

backend/migrations/202503240004_drop_folder_path_cache/down.sql

@@ -0,0 +1,2 @@
+ALTER TABLE folders
+    ADD COLUMN path_cache VARCHAR(1000);

backend/migrations/202503240004_drop_folder_path_cache/up.sql

@@ -0,0 +1,2 @@
+ALTER TABLE folders
+    DROP COLUMN path_cache;

frontend/public/folder.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg height="128px" viewBox="0 0 128 128" width="128px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <linearGradient id="a" gradientTransform="matrix(0.45451 0 0 0.455522 -1210.292114 616.172607)" gradientUnits="userSpaceOnUse" x1="2689.251953" x2="2918.069824" y1="-1106.802979" y2="-1106.802979">
+        <stop offset="0" stop-color="#62a0ea"/>
+        <stop offset="0.0576991" stop-color="#afd4ff"/>
+        <stop offset="0.122204" stop-color="#62a0ea"/>
+        <stop offset="0.873306" stop-color="#62a0ea"/>
+        <stop offset="0.955997" stop-color="#c0d5ea"/>
+        <stop offset="1" stop-color="#62a0ea"/>
+    </linearGradient>
+    <path d="m 21.976562 12 c -5.527343 0 -9.976562 4.460938 -9.976562 10 v 86.03125 c 0 5.542969 4.449219 10 9.976562 10 h 84.042969 c 5.53125 0 9.980469 -4.457031 9.980469 -10 v -72.085938 c 0 -6.628906 -5.359375 -12 -11.972656 -12 h -46.027344 c -2.453125 0 -4.695312 -1.386718 -5.796875 -3.582031 l -1.503906 -2.992187 c -1.65625 -3.292969 -5.019531 -5.371094 -8.699219 -5.371094 z m 0 0" fill="#438de6"/>
+    <path d="m 65.976562 36 c -2.746093 0 -5.226562 1.101562 -7.027343 2.890625 c -2.273438 2.253906 -5.382813 5.109375 -8.632813 5.109375 h -28.339844 c -5.527343 0 -9.976562 4.460938 -9.976562 10 v 54.03125 c 0 5.542969 4.449219 10 9.976562 10 h 84.042969 c 5.53125 0 9.980469 -4.457031 9.980469 -10 v -62.03125 c 0 -5.539062 -4.449219 -10 -9.980469 -10 z m 0 0" fill="url(#a)"/>
+    <path d="m 65.976562 32 c -2.746093 0 -5.226562 1.101562 -7.027343 2.890625 c -2.273438 2.253906 -5.382813 5.109375 -8.632813 5.109375 h -28.339844 c -5.527343 0 -9.976562 4.460938 -9.976562 10 v 55.976562 c 0 5.539063 4.449219 10 9.976562 10 h 84.042969 c 5.53125 0 9.980469 -4.460937 9.980469 -10 v -63.976562 c 0 -5.539062 -4.449219 -10 -9.980469 -10 z m 0 0" fill="#a4caee"/>
+</svg>

frontend/src/documents/DocumentsTable.jsx

@@ -1,7 +1,9 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { resolveDocumentAssetUrl } from '../asset_manager';
 import { getTagColorStyle } from '../utils/colors';
-import { DownloadIcon, FolderIcon, EditIcon, ViewListIcon, ViewGridIcon } from '../ui/icons';
+import { DownloadIcon, EditIcon, ViewListIcon, ViewGridIcon } from '../ui/icons';
+
+const FOLDER_ICON_SRC = '/folder.svg';
 
 const TAG_MIME_TYPES = ['application/x-papercrate-tag', 'text/papercrate-tag'];
 
@@ -368,13 +370,16 @@ const DocumentsTable = ({
                       }}
                     >
                       <div className="folder-card__icon">
-                        <FolderIcon className="folder-card__icon-svg" size={128} />
+                        <img
+                          src={FOLDER_ICON_SRC}
+                          alt="Folder"
+                          className="folder-card__icon-svg"
+                        />
                       </div>
                       <div className="folder-card__meta">
                         <div className="folder-card__name" title={folder.name}>
                           {folder.name}
                         </div>
-                        <div className="folder-card__badge">Folder</div>
                       </div>
                     </div>
                   );
@@ -545,7 +550,11 @@ const DocumentsTable = ({
                       >
                         <td className="thumb-cell">
                           <div className="thumb-icon">
-                            <FolderIcon className="icon-inline" size={18} />
+                            <img
+                              src={FOLDER_ICON_SRC}
+                              alt="Folder"
+                              className="thumb-icon__image"
+                            />
                           </div>
                         </td>
                         <td className="doc-list__name">

frontend/src/index.jsx

@@ -1295,13 +1295,18 @@ const AppLayout = () => {
 
 
   const ensureFolderData = useCallback(
-    async (folderId, { force = false } = {}) => {
+    async (folderId, { force = false, includeDocuments = true } = {}) => {
       if (!force && folderContents.has(folderId)) {
         return folderContents.get(folderId);
       }
 
       const path = folderId === 'root' ? 'root' : folderId;
-      const { data } = await api.get(`/folders/${path}/contents`);
+      const params = includeDocuments
+        ? undefined
+        : { include_documents: false };
+      const { data } = await api.get(`/folders/${path}/contents`, {
+        params,
+      });
       const hydrated = assetManager.hydrateFolderContents(data);
 
       setFolderNodes((prev) => {
@@ -1363,7 +1368,10 @@ const AppLayout = () => {
         visited.add(nextId);
 
         try {
-          const contents = await ensureFolderData(nextId, { force: false });
+          const contents = await ensureFolderData(nextId, {
+            force: false,
+            includeDocuments: false,
+          });
           const subfolders = Array.isArray(contents?.subfolders) ? contents.subfolders : [];
           subfolders.forEach((entry) => {
             if (entry?.id && !visited.has(entry.id)) {
@@ -4090,7 +4098,7 @@ const AppLayout = () => {
       const node = folderNodes.get(folderId);
       if (node && !node.loaded) {
         try {
-          await ensureFolderData(folderId);
+          await ensureFolderData(folderId, { includeDocuments: false });
         } catch (error) {
           notifyApiError(error, 'Failed to load folder.');
         }

frontend/src/sidebar/Sidebar.jsx

@@ -1,5 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
-import { ChevronIcon, FolderIcon, TrashIcon, EditIcon } from '../ui/icons';
+import { ChevronIcon, TrashIcon, EditIcon } from '../ui/icons';
+
+const FOLDER_ICON_SRC = '/folder.svg';
 import { getTagColorStyle } from '../utils/colors';
 
 const FolderNode = ({
@@ -66,7 +68,7 @@ const FolderNode = ({
           </span>
         )}
         <span className="name">
-          <FolderIcon className="folder-icon" />
+          <img src={FOLDER_ICON_SRC} alt="Folder" className="folder-icon-image" />
           {node.name}
         </span>
         {node.id !== 'root' && (

frontend/src/styles.css

@@ -858,11 +858,10 @@ button.icon-button.ghost:hover:not([disabled]) {
   padding-right: 3rem;
 }
 
-.folder-row span.name .folder-icon {
+.folder-row span.name .folder-icon-image {
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
-  color: var(--accent);
 }
 
 .folder-row:hover {
@@ -1242,12 +1241,12 @@ button.icon-button.ghost:hover:not([disabled]) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--accent);
 }
 
-.thumb-icon svg {
+.thumb-icon__image {
   width: 32px;
   height: 32px;
+  display: block;
 }
 
 .documents-panel th.actions-column,
@@ -1380,12 +1379,12 @@ button.icon-button.ghost:hover:not([disabled]) {
   justify-content: center;
   width: 128px;
   height: 128px;
-  color: var(--accent);
 }
 
 .folder-card__icon-svg {
   width: 100%;
   height: 100%;
+  object-fit: contain;
 }
 
 .folder-card__meta {
@@ -1396,12 +1395,10 @@ button.icon-button.ghost:hover:not([disabled]) {
 }
 
 .folder-card__name {
-  font-weight: 600;
-  font-size: 0.95rem;
   color: var(--fg);
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
+  white-space: break-word;
 }