;
display?: "none" | "initial"; // set to none when to hide.
backgroundColor?: string;
@@ -30,7 +37,20 @@ export function DefaultEditorWorkspaceLayout(props: {
{props.leftbar && (
)}
- {props.children}
+ {props.contentAreaAppbar ? (
+
+ {props.contentAreaAppbar}
+ {props.children}
+
+ ) : (
+ {props.children}
+ )}
{props.rightbar && (
)}
diff --git a/editor/pages/files/[key]/index.tsx b/editor/pages/files/[key]/index.tsx
index 0a183a72..3aa9f4d5 100644
--- a/editor/pages/files/[key]/index.tsx
+++ b/editor/pages/files/[key]/index.tsx
@@ -43,6 +43,8 @@ export default function FileEntryEditor() {
);
}
+const action_fetchfile_id = "fetchfile";
+
function SetupEditor({
filekey,
nodeid,
@@ -112,6 +114,17 @@ function SetupEditor({
pages: pages,
},
canvasMode: initialCanvasMode,
+ editorTaskQueue: {
+ isBusy: true,
+ tasks: [
+ {
+ id: action_fetchfile_id,
+ name: "Figma File",
+ description: "Refreshing remote file",
+ progress: null,
+ },
+ ],
+ },
};
}
diff --git a/editor/scaffolds/appbar/index.tsx b/editor/scaffolds/appbar/index.tsx
new file mode 100644
index 00000000..ef012673
--- /dev/null
+++ b/editor/scaffolds/appbar/index.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { EditorAppbarFragments } from "components/editor";
+import { useEditorState } from "core/states";
+/**
+ * a scaffold App bar linked with editor state
+ */
+export function Appbar() {
+ const [state] = useEditorState();
+
+ const isCodeEditorShown = state.selectedNodes.length > 0;
+
+ return (
+
+
+
+ );
+}
diff --git a/editor/scaffolds/editor-progress-indicator/index.tsx b/editor/scaffolds/editor-progress-indicator/index.tsx
new file mode 100644
index 00000000..c16c1f11
--- /dev/null
+++ b/editor/scaffolds/editor-progress-indicator/index.tsx
@@ -0,0 +1,12 @@
+import { EditorProgressIndicator as Base } from "components/editor-progress-indicator";
+import { useDispatch } from "core/dispatch";
+import { useEditorState } from "core/states";
+
+export function EditorProgressIndicator() {
+ const dispatch = useDispatch();
+ const [state] = useEditorState();
+
+ const { editorTaskQueue } = state;
+
+ return ;
+}
diff --git a/editor/scaffolds/editor/editor.tsx b/editor/scaffolds/editor/editor.tsx
index 375c98b5..1282bf25 100644
--- a/editor/scaffolds/editor/editor.tsx
+++ b/editor/scaffolds/editor/editor.tsx
@@ -11,6 +11,7 @@ import { CodeSegment } from "scaffolds/code";
import { Inspector } from "scaffolds/inspector";
import { EditorSkeleton } from "./skeleton";
import { colors } from "theme";
+import { Appbar } from "scaffolds/appbar";
export function Editor({
loading = false,
@@ -47,6 +48,8 @@ export function Editor({
maxWidth: 600,
children: ,
}}
+ contentAreaAppbar={}
+ // appbar={}
// rightbar={}
>