extracted selection logic to own feature and anhanched with range selection

src/routes/(editor).tsx

@@ -1,5 +1,5 @@
 import { Title } from "@solidjs/meta";
-import { Show } from "solid-js";
+import { ParentProps, Show } from "solid-js";
 import { BsTranslate } from "solid-icons/bs";
 import { FilesProvider } from "~/features/file";
 import { MenuProvider, asMenuRoot } from "~/features/menu";
@@ -8,7 +8,7 @@ import { A } from "@solidjs/router";
 
 asMenuRoot // prevents removal of import
 
-export default function Editor(props) {
+export default function Editor(props: ParentProps) {
     const supported = isServer || typeof window.showDirectoryPicker === 'function';
 
     return <MenuProvider>
@@ -18,12 +18,10 @@ export default function Editor(props) {
             <A class="logo" href="/"><BsTranslate /></A>
         </nav>
 
-        <main style="padding: 1em; block-size: 100%; overflow: clip;">
-            <Show when={supported} fallback={<span>too bad, so sad. Your browser does not support the File Access API</span>}>
-                <FilesProvider>
-                    {props.children}
-                </FilesProvider>
-            </Show>
-        </main>
+        <Show when={supported} fallback={<span>too bad, so sad. Your browser does not support the File Access API</span>}>
+            <FilesProvider>
+                {props.children}
+            </FilesProvider>
+        </Show>
     </MenuProvider>
 }

src/routes/(editor)/edit.module.css

@@ -1,9 +1,15 @@
 .root {
     display: grid;
-    grid: 100% / auto 1fr;
+    grid: 100% / auto minmax(0, 1fr);
+    inline-size: 100%;
+    block-size: 100%;
+    padding-block: var(--padding-l);
 
-    & > aside {
+    & .sidebar {
         z-index: 1;
+        margin-block: calc(-1 * var(--padding-l));
+        padding: var(--padding-l);
+        background-color: var(--surface-2);
 
         & > ul {
             padding: 0;

src/routes/(editor)/edit.tsx

@@ -1,6 +1,6 @@
 import { Menu } from "~/features/menu";
 import { Sidebar } from "~/components/sidebar";
-import { Component, createEffect, createMemo, createResource, createSignal, For, onMount, Show } from "solid-js";
+import { Component, createEffect, createMemo, createResource, createSignal, For, onMount, ParentProps, Show } from "solid-js";
 import { Grid, load, useFiles } from "~/features/file";
 import { createCommand, Modifier, noop } from "~/features/command";
 import { GridContextType } from "~/features/file/grid";
@@ -29,9 +29,9 @@ async function* walk(directory: FileSystemDirectoryHandle, path: string[] = []):
     }
 };
 
-export default function Edit(props) {
+export default function Edit(props: ParentProps) {
     const filesContext = useFiles();
-    const [root, { mutate, refetch }] = createResource(() => filesContext.get('root'));
+    const [root, { mutate, refetch }] = createResource(() => filesContext?.get('root'));
     const [tree, setFiles] = createSignal<FolderEntry>(emptyFolder);
     const [columns, setColumns] = createSignal(['these', 'are', 'some', 'columns']);
     const [rows, setRows] = createSignal<Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>>(new Map);
@@ -135,9 +135,9 @@ export default function Edit(props) {
             <Menu.Item label="view" command={noop} />
         </Menu.Root>
 
-        <Sidebar as="aside">
+        <Sidebar as="aside" class={css.sidebar}>
             <Tree entries={tree().entries}>{
-                (file, icon) => <span>{icon} {file().name}</span>
+                file => file().name
             }</Tree>
         </Sidebar>
 

src/routes/(editor)/index.module.css

@@ -1,4 +1,4 @@
-body > main {
+.main {
     display: grid;
     place-content: center;
 }

src/routes/(editor)/index.tsx

@@ -1,8 +1,8 @@
 import { Component, createEffect, createMemo, createResource, createSignal, For, onMount, Show } from "solid-js";
 import { useFiles } from "~/features/file";
 import { AiFillFile, AiFillFolder, AiFillFolderOpen } from "solid-icons/ai";
-import "./index.css";
 import { A } from "@solidjs/router";
+import css from "./index.module.css";
 
 interface FileEntry {
   name: string;
@@ -40,7 +40,7 @@ async function* walk(directory: FileSystemDirectoryHandle, filters: RegExp[] = [
 
 export default function Index() {
   return (
-    <>
+    <main class={css.main}>
       <h1>Hi, welcome!</h1>
       <b>Lets get started</b>
 
@@ -48,6 +48,6 @@ export default function Index() {
         <li><A href="/edit">Start editing</A></li>
         <li><A href="/experimental">Try new features</A></li>
       </ul>
-    </>
+    </main>
   );
 }