compact list

ui/src/RecentFilesDrawer/MoreActionMenu.tsx

@@ -11,6 +11,7 @@ import {
 import {
   IconCopy,
   IconDotsVertical,
+  IconExternalLink,
   IconLock,
   IconLockOpen,
   IconUpload,
@@ -19,6 +20,7 @@ import AddTagToWorkflowPopover from "./AddTagToWorkflowPopover";
 import { Workflow } from "../types/dbTypes";
 import { mediaTable, workflowsTable } from "../db-tables/WorkspaceDB";
 import { WorkspaceContext } from "../WorkspaceContext";
+import { openWorkflowInNewTab } from "../utils";
 
 type Props = {
   workflow: Workflow;
@@ -71,7 +73,7 @@ export default function MoreActionMenu({ workflow }: Props) {
 
   return (
     <>
-      <Menu isLazy closeOnSelect={false}>
+      <Menu isLazy closeOnSelect={false} placement="right" gutter={0}>
         <MenuButton
           border={0}
           as={IconButton}
@@ -89,6 +91,12 @@ export default function MoreActionMenu({ workflow }: Props) {
           >
             Duplicate
           </MenuItem>
+          <MenuItem
+            icon={<IconExternalLink size={20} />}
+            onClick={() => openWorkflowInNewTab(workflow.id)}
+          >
+            Open in new tab
+          </MenuItem>
           {/* <AddTagToWorkflowPopover workflow={workflow} /> */}
           <Tooltip
             hasArrow

ui/src/RecentFilesDrawer/WorkflowListItem.tsx

@@ -5,7 +5,6 @@ import {
   Text,
   Checkbox,
   Flex,
-  Stack,
 } from "@chakra-ui/react";
 import { IconLock } from "@tabler/icons-react";
 import { formatTimestamp } from "../utils";
@@ -45,7 +44,7 @@ export default memo(function WorkflowListItem({ workflow }: Props) {
       onDragStart={() => setDraggingFile?.(workflow)}
       borderRadius={6}
       px={1}
-      py={"3px"}
+      py={"5px"}
       onClick={() => {
         !isMultiSelecting && loadWorkflowID(workflow.id);
       }}
@@ -53,7 +52,7 @@ export default memo(function WorkflowListItem({ workflow }: Props) {
         bg: hoverBgColor,
       }}
     >
-      <HStack>
+      <HStack flexGrow={1}>
         {!userSettingsTable?.settings?.hideCoverImage &&
           (workflow.coverMediaPath?.length || workflow.latestImage?.length) && (
             <MediaPreview
@@ -66,24 +65,21 @@ export default memo(function WorkflowListItem({ workflow }: Props) {
             />
           )}
 
-        <Stack textAlign={"left"} gap={0}>
+        <HStack
+          textAlign={"left"}
+          gap={0}
+          justifyContent={"space-between"}
+          flexGrow={1}
+        >
           <Flex alignItems={"center"}>
-            <Text
-              fontWeight={"500"}
-              noOfLines={2}
-              style={{ display: "inline-block" }}
-            >
+            <Text fontWeight={"500"} noOfLines={2} wordBreak={"break-all"}>
               {workflow.name ?? "untitled"}
             </Text>
             {workflow.saveLock && (
               <IconLock size={18} style={{ display: "inline-block" }} />
             )}
           </Flex>
-
-          <Text color={"GrayText"} ml={2} fontSize={"sm"}>
-            Updated: {formatTimestamp(workflow.updateTime)}
-          </Text>
-        </Stack>
+        </HStack>
       </HStack>
     </Box>
   );
@@ -91,9 +87,11 @@ export default memo(function WorkflowListItem({ workflow }: Props) {
   return (
     <HStack
       w={"100%"}
-      mb={1}
       justify={"space-between"}
+      borderBottom={"1px solid"}
+      borderColor={colorMode == "dark" ? "gray.900" : "gray.200"}
       onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
     >
       {isMultiSelecting ? (
         <Checkbox
@@ -109,7 +107,15 @@ export default memo(function WorkflowListItem({ workflow }: Props) {
       ) : (
         <>
           {basicInfoComp}
-          {isHovering && <WorkflowListItemActionButtons workflow={workflow} />}
+          <div style={{ width: "80px" }}>
+            {isHovering ? (
+              <WorkflowListItemActionButtons workflow={workflow} />
+            ) : (
+              <Text color={"GrayText"} ml={"2px"} fontSize={"sm"}>
+                {formatTimestamp(workflow.updateTime, false, false, "/")}
+              </Text>
+            )}
+          </div>
         </>
       )}
     </HStack>

ui/src/RecentFilesDrawer/WorkflowListItemActionButtons.tsx

@@ -1,8 +1,6 @@
 import { Flex, IconButton, Tooltip } from "@chakra-ui/react";
-import { IconExternalLink } from "@tabler/icons-react";
 import DeleteConfirm from "../components/DeleteConfirm";
 import MoreActionMenu from "./MoreActionMenu";
-import { openWorkflowInNewTab } from "../utils";
 import { useContext } from "react";
 import { RecentFilesContext } from "../WorkspaceContext";
 import { Workflow } from "../types/dbTypes";
@@ -14,17 +12,7 @@ export default function WorkflowListItemActionButtons({
 }) {
   const { onDeleteFlow } = useContext(RecentFilesContext);
   return (
-    <Flex width={"90px"} justifyContent={"flex-end"}>
-      <Tooltip label="Open in new tab">
-        <IconButton
-          aria-label="Open in new tab"
-          size={"sm"}
-          variant="ghost"
-          onClick={() => openWorkflowInNewTab(workflow.id)}
-          icon={<IconExternalLink color={"#718096"} size={23} />}
-        />
-      </Tooltip>
-
+    <Flex justifyContent={"flex-end"}>
       <DeleteConfirm
         promptMessage="Are you sure you want to delete this workflow?"
         onDelete={() => {

ui/src/components/DeleteConfirm.tsx

@@ -40,7 +40,7 @@ export default function DeleteConfirm(props: Props) {
                 <IconButton
                   aria-label="Delete confirm"
                   size={"sm"}
-                  icon={<IconTrash color="#F56565" />}
+                  icon={<IconTrash color="#F56565" size={"20px"} />}
                   isDisabled={isDisabled}
                   variant={variant}
                 />

ui/src/utils.tsx

@@ -103,6 +103,7 @@ export function formatTimestamp(
   unixTimestamp: number,
   showHourMinue: boolean = true,
   showSec: boolean = false,
+  splitChar: string = "-",
 ) {
   // Create a new Date object from the UNIX timestamp
   const date = new Date(unixTimestamp);
@@ -115,7 +116,7 @@ export function formatTimestamp(
   const minutes = String(date.getMinutes()).padStart(2, "0");
   const seconds = String(date.getSeconds()).padStart(2, "0");
   // Format the date and time string
-  const res = `${month}-${day}-${year}`;
+  const res = `${month}${splitChar}${day}${splitChar}${year}`;
   if (showHourMinue) {
     return res + ` ${hours}:${minutes}`;
   }