General UI changes

client/src/components/app-bar/FeaturePicker.tsx

@@ -1,20 +1,23 @@
-import { ButtonProps, Typography as Type } from "@mui/material";
+import { Box, ButtonProps, Typography as Type, useTheme } from "@mui/material";
 import { Select } from "components/generic/Select";
-import { Space } from "components/generic/Space";
 import { find, map, startCase } from "lodash";
 import { FeatureDescriptor } from "protocol/FeatureQuery";
-import { ReactNode } from "react";
+import { ReactElement, ReactNode, cloneElement } from "react";
+import { AccentColor, getShade } from "theme";
 import { FeaturePickerButton } from "./FeaturePickerButton";
+import { Flex } from "components/generic/Flex";
+import { Space } from "components/generic/Space";
 
 export type Props = {
   label?: string;
   value?: string;
   onChange?: (key: string) => void;
-  items?: FeatureDescriptor[];
+  items?: (FeatureDescriptor & { icon?: ReactNode; color?: AccentColor })[];
   icon?: ReactNode;
   showArrow?: boolean;
   disabled?: boolean;
   ButtonProps?: ButtonProps;
+  itemOrientation?: "vertical" | "horizontal";
 };
 
 export function FeaturePicker({
@@ -26,7 +29,18 @@ export function FeaturePicker({
   showArrow,
   disabled,
   ButtonProps,
+  itemOrientation = "horizontal",
 }: Props) {
+  const { palette } = useTheme();
+
+  const getIcon = (icon: ReactNode, color?: AccentColor) =>
+    icon &&
+    cloneElement(icon as ReactElement, {
+      sx: {
+        color: color ? getShade(color, palette.mode) : "primary.main",
+      },
+    });
+
   const selected = find(items, { id: value });
   return (
     <Select
@@ -36,23 +50,26 @@ export function FeaturePicker({
           {...props}
           {...ButtonProps}
           disabled={!items?.length || disabled}
-          icon={icon}
+          icon={selected?.icon ? getIcon(selected.icon, selected.color) : icon}
           showArrow={showArrow}
         >
           {selected?.name ?? label}
         </FeaturePickerButton>
       )}
-      items={map(items, ({ id, name, description, hidden }) => ({
+      items={map(items, ({ id, name, description, hidden, icon, color }) => ({
         value: id,
         label: (
-          <>
-            <Type>{name}</Type>
-            <Space />
+          <Flex vertical={itemOrientation === "vertical"}>
+            <Type>
+              {name}
+              <Space />
+            </Type>
             <Type variant="body2" color="text.secondary">
               {description}
             </Type>
-          </>
+          </Flex>
         ),
+        icon: getIcon(icon, color),
         disabled: hidden,
       }))}
       value={selected?.id}

client/src/components/generic/Select.tsx

@@ -1,24 +1,26 @@
-import { findIndex, map, max } from "lodash";
-import State, { bindMenu, bindTrigger } from "material-ui-popup-state";
-import { ReactElement, ReactNode } from "react";
-import { useSmallDisplay } from "hooks/useSmallDisplay";
 import {
+  ListItemIcon,
   Menu,
   MenuItem,
   TextField,
   TextFieldProps,
   Tooltip,
 } from "@mui/material";
-
-
-
-
+import { useSmallDisplay } from "hooks/useSmallDisplay";
+import { findIndex, map, max } from "lodash";
+import State, { bindMenu, bindTrigger } from "material-ui-popup-state";
+import { ReactElement, ReactNode } from "react";
 
 type Key = string | number;
 
 export type SelectProps<T extends Key> = {
   trigger?: (props: ReturnType<typeof bindTrigger>) => ReactElement;
-  items?: { value: T; label?: ReactNode; disabled?: boolean }[];
+  items?: {
+    value: T;
+    label?: ReactNode;
+    disabled?: boolean;
+    icon?: ReactNode;
+  }[];
   value?: T;
   onChange?: (value: T) => void;
   placeholder?: string;
@@ -54,7 +56,7 @@ export function Select<T extends string>({
               horizontal: "center",
             }}
           >
-            {map(items, ({ value: v, label, disabled }) => (
+            {map(items, ({ value: v, label, disabled, icon }) => (
               <MenuItem
                 disabled={disabled}
                 key={v}
@@ -65,6 +67,11 @@ export function Select<T extends string>({
                   onChange?.(v);
                 }}
               >
+                {icon && (
+                  <ListItemIcon sx={{ transform: "scale(0.8)" }}>
+                    {icon}
+                  </ListItemIcon>
+                )}
                 {label}
               </MenuItem>
             ))}
@@ -100,4 +107,4 @@ export function SelectField<T extends string>(props: SelectFieldProps<T>) {
       ))}
     </TextField>
   );
-}
+}

client/src/components/inspector/EventInspector.tsx

@@ -31,7 +31,7 @@ function Dot({ label }: { label?: ReactNode }) {
   return (
     <Tooltip title={label}>
       <FiberManualRecord
-        sx={{ color: "error.main", transform: "scale(0.5)", pl: 0.5 }}
+        sx={{ color: "error.main", transform: "scale(0.5)", pl: 0.5, mr: 2 }}
         fontSize="small"
       />
     </Tooltip>

client/src/pages/DebugPage.tsx

@@ -1,6 +1,6 @@
 import { LayersOutlined as LayersIcon } from "@mui/icons-material";
 import { TabContext, TabList, TabPanel } from "@mui/lab";
-import { Box, Tab, Typography as Type } from "@mui/material";
+import { Box, Divider, Tab, Typography as Type } from "@mui/material";
 import { FeaturePicker } from "components/app-bar/FeaturePicker";
 import { useViewTreeContext } from "components/inspector/ViewTree";
 import { ScriptEditor } from "components/script-editor/ScriptEditor";
@@ -15,6 +15,14 @@ import { ReactNode, useState } from "react";
 import { useLayer } from "slices/layers";
 import { BreakpointListEditor } from "../components/breakpoint-editor/BreakpointListEditor";
 
+const divider = (
+  <Divider
+    orientation="vertical"
+    flexItem
+    sx={{ m: 1, height: (t) => t.spacing(3), alignSelf: "auto" }}
+  />
+);
+
 export function DebugPage() {
   const { controls, onChange, state } = useViewTreeContext();
   const [tab, setTab] = useState("standard");
@@ -42,6 +50,7 @@ export function DebugPage() {
             onChange={setKey}
             showArrow
           />
+          {divider}
           <TabList onChange={(_, v) => setTab(v)}>
             <Tab label="Standard" value="standard" />
             <Tab label="Advanced" value="advanced" />

client/src/pages/Page.tsx

@@ -89,9 +89,9 @@ export const Page = withSlots<Slots, PageProps>(
                       type,
                     })
                   }
-                  icon={pages[stack!.type!]?.icon}
                   value={stack?.type}
                   items={values(pages)}
+                  itemOrientation="vertical"
                 />
                 {slotProps.Options?.children && (
                   <>

client/src/pages/index.tsx

@@ -1,86 +1,107 @@
 import {
-  AccountTreeOutlined,
-  BugReportOutlined,
-  InfoOutlined,
-  LayersOutlined,
-  ListOutlined,
-  SettingsOutlined,
-  SortOutlined as StepsIcon,
-  ViewInArOutlined,
-  WorkspacesOutlined,
+  AccountTreeOutlined as TreeIcon,
+  BugReportOutlined as DebuggerIcon,
+  InfoOutlined as AboutIcon,
+  LayersOutlined as LayersIcon,
+  ListOutlined as LogsIcon,
+  SettingsOutlined as SettingsIcon,
+  SegmentOutlined as StepsIcon,
+  ViewInArOutlined as ViewportIcon,
+  WorkspacesOutlined as WorkspacesIcon,
 } from "@mui/icons-material";
 import { Dictionary } from "lodash";
 import { ReactNode } from "react";
+import { AccentColor } from "theme";
 import { AboutPage } from "./AboutPage";
 import { DebugPage } from "./DebugPage";
 import { InfoPage } from "./InfoPage";
 import { LayersPage } from "./LayersPage";
+import { RecipesPage } from "./RecipesPage";
 import { SettingsPage } from "./SettingsPage";
 import { StepsPage } from "./StepsPage";
 import { TreePage } from "./TreePage";
 import { ViewportPage } from "./ViewportPage";
-import { RecipesPage } from "./RecipesPage";
 
 export type PageMeta = {
   id: string;
   name: string;
   icon: ReactNode;
+  color?: AccentColor;
+  description?: string;
   content: () => ReactNode;
 };
 
 export const pages: Dictionary<PageMeta> = {
   recipes: {
     id: "recipes",
     name: "Recipes",
-    icon: <WorkspacesOutlined />,
+    description: "Browse a library of included examples",
+    color: "pink",
+    icon: <WorkspacesIcon />,
     content: RecipesPage,
   },
+  layers: {
+    id: "layers",
+    name: "Layers",
+    description: "",
+    color: "deepPurple",
+    icon: <LayersIcon />,
+    content: LayersPage,
+  },
+  steps: {
+    id: "steps",
+    name: "Steps",
+    description: "",
+    color: "deepPurple",
+    icon: <StepsIcon />,
+    content: StepsPage,
+  },
   viewport: {
     id: "viewport",
     name: "Viewport",
-    icon: <ViewInArOutlined />,
+    description: "",
+    color: "indigo",
+    icon: <ViewportIcon />,
     content: ViewportPage,
   },
   tree: {
     id: "tree",
     name: "Tree",
-    icon: <AccountTreeOutlined />,
+    description: "",
+    color: "indigo",
+    icon: <TreeIcon />,
     content: TreePage,
   },
-  steps: {
-    id: "steps",
-    name: "Steps",
-    icon: <StepsIcon />,
-    content: StepsPage,
+  debug: {
+    id: "debug",
+    name: "Debugger",
+    description: "",
+    color: "lightBlue",
+    icon: <DebuggerIcon />,
+    content: DebugPage,
   },
   info: {
     id: "info",
     name: "Logs",
-    icon: <ListOutlined />,
+    description: "",
+    color: "blueGrey",
+    icon: <LogsIcon />,
     content: InfoPage,
   },
-  layers: {
-    id: "layers",
-    name: "Layers",
-    icon: <LayersOutlined />,
-    content: LayersPage,
-  },
-  debug: {
-    id: "debug",
-    name: "Debugger",
-    icon: <BugReportOutlined />,
-    content: DebugPage,
-  },
   settings: {
     id: "settings",
     name: "Settings",
-    icon: <SettingsOutlined />,
+    description: "",
+    color: "blueGrey",
+    icon: <SettingsIcon />,
     content: SettingsPage,
   },
   about: {
     id: "about",
     name: "About",
-    icon: <InfoOutlined />,
+    description: "",
+    color: "blueGrey",
+    icon: <AboutIcon />,
     content: AboutPage,
   },
 };

client/src/slices/view.ts

@@ -40,10 +40,24 @@ export const [useView, ViewProvider] = createSlice<
         orientation: "horizontal",
         children: [
           {
-            type: "leaf",
-            size: 25,
+            type: "branch",
             key: id(),
-            content: { type: "layers" },
+            orientation: "vertical",
+            size: 25,
+            children: [
+              {
+                type: "leaf",
+                size: 40,
+                key: id(),
+                content: { type: "recipes" },
+              },
+              {
+                type: "leaf",
+                size: 60,
+                key: id(),
+                content: { type: "layers" },
+              },
+            ],
           },
           {
             size: 75,