Merge pull request #103 from bocan/feature/move-folder-and-deps

Implement folder move functionality and enhance responsive design

Author: bocan

client/package.json

@@ -16,7 +16,7 @@
     "diff": "^8.0.3",
     "github-slugger": "^2.0.0",
     "html-docx-js-typescript": "^0.1.5",
-    "lucide-react": "^0.575.0",
+    "lucide-react": "^0.577.0",
     "mermaid": "^11.4.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",

client/src/App.css

@@ -237,9 +237,9 @@ body {
   background: rgba(255, 255, 255, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.3);
   color: white;
-  font-size: 24px;
-  width: 48px;
-  height: 48px;
+  font-size: 18px;
+  width: 34px;
+  height: 34px;
   border-radius: 50%;
   cursor: pointer;
   transition: all 0.2s;
@@ -273,11 +273,11 @@ body {
   background: rgba(255, 255, 255, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.3);
   color: white;
-  width: 36px;
-  height: 36px;
+  width: 34px;
+  height: 34px;
   border-radius: 50%;
   cursor: pointer;
-  font-size: 18px;
+  font-size: 16px;
   font-weight: bold;
   transition: all 0.2s;
   display: flex;
@@ -742,6 +742,11 @@ body {
   .logout-button {
     padding: 8px 12px;
   }
+
+  /* Drop the keyboard shortcut badge from the search button */
+  .search-shortcut {
+    display: none;
+  }
 }
 
 /* Tablet portrait (≤768px) - auto-collapse preview */
@@ -763,9 +768,9 @@ body {
   }
 
   .theme-toggle {
-    width: 40px;
-    height: 40px;
-    font-size: 20px;
+    width: 34px;
+    height: 34px;
+    font-size: 18px;
   }
 
   /* Hide resize handles on touch devices */
@@ -780,6 +785,16 @@ body {
     height: 48px;
     font-size: 14px;
   }
+
+  /* Collapse search trigger to icon-only */
+  .search-hint {
+    display: none;
+  }
+
+  .search-trigger {
+    padding: 0 8px;
+    width: 34px;
+  }
 }
 
 /* Large phones (≤600px) - auto-collapse sidebar */
@@ -797,8 +812,8 @@ body {
   }
 
   .theme-toggle {
-    width: 36px;
-    height: 36px;
+    width: 34px;
+    height: 34px;
     font-size: 18px;
   }
 
@@ -851,12 +866,6 @@ body {
     font-size: 16px;
   }
 
-  .theme-toggle {
-    width: 32px;
-    height: 32px;
-    font-size: 16px;
-  }
-
   .logout-button {
     padding: 4px 8px;
     font-size: 14px;

client/src/App.tsx

@@ -87,23 +87,40 @@ function App() {
   const isResizingRight = useRef(false);
   const isResizingFolderTree = useRef(false);
   const leftPaneRef = useRef<HTMLDivElement>(null);
-  const hasAutoCollapsed = useRef(false); // Track if we've auto-collapsed to avoid repeated triggers
+  const lastBreakpointRef = useRef<string | null>(null); // Track breakpoint changes for responsive collapse
 
   // Responsive: auto-collapse panes based on screen size
   useEffect(() => {
     const handleResize = () => {
       const width = window.innerWidth;
       setIsMobile(width <= MOBILE_BREAKPOINT);
 
-      // Only auto-collapse once on initial load or when crossing breakpoints
-      if (!hasAutoCollapsed.current) {
-        if (width <= MOBILE_BREAKPOINT) {
+      // Determine current breakpoint bucket
+      const breakpoint =
+        width <= MOBILE_BREAKPOINT ? 'mobile' :
+        width <= TABLET_BREAKPOINT ? 'tablet' :
+        'desktop';
+
+      // Only act when crossing a breakpoint boundary (including initial mount)
+      if (breakpoint !== lastBreakpointRef.current) {
+        const prev = lastBreakpointRef.current;
+        lastBreakpointRef.current = breakpoint;
+
+        if (breakpoint === 'mobile') {
           setLeftPaneCollapsed(true);
           setRightPaneCollapsed(true);
-        } else if (width <= TABLET_BREAKPOINT) {
+        } else if (breakpoint === 'tablet') {
           setRightPaneCollapsed(true);
+          if (prev === 'mobile') setLeftPaneCollapsed(false);
+        } else {
+          // Desktop: restore panes that were auto-collapsed
+          if (prev === 'mobile') {
+            setLeftPaneCollapsed(false);
+            setRightPaneCollapsed(false);
+          } else if (prev === 'tablet') {
+            setRightPaneCollapsed(false);
+          }
         }
-        hasAutoCollapsed.current = true;
       }
     };
 

client/src/components/Attachments.css

@@ -167,6 +167,7 @@
 .btn-delete {
   background: transparent;
   border: 1px solid var(--border-color);
+  color: var(--text-secondary);
   width: 32px;
   height: 32px;
   border-radius: 4px;
@@ -182,11 +183,13 @@
 .btn-download:hover {
   background: var(--bg-tertiary);
   border-color: var(--accent-color);
+  color: var(--text-primary);
 }
 
 .btn-delete:hover {
-  background: #fee;
-  border-color: #f44;
+  background: rgba(220, 38, 38, 0.12);
+  border-color: var(--error-color);
+  color: var(--error-color);
 }
 
 .spinner {

client/src/components/Attachments.tsx

@@ -219,10 +219,13 @@ export const Attachments: React.FC<AttachmentsProps> = ({
                     <span className="file-icon" aria-hidden="true">
                       {getFileIcon(file.name)}
                     </span>
-                    <div className="file-info">
+                    <div
+                      className="file-info"
+                      title={`${file.name}\nModified: ${new Date(file.modified).toLocaleString()}`}
+                    >
                       <div className="file-name">{file.name}</div>
                       <div className="file-meta">
-                        {formatFileSize(file.size)}
+                        {formatFileSize(file.size)} · {new Date(file.modified).toLocaleDateString()}
                       </div>
                     </div>
                     <div className="file-actions">

client/src/components/Editor.css

@@ -300,3 +300,43 @@
   background: var(--border-color);
   margin: 0 var(--space-2);
 }
+
+/* =====================================================
+   RESPONSIVE: EDITOR HEADER & TOOLBAR
+   ===================================================== */
+
+/* Tablet and below: allow the header row to wrap so
+   action buttons spill to a second row instead of
+   being pushed off-screen */
+@media (max-width: 900px) {
+  .editor-header {
+    flex-wrap: wrap;
+    padding: var(--space-2) var(--space-3);
+  }
+
+  .editor-actions {
+    flex-wrap: wrap;
+    gap: var(--space-1);
+  }
+}
+
+/* Tablet portrait (≤768px): force actions onto their
+   own full-width row below the title */
+@media (max-width: 768px) {
+  .editor-actions {
+    flex: 0 0 100%;
+  }
+}
+
+/* Mobile (≤480px): tighter button padding so more
+   buttons fit per row; hide verbose save status */
+@media (max-width: 480px) {
+  .editor-actions button {
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--text-xs);
+  }
+
+  .save-status {
+    display: none;
+  }
+}

client/src/components/FolderTree.css

@@ -133,3 +133,136 @@
   color: var(--text-secondary);
   font-style: italic;
 }
+
+/* Move folder modal */
+.move-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+}
+
+.move-modal {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: 20px;
+  width: 320px;
+  max-width: 90vw;
+  box-shadow: 0 8px 32px var(--shadow-lg);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.move-modal-title {
+  margin: 0;
+  font-size: var(--text-base);
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.move-modal-subtitle {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+}
+
+.move-picker {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  max-height: 240px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.move-picker-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 8px;
+  border: none;
+  border-bottom: 1px solid var(--border-color);
+  background: none;
+  text-align: left;
+  cursor: pointer;
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+  transition: background var(--transition-fast);
+}
+
+.move-picker-item:last-child {
+  border-bottom: none;
+}
+
+.move-picker-item:hover {
+  background: var(--bg-hover);
+}
+
+.move-picker-item.selected {
+  background: var(--accent-bg);
+  color: var(--accent-color);
+  font-weight: 500;
+}
+
+.move-picker-root {
+  font-style: italic;
+  color: var(--text-secondary);
+}
+
+.move-picker-root.selected {
+  color: var(--accent-color);
+}
+
+.move-modal-error {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--error-color);
+}
+
+.move-modal-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.move-modal-cancel {
+  padding: 6px 14px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-size: var(--text-sm);
+  transition: background var(--transition-fast);
+}
+
+.move-modal-cancel:hover:not(:disabled) {
+  background: var(--bg-hover);
+}
+
+.move-modal-confirm {
+  padding: 6px 14px;
+  border: none;
+  border-radius: var(--radius-md);
+  background: var(--accent-color);
+  color: var(--accent-text);
+  cursor: pointer;
+  font-size: var(--text-sm);
+  font-weight: 500;
+  transition: background var(--transition-fast);
+}
+
+.move-modal-confirm:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+.move-modal-cancel:disabled,
+.move-modal-confirm:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}