only show action buttons on hover to improve performance

dist/workspace_web/AppIsDirtyEventListener-itM8SNk2.js

@@ -1 +0,0 @@
-import{r as l,j as m}from"./input.js";import{app as t}from"/scripts/app.js";import{a7 as C,j as D,aq as j,n as W,T as _,ar as x,E as p,as as I,C as n,p as d,at as R}from"./App-49F9REmv.js";import{u as L}from"./useDebounceFn-ld478fd0.js";import"/scripts/api.js";function F(){const{isDirty:w,setIsDirty:v,setRoute:k,saveCurWorkflow:S}=l.useContext(C),y=l.useRef(w),[g,E]=l.useState(!1);D();const h=l.useRef(null);l.useEffect(()=>{var i,c;const s=e=>{var u;if(document.visibilityState==="hidden")return;const r=I(e);if(r)switch(e.preventDefault(),window.dispatchEvent(new CustomEvent(x,{detail:{shortcutType:r}})),r){case p.SAVE:S();break;case p.SAVE_AS:k("saveAsModal");break;case p.openSpotlightSearch:k("spotlightSearch");break}else(u=e.target)!=null&&u.matches("input, textarea")&&Object.keys(t.canvas.selected_nodes??{}).length&&f()},o=t.canvas.onAfterChange;t.graph.onAfterChange=function(){o==null||o.apply(this,arguments),f()};const a=t.graph.onConfigure;return t.graph.onConfigure=function(){a==null||a.apply(this,arguments),setTimeout(()=>{var r,u;j(t.graph.serialize(),JSON.parse(((u=(r=n)==null?void 0:r.curWorkflow)==null?void 0:u.json)??"{}"))||f()},1e3)},document.addEventListener("click",e=>{Object.keys(t.canvas.selected_nodes??{}).length&&(t.canvas.node_over!=null||t.canvas.node_capturing_input!=null||t.canvas.node_widget!=null)&&f()}),document.addEventListener("keydown",s),(c=(i=d)==null?void 0:i.settings)!=null&&c.autoSave&&d.settings.autoSaveDuration&&(h.current=setInterval(()=>{T()},d.settings.autoSaveDuration*1e3)),()=>{document.removeEventListener("keydown",s),h.current&&clearInterval(h.current)}},[]);const T=async()=>{var o,a,i,c,e;if(!((a=(o=n)==null?void 0:o.curWorkflow)!=null&&a.id))return;const s=JSON.stringify(t.graph.serialize());s!==((i=n)==null?void 0:i.curWorkflow.json)&&(await((c=n)==null?void 0:c.updateFlow(n.curWorkflow.id,{json:s})),(e=R)==null||e.create({workflowID:n.curWorkflow.id,isAutoSave:!0,json:s}),v(!1))},b=async()=>{var s,o,a,i,c,e,r;(o=(s=n)==null?void 0:s.curWorkflow)!=null&&o.saveLock||(!w&&v(!0),y.current=!0,(i=(a=d)==null?void 0:a.settings)!=null&&i.autoSave&&((e=(c=n)==null?void 0:c.curWorkflow)!=null&&e.id)&&!g&&(await((r=n)==null?void 0:r.latestVersionCheck())||E(!0)))},[f,A]=L(b,500);return g?m.jsx(W,{label:"This workflow was changed by another tab, so you are not working on the latest version. Please refresh page to see the latest version of this workflow.",children:m.jsx(_,{colorScheme:"yellow",children:"⚠️Outdated version"})}):null}export{F as default};

dist/workspace_web/IconCopy-BoJadUqc.js

@@ -1 +0,0 @@
-import{h as a}from"./App-49F9REmv.js";var p=a("copy","IconCopy",[["path",{d:"M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z",key:"svg-0"}],["path",{d:"M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1",key:"svg-1"}]]);export{p as I};

dist/workspace_web/IconSearch-TfsRN_aS.js

@@ -1 +0,0 @@
-import{h as a}from"./App-49F9REmv.js";var r=a("search","IconSearch",[["path",{d:"M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0",key:"svg-0"}],["path",{d:"M21 21l-6 -6",key:"svg-1"}]]);export{r as I};

dist/workspace_web/chunk-3RSXBRAN-crwOgWRE.js

@@ -1 +0,0 @@
-import{f as x,j as l,g as i,h as b,l as C,o as E,n as I,r as f,ae as P}from"./input.js";import{a0 as z}from"./App-49F9REmv.js";var v=x(function(o,s){const{children:t,placeholder:n,className:r,...a}=o;return l.jsxs(i.select,{...a,ref:s,className:b("chakra-select",r),children:[n&&l.jsx("option",{value:"",children:n}),t]})});v.displayName="SelectField";function F(e,o){const s={},t={};for(const[n,r]of Object.entries(e))o.includes(n)?s[n]=r:t[n]=r;return[s,t]}var H=x((e,o)=>{var s;const t=C("Select",e),{rootProps:n,placeholder:r,icon:a,color:c,height:_,h:d,minH:h,minHeight:y,iconColor:p,iconSize:u,...j}=E(e),[g,N]=F(j,P),m=z(N),k={width:"100%",height:"fit-content",position:"relative",color:c},w={paddingEnd:"2rem",...t.field,_focus:{zIndex:"unset",...(s=t.field)==null?void 0:s._focus}};return l.jsxs(i.div,{className:"chakra-select__wrapper",__css:k,...g,...n,children:[l.jsx(v,{ref:o,height:d??_,minH:h??y,placeholder:r,...m,__css:w,children:e.children}),l.jsx(S,{"data-disabled":I(m.disabled),...(p||c)&&{color:p||c},__css:t.icon,...u&&{fontSize:u},children:a})]})});H.displayName="Select";var M=e=>l.jsx("svg",{viewBox:"0 0 24 24",...e,children:l.jsx("path",{fill:"currentColor",d:"M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"})}),R=i("div",{baseStyle:{position:"absolute",display:"inline-flex",alignItems:"center",justifyContent:"center",pointerEvents:"none",top:"50%",transform:"translateY(-50%)"}}),S=e=>{const{children:o=l.jsx(M,{}),...s}=e,t=f.cloneElement(o,{role:"presentation",className:"chakra-select__icon",focusable:!1,"aria-hidden":!0,style:{width:"1em",height:"1em",color:"currentColor"}});return l.jsx(R,{...s,className:"chakra-select__icon-wrapper",children:f.isValidElement(o)?t:null})};S.displayName="SelectIcon";export{H as S};

dist/workspace_web/chunk-NTCQBYKE-ZN6CsuPY.js

@@ -1 +0,0 @@
-import{k as t}from"./App-49F9REmv.js";import{f as o,j as s}from"./input.js";var e=o((a,r)=>s.jsx(t,{align:"center",...a,direction:"column",ref:r}));e.displayName="VStack";export{e as V};

dist/workspace_web/input.js

@@ -679,10 +679,10 @@ Error generating stack: `+i.message+`
       }
 
       ${fB}
-    `}),Lw=document.createElement("div");document.body.append(Lw);const pB=Ar.lazy(()=>Jk(()=>import("./App-49F9REmv.js").then(e=>e.aU),__vite__mapDeps([0,1])).then(({default:e})=>({default:e}))),mB={hide:-1,auto:"auto",base:0,docked:10,dropdown:1e7,sticky:11e6,banner:12e6,overlay:13e6,modal:14e6,popover:15e6,skipLink:16e6,toast:17e6,tooltip:18e6},vB=Mz({zIndices:mB});bd.createRoot(Lw).render(E.jsx(Ar.StrictMode,{children:E.jsxs(HD,{resetCSS:!1,disableGlobalStyle:!0,theme:vB,children:[E.jsx(hB,{scope:".workspace_manager"}),E.jsx(NP,{initialColorMode:"dark"}),E.jsx(dB,{children:E.jsx(S.Suspense,{children:E.jsx(pB,{})})})]})}));const Yf=document.body,gB={attributes:!0,attributeFilter:["class"]},yB=function(e,t){const r=document.documentElement;r.style.colorScheme==="dark"&&r.style.removeProperty("color-scheme");for(const n of e)if(n.type==="attributes"&&n.attributeName==="class")for(const o of Yf.classList)o.includes("chakra")&&Yf.classList.remove(o)},bB=new MutationObserver(yB);bB.observe(Yf,gB);export{$B as $,IB as A,zB as B,DB as C,FB as D,zP as E,lr as F,ii as G,CB as H,Xa as I,Dp as J,PB as K,Ya as L,ww as M,Mw as N,$w as O,Na as P,Rw as Q,Fw as R,zw as S,Aw as T,zp as U,Pb as V,LB as W,is as X,Ar as Y,wB as Z,Jk as _,MB as a,Iu as a0,vL as a1,rL as a2,mL as a3,Wf as a4,Ra as a5,wP as a6,SB as a7,Hn as a8,Uh as a9,xP as aa,xB as ab,lB as ac,uB as ad,_B as ae,mn as b,RB as c,d3 as d,ka as e,pt as f,_e as g,Be as h,Dx as i,E as j,EB as k,eS as l,Bf as m,Rv as n,Ou as o,Nu as p,kB as q,S as r,$i as s,Xf as t,VP as u,hw as v,TB as w,Kt as x,Cg as y,mO as z};
+    `}),Lw=document.createElement("div");document.body.append(Lw);const pB=Ar.lazy(()=>Jk(()=>import("./App-olu4rPJF.js").then(e=>e.aU),__vite__mapDeps([0,1])).then(({default:e})=>({default:e}))),mB={hide:-1,auto:"auto",base:0,docked:10,dropdown:1e7,sticky:11e6,banner:12e6,overlay:13e6,modal:14e6,popover:15e6,skipLink:16e6,toast:17e6,tooltip:18e6},vB=Mz({zIndices:mB});bd.createRoot(Lw).render(E.jsx(Ar.StrictMode,{children:E.jsxs(HD,{resetCSS:!1,disableGlobalStyle:!0,theme:vB,children:[E.jsx(hB,{scope:".workspace_manager"}),E.jsx(NP,{initialColorMode:"dark"}),E.jsx(dB,{children:E.jsx(S.Suspense,{children:E.jsx(pB,{})})})]})}));const Yf=document.body,gB={attributes:!0,attributeFilter:["class"]},yB=function(e,t){const r=document.documentElement;r.style.colorScheme==="dark"&&r.style.removeProperty("color-scheme");for(const n of e)if(n.type==="attributes"&&n.attributeName==="class")for(const o of Yf.classList)o.includes("chakra")&&Yf.classList.remove(o)},bB=new MutationObserver(yB);bB.observe(Yf,gB);export{$B as $,IB as A,zB as B,DB as C,FB as D,zP as E,lr as F,ii as G,CB as H,Xa as I,Dp as J,PB as K,Ya as L,ww as M,Mw as N,$w as O,Na as P,Rw as Q,Fw as R,zw as S,Aw as T,zp as U,Pb as V,LB as W,is as X,Ar as Y,wB as Z,Jk as _,MB as a,Iu as a0,vL as a1,rL as a2,mL as a3,Wf as a4,Ra as a5,wP as a6,SB as a7,Hn as a8,Uh as a9,xP as aa,xB as ab,lB as ac,uB as ad,_B as ae,mn as b,RB as c,d3 as d,ka as e,pt as f,_e as g,Be as h,Dx as i,E as j,EB as k,eS as l,Bf as m,Rv as n,Ou as o,Nu as p,kB as q,S as r,$i as s,Xf as t,VP as u,hw as v,TB as w,Kt as x,Cg as y,mO as z};
 function __vite__mapDeps(indexes) {
   if (!__vite__mapDeps.viteFileDeps) {
-    __vite__mapDeps.viteFileDeps = ["workspace_web/App-49F9REmv.js","workspace_web/assets/App-JXePnJiV.css"]
+    __vite__mapDeps.viteFileDeps = ["workspace_web/App-olu4rPJF.js","workspace_web/assets/App-JXePnJiV.css"]
   }
   return indexes.map((i) => __vite__mapDeps.viteFileDeps[i])
 }

ui/src/RecentFilesDrawer/WorkflowListItem.tsx

@@ -9,7 +9,7 @@ import {
 } from "@chakra-ui/react";
 import { IconLock } from "@tabler/icons-react";
 import { formatTimestamp } from "../utils";
-import { memo, ChangeEvent, useContext } from "react";
+import { memo, ChangeEvent, useContext, useState } from "react";
 import { RecentFilesContext, WorkspaceContext } from "../WorkspaceContext";
 import { Workflow } from "../types/dbTypes";
 import MediaPreview from "../components/MediaPreview";
@@ -33,7 +33,7 @@ export default memo(function WorkflowListItem({ workflow }: Props) {
   const { curFlowID, loadWorkflowID } = useContext(WorkspaceContext);
   const isSelected = curFlowID === workflow.id;
   const hoverBgColor = colorMode === "light" ? "gray.200" : "#4A5568";
-
+  const [isHovering, setIsHovering] = useState(false);
   const basicInfoComp = (
     <Box
       flexShrink={1}
@@ -87,7 +87,13 @@ export default memo(function WorkflowListItem({ workflow }: Props) {
   );
 
   return (
-    <HStack w={"100%"} mb={1} justify={"space-between"}>
+    <HStack
+      w={"100%"}
+      mb={1}
+      justify={"space-between"}
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+    >
       {isMultiSelecting ? (
         <Checkbox
           isChecked={isChecked}
@@ -102,7 +108,7 @@ export default memo(function WorkflowListItem({ workflow }: Props) {
       ) : (
         <>
           {basicInfoComp}
-          <WorkflowListItemActionButtons workflow={workflow} />
+          {isHovering && <WorkflowListItemActionButtons workflow={workflow} />}
         </>
       )}
     </HStack>