grid view

frontend/src/index.jsx

@@ -364,6 +364,13 @@ const AppLayout = () => {
   const [currentSubfolders, setCurrentSubfolders] = useState([]);
   const [documents, setDocuments] = useState([]);
   const [workspaceMode, setWorkspaceMode] = useState('table');
+  const [documentsViewMode, setDocumentsViewMode] = useState(() => {
+    if (typeof window === 'undefined') {
+      return 'list';
+    }
+    const stored = window.localStorage.getItem('papercrate_view_mode');
+    return stored === 'grid' ? 'grid' : 'list';
+  });
   const initialRowSelection = routeDocumentId
     ? [resolveDocumentRowKey(routeDocumentId)]
     : [];
@@ -2514,7 +2521,10 @@ const AppLayout = () => {
 
         if (item.type === 'document') {
           const doc = item.payload;
-          const rowEl = doc?.id ? document.getElementById(`document-row-${doc.id}`) : null;
+          const rowEl = doc?.id
+            ? document.getElementById(`document-row-${doc.id}`) ||
+              document.getElementById(`document-card-${doc.id}`)
+            : null;
           const thumbnailEl = rowEl?.querySelector('.document-thumbnail');
           const placeholderEl = rowEl?.querySelector('.thumb-placeholder');
 
@@ -4455,6 +4465,15 @@ const AppLayout = () => {
 
   const showSkeuoWorkspace = useCallback(() => setWorkspaceMode('skeuo'), [setWorkspaceMode]);
   const exitSkeuoWorkspace = useCallback(() => setWorkspaceMode('table'), [setWorkspaceMode]);
+  const handleDocumentsViewModeChange = useCallback((mode) => {
+    setDocumentsViewMode((previous) => {
+      const next = mode === 'grid' ? 'grid' : 'list';
+      if (next !== previous && typeof window !== 'undefined') {
+        window.localStorage.setItem('papercrate_view_mode', next);
+      }
+      return next;
+    });
+  }, []);
 
   const documentsTableProps = {
     currentFolderName,
@@ -4501,6 +4520,8 @@ const AppLayout = () => {
         : null,
     onTagClick: toggleTagFilter,
     onDocumentTagDrop: handleDocumentTagDrop,
+    viewMode: documentsViewMode,
+    onViewModeChange: handleDocumentsViewModeChange,
   };
 
   const detailPanelProps = {