feat: add project renaming functionality with validation and UI integration

JakubAndrysek · JakubAndrysek · commit 1dc68ba2b438 · 2026-02-24T20:16:42.000+01:00
diff --git a/apps/web/messages/cs.json b/apps/web/messages/cs.json
@@ -32,6 +32,15 @@
   "project_btn_create": "Vytvořit nový projekt",
   "project_btn_import": "Importovat projekt",
   "project_delete": "Smazat projekt",
+  "project_rename": "Přejmenovat",
+  "project_rename_title": "Přejmenovat projekt",
+  "project_rename_description": "Použijte pouze písmena a čísla.",
+  "project_rename_placeholder": "Nový název projektu",
+  "project_rename_cancel": "Zrušit",
+  "project_rename_confirm": "Přejmenovat",
+  "project_rename_required": "Název projektu je povinný.",
+  "project_rename_invalid": "Použijte pouze písmena a čísla.",
+  "project_rename_failed": "Nepodařilo se přejmenovat projekt.",
   "project_download_zip": "Stáhnout jako ZIP",
   "project_created_at": "Vytvořeno:",
   "project_updated_at": "Aktualizováno:",
diff --git a/apps/web/messages/en.json b/apps/web/messages/en.json
@@ -34,6 +34,15 @@
   "project_btn_create": "Create New Project",
   "project_btn_import": "Import Project",
   "project_delete": "Delete Project",
+  "project_rename": "Rename",
+  "project_rename_title": "Rename project",
+  "project_rename_description": "Use only letters and numbers.",
+  "project_rename_placeholder": "New project name",
+  "project_rename_cancel": "Cancel",
+  "project_rename_confirm": "Rename",
+  "project_rename_required": "Project name is required.",
+  "project_rename_invalid": "Use only letters and numbers.",
+  "project_rename_failed": "Failed to rename project.",
   "project_download_zip": "Download as ZIP",
   "project_created_at": "Created At:",
   "project_updated_at": "Updated At:",
diff --git a/apps/web/src/lib/db/project-repository.ts b/apps/web/src/lib/db/project-repository.ts
@@ -44,6 +44,34 @@ export class ProjectRepository {
     });
   }
 
+  async renameWithId(
+    oldId: string,
+    newId: string,
+    newName: string
+  ): Promise<void> {
+    if (oldId === newId) {
+      await this.rename(oldId, newName);
+      return;
+    }
+
+    const project = await this.db.projects.get(oldId);
+    if (!project) throw new Error('Project not found');
+
+    const existing = await this.db.projects.get(newId);
+    if (existing) throw new Error('Project already exists');
+
+    const now = Date.now();
+    await this.db.transaction('rw', this.db.projects, async () => {
+      await this.db.projects.add({
+        ...project,
+        id: newId,
+        name: newName,
+        modifiedAt: now,
+      });
+      await this.db.projects.delete(oldId);
+    });
+  }
+
   async touch(id: string): Promise<void> {
     await this.db.projects.update(id, { modifiedAt: Date.now() });
   }
diff --git a/apps/web/src/routes/project/index.tsx b/apps/web/src/routes/project/index.tsx
@@ -21,11 +21,21 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/features/shared/components/ui/dropdown-menu';
+import { Input } from '@/features/shared/components/ui/input';
 import type { FSInterface } from '@jaculus/project/fs';
+import path from 'path';
 import { createFileRoute, Link, useNavigate } from '@tanstack/react-router';
 import { useLiveQuery } from 'dexie-react-hooks';
-import { Blocks, Code, Download, MoreVertical, Trash } from 'lucide-react';
+import {
+  Blocks,
+  Code,
+  Download,
+  MoreVertical,
+  Pencil,
+  Trash,
+} from 'lucide-react';
 import { useState } from 'react';
+import { loadPackageJson, savePackageJson } from '@jaculus/project/package';
 
 export const Route = createFileRoute('/project/')({
   component: EditorList,
@@ -36,6 +46,13 @@ function EditorList() {
     Route.useRouteContext();
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [projectToDelete, setProjectToDelete] = useState<string | null>(null);
+  const [renameDialogOpen, setRenameDialogOpen] = useState(false);
+  const [projectToRename, setProjectToRename] = useState<{
+    id: string;
+    name: string;
+  } | null>(null);
+  const [renameValue, setRenameValue] = useState('');
+  const [renameError, setRenameError] = useState<string | null>(null);
 
   const projects = useLiveQuery(
     () => runtimeService.listProjects(),
@@ -51,6 +68,66 @@ function EditorList() {
     setProjectToDelete(null);
   }
 
+  const projectNamePattern = /^[a-zA-Z0-9-_ ]+$/;
+  const projectNamePatternJson = /^[a-z0-9-_]+$/;
+
+  function startRename(projectId: string, projectName: string) {
+    setProjectToRename({ id: projectId, name: projectName });
+    setRenameValue(projectName);
+    setRenameError(null);
+    setRenameDialogOpen(true);
+  }
+
+  async function confirmRename() {
+    if (!projectToRename) return;
+    const nextName = renameValue.trim();
+
+    if (!nextName) {
+      setRenameError(m.project_rename_required());
+      return;
+    }
+
+    if (!projectNamePattern.test(nextName)) {
+      setRenameError(m.project_rename_invalid());
+      return;
+    }
+
+    setRenameError(null);
+
+    try {
+      const projectId = projectToRename.id;
+
+      if (nextName === projectToRename.name) {
+        setRenameDialogOpen(false);
+        setProjectToRename(null);
+        return;
+      }
+      const nextNamePackage = nextName.replace(/[^a-zA-Z0-9-_]/g, '-');
+
+      if (projectNamePatternJson.test(nextNamePackage)) {
+        await projectFsService.withMount(
+          projectId,
+          async ({ fs, projectPath }) => {
+            const packageJsonPath = path.join(projectPath, 'package.json');
+            const pkgJson = await loadPackageJson(fs, packageJsonPath);
+            await savePackageJson(fs, packageJsonPath, {
+              ...pkgJson,
+              name: nextName,
+            });
+          }
+        );
+      }
+
+      await runtimeService.renameProject(projectId, nextName);
+
+      setRenameDialogOpen(false);
+      setProjectToRename(null);
+    } catch (error) {
+      console.error('Failed to rename project:', error);
+      setRenameError(m.project_rename_failed());
+    }
+  }
+
   return (
     <div>
       <h1 className="text-2xl font-bold mb-4 text-center">
@@ -119,6 +196,15 @@ function EditorList() {
                               <Trash className="w-4 h-4 mr-2" />
                               {m.project_delete()}
                             </DropdownMenuItem>
+                            <DropdownMenuItem
+                              onClick={e => {
+                                e.stopPropagation();
+                                startRename(project.id, project.name);
+                              }}
+                            >
+                              <Pencil className="w-4 h-4 mr-2" />
+                              {m.project_rename()}
+                            </DropdownMenuItem>
                             <DropdownMenuItem
                               onClick={async e => {
                                 e.stopPropagation();
@@ -180,6 +266,47 @@ function EditorList() {
               </DialogFooter>
             </DialogContent>
           </Dialog>
+
+          <Dialog
+            open={renameDialogOpen}
+            onOpenChange={open => {
+              setRenameDialogOpen(open);
+              if (!open) {
+                setRenameError(null);
+                setProjectToRename(null);
+              }
+            }}
+          >
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>{m.project_rename_title()}</DialogTitle>
+                <DialogDescription>
+                  {m.project_rename_description()}
+                </DialogDescription>
+              </DialogHeader>
+              <div className="space-y-2">
+                <Input
+                  value={renameValue}
+                  onChange={e => setRenameValue(e.target.value)}
+                  placeholder={m.project_rename_placeholder()}
+                />
+                {renameError && (
+                  <p className="text-sm text-destructive">{renameError}</p>
+                )}
+              </div>
+              <DialogFooter>
+                <Button
+                  variant="outline"
+                  onClick={() => setRenameDialogOpen(false)}
+                >
+                  {m.project_rename_cancel()}
+                </Button>
+                <Button onClick={confirmRename}>
+                  {m.project_rename_confirm()}
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
         </>
       ) : (
         <p className="text-center text-muted-foreground">{m.project_empty()}</p>
diff --git a/apps/web/src/services/project-fs-service.ts b/apps/web/src/services/project-fs-service.ts
@@ -8,9 +8,11 @@ import {
 } from '@zenfs/core';
 import { IndexedDB } from '@zenfs/dom';
 import { Zip } from '@zenfs/archives';
+import { enqueueSnackbar } from 'notistack';
+import { copyFolder, type FSInterface } from '@jaculus/project/fs';
 
 export interface ProjectFsInterface {
-  fs: typeof fs;
+  fs: FSInterface;
   projectPath: string;
 }
 
@@ -48,7 +50,7 @@ export async function mountProject(
   const mountPath = getMountPath(projectId);
 
   if (isMounted(projectId)) {
-    return { fs, projectPath: mountPath };
+    return { fs: fs as unknown as FSInterface, projectPath: mountPath };
   }
 
   try {
@@ -59,7 +61,7 @@ export async function mountProject(
     mount(mountPath, backend);
   } catch (error) {
     if (error instanceof Error && error.message.includes('already in use')) {
-      return { fs, projectPath: mountPath };
+      return { fs: fs as unknown as FSInterface, projectPath: mountPath };
     }
     throw error;
   }
@@ -71,7 +73,7 @@ export async function mountProject(
   window.fs = fs;
   window.fsp = fs.promises;
 
-  return { fs, projectPath: mountPath };
+  return { fs: fs as unknown as FSInterface, projectPath: mountPath };
 }
 
 export function unmountProject(projectId: string): void {
@@ -85,6 +87,53 @@ export function unmountProject(projectId: string): void {
   }
 }
 
+/**
+ * Delete the IndexedDB store backing a project.
+ * The project must be unmounted first.
+ */
+function deleteProjectStore(projectId: string): Promise<void> {
+  const storeName = getStoreName(projectId);
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.deleteDatabase(storeName);
+    req.onsuccess = () => resolve();
+    req.onerror = event => reject(event);
+    req.onblocked = () => {
+      const message = `Deletion of IndexedDB store "${storeName}" is blocked. Reloading page in 3 seconds...`;
+      console.warn(message);
+      enqueueSnackbar(message, { variant: 'warning' });
+      setTimeout(() => {
+        window.location.reload();
+      }, 3000);
+    };
+  });
+}
+
+/**
+ * Rename a project by copying its filesystem to a new IndexedDB store
+ * and deleting the old one.
+ *
+ * 1. Mount both old and new projects
+ * 2. Copy all files using copyFolder
+ * 3. Unmount both
+ * 4. Delete the old IndexedDB store
+ */
+export async function renameProject(
+  oldProjectId: string,
+  newProjectId: string
+): Promise<void> {
+  const oldFs = await mountProject(oldProjectId);
+  const newFs = await mountProject(newProjectId);
+
+  try {
+    await copyFolder(oldFs.fs, oldFs.projectPath, newFs.fs, newFs.projectPath);
+  } finally {
+    unmountProject(newProjectId);
+    unmountProject(oldProjectId);
+  }
+
+  await deleteProjectStore(oldProjectId);
+}
+
 /**
  * Service class for dependency injection in React context.
  * Wraps the module functions for easier testing and provider usage.
@@ -93,6 +142,7 @@ export class ProjectFsService {
   isMounted = isMounted;
   mount = mountProject;
   unmount = unmountProject;
+  rename = renameProject;
 
   async withMount<T>(
     projectId: string,
diff --git a/apps/web/src/services/project-runtime-service.ts b/apps/web/src/services/project-runtime-service.ts
@@ -30,6 +30,14 @@ export class ProjectManagementService {
     await this.repo.rename(id, newName);
   }
 
+  async renameProjectWithId(
+    oldId: string,
+    newId: string,
+    newName: string
+  ): Promise<void> {
+    await this.repo.renameWithId(oldId, newId, newName);
+  }
+
   async listProjects(): Promise<IDbProject[]> {
     return await this.repo.list();
   }

Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,14 @@ export class ProjectManagementService {`
`30`	`30`	`await this.repo.rename(id, newName);`
`31`	`31`	`}`
`32`	`32`
	`33`	`+ async renameProjectWithId(`
	`34`	`+ oldId: string,`
	`35`	`+ newId: string,`
	`36`	`+ newName: string`
	`37`	`+ ): Promise<void> {`
	`38`	`+ await this.repo.renameWithId(oldId, newId, newName);`
	`39`	`+ }`
	`40`	`+`
`33`	`41`	`async listProjects(): Promise<IDbProject[]> {`
`34`	`42`	`return await this.repo.list();`
`35`	`43`	`}`