feat: add paginator for version history drawer

.gitignore

@@ -11,7 +11,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 ui/node_modules
-# ui/src/utils/encryptUtils.ts
+ui/src/utils/encryptUtils.ts
 db
 dist-ssr
 *.local

README.md

@@ -2,15 +2,13 @@
 
 A ComfyUI workflow and model manager extension to **organize and manage all your workflows, models and generated images in one place**. Seamlessly switch between workflows, track version history and image generation history, 1 click install models from Civit ai, browse/update your installed models
 
-If you have questions or suggestions, please [join our Discord](https://discord.gg/HHvfEurv2Z)! 
+If you have questions or suggestions, please [join our Discord](https://discord.gg/HHvfEurv2Z)! I'm building a new platform that lets you quickly make a runnable web app from your comfyui workflow. www.nodecafe.co if you are interested to make your comfyui workflow into an app or colaborate with me, please DM me!
 
-✨We have a new platform to turn your comfyui workflow to runnable web app: www.nodecafe.co please check it out! 🥳
-
-[6-25] ⚠️ Please update workspace manager to latest version if it's not showing up for you after updating ComfyUI
+[6-21] tags are deprecated, please use folders to organize your workflows.
 
 [6-21] ‼️please upgrade to V2 and enable twoway sync if you haven't already. I will stop supporting V1 soon and will forcefully turn on twoway sync later. (twoway sync means that your workflow are twoway synced with your disk files /my_workflows directly)
 
-[6-21] ‼️ Auto-save mode will be removed comopoletely from next version. Because there are reports that autosave mode sometimes overwrite workflows mistakenly. Therefore, please **manual save** your workflows always.
+[6-21] ‼️‼️Auto-save mode will be removed comopoletely from next version. Because there are reports that autosave mode sometimes overwrite workflows mistakenly. Therefore, please **manual save** your workflows always.
 
 [New!] We provide 👭**team workspace** now! If you need to **share workflows, backup workflow versions for enterprise and teams**, please contact me about our team/enterprise product at weixuanfu01@gmail.com or join discord and DM me @briefpeach 
 
@@ -53,7 +51,7 @@ Recommanded settings for V2 (Do not use these settings if you are on V1):
 
 - 🔁Switch between different workflows easily. 1click open workflow in multiple browser tabs.
 - 🤏**Drag and drop** to insert subworkflows into current flow.
-- 🗂️Organize workflows with folders (tags are deprecated, please use folders to organize)
+- 🗂️Organize workflows with folders
 - 📂Save and sync all your workflows in a local folder (by default under `/ComfyUI/my_workflows` customize in Settings)
   - **Save workflow by pressing the 💾 button, or ⌨Shift+S shortcut** (customize in Settings).
   - Every time you save, it will create a new record in **Version History**. You can easily revert to any version.
@@ -80,6 +78,9 @@ Recommend using Chrome browser for the best experience. Safari doesn't work well
 [中文版教程](https://www.uisdc.com/workspace-manager)       [Roadmap](https://github.com/orgs/11cafe/projects/1/views/1)
 
 ## Updates
+**🦩v2.1 New gallery! Inspect image metadata**
+
+<img width="400" alt="Screenshot 2024-03-23 at 12 58 38 AM" src="https://github.com/11cafe/comfyui-workspace-manager/assets/18367033/5bac9793-7491-4131-b850-037094d03823">
 
 **🦄v2.0 Two-way sync with local folder, models manager support external models path like Automatic1111, cloud sync workflows**
   

dist/workspace_web/AppIsDirtyEventListener-JPtpDmVk.js

@@ -1 +0,0 @@
-import{r as l,N as n}from"./input.js";import{W as S,ag as w,w as d,E as p,ah as _,ai as C}from"./App-iAk7mY0h.js";import{u as D}from"./useDebounceFn-ld478fd0.js";function L(){const{isDirty:f,setIsDirty:h,setRoute:g,saveCurWorkflow:v,setCurFlowIDAndName:k}=l.useContext(S),m=l.useRef(f);l.useEffect(()=>{m.current=f},[f]),l.useEffect(()=>{const c=e=>{var s;if(document.visibilityState==="hidden")return;const t=C(e);if(t)switch(t===p.openSpotlightSearch&&e.preventDefault(),window.dispatchEvent(new CustomEvent(_,{detail:{shortcutType:t}})),t){case p.SAVE:v();break;case p.SAVE_AS:g("saveAsModal");break;case p.openSpotlightSearch:g("spotlightSearch");break}else(s=e.target)!=null&&s.matches("input, textarea")&&Object.keys(n.canvas.selected_nodes??{}).length&&E()},u=async()=>{var t,s,a,i;if(!((t=n)!=null&&t.graph)){console.error("🦄 Error in workspace manager! app.graph is not available in restoreCurWorkflow()");return}const e=(a=(s=n.graph.extra)==null?void 0:s[w])==null?void 0:a.id;if(console.log("🦄 Restoring workflow... id=",e),e){const r=await((i=d)==null?void 0:i.get(e));console.log("🦄 Restored workflow",(r==null?void 0:r.parentFolderID)+"/"+(r==null?void 0:r.name)),r&&k(r),!(r!=null&&r.saveLock)&&r&&r.json!==JSON.stringify(n.graph.serialize())&&h(!0)}},o=n.graph.onConfigure;return n.graph.onConfigure=function(){o==null||o.apply(this,arguments),setTimeout(()=>{var t,s,a,i;const e=(s=(t=n.graph.extra)==null?void 0:t[w])==null?void 0:s.id;(e==null||e!=((i=(a=d)==null?void 0:a.curWorkflow)==null?void 0:i.id))&&k(null)},500)},document.addEventListener("click",e=>{Object.keys(n.canvas.selected_nodes??{}).length&&(n.canvas.node_over!=null||n.canvas.node_capturing_input!=null||n.canvas.node_widget!=null)&&E()}),document.addEventListener("keydown",c),u(),()=>{document.removeEventListener("keydown",c)}},[]);const y=async()=>{var u,o,e,t;if((o=(u=d)==null?void 0:u.curWorkflow)!=null&&o.saveLock||m.current)return;const c=n.graph.serialize();JSON.stringify(c)!==((t=(e=d)==null?void 0:e.curWorkflow)==null?void 0:t.json)&&h(!0)},[E,b]=D(y,900);return null}export{L as default};

dist/workspace_web/IconCopy-JJxyTsor.js

@@ -1 +0,0 @@
-import{d as a}from"./App-iAk7mY0h.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-WxwWPclo.js

@@ -1 +0,0 @@
-import{d as a}from"./App-iAk7mY0h.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/assets/App-JXePnJiV.css

@@ -1 +0,0 @@
-.dragPanelIcon{display:none!important}.workspaceManagerPanel:hover .dragPanelIcon{display:block!important}

dist/workspace_web/assets/ModelManagerTopbar--iv3sdjQ.css

@@ -1 +0,0 @@
-.drag-model-manager-top-bar-icon{visibility:hidden!important}.model-manager-top-bar:hover .drag-model-manager-top-bar-icon{visibility:visible!important}

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

@@ -1 +0,0 @@
-import{f as x,j as l,g as i,e as w,k as C,o as E,l as I,r as f,a5 as P}from"./input.js";import{ab as z}from"./App-iAk7mY0h.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:w("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},b={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:b,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-JARCRF6W-J5on1Gsw.js

@@ -1 +0,0 @@
-import{b as D,r as h,j as t,g as i,a2 as v,f as j,k as T,o as B,H as E,e as $}from"./input.js";import{u as z}from"./chunk-7D6N5TE5-8Zf7TGGG.js";var[Z,F]=D({name:"CheckboxGroupContext",strict:!1});function M(o){const[s,n]=h.useState(o),[e,r]=h.useState(!1);return o!==s&&(r(!0),n(o)),e}function W(o){return t.jsx(i.svg,{width:"1.2em",viewBox:"0 0 12 10",style:{fill:"none",strokeWidth:2,stroke:"currentColor",strokeDasharray:16},...o,children:t.jsx("polyline",{points:"1.5 6 4.5 9 10.5 1"})})}function X(o){return t.jsx(i.svg,{width:"1.2em",viewBox:"0 0 24 24",style:{stroke:"currentColor",strokeWidth:4},...o,children:t.jsx("line",{x1:"21",x2:"3",y1:"12",y2:"12"})})}function H(o){const{isIndeterminate:s,isChecked:n,...e}=o,r=s?X:W;return n||s?t.jsx(i.div,{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"100%"},children:t.jsx(r,{...e})}):null}var L={display:"inline-flex",alignItems:"center",justifyContent:"center",verticalAlign:"top",userSelect:"none",flexShrink:0},O={cursor:"pointer",display:"inline-flex",alignItems:"center",verticalAlign:"top",position:"relative"},q=v({from:{opacity:0,strokeDashoffset:16,transform:"scale(0.95)"},to:{opacity:1,strokeDashoffset:0,transform:"scale(1)"}}),J=v({from:{opacity:0},to:{opacity:1}}),K=v({from:{transform:"scaleX(0.65)"},to:{transform:"scaleX(1)"}}),Q=j(function(s,n){const e=F(),r={...e,...s},a=T("Checkbox",r),c=B(s),{spacing:x="0.5rem",className:C,children:m,iconColor:u,iconSize:d,icon:k=t.jsx(H,{}),isChecked:f,isDisabled:g=e==null?void 0:e.isDisabled,onChange:p,inputProps:w,..._}=c;let y=f;e!=null&&e.value&&c.value&&(y=e.value.includes(c.value));let b=p;e!=null&&e.onChange&&c.value&&(b=E(e.onChange,p));const{state:l,getInputProps:A,getCheckboxProps:S,getLabelProps:G,getRootProps:P}=z({..._,isDisabled:g,isChecked:y,onChange:b}),I=M(l.isChecked),R=h.useMemo(()=>({animation:I?l.isIndeterminate?`${J} 20ms linear, ${K} 200ms linear`:`${q} 200ms linear`:void 0,fontSize:d,color:u,...a.icon}),[u,d,I,l.isIndeterminate,a.icon]),N=h.cloneElement(k,{__css:R,isIndeterminate:l.isIndeterminate,isChecked:l.isChecked});return t.jsxs(i.label,{__css:{...O,...a.container},className:$("chakra-checkbox",C),...P(),children:[t.jsx("input",{className:"chakra-checkbox__input",...A(w,n)}),t.jsx(i.span,{__css:{...L,...a.control},className:"chakra-checkbox__control",...S(),children:N}),m&&t.jsx(i.span,{className:"chakra-checkbox__label",...G(),__css:{marginStart:x,...a.label},children:m})]})});Q.displayName="Checkbox";var U=j(function(s,n){const{templateAreas:e,gap:r,rowGap:a,columnGap:c,column:x,row:C,autoFlow:m,autoRows:u,templateRows:d,autoColumns:k,templateColumns:f,...g}=s,p={display:"grid",gridTemplateAreas:e,gridGap:r,gridRowGap:a,gridColumnGap:c,gridAutoColumns:k,gridColumn:x,gridRow:C,gridAutoFlow:m,gridAutoRows:u,gridTemplateRows:d,gridTemplateColumns:f};return t.jsx(i.div,{ref:n,__css:p,...g})});U.displayName="Grid";export{Q as C,U as G};

dist/workspace_web/chunk-NTCQBYKE-a1mju5OW.js

@@ -1 +0,0 @@
-import{f as t}from"./App-iAk7mY0h.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/chunk-VTV6N5LE-_5o2YPCq.js

@@ -1 +0,0 @@
-import{f as l,n as f,o as h,j as e,g as n,e as m,k as y,r as o}from"./input.js";import{u as w}from"./chunk-7D6N5TE5-8Zf7TGGG.js";var N=l(function(a,i){const s=f("Link",a),{className:c,isExternal:t,...r}=h(a);return e.jsx(n.a,{target:t?"_blank":void 0,rel:t?"noopener":void 0,ref:i,className:m("chakra-link",c),...r,__css:s})});N.displayName="Link";var j=l(function(a,i){const s=y("Switch",a),{spacing:c="0.5rem",children:t,...r}=h(a),{getIndicatorProps:u,getInputProps:p,getCheckboxProps:x,getRootProps:_,getLabelProps:g}=w(r),b=o.useMemo(()=>({display:"inline-block",position:"relative",verticalAlign:"middle",lineHeight:0,...s.container}),[s.container]),S=o.useMemo(()=>({display:"inline-flex",flexShrink:0,justifyContent:"flex-start",boxSizing:"content-box",cursor:"pointer",...s.track}),[s.track]),d=o.useMemo(()=>({userSelect:"none",marginStart:c,...s.label}),[c,s.label]);return e.jsxs(n.label,{..._(),className:m("chakra-switch",a.className),__css:b,children:[e.jsx("input",{className:"chakra-switch__input",...p({},i)}),e.jsx(n.span,{...x(),className:"chakra-switch__track",__css:S,children:e.jsx(n.span,{__css:s.thumb,className:"chakra-switch__thumb",...u()})}),t&&e.jsx(n.span,{className:"chakra-switch__label",...g(),__css:d,children:t})]})});j.displayName="Switch";export{N as L,j as S};

dist/workspace_web/civitUtils-Q9XxZABL.js

@@ -1 +0,0 @@
-import{h as m}from"./App-iAk7mY0h.js";const r="WORKSPACE_CIVIT_API_KEY_STORAGE_KEY";function h(){return localStorage.getItem(r)}function g(e){localStorage.setItem(r,e)}function v(e){return`https://civitai.com/api/download/models/${e}`}async function w(e){var s,a,n;try{const l=`https://civitai.com/api/v1/model-versions/by-hash/${e}`,t=await(await fetch(l)).json();let i;if(await((s=m)==null?void 0:s.getSetting("showNsfwModelThumbnail"))===!0)i=(n=(a=t==null?void 0:t.images)==null?void 0:a[0])==null?void 0:n.url;else if(!t.model.nsfw){const o=t.images.find(c=>c.nsfwLevel==1);i=o==null?void 0:o.url}return{modelName:t.model.name,civitModelID:String(t.modelId),civitModelVersionID:String(t.id),imageUrl:i??void 0}}catch{return{}}}export{v as a,w as f,h as g,g as s};

dist/workspace_web/useDebounceFn-ld478fd0.js

@@ -1 +0,0 @@
-import{r}from"./input.js";function a(u,c){const e=r.useRef(0),t=r.useCallback(()=>{e.current!==null&&(clearTimeout(e.current),e.current=0)},[]),n=r.useCallback((...o)=>{t(),e.current=setTimeout(()=>u(...o),c)},[u,c,t]);return r.useEffect(()=>()=>{t()},[]),[n,t]}export{a as u};

service/setting_service.py

@@ -15,12 +15,11 @@ def get_settings_endpoint(request):
     return web.json_response(text=json.dumps(settings), content_type='application/json')
 
 def get_settings():
-    new_settings_path = os.path.join(db_dir_path, 'settings.json')
-    if os.path.exists(new_settings_path):
+    if os.path.exists(f'{db_dir_path}/settings.json'):
         # to deprecate and remove legacy settings file
         # if os.path.exists(f'{db_dir_path}/useSettings.json'):
         #     os.remove(f'{db_dir_path}/useSettings.json')
-        with open(new_settings_path, 'r') as file:
+        with open(f'{db_dir_path}/settings.json', 'r') as file:
             return json.load(file)
     data = read_table('userSettings')
     if (data):

ui/src/App.tsx

@@ -131,7 +131,7 @@ export default function App() {
     try {
       await loadDBs();
     } catch (error) {
-      console.error("🦄Workspace Manager - Error loading db", error);
+      console.error("error loading db", error);
     }
     setLoadingDB(false);
 

ui/src/components/Paginator.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Flex, Button, Text, Spinner } from "@chakra-ui/react";
+
+type PaginatorProps = {
+  pageNumber: number;
+  loading: boolean;
+  noMoreData: boolean;
+  onPageChange: (newPage: number) => void;
+};
+
+const Paginator: React.FC<PaginatorProps> = ({
+  pageNumber,
+  loading,
+  noMoreData,
+  onPageChange,
+}) => {
+  const handlePrevPage = () => {
+    if (pageNumber > 1) {
+      onPageChange(pageNumber - 1);
+    }
+  };
+
+  const handleNextPage = () => {
+    if (!noMoreData) {
+      onPageChange(pageNumber + 1);
+    }
+  };
+
+  return (
+    <Flex justifyContent="center" alignItems="center" mt={2}>
+      <Button
+        onClick={handlePrevPage}
+        isDisabled={pageNumber === 1 || loading}
+        mr={2}
+      >
+        Previous
+      </Button>
+      <Text>{pageNumber}</Text>
+      <Button
+        onClick={handleNextPage}
+        isDisabled={noMoreData || loading}
+        ml={2}
+      >
+        Next
+      </Button>
+      {noMoreData && !loading && <Text ml={4}>No more data!</Text>}
+      {loading && <Spinner ml={2} size={"xs"} color="gray" />}
+    </Flex>
+  );
+};
+
+export default Paginator;

ui/src/components/VersionHistoryDrawer.tsx

@@ -14,7 +14,6 @@ import {
   TabPanels,
   Tab,
   TabPanel,
-  useToast,
   HStack,
   Tag,
 } from "@chakra-ui/react";
@@ -30,10 +29,10 @@ import { WorkspaceContext } from "../WorkspaceContext";
 import { Changelog, WorkflowVersion } from "../types/dbTypes";
 import DeleteConfirm from "./DeleteConfirm";
 import { app } from "../utils/comfyapp";
+import Paginator from "./Paginator";
 
 export function VersionHistoryDrawer({ onClose }: { onClose: () => void }) {
-  const { isDirty, loadWorkflowID, curVersion, session } =
-    useContext(WorkspaceContext);
+  const { isDirty, curVersion, session } = useContext(WorkspaceContext);
   const [active, setActive] = useState(0); // 0: version、1: changelog
   const [selectedVersion, setSelectedVersion] = useState<string | null>(null);
   const [changelogs, setChangelogs] = useState<Changelog[]>([]);
@@ -43,6 +42,7 @@ export function VersionHistoryDrawer({ onClose }: { onClose: () => void }) {
   const curFlow = workflowsTable?.curWorkflow;
   const cloudHost = userSettingsTable?.settings?.cloudHost;
   const [loading, setLoading] = useState(false);
+  const [pageNumber, setPageNumber] = useState(1);
   const loadChangeLogs = async (flowId: string) => {
     const workflow = await workflowsTable?.get(flowId);
     const changelogs = await changelogsTable?.listByWorkflowID(flowId);
@@ -54,15 +54,13 @@ export function VersionHistoryDrawer({ onClose }: { onClose: () => void }) {
     selectedChangelogID && setSelectedVersion(selectedChangelogID);
   };
 
-  const loadVersions = async () => {
+  const loadVersions = async (pageNum: number) => {
     let vers =
       (await workflowVersionsTable?.listByWorkflowID(curFlow!.id)) ?? [];
     if (session?.shareKey && curFlow?.cloudID) {
       setLoading(true);
       await fetch(
-        userSettingsTable?.settings?.cloudHost! +
-          "/api/listWorkflowVersionsByWorkflowID?workflowID=" +
-          curFlow?.cloudID,
+        `${userSettingsTable?.settings?.cloudHost}/api/listWorkflowVersionsByWorkflowID?workflowID=${curFlow?.cloudID}&pageNumber=${pageNum}`,
         {
           headers: {
             authorization: `Bearer ${session?.shareKey}`,
@@ -90,16 +88,22 @@ export function VersionHistoryDrawer({ onClose }: { onClose: () => void }) {
     setVersions(vers);
   };
 
+  const onVersionsPageChange = (num: number) => {
+    setPageNumber(num);
+    loadVersions(num);
+  };
+
   const onDelete = (id: string) => {
     workflowVersionsTable?.delete(id).then(() => {
-      loadVersions();
+      loadVersions(pageNumber);
     });
   };
 
   useEffect(() => {
     switch (active) {
       case 0:
-        loadVersions();
+        setPageNumber(1);
+        loadVersions(1);
         break;
       case 1:
         loadChangeLogs(curFlow!.id);
@@ -158,7 +162,6 @@ export function VersionHistoryDrawer({ onClose }: { onClose: () => void }) {
                 </Text>
               )}
               <Stack divider={<StackDivider />} spacing={2}>
-                {loading && <Text>Loading...</Text>}
                 {versions?.map((version) => {
                   return (
                     <Flex
@@ -223,6 +226,12 @@ export function VersionHistoryDrawer({ onClose }: { onClose: () => void }) {
                     </Flex>
                   );
                 })}
+                <Paginator
+                  onPageChange={onVersionsPageChange}
+                  pageNumber={pageNumber}
+                  loading={loading}
+                  noMoreData={versions.length === 0}
+                />
               </Stack>
             </TabPanel>
             <TabPanel>

ui/src/main.tsx

@@ -4,8 +4,9 @@ import { ColorModeScript, type StyleFunctionProps } from "@chakra-ui/react";
 import { ChakraProvider, extendTheme } from "@chakra-ui/react";
 import { AlertDialogProvider } from "./components/AlertDialogProvider.tsx";
 import CSSReset from "./MyCSSReset.tsx";
-import { waitForApp } from "./utils/comfyapp.ts";
 
+const topbar = document.createElement("div");
+document.body.append(topbar);
 const App = React.lazy(() =>
   import("./App.tsx").then(({ default: App }) => ({
     default: App,
@@ -50,6 +51,20 @@ const theme = extendTheme({
   },
 });
 
+ReactDOM.createRoot(topbar).render(
+  <React.StrictMode>
+    <ChakraProvider resetCSS={false} disableGlobalStyle={true} theme={theme}>
+      <CSSReset scope=".workspace_manager" />
+      <ColorModeScript initialColorMode="dark" />
+      <AlertDialogProvider>
+        <Suspense>
+          <App />
+        </Suspense>
+      </AlertDialogProvider>
+    </ChakraProvider>
+  </React.StrictMode>,
+);
+
 // hacky fix for chakra add extra className (chakra-ui-light) into body
 // and resulted in user unable to copy new nodes into clipboard, because of this check: e.target.className === "litegraph"
 // (https://github.com/comfyanonymous/ComfyUI/blob/57926635e8d84ae9eea4a0416cc75e363f5ede45/web/scripts/app.js#L861)
@@ -81,40 +96,3 @@ const callback = function (
 };
 const observer = new MutationObserver(callback);
 observer.observe(targetNode, observerConfig);
-
-function waitForDocumentBody() {
-  return new Promise((resolve) => {
-    if (document.body) {
-      return resolve(document.body);
-    }
-
-    document.addEventListener("DOMContentLoaded", () => {
-      resolve(document.body);
-    });
-  });
-}
-
-// wait for document.body to load so that the top menu is loaded and my react component has a place to mount
-waitForDocumentBody()
-  .then(() => waitForApp())
-  .then(() => {
-    const topbar = document.createElement("div");
-    document.body.append(topbar);
-    ReactDOM.createRoot(topbar).render(
-      <React.StrictMode>
-        <ChakraProvider
-          resetCSS={false}
-          disableGlobalStyle={true}
-          theme={theme}
-        >
-          <CSSReset scope=".workspace_manager" />
-          <ColorModeScript initialColorMode="dark" />
-          <AlertDialogProvider>
-            <Suspense>
-              <App />
-            </Suspense>
-          </AlertDialogProvider>
-        </ChakraProvider>
-      </React.StrictMode>,
-    );
-  });

ui/src/topbar/AppIsDirtyEventListener.tsx

@@ -67,13 +67,8 @@ export default function AppIsDirtyEventListener() {
         return;
       }
       const id = app.graph.extra?.[COMFYSPACE_TRACKING_FIELD_NAME]?.id;
-      console.log("🦄 Restoring workflow... id=", id);
       if (id) {
         const flow = await workflowsTable?.get(id);
-        console.log(
-          "🦄 Restored workflow",
-          flow?.parentFolderID + "/" + flow?.name,
-        );
         flow && setCurFlowIDAndName(flow);
 
         if (

ui/src/utils/comfyapp.ts

@@ -4,14 +4,10 @@ const api_base = location.pathname.split("/").slice(0, -1).join("/");
 
 export let api: any | null = null;
 
-export async function waitForApp() {
-  await Promise.all([
-    import(api_base + "/scripts/api.js").then((apiJs) => {
-      api = apiJs?.api;
-    }),
+import(api_base + "/scripts/api.js").then((apiJs) => {
+  api = apiJs?.api;
+});
 
-    import(api_base + "/scripts/app.js").then((appJs) => {
-      app = appJs?.app;
-    }),
-  ]);
-}
+import(api_base + "/scripts/app.js").then((appJs) => {
+  app = appJs?.app;
+});

ui/src/utils/encryptUtils.ts

@@ -1,18 +0,0 @@
-// utils/encryptUtils
-const defaultSalt = import.meta.env.VITE_SHARE_KEY_ENCODE_KEY;
-
-export function encodeKey(text: string, salt: string = defaultSalt): string {
-  const randomLength = Math.floor(Math.random() * 13) + 1; // Random length between 1 and 13
-  const randomPadding = Math.random()
-    .toString(36)
-    .substring(2, 2 + randomLength);
-  const input = randomPadding + salt + text;
-  return btoa(encodeURIComponent(input));
-}
-
-export function decodeKey(encoded: string, salt: string = defaultSalt): string {
-  const decoded = decodeURIComponent(atob(encoded));
-  const saltIndex = decoded.indexOf(salt);
-  if (saltIndex === -1) throw new Error("Invalid encoded string or salt");
-  return decoded.slice(saltIndex + salt.length);
-}

ui/vite.config.ts

@@ -22,7 +22,6 @@ const rewriteImportPlugin = ({ isDev }) => {
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => ({
-  base: "./",
   envDir: ".",
   build: {
     watch: {