add back gallery media action buttons to new gallery carousel view

ui/src/RecentFilesDrawer/MoreActionMenu.tsx

@@ -57,10 +57,14 @@ export default function MoreActionMenu({ workflow }: Props) {
       method: "POST",
       body,
     });
-    Array.from(files).forEach((file) => {
+    Array.from(files).forEach(async (file) => {
+      const localPath = `workspace_manager/${file.name}`;
       mediaTable?.create({
         workflowID: workflow.id,
-        localPath: `workspace_manager/${file.name}`,
+        localPath: localPath,
+      });
+      workflowsTable?.updateMetaInfo(workflow.id, {
+        coverMediaPath: localPath,
       });
     });
   };

ui/src/gallery/GalleryContext.ts

@@ -1,11 +1,11 @@
-import { createContext } from "react";
+import { type Dispatch, type SetStateAction, createContext } from "react";
 import type { Media } from "../types/dbTypes.ts";
 
 interface GalleryContextProps {
   showAllImages: boolean;
   curMedia: Media | null;
   setCurMedia: (media: Media | null) => void;
-  setMediaList: (media: Media[]) => void;
+  setMediaList: Dispatch<SetStateAction<Media[]>>;
   setShowAllImages: (showAllImages: boolean) => void;
 }
 

ui/src/gallery/GalleryModal.tsx

@@ -20,7 +20,6 @@ import { IconX } from "@tabler/icons-react";
 import { WorkspaceContext } from "../WorkspaceContext";
 import { Media } from "../types/dbTypes";
 import { GalleryCarouselImageViewer } from "./components/GalleryCarouselImageViewer.tsx";
-import { MediaWithMetaData } from "./components/GalleryRightCol.tsx";
 import GalleryGridView from "./components/GalleryGridView.tsx";
 import { useDebounce } from "../customHooks/useDebounce.ts";
 import SearchInput from "../components/SearchInput.tsx";
@@ -31,7 +30,6 @@ export default function GalleryModal({ onclose }: { onclose: () => void }) {
   const [workflowName, setWorkflowName] = useState("");
   const [selectedID, setSelectedID] = useState<string[]>([]);
   const [isSelecting, setIsSelecting] = useState(false);
-  const [coverPath, setCoverPath] = useState("");
   const [images, setImages] = useState<Media[]>([]);
   const [curMedia, setCurMedia] = useState<Media | null>();
   const [searchValue, setSearchValue] = useState("");
@@ -53,7 +51,6 @@ export default function GalleryModal({ onclose }: { onclose: () => void }) {
       workflowsTable?.get(curFlowID).then((flow) => {
         if (flow) {
           setWorkflowName(flow.name);
-          flow?.coverMediaPath && setCoverPath(flow?.coverMediaPath);
         }
       });
   }, []);

ui/src/gallery/components/GalleryMediaItem.tsx

@@ -11,13 +11,8 @@ import {
 } from "@chakra-ui/react";
 import { formatTimestamp } from "../../utils";
 import { Media } from "../../types/dbTypes";
-import {
-  IconDownload,
-  IconPin,
-  IconPinFilled,
-  IconTrash,
-} from "@tabler/icons-react";
-import { mediaTable, workflowsTable } from "../../db-tables/WorkspaceDB";
+import { IconDownload, IconTrash } from "@tabler/icons-react";
+import { mediaTable } from "../../db-tables/WorkspaceDB";
 import { WorkspaceContext } from "../../WorkspaceContext";
 import { useDialog } from "../../components/AlertDialogProvider";
 import MediaPreview from "../../components/MediaPreview";

ui/src/gallery/components/GalleryRightCol.tsx

@@ -1,16 +1,8 @@
 import { MetaData } from "../utils.ts";
 import { Media } from "../../types/dbTypes.ts";
-import {
-  Flex,
-  IconButton,
-  Link,
-  SimpleGrid,
-  Text,
-  Tooltip,
-} from "@chakra-ui/react";
-import { IconDownload, IconPin, IconPinFilled } from "@tabler/icons-react";
-import { formatTimestamp } from "../../utils.tsx";
+import { Flex } from "@chakra-ui/react";
 import MetadataForm from "./MetaBox/MetadataForm.tsx";
+import { GalleryRightColHeaderButtons } from "./GalleryRightColHeaderButtons.tsx";
 
 export type MediaWithMetaData = Media & {
   metaData?: MetaData;
@@ -18,49 +10,7 @@ export type MediaWithMetaData = Media & {
 export const GalleryRightCol = ({ media }: { media?: MediaWithMetaData }) => {
   return (
     <Flex overflowY={"auto"} mb={4} direction={"column"} gap={2} flex={1}>
-      <Flex flexWrap={"wrap"} gap={3}>
-        <Flex alignItems={"center"} gap={2}>
-          {media?.localPath && (
-            <>
-              <Text>{media?.localPath}</Text>
-              <Tooltip label="Donwload image from gallery">
-                <Link
-                  href={`/workspace/view_media?filename=${media?.localPath}`}
-                  download={media?.localPath}
-                >
-                  <IconButton
-                    size={"sm"}
-                    icon={<IconDownload size={19} />}
-                    aria-label="donwload image from gallery"
-                  />
-                </Link>
-              </Tooltip>
-            </>
-          )}
-        </Flex>
-        <Flex gap={1} alignItems={"center"} color={"GrayText"}>
-          {!!media?.createTime && (
-            <>
-              <Text>Created:</Text>
-              <Text>{formatTimestamp(media?.createTime ?? 0, true)}</Text>
-            </>
-          )}
-        </Flex>
-        {/* <Tooltip label="Set as cover">
-          <IconButton
-            size={"sm"}
-            variant={"ghost"}
-            icon={isCover ? <IconPinFilled size={19} /> : <IconPin size={19} />}
-            aria-label="set as cover"
-            onClick={() => {
-              workflowsTable?.updateMetaInfo(curFlowID, {
-                coverMediaPath: media.localPath,
-              });
-              setCoverPath(media.localPath);
-            }}
-          />
-        </Tooltip> */}
-      </Flex>
+      <GalleryRightColHeaderButtons media={media} />
       <MetadataForm media={media ?? null} />
     </Flex>
   );

ui/src/gallery/components/GalleryRightColHeaderButtons.tsx

@@ -0,0 +1,130 @@
+import { MetaData } from "../utils.ts";
+import { Media } from "../../types/dbTypes.ts";
+import {
+  Button,
+  Flex,
+  IconButton,
+  Link,
+  Text,
+  Tooltip,
+} from "@chakra-ui/react";
+import {
+  IconDownload,
+  IconPin,
+  IconPinFilled,
+  IconTrash,
+} from "@tabler/icons-react";
+import { formatTimestamp } from "../../utils.tsx";
+import { mediaTable, workflowsTable } from "../../db-tables/WorkspaceDB.ts";
+import { useContext, useEffect, useState } from "react";
+import { GalleryContext } from "../GalleryContext.ts";
+import { WorkspaceContext } from "../../WorkspaceContext.ts";
+import { useDialog } from "../../components/AlertDialogProvider.tsx";
+
+export type MediaWithMetaData = Media & {
+  metaData?: MetaData;
+};
+export const GalleryRightColHeaderButtons = ({
+  media,
+}: {
+  media?: MediaWithMetaData;
+}) => {
+  const [isCover, setIsCover] = useState(false);
+  const { setMediaList } = useContext(GalleryContext);
+  const { loadFilePath } = useContext(WorkspaceContext);
+  const { showDialog } = useDialog();
+
+  useEffect(() => {
+    setIsCover(
+      media?.localPath != null &&
+        workflowsTable?.curWorkflow?.coverMediaPath === media?.localPath,
+    );
+  }, [media]);
+  if (!media) return null;
+  return (
+    <Flex flexWrap={"wrap"} gap={3}>
+      <Flex alignItems={"center"} gap={2}>
+        {media.localPath && (
+          <>
+            <Text>{media?.localPath}</Text>
+            <Tooltip label="Donwload image from gallery">
+              <Link
+                href={`/workspace/view_media?filename=${media?.localPath}`}
+                download={media?.localPath}
+              >
+                <IconButton
+                  size={"sm"}
+                  icon={<IconDownload size={19} />}
+                  aria-label="donwload image from gallery"
+                />
+              </Link>
+            </Tooltip>
+          </>
+        )}
+      </Flex>
+      <Flex gap={1} alignItems={"center"} color={"GrayText"}>
+        {!!media?.createTime && (
+          <Text>{formatTimestamp(media?.createTime ?? 0, true)}</Text>
+        )}
+      </Flex>
+
+      <Tooltip label="Remove image from gallery">
+        <IconButton
+          size={"sm"}
+          variant={"ghost"}
+          icon={<IconTrash size={19} />}
+          aria-label="remove image from gallery"
+          colorScheme="red"
+          onClick={async () => {
+            const res = confirm(
+              "Are you sure to remove this image from gallery? (won't delete image on your disk)",
+            );
+            if (!res) return;
+            await mediaTable?.delete(media.id);
+            setMediaList((prev) => prev.filter((v) => v.id !== media.id));
+          }}
+        />
+      </Tooltip>
+      {workflowsTable?.curWorkflow?.id && (
+        <Tooltip label="Set as cover">
+          <IconButton
+            size={"sm"}
+            variant={"ghost"}
+            icon={isCover ? <IconPinFilled size={19} /> : <IconPin size={19} />}
+            aria-label="set as cover"
+            onClick={async () => {
+              await workflowsTable?.updateMetaInfo(
+                workflowsTable!.curWorkflow!.id,
+                {
+                  coverMediaPath: isCover ? undefined : media.localPath,
+                },
+              );
+              setIsCover(!isCover);
+            }}
+          />
+        </Tooltip>
+      )}
+      <Button
+        onClick={() =>
+          showDialog("How do you want to load this workflow?", [
+            {
+              label: "Load in new workflow",
+              onClick: () => {
+                loadFilePath(media.localPath);
+              },
+              colorScheme: "teal",
+            },
+            {
+              label: "Overwrite current workflow",
+              onClick: () => loadFilePath(media.localPath, true),
+              colorScheme: "red",
+            },
+          ])
+        }
+        size={"sm"}
+      >
+        Load
+      </Button>
+    </Flex>
+  );
+};