feat: move level selection to the floating toolbar (#933)

src/App.tsx

@@ -174,6 +174,19 @@ const AppNoError = ({
   redoAvailable: boolean;
 }): JSX.Element => {
   const [level, setLevel] = useState<Level>(initialLevel);
+  const toggleLevel = (): void => {
+    switch (level) {
+      case "Beginner":
+        setLevel("Intermediate");
+        break;
+      case "Intermediate":
+        setLevel("Expert");
+        break;
+      case "Expert":
+        setLevel("Beginner");
+        break;
+    }
+  };
   const [showCreateDefModal, setShowCreateDefModal] = useState<boolean>(false);
   const [showCreateTypeDefModal, setShowCreateTypeDefModal] =
     useState<boolean>(false);
@@ -274,6 +287,8 @@ const AppNoError = ({
               onModeChange={() => {
                 console.log("Toggle mode");
               }}
+              level={level}
+              onLevelChange={toggleLevel}
               undoAvailable={p.undoAvailable}
               onClickUndo={() => {
                 undo
@@ -327,7 +342,6 @@ const AppNoError = ({
       {selection ? (
         <ActionsListSelection
           level={level}
-          onChangeLevel={setLevel}
           selection={selection}
           sessionId={p.sessionId}
           onAction={(action) => {
@@ -407,7 +421,6 @@ const ActionsListSelection = (p: {
   selection: Selection;
   sessionId: string;
   level: Level;
-  onChangeLevel: (level: Level) => void;
   onAction: (action: NoInputAction) => void;
   onInputAction: (action: InputAction, option: Option) => void;
   onRequestOpts: (acrion: InputAction) => Promise<Options>;

src/components/ActionPanel/index.tsx

@@ -19,7 +19,6 @@ import classNames from "classnames";
 export interface ActionPanelProps {
   actions: Action[];
   level: Level;
-  onChangeLevel: (level: Level) => void;
   onAction: (action: NoInputAction) => void;
   onInputAction: (action: InputAction, option: Option) => void;
   onRequestOpts: (action: InputAction) => Promise<Options>;
@@ -32,31 +31,15 @@ type State =
 export const ActionPanel = ({
   actions,
   level,
-  onChangeLevel,
   onAction,
   onInputAction,
   onRequestOpts,
 }: ActionPanelProps): JSX.Element => {
   const [state, setState] = useState<State>({ state: "ActionList" });
   return (
     <div className="h-full overflow-scroll bg-grey-primary p-4 pt-2">
-      <div className="flex flex-row flex-wrap items-center justify-between text-base font-bold text-blue-primary">
+      <div className="flex flex-row py-4 font-bold text-blue-primary lg:text-lg">
         {"Actions"}
-        <select
-          value={level}
-          onChange={(e) =>
-            onChangeLevel(
-              // This type assertion is safe, since all `option`s in this `select` come from `Object.values(Level)`.
-              e.target.value as Level
-            )
-          }
-        >
-          {Object.values(Level).map((level) => (
-            <option key={level} value={level}>
-              {level}
-            </option>
-          ))}
-        </select>
       </div>
       {(() => {
         switch (state.state) {

src/components/FloatingToolbar/FloatingToolbar.stories.tsx

@@ -14,6 +14,10 @@ export default {
       description: 'The event handler for the "Mode" button.',
       action: "mode",
     },
+    onLevelChange: {
+      description: 'The event handler for the "Level" button.',
+      action: "level",
+    },
     redoAvailable: {
       description: "Whether redo is available.",
       control: "boolean",
@@ -49,4 +53,5 @@ export const Default = Template.bind({});
 Default.args = {
   initialMode: "tree",
   initialPosition: { x: 100, y: 50 },
+  level: "Beginner",
 };

src/components/FloatingToolbar/index.tsx

@@ -4,18 +4,24 @@ import {
   ArrowUturnLeftIcon,
   ChevronDownIcon,
   EllipsisHorizontalIcon,
+  BeakerIcon,
+  AcademicCapIcon,
+  RocketLaunchIcon,
 } from "@heroicons/react/24/outline";
 import classNames from "classnames";
 import { MouseEventHandler, useRef, useState } from "react";
 import { useDraggable, DragOptions } from "@neodrag/react";
+import { Level } from "@/primer-api";
 
 export type FloatingToolbarProps = {
   initialPosition: { x: number; y: number };
   initialMode: Mode;
+  level: Level;
   onModeChange: (
     mode: Mode,
     event: React.MouseEvent<HTMLButtonElement>
   ) => void;
+  onLevelChange: () => void;
   redoAvailable: boolean;
   onClickRedo: MouseEventHandler<HTMLButtonElement>;
   undoAvailable: boolean;
@@ -41,6 +47,28 @@ const nextMode = (m: Mode): Mode => {
   }
 };
 
+const levelSvg = (level: Level) => {
+  switch (level) {
+    case "Beginner":
+      return <BeakerIcon />;
+    case "Intermediate":
+      return <AcademicCapIcon />;
+    case "Expert":
+      return <RocketLaunchIcon />;
+  }
+};
+
+const levelButtonTitle = (level: Level) => {
+  switch (level) {
+    case "Beginner":
+      return "Beginner";
+    case "Intermediate":
+      return "Intermediate";
+    case "Expert":
+      return "Expert";
+  }
+};
+
 // https://github.com/francoismassart/eslint-plugin-tailwindcss/issues/130
 // eslint-disable-next-line tailwindcss/no-custom-classname
 const arrow = <ArrowUturnLeftIcon className="w-6 stroke-[3]" />;
@@ -110,6 +138,15 @@ export const FloatingToolbar = (p: FloatingToolbarProps): JSX.Element => {
         {arrow}
         undo
       </button>
+      <button
+        title={levelButtonTitle(p.level)}
+        type="button"
+        onClick={p.onLevelChange}
+        className="flex h-12 w-12 flex-col items-center rounded text-blue-primary hover:bg-blue-primary hover:text-white-primary disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        {levelSvg(p.level)}
+        level
+      </button>
       <button type="button" onClick={p.onClickChevron}>
         <ChevronDownIcon className="w-6" />
       </button>

src/primer-api/index.ts

@@ -1,2 +1,3 @@
 export * from './primer-api';
 export * from './model';
+