feat: allow deleting projects

blib-la · Jan 24, 2024 · 32740f4 · 32740f4
1 parent d02910e
commit 32740f4
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 30 deletions.
diff --git a/main/helpers/constants.ts b/main/helpers/constants.ts
@@ -6,6 +6,7 @@ export const DIRECTORY = "DIRECTORY";
 export const CURRENT_DIRECTORY = "CURRENT_DIRECTORY";
 export const EXISTING_PROJECT = "EXISTING_PROJECT";
 export const PROJECTS = "PROJECTS";
+export const PROJECT = "PROJECT";
 export const STORE = "STORE";
 export const IMAGE_CACHE = "IMAGE_CACHE";
 export const MINIFIED_IMAGE_SIZE = 768;

diff --git a/main/helpers/events.ts b/main/helpers/events.ts
@@ -13,6 +13,7 @@ import {
   STORE,
   WD14,
   FEEDBACK,
+  PROJECT,
 } from "./constants";
 import { store } from "./store";
 import path from "node:path";
@@ -183,7 +184,7 @@ ipcMain.handle(
   },
 );
 
-// Handler so save caption values to the file
+// Handler to send feedback to GitHub
 ipcMain.handle(
   `${FEEDBACK}:send`,
   async (
@@ -201,6 +202,13 @@ ipcMain.handle(
   },
 );
 
+// Handler to delete a project
+
+ipcMain.handle(`${PROJECT}:delete`, async (event, id: string) => {
+  const directory = getDirectory("projects", id);
+  await fsp.rm(directory, { recursive: true, force: true });
+});
+
 // Handler so save caption values to the file
 ipcMain.handle(
   `${CAPTION}:save`,

diff --git a/main/preload.ts b/main/preload.ts
@@ -7,6 +7,7 @@ import {
   FEEDBACK,
   GPTV,
   IMAGE_CACHE,
+  PROJECT,
   PROJECTS,
   STORE,
   WD14,
@@ -32,6 +33,7 @@ const handler = {
     source: string;
   }) => ipcRenderer.invoke(`${EXISTING_PROJECT}:get`, project),
   getProjects: () => ipcRenderer.invoke(`${PROJECTS}:get`),
+  deleteProject: (id: string) => ipcRenderer.invoke(`${PROJECT}:delete`, id),
   handleRunBlip: async (directory: string) =>
     ipcRenderer.invoke(`${BLIP}:run`, directory),
   handleRunGPTV: async (

diff --git a/renderer/organisms/screens/projects.tsx b/renderer/organisms/screens/projects.tsx
@@ -5,14 +5,81 @@ import {
   projectAtom,
   projectsAtom,
 } from "@/ions/atoms";
-import React, { useEffect } from "react";
-import { Button, Grid, Stack, Typography } from "@mui/joy";
+import React, { useEffect, useState } from "react";
+import {
+  Button,
+  Grid,
+  IconButton,
+  Sheet,
+  Stack,
+  Tooltip,
+  Typography,
+} from "@mui/joy";
 import dynamic from "next/dynamic";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import CancelIcon from "@mui/icons-material/Cancel";
 
 const LottiePlayer = dynamic(
   () => import("@/atoms/lottie-player").then((module_) => module_.LottiePlayer),
   { ssr: false },
 );
+export function DeleteConfirm({ projectId }: { projectId: string }) {
+  const [confirm, setConfirm] = useState(false);
+  const [, setProjects] = useAtom(projectsAtom);
+  return confirm ? (
+    <Sheet
+      sx={{
+        position: "absolute",
+        inset: 0,
+        zIndex: 2,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        gap: 1,
+        px: 1,
+      }}
+    >
+      <Button
+        color={"neutral"}
+        variant={"solid"}
+        size={"sm"}
+        startDecorator={<CancelIcon />}
+        onClick={() => {
+          setConfirm(false);
+        }}
+      >
+        Cancel
+      </Button>
+      <Button
+        color={"danger"}
+        variant={"solid"}
+        size={"sm"}
+        startDecorator={<DeleteForeverIcon />}
+        onClick={async () => {
+          await window.ipc.deleteProject(projectId);
+          await window.ipc.getProjects().then((projects_) => {
+            setProjects(projects_);
+          });
+        }}
+      >
+        Delete
+      </Button>
+    </Sheet>
+  ) : (
+    <IconButton
+      color={"danger"}
+      variant={"solid"}
+      size={"sm"}
+      sx={{ position: "absolute", top: 0, right: 0, zIndex: 2 }}
+      onClick={() => {
+        setConfirm(true);
+      }}
+    >
+      <DeleteForeverIcon />
+    </IconButton>
+  );
+}
+
 export function Projects({ onDone }: { onDone(): void }) {
   const [, setProject] = useAtom(projectAtom);
   const [, setImages] = useAtom(imagesAtom);
@@ -40,34 +107,34 @@ export function Projects({ onDone }: { onDone(): void }) {
       }}
     >
       {projects.map((project_) => (
-        <Grid key={project_.id} xs={1} sx={{ height: "min-content" }}>
-          <Button
-            fullWidth
-            color="neutral"
-            variant="plain"
-            sx={{ flexDirection: "column", overflow: "hidden", p: 1 }}
-            onClick={async () => {
-              const content = await window.ipc.getExistingProject(project_);
-              setImages(content);
-              setProject(project_);
-              setDirectory(project_.source);
-              onDone();
-            }}
-          >
-            <img
-              src={`my://${project_.files}/${project_.cover}`}
-              alt={project_.name}
-              style={{
-                width: "100%",
-                height: "auto",
-                aspectRatio: 1,
-                objectFit: "contain",
+        <Grid key={project_.id} xs={1} sx={{ position: "relative" }}>
+          <DeleteConfirm projectId={project_.id} />
+          <Tooltip title={project_.name}>
+            <Button
+              fullWidth
+              color="neutral"
+              variant="plain"
+              sx={{ flexDirection: "column", overflow: "hidden", p: 1 }}
+              onClick={async () => {
+                const content = await window.ipc.getExistingProject(project_);
+                setImages(content);
+                setProject(project_);
+                setDirectory(project_.source);
+                onDone();
               }}
-            />
-            <Typography noWrap sx={{ mt: 1, display: "block", width: "100%" }}>
-              {project_.name}
-            </Typography>
-          </Button>
+            >
+              <img
+                src={`my://${project_.files}/${project_.cover}`}
+                alt={project_.name}
+                style={{
+                  width: "100%",
+                  height: "auto",
+                  aspectRatio: 1,
+                  objectFit: "contain",
+                }}
+              />
+            </Button>
+          </Tooltip>
         </Grid>
       ))}
     </Grid>