some restructuring and added a color-scheme-picker

src/features/file/grid.module.css

@@ -24,6 +24,15 @@
         color: var(--text-1);
         border-color: var(--text-2);
         border-radius: var(--radii-s);
+
+        &:has(::spelling-error, ::grammar-error) {
+            border-color: var(--fail);
+        }
+
+        & ::spelling-error {
+            outline: 1px solid var(--fail);
+            text-decoration: yellow underline;
+        }
     }
 
     & .cell {

src/features/file/grid.tsx

@@ -218,26 +218,13 @@ const TextArea: Component<{ key: string, value: string, lang: string, oninput?:
         mutate();
     };
 
-    createEffect(() => {
-        props.value;
-
-        resize();
-    });
-
-    const observer = new MutationObserver((e) => {
-        if (element()?.isConnected) {
-            resize();
-        }
-    });
-    observer.observe(document.body, { childList: true, subtree: true });
-
     return <textarea
         ref={setElement}
         value={props.value}
         lang={props.lang}
-        placeholder={props.lang}
+        placeholder={`${props.key} in ${props.lang}`}
         name={`${props.key}:${props.lang}`}
-        spellcheck
+        spellcheck={true}
         wrap="soft"
         onkeyup={onKeyUp}
         on:keydown={e => e.stopPropagation()}

src/features/menu/index.module.css

@@ -1,3 +1,9 @@
+.root {
+    & > div {
+        display: contents;
+    }
+}
+
 .item {
     padding: var(--padding-m) var(--padding-l);
 

src/features/menu/index.tsx

@@ -189,10 +189,9 @@ declare module "solid-js" {
     }
 }
 
-export const asMenuRoot = (element: Element) => {
+const Mount: Component = (props) => {
     const menu = useMenu();
 
-    const c = 'menu-root';
     const listener = (e: KeyboardEvent) => {
         const key = e.key.toLowerCase();
         const modifiers =
@@ -214,20 +213,10 @@ export const asMenuRoot = (element: Element) => {
         return false;
     };
 
-    onMount(() => {
-        element.classList.add(c);
-        document.addEventListener('keydown', listener);
-    });
-
-    onCleanup(() => {
-        element.classList.remove(c);
-        document.removeEventListener('keydown', listener);
-    });
-
-    menu.setRef(element);
+    return <div class={css.root} ref={menu.setRef} onKeyDown={listener}></div>;
 };
 
-export const Menu = { Root, Item, Separator } as const;
+export const Menu = { Mount, Root, Item, Separator } as const;
 
 export interface CommandPaletteApi {
     readonly open: Accessor<boolean>;