ClipFusion-org/clipfusion
1
1
Fork 0
mirror of https://github.com/ClipFusion-org/clipfusion.git synced 2025-08-05 18:15:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixed annoying project selection bug (using pretty ugly way tho lol)

Browse Source
This commit is contained in:
corgifist 2025-07-27 02:07:01 +03:00
parent 48c44e3723
commit 93fb66dc2e
1 changed files with 45 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/app/page.tsx
View File

@ -1,6 +1,6 @@
"use client"; "use client";
import { SidebarTrigger } from "@/components/ui/sidebar"; import { SidebarTrigger } from "@/components/ui/sidebar";
import { createContext, Dispatch, ReactNode, SetStateAction, useContext, useEffect, useState } from "react"; import { createContext, Dispatch, MouseEventHandler, ReactNode, SetStateAction, useContext, useEffect, useState } from "react";
import { useLiveQuery } from "dexie-react-hooks"; import { useLiveQuery } from "dexie-react-hooks";
import { addProject, db, deleteProject } from "@/lib/db"; import { addProject, db, deleteProject } from "@/lib/db";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
@ -28,7 +28,7 @@ import { Checkbox } from "@/components/ui/checkbox";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Tooltip, TooltipContent } from "@/components/ui/tooltip"; import { Tooltip, TooltipContent } from "@/components/ui/tooltip";
import { TooltipTrigger } from "@radix-ui/react-tooltip"; import { TooltipTrigger } from "@radix-ui/react-tooltip";
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"; import { Sheet, SheetClose, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
type SortingType = "byCreationDate" type SortingType = "byCreationDate"
@ -244,25 +244,35 @@ const ProjectDropdown = ({
<PencilIcon /> <span className="sr-only">Rename</span> <PencilIcon /> <span className="sr-only">Rename</span>
</Button> </Button>
</div> </div>
<SheetDescription>Manage {project.title}</SheetDescription> <SheetDescription>Actions for {project.title}</SheetDescription>
</SheetHeader> </SheetHeader>
<Separator/> <Separator />
<Button variant="ghost" className="justify-start w-full" onClick={handleSelect}> <SheetClose asChild>
<Grid2X2CheckIcon /> {selected ? "Deselect" : "Select"} <Button variant="ghost" className="justify-start w-full" onClick={handleSelect}>
</Button> <Grid2X2CheckIcon /> {selected ? "Deselect" : "Select"}
<Button variant="ghost" className="justify-start w-full" onClick={() => console.log("Edit Project")}> </Button>
<EditIcon /> Edit </SheetClose>
</Button> <SheetClose asChild>
<Button variant="ghost" className="justify-start w-full" onClick={handleDuplicate}> <Button variant="ghost" className="justify-start w-full" onClick={() => console.log("Edit Project")}>
<CopyIcon /> Duplicate <EditIcon /> Edit
</Button> </Button>
<Button variant="ghost" className="text-red-400 justify-start w-full" onClick={() => setDeleteAlertOpen(true)}> </SheetClose>
<TrashIcon /> Delete <SheetClose asChild>
</Button> <Button variant="ghost" className="justify-start w-full" onClick={handleDuplicate}>
<Separator/> <CopyIcon /> Duplicate
<Button variant="ghost" className="justify-start w-full" onClick={() => console.log("Project Info")}> </Button>
<InfoIcon /> Info </SheetClose>
</Button> <SheetClose asChild>
<Button variant="ghost" className="text-red-400 justify-start w-full" onClick={() => setDeleteAlertOpen(true)}>
<TrashIcon /> Delete
</Button>
</SheetClose>
<Separator />
<SheetClose asChild>
<Button variant="ghost" className="justify-start w-full" onClick={() => console.log("Project Info")}>
<InfoIcon /> Info
</Button>
</SheetClose>
</SheetContent> </SheetContent>
<Dialog open={renameDialogOpen} onOpenChange={setRenameDialogOpen}> <Dialog open={renameDialogOpen} onOpenChange={setRenameDialogOpen}>
<RenameProjectDialog project={project} /> <RenameProjectDialog project={project} />
@ -271,7 +281,7 @@ const ProjectDropdown = ({
<DeleteProjectDialog project={project} /> <DeleteProjectDialog project={project} />
</AlertDialog> </AlertDialog>
</Sheet> </Sheet>
) );
} }
return ( return (
@ -350,7 +360,11 @@ const ProjectContainer = ({
if (!selecting && selected) setSelected(false); if (!selecting && selected) setSelected(false);
const date = new Date(project.editDate); const date = new Date(project.editDate);
const handleClick = () => {
// TODO: data-selectable is a really dirty way of deciding whether to trigger selection or not should be reworked in the future
const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
if ((e.target as HTMLDivElement).getAttribute("data-selectable") != "true") return;
e.stopPropagation();
if (selecting) { if (selecting) {
setSelected(!selected); setSelected(!selected);
} }
@ -374,16 +388,16 @@ const ProjectContainer = ({
}, [selected]); }, [selected]);
return ( return (
<AspectRatio ratio={16 / 9} onClick={handleClick}> <AspectRatio data-selectable="true" ratio={16 / 9} onClick={handleClick}>
<Card className="relative rounded-lg shadow-md w-full h-full overflow-hidden hover:scale-[101%] hover:drop-shadow-xl duration-100"> <Card className="relative rounded-lg shadow-md w-full h-full overflow-hidden hover:scale-[101%] hover:drop-shadow-xl duration-100" data-selectable="true">
<div className="absolute bottom-0 left-0 w-full h-full bg-gradient-to-t from-white dark:from-black to-transparent opacity-50" /> <div className="absolute bottom-0 left-0 w-full h-full bg-gradient-to-t from-white dark:from-black to-transparent opacity-50" data-selectable="true"/>
<div className="absolute bottom-0 left-0 p-2 w-full flex flex-row justify-between items-center"> <div className="absolute bottom-0 left-0 p-2 w-full flex flex-row justify-between items-center" data-selectable="true">
<div> <div data-selectable="true">
<h3 className="text-sm sm:text-sm md:text-md lg:text-lg font-semibold line-clamp-1">{project.title}</h3> <h3 className="text-sm sm:text-sm md:text-md lg:text-lg font-semibold line-clamp-1" data-selectable="true">{project.title}</h3>
{project.description && <p className="text-sm text-secondary-foreground line-clamp-1">{project.description}</p>} {project.description && <p className="text-sm text-secondary-foreground line-clamp-1" data-selectable="true">{project.description}</p>}
{project.editDate && <p className="text-sm text-secondary-foreground">Last edit date: {date.toLocaleDateString()}, {date.toLocaleTimeString()}</p>} {project.editDate && <p className="text-sm text-secondary-foreground" data-selectable="true">Last Edit Date: {date.toLocaleDateString()}, {date.toLocaleTimeString()}</p>}
</div> </div>
<div className="flex flex-col lg:xl:flex-row items-center gap-1"> <div className="flex flex-col lg:xl:flex-row items-center gap-1" data-selectable="true">
{!selecting && <ProjectDescription project={project} />} {!selecting && <ProjectDescription project={project} />}
<ProjectDropdown selected={selected} setSelected={setSelected} project={project} /> <ProjectDropdown selected={selected} setSelected={setSelected} project={project} />
</div> </div>