Merge branch 'feature-ui'

client/src/App.tsx

@@ -45,8 +45,12 @@ function App() {
 }
 
 function ThemedApp() {
-  const [{ theme: mode = "light", accentColor: accent = "teal" }] =
-    useSettings();
+  const [
+    {
+      "appearance/theme": mode = "light",
+      "appearance/accentColor": accent = "teal",
+    },
+  ] = useSettings();
   const theme = useMemo(() => makeTheme(mode, accent), [mode, accent]);
   return (
     <ThemeProvider theme={theme}>

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

@@ -4,7 +4,7 @@ import {
   SkipNextOutlined as SkipIcon,
   PauseOutlined as PauseIcon,
   PlayArrowOutlined as PlayIcon,
-  StopOutlined as StopIcon
+  StopOutlined as StopIcon,
 } from "@mui/icons-material";
 import { EditorSetterProps } from "components/Editor";
 import { IconButtonWithTooltip as Button } from "components/generic/IconButtonWithTooltip";
@@ -28,7 +28,7 @@ export function PlaybackService({
   const { step, end, playing, pause, stepWithBreakpointCheck } =
     usePlaybackState(value?.key);
 
-  const [{ playbackRate = 1 }] = useSettings();
+  const [{ "playback/playbackRate": playbackRate = 1 }] = useSettings();
 
   useEffect(() => {
     if (playing) {

client/src/components/generic/Flex.tsx

@@ -1,18 +1,18 @@
-import { Box, BoxProps } from "@mui/material";
-
+import { Box, BoxProps } from "@mui/material";
+import { forwardRef } from "react";
+
 export type FlexProps = {
   vertical?: boolean;
 } & BoxProps;
 
-export function Flex({ vertical, ...props }: FlexProps) {
-  return (
-    <Box
-      position="relative"
-      height="100%"
-      width="100%"
-      display="flex"
-      flexDirection={vertical ? "column" : "row"}
-      {...props}
-    />
-  );
-}
+export const Flex = forwardRef(({ vertical, ...props }: FlexProps, ref) => (
+  <Box
+    ref={ref}
+    position="relative"
+    height="100%"
+    width="100%"
+    display="flex"
+    flexDirection={vertical ? "column" : "row"}
+    {...props}
+  />
+));

client/src/components/inspector/FullscreenModalHost.tsx

@@ -0,0 +1,144 @@
+import { Box, Checkbox, FormControlLabel, Typography } from "@mui/material";
+import { Flex } from "components/generic/Flex";
+import Modal, { ModalAppBar } from "components/generic/Modal";
+import { Scroll } from "components/generic/Scrollbars";
+import { Space } from "components/generic/Space";
+import { useSmallDisplay } from "hooks/useSmallDisplay";
+import { pages } from "pages";
+import { PageSlots } from "pages/Page";
+import { ReactNode, useMemo, useState } from "react";
+import { withSlots } from "react-slot-component";
+import { useUIState } from "slices/UIState";
+import { useSettings } from "slices/settings";
+import { PanelState } from "slices/view";
+import { wait } from "utils/timed";
+
+export type FullscreenPageProps = {
+  renderExtras?: (content?: PanelState) => ReactNode;
+  controls?: ReactNode;
+  children?: ReactNode;
+  showOnStartUpChecked?: boolean;
+  onShowOnStartUpCheckedChange?: (v: boolean) => void;
+};
+
+export const FullscreenPage = withSlots<PageSlots, FullscreenPageProps>(
+  ({ slotProps, showOnStartUpChecked, onShowOnStartUpCheckedChange }) => {
+    const sm = useSmallDisplay();
+    return (
+      <Box sx={{ height: "100%" }}>
+        {!!slotProps.Options?.children && (
+          <Flex sx={{ height: (t) => t.spacing(6) }}>
+            <Flex
+              sx={{
+                p: 0,
+                zIndex: 1,
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                borderBottom: 1,
+                borderColor: "divider",
+                alignItems: "center",
+                pr: 6,
+                background: (t) => t.palette.background.paper,
+              }}
+            >
+              <Scroll x>
+                <Flex
+                  sx={{
+                    width: "max-content",
+                    height: (t) => t.spacing(6),
+                    alignItems: "center",
+                    p: 1,
+                  }}
+                >
+                  {slotProps.Options?.children && (
+                    <>{slotProps.Options.children}</>
+                  )}
+                </Flex>
+              </Scroll>
+              <FormControlLabel
+                label="Show on start-up"
+                labelPlacement="start"
+                sx={{ ml: "auto", mr: -5 }}
+                control={
+                  <Checkbox
+                    defaultChecked={showOnStartUpChecked}
+                    onChange={(_, v) => onShowOnStartUpCheckedChange?.(v)}
+                  />
+                }
+              />
+            </Flex>
+            <Space sx={{ mx: "auto" }} />
+            {slotProps.Extras?.children}
+          </Flex>
+        )}
+        <Box
+          sx={{
+            bgcolor: "background.paper",
+            mt: -6,
+            height: "100%",
+          }}
+        >
+          <Scroll y style={{ height: sm ? "100%" : "70vh" }}>
+            {slotProps.Content?.children}
+          </Scroll>
+        </Box>
+      </Box>
+    );
+  }
+);
+
+export function FullscreenModalHost() {
+  const [{ "behaviour/showOnStart": showOnStart }, setSettings] = useSettings();
+  const [{ fullscreenModal: key }, setUIState] = useUIState();
+  const [closing, setClosing] = useState(false);
+
+  async function handleClose() {
+    setClosing(true);
+    await wait(300);
+    setUIState(() => ({ fullscreenModal: undefined }));
+    setClosing(false);
+  }
+
+  const page = key ? pages[key] : undefined;
+
+  const content = useMemo(() => {
+    if (page) {
+      const PageContent = page.content;
+
+      const FullScreenPageTemplate = withSlots<PageSlots, FullscreenPageProps>(
+        ({ slotProps, ...props }) => (
+          <FullscreenPage
+            {...props}
+            onShowOnStartUpCheckedChange={(v) =>
+              setSettings(() => ({
+                "behaviour/showOnStart": v ? key : undefined,
+              }))
+            }
+            showOnStartUpChecked={showOnStart === key}
+          >
+            <FullscreenPage.Content>
+              {slotProps!.Content?.children}
+            </FullscreenPage.Content>
+            <FullscreenPage.Options>
+              {slotProps!.Options?.children}
+            </FullscreenPage.Options>
+          </FullscreenPage>
+        )
+      );
+      return <PageContent template={FullScreenPageTemplate} />;
+    }
+  }, [key, page]);
+
+  return (
+    !!page && (
+      <Modal open={!closing} onClose={handleClose} width="70vw">
+        <ModalAppBar onClose={handleClose}>
+          <Typography variant="h6">{page.name}</Typography>
+        </ModalAppBar>
+        {content}
+      </Modal>
+    )
+  );
+}

client/src/components/inspector/ViewControls.tsx

@@ -20,6 +20,7 @@ type ViewControlsProps = {
   splitVerticalDisabled?: boolean;
   splitHorizontalDisabled?: boolean;
   closeDisabled?: boolean;
+  popOutDisabled?: boolean;
   onSplitVertical?: () => void;
   onSplitHorizontal?: () => void;
   onClose?: () => void;
@@ -34,6 +35,7 @@ export function ViewControls({
   splitHorizontalDisabled,
   splitVerticalDisabled,
   onPopOut,
+  popOutDisabled,
 }: ViewControlsProps) {
   return (
     <PopupState variant="popover">
@@ -79,19 +81,23 @@ export function ViewControls({
               <ListItemText>Split Horizontal</ListItemText>
             </MenuItem>
             <Divider />
-            <MenuItem
-              onClick={() => {
-                onPopOut?.();
-                state.close();
-              }}
-              disabled={closeDisabled}
-            >
-              <ListItemIcon>
-                <PopOutIcon fontSize="small" />
-              </ListItemIcon>
-              <ListItemText>Pop Out</ListItemText>
-            </MenuItem>
-            <Divider />
+            {!(popOutDisabled || closeDisabled) && (
+              <>
+                <MenuItem
+                  onClick={() => {
+                    onPopOut?.();
+                    onClose?.();
+                    state.close();
+                  }}
+                >
+                  <ListItemIcon>
+                    <PopOutIcon fontSize="small" />
+                  </ListItemIcon>
+                  <ListItemText>Pop Out</ListItemText>
+                </MenuItem>
+                <Divider />
+              </>
+            )}
             <MenuItem
               onClick={() => {
                 onClose?.();