From 9c0b48b674f366f71e58f0cfeabb0837641bf7fa Mon Sep 17 00:00:00 2001
From: hyrious <hyrious@outlook.com>
Date: Tue, 16 Jan 2024 14:32:42 +0800
Subject: [PATCH] feat: new toolbar config 'placement' and 'items'

---
 CHANGELOG.md                                  |   4 +
 packages/fastboard-react/test/main.tsx        |   4 +-
 .../src/components/Fastboard/Fastboard.scss   |  11 ++
 .../src/components/Fastboard/Fastboard.svelte |  12 +-
 .../src/components/Toolbar/Toolbar.scss       |  10 ++
 .../src/components/Toolbar/Toolbar.svelte     |   4 +
 .../Toolbar/components/Contents.scss          |   7 +
 .../Toolbar/components/Contents.svelte        | 122 +++++++-----------
 .../{Shapes.svelte => SelectShapes.svelte}    |   0
 .../Toolbar/definitions/Clear.svelte          |  13 ++
 .../Toolbar/definitions/Clicker.svelte        |  19 +++
 .../Toolbar/definitions/Eraser.svelte         |  19 +++
 .../Toolbar/definitions/Pencil.svelte         |  20 +++
 .../Toolbar/definitions/Selector.svelte       |  19 +++
 .../Toolbar/definitions/Shapes.svelte         |  41 ++++++
 .../Toolbar/definitions/Text.svelte           |  20 +++
 packages/fastboard-ui/src/typings.ts          |  26 ++--
 packages/fastboard-ui/test/App.svelte         |  46 ++++++-
 packages/fastboard-ui/test/mock-app.ts        |   9 +-
 19 files changed, 313 insertions(+), 93 deletions(-)
 rename packages/fastboard-ui/src/components/Toolbar/components/{Shapes.svelte => SelectShapes.svelte} (100%)
 create mode 100644 packages/fastboard-ui/src/components/Toolbar/definitions/Clear.svelte
 create mode 100644 packages/fastboard-ui/src/components/Toolbar/definitions/Clicker.svelte
 create mode 100644 packages/fastboard-ui/src/components/Toolbar/definitions/Eraser.svelte
 create mode 100644 packages/fastboard-ui/src/components/Toolbar/definitions/Pencil.svelte
 create mode 100644 packages/fastboard-ui/src/components/Toolbar/definitions/Selector.svelte
 create mode 100644 packages/fastboard-ui/src/components/Toolbar/definitions/Shapes.svelte
 create mode 100644 packages/fastboard-ui/src/components/Toolbar/definitions/Text.svelte

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5c3eb2cb..6a921613 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+- Added toolbar config `placement: "left" | "right"` and `items: ToolbarItem[]` to further control the style of toolbar.
+
 ## 0.3.10
 
 - Added method `jumpPage(index)`. Requires `@netless/window-manager` at least 0.4.63.
diff --git a/packages/fastboard-react/test/main.tsx b/packages/fastboard-react/test/main.tsx
index 23c8288a..fb9e42bf 100644
--- a/packages/fastboard-react/test/main.tsx
+++ b/packages/fastboard-react/test/main.tsx
@@ -12,7 +12,7 @@ const search = new URLSearchParams(location.search);
 const FastboardLayout: FastboardUIConfig = {
   page_control: { enable: false },
   redo_undo: { enable: true },
-  toolbar: { enable: true },
+  toolbar: { enable: true, placement: "right" },
   zoom_control: { enable: true },
 };
 
@@ -26,7 +26,7 @@ function App() {
       uid: genUID(),
       uuid: import.meta.env.VITE_ROOM_UUID,
       roomToken: import.meta.env.VITE_ROOM_TOKEN,
-      isWritable: search.get("isWritable") === "1",
+      isWritable: search.get("isWritable") !== "0",
     },
     managerConfig: {
       cursor: true,
diff --git a/packages/fastboard-ui/src/components/Fastboard/Fastboard.scss b/packages/fastboard-ui/src/components/Fastboard/Fastboard.scss
index 984ddad4..35ce4fc1 100644
--- a/packages/fastboard-ui/src/components/Fastboard/Fastboard.scss
+++ b/packages/fastboard-ui/src/components/Fastboard/Fastboard.scss
@@ -28,6 +28,17 @@
   }
 }
 
+.fastboard-right {
+  @extend .fastboard-left;
+  left: auto;
+  right: 0;
+
+  .fastboard-toolbar {
+    padding-left: 0;
+    padding-right: 16px;
+  }
+}
+
 .fastboard-bottom-left {
   display: flex;
   gap: 10px;
diff --git a/packages/fastboard-ui/src/components/Fastboard/Fastboard.svelte b/packages/fastboard-ui/src/components/Fastboard/Fastboard.svelte
index bada6c29..33a4140f 100644
--- a/packages/fastboard-ui/src/components/Fastboard/Fastboard.svelte
+++ b/packages/fastboard-ui/src/components/Fastboard/Fastboard.svelte
@@ -39,6 +39,13 @@
     layout = "visible";
   }
 
+  $: toolbar_has_items =
+    !config.toolbar ||
+    !config.toolbar.items ||
+    !config.toolbar.apps ||
+    config.toolbar.items.length > 0 ||
+    config.toolbar.apps.enable !== false;
+
   $: try {
     if (app && container) {
       app.bindContainer(container);
@@ -72,7 +79,10 @@
 
 <div class="{name}-root" class:loading={!app}>
   <div class="{name}-view" bind:this={container} on:touchstart|capture={focus_me} />
-  <div class="{name}-left" class:hidden={!(layout === "visible" || layout === "toolbar-only")}>
+  <div
+    class="{name}-{config.toolbar?.placement || 'left'}"
+    class:hidden={!toolbar_has_items || !(layout === "visible" || layout === "toolbar-only")}
+  >
     {#if config.toolbar?.enable !== false}
       <Toolbar {app} {theme} {language} config={config.toolbar} />
     {/if}
diff --git a/packages/fastboard-ui/src/components/Toolbar/Toolbar.scss b/packages/fastboard-ui/src/components/Toolbar/Toolbar.scss
index d36e37e5..7a298a58 100644
--- a/packages/fastboard-ui/src/components/Toolbar/Toolbar.scss
+++ b/packages/fastboard-ui/src/components/Toolbar/Toolbar.scss
@@ -76,3 +76,13 @@ $name: "fastboard-toolbar";
 
 @import "./components/Slider.scss";
 @import "./components/Contents.scss";
+
+.fastboard-right .#{$name}.collapsed {
+  transform: translateX(100%);
+}
+
+.fastboard-right .#{$name}-handler {
+  left: auto;
+  right: 100%;
+  transform: rotate(180deg);
+}
diff --git a/packages/fastboard-ui/src/components/Toolbar/Toolbar.svelte b/packages/fastboard-ui/src/components/Toolbar/Toolbar.svelte
index 54188d39..157c0dc3 100644
--- a/packages/fastboard-ui/src/components/Toolbar/Toolbar.svelte
+++ b/packages/fastboard-ui/src/components/Toolbar/Toolbar.svelte
@@ -24,6 +24,8 @@
   $: computed_height = clamp($container_height, extra_height, $scroll_height + extra_height);
   $: scrollable = $scroll_height + extra_height > $container_height;
 
+  $: placement = config.placement || "left";
+  $: items = config.items;
   $: hide_apps = config.apps?.enable === false;
 </script>
 
@@ -37,6 +39,8 @@
       {scroll_height}
       {computed_height}
       {scrollable}
+      {placement}
+      {items}
       {hide_apps}
     />
   </div>
diff --git a/packages/fastboard-ui/src/components/Toolbar/components/Contents.scss b/packages/fastboard-ui/src/components/Toolbar/components/Contents.scss
index 6b25cb9a..f138059d 100644
--- a/packages/fastboard-ui/src/components/Toolbar/components/Contents.scss
+++ b/packages/fastboard-ui/src/components/Toolbar/components/Contents.scss
@@ -166,3 +166,10 @@ $name: "fastboard-toolbar";
     }
   }
 }
+
+.fastboard-right .#{$name}-triangle {
+  right: auto;
+  left: 0;
+  border-left: 0;
+  border-right: 4px solid transparent;
+}
diff --git a/packages/fastboard-ui/src/components/Toolbar/components/Contents.svelte b/packages/fastboard-ui/src/components/Toolbar/components/Contents.svelte
index af476376..18dcc414 100644
--- a/packages/fastboard-ui/src/components/Toolbar/components/Contents.svelte
+++ b/packages/fastboard-ui/src/components/Toolbar/components/Contents.svelte
@@ -1,24 +1,30 @@
 <script lang="ts">
-  import type { Appliance, FastboardApp } from "@netless/fastboard-core";
+  import type { FastboardApp } from "@netless/fastboard-core";
   import type { Writable } from "svelte/store";
-  import type { Placement } from "tippy.js";
-  import type { Language, Theme } from "../../../typings";
-  import type { Shape } from "./constants";
-  import { applianceShapes, shapesIcon, shapesIconActive } from "./constants";
+  import type { Language, Theme, ToolbarItem } from "../../../typings";
   import { writable } from "svelte/store";
   import { scrollHeight } from "../../../actions/height";
   import { scrollTop } from "../../../actions/scroll";
+  import { tippy_hide_all } from "../../../actions/tippy";
   import { clamp } from "../../helpers";
   import { i18n } from "./constants";
   import { apps } from "../../../behaviors";
   import { tooltip } from "./helper";
   import Icons from "../../Icons";
-  import Button from "../../Button";
+  import Button, { type ButtonProps } from "../../Button";
+
   import StrokeWidth from "./StrokeWidth.svelte";
   import StrokeColor from "./StrokeColor.svelte";
   import TextColor from "./TextColor.svelte";
-  import Shapes from "./Shapes.svelte";
-  import { tippy_hide_all } from "../../../actions/tippy";
+  import SelectShapes from "./SelectShapes.svelte";
+
+  import Clicker from "../definitions/Clicker.svelte";
+  import Selector from "../definitions/Selector.svelte";
+  import Pencil from "../definitions/Pencil.svelte";
+  import Text from "../definitions/Text.svelte";
+  import Shapes from "../definitions/Shapes.svelte";
+  import Eraser from "../definitions/Eraser.svelte";
+  import Clear from "../definitions/Clear.svelte";
 
   export let app: FastboardApp | null | undefined = null;
   export let theme: Theme = "light";
@@ -27,19 +33,26 @@
   export let scroll_height: Writable<number>;
   export let computed_height = 0;
   export let scrollable = false;
+  export let placement: "left" | "right" = "left";
+  export let items: ToolbarItem[] = ["clicker", "selector", "pencil", "text", "shapes", "eraser", "clear"];
   export let hide_apps = false;
 
   const name = "fastboard-toolbar";
 
-  let last_shape: Shape = "rectangle";
-
   let pencil_panel: HTMLDivElement;
   let text_panel: HTMLDivElement;
   let shapes_panel: HTMLDivElement;
   let apps_panel: HTMLDivElement;
 
-  let btn_props: { name: string; theme: Theme; disabled: boolean; placement: Placement };
-  $: btn_props = { name, theme, disabled, placement: "right" };
+  let btn_props: Partial<ButtonProps>;
+  $: btn_props = {
+    name,
+    theme,
+    disabled,
+    placement: placement === "left" ? "right" : "left",
+    menu_placement: placement === "left" ? "right-start" : "left-start",
+  };
+
   $: t = i18n[language];
   $: hotkeys = app?.hotKeys;
   $: c = {
@@ -49,17 +62,11 @@
     eraser: tooltip(t.eraser, hotkeys?.changeToEraser),
     text: tooltip(t.text, hotkeys?.changeToText),
   };
+
   $: memberState = app?.memberState;
   $: appliance = $memberState?.currentApplianceName;
-  $: shape = $memberState?.shapeType;
   $: status = app?.appsStatus;
 
-  $: if (applianceShapes.includes(appliance as Appliance)) {
-    last_shape = appliance as Shape;
-  } else if (shape) {
-    last_shape = shape;
-  }
-
   $: max_scroll = scrollable ? $scroll_height + (32 + 8) * 2 - computed_height : 0;
 
   let top = writable(0);
@@ -83,13 +90,6 @@
   function text() {
     app?.setAppliance("text");
   }
-  function select_last_shape() {
-    if (applianceShapes.includes(last_shape as Appliance)) {
-      app?.setAppliance(last_shape as Appliance);
-    } else {
-      app?.setAppliance("shape", last_shape as Exclude<Shape, Appliance>);
-    }
-  }
   function eraser() {
     app?.setAppliance("eraser");
   }
@@ -104,53 +104,31 @@
   </Button>
 {/if}
 <div class="{name}-scrollable" class:scrollable use:scrollHeight={scroll_height} use:scrollTop={top}>
-  <Button class="clicker" {...btn_props} on:click={clicker} content={c.clicker}>
-    {#if appliance === "clicker"}
-      <Icons.ClickFilled {theme} active />
-    {:else}
-      <Icons.Click {theme} />
+  {#each items as item}
+    {#if item === "clicker"}
+      <Clicker {appliance} {theme} {btn_props} on:click={clicker} content={c.clicker} />
+    {:else if item === "selector"}
+      <Selector {appliance} {theme} {btn_props} on:click={selector} content={c.selector} />
+    {:else if item === "pencil"}
+      <Pencil {appliance} {theme} {btn_props} on:click={pencil} content={c.pencil} menu={pencil_panel} />
+    {:else if item === "text"}
+      <Text {appliance} {theme} {btn_props} on:click={text} content={c.text} menu={text_panel} />
+    {:else if item === "shapes"}
+      <Shapes {app} {appliance} {theme} {btn_props} content={t.shapes} menu={shapes_panel} />
+    {:else if item === "eraser"}
+      <Eraser {appliance} {theme} {btn_props} on:click={eraser} content={c.eraser} />
+    {:else if item === "clear"}
+      <Clear {theme} {btn_props} on:click={clear} content={t.clear} />
     {/if}
-  </Button>
-  <Button class="selector" {...btn_props} on:click={selector} content={c.selector}>
-    {#if appliance === "selector"}
-      <Icons.SelectorFilled {theme} active />
-    {:else}
-      <Icons.Selector {theme} />
-    {/if}
-  </Button>
-  <Button class="pencil" {...btn_props} on:click={pencil} content={c.pencil} menu={pencil_panel}>
-    {#if appliance === "pencil"}
-      <Icons.PencilFilled {theme} active />
-    {:else}
-      <Icons.Pencil {theme} />
-    {/if}
-  </Button>
-  <Button class="text" {...btn_props} on:click={text} content={c.text} menu={text_panel}>
-    {#if appliance === "text"}
-      <Icons.TextFilled {theme} active />
-    {:else}
-      <Icons.Text {theme} />
-    {/if}
-  </Button>
-  <Button class="shapes" {...btn_props} on:click={select_last_shape} content={t.shapes} menu={shapes_panel}>
-    {#if appliance === last_shape || (appliance === "shape" && shape === last_shape)}
-      <svelte:component this={shapesIconActive[last_shape]} {theme} active />
-    {:else}
-      <svelte:component this={shapesIcon[last_shape]} {theme} />
-    {/if}
-  </Button>
-  <Button class="eraser" {...btn_props} on:click={eraser} content={c.eraser}>
-    {#if appliance === "eraser"}
-      <Icons.EraserFilled {theme} active />
-    {:else}
-      <Icons.Eraser {theme} />
-    {/if}
-  </Button>
-  <Button class="clear" {...btn_props} on:click={clear} content={t.clear}>
-    <Icons.Clear {theme} />
-  </Button>
+  {/each}
   {#if !hide_apps}
-    <Button class="apps" {...btn_props} content={t.apps} menu={apps_panel} menu_placement="right-end">
+    <Button
+      class="apps"
+      {...btn_props}
+      content={t.apps}
+      menu={apps_panel}
+      menu_placement={placement === "left" ? "right-end" : "left-end"}
+    >
       <Icons.Apps {theme} />
     </Button>
   {/if}
@@ -171,7 +149,7 @@
     <TextColor {app} {theme} {disabled} />
   </div>
   <div class="{name}-panel shapes" bind:this={shapes_panel}>
-    <Shapes {app} {theme} {language} {disabled} />
+    <SelectShapes {app} {theme} {language} {disabled} />
     <div class="{name}-panel-divider" />
     <StrokeWidth {app} {theme} {disabled} />
     <div class="{name}-panel-divider" />
diff --git a/packages/fastboard-ui/src/components/Toolbar/components/Shapes.svelte b/packages/fastboard-ui/src/components/Toolbar/components/SelectShapes.svelte
similarity index 100%
rename from packages/fastboard-ui/src/components/Toolbar/components/Shapes.svelte
rename to packages/fastboard-ui/src/components/Toolbar/components/SelectShapes.svelte
diff --git a/packages/fastboard-ui/src/components/Toolbar/definitions/Clear.svelte b/packages/fastboard-ui/src/components/Toolbar/definitions/Clear.svelte
new file mode 100644
index 00000000..98b23b50
--- /dev/null
+++ b/packages/fastboard-ui/src/components/Toolbar/definitions/Clear.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { Theme } from "../../../typings";
+  import Button, { type ButtonProps } from "../../Button";
+  import Icons from "../../Icons";
+
+  export let btn_props: Partial<ButtonProps> = {};
+  export let content: ButtonProps["content"] | undefined;
+  export let theme: Theme = "light";
+</script>
+
+<Button class="clear" {...btn_props} on:click {content}>
+  <Icons.Clear {theme} />
+</Button>
diff --git a/packages/fastboard-ui/src/components/Toolbar/definitions/Clicker.svelte b/packages/fastboard-ui/src/components/Toolbar/definitions/Clicker.svelte
new file mode 100644
index 00000000..0527e5aa
--- /dev/null
+++ b/packages/fastboard-ui/src/components/Toolbar/definitions/Clicker.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { ApplianceNames } from "@netless/fastboard-core";
+  import type { Theme } from "../../../typings";
+  import Button, { type ButtonProps } from "../../Button";
+  import Icons from "../../Icons";
+
+  export let btn_props: Partial<ButtonProps> = {};
+  export let content: ButtonProps["content"] | undefined;
+  export let appliance: ApplianceNames | undefined;
+  export let theme: Theme = "light";
+</script>
+
+<Button class="clicker" {...btn_props} on:click {content}>
+  {#if appliance === "clicker"}
+    <Icons.ClickFilled {theme} active />
+  {:else}
+    <Icons.Click {theme} />
+  {/if}
+</Button>
diff --git a/packages/fastboard-ui/src/components/Toolbar/definitions/Eraser.svelte b/packages/fastboard-ui/src/components/Toolbar/definitions/Eraser.svelte
new file mode 100644
index 00000000..dd51f29b
--- /dev/null
+++ b/packages/fastboard-ui/src/components/Toolbar/definitions/Eraser.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { ApplianceNames } from "@netless/fastboard-core";
+  import type { Theme } from "../../../typings";
+  import Button, { type ButtonProps } from "../../Button";
+  import Icons from "../../Icons";
+
+  export let btn_props: Partial<ButtonProps> = {};
+  export let content: ButtonProps["content"] | undefined;
+  export let appliance: ApplianceNames | undefined;
+  export let theme: Theme = "light";
+</script>
+
+<Button class="eraser" {...btn_props} on:click {content}>
+  {#if appliance === "eraser"}
+    <Icons.EraserFilled {theme} active />
+  {:else}
+    <Icons.Eraser {theme} />
+  {/if}
+</Button>
diff --git a/packages/fastboard-ui/src/components/Toolbar/definitions/Pencil.svelte b/packages/fastboard-ui/src/components/Toolbar/definitions/Pencil.svelte
new file mode 100644
index 00000000..1515dbca
--- /dev/null
+++ b/packages/fastboard-ui/src/components/Toolbar/definitions/Pencil.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { ApplianceNames } from "@netless/fastboard-core";
+  import type { Theme } from "../../../typings";
+  import Button, { type ButtonProps } from "../../Button";
+  import Icons from "../../Icons";
+
+  export let btn_props: Partial<ButtonProps> = {};
+  export let content: ButtonProps["content"] | undefined;
+  export let menu: ButtonProps["menu"] | undefined;
+  export let appliance: ApplianceNames | undefined;
+  export let theme: Theme = "light";
+</script>
+
+<Button class="pencil" {...btn_props} on:click {content} {menu}>
+  {#if appliance === "pencil"}
+    <Icons.PencilFilled {theme} active />
+  {:else}
+    <Icons.Pencil {theme} />
+  {/if}
+</Button>
diff --git a/packages/fastboard-ui/src/components/Toolbar/definitions/Selector.svelte b/packages/fastboard-ui/src/components/Toolbar/definitions/Selector.svelte
new file mode 100644
index 00000000..8f0eb295
--- /dev/null
+++ b/packages/fastboard-ui/src/components/Toolbar/definitions/Selector.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { ApplianceNames } from "@netless/fastboard-core";
+  import type { Theme } from "../../../typings";
+  import Button, { type ButtonProps } from "../../Button";
+  import Icons from "../../Icons";
+
+  export let btn_props: Partial<ButtonProps> = {};
+  export let content: ButtonProps["content"] | undefined;
+  export let appliance: ApplianceNames | undefined;
+  export let theme: Theme = "light";
+</script>
+
+<Button class="selector" {...btn_props} on:click {content}>
+  {#if appliance === "selector"}
+    <Icons.SelectorFilled {theme} active />
+  {:else}
+    <Icons.Selector {theme} />
+  {/if}
+</Button>
diff --git a/packages/fastboard-ui/src/components/Toolbar/definitions/Shapes.svelte b/packages/fastboard-ui/src/components/Toolbar/definitions/Shapes.svelte
new file mode 100644
index 00000000..174816f4
--- /dev/null
+++ b/packages/fastboard-ui/src/components/Toolbar/definitions/Shapes.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { Appliance, ApplianceNames, FastboardApp } from "@netless/fastboard-core";
+  import type { Theme } from "../../../typings";
+  import { applianceShapes, shapesIcon, shapesIconActive, type Shape } from "../components/constants";
+  import Button, { type ButtonProps } from "../../Button";
+
+  export let app: FastboardApp | null | undefined = null;
+  export let btn_props: Partial<ButtonProps> = {};
+  export let content: ButtonProps["content"] | undefined;
+  export let menu: ButtonProps["menu"] | undefined;
+  export let appliance: ApplianceNames | undefined;
+  export let theme: Theme = "light";
+
+  $: memberState = app?.memberState;
+  $: appliance = $memberState?.currentApplianceName;
+  $: shape = $memberState?.shapeType;
+
+  let last_shape: Shape = "rectangle";
+
+  $: if (applianceShapes.includes(appliance as Appliance)) {
+    last_shape = appliance as Shape;
+  } else if (shape) {
+    last_shape = shape;
+  }
+
+  function select_last_shape() {
+    if (applianceShapes.includes(last_shape as Appliance)) {
+      app?.setAppliance(last_shape as Appliance);
+    } else {
+      app?.setAppliance("shape", last_shape as Exclude<Shape, Appliance>);
+    }
+  }
+</script>
+
+<Button class="shapes" {...btn_props} on:click={select_last_shape} {content} {menu}>
+  {#if appliance === last_shape || (appliance === "shape" && shape === last_shape)}
+    <svelte:component this={shapesIconActive[last_shape]} {theme} active />
+  {:else}
+    <svelte:component this={shapesIcon[last_shape]} {theme} />
+  {/if}
+</Button>
diff --git a/packages/fastboard-ui/src/components/Toolbar/definitions/Text.svelte b/packages/fastboard-ui/src/components/Toolbar/definitions/Text.svelte
new file mode 100644
index 00000000..8738d4f3
--- /dev/null
+++ b/packages/fastboard-ui/src/components/Toolbar/definitions/Text.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { ApplianceNames } from "@netless/fastboard-core";
+  import type { Theme } from "../../../typings";
+  import Button, { type ButtonProps } from "../../Button";
+  import Icons from "../../Icons";
+
+  export let btn_props: Partial<ButtonProps> = {};
+  export let content: ButtonProps["content"] | undefined;
+  export let menu: ButtonProps["menu"] | undefined;
+  export let appliance: ApplianceNames | undefined;
+  export let theme: Theme = "light";
+</script>
+
+<Button class="text" {...btn_props} on:click {content} {menu}>
+  {#if appliance === "text"}
+    <Icons.TextFilled {theme} active />
+  {:else}
+    <Icons.Text {theme} />
+  {/if}
+</Button>
diff --git a/packages/fastboard-ui/src/typings.ts b/packages/fastboard-ui/src/typings.ts
index d8e0d988..31b40dfc 100644
--- a/packages/fastboard-ui/src/typings.ts
+++ b/packages/fastboard-ui/src/typings.ts
@@ -23,25 +23,21 @@ export type GenericIcon<K extends string, E extends string = IconType> = {
 
 export type I18nData<T extends string> = Record<Language, Record<T, string>>;
 
+export type ToolbarItem = "clicker" | "selector" | "pencil" | "text" | "shapes" | "eraser" | "clear";
+
 export interface ToolbarConfig {
-  apps?: {
-    enable?: boolean;
-  };
+  /** @default "left" */
+  placement?: "left" | "right";
+  /** @default ["clicker", "selector", "pencil", "text", "shapes", "eraser", "clear"] */
+  items?: ToolbarItem[];
+  apps?: { enable?: boolean };
 }
 
 export interface FastboardUIConfig {
-  toolbar?: {
-    enable?: boolean;
-  } & ToolbarConfig;
-  redo_undo?: {
-    enable?: boolean;
-  };
-  zoom_control?: {
-    enable?: boolean;
-  };
-  page_control?: {
-    enable?: boolean;
-  };
+  toolbar?: { enable?: boolean } & ToolbarConfig;
+  redo_undo?: { enable?: boolean };
+  zoom_control?: { enable?: boolean };
+  page_control?: { enable?: boolean };
 }
 
 export interface ReplayFastboardUIConfig {
diff --git a/packages/fastboard-ui/test/App.svelte b/packages/fastboard-ui/test/App.svelte
index b99879df..673b13a5 100644
--- a/packages/fastboard-ui/test/App.svelte
+++ b/packages/fastboard-ui/test/App.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { FastboardApp, FastboardPlayer } from "@netless/fastboard-core";
-  import type { Language, Theme } from "../src";
+  import type { Language, Theme, ToolbarItem } from "../src";
   import type { MockApp } from "./mock-app";
   import { onMount } from "svelte";
 
@@ -25,6 +25,19 @@
     : "dark";
   let language: Language = is_client ? (navigator.language.startsWith("zh") ? "zh-CN" : "en") : "en";
   let hide_apps = false;
+  let toolbar_items: Record<ToolbarItem, boolean> = {
+    clicker: true,
+    selector: true,
+    pencil: true,
+    text: true,
+    shapes: true,
+    eraser: true,
+    clear: true,
+  };
+
+  $: toolbar_items_value = Object.keys(toolbar_items).filter(k => toolbar_items[k]) as ToolbarItem[];
+
+  let toolbar_placement: "left" | "right" = "left";
 
   let tippy_content: HTMLDivElement;
   let tippy_content_text = "hello, world!";
@@ -42,6 +55,10 @@
     language = ev.currentTarget.dataset.language as Language;
   }
 
+  function toggle_toolbar_placement(ev: { currentTarget: HTMLInputElement }) {
+    toolbar_placement = ev.currentTarget.dataset.placement as "left" | "right";
+  }
+
   $: if (is_client) {
     document.body.dataset.theme = theme;
     document.documentElement.style.colorScheme = theme;
@@ -65,6 +82,8 @@
       {language}
       config={{
         toolbar: {
+          items: toolbar_items_value,
+          placement: toolbar_placement,
           apps: {
             enable: !hide_apps,
           },
@@ -131,6 +150,31 @@
     <input type="checkbox" id="hide_apps" bind:checked={hide_apps} />
     <label for="hide_apps">Hide <kbd>APPS</kbd> Button</label>
   </div>
+  <div class="row">
+    <span>Toolbar:</span>
+    <input type="checkbox" id="tool-clicker" bind:checked={toolbar_items.clicker} />
+    <label for="tool-clicker"><em>Clicker</em></label>
+    <input type="checkbox" id="tool-selector" bind:checked={toolbar_items.selector} />
+    <label for="tool-selector"><em>Selector</em></label>
+    <input type="checkbox" id="tool-pencil" bind:checked={toolbar_items.pencil} />
+    <label for="tool-pencil"><em>Pencil</em></label>
+    <input type="checkbox" id="tool-text" bind:checked={toolbar_items.text} />
+    <label for="tool-text"><em>Text</em></label>
+    <input type="checkbox" id="tool-shapes" bind:checked={toolbar_items.shapes} />
+    <label for="tool-shapes"><em>Shapes</em></label>
+    <input type="checkbox" id="tool-eraser" bind:checked={toolbar_items.eraser} />
+    <label for="tool-eraser"><em>Eraser</em></label>
+    <input type="checkbox" id="tool-clear" bind:checked={toolbar_items.clear} />
+    <label for="tool-clear"><em>Clear</em></label>
+    <!-- prettier-ignore -->
+    <input type="radio" name="toolbar-placement" id="tool-left" data-placement="left"
+           checked={toolbar_placement === "left"} on:change={toggle_toolbar_placement} />
+    <label for="tool-left"><em>Left</em></label>
+    <!-- prettier-ignore -->
+    <input type="radio" name="toolbar-placement" id="tool-right" data-placement="right"
+           checked={toolbar_placement === "right"} on:change={toggle_toolbar_placement} />
+    <label for="tool-right"><em>Right</em></label>
+  </div>
 </div>
 
 <div style="display: none;">
diff --git a/packages/fastboard-ui/test/mock-app.ts b/packages/fastboard-ui/test/mock-app.ts
index e942f8b1..aa11b4cc 100644
--- a/packages/fastboard-ui/test/mock-app.ts
+++ b/packages/fastboard-ui/test/mock-app.ts
@@ -1,7 +1,7 @@
 import type {
   ApplianceNames,
   AppsStatus,
-  Camera,
+  CameraState,
   FastboardApp,
   MemberState,
   ShapeType,
@@ -28,7 +28,7 @@ export function mockApp(): [app: FastboardApp, mock: MockApp] {
   });
   const sceneIndex = writable(0);
   const sceneLength = writable(15);
-  const camera = writable<Camera>({ centerX: 0, centerY: 0, scale: 1 });
+  const camera = writable<CameraState>({ centerX: 0, centerY: 0, scale: 1, width: 100, height: 100 });
   const appsStatus = writable<AppsStatus>({});
 
   function simulateLoadingApp(key: string, should_fail = false) {
@@ -50,6 +50,10 @@ export function mockApp(): [app: FastboardApp, mock: MockApp] {
       setPrefersColorScheme(scheme) {
         console.log("setPrefersColorScheme", scheme);
       },
+      async addApp(args) {
+        console.log("addApp", args);
+        return "App-123";
+      },
     },
     bindContainer(el) {
       el.style.cssText = "display: flex; align-items: center; justify-content: center;";
@@ -103,6 +107,7 @@ export function mockApp(): [app: FastboardApp, mock: MockApp] {
       return Promise.resolve();
     },
     setAppliance(appliance, shape) {
+      console.log("setAppliance", appliance, shape);
       memberState.update(e => ({
         ...e,
         currentApplianceName: appliance as ApplianceNames,