and even mooooore tweaks

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);
-    border: 1px solid var(--surface-3);
+    background-color: var(--surface-4);
+    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);
 }