ui improv

ui/src/App.tsx

@@ -97,6 +97,13 @@ export default function App() {
         }),
       ]);
       setIsDirty(false);
+      userSettingsTable?.autoSave &&
+        toast({
+          title: "Saved",
+          status: "success",
+          duration: 1000,
+          isClosable: true,
+        });
     }
   }, []);
   const deleteCurWorkflow = async () => {

ui/src/RecentFilesDrawer/AddTagToWorkflowPopover.tsx

@@ -62,7 +62,7 @@ export default function AddTagToWorkflowPopover({ workflow }: Props) {
   return (
     <Popover isLazy={true} onOpen={onOpen} closeOnBlur={false} placement="auto">
       <PopoverTrigger>
-        <MenuItem icon={<IconTag />}>Tag</MenuItem>
+        <MenuItem icon={<IconTag />}>Add Tag</MenuItem>
       </PopoverTrigger>
       <PopoverContent>
         <PopoverArrow />

ui/src/RecentFilesDrawer/MoreActionMenu.tsx

@@ -48,7 +48,11 @@ export default function MoreActionMenu({ workflow }: Props) {
           <AddTagToWorkflowPopover workflow={workflow} />
           <Tooltip
             hasArrow
-            label={isLocked ? "Click to unlock" : "Click to lock"}
+            label={
+              isLocked
+                ? "Unlock workflow, allow modifying"
+                : "Lock workflow, prevent modifying"
+            }
             placement="bottom"
           >
             <MenuItem

ui/src/RecentFilesDrawer/RecentFilesDrawer.tsx

@@ -208,8 +208,8 @@ export default function RecentFilesDrawer({ onClose, onClickNewFlow }: Props) {
         <Card
           width={DRAWER_WIDTH}
           height={"100vh"}
-          pl={4}
-          pr={5}
+          pl={2}
+          pr={2}
           pt={4}
           gap={4}
           position={"absolute"}

ui/src/RecentFilesDrawer/WorkflowListItem.tsx

@@ -9,7 +9,7 @@ import {
   IconButton,
   Tooltip,
 } from "@chakra-ui/react";
-import { IconExternalLink } from "@tabler/icons-react";
+import { IconExternalLink, IconLock } from "@tabler/icons-react";
 import { formatTimestamp, openWorkflowInNewTab } from "../utils";
 import { MouseEvent, useState, memo, ChangeEvent, useContext } from "react";
 import WorkflowListItemRightClickMenu from "./WorkflowListItemRightClickMenu";
@@ -80,9 +80,19 @@ export default memo(function WorkflowListItem({ workflow }: Props) {
         )}
 
         <Stack textAlign={"left"} gap={0}>
-          <Text fontWeight={"500"} noOfLines={2}>
-            {workflow.name ?? "untitled"}
-          </Text>
+          <Flex alignItems={"center"}>
+            <Text
+              fontWeight={"500"}
+              noOfLines={2}
+              style={{ display: "inline-block" }}
+            >
+              {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>