and even mooooore tweaks

src/app.css

@@ -1,9 +1,11 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,GRAD@8..144,400,45;8..144,400,50;8..144,1000,0&family=Roboto+Serif:opsz,GRAD@8..144,71&display=swap");
 
 :root {
-  --surface-1: #eee;
+  --surface-1: #ddd;
-  --surface-2: #f8f8f8;
+  --surface-2: #e8e8e8;
-  --surface-3: #fff;
+  --surface-3: #eee;
+  --surface-4: #f8f8f8;
+  --surface-5: #fff;
   --text-1: #222;
   --text-2: #282828;
   --primary: #41c6b3;
@@ -33,9 +35,11 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --surface-1: #333;
+    --surface-1: #222;
-    --surface-2: #383838;
+    --surface-2: #282828;
-    --surface-3: #444;
+    --surface-3: #333;
+    --surface-4: #383838;
+    --surface-5: #444;
     --text-1: #eee;
     --text-2: #d8d8d8;
 
@@ -71,6 +75,10 @@ body {
 
   * {
     box-sizing: border-box;
+
+    &:focus-visible {
+      outline: 1px solid var(--info);
+    }
   }
 
   & .menu-root {
@@ -84,7 +92,7 @@ body {
     padding-inline-start: 1em;
     block-size: 2em;
 
-    background-color: var(--surface-2);
+    background-color: var(--surface-3);
     color: var(--text-1);
 
     & > .logo {

src/features/command/contextMenu.module.css

@@ -1,6 +1,6 @@
 .menu {
     position: fixed;
-    display: grid;
+    display: none;
     grid-template-columns: auto auto;
     place-content: start;
 
@@ -28,4 +28,8 @@
             text-align: end;
         }
     }
+
+    &:popover-open {
+        display: grid;
+    }
 }

src/features/command/index.tsx

@@ -32,7 +32,16 @@ export const createCommand = (label: string, command: () => any, shortcut?: Comm
     });
 };
 
-export const noop = createCommand('noop', () => { });
+export const noop = Object.defineProperties(createCommand('noop', () => { }), {
+    withLabel: {
+        value(label: string) {
+            return createCommand(label, () => { });
+        },
+        configurable: false,
+        writable: false,
+    },
+}) as CommandType & { withLabel(label: string): CommandType };
+
 
 export const Command: Component<{ command: CommandType }> = (props) => {
     return <>

src/features/file/grid.module.css

@@ -55,6 +55,7 @@
         position: sticky;
         inset-block-start: 0;
         background-color: var(--surface-1);
+        border-block-end: 1px solid var(--surface-5);
     }
 
     & .row {

src/features/file/grid.tsx

@@ -69,8 +69,6 @@ const GridProvider: ParentComponent<{ rows: Map<string, { [lang: string]: { valu
         },
     };
 
-    const mutated = createMemo(() => Object.values(state.rows).filter(entry => Object.values(entry).some(lang => lang.original !== lang.value)));
-
     return <GridContext.Provider value={ctx}>
         <SelectionProvider selection={setSelection} multiSelect>
             {props.children}
@@ -204,7 +202,7 @@ const TextArea: Component<{ key: string, value: string, lang: string, oninput?:
 
     const resize = () => {
         element.style.height = `1px`;
-        element.style.height = `${11 + element.scrollHeight}px`;
+        element.style.height = `${2 + element.scrollHeight}px`;
     };
 
     const mutate = debounce(() => {

src/features/menu/index.module.css

@@ -9,7 +9,7 @@
     text-align: start;
 
     &:hover {
-        background-color: var(--surface-2);
+        background-color: var(--surface-4);
     }
 }
 
@@ -25,8 +25,8 @@
     padding: var(--padding-m) 0;
     inline-size: max-content;
 
-    background-color: var(--surface-2);
+    background-color: var(--surface-4);
-    border: 1px solid var(--surface-3);
+    border: 1px solid var(--surface-5);
     border-block-start-width: 0;
     margin: unset;
 
@@ -40,10 +40,10 @@
         grid-template-columns: subgrid;
         align-items: center;
 
-        background-color: var(--surface-2);
+        background-color: var(--surface-4);
 
         &:hover {
-            background-color: var(--surface-3);
+            background-color: var(--surface-5);
         }
 
         & > sub {
@@ -54,5 +54,5 @@
 }
 
 :popover-open + .item {
-    background-color: var(--surface-2);
+    background-color: var(--surface-4);
 }

src/routes/(editor)/edit.tsx

@@ -112,8 +112,6 @@ export default function Edit(props: ParentProps) {
             });
 
         }, { key: 's', modifier: Modifier.Control | Modifier.Shift }),
-        edit: createCommand('edit', () => {
-        }),
         selectAll: createCommand('select all', () => {
             api()?.selectAll();
         }, { key: 'a', modifier: Modifier.Control }),
@@ -143,7 +141,7 @@ export default function Edit(props: ParentProps) {
                     <Menu.Item command={commands.save} />
                 </Menu.Item>
 
-                <Menu.Item command={commands.edit} />
+                <Menu.Item command={noop.withLabel('edit')} />
 
                 <Menu.Item label="selection">
                     <Menu.Item command={commands.selectAll} />
@@ -151,7 +149,7 @@ export default function Edit(props: ParentProps) {
                     <Menu.Item command={commands.clearSelection} />
                 </Menu.Item>
 
-                <Menu.Item label="view" command={noop} />
+                <Menu.Item command={noop.withLabel('view')} />
             </Menu.Root>
 
             <Sidebar as="aside" class={css.sidebar}>