feat(frontend): responsive editor styling

4 files changed, 126 insertions, 41 deletions

diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx
index 95da52c8..bed6afa8 100644
--- a/subprojects/frontend/src/editor/EditorButtons.tsx
+++ b/subprojects/frontend/src/editor/EditorButtons.tsx
@@ -41,6 +41,7 @@ function EditorButtons(): JSX.Element {
         disabled={!editorStore.canUndo}
         onClick={() => editorStore.undo()}
         aria-label="Undo"
+        color="inherit"
       >
         <UndoIcon fontSize="small" />
       </IconButton>
@@ -48,6 +49,7 @@ function EditorButtons(): JSX.Element {
         disabled={!editorStore.canRedo}
         onClick={() => editorStore.redo()}
         aria-label="Redo"
+        color="inherit"
       >
         <RedoIcon fontSize="small" />
       </IconButton>
@@ -87,6 +89,7 @@ function EditorButtons(): JSX.Element {
       <IconButton
         onClick={() => editorStore.formatText()}
         aria-label="Automatic format"
+        color="inherit"
       >
         <FormatPaint fontSize="small" />
       </IconButton>
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts
index c983a378..fe5ba58e 100644
--- a/subprojects/frontend/src/editor/EditorTheme.ts
+++ b/subprojects/frontend/src/editor/EditorTheme.ts
@@ -14,20 +14,28 @@ export default styled('div', {
   name: 'EditorTheme',
   shouldForwardProp: (propName) => propName !== 'showLineNumbers',
 })<{ showLineNumbers: boolean }>(({ theme, showLineNumbers }) => {
+  const editorFontStyle = {
+    ...theme.typography.editor,
+    [theme.breakpoints.down('sm')]: {
+      fontSize: '0.875rem',
+      lineHeight: 1.43,
+    },
+  };
+
   const generalStyle: CSSObject = {
     background: theme.palette.background.default,
     '&, .cm-editor': {
       height: '100%',
     },
     '.cm-scroller': {
-      ...theme.typography.editor,
       color: theme.palette.text.secondary,
     },
     '.cm-gutters': {
-      background: 'transparent',
+      background: theme.palette.background.default,
       border: 'none',
     },
     '.cm-content': {
+      ...editorFontStyle,
       padding: 0,
     },
     '.cm-activeLine': {
@@ -138,6 +146,7 @@ export default styled('div', {
 
   const lineNumberStyle: CSSObject = {
     '.cm-lineNumbers': {
+      ...editorFontStyle,
       color: theme.palette.highlight.lineNumber,
       ...(!showLineNumbers && {
         display: 'none !important',
@@ -157,7 +166,7 @@ export default styled('div', {
       borderBottom: `1px solid ${theme.palette.outer.border}`,
       marginBottom: theme.spacing(1),
     },
-    '.cm-panel, .cm-panel.cm-search': {
+    '.cm-panel': {
       color: theme.palette.text.primary,
       background: theme.palette.outer.background,
       borderTop: `1px solid ${theme.palette.outer.border}`,
@@ -207,12 +216,21 @@ export default styled('div', {
       [`.cm-tooltip .cm-diagnostic-${severity}::before`]: {
         background: tooltipColor,
       },
+      [`.cm-panel.cm-panel-lint .cm-diagnostic-${severity}::before`]: {
+        top: 8,
+        [theme.breakpoints.down('sm')]: {
+          top: 6,
+        },
+      },
       [`.cm-lint-marker-${severity}`]: {
         ...iconStyle,
         display: 'block',
         margin: '4px 0',
         // Remove original CodeMirror icon.
         content: '""',
+        [theme.breakpoints.down('sm')]: {
+          margin: '2px 0',
+        },
         '::before': {
           // Remove original CodeMirror icon.
           content: '""',
@@ -247,13 +265,16 @@ export default styled('div', {
         display: 'none',
       },
       ul: {
-        maxHeight: `max(${28 * 4}px, 20vh)`,
+        maxHeight: `max(${32 * 4}px, 20vh)`,
         li: {
           cursor: 'pointer',
           color: theme.palette.text.primary,
         },
         '.cm-diagnostic': {
-          ...theme.typography.body2,
+          ...theme.typography.body1,
+          [theme.breakpoints.down('sm')]: {
+            ...theme.typography.body2,
+          },
           '&[aria-selected="true"]': {
             color: theme.palette.text.primary,
             background: 'transparent',
@@ -264,6 +285,9 @@ export default styled('div', {
               theme.palette.text.primary,
               theme.palette.action.hoverOpacity,
             ),
+            '@media (hover: none)': {
+              background: 'transparent',
+            },
           },
         },
       },
@@ -301,12 +325,15 @@ export default styled('div', {
       background: theme.palette.text.primary,
       border: 'none',
       cursor: 'pointer',
+      [theme.breakpoints.down('sm')]: {
+        margin: '2px 0',
+      },
     },
     [`.${editorClassNames.foldMarkerClosed}`]: {
       transform: 'rotate(-90deg)',
     },
     [`.${editorClassNames.foldPlaceholder}`]: {
-      ...theme.typography.editor,
+      ...editorFontStyle,
       padding: 0,
       fontFamily: 'inherit',
       background: 'transparent',
@@ -326,13 +353,16 @@ export default styled('div', {
           theme.palette.highlight.foldPlaceholder,
           theme.palette.action.hoverOpacity,
         ),
+        '@media (hover: none)': {
+          backgroundColor: 'transparent',
+        },
       },
     },
   };
 
   const completionStyle: CSSObject = {
     '.cm-tooltip.cm-tooltip-autocomplete': {
-      ...theme.typography.editor,
+      ...editorFontStyle,
       background: theme.palette.background.paper,
       borderRadius: theme.shape.borderRadius,
       overflow: 'hidden',
@@ -346,11 +376,11 @@ export default styled('div', {
         color: theme.palette.text.secondary,
       },
       '.cm-completionLabel': {
-        ...theme.typography.editor,
+        ...editorFontStyle,
         color: theme.palette.text.primary,
       },
       '.cm-completionDetail': {
-        ...theme.typography.editor,
+        ...editorFontStyle,
         color: theme.palette.text.secondary,
         fontStyle: 'normal',
       },
diff --git a/subprojects/frontend/src/editor/SearchPanelStore.ts b/subprojects/frontend/src/editor/SearchPanelStore.ts
index 43a571e5..8dd02ae6 100644
--- a/subprojects/frontend/src/editor/SearchPanelStore.ts
+++ b/subprojects/frontend/src/editor/SearchPanelStore.ts
@@ -7,7 +7,6 @@ import {
   replaceAll,
   replaceNext,
   SearchQuery,
-  selectMatches,
   setSearchQuery,
 } from '@codemirror/search';
 import { action, computed, makeObservable, observable, override } from 'mobx';
@@ -31,7 +30,8 @@ export default class SearchPanelStore extends PanelStore {
       updateQuery: action,
       findNext: action,
       findPrevious: action,
-      selectMatches: action,
+      replaceNext: action,
+      replaceAll: action,
     });
   }
 
@@ -82,10 +82,6 @@ export default class SearchPanelStore extends PanelStore {
     this.store.doCommand(findPrevious);
   }
 
-  selectMatches(): void {
-    this.store.doCommand(selectMatches);
-  }
-
   replaceNext(): void {
     this.store.doCommand(replaceNext);
   }
diff --git a/subprojects/frontend/src/editor/SearchToolbar.tsx b/subprojects/frontend/src/editor/SearchToolbar.tsx
index dd7859c5..a5925328 100644
--- a/subprojects/frontend/src/editor/SearchToolbar.tsx
+++ b/subprojects/frontend/src/editor/SearchToolbar.tsx
@@ -2,7 +2,6 @@ import CloseIcon from '@mui/icons-material/Close';
 import FindReplaceIcon from '@mui/icons-material/FindReplace';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import SearchIcon from '@mui/icons-material/Search';
 import Button from '@mui/material/Button';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -10,20 +9,31 @@ import FormHelperText from '@mui/material/FormHelperText';
 import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
+import ToggleButton from '@mui/material/ToggleButton';
 import Toolbar from '@mui/material/Toolbar';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { observer } from 'mobx-react-lite';
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import type SearchPanelStore from './SearchPanelStore';
 
+const SPLIT_MEDIA_QUERY = '@media (max-width: 1200px)';
+const ABBREVIATE_MEDIA_QUERY = '@media (max-width: 720px)';
+
 function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
   const {
     id: panelId,
     query: { search, valid, caseSensitive, literal, regexp, replace },
     invalidRegexp,
   } = store;
+  const split = useMediaQuery(SPLIT_MEDIA_QUERY);
+  const abbreviate = useMediaQuery(ABBREVIATE_MEDIA_QUERY);
+  const [showRepalceState, setShowReplaceState] = useState(false);
+
+  const showReplace = !split || showRepalceState || replace !== '';
 
   const searchHelperId = `${panelId}-search-helper`;
+  const replaceId = `${panelId}-replace`;
 
   const searchFieldRef = useCallback(
     (element: HTMLInputElement | null) =>
@@ -32,13 +42,20 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
   );
 
   return (
-    <Toolbar variant="dense" sx={{ py: 0.5, alignItems: 'flex-start' }}>
+    <Toolbar
+      variant="dense"
+      sx={{ py: 0.5, alignItems: 'center', minHeight: 'auto' }}
+    >
       <Stack
-        direction="row"
-        flexWrap="wrap"
-        alignItems="center"
-        rowGap={0.5}
-        flexGrow={1}
+        direction={split ? 'column' : 'row'}
+        sx={{
+          alignItems: 'center',
+          flexGrow: 1,
+          [SPLIT_MEDIA_QUERY]: {
+            alignItems: 'start',
+            gap: 0.5,
+          },
+        }}
       >
         <Stack direction="row" flexWrap="wrap" alignItems="center" rowGap={0.5}>
           <TextField
@@ -65,7 +82,7 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
             }}
             variant="standard"
             size="small"
-            sx={{ my: 0.25, mr: 1 }}
+            sx={{ mt: '4px', mr: 1 }}
             inputRef={searchFieldRef}
           />
           {invalidRegexp && (
@@ -92,6 +109,7 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
               aria-label="Previous"
               disabled={!valid}
               onClick={() => store.findPrevious()}
+              color="inherit"
             >
               <KeyboardArrowUpIcon fontSize="small" />
             </IconButton>
@@ -99,19 +117,17 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
               aria-label="Next"
               disabled={!valid}
               onClick={() => store.findNext()}
+              color="inherit"
             >
               <KeyboardArrowDownIcon fontSize="small" />
             </IconButton>
-            <Button
-              disabled={!valid}
-              onClick={() => store.selectMatches()}
-              color="inherit"
-              startIcon={<SearchIcon fontSize="inherit" />}
-            >
-              Find all
-            </Button>
           </Stack>
-          <Stack direction="row" flexWrap="wrap" rowGap={0.5}>
+          <Stack
+            direction="row"
+            flexWrap="wrap"
+            alignItems="center"
+            rowGap={0.5}
+          >
             <FormControlLabel
               control={
                 <Checkbox
@@ -122,7 +138,8 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
                   size="small"
                 />
               }
-              label="Match case"
+              aria-label="Match case"
+              label={abbreviate ? 'Case' : 'Match case'}
             />
             <FormControlLabel
               control={
@@ -134,7 +151,8 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
                   size="small"
                 />
               }
-              label="Literal"
+              aria-label="Literal"
+              label={abbreviate ? 'Lit' : 'Literal'}
             />
             <FormControlLabel
               control={
@@ -148,9 +166,36 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
               }
               label="Regexp"
             />
+            {split && (
+              <ToggleButton
+                value="show-replace"
+                selected={showReplace}
+                onClick={() => {
+                  if (showReplace) {
+                    store.updateQuery({ replace: '' });
+                    setShowReplaceState(false);
+                  } else {
+                    setShowReplaceState(true);
+                  }
+                }}
+                aria-label="Show replace options"
+                aria-controls={replaceId}
+                size="small"
+                sx={{ borderRadius: '100%' }}
+              >
+                <FindReplaceIcon fontSize="small" />
+              </ToggleButton>
+            )}
           </Stack>
         </Stack>
-        <Stack direction="row" flexWrap="wrap" alignItems="center" rowGap={0.5}>
+        <Stack
+          id={replaceId}
+          direction="row"
+          flexWrap="wrap"
+          alignItems="center"
+          rowGap={0.5}
+          display={showReplace ? 'flex' : 'none'}
+        >
           <TextField
             placeholder="Replace with"
             aria-label="Replace with"
@@ -166,9 +211,14 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
             }}
             variant="standard"
             size="small"
-            sx={{ mr: 1 }}
+            sx={{ mt: '4px', mr: 1 }}
           />
-          <Stack direction="row" flexWrap="wrap" rowGap={0.5}>
+          <Stack
+            direction="row"
+            flexWrap="wrap"
+            alignItems="center"
+            rowGap={0.5}
+          >
             <Button
               disabled={!valid}
               onClick={() => store.replaceNext()}
@@ -188,9 +238,15 @@ function SearchToolbar({ store }: { store: SearchPanelStore }): JSX.Element {
           </Stack>
         </Stack>
       </Stack>
-      <IconButton onClick={() => store.close()} sx={{ mt: '2px', ml: 1 }}>
-        <CloseIcon fontSize="small" />
-      </IconButton>
+      <Stack direction="row" alignSelf="stretch" alignItems="start" mt="1px">
+        <IconButton
+          aria-label="Close find/replace"
+          onClick={() => store.close()}
+          color="inherit"
+        >
+          <CloseIcon fontSize="small" />
+        </IconButton>
+      </Stack>
     </Toolbar>
   );
 }