Global Editor Task queue indication

editor/components/editor-progress-indicator/editor-progress-indicator-popover-content.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+export function EditorProgressIndicatorPopoverContent({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <Container>{children}</Container>;
+}
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  flex: none;
+  gap: 32px;
+  box-shadow: 0px 16px 24px 0px rgba(0, 0, 0, 0.25);
+  border: solid 1px rgb(74, 73, 77);
+  border-radius: 12px;
+  background-color: rgba(30, 30, 30, 0.8);
+  box-sizing: border-box;
+  padding: 24px;
+  backdrop-filter: blur(32px);
+`;

editor/components/editor-progress-indicator/editor-progress-indicator-trigger-button.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+export function EditorProgressIndicatorButton({
+  isBusy = false,
+}: {
+  isBusy?: boolean;
+}) {
+  return (
+    <Container>
+      <svg
+        width="16"
+        height="12"
+        viewBox="0 0 16 12"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13.7455 5.74546L15.9 5.74546L13.0273 2.87273L10.1546 5.74546L12.3091 5.74546C12.3091 8.12264 10.3772 10.0545 8.00002 10.0545C7.27466 10.0545 6.58521 9.875 5.98911 9.55182L4.94057 10.6004C5.82393 11.1605 6.87248 11.4909 8.00002 11.4909C11.1744 11.4909 13.7455 8.91982 13.7455 5.74546ZM3.69093 5.74546C3.69093 3.36827 5.62284 1.43636 8.00002 1.43636C8.72539 1.43636 9.41484 1.61591 10.0109 1.93909L11.0595 0.890545C10.1761 0.330363 9.12757 -2.96033e-07 8.00002 -3.4532e-07C4.82566 -4.84076e-07 2.25457 2.57109 2.25457 5.74546L0.100023 5.74546L2.97275 8.61818L5.84548 5.74546L3.69093 5.74546Z"
+          fill="#787878"
+        />
+      </svg>
+      {isBusy && <IndicatorLine />}
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  align-items: center;
+  flex: none;
+  gap: 2px;
+  box-sizing: border-box;
+`;
+
+const IndicatorLine = styled.div`
+  width: 20px;
+  height: 4px;
+  background-color: rgb(37, 98, 255);
+  border-radius: 7px;
+`;

editor/components/editor-progress-indicator/editor-progress-indicator.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { EditorTaskItem } from "./editor-task-item";
+import { EditorProgressIndicatorButton } from "./editor-progress-indicator-trigger-button";
+import { EditorProgressIndicatorPopoverContent } from "./editor-progress-indicator-popover-content";
+import * as Popover from "@radix-ui/react-popover";
+
+export function EditorProgressIndicator({
+  isBusy,
+  tasks,
+}: {
+  isBusy: boolean;
+  tasks: any[];
+}) {
+  return (
+    <Popover.Root>
+      <StyledTrigger>
+        <EditorProgressIndicatorButton isBusy={isBusy} />
+      </StyledTrigger>
+      <Popover.Content
+        style={{
+          marginTop: 8,
+        }}
+      >
+        <EditorProgressIndicatorPopoverContent>
+          {tasks.map((task, index) => (
+            <EditorTaskItem
+              key={index.toString()}
+              label={task.name}
+              description={task.description}
+              progress={task.progress}
+            />
+          ))}
+        </EditorProgressIndicatorPopoverContent>
+      </Popover.Content>
+    </Popover.Root>
+  );
+}
+
+const StyledTrigger = styled(Popover.Trigger)`
+  outline: none;
+  border: none;
+  background: none;
+`;

editor/components/editor-progress-indicator/editor-task-item.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import styled from "@emotion/styled";
+import LinearProgress from "@mui/material/LinearProgress";
+
+export function EditorTaskItem({
+  label,
+  description,
+  progress,
+}: {
+  label: string;
+  description?: string;
+  progress: number | null;
+}) {
+  return (
+    <RootWrapperProgressingItemReadonly>
+      <TitleAndValueContainer>
+        <ThisLabel>{label}</ThisLabel>
+        <ColoredLinearProgress value={progress} />
+      </TitleAndValueContainer>
+      <ThisDescription>{description}</ThisDescription>
+    </RootWrapperProgressingItemReadonly>
+  );
+}
+
+const RootWrapperProgressingItemReadonly = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: none;
+  gap: 4px;
+  box-sizing: border-box;
+`;
+
+const TitleAndValueContainer = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  align-self: stretch;
+  box-sizing: border-box;
+  flex-shrink: 0;
+`;
+
+const ThisLabel = styled.span`
+  color: white;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  text-align: left;
+  width: 80px;
+`;
+
+const ColoredLinearProgress = styled(LinearProgress)`
+  height: 4px;
+  width: 203px;
+  border-radius: 7px;
+  background-color: rgb(37, 98, 255);
+`;
+
+const ThisDescription = styled.span`
+  color: rgba(255, 255, 255, 0.5);
+  text-overflow: ellipsis;
+  font-size: 10px;
+  font-weight: 400;
+  text-align: left;
+  align-self: stretch;
+  flex-shrink: 0;
+`;

editor/components/editor-progress-indicator/index.ts

@@ -0,0 +1,4 @@
+export { EditorProgressIndicator } from "./editor-progress-indicator";
+export { EditorProgressIndicatorPopoverContent } from "./editor-progress-indicator-popover-content";
+export { EditorProgressIndicatorButton } from "./editor-progress-indicator-trigger-button";
+export { EditorTaskItem } from "./editor-task-item";

editor/components/editor/editor-appbar/editor-appbar-fragment-for-canvas.tsx

@@ -20,7 +20,6 @@ const RootWrapperAppbarFragmentForCanvas = styled.div`
   align-items: center;
   gap: 10px;
   align-self: stretch;
-  background-color: ${colors.color_editor_bg_on_dark};
   box-sizing: border-box;
   padding: 10px 24px;
 `;

editor/components/editor/editor-appbar/editor-appbar-fragment-for-code-editor.tsx

@@ -1,16 +1,22 @@
 import React from "react";
 import styled from "@emotion/styled";
-import { useRouter } from "next/router";
 import { EditorAppbarIconButton } from "./editor-appbar-icon-button";
 import { GithubIcon, NotificationBellIcon } from "icons";
 import { EditorFrameworkConfigOnAppbar } from "../editor-framework-config-on-appbar";
+import { EditorProgressIndicator } from "scaffolds/editor-progress-indicator";
+import { colors } from "theme";
 
-export function AppbarFragmentForCodeEditor() {
-  const router = useRouter();
+export function AppbarFragmentForCodeEditor({
+  background = false,
+}: {
+  background?: boolean;
+}) {
   const hasNotification = false;
 
   return (
-    <RootWrapperAppbarFragmentForCodeEditor>
+    <RootWrapperAppbarFragmentForCodeEditor
+      background={background ? colors.color_editor_bg_on_dark : "transparent"}
+    >
       {/* disable temporarily */}
       <div style={{ flex: 1 }} />
       {/* <EditorFrameworkConfigOnAppbar /> */}
@@ -20,6 +26,7 @@ export function AppbarFragmentForCodeEditor() {
             <NotificationBellIcon size={24} color="#787878" />
           </EditorAppbarIconButton>
         )}
+        <EditorProgressIndicator />
         <EditorAppbarIconButton
           onClick={() => {
             window.open("https://github.com/gridaco/designto-code/", "_blank");
@@ -32,7 +39,9 @@ export function AppbarFragmentForCodeEditor() {
   );
 }
 
-const RootWrapperAppbarFragmentForCodeEditor = styled.div`
+const RootWrapperAppbarFragmentForCodeEditor = styled.div<{
+  background: React.CSSProperties["background"];
+}>`
   z-index: 10;
   display: flex;
   justify-content: center;
@@ -46,6 +55,7 @@ const RootWrapperAppbarFragmentForCodeEditor = styled.div`
   padding-top: 14px;
   padding-left: 12px;
   padding-right: 20px;
+  background: ${(props) => props.background};
 `;
 
 const AppbarActions = styled.div`

editor/components/editor/editor-appbar/editor-appbar.tsx

@@ -7,9 +7,9 @@ import { AppbarFragmentForCodeEditor } from "./editor-appbar-fragment-for-code-e
 export function Appbar() {
   return (
     <AppbarContainer>
-      <AppbarFragmentForSidebar></AppbarFragmentForSidebar>
-      <AppbarFragmentForCanvas></AppbarFragmentForCanvas>
-      <AppbarFragmentForCodeEditor></AppbarFragmentForCodeEditor>
+      <AppbarFragmentForSidebar />
+      <AppbarFragmentForCanvas />
+      <AppbarFragmentForCodeEditor />
     </AppbarContainer>
   );
 }

editor/core/actions/index.ts

@@ -1,5 +1,10 @@
 import type { FrameworkConfig } from "@grida/builder-config";
-import type { ConsoleLog, EditorState, ScenePreviewData } from "core/states";
+import type {
+  ConsoleLog,
+  EditorState,
+  EditorTask,
+  ScenePreviewData,
+} from "core/states";
 
 export type WorkspaceAction =
   //
@@ -21,7 +26,8 @@ export type Action =
   | CanvasModeAction
   | PreviewAction
   | CodeEditorAction
-  | DevtoolsAction;
+  | DevtoolsAction
+  | EditorTaskAction;
 
 export type ActionType = Action["type"];
 
@@ -85,3 +91,24 @@ export interface DevtoolsConsoleAction {
 export interface DevtoolsConsoleClearAction {
   type: "devtools-console-clear";
 }
+
+export type EditorTaskAction =
+  | EditorTaskPushAction
+  | EditorTaskPopAction
+  | EditorTaskUpdateProgressAction;
+
+export interface EditorTaskPushAction {
+  type: "editor-task-push";
+  task: EditorTask;
+}
+
+export interface EditorTaskPopAction {
+  type: "editor-task-pop";
+  task: EditorTask | { id: string };
+}
+
+export interface EditorTaskUpdateProgressAction {
+  type: "editor-task-update-progress";
+  id: string;
+  progress: number;
+}

editor/core/reducers/editor-reducer.ts

@@ -10,6 +10,9 @@ import type {
   PreviewSetAction,
   DevtoolsConsoleAction,
   DevtoolsConsoleClearAction,
+  EditorTaskPushAction,
+  EditorTaskPopAction,
+  EditorTaskUpdateProgressAction,
 } from "core/actions";
 import { EditorState } from "core/states";
 import { useRouter } from "next/router";
@@ -187,6 +190,36 @@ export function editorReducer(state: EditorState, action: Action): EditorState {
       });
       break;
     }
+    case "editor-task-push": {
+      const { task } = <EditorTaskPushAction>action;
+      const { id } = task;
+      // TODO: check id duplication
+
+      return produce(state, (draft) => {
+        draft.editorTaskQueue.tasks.push(task);
+      });
+      break;
+    }
+    case "editor-task-pop": {
+      const { task } = <EditorTaskPopAction>action;
+      const { id } = task;
+
+      return produce(state, (draft) => {
+        draft.editorTaskQueue.tasks = draft.editorTaskQueue.tasks.filter(
+          (i) => i.id !== id
+        );
+        // TODO: handle isBusy property by the task
+      });
+      break;
+    }
+    case "editor-task-update-progress": {
+      const { id, progress } = <EditorTaskUpdateProgressAction>action;
+      return produce(state, (draft) => {
+        draft.editorTaskQueue.tasks.find((i) => i.id !== id).progress =
+          progress;
+      });
+      break;
+    }
     default:
       throw new Error(`Unhandled action type: ${action["type"]}`);
   }

editor/core/states/editor-initial-state.ts

@@ -8,6 +8,7 @@ export function createInitialEditorState(editor: EditorSnapshot): EditorState {
     selectedLayersOnPreview: editor.selectedLayersOnPreview,
     design: editor.design,
     canvasMode: editor.canvasMode,
+    editorTaskQueue: editor.editorTaskQueue,
   };
 }
 
@@ -19,5 +20,15 @@ export function createPendingEditorState(): EditorState {
     selectedLayersOnPreview: [],
     design: null,
     canvasMode: "free",
+    editorTaskQueue: {
+      isBusy: true,
+      tasks: [
+        {
+          id: "pending",
+          name: "loading",
+          progress: null,
+        },
+      ],
+    },
   };
 }