src-tauri/src/commands.rs

@@ -325,6 +325,20 @@ pub async fn reindex_folder(
     Ok(())
 }
 
+#[tauri::command]
+pub async fn rename_folder(
+    db: State<'_, DbState>,
+    folder_id: i64,
+    new_name: String,
+) -> Result<(), String> {
+    let new_name = new_name.trim().to_string();
+    if new_name.is_empty() {
+        return Err("Folder name cannot be empty".to_string());
+    }
+    let conn = db.get().map_err(|e| e.to_string())?;
+    db::rename_folder(&conn, folder_id, &new_name).map_err(|e| e.to_string())
+}
+
 #[tauri::command]
 pub async fn update_folder_path(
     app: AppHandle,

src-tauri/src/db.rs

@@ -1356,6 +1356,14 @@ pub fn get_folders(conn: &Connection) -> Result<Vec<Folder>> {
     Ok(rows.collect::<rusqlite::Result<Vec<_>>>()?)
 }
 
+pub fn rename_folder(conn: &Connection, folder_id: i64, new_name: &str) -> Result<()> {
+    conn.execute(
+        "UPDATE folders SET name = ?2 WHERE id = ?1",
+        params![folder_id, new_name],
+    )?;
+    Ok(())
+}
+
 pub fn update_folder_path(conn: &Connection, folder_id: i64, old_path: &str, new_path: &str, new_name: &str) -> Result<()> {
     conn.execute(
         "UPDATE folders SET path = ?2, name = ?3, scan_error = NULL WHERE id = ?1",

src-tauri/src/lib.rs

@@ -133,6 +133,7 @@ pub fn run() {
             commands::find_duplicates,
             commands::load_duplicate_scan_cache,
             commands::delete_images_from_disk,
+            commands::rename_folder,
             commands::update_folder_path,
         ])
         .run(tauri::generate_context!())

src/components/Sidebar.tsx

@@ -1,7 +1,73 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { open } from "@tauri-apps/plugin-dialog";
 import { useGalleryStore, Folder, IndexProgress } from "../store";
 
+interface ContextMenuState {
+  folderId: number;
+  x: number;
+  y: number;
+}
+
+function FolderContextMenu({
+  menu,
+  folder,
+  onClose,
+  onRename,
+  onReindex,
+  onLocate,
+  onRemove,
+}: {
+  menu: ContextMenuState;
+  folder: Folder;
+  onClose: () => void;
+  onRename: () => void;
+  onReindex: () => void;
+  onLocate: () => void;
+  onRemove: () => void;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleDown = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
+    };
+    const handleKey = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
+    document.addEventListener("mousedown", handleDown);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handleDown);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [onClose]);
+
+  const item = (label: string, onClick: () => void, danger = false) => (
+    <button
+      className={`w-full text-left px-3 py-1.5 text-[12px] rounded-md transition-colors ${
+        danger
+          ? "text-red-400 hover:bg-red-500/15 hover:text-red-300"
+          : "text-gray-300 hover:bg-white/8 hover:text-white"
+      }`}
+      onClick={() => { onClick(); onClose(); }}
+    >
+      {label}
+    </button>
+  );
+
+  return (
+    <div
+      ref={ref}
+      className="fixed z-50 min-w-[160px] py-1 px-1 rounded-lg bg-gray-900 border border-white/10 shadow-xl shadow-black/50"
+      style={{ left: menu.x, top: menu.y }}
+    >
+      {item("Reindex", onReindex)}
+      {item("Rename", onRename)}
+      {folder.scan_error && item("Locate Folder", onLocate)}
+      <div className="my-1 border-t border-white/[0.06]" />
+      {item("Remove from app", onRemove, true)}
+    </div>
+  );
+}
+
 function FolderItem({
   folder,
   selected,
@@ -11,148 +77,186 @@ function FolderItem({
   selected: boolean;
   progress: IndexProgress | undefined;
 }) {
-  const { selectFolder, removeFolder, reindexFolder, updateFolderPath } = useGalleryStore();
+  const { selectFolder, removeFolder, reindexFolder, renameFolder, updateFolderPath } = useGalleryStore();
   const isIndexing = progress && !progress.done;
-  const [confirmingRemoval, setConfirmingRemoval] = useState(false);
   const isMissing = !!folder.scan_error && !isIndexing;
 
-  const handleLocateFolder = async (e: React.MouseEvent) => {
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+  const [renaming, setRenaming] = useState(false);
+  const [renameValue, setRenameValue] = useState(folder.name);
+  const [confirmingRemoval, setConfirmingRemoval] = useState(false);
+  const renameInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (renaming) {
+      setRenameValue(folder.name);
+      setTimeout(() => renameInputRef.current?.select(), 0);
+    }
+  }, [renaming, folder.name]);
+
+  const handleContextMenu = (e: React.MouseEvent) => {
+    e.preventDefault();
     e.stopPropagation();
-    const selected = await open({ directory: true, multiple: false, title: `Locate "${folder.name}"` });
+    // Keep menu inside viewport
-    if (selected && typeof selected === "string") {
+    const x = Math.min(e.clientX, window.innerWidth - 180);
-      await updateFolderPath(folder.id, selected);
+    const y = Math.min(e.clientY, window.innerHeight - 160);
+    setContextMenu({ folderId: folder.id, x, y });
+  };
+
+  const handleLocateFolder = async () => {
+    const picked = await open({ directory: true, multiple: false, title: `Locate "${folder.name}"` });
+    if (picked && typeof picked === "string") {
+      await updateFolderPath(folder.id, picked);
     }
   };
 
-  useEffect(() => {
+  const commitRename = async () => {
-    if (!confirmingRemoval) return;
+    const trimmed = renameValue.trim();
+    if (trimmed && trimmed !== folder.name) {
+      await renameFolder(folder.id, trimmed);
+    }
+    setRenaming(false);
+  };
 
-    const timeout = window.setTimeout(() => {
+  const handleRenameKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
-      setConfirmingRemoval(false);
+    if (e.key === "Enter") { e.preventDefault(); void commitRename(); }
-    }, 4000);
+    if (e.key === "Escape") { setRenaming(false); }
-
-    return () => window.clearTimeout(timeout);
-  }, [confirmingRemoval]);
-
-  const handleRemove = async (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.stopPropagation();
-    await removeFolder(folder.id);
   };
 
   return (
     <>
-    <div
+      <div
-      className={`group relative flex items-center gap-2.5 px-3 py-2 rounded-lg cursor-pointer transition-all duration-150 ${
+        className={`group relative flex items-center gap-2.5 px-3 py-2 rounded-lg cursor-pointer transition-all duration-150 ${
-        selected
+          selected
-          ? "bg-white/8 text-white"
+            ? "bg-white/8 text-white"
-          : "text-gray-500 hover:text-gray-200 hover:bg-white/5"
+            : "text-gray-500 hover:text-gray-200 hover:bg-white/5"
-      }`}
+        }`}
-      onClick={() => selectFolder(folder.id)}
+        onClick={() => !renaming && selectFolder(folder.id)}
-    >
+        onContextMenu={handleContextMenu}
-      {folder.scan_error ? (
+      >
-        <span title={folder.scan_error} className="shrink-0 text-amber-400">
+        {isMissing ? (
-          <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <span className="shrink-0 text-amber-400">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
+            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
-          </svg>
+                d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
-        </span>
+            </svg>
-      ) : (
+          </span>
-        <svg className="w-3.5 h-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
-            d="M3 7a2 2 0 012-2h3.586a1 1 0 01.707.293l1.414 1.414A1 1 0 0011.414 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" />
-        </svg>
-      )}
-
-      <div className="flex-1 min-w-0">
-        <div className={`truncate text-[13px] font-medium leading-tight ${selected ? "text-white" : ""}`}>
-          {folder.name}
-        </div>
-        {isIndexing ? (
-          <>
-            <div className="text-[11px] text-gray-600 mt-0.5">{progress.indexed}/{progress.total}</div>
-            <div className="h-px bg-white/10 rounded mt-1.5 overflow-hidden">
-              <div
-                className="h-full bg-blue-500 transition-all duration-300"
-                style={{ width: `${progress.total > 0 ? (progress.indexed / progress.total) * 100 : 0}%` }}
-              />
-            </div>
-          </>
         ) : (
-          <div className="text-[11px] text-gray-600 mt-0.5">{folder.image_count.toLocaleString()}</div>
+          <svg className="w-3.5 h-3.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
+              d="M3 7a2 2 0 012-2h3.586a1 1 0 01.707.293l1.414 1.414A1 1 0 0011.414 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" />
+          </svg>
+        )}
+
+        <div className="flex-1 min-w-0">
+          {renaming ? (
+            <input
+              ref={renameInputRef}
+              className="w-full bg-white/10 text-white text-[13px] font-medium rounded px-1 py-0 outline-none ring-1 ring-blue-500/60 leading-tight"
+              value={renameValue}
+              onChange={(e) => setRenameValue(e.target.value)}
+              onKeyDown={handleRenameKey}
+              onBlur={() => void commitRename()}
+              onClick={(e) => e.stopPropagation()}
+            />
+          ) : (
+            <div className={`truncate text-[13px] font-medium leading-tight ${selected ? "text-white" : ""}`}>
+              {folder.name}
+            </div>
+          )}
+          {isIndexing ? (
+            <>
+              <div className="text-[11px] text-gray-600 mt-0.5">{progress.indexed}/{progress.total}</div>
+              <div className="h-px bg-white/10 rounded mt-1.5 overflow-hidden">
+                <div
+                  className="h-full bg-blue-500 transition-all duration-300"
+                  style={{ width: `${progress.total > 0 ? (progress.indexed / progress.total) * 100 : 0}%` }}
+                />
+              </div>
+            </>
+          ) : (
+            <div className="text-[11px] text-gray-600 mt-0.5">{folder.image_count.toLocaleString()}</div>
+          )}
+        </div>
+
+        {/* Hover action buttons */}
+        {!renaming && (
+          confirmingRemoval ? (
+            <div className="flex items-center gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
+              <button
+                className="px-1.5 py-0.5 text-[10px] rounded bg-red-500/20 text-red-400 hover:bg-red-500/30 hover:text-red-300 transition-colors"
+                onClick={() => { void removeFolder(folder.id); setConfirmingRemoval(false); }}
+              >
+                Confirm
+              </button>
+              <button
+                className="px-1.5 py-0.5 text-[10px] rounded bg-white/5 text-gray-500 hover:bg-white/10 hover:text-gray-300 transition-colors"
+                onClick={() => setConfirmingRemoval(false)}
+              >
+                Cancel
+              </button>
+            </div>
+          ) : (
+            <div className="flex items-center gap-0.5 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity">
+              <button
+                className="p-1 rounded text-gray-600 hover:text-gray-300 hover:bg-white/8 transition-colors"
+                title="Reindex"
+                onClick={(e) => { e.stopPropagation(); void reindexFolder(folder.id); }}
+              >
+                <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75}
+                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+              </button>
+              <button
+                className="p-1 rounded text-gray-600 hover:text-red-400 hover:bg-red-500/10 transition-colors"
+                title="Remove from app"
+                onClick={(e) => { e.stopPropagation(); setConfirmingRemoval(true); }}
+              >
+                <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75}
+                    d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+          )
         )}
       </div>
 
-      {confirmingRemoval ? (
+      {isMissing && (
-        <div
+        <div className="mx-2 mb-1 px-3 py-2 rounded-lg bg-amber-500/10 border border-amber-500/20">
-          className="flex items-center gap-1 shrink-0"
+          <p className="text-[11px] text-amber-400 font-medium mb-1.5">Folder not found</p>
-          role="group"
+          <p className="text-[10px] text-gray-500 mb-2 leading-snug">
-          aria-label={`Confirm removal of ${folder.name}`}
+            This folder may have been moved or renamed. Locate it to resume, or remove it from the app.
-          onClick={(event) => event.stopPropagation()}
+          </p>
-        >
+          <div className="flex gap-1.5">
-          <button
+            <button
-            className="px-1.5 py-1 rounded-md text-[10px] font-medium text-red-400 bg-red-500/10 hover:bg-red-500/20 hover:text-red-300"
+              className="flex-1 px-2 py-1 rounded-md text-[10px] font-medium bg-amber-500/20 text-amber-300 hover:bg-amber-500/30 hover:text-amber-200 transition-colors"
-            onClick={handleRemove}
+              onClick={(e) => { e.stopPropagation(); void handleLocateFolder(); }}
-          >
+            >
-            Remove
+              Locate Folder
-          </button>
+            </button>
-          <button
+            <button
-            className="px-1.5 py-1 rounded-md text-[10px] font-medium text-gray-400 hover:text-gray-100 hover:bg-white/10"
+              className="flex-1 px-2 py-1 rounded-md text-[10px] font-medium bg-white/5 text-gray-400 hover:bg-red-500/15 hover:text-red-400 transition-colors"
-            onClick={() => setConfirmingRemoval(false)}
+              onClick={(e) => { e.stopPropagation(); setConfirmingRemoval(true); }}
-          >
+            >
-            Cancel
+              Remove
-          </button>
+            </button>
-        </div>
+          </div>
-      ) : (
-        <div className="flex gap-0.5 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity shrink-0">
-          <button
-            className="p-1 rounded-md hover:bg-white/10 text-gray-500 hover:text-gray-200"
-            title="Re-index"
-            aria-label={`Re-index ${folder.name}`}
-            onClick={(e) => { e.stopPropagation(); reindexFolder(folder.id); }}
-          >
-            <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
-                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-            </svg>
-          </button>
-          <button
-            className="p-1 rounded-md hover:bg-red-500/15 text-gray-500 hover:text-red-400"
-            title="Remove folder"
-            aria-label={`Remove ${folder.name}`}
-            onClick={(event) => {
-              event.stopPropagation();
-              setConfirmingRemoval(true);
-            }}
-          >
-            <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
         </div>
       )}
-    </div>
+
-    {isMissing && (
+      {contextMenu && contextMenu.folderId === folder.id && (
-      <div className="mx-2 mb-1 px-3 py-2 rounded-lg bg-amber-500/10 border border-amber-500/20">
+        <FolderContextMenu
-        <p className="text-[11px] text-amber-400 font-medium mb-1.5">Folder not found</p>
+          menu={contextMenu}
-        <p className="text-[10px] text-gray-500 mb-2 leading-snug">
+          folder={folder}
-          This folder may have been moved or renamed. Locate it to resume, or remove it from the app.
+          onClose={() => setContextMenu(null)}
-        </p>
+          onRename={() => setRenaming(true)}
-        <div className="flex gap-1.5">
+          onReindex={() => void reindexFolder(folder.id)}
-          <button
+          onLocate={() => void handleLocateFolder()}
-            className="flex-1 px-2 py-1 rounded-md text-[10px] font-medium bg-amber-500/20 text-amber-300 hover:bg-amber-500/30 hover:text-amber-200 transition-colors"
+          onRemove={() => setConfirmingRemoval(true)}
-            onClick={handleLocateFolder}
+        />
-          >
+      )}
-            Locate Folder
-          </button>
-          <button
-            className="flex-1 px-2 py-1 rounded-md text-[10px] font-medium bg-white/5 text-gray-400 hover:bg-red-500/15 hover:text-red-400 transition-colors"
-            onClick={(e) => { e.stopPropagation(); void removeFolder(folder.id); }}
-          >
-            Remove
-          </button>
-        </div>
-      </div>
-    )}
     </>
   );
 }

src/store.ts

@@ -287,6 +287,7 @@ interface GalleryState {
   addFolder: (path: string) => Promise<void>;
   removeFolder: (folderId: number) => Promise<void>;
   reindexFolder: (folderId: number) => Promise<void>;
+  renameFolder: (folderId: number, newName: string) => Promise<void>;
   updateFolderPath: (folderId: number, newPath: string) => Promise<void>;
   selectFolder: (folderId: number | null) => void;
   loadImages: (reset?: boolean) => Promise<void>;
@@ -671,6 +672,11 @@ export const useGalleryStore = create<GalleryState>((set, get) => ({
     await loadBackgroundJobProgress();
   },
 
+  renameFolder: async (folderId, newName) => {
+    await invoke("rename_folder", { folderId, newName });
+    await get().loadFolders();
+  },
+
   updateFolderPath: async (folderId, newPath) => {
     const { loadFolders, loadBackgroundJobProgress } = get();
     await invoke("update_folder_path", { folderId, newPath });