move dir RecentFiles

__init__.py

@@ -231,6 +231,17 @@ async def update_file(request):
         file.write(json_str)
     return web.Response(text="File updated successfully")
 
+@server.PromptServer.instance.routes.post("/workspace/update_file")
+async def get_my_workflows_dir(request):
+    
+    full_path = os.path.join(DEFAULT_MY_WORKFLOWS_DIR)
+    # Create the directory if it doesn't exist
+    os.makedirs(os.path.dirname(full_path), exist_ok=True)
+
+    with open(full_path, 'w') as file:
+        file.write(json_str)
+    return web.Response(text="File updated successfully")
+
 @server.PromptServer.instance.routes.post("/workspace/delete_file")
 async def delete_file(request):
     data = await request.json()

ui/src/App.tsx

@@ -19,7 +19,7 @@ import {
   IconSun,
   IconTriangleInvertedFilled,
 } from "@tabler/icons-react";
-import RecentFilesDrawer from "./RecentFilesDrawer";
+import RecentFilesDrawer from "./RecentFilesDrawer/RecentFilesDrawer";
 import {
   Workflow,
   createFlow,

ui/src/RecentFilesDrawer/AddTagToWorkflowPopover.tsx

@@ -11,7 +11,7 @@ import {
   HStack,
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
-import { Tag, Workflow, tagsTable, updateFlow } from "./WorkspaceDB";
+import { Tag, Workflow, tagsTable, updateFlow } from "../WorkspaceDB";
 import { IconPlus, IconTag } from "@tabler/icons-react";
 import { MultiValue, Select } from "chakra-react-select";
 
@@ -70,7 +70,6 @@ export default function AddTagToWorkflowPopover({ workflow }: Props) {
             menuIsOpen={true}
             value={selectedTags}
             onChange={(selected) => {
-              console.log(selected);
               setSelectedTags(selected);
               updateFlow(workflow.id, {
                 tags: selected.map((s) => s.value),

ui/src/RecentFilesDrawer/ManageTagsModal.tsx

@@ -12,7 +12,7 @@ import {
   IconButton,
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
-import { Tag, Workflow, tagsTable, updateFlow } from "./WorkspaceDB";
+import { Tag, Workflow, tagsTable, updateFlow } from "../WorkspaceDB";
 import { IconSettings, IconTrash } from "@tabler/icons-react";
 
 export default function ManageTagsModal({ onclose }: { onclose: () => void }) {

ui/src/RecentFilesDrawer/RecentFilesDrawer.tsx

@@ -18,7 +18,7 @@ import {
   IconButton,
 } from "@chakra-ui/react";
 import { useContext, useEffect, useState } from "react";
-import { Workflow, deleteFlow, listWorkflows, tagsTable } from "./WorkspaceDB";
+import { Workflow, deleteFlow, listWorkflows, tagsTable } from "../WorkspaceDB";
 import {
   IconChevronDown,
   IconChevronUp,
@@ -26,10 +26,11 @@ import {
   IconTrash,
   IconX,
 } from "@tabler/icons-react";
-import { WorkspaceContext } from "./WorkspaceContext";
+import { WorkspaceContext } from "../WorkspaceContext";
 import AddTagToWorkflowPopover from "./AddTagToWorkflowPopover";
 import RecentFilesDrawerMenu from "./RecentFilesDrawerMenu";
-import { formatTimestamp } from "./utils";
+import { formatTimestamp } from "../utils";
+import WorkflowListItem from "./WorkflowListItem";
 const MAX_TAGS_TO_SHOW = 6;
 type Props = {
   onclose: () => void;
@@ -42,7 +43,6 @@ export default function RecentFilesDrawer({
   onClickNewFlow,
 }: Props) {
   const [recentFlows, setRecentFlow] = useState<Workflow[]>([]);
-  const { colorMode } = useColorMode();
   const { curFlowID } = useContext(WorkspaceContext);
   const [selectedTag, setSelectedTag] = useState<string>();
   const [showAllTags, setShowAllTags] = useState(false);
@@ -50,11 +50,7 @@ export default function RecentFilesDrawer({
     const all = listWorkflows();
     setRecentFlow(all);
   }, []);
-  const onClickDelete = (id: string) => {
-    deleteFlow(id);
-    const all = listWorkflows();
-    setRecentFlow(all);
-  };
+
   const onClickTag = (name: string) => {
     setSelectedTag(name);
     setRecentFlow(listWorkflows().filter((n) => n.tags?.includes(name)));
@@ -140,73 +136,14 @@ export default function RecentFilesDrawer({
                 />
               )}
             </HStack>
-            {recentFlows.map((n) => {
-              const selected = n.id === curFlowID;
-              return (
-                <HStack w={"100%"} justify={"space-between"}>
-                  <Box
-                    as="button"
-                    textAlign={"left"}
-                    backgroundColor={selected ? "teal.200" : undefined}
-                    color={selected ? "#333" : undefined}
-                    w={"90%"}
-                    borderRadius={6}
-                    p={2}
-                    mb={2}
-                    onClick={() => {
-                      loadWorkflowID(n.id);
-                    }}
-                    _hover={{
-                      bg: colorMode === "light" ? "gray.200" : "#4A5568",
-                    }}
-                    _active={{
-                      bg: "#dddfe2",
-                      transform: "scale(0.98)",
-                      borderColor: "#bec3c9",
-                    }}
-                  >
-                    {/* <Stack gap={0} cursor={"pointer"}> */}
-                    <Text fontWeight={"500"}>{n.name ?? "untitled"}</Text>
-                    <Text color={"GrayText"} ml={2} fontSize={"sm"}>
-                      Updated: {formatTimestamp(n.updateTime)}
-                    </Text>
-                    {/* </Stack> */}
-                  </Box>
-
-                  <AddTagToWorkflowPopover workflow={n} />
-                  <Popover>
-                    {({ isOpen, onClose }) => (
-                      <>
-                        <PopoverTrigger>
-                          {/* <Button>Trigger</Button> */}
-                          <IconTrash color="#F56565" cursor={"pointer"} />
-                        </PopoverTrigger>
-                        <PopoverContent>
-                          <PopoverArrow />
-                          <PopoverCloseButton />
-                          {/* <PopoverHeader>Confirmation!</PopoverHeader> */}
-                          <PopoverBody>
-                            <Text mb={4} fontWeight={600}>
-                              Are you sure you want to delete this workflow?
-                            </Text>
-                            <Button
-                              colorScheme="red"
-                              size={"sm"}
-                              onClick={() => {
-                                onClickDelete(n.id);
-                                onClose();
-                              }}
-                            >
-                              Yes, delete
-                            </Button>
-                          </PopoverBody>
-                        </PopoverContent>
-                      </>
-                    )}
-                  </Popover>
-                </HStack>
-              );
-            })}
+            {recentFlows.map((n) => (
+              <WorkflowListItem
+                isSelected={n.id === curFlowID}
+                workflow={n}
+                loadWorkflowID={loadWorkflowID}
+                setRecentFlow={setRecentFlow}
+              />
+            ))}
           </DrawerBody>
         </DrawerContent>
       </Drawer>

ui/src/RecentFilesDrawer/RecentFilesDrawerMenu.tsx

@@ -13,9 +13,10 @@ import {
   IconSettings,
   IconTag,
 } from "@tabler/icons-react";
-import ViewBackupsModal from "./ViewBackupsModal";
+import ViewBackupsModal from "../ViewBackupsModal";
 import ManageTagsModal from "./ManageTagsModal";
 import { useState } from "react";
+import WorkspaceSettingsModal from "./WorkspaceSettingsModal";
 
 type Props = {
   //   onclose: () => void;
@@ -23,6 +24,7 @@ type Props = {
 export default function RecentFilesDrawerMenu({}: Props) {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [isManageTagsOpen, setIsManageTagsOpen] = useState(false);
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   return (
     <>
       <Menu isLazy>
@@ -34,13 +36,13 @@ export default function RecentFilesDrawerMenu({}: Props) {
           variant="outline"
         />
         <MenuList>
-          <MenuItem
-            // onClick={onOpen}
+          {/* <MenuItem
+            onClick={() => setIsSettingsOpen(true)}
             icon={<IconSettings size={16} />}
             fontSize={16}
           >
             Settings
-          </MenuItem>
+          </MenuItem> */}
           <MenuItem
             onClick={() => setIsManageTagsOpen(true)}
             icon={<IconTag size={16} />}
@@ -60,6 +62,9 @@ export default function RecentFilesDrawerMenu({}: Props) {
       {isManageTagsOpen && (
         <ManageTagsModal onclose={() => setIsManageTagsOpen(false)} />
       )}
+      {isSettingsOpen && (
+        <WorkspaceSettingsModal onclose={() => setIsSettingsOpen(false)} />
+      )}
       {isOpen && <ViewBackupsModal onclose={onClose} />}
     </>
   );

ui/src/RecentFilesDrawer/WorkflowListItem.tsx

@@ -0,0 +1,100 @@
+import {
+  Box,
+  HStack,
+  useColorMode,
+  Text,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverCloseButton,
+  PopoverArrow,
+  Button,
+  PopoverBody,
+} from "@chakra-ui/react";
+import { Workflow, deleteFlow, listWorkflows } from "../WorkspaceDB";
+import { formatTimestamp } from "../utils";
+import AddTagToWorkflowPopover from "./AddTagToWorkflowPopover";
+import { IconTrash } from "@tabler/icons-react";
+
+type Props = {
+  isSelected: boolean;
+  workflow: Workflow;
+  loadWorkflowID: (id: string) => void;
+  setRecentFlow: (flows: Workflow[]) => void;
+};
+export default function WorkflowListItem({
+  isSelected,
+  workflow,
+  loadWorkflowID,
+  setRecentFlow,
+}: Props) {
+  const { colorMode } = useColorMode();
+  const onClickDelete = (id: string) => {
+    deleteFlow(id);
+    const all = listWorkflows();
+    setRecentFlow(all);
+  };
+  return (
+    <HStack w={"100%"} justify={"space-between"}>
+      <Box
+        as="button"
+        textAlign={"left"}
+        backgroundColor={isSelected ? "teal.200" : undefined}
+        color={isSelected ? "#333" : undefined}
+        w={"90%"}
+        borderRadius={6}
+        p={2}
+        mb={2}
+        onClick={() => {
+          loadWorkflowID(workflow.id);
+        }}
+        _hover={{
+          bg: colorMode === "light" ? "gray.200" : "#4A5568",
+        }}
+        _active={{
+          bg: "#dddfe2",
+          transform: "scale(0.98)",
+          borderColor: "#bec3c9",
+        }}
+      >
+        {/* <Stack gap={0} cursor={"pointer"}> */}
+        <Text fontWeight={"500"}>{workflow.name ?? "untitled"}</Text>
+        <Text color={"GrayText"} ml={2} fontSize={"sm"}>
+          Updated: {formatTimestamp(workflow.updateTime)}
+        </Text>
+        {/* </Stack> */}
+      </Box>
+
+      <AddTagToWorkflowPopover workflow={workflow} />
+      <Popover isLazy={true}>
+        {({ isOpen, onClose }) => (
+          <>
+            <PopoverTrigger>
+              <IconTrash color="#F56565" cursor={"pointer"} />
+            </PopoverTrigger>
+            <PopoverContent>
+              <PopoverArrow />
+              <PopoverCloseButton />
+              {/* <PopoverHeader>Confirmation!</PopoverHeader> */}
+              <PopoverBody>
+                <Text mb={4} fontWeight={600}>
+                  Are you sure you want to delete this workflow?
+                </Text>
+                <Button
+                  colorScheme="red"
+                  size={"sm"}
+                  onClick={() => {
+                    onClickDelete(workflow.id);
+                    onClose();
+                  }}
+                >
+                  Yes, delete
+                </Button>
+              </PopoverBody>
+            </PopoverContent>
+          </>
+        )}
+      </Popover>
+    </HStack>
+  );
+}

ui/src/RecentFilesDrawer/WorkspaceSettingsModal.tsx

@@ -0,0 +1,66 @@
+import {
+  Button,
+  HStack,
+  useDisclosure,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  Text,
+  IconButton,
+  Input,
+} from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { IconFolder, IconSettings, IconTrash } from "@tabler/icons-react";
+
+export default function WorkspaceSettingsModal({
+  onclose,
+}: {
+  onclose: () => void;
+}) {
+  const [selectedFolder, setSelectedFolder] = useState(null);
+
+  const handleFolderChange = (event) => {
+    if (event.target.files.length) {
+      const folderPath = event.target.files[0].webkitRelativePath.split("/")[0];
+      setSelectedFolder(folderPath);
+    }
+  };
+  return (
+    <Modal isOpen={true} onClose={onclose} size={"2xl"}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Settings</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Text fontWeight={600} mb={3}>
+            Workspace Save Directory
+          </Text>
+          <HStack>
+            {/* <Input
+              value={"C:\\Users\\joshu\\Documents\\ComfyUI"}
+              disabled={true}
+              color={"gray.500"}
+            /> */}
+            <Text color={"gray.500"}>{selectedFolder}</Text>
+
+            {/* <Button
+              onClick={() => {
+                alert("Not implemented yet");
+              }}
+              paddingLeft={10}
+              paddingRight={10}
+              leftIcon={<IconFolder />}
+              colorScheme={"teal"}
+            >
+              Choose Folder
+
+            </Button> */}
+          </HStack>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+}

ui/src/ViewBackupsModal.tsx

@@ -30,7 +30,6 @@ export default function ViewBackupsModal({ onclose }: Props) {
   >([]); // {fileName: string, jsonStr: string}[]
   const fetchBackups = async () => {
     const res = await listBackup("workflows");
-    console.log(res);
     if (res == null) {
       return;
     }

ui/src/assets/react.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>