Added edit button to card modal

Author: cyanff

docs/code-guidelines.md

@@ -8,7 +8,7 @@ import { CardBundle } from "@shared/types";
 import Fuse from "fuse.js";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
-import { useTheme } from "@/components/theme-provider"
+import { useTheme } from "@/components/theme-provider";
 
 interface CollectionsPageProps {
   setPage: (page: string) => void;
@@ -23,18 +23,12 @@ export default function CollectionsPage({ setPage, setChatID, cardBundles, syncC
   const [searchResults, setSearchResults] = useState<CardBundle[]>(cardBundles);
   const [sortBy, setSortBy] = useState<string>("alphabetical");
   const [descending, setDescending] = useState<boolean>(true);
-  const { setTheme } = useTheme()
+  const { setTheme } = useTheme();
 
   useEffect(() => {
     setTheme("darker");
   }, []);
 
-
-
-
-
-
-
   // TODO, edit card bundle type to also include all data from the card table
   // then add sort by "imported" which is the inserted_at column in the db
   const sortByNameAndValue = [
@@ -190,7 +184,13 @@ export default function CollectionsPage({ setPage, setChatID, cardBundles, syncC
               cardBundle={cardBundle}
               syncCardBundles={syncCardBundles}
               openCardModal={() => {
-                createModal(<CardModal cardBundle={cardBundle} onCreateChat={createChatHandler} />);
+                createModal(
+                  <CardModal
+                    cardBundle={cardBundle}
+                    onCreateChat={createChatHandler}
+                    syncCardBundles={syncCardBundles}
+                  />
+                );
               }}
             />
           );

src/renderer/src/app/collections.tsx

@@ -1,3 +1,5 @@
+import { DialogConfig, useApp } from "@/components/AppContext";
+import EditCardModal from "@/components/EditCardModal";
 import Tag from "@/components/Tag";
 import {
   ContextMenu,
@@ -6,24 +8,19 @@ import {
   ContextMenuShortcut,
   ContextMenuTrigger
 } from "@/components/ui/context-menu";
+import { queries } from "@/lib/queries";
 import { PencilIcon, TrashIcon } from "@heroicons/react/24/solid";
-import { CardBundle, CardFormData } from "@shared/types";
+import { CardBundle } from "@shared/types";
 import { motion, useMotionValue } from "framer-motion";
 import { CardPattern } from "./ui/card-pattern";
-import { DeepPartial } from "react-hook-form";
-import { DialogConfig, useApp } from "@/components/AppContext";
-import { queries } from "@/lib/queries";
-import CharacterForm from "@/components/CharacterForm";
-import { cardFormDataToCardData } from "@/lib/utils";
-import { toast } from "sonner";
 interface CardProps {
   cardBundle: CardBundle;
   syncCardBundles: () => void;
   openCardModal: () => void;
 }
 
 function Card({ cardBundle, syncCardBundles, openCardModal }: CardProps) {
-  const { createModal, closeModal, createDialog } = useApp();
+  const { createModal, createDialog } = useApp();
   let mouseX = useMotionValue(0);
   let mouseY = useMotionValue(0);
 
@@ -33,31 +30,7 @@ function Card({ cardBundle, syncCardBundles, openCardModal }: CardProps) {
     mouseY.set(clientY - top);
   }
 
-  const onEdit = () => {
-    const successfulSubmitHandler = async (data: CardFormData) => {
-      const cardData = cardFormDataToCardData(data);
-
-      const res = await window.api.blob.cards.update(
-        cardBundle.id,
-        cardData,
-        data.character.bannerURI ?? null,
-        data.character.avatarURI ?? null
-      );
-      syncCardBundles();
-      if (res.kind === "err") {
-        toast.error("Error updating card.");
-        console.error("An error occurred while running the update function:", res.error);
-        return;
-      }
-      closeModal();
-    };
-
-    createModal(
-      <div className="h-[80vh] w-[36rem] overflow-hidden rounded-xl">
-        <CharacterForm cardBundle={cardBundle} formType="edit" onSuccessfulSubmit={successfulSubmitHandler} />
-      </div>
-    );
-  };
+  const handleEdit = () => {};
 
   const onDelete = () => {
     const config: DialogConfig = {
@@ -123,7 +96,11 @@ function Card({ cardBundle, syncCardBundles, openCardModal }: CardProps) {
         </motion.button>
       </ContextMenuTrigger>
       <ContextMenuContent className="w-40 px-1 py-2">
-        <ContextMenuItem onSelect={onEdit}>
+        <ContextMenuItem
+          onSelect={() => {
+            createModal(<EditCardModal cardBundle={cardBundle} syncCardBundles={syncCardBundles} />);
+          }}
+        >
           Edit
           <ContextMenuShortcut>
             <PencilIcon className="size-4" />

src/renderer/src/components/Card.tsx

@@ -1,17 +1,22 @@
 import Dropdown from "@/components/Dropdown";
 import { Button } from "@/components/ui/button";
-import { ArrowUpOnSquareIcon, ChatBubbleLeftRightIcon } from "@heroicons/react/24/solid";
+import { ArrowUpOnSquareIcon, ChatBubbleLeftRightIcon, PencilIcon } from "@heroicons/react/24/solid";
 import { CardBundle } from "@shared/types";
 import { queries } from "../lib/queries";
 import { toast } from "sonner";
 import Tag from "@/components/Tag";
 import { time } from "@/lib/time";
-interface Props {
+import EditCardModal from "@/components/EditCardModal";
+import { useApp } from "@/components/AppContext";
+interface CardModalProps {
   cardBundle: CardBundle;
+  syncCardBundles: () => void;
   onCreateChat: (cardID: number, greeting: string) => void;
 }
 
-function CardModal({ cardBundle, onCreateChat }: Props) {
+function CardModal({ cardBundle, syncCardBundles, onCreateChat }: CardModalProps) {
+  const { createModal, closeModal } = useApp();
+
   const handleExport = async () => {
     const cardDirRes = await queries.getCardDir(cardBundle.id);
 
@@ -30,6 +35,11 @@ function CardModal({ cardBundle, onCreateChat }: Props) {
     toast.success("Card successfully exported to zip!");
   };
 
+  const handleEdit = () => {
+    closeModal();
+    createModal(<EditCardModal cardBundle={cardBundle} syncCardBundles={syncCardBundles} />);
+  };
+
   return (
     <div className="flex w-[45rem] items-center justify-center rounded-lg bg-neutral-800">
       <div className="scroll-secondary h-[60rem] overflow-y-scroll rounded-lg">
@@ -68,6 +78,10 @@ function CardModal({ cardBundle, onCreateChat }: Props) {
             </div>
           </div>
           <div className="mt-6 flex justify-end space-x-4 border-b border-t border-neutral-700">
+            <Button variant="outline" className="group m-2 h-10 w-16 border-none bg-transparent" onClick={handleEdit}>
+              <PencilIcon className="size-6 text-neutral-400 transition duration-200 ease-out group-hover:text-neutral-200" />
+            </Button>
+
             <Button variant="outline" className="group m-2 h-10 w-16 border-none bg-transparent" onClick={handleExport}>
               <ArrowUpOnSquareIcon className="size-6 text-neutral-400 transition duration-200 ease-out group-hover:text-neutral-200" />
             </Button>

src/renderer/src/components/CardModal.tsx

@@ -26,7 +26,6 @@ export default function ChatsSidebar({ chatID, personaBundle, syncChatHistory, s
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const { createModal, createDialog } = useApp();
 
-
   useEffect(() => {
     syncRecentChats();
   }, []);
@@ -108,9 +107,6 @@ export default function ChatsSidebar({ chatID, personaBundle, syncChatHistory, s
                       };
                       createDialog(config);
                     }}
-                    cloneChat={() => {
-                      // TODO clone chat with the given id
-                    }}
                     id={chat.chat_id.toString()}
                     avatarURI={chat.avatarURI || ""}
                     name={chat.name}
@@ -157,7 +153,6 @@ interface RecentChatProps {
   active: boolean;
   deleteChat: () => void;
   resetChat: () => void;
-  cloneChat: () => void;
   className?: string;
   [x: string]: any;
 }
@@ -170,7 +165,6 @@ function RecentChat({
   active,
   deleteChat,
   resetChat,
-  cloneChat,
   className,
   ...rest
 }: RecentChatProps) {
@@ -208,12 +202,6 @@ function RecentChat({
             <ArrowPathIcon className="size-4" />
           </ContextMenuShortcut>
         </ContextMenuItem>
-        <ContextMenuItem disabled>
-          Clone
-          <ContextMenuShortcut>
-            <DocumentDuplicateIcon className="size-4" />
-          </ContextMenuShortcut>
-        </ContextMenuItem>
       </ContextMenuContent>
     </ContextMenu>
   );

src/renderer/src/components/ChatsSidebar.tsx

@@ -0,0 +1,38 @@
+import { useApp } from "@/components/AppContext";
+import CharacterForm from "@/components/CharacterForm";
+import { cardFormDataToCardData } from "@/lib/utils";
+import { CardBundle, CardFormData } from "@shared/types";
+import { toast } from "sonner";
+
+interface EditCardModalProps {
+  cardBundle: CardBundle;
+  syncCardBundles: () => void;
+}
+
+export default function EditCardModal({ cardBundle, syncCardBundles }: EditCardModalProps) {
+  const { closeModal } = useApp();
+
+  const handleSuccessfulSubmit = async (data: CardFormData) => {
+    const cardData = cardFormDataToCardData(data);
+
+    const res = await window.api.blob.cards.update(
+      cardBundle.id,
+      cardData,
+      data.character.bannerURI ?? null,
+      data.character.avatarURI ?? null
+    );
+    syncCardBundles();
+    if (res.kind === "err") {
+      toast.error("Error updating card.");
+      console.error("An error occurred while running the update function:", res.error);
+      return;
+    }
+    closeModal();
+  };
+
+  return (
+    <div className="h-[80vh] w-[36rem] overflow-hidden rounded-xl">
+      <CharacterForm cardBundle={cardBundle} formType="edit" onSuccessfulSubmit={handleSuccessfulSubmit} />
+    </div>
+  );
+}