From a6233d2fc4366c88fd5d9d9978268236b58dae33 Mon Sep 17 00:00:00 2001
From: Kevin Zheng <kaiwen530@gmail.com>
Date: Mon, 26 Feb 2024 02:13:46 +1100
Subject: [PATCH] Major improvements to layer workflow

---
 .../src/components/app-bar/FeaturePicker.tsx  |  12 +-
 .../app-bar/FeaturePickerButton.tsx           |   6 +-
 .../components/app-bar/FeaturePickerMulti.tsx |   2 +-
 client/src/components/app-bar/Input.tsx       |   8 +-
 client/src/components/generic/ListEditor.tsx  | 237 +++++++-------
 client/src/components/generic/Overline.tsx    |   1 -
 client/src/components/generic/Scrollbars.tsx  |   5 +
 client/src/components/generic/Select.tsx      |   3 +
 .../components/inspector/TraceRenderer.tsx    |   2 +-
 .../src/components/inspector/ViewControls.tsx |   6 +-
 client/src/components/inspector/ViewTree.tsx  |   8 +-
 .../components/layer-editor/LayerEditor.tsx   | 291 ++++++++++--------
 .../layer-editor/LayerListEditor.tsx          |  26 +-
 .../settings-editor/RendererEditor.tsx        |  19 +-
 .../settings-editor/RendererListEditor.tsx    |  15 +-
 .../settings-editor/ServerEditor.tsx          |  21 +-
 .../settings-editor/ServerListEditor.tsx      |   6 +-
 client/src/layers/layerHandlers.tsx           |   2 +-
 client/src/layers/map/index.tsx               |   3 -
 client/src/layers/query/index.tsx             |  16 +-
 client/src/layers/trace/index.tsx             |   8 +-
 client/src/pages/AboutPage.tsx                |   1 -
 client/src/pages/DebugPage.tsx                |   2 +-
 client/src/pages/LayersPage.tsx               |  12 +-
 client/src/pages/SettingsPage.tsx             |   2 +-
 client/src/pages/StepsPage.tsx                | 146 ++++++---
 client/src/pages/TreePage.tsx                 |   6 +-
 client/src/pages/ViewportPage.tsx             |   2 +-
 client/src/public/manifest.json               |   4 +-
 client/src/theme.tsx                          |   5 +-
 30 files changed, 528 insertions(+), 349 deletions(-)

diff --git a/client/src/components/app-bar/FeaturePicker.tsx b/client/src/components/app-bar/FeaturePicker.tsx
index 13b9236f..6a175fa8 100644
--- a/client/src/components/app-bar/FeaturePicker.tsx
+++ b/client/src/components/app-bar/FeaturePicker.tsx
@@ -5,7 +5,7 @@ import { Space } from "components/generic/Space";
 import { find, map, startCase, truncate } from "lodash";
 import { FeatureDescriptor } from "protocol/FeatureQuery";
 import { ReactElement, ReactNode, cloneElement } from "react";
-import { AccentColor, getShade } from "theme";
+import { AccentColor, getShade, usePaper } from "theme";
 import { FeaturePickerButton } from "./FeaturePickerButton";
 
 export type Props = {
@@ -15,11 +15,12 @@ export type Props = {
   onChange?: (key: string) => void;
   items?: (FeatureDescriptor & { icon?: ReactNode; color?: AccentColor })[];
   icon?: ReactNode;
-  showArrow?: boolean;
+  arrow?: boolean;
   disabled?: boolean;
   ButtonProps?: ButtonProps;
   itemOrientation?: "vertical" | "horizontal";
   ellipsis?: number;
+  paper?: boolean;
 };
 
 export function FeaturePicker({
@@ -28,13 +29,15 @@ export function FeaturePicker({
   onChange,
   items,
   icon,
-  showArrow,
+  arrow,
   disabled,
   ButtonProps,
   showTooltip,
   itemOrientation = "horizontal",
   ellipsis = Infinity,
+  paper: _paper,
 }: Props) {
+  const paper = usePaper();
   const { palette } = useTheme();
 
   const getIcon = (icon: ReactNode, color?: AccentColor) =>
@@ -54,9 +57,10 @@ export function FeaturePicker({
         <FeaturePickerButton
           {...props}
           {...ButtonProps}
+          sx={_paper ? { ...paper(1), m: 0.5, px: 1.25, py: 0.5 } : {}}
           disabled={!items?.length || disabled}
           icon={selected?.icon ? getIcon(selected.icon, selected.color) : icon}
-          showArrow={showArrow}
+          arrow={arrow}
         >
           {truncate(selected?.name ?? label, { length: ellipsis })}
         </FeaturePickerButton>
diff --git a/client/src/components/app-bar/FeaturePickerButton.tsx b/client/src/components/app-bar/FeaturePickerButton.tsx
index 8eecd98e..2adb8eef 100644
--- a/client/src/components/app-bar/FeaturePickerButton.tsx
+++ b/client/src/components/app-bar/FeaturePickerButton.tsx
@@ -5,9 +5,9 @@ import { Props } from "./FeaturePicker";
 export function FeaturePickerButton({
   children,
   icon,
-  showArrow,
+  arrow,
   ...props
-}: ButtonProps & Pick<Props, "icon" | "showArrow">) {
+}: ButtonProps & Pick<Props, "icon" | "arrow">) {
   return (
     <Button
       {...props}
@@ -17,7 +17,7 @@ export function FeaturePickerButton({
       }}
       startIcon={icon}
       endIcon={
-        showArrow && (
+        arrow && (
           <KeyboardArrowDownOutlined
             sx={{
               ml: -0.5,
diff --git a/client/src/components/app-bar/FeaturePickerMulti.tsx b/client/src/components/app-bar/FeaturePickerMulti.tsx
index be9adb1c..8f547c84 100644
--- a/client/src/components/app-bar/FeaturePickerMulti.tsx
+++ b/client/src/components/app-bar/FeaturePickerMulti.tsx
@@ -44,7 +44,7 @@ export function FeaturePickerMulti({
           {...props}
           disabled={!items?.length}
           icon={icon}
-          showArrow={showArrow}
+          arrow={showArrow}
         >
           {truncate(buttonLabel, { length: ellipsis })}
         </FeaturePickerButton>
diff --git a/client/src/components/app-bar/Input.tsx b/client/src/components/app-bar/Input.tsx
index b31695cc..7dfc29a9 100644
--- a/client/src/components/app-bar/Input.tsx
+++ b/client/src/components/app-bar/Input.tsx
@@ -24,7 +24,9 @@ export function MapPicker({ onChange, value }: EditorProps<Map>) {
   return (
     <FeaturePicker
       showTooltip
-      showArrow
+      arrow
+      paper
+      ellipsis={30}
       icon={<FileOpenOutlined />}
       label="Choose Map"
       value={value?.id}
@@ -80,7 +82,9 @@ export function TracePicker({
   return (
     <FeaturePicker
       showTooltip
-      showArrow
+      paper
+      arrow
+      ellipsis={30}
       icon={<FileOpenOutlined />}
       label="Choose Trace"
       value={value?.id}
diff --git a/client/src/components/generic/ListEditor.tsx b/client/src/components/generic/ListEditor.tsx
index 6c21e0f7..e7f4da53 100644
--- a/client/src/components/generic/ListEditor.tsx
+++ b/client/src/components/generic/ListEditor.tsx
@@ -8,18 +8,21 @@ import {
 import {
   Box,
   Button,
-  Card,
+  ButtonBase,
   Collapse,
   IconButton,
   InputBase,
   List,
   ListSubheader,
+  Stack,
   Switch,
+  SxProps,
+  Theme,
   Typography,
   alpha,
   useTheme,
 } from "@mui/material";
-import { filter, map, sortBy, uniqBy } from "lodash";
+import { defer, filter, map, sortBy, uniqBy } from "lodash";
 import { nanoid as id } from "nanoid";
 import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
 
@@ -34,6 +37,8 @@ import {
   useRef,
   useState,
 } from "react";
+import { useAcrylic, usePaper } from "theme";
+import { Flex } from "./Flex";
 
 export const DefaultListEditorInput = forwardRef(function StyledInputBase(
   props: ComponentProps<typeof InputBase>,
@@ -52,7 +57,7 @@ export const DefaultListEditorInput = forwardRef(function StyledInputBase(
 type Key = string | number;
 
 type Item<T = any> = {
-  element?: ReactElement;
+  editor?: ReactElement;
   enabled?: boolean;
   value?: T;
   id: Key;
@@ -82,6 +87,13 @@ type Props<T = any> = {
   placeholder?: ReactNode;
   cardStyle?: CSSProperties;
   autoFocus?: boolean;
+  renderEditor?: (parts: {
+    value: T;
+    onValueChange: (v: T) => void;
+    handle: ReactNode;
+    content: ReactNode;
+    extras: ReactNode;
+  }) => ReactNode;
 };
 
 type ListEditorFieldProps = {
@@ -96,6 +108,18 @@ function useInitialRender() {
   return !current;
 }
 
+const defaultEditorRenderer: Props["renderEditor"] = ({
+  handle,
+  content,
+  extras,
+}) => (
+  <>
+    {handle}
+    {content}
+    {extras}
+  </>
+);
+
 export function ListEditorField({
   icon = <LabelIcon />,
   toggleable: useSwitch,
@@ -105,111 +129,106 @@ export function ListEditorField({
   onDeleteItem = () => {},
   extras: getExtras,
   enabled = false,
-  element = <DefaultListEditorInput />,
+  editor = <DefaultListEditorInput />,
   value,
   id,
   i = 0,
-  variant = "default",
-  UNSAFE_extrasPlacement: extrasPlacement = "center",
   autoFocus,
-  cardStyle: style,
   sortable,
+  renderEditor = defaultEditorRenderer,
 }: Props & ListEditorFieldProps & Item) {
+  const acrylic = useAcrylic();
+  const paper = usePaper();
   const [field, setField] = useState<HTMLElement | null>(null);
-  const theme = useTheme();
-  const content = (handleProps?: ComponentProps<"div"> | null) => (
-    <Box display="flex" alignItems={extrasPlacement}>
-      {sortable && (
-        <div {...handleProps}>
-          <Box color="text.secondary" sx={{ pr: 2 }}>
-            <DragHandleOutlined />
-          </Box>
-        </div>
-      )}
-      {icon !== null &&
-        cloneElement(icon, {
-          style: {
-            marginRight: theme.spacing(1),
-            marginTop: theme.spacing(0.5),
-            marginBottom: theme.spacing(0.5),
-          },
-          color: "action",
-        })}
-      <Box
-        flexGrow={1}
-        sx={{
-          ml: icon === null ? 2 : 0,
-        }}
-      >
-        {cloneElement(element, {
-          onDelete: () => onDeleteItem(id ?? i),
-          autoFocus,
-          value,
-          key: id ?? i,
-          onValueChange: (e: any) => onChangeItem(id ?? i, e, enabled),
-          onChange: (e: any) => onChangeItem(id ?? i, e.target.value, enabled),
-          ref: (e: HTMLElement | null) => setField(e),
-        })}
-      </Box>
-      <Box display="flex" alignItems="center">
-        {useSwitch && (
-          <Switch
-            color="primary"
-            edge="end"
-            onChange={(_, v) => onChangeItem(id ?? i, value, v)}
-            checked={enabled}
-          />
-        )}
-        {useEditButton && (
-          <IconButton
-            edge="end"
-            onClick={() => {
-              if (field?.focus) {
-                field.focus();
-              }
-            }}
-          >
-            <EditIcon />
-          </IconButton>
-        )}
-        {useDelete && (
-          <IconButton onClick={() => onDeleteItem(id ?? i)}>
-            <DeleteIcon />
-          </IconButton>
-        )}
-        {getExtras && getExtras(value)}
-      </Box>
-    </Box>
-  );
   return (
     <Draggable index={i} draggableId={`${id}`}>
-      {(provided) => (
+      {(provided, snapshot) => (
         <div ref={provided.innerRef} {...provided.draggableProps}>
-          <Box
+          <Stack
+            direction="row"
+            alignItems="center"
             sx={{
-              pb: 1,
-              ml: 2,
+              transition: (t) => t.transitions.create("background"),
+              "&:hover": {
+                background: (t) => t.palette.action.hover,
+              },
+              ...(snapshot.isDragging
+                ? ({
+                    ...paper(1),
+                    ...acrylic,
+                  } as SxProps<Theme>)
+                : undefined),
             }}
           >
-            {variant === "outlined" ? (
-              <Card
-                variant="outlined"
-                style={{
-                  borderColor: "transparent",
-                  paddingRight: theme.spacing(2),
-                  transition: theme.transitions.create([
-                    "box-shadow",
-                    "border-color",
-                  ]),
-                  ...style,
-                }}
-              >
-                {content(provided.dragHandleProps)}
-              </Card>
-            ) : (
-              content(provided.dragHandleProps)
-            )}
-          </Box>
+            {renderEditor?.({
+              value,
+              onValueChange: (e: any) => onChangeItem(id ?? i, e, enabled),
+              handle: sortable && (
+                <Flex
+                  {...provided.dragHandleProps}
+                  color="text.secondary"
+                  sx={{
+                    flex: 0,
+                    p: 2,
+                  }}
+                >
+                  <DragHandleOutlined />
+                </Flex>
+              ),
+              content: (
+                <ButtonBase
+                  sx={{
+                    flex: 1,
+                    display: "block",
+                    textAlign: "left",
+                    px: 2,
+                  }}
+                >
+                  {cloneElement(editor, {
+                    onDelete: () => onDeleteItem(id ?? i),
+                    autoFocus,
+                    value,
+                    key: id ?? i,
+                    onValueChange: (e: any) =>
+                      onChangeItem(id ?? i, e, enabled),
+                    onChange: (e: any) =>
+                      onChangeItem(id ?? i, e.target.value, enabled),
+                    ref: (e: HTMLElement | null) => setField(e),
+                  })}
+                </ButtonBase>
+              ),
+              extras: (
+                <Flex sx={{ flex: 0, px: 1 }}>
+                  {useSwitch && (
+                    <Switch
+                      color="primary"
+                      edge="end"
+                      onChange={(_, v) => onChangeItem(id ?? i, value, v)}
+                      checked={enabled}
+                    />
+                  )}
+                  {useEditButton && (
+                    <IconButton
+                      edge="end"
+                      onClick={() => {
+                        if (field?.focus) {
+                          field.focus();
+                        }
+                      }}
+                    >
+                      <EditIcon />
+                    </IconButton>
+                  )}
+                  {useDelete && (
+                    <IconButton onClick={() => onDeleteItem(id ?? i)}>
+                      <DeleteIcon />
+                    </IconButton>
+                  )}
+                  {getExtras && getExtras(value)}
+                </Flex>
+              ),
+            })}
+          </Stack>
         </div>
       )}
     </Draggable>
@@ -240,6 +259,7 @@ export default function Editor<T>(props: Props<T>) {
     onChange,
     addItemExtras: extras,
   } = props;
+  const paper = usePaper();
   const isInitialRender = useInitialRender();
   const theme = useTheme();
   const [intermediateItems, setIntermediateItems] = useState(items);
@@ -260,7 +280,7 @@ export default function Editor<T>(props: Props<T>) {
   }[] = uniqBy([...intermediateItems, ...items], (c) => c.id)
     .map((c) => items.find((c2) => c.id === c2.id) ?? c)
     .map((x, i) => {
-      const { enabled, element, value, id } = x ?? {};
+      const { enabled, editor, value, id } = x ?? {};
       return {
         value,
         render: (p?: ComponentProps<typeof ListEditorField>) => (
@@ -277,7 +297,7 @@ export default function Editor<T>(props: Props<T>) {
                 setNewIndex(-1);
               }}
               enabled={enabled}
-              element={element}
+              editor={editor}
               value={value}
               id={id}
               i={i}
@@ -387,22 +407,17 @@ export default function Editor<T>(props: Props<T>) {
             </Typography>
           </Box>
         </Collapse>
-        <Box p={2} pt={1} mb={-3}>
+        <Box p={2} pt={2}>
           <Button
             disableElevation
             variant="outlined"
             startIcon={<Add />}
-            color="primary"
             onClick={() => {
               onAddItem();
               setNewIndex(items.length);
             }}
             sx={{
-              borderColor: (t) =>
-                alpha(
-                  t.palette.text.primary,
-                  t.palette.action.activatedOpacity
-                ),
+              ...paper(1),
             }}
           >
             <Box sx={{ color: "text.primary" }}>{addItemLabel}</Box>
@@ -427,6 +442,7 @@ export function ListEditor<T extends { key: string }>({
   value,
   editor,
   create,
+  onFocus,
   ...props
 }: Omit<Props<T>, "items" | "onChange"> & {
   items?: T[];
@@ -434,6 +450,7 @@ export function ListEditor<T extends { key: string }>({
   value?: T[];
   editor?: (item: T) => ReactElement;
   create?: () => Omit<T, "key">;
+  onFocus?: (key: string) => void;
 }) {
   const [state, setState] = useState(value ?? []);
   function handleChange(next: T[]) {
@@ -444,19 +461,21 @@ export function ListEditor<T extends { key: string }>({
     setState(value ?? []);
   }, [value]);
   return (
-    <Box sx={{ ml: -2 }}>
+    <Box>
       <Editor
         {...props}
         items={state.map((c) => ({
           id: c.key,
           value: c,
-          element: editor?.(c),
+          editor: editor?.(c),
         }))}
         deletable
         editable={false}
-        onAddItem={() =>
-          handleChange?.([...state, { key: id(), ...create?.() } as T])
-        }
+        onAddItem={() => {
+          const _id = id();
+          handleChange?.([...state, { key: _id, ...create?.() } as T]);
+          defer(() => onFocus?.(_id));
+        }}
         onDeleteItem={(k) => {
           return handleChange?.(filter(state, (b) => b.key !== k));
         }}
diff --git a/client/src/components/generic/Overline.tsx b/client/src/components/generic/Overline.tsx
index e11a9c8c..9cac2db4 100644
--- a/client/src/components/generic/Overline.tsx
+++ b/client/src/components/generic/Overline.tsx
@@ -8,7 +8,6 @@ export function OverlineDot(props: ComponentProps<typeof Dot>) {
       {...props}
       sx={{
         fontSize: 12,
-        transform: "translateY(1.75px) translateX(-2px)",
         ...props.sx,
       }}
     />
diff --git a/client/src/components/generic/Scrollbars.tsx b/client/src/components/generic/Scrollbars.tsx
index 1e68d878..3fc84927 100644
--- a/client/src/components/generic/Scrollbars.tsx
+++ b/client/src/components/generic/Scrollbars.tsx
@@ -65,6 +65,11 @@ export const Scroll = forwardRef(
           },
         }}
         {...rest}
+        style={{
+          width: "100%",
+          height: "100%",
+          ...rest.style,
+        }}
         className={`${cls} ${rest.className}`}
         events={{ initialized: handleRef }}
       >
diff --git a/client/src/components/generic/Select.tsx b/client/src/components/generic/Select.tsx
index 9706f689..ddcefe22 100644
--- a/client/src/components/generic/Select.tsx
+++ b/client/src/components/generic/Select.tsx
@@ -2,14 +2,17 @@ import {
   ListItemIcon,
   Menu,
   MenuItem,
+  SxProps,
   TextField,
   TextFieldProps,
+  Theme,
   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";
+import { useAcrylic, usePaper } from "theme";
 
 type Key = string | number;
 
diff --git a/client/src/components/inspector/TraceRenderer.tsx b/client/src/components/inspector/TraceRenderer.tsx
index f8c7fb3e..5fe3eb8b 100644
--- a/client/src/components/inspector/TraceRenderer.tsx
+++ b/client/src/components/inspector/TraceRenderer.tsx
@@ -28,7 +28,7 @@ import { SelectionMenu } from "./SelectionMenu";
 const TILE_RESOLUTION = 128;
 
 const tileSize = (playing: boolean = false) =>
-  (playing ? 1 : devicePixelRatio) * TILE_RESOLUTION;
+  (playing ? 0.75 : devicePixelRatio) * TILE_RESOLUTION;
 
 const rendererOptions = {
   tileSubdivision: 2,
diff --git a/client/src/components/inspector/ViewControls.tsx b/client/src/components/inspector/ViewControls.tsx
index 3820b54a..0f10494c 100644
--- a/client/src/components/inspector/ViewControls.tsx
+++ b/client/src/components/inspector/ViewControls.tsx
@@ -5,6 +5,7 @@ import {
   OpenInNewOutlined as PopOutIcon,
 } from "@mui/icons-material";
 import {
+  Box,
   Divider,
   IconButton,
   ListItemIcon,
@@ -49,6 +50,7 @@ export function ViewControls({
             </Tooltip>
           </MuiStack>
           <Menu
+            TransitionProps={{ mountOnEnter: true, unmountOnExit: true }}
             {...bindMenu(state)}
             transformOrigin={{ horizontal: "right", vertical: "top" }}
             anchorOrigin={{ horizontal: "right", vertical: "top" }}
@@ -82,7 +84,7 @@ export function ViewControls({
             </MenuItem>
             <Divider />
             {!(popOutDisabled || closeDisabled) && (
-              <>
+              <Box>
                 <MenuItem
                   onClick={() => {
                     onPopOut?.();
@@ -96,7 +98,7 @@ export function ViewControls({
                   <ListItemText>Pop Out</ListItemText>
                 </MenuItem>
                 <Divider />
-              </>
+              </Box>
             )}
             <MenuItem
               onClick={() => {
diff --git a/client/src/components/inspector/ViewTree.tsx b/client/src/components/inspector/ViewTree.tsx
index 3bd5616e..70a8537e 100644
--- a/client/src/components/inspector/ViewTree.tsx
+++ b/client/src/components/inspector/ViewTree.tsx
@@ -199,7 +199,7 @@ export function ViewBranch<T>(props: ViewBranchProps<T>) {
   const dragCls = useCss({
     "div&": {
       background: palette.text.secondary,
-      opacity: 0,
+      opacity: 0.5,
       transition: transitions.create("opacity"),
       "&.Horizontal": { width: "3px" },
       "&.Vertical": { height: "3px" },
@@ -208,10 +208,14 @@ export function ViewBranch<T>(props: ViewBranchProps<T>) {
 
   const gutterCls = useCss({
     "div&": {
+      transition: transitions.create(["box-shadow", "background"]),
       background:
         palette.mode === "dark" ? palette.background.default : palette.divider,
       boxShadow: `inset 0 0 0 1px ${palette.background.paper}`,
-      [`&:hover .${dragCls}`]: { opacity: 1 },
+      "&:hover": {
+        background: palette.primary.main,
+        boxShadow: "none",
+      },
       "&.Horizontal": {
         padding: 0,
         // marginLeft: "-1px",
diff --git a/client/src/components/layer-editor/LayerEditor.tsx b/client/src/components/layer-editor/LayerEditor.tsx
index 39fd0187..fa7ac0f2 100644
--- a/client/src/components/layer-editor/LayerEditor.tsx
+++ b/client/src/components/layer-editor/LayerEditor.tsx
@@ -1,23 +1,33 @@
-import { EditOutlined } from "@mui/icons-material";
+import { TabContext, TabList } from "@mui/lab";
 import {
   Box,
+  ButtonBase,
   Chip,
-  IconButton,
+  Divider,
+  Popover,
   Stack,
+  Tab,
+  Tabs,
   TextField,
   Tooltip,
   Typography as Type,
 } from "@mui/material";
 import { FeaturePicker } from "components/app-bar/FeaturePicker";
 import { Flex } from "components/generic/Flex";
-import {
-  ManagedModal as Dialog,
-  AppBarTitle as Title,
-} from "components/generic/Modal";
 import { Space } from "components/generic/Space";
 import { inferLayerName } from "layers/inferLayerName";
 import { getLayerHandler, layerHandlers } from "layers/layerHandlers";
-import { debounce, keys, set, startCase, truncate } from "lodash";
+import {
+  debounce,
+  first,
+  keys,
+  merge,
+  omit,
+  set,
+  startCase,
+  truncate,
+} from "lodash";
+import PopupState, { bindPopover, bindTrigger } from "material-ui-popup-state";
 import { produce } from "produce";
 import {
   ForwardedRef,
@@ -29,7 +39,7 @@ import {
   useState,
 } from "react";
 import { Layer } from "slices/layers";
-import { usePaper } from "theme";
+import { useAcrylic, usePaper } from "theme";
 
 const compositeOperations = [
   "color",
@@ -68,10 +78,15 @@ type LayerEditorProps = {
 function useDraft<T>(
   initial: T,
   commit?: (value: T) => void,
-  ms: number = 600
+  ms: number = 300,
+  stayDraft: string[] = []
 ) {
   const [state, setState] = useState(initial);
-  useEffect(() => void setState(initial), [setState, initial]);
+  useEffect(() => {
+    if (initial) {
+      setState(merge(state, omit(initial, ...stayDraft)));
+    }
+  }, [setState, initial]);
   const handleChange = useMemo(
     () => debounce((v: T) => commit?.(v), ms),
     [commit, ms]
@@ -90,7 +105,11 @@ function Component(
   _ref: ForwardedRef<HTMLElement>
 ) {
   const paper = usePaper();
-  const [draft, setDraft] = useDraft(value, onChange);
+  const acrylic = useAcrylic();
+  const [draft, setDraft] = useDraft(value, onChange, 300, [
+    "name",
+    "source.type",
+  ]);
 
   const renderHeading = (label: ReactNode) => (
     <Type
@@ -125,123 +144,143 @@ function Component(
 
   return (
     <>
-      <Stack alignItems="center" direction="row" gap={2}>
-        <Box
-          sx={{
-            py: 1,
-            flex: 1,
-            width: 0,
-            ml: 0,
-            overflow: "hidden",
-            "> *": {
-              overflow: "hidden",
-              whiteSpace: "nowrap",
-              textOverflow: "ellipsis",
-            },
-          }}
-        >
-          <Type>{name}</Type>
-          <Type variant="body2" color="text.secondary">
-            {startCase(draft.source?.type)}
-          </Type>
-        </Box>
-
-        <Dialog
-          appBar={{ children: <Title>Edit Layer</Title> }}
-          trigger={(onClick) => (
-            <Stack alignItems="center" direction="row">
-              {!!error && (
-                <Tooltip title={error}>
-                  <Chip
-                    onClick={onClick}
-                    sx={{
-                      mr: 1,
-                      ...paper(1),
-                      color: (t) => t.palette.error.main,
-                      flex: 1,
-                    }}
-                    label={`${truncate(`${error}`, { length: 8 })}`}
-                    size="small"
+      <PopupState variant="popover">
+        {(state) => (
+          <>
+            <ButtonBase
+              className={draft.key}
+              {...bindTrigger(state)}
+              sx={{
+                flex: 1,
+                display: "block",
+                textAlign: "left",
+                px: 2,
+              }}
+            >
+              <Stack alignItems="center" direction="row" gap={2}>
+                <Box
+                  sx={{
+                    py: 1.5,
+                    flex: 1,
+                    width: 0,
+                    ml: 0,
+                    overflow: "hidden",
+                    "> *": {
+                      overflow: "hidden",
+                      whiteSpace: "nowrap",
+                      textOverflow: "ellipsis",
+                    },
+                  }}
+                >
+                  <Type>{name}</Type>
+                  <Type variant="body2" color="text.secondary">
+                    {startCase(value.source?.type)}
+                  </Type>
+                </Box>
+                {!!error && (
+                  <Tooltip title={error}>
+                    <Chip
+                      sx={{
+                        mr: -2,
+                        ...omit(paper(1), "borderRadius"),
+                        color: (t) => t.palette.error.main,
+                        flex: 0,
+                      }}
+                      label={`${truncate(`${error}`, { length: 8 })}`}
+                      size="small"
+                    />
+                  </Tooltip>
+                )}
+              </Stack>
+            </ButtonBase>
+            <Popover
+              {...bindPopover(state)}
+              slotProps={{
+                paper: { sx: acrylic },
+              }}
+              anchorOrigin={{ horizontal: -12, vertical: -12 }}
+            >
+              <Box p={2} width={360} sx={paper(1)}>
+                <Box pb={2}>
+                  <TextField
+                    autoComplete="off"
+                    autoFocus
+                    placeholder={inferLayerName(draft)}
+                    fullWidth
+                    variant="filled"
+                    label="Layer Name"
+                    defaultValue={draft.name ?? ""}
+                    onChange={(e) =>
+                      setDraft?.(
+                        produce(draft, (d) => set(d, "name", e.target.value))
+                      )
+                    }
                   />
-                </Tooltip>
-              )}
-              <IconButton size="small" onClick={onClick}>
-                <EditOutlined />
-              </IconButton>
-            </Stack>
-          )}
-        >
-          <Box p={2}>
-            <Box pb={2}>
-              <TextField
-                fullWidth
-                variant="filled"
-                label="Layer Name"
-                defaultValue={draft.name ?? ""}
-                onChange={(e) =>
-                  setDraft?.(
-                    produce(draft, (d) => set(d, "name", e.target.value))
-                  )
-                }
-              />
-            </Box>
+                </Box>
+                <Box sx={{ mx: -2, pb: 1 }}>
+                  <Tabs
+                    variant="fullWidth"
+                    onChange={(_, v) =>
+                      setDraft?.(
+                        produce(draft, (d) => {
+                          set(d, "source", { type: v });
+                        })
+                      )
+                    }
+                    value={
+                      draft.source?.type ?? first(keys(layerHandlers)) ?? ""
+                    }
+                  >
+                    {keys(layerHandlers).map((s) => (
+                      <Tab label={startCase(s)} value={s} key={s} />
+                    ))}
+                  </Tabs>
+                  <Divider sx={{ width: "100%" }} />
+                </Box>
 
-            {renderHeading("Layer Options")}
-            {renderOption(
-              "Transparency",
-              <FeaturePicker
-                label="Transparency"
-                items={["0", "25", "50", "75"].map((c) => ({
-                  id: c,
-                  name: `${c}%`,
-                }))}
-                value={draft.transparency ?? "0"}
-                showArrow
-                onChange={(e) =>
-                  setDraft?.(produce(draft, (d) => set(d, "transparency", e)))
-                }
-              />
-            )}
-            {renderOption(
-              "Display Mode",
-              <FeaturePicker
-                label="Display Mode"
-                value={draft.displayMode ?? "source-over"}
-                items={options(compositeOperations)}
-                showArrow
-                onChange={(e) =>
-                  setDraft?.(produce(draft, (d) => set(d, "displayMode", e)))
-                }
-              />
-            )}
-            {renderHeading("Source Options")}
-            {renderOption(
-              "Type",
-              <FeaturePicker
-                label="Type"
-                value={draft.source?.type}
-                items={keys(layerHandlers).map((s) => ({
-                  id: s,
-                  name: startCase(s),
-                }))}
-                onChange={(v) =>
-                  setDraft?.(
-                    produce(draft, (d) => {
-                      set(d, "source", { type: v });
-                    })
-                  )
-                }
-                showArrow
-              />
-            )}
-            {draft.source?.type &&
-              createElement(layerHandlers[draft.source.type].editor, {
-                onChange: (e) => setDraft(e(draft)),
-                value: draft,
-              })}
-          </Box>
-        </Dialog>
-      </Stack>
+                {renderHeading("Source Options")}
+                {draft.source?.type &&
+                  createElement(layerHandlers[draft.source.type].editor, {
+                    onChange: (e) => setDraft(e(draft)),
+                    value: draft,
+                  })}
+                {renderHeading("Layer Options")}
+                {renderOption(
+                  "Transparency",
+                  <FeaturePicker
+                    label="Transparency"
+                    items={["0", "25", "50", "75"].map((c) => ({
+                      id: c,
+                      name: `${c}%`,
+                    }))}
+                    value={draft.transparency ?? "0"}
+                    arrow
+                    onChange={(e) =>
+                      setDraft?.(
+                        produce(draft, (d) => set(d, "transparency", e))
+                      )
+                    }
+                  />
+                )}
+                {renderOption(
+                  "Display Mode",
+                  <FeaturePicker
+                    arrow
+                    label="Display Mode"
+                    value={draft.displayMode ?? "source-over"}
+                    items={options(compositeOperations)}
+                    onChange={(e) =>
+                      setDraft?.(
+                        produce(draft, (d) => set(d, "displayMode", e))
+                      )
+                    }
+                  />
+                )}
+              </Box>
+            </Popover>
+          </>
+        )}
+      </PopupState>
     </>
   );
 }
diff --git a/client/src/components/layer-editor/LayerListEditor.tsx b/client/src/components/layer-editor/LayerListEditor.tsx
index 730c5503..f04411bb 100644
--- a/client/src/components/layer-editor/LayerListEditor.tsx
+++ b/client/src/components/layer-editor/LayerListEditor.tsx
@@ -1,11 +1,11 @@
 import { MoreVertOutlined } from "@mui/icons-material";
 import { Box, IconButton, Menu, MenuItem, MenuList } from "@mui/material";
 import { ListEditor } from "components/generic/ListEditor";
-import { map, noop } from "lodash";
+import { head, map } from "lodash";
 import PopupState, { bindMenu, bindTrigger } from "material-ui-popup-state";
+import { nanoid as id } from "nanoid";
 import { Layer, useLayers } from "slices/layers";
 import { LayerEditor } from "./LayerEditor";
-import { nanoid as id } from "nanoid";
 
 export function LayerListEditor() {
   const [{ layers: layers = [] }, setLayers] = useLayers();
@@ -58,13 +58,31 @@ export function LayerListEditor() {
               )}
             </PopupState>
           )}
-          editor={(v) => <LayerEditor value={v} />}
+          renderEditor={({ extras, handle, value, onValueChange }) => (
+            <>
+              {handle}
+              <LayerEditor {...{ value, onValueChange }} />
+              {extras}
+            </>
+          )}
           create={() => ({
             source: { type: "trace", trace: {} },
           })}
-          onChange={(v) => setLayers(() => ({ layers: v }))}
+          onChange={(v) =>
+            requestIdleCallback(() => setLayers(() => ({ layers: v })))
+          }
           addItemLabel="Layer"
           placeholder={<Box pt={2}>Click the button below to add a layer.</Box>}
+          onFocus={(key) => {
+            const element = head(document.getElementsByClassName(key));
+            if (
+              element &&
+              "click" in element &&
+              typeof element.click === "function"
+            ) {
+              element.click();
+            }
+          }}
         />
       </Box>
     </Box>
diff --git a/client/src/components/settings-editor/RendererEditor.tsx b/client/src/components/settings-editor/RendererEditor.tsx
index b001ba3b..117cdda8 100644
--- a/client/src/components/settings-editor/RendererEditor.tsx
+++ b/client/src/components/settings-editor/RendererEditor.tsx
@@ -1,12 +1,13 @@
 import { EditOutlined as EditIcon } from "@mui/icons-material";
 import {
   Box,
+  Chip,
   Switch,
   TextField,
   Tooltip,
   Typography as Type,
 } from "@mui/material";
-import { entries, find, join, startCase } from "lodash";
+import { entries, find, join, omit, startCase } from "lodash";
 import { Flex } from "components/generic/Flex";
 import { IconButtonWithTooltip as IconButton } from "components/generic/IconButtonWithTooltip";
 import {
@@ -20,6 +21,7 @@ import { transports } from "services/RendererService";
 import { merge } from "slices/reducers";
 import { useRenderers } from "slices/renderers";
 import { Renderer } from "slices/settings";
+import { usePaper } from "theme";
 
 const statusColor = {
   connected: "success.light",
@@ -35,6 +37,7 @@ type RendererEditorProps = {
 
 export function RendererEditor({ value, onValueChange }: RendererEditorProps) {
   const [renderers] = useRenderers();
+  const paper = usePaper();
 
   const current = find(renderers, { key: value.key });
 
@@ -46,9 +49,7 @@ export function RendererEditor({ value, onValueChange }: RendererEditorProps) {
 
   return (
     <>
-      <Flex alignItems="center" py={0.5}>
-        <Dot sx={{ color: statusColor[status] }} />
-        <Space />
+      <Flex alignItems="center" py={1}>
         <Box flex={1}>
           <Type>
             {current
@@ -69,6 +70,15 @@ export function RendererEditor({ value, onValueChange }: RendererEditorProps) {
             )}
           </Type>
         </Box>
+        <Chip
+          sx={{
+            mx: 1,
+            color: statusColor[status],
+            ...omit(paper(1), "borderRadius"),
+          }}
+          size="small"
+          label={startCase(status)}
+        />
         <Tooltip title={`${value.disabled ? "Enable" : "Disable"} Renderer`}>
           <Box>
             <Switch
@@ -82,6 +92,7 @@ export function RendererEditor({ value, onValueChange }: RendererEditorProps) {
             <IconButton
               icon={<EditIcon />}
               label="Edit Renderer"
+              sx={{ mr: -3 }}
               {...{ onClick }}
             />
           )}
diff --git a/client/src/components/settings-editor/RendererListEditor.tsx b/client/src/components/settings-editor/RendererListEditor.tsx
index 5988b952..3b206c10 100644
--- a/client/src/components/settings-editor/RendererListEditor.tsx
+++ b/client/src/components/settings-editor/RendererListEditor.tsx
@@ -1,17 +1,18 @@
 import { ReplayOutlined as ResetIcon } from "@mui/icons-material";
-import { Button } from "@mui/material";
-import { debounce } from "lodash";
-import { RendererEditor } from "./RendererEditor";
+import { Box } from "@mui/material";
 import { defaultTransport } from "client";
-import { ListEditor } from "components/generic/ListEditor";
-import { defaultRenderers, Renderer, useSettings } from "slices/settings";
 import { FeaturePickerButton } from "components/app-bar/FeaturePickerButton";
+import { ListEditor } from "components/generic/ListEditor";
+import { debounce } from "lodash";
+import { Renderer, defaultRenderers, useSettings } from "slices/settings";
+import { RendererEditor } from "./RendererEditor";
 
 export function RendererListEditor() {
   const [{ renderer }, setSettings] = useSettings();
   return (
-    <>
+    <Box sx={{ mx: -2 }}>
       <ListEditor<Renderer>
+        sortable
         editor={(v) => <RendererEditor value={v} />}
         icon={null}
         value={renderer}
@@ -32,6 +33,6 @@ export function RendererListEditor() {
           </FeaturePickerButton>
         }
       />
-    </>
+    </Box>
   );
 }
diff --git a/client/src/components/settings-editor/ServerEditor.tsx b/client/src/components/settings-editor/ServerEditor.tsx
index 8e366a21..f87c007c 100644
--- a/client/src/components/settings-editor/ServerEditor.tsx
+++ b/client/src/components/settings-editor/ServerEditor.tsx
@@ -1,28 +1,30 @@
 import { EditOutlined as EditIcon } from "@mui/icons-material";
 import {
   Box,
+  Chip,
   Switch,
   TextField,
   Tooltip,
   Typography as Type,
   debounce,
 } from "@mui/material";
-import { entries, startCase } from "lodash";
 import { transports } from "client";
 import { Flex } from "components/generic/Flex";
 import { IconButtonWithTooltip as IconButton } from "components/generic/IconButtonWithTooltip";
 import {
-  AppBarTitle as Title,
   ManagedModal as Dialog,
+  AppBarTitle as Title,
 } from "components/generic/Modal";
 import { OverlineDot as Dot } from "components/generic/Overline";
 import { SelectField as Select } from "components/generic/Select";
 import { Space } from "components/generic/Space";
 import { useConnection } from "hooks/useConnectionResolver";
 import { useConnectionStatus } from "hooks/useConnectionStatus";
+import { entries, omit, startCase } from "lodash";
+import { useMemo } from "react";
 import { merge } from "slices/reducers";
 import { Remote } from "slices/settings";
-import { useMemo } from "react";
+import { usePaper } from "theme";
 
 const statusColor = {
   connected: "success.light",
@@ -38,6 +40,7 @@ type ServerEditorProps = {
 
 export function ServerEditor({ value, onValueChange }: ServerEditorProps) {
   const connection = useConnection(value.url);
+  const paper = usePaper();
   const status = useConnectionStatus(value.url);
 
   const handleChange = useMemo(
@@ -51,8 +54,6 @@ export function ServerEditor({ value, onValueChange }: ServerEditorProps) {
   return (
     <>
       <Flex alignItems="center" py={0.5}>
-        <Dot sx={{ color: statusColor[status] }} />
-        <Space />
         <Box flex={1}>
           <Type>
             {connection
@@ -63,6 +64,15 @@ export function ServerEditor({ value, onValueChange }: ServerEditorProps) {
             {connection?.description ?? (value?.url || "No URL")}
           </Type>
         </Box>
+        <Chip
+          sx={{
+            mx: 1,
+            color: statusColor[status],
+            ...omit(paper(1), "borderRadius"),
+          }}
+          size="small"
+          label={startCase(status)}
+        />
         <Tooltip title={`${value.disabled ? "Enable" : "Disable"} Connection`}>
           <Box>
             <Switch
@@ -76,6 +86,7 @@ export function ServerEditor({ value, onValueChange }: ServerEditorProps) {
             <IconButton
               icon={<EditIcon />}
               label="Edit Connection"
+              sx={{ mr: -3 }}
               {...{ onClick }}
             />
           )}
diff --git a/client/src/components/settings-editor/ServerListEditor.tsx b/client/src/components/settings-editor/ServerListEditor.tsx
index 61f91e81..a25b1c8a 100644
--- a/client/src/components/settings-editor/ServerListEditor.tsx
+++ b/client/src/components/settings-editor/ServerListEditor.tsx
@@ -1,4 +1,5 @@
 import { ReplayOutlined as ResetIcon } from "@mui/icons-material";
+import { Box } from "@mui/material";
 import { defaultTransport } from "client";
 import { FeaturePickerButton } from "components/app-bar/FeaturePickerButton";
 import { ListEditor } from "components/generic/ListEditor";
@@ -9,8 +10,9 @@ import { ServerEditor } from "./ServerEditor";
 export function ServerListEditor() {
   const [{ remote }, setSettings] = useSettings();
   return (
-    <>
+    <Box sx={{ mx: -2 }}>
       <ListEditor<Remote>
+        sortable
         editor={(v) => <ServerEditor value={v} />}
         icon={null}
         value={remote}
@@ -31,6 +33,6 @@ export function ServerListEditor() {
           </FeaturePickerButton>
         }
       />
-    </>
+    </Box>
   );
 }
diff --git a/client/src/layers/layerHandlers.tsx b/client/src/layers/layerHandlers.tsx
index 9261f6db..fc0c72b0 100644
--- a/client/src/layers/layerHandlers.tsx
+++ b/client/src/layers/layerHandlers.tsx
@@ -10,7 +10,7 @@ export function getLayerHandler(layer?: Layer) {
 }
 
 export const layerHandlers: Dictionary<LayerController<string, any>> = {
-  map: mapController,
   trace: traceController,
+  map: mapController,
   query: queryController,
 };
diff --git a/client/src/layers/map/index.tsx b/client/src/layers/map/index.tsx
index 62f4a7d2..2a72058c 100644
--- a/client/src/layers/map/index.tsx
+++ b/client/src/layers/map/index.tsx
@@ -54,9 +54,6 @@ export const controller = {
               whiteSpace: "pre-line",
               mb: 1,
               mt: 1,
-              ...paper(1),
-              p: 1,
-              borderRadius: 1,
             }}
           >
             <code>{value?.source?.parsedMap?.error}</code>
diff --git a/client/src/layers/query/index.tsx b/client/src/layers/query/index.tsx
index db38590b..e57eb63a 100644
--- a/client/src/layers/query/index.tsx
+++ b/client/src/layers/query/index.tsx
@@ -50,6 +50,7 @@ export const controller = {
     const { algorithm } = value?.source ?? {};
     const {
       layers,
+      allLayers,
       layer: selectedLayer,
       key: mapLayerKey,
     } = useLayer(undefined, (c): c is MapLayer => c.source?.type === "map");
@@ -61,9 +62,10 @@ export const controller = {
           label="Algorithm"
           content={
             <FeaturePicker
-              showArrow
+              arrow
+              paper
               icon={<CodeOutlined />}
-              label="Choose Algorithm"
+              label="Algorithm"
               value={algorithm}
               items={algorithms.map((c) => ({
                 ...c,
@@ -84,12 +86,14 @@ export const controller = {
           label="Map"
           content={
             <FeaturePicker
-              showArrow
+              arrow
+              paper
               icon={<LayersOutlined />}
-              label="Choose Layer"
+              label="Layer"
               value={mapLayerKey}
-              items={layers.map((c) => ({
+              items={allLayers.map((c) => ({
                 id: c.key,
+                hidden: !find(layers, (d) => d.key === c.key),
                 name: inferLayerName(c),
               }))}
               onChange={async (v) =>
@@ -105,7 +109,7 @@ export const controller = {
           </Type>
         )}
         <Heading label="Preview" />
-        <Box sx={{ height: 240, mx: -2, mb: -2 }}>
+        <Box sx={{ height: 240, mx: -2 }}>
           <TracePreview trace={value?.source?.trace?.content} />
         </Box>
       </>
diff --git a/client/src/layers/trace/index.tsx b/client/src/layers/trace/index.tsx
index 0c403442..edb6a85f 100644
--- a/client/src/layers/trace/index.tsx
+++ b/client/src/layers/trace/index.tsx
@@ -138,9 +138,6 @@ export const controller = {
               whiteSpace: "pre-line",
               mb: 1,
               mt: 1,
-              ...paper(1),
-              p: 1,
-              borderRadius: 1,
             }}
           >
             <code>{value?.source?.trace?.error}</code>
@@ -154,16 +151,13 @@ export const controller = {
               whiteSpace: "pre-line",
               mb: 1,
               mt: 1,
-              ...paper(1),
-              p: 1,
-              borderRadius: 1,
             }}
           >
             <code>{value?.source?.parsedTrace?.error}</code>
           </Typography>
         )}
         <Heading label="Preview" />
-        <Box sx={{ height: 240, mx: -2, mb: -2 }}>
+        <Box sx={{ height: 240, mx: -2 }}>
           <TracePreview trace={value?.source?.parsedTrace?.content} />
         </Box>
       </>
diff --git a/client/src/pages/AboutPage.tsx b/client/src/pages/AboutPage.tsx
index d09af8e2..d8e582f0 100644
--- a/client/src/pages/AboutPage.tsx
+++ b/client/src/pages/AboutPage.tsx
@@ -47,7 +47,6 @@ export function AboutPage({ template: Page }: PageContentProps) {
       <Page.Handle>{dragHandle}</Page.Handle>
       <Page.Content>
         <Flex>
-          {" "}
           <Scroll y>
             <Box sx={{ p: 2 }}>
               <Box sx={{ pt: 6, pb: 2 }}>
diff --git a/client/src/pages/DebugPage.tsx b/client/src/pages/DebugPage.tsx
index 9abde5db..44c13673 100644
--- a/client/src/pages/DebugPage.tsx
+++ b/client/src/pages/DebugPage.tsx
@@ -50,7 +50,7 @@ export function DebugPage({ template: Page }: PageContentProps) {
               name: inferLayerName(l),
             }))}
             onChange={setKey}
-            showArrow
+            arrow
             ellipsis={12}
           />
           {divider}
diff --git a/client/src/pages/LayersPage.tsx b/client/src/pages/LayersPage.tsx
index 56dd2775..79ba2681 100644
--- a/client/src/pages/LayersPage.tsx
+++ b/client/src/pages/LayersPage.tsx
@@ -1,4 +1,6 @@
 import { Box } from "@mui/material";
+import { Flex } from "components/generic/Flex";
+import { Scroll } from "components/generic/Scrollbars";
 import { useViewTreeContext } from "components/inspector/ViewTree";
 import { LayerListEditor } from "components/layer-editor/LayerListEditor";
 import { PageContentProps } from "./PageMeta";
@@ -9,9 +11,13 @@ export function LayersPage({ template: Page }: PageContentProps) {
     <Page onChange={onChange} stack={state}>
       <Page.Handle>{dragHandle}</Page.Handle>
       <Page.Content>
-        <Box p={2} pr={1} pt={6}>
-          <LayerListEditor />
-        </Box>
+        <Flex>
+          <Scroll y>
+            <Flex pt={6}>
+              <LayerListEditor />
+            </Flex>
+          </Scroll>
+        </Flex>
       </Page.Content>
       <Page.Extras>{controls}</Page.Extras>
     </Page>
diff --git a/client/src/pages/SettingsPage.tsx b/client/src/pages/SettingsPage.tsx
index fca77289..905dbdea 100644
--- a/client/src/pages/SettingsPage.tsx
+++ b/client/src/pages/SettingsPage.tsx
@@ -125,7 +125,7 @@ export function SettingsPage({ template: Page }: PageContentProps) {
                           id: c,
                           name: startCase(c),
                         }))}
-                        showArrow
+                        arrow
                         onChange={(v) =>
                           setSettings(() => ({
                             "appearance/accentColor": v as AccentColor,
diff --git a/client/src/pages/StepsPage.tsx b/client/src/pages/StepsPage.tsx
index eb656f12..e426ca39 100644
--- a/client/src/pages/StepsPage.tsx
+++ b/client/src/pages/StepsPage.tsx
@@ -1,9 +1,17 @@
 import {
   FiberManualRecordOutlined,
   LayersOutlined as LayersIcon,
-  SortOutlined as StepsIcon,
+  SegmentOutlined,
 } from "@mui/icons-material";
-import { Box, Divider, Typography, useTheme } from "@mui/material";
+import {
+  Box,
+  Divider,
+  Stack,
+  SxProps,
+  Theme,
+  Typography,
+  useTheme,
+} from "@mui/material";
 import { FeaturePicker } from "components/app-bar/FeaturePicker";
 import { Playback, PlaybackLayerData } from "components/app-bar/Playback";
 import { Flex } from "components/generic/Flex";
@@ -21,20 +29,28 @@ import { inferLayerName } from "layers/inferLayerName";
 import { getLayerHandler } from "layers/layerHandlers";
 import {
   chain as _,
-  defer,
+  clamp,
   find,
   findIndex,
+  isUndefined,
   map,
   reduce,
   startCase,
-  throttle,
 } from "lodash";
 import { nanoid as id } from "nanoid";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Layer, useLayer } from "slices/layers";
-import { usePaper } from "theme";
+import { useAcrylic, usePaper } from "theme";
 import { PageContentProps } from "./PageMeta";
 
+function lerp(start: number, end: number, amount: number): number {
+  return start + clamp(amount, 0, 1) * (end - start);
+}
+
+const ITEM_HEIGHT = 80;
+
+const PADDING_TOP = 8;
+
 const divider = <Divider orientation="vertical" flexItem sx={{ m: 1 }} />;
 
 const pxToInt = (s: string) => Number(s.replace(/px$/, ""));
@@ -86,7 +102,11 @@ function useStepsPageState(
 export function StepsPage({ template: Page }: PageContentProps) {
   const { spacing } = useTheme();
   const paper = usePaper();
+  const acrylic = useAcrylic();
   const ref = useRef<ListHandle | null>(null);
+  const [scrollerRef, setScrollerRef] = useState<HTMLElement | Window | null>(
+    null
+  );
 
   const { controls, onChange, state, dragHandle } =
     useViewTreeContext<StepsPageState>();
@@ -145,23 +165,34 @@ export function StepsPage({ template: Page }: PageContentProps) {
 
   const shouldBreak = useBreakpoints(key);
 
-  const snapTo = useCallback(
-    throttle((step: number) => {
-      if (stepToFilteredStep) {
-        ref?.current?.scrollToIndex?.({
-          index: stepToFilteredStep(step),
-          align: "start",
+  useEffect(() => {
+    if (stepToFilteredStep && scrollerRef && ref.current) {
+      const i = stepToFilteredStep(step!);
+      if (playing) {
+        let cancelled = false;
+        const f = (timestamp: DOMHighResTimeStamp) => {
+          if (!cancelled && "scrollTop" in scrollerRef && !isUndefined(step)) {
+            const { scrollTop } = scrollerRef;
+            const offset = i * ITEM_HEIGHT;
+            ref.current?.scrollTo({
+              top: lerp(scrollTop, offset, 0.0000001 * timestamp),
+            });
+            requestAnimationFrame(f);
+          }
+        };
+        requestAnimationFrame(f);
+        return () => {
+          cancelled = true;
+        };
+      } else {
+        ref.current.scrollToIndex({
+          index: i,
           behavior: "smooth",
-          offset: -pxToInt(spacing(6 + 2)),
+          offset: -pxToInt(spacing(6 + PADDING_TOP)),
         });
       }
-    }, 1000 / 30),
-    [ref, stepToFilteredStep]
-  );
-
-  useEffect(() => {
-    defer(() => snapTo(step));
-  }, [snapTo, step]);
+    }
+  }, [step, ref, scrollerRef, stepToFilteredStep, playing]);
 
   return (
     <Page onChange={onChange} stack={state}>
@@ -177,24 +208,29 @@ export function StepsPage({ template: Page }: PageContentProps) {
                 }}
                 items={steps}
                 listOptions={{
+                  scrollerRef: setScrollerRef,
                   ref,
-                  defaultItemHeight: 80,
+                  defaultItemHeight: ITEM_HEIGHT,
                   overscan: 0,
                 }}
                 renderItem={([event, eventIndex], i) =>
                   playing ? (
                     <Box
+                      key={i}
                       sx={{
-                        pt: i ? 0 : spacing(6),
+                        pt: i ? 0 : spacing(6 + PADDING_TOP),
                       }}
                     >
                       <Skeleton event={event} />
                     </Box>
                   ) : (
                     <Box
+                      key={i}
                       sx={{
-                        height: spacing(i ? 10 : 16),
-                        pt: i ? 0 : spacing(6),
+                        height:
+                          pxToInt(spacing(i ? 0 : 6 + PADDING_TOP)) +
+                          ITEM_HEIGHT,
+                        pt: i ? 0 : spacing(6 + PADDING_TOP),
                       }}
                     >
                       <EventInspector
@@ -212,14 +248,49 @@ export function StepsPage({ template: Page }: PageContentProps) {
               />
             ) : (
               <Placeholder
-                icon={<StepsIcon />}
-                label={`${inferLayerName(layer)} no steps`}
+                icon={<SegmentOutlined />}
+                label={`${inferLayerName(layer)}`}
               />
             )
           ) : (
-            <Placeholder icon={<StepsIcon />} label="Steps" />
+            <Placeholder icon={<SegmentOutlined />} label="Steps" />
           )}
         </Flex>
+        {!!steps?.length && (
+          <Stack
+            direction="row"
+            sx={
+              {
+                ...paper(1),
+                ...acrylic,
+                alignItems: "center",
+                position: "absolute",
+                top: (t) => t.spacing(6),
+                height: (t) => t.spacing(6),
+                borderRadius: 1,
+                px: 1,
+                m: 1,
+              } as SxProps<Theme>
+            }
+          >
+            <Playback layer={layer} />
+            {divider}
+            <Typography
+              component="div"
+              variant="body2"
+              color="text.secondary"
+              sx={{
+                px: 1,
+                py: 0.25,
+                textAlign: "center",
+                ...paper(0),
+                borderRadius: 1,
+              }}
+            >
+              {step}
+            </Typography>
+          </Stack>
+        )}
       </Page.Content>
       <Page.Options>
         <FeaturePicker
@@ -232,27 +303,10 @@ export function StepsPage({ template: Page }: PageContentProps) {
             name: inferLayerName(l),
           }))}
           onChange={setKey}
-          showArrow
+          arrow
           ellipsis={12}
         />
         {divider}
-        <Playback layer={layer} />
-        {divider}
-        <Typography
-          component="div"
-          variant="body2"
-          color="text.secondary"
-          sx={{
-            px: 1,
-            py: 0.25,
-            textAlign: "center",
-            ...paper(0),
-            borderRadius: 1,
-          }}
-        >
-          {step}
-        </Typography>
-        {divider}
         <FeaturePicker
           icon={
             <FiberManualRecordOutlined
@@ -269,7 +323,7 @@ export function StepsPage({ template: Page }: PageContentProps) {
             })),
           ]}
           onChange={setSelectedType}
-          showArrow
+          arrow
           ellipsis={12}
         />
       </Page.Options>
diff --git a/client/src/pages/TreePage.tsx b/client/src/pages/TreePage.tsx
index 79a4b629..d3482737 100644
--- a/client/src/pages/TreePage.tsx
+++ b/client/src/pages/TreePage.tsx
@@ -175,7 +175,7 @@ export function TreePage({ template: Page }: PageContentProps) {
             name: inferLayerName(l),
           }))}
           onChange={setKey}
-          showArrow
+          arrow
           ellipsis={12}
         />
         {divider}
@@ -188,7 +188,7 @@ export function TreePage({ template: Page }: PageContentProps) {
             id: k,
             ...v,
           }))}
-          showArrow
+          arrow
         />
         {divider}
         <FeaturePicker
@@ -200,7 +200,7 @@ export function TreePage({ template: Page }: PageContentProps) {
             id: key,
             name: startCase(value.value),
           }))}
-          showArrow
+          arrow
         />
       </Page.Options>
       <Page.Extras>{controls}</Page.Extras>
diff --git a/client/src/pages/ViewportPage.tsx b/client/src/pages/ViewportPage.tsx
index 534cd9fd..c0140c78 100644
--- a/client/src/pages/ViewportPage.tsx
+++ b/client/src/pages/ViewportPage.tsx
@@ -122,7 +122,7 @@ export function ViewportPage({ template: Page }: PageContentProps) {
                 description: renderer.meta.id,
               })),
             ]}
-            showArrow
+            arrow
           />
           {divider}
           <FeaturePickerMulti
diff --git a/client/src/public/manifest.json b/client/src/public/manifest.json
index fec7653e..9c37b705 100644
--- a/client/src/public/manifest.json
+++ b/client/src/public/manifest.json
@@ -1,9 +1,9 @@
 {
   "short_name": "Visualiser",
   "name": "Visualiser",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "description": "Visualise pathfinding search and more",
-  "version_name": "1.1.9; mid February 2024",
+  "version_name": "1.1.10; mid February 2024",
   "repository": "https://github.com/path-visualiser/app",
   "docs": "https://github.com/path-visualiser/app/blob/master/docs",
   "homepage": "https://path-visualiser.github.io/",
diff --git a/client/src/theme.tsx b/client/src/theme.tsx
index e59c07b4..b8d9b74e 100644
--- a/client/src/theme.tsx
+++ b/client/src/theme.tsx
@@ -104,7 +104,7 @@ export function useAcrylic(): SxProps<Theme> {
   const [{ "appearance/acrylic": acrylic }] = useSettings();
   return acrylic
     ? {
-        backdropFilter: "blur(10px)",
+        backdropFilter: "blur(16px)",
         background: ({ palette }) => alpha(palette.background.paper, 0.75),
       }
     : {
@@ -115,6 +115,9 @@ export function useAcrylic(): SxProps<Theme> {
 
 export function usePaper(): (e?: number) => SxProps<Theme> {
   return (elevation: number = 1) => ({
+    borderRadius: 1,
+    transition: ({ transitions }) =>
+      transitions.create(["background-color", "box-shadow"]),
     boxShadow: ({ shadows, palette }) =>
       palette.mode === "dark"
         ? shadows[1]