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()}