ui: implemented better duplication mechanism

src/app/page.tsx

@@ -2,7 +2,7 @@
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import { ReactNode, useState } from "react";
 import { useLiveQuery } from "dexie-react-hooks";
-import { db } from "@/lib/db";
+import { addProject, db, deleteProject } from "@/lib/db";
 import { Label } from "@/components/ui/label";
 import { Button } from "@/components/ui/button";
 import { CopyIcon, EditIcon, EllipsisIcon, InfoIcon, ListCheckIcon, PencilIcon, PlusIcon, TrashIcon } from "lucide-react";
@@ -95,7 +95,7 @@ const RenameProjectDialog = ({ project }: { project: Project }) => {
 
 const DeleteProjectDialog = ({ project }: { project: Project }) => {
     const handleDelete = async () => {
-        await db.projects.delete(project.uuid);
+        deleteProject(project.uuid);
     };
 
     return (
@@ -122,15 +122,27 @@ const ProjectDropdown = ({ project }: { project: Project }): ReactNode => {
     const isMobile = useIsMobile();
 
     const handleDuplicate = async () => {
+        let originProject = await db.projects.where('uuid').equals(project.origin).first();
+        if (!originProject) originProject = project;
+        let newProjectTitle = originProject.title;
+
+        const duplication = await db.duplications.where('uuid').equals(originProject.uuid).first();
+        if (!duplication) return;
+        newProjectTitle = `${originProject.title} (${duplication.count + 1})`;
+        await db.duplications.update(duplication.uuid, {
+            ...duplication,
+            count: duplication.count + 1
+        });
+
         const newProject = {
             ...project,
             uuid: generateUUID(),
             creationDate: Date.now(),
             editDate: Date.now(),
-            title: project.title.includes("Copy of") ? project.title : `Copy of ${project.title}`,
+            title: newProjectTitle,
-            origin: project.origin
+            origin: originProject.uuid
         };
-        await db.projects.add(newProject);
+        addProject(newProject as Project);
     };
 
     return (
@@ -239,14 +251,14 @@ export default function Home(): ReactNode {
 
     const newProjectSubmit = async (data: z.infer<typeof ProjectInfoFormSchema>) => {
         const date = Date.now();
-        await db.projects.add({
+        addProject({
             uuid: generateUUID(),
             creationDate: date,
             editDate: date,
             title: data.title,
             description: data.description,
             origin: ""
-        });
+        } as Project);
     };
 
     return (

src/app/persistence-provider.tsx

@@ -27,9 +27,8 @@ const PersistenceProvider = ({
     useEffect(() => {
         const tryToPersist = async () => {
             const isPersistent = await isStoragePersisted();
-            console.log(isPersistent);
             if (!isPersistent) {
-                if ((localStorage.getItem('persistence-status') != "persisted" && localStorage.getItem('persistence-status') == undefined) || localStorage.getItem('persistence-status') === "") {
+                if ((localStorage.getItem('persistence-status') !== "persisted" && localStorage.getItem('persistence-status') === undefined) || localStorage.getItem('persistence-status') === "") {
                     const persistenceStatus = await tryPersistWithoutPromtingUser();
                     localStorage.setItem("persistence-status", persistenceStatus);
                     if (persistenceStatus == "never") {

src/components/dashboard/Dashboard.tsx

@@ -94,11 +94,11 @@ export const Dashboard = (): ReactNode => {
                             <Tooltip>
                                 <TooltipTrigger>
                                     <a href="https://github.com/ClipFusion-org/clipfusion" target="_blank">
-                                        <Image src="/github-mark.svg" aria-hidden width="25" height="25" alt="ClipFusion GitHub Repository" className="duration-100 dark:invert hover:opacity-95 active:scale-95"/>
+                                        <Image src="/github-mark.svg" aria-hidden width="25" height="25" alt="ClipFusion GitHub" className="duration-100 dark:invert hover:opacity-95 active:scale-95"/>
                                     </a>
                                 </TooltipTrigger>
                                 <TooltipContent>
-                                    <p>ClipFusion GitHub Repository</p>
+                                    <p>ClipFusion GitHub</p>
                                 </TooltipContent>
                             </Tooltip>
                             <Tooltip>

src/lib/db.ts

@@ -1,7 +1,21 @@
 import EditorDB from "@/types/EditorDB";
+import Project from "@/types/Project";
 
 export const db = new EditorDB();
 
+export function addProject(project: Project) {
+    db.projects.add(project);
+    db.duplications.add({
+        uuid: project.uuid,
+        count: 0
+    });
+}
+
+export function deleteProject(uuid: string) {
+    db.projects.delete(uuid);
+    db.duplications.delete(uuid);
+}
+
 // StorageManager code from https://dexie.org/docs/StorageManager
 
 /** Check if storage is persisted already.

src/types/Duplication.ts

@@ -0,0 +1,7 @@
+import { Entity } from "dexie";
+import EditorDB from "./EditorDB";
+
+export default class Duplication extends Entity<EditorDB> {
+    uuid!: string;
+    count!: number;
+}

src/types/EditorDB.ts

@@ -1,14 +1,18 @@
 import Dexie, { type EntityTable } from "dexie";
 import Project from "./Project";
+import Duplication from "./Duplication";
 
 export default class EditorDB extends Dexie {
     projects!: EntityTable<Project, 'uuid'>;
+    duplications!: EntityTable<Duplication, 'uuid'>;
 
     constructor() {
         super('EditorDB');
         this.version(1).stores({
-            projects: 'uuid, project'
+            projects: 'uuid, project',
+            duplications: 'uuid, count'
         });
         this.projects.mapToClass(Project);
+        this.duplications.mapToClass(Duplication);
     }
 }