extracted selection logic to own feature and anhanched with range selection

app.config.ts

@@ -4,7 +4,25 @@ import { VitePWA } from 'vite-plugin-pwa'
 export default defineConfig({
     vite: {
         plugins: [
-            VitePWA({ registerType: 'autoUpdate' }),
+            VitePWA({
+                mode: 'development',
+                // srcDir: 'src',
+                // filename: 'claims-sw.ts',
+                strategies: 'injectManifest',
+                registerType: 'autoUpdate',
+                base: '/',
+                manifest: {
+                    name: 'Translation tool',
+                    short_name: 'T_tool',
+                    theme_color: '#f0f',
+                    icons: [],
+                },
+                devOptions: {
+                    enabled: true,
+                    type: 'module',
+                    navigateFallback: 'index.html',
+                },
+            }),
         ]
     }
 });

src/app.css

@@ -78,6 +78,7 @@ body {
     grid-auto-flow: column;
     justify-content: start;
     position: relative;
+    z-index: 10;
 
     gap: .5em;
     padding-inline-start: 1em;

src/components/filetree.tsx

@@ -1,7 +1,7 @@
 import { Accessor, Component, createContext, createSignal, For, JSX, Show, useContext } from "solid-js";
-import css from "./filetree.module.css";
 import { AiFillFile, AiFillFolder, AiFillFolderOpen } from "solid-icons/ai";
 import { SelectionProvider, selectable } from "~/features/selectable";
+import css from "./filetree.module.css";
 
 export interface FileEntry {
     name: string;
@@ -45,15 +45,15 @@ interface TreeContextType {
 
 const TreeContext = createContext<TreeContextType>();
 
-export const Tree: Component<{ entries: Entry[], children: (file: Accessor<FileEntry>) => JSX.Element, open: TreeContextType['open'] }> = (props) => {
+export const Tree: Component<{ entries: Entry[], children: (file: Accessor<FileEntry>) => JSX.Element, open?: TreeContextType['open'] }> = (props) => {
-    const [selection, setSelection] = createSignal();
+    const [selection, setSelection] = createSignal<object[]>([]);
 
     // createEffect(() => {
     //     console.log(selection());
     // });
 
     const context = {
-        open: props.open,
+        open: props.open ?? (() => { }),
         // open(file: File) {
         //     console.log(`open ${file.name}`)
         // },

src/components/sidebar.module.css

@@ -15,6 +15,10 @@
         overflow: auto clip;
     }
 
+    &.open > .content {
+        inline-size: max-content;
+    }
+
     &.closed > .content {
         inline-size: 0;
     }

src/components/sidebar.tsx

@@ -1,13 +1,15 @@
 import { TbLayoutSidebarLeftCollapse, TbLayoutSidebarLeftExpand } from "solid-icons/tb";
-import { createMemo, createSignal, ParentComponent, Show } from "solid-js";
+import { createMemo, createSignal, ParentComponent, Show, splitProps } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import css from "./sidebar.module.css";
 
-export const Sidebar: ParentComponent<{ as?: string, open?: boolean, name?: string }> = (props) => {
+export const Sidebar: ParentComponent<{ as?: string, open?: boolean, name?: string } & Record<string, any>> = (props) => {
-    const [open, setOpen] = createSignal(props.open ?? true);
+    const [local, forwarded] = splitProps(props, ['as', 'open', 'name', 'class']);
-    const name = createMemo(() => props.name ?? 'sidebar');
 
-    return <Dynamic component={props.as ?? 'div'} class={`${css.root} ${open() ? css.open : css.closed}`}>
+    const [open, setOpen] = createSignal(local.open ?? true);
+    const name = createMemo(() => local.name ?? 'sidebar');
+
+    return <Dynamic component={local.as ?? 'div'} class={`${css.root} ${open() ? css.open : css.closed} ${local.class}`} {...forwarded}>
         <button
             role="button"
             onclick={() => setOpen(o => !o)}

src/features/file/grid.module.css

@@ -38,19 +38,19 @@
         }
     }
 
-    & > :is(header, main, footer) {
+    & :is(.header, .main, .footer) {
         grid-column: span calc(2 + var(--columns));
         display: grid;
         grid-template-columns: subgrid;
     }
 
-    & > header {
+    & .header {
         position: sticky;
         inset-block-start: 0;
-        background-color: inherit;
+        background-color: var(--surface-1);
     }
 
-    & label {
+    & .row {
         --bg: var(--text);
         --alpha: 0;
         grid-column: span calc(2 + var(--columns));
@@ -72,7 +72,7 @@
                 border-block-start-color: transparent;
             }
 
-            &:has(+ label > .cell > :checked) {
+            &:has(+ .row > .cell > :checked) {
                 border-block-end-color: transparent;
             }
         }
@@ -102,7 +102,7 @@
 
         }
 
-        & > label > .cell > span {
+        & > .row > .cell > span {
             padding-inline-start: calc(var(--depth) * 1em);
         }
     }

src/features/file/grid.tsx

@@ -1,6 +1,9 @@
-import { Component, createContext, createEffect, createMemo, For, ParentComponent, Show, useContext } from "solid-js";
+import { Accessor, Component, createContext, createEffect, createMemo, createSignal, For, ParentComponent, Show, useContext } from "solid-js";
 import { createStore, produce } from "solid-js/store";
-import './grid.css';
+import { SelectionProvider, useSelection, selectable } from "../selectable";
+import css from './grid.module.css';
+
+selectable // prevents removal of import
 
 const debounce = <T extends (...args: any[]) => void>(callback: T, delay: number): T => {
     let handle: ReturnType<typeof setTimeout> | undefined;
@@ -17,66 +20,19 @@ const debounce = <T extends (...args: any[]) => void>(callback: T, delay: number
 interface Leaf extends Record<string, string> { }
 export interface Entry extends Record<string, Entry | Leaf> { }
 
-export interface SelectionContextType {
-    rowCount(): number;
-    selection(): string[];
-    isSelected(key: string): boolean,
-    selectAll(select: boolean): void;
-    select(key: string, select: boolean): void;
-}
 export interface GridContextType {
     rows: Record<string, { [lang: string]: { original: string, value: string } }>;
-    selection: SelectionContextType;
+    selection: Accessor<object[]>;
     mutate(prop: string, lang: string, value: string): void;
 }
 
-const SelectionContext = createContext<SelectionContextType>();
 const GridContext = createContext<GridContextType>();
 
 const isLeaf = (entry: Entry | Leaf): entry is Leaf => Object.values(entry).some(v => typeof v === 'string');
-const useSelection = () => useContext(SelectionContext)!;
 const useGrid = () => useContext(GridContext)!;
 
-const SelectionProvider: ParentComponent<{ rows: Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>, context?: (ctx: SelectionContextType) => any }> = (props) => {
-    const [state, setState] = createStore<{ selection: string[] }>({ selection: [] });
-
-    const rowKeys = createMemo(() => {
-        return Array.from(props.rows?.keys());
-    });
-
-    const context = {
-        rowCount() {
-            return rowKeys().length;
-        },
-        selection() {
-            return state.selection;
-        },
-        isSelected(key: string) {
-            return state.selection.includes(key);
-        },
-        selectAll(selected: boolean) {
-            setState('selection', selected ? rowKeys() : []);
-        },
-        select(key: string, select: true) {
-            setState('selection', selection => {
-                if (select) {
-                    return [...selection, key];
-                }
-
-                return selection.toSpliced(selection.indexOf(key), 1);
-            });
-        },
-    };
-
-    createEffect(() => {
-        props.context?.(context)
-    });
-
-    return <SelectionContext.Provider value={context}>
-        {props.children}
-    </SelectionContext.Provider>;
-};
 const GridProvider: ParentComponent<{ rows: Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>, context?: (ctx: GridContextType) => any }> = (props) => {
+    const [selection, setSelection] = createSignal<object[]>([]);
     const [state, setState] = createStore<{ rows: GridContextType['rows'], numberOfRows: number }>({
         rows: {},
         numberOfRows: 0,
@@ -90,13 +46,14 @@ const GridProvider: ParentComponent<{ rows: Map<string, { [lang: string]: { valu
         setState('rows', Object.fromEntries(rows));
     });
 
+
     createEffect(() => {
         setState('numberOfRows', Object.keys(state.rows).length);
     });
 
     const ctx: GridContextType = {
         rows: state.rows,
-        selection: undefined!,
+        selection,
 
         mutate(prop: string, lang: string, value: string) {
             setState('rows', produce(rows => {
@@ -116,13 +73,13 @@ const GridProvider: ParentComponent<{ rows: Map<string, { [lang: string]: { valu
     });
 
     return <GridContext.Provider value={ctx}>
-        <SelectionProvider rows={props.rows} context={(selction) => ctx.selection = selction}>
+        <SelectionProvider selection={setSelection} multiSelect>
             {props.children}
         </SelectionProvider>
     </GridContext.Provider>;
 };
 
-export const Grid: Component<{ columns: string[], rows: Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>, context?: (ctx: GridContextType) => any }> = (props) => {
+export const Grid: Component<{ class?: string, columns: string[], rows: Map<string, { [lang: string]: { value: string, handle: FileSystemFileHandle } }>, context?: (ctx: GridContextType) => any }> = (props) => {
     const columnCount = createMemo(() => props.columns.length - 1);
     const root = createMemo<Entry>(() => {
         return props.rows
@@ -149,11 +106,11 @@ export const Grid: Component<{ columns: string[], rows: Map<string, { [lang: str
             }, {});
     });
 
-    return <section class="table" style={{ '--columns': columnCount() }}>
+    return <section class={`${css.table} ${props.class}`} style={{ '--columns': columnCount() }}>
         <GridProvider rows={props.rows} context={props.context}>
             <Head headers={props.columns} />
 
-            <main>
+            <main class={css.main}>
                 <Row entry={root()} />
             </main>
         </GridProvider>
@@ -163,18 +120,18 @@ export const Grid: Component<{ columns: string[], rows: Map<string, { [lang: str
 const Head: Component<{ headers: string[] }> = (props) => {
     const context = useSelection();
 
-    return <header>
+    return <header class={css.header}>
-        <div class="cell">
+        <div class={css.cell}>
             <input
                 type="checkbox"
-                checked={context.selection().length > 0 && context.selection().length === context.rowCount()}
+                checked={context.selection().length > 0 && context.selection().length === context.length()}
-                indeterminate={context.selection().length !== 0 && context.selection().length !== context.rowCount()}
+                indeterminate={context.selection().length !== 0 && context.selection().length !== context.length()}
-                on:input={(e: InputEvent) => context.selectAll(e.target.checked)}
+                on:input={(e: InputEvent) => e.target.checked ? context.selectAll() : context.clear()}
             />
         </div>
 
         <For each={props.headers}>{
-            header => <span class="cell">{header}</span>
+            header => <span class={css.cell}>{header}</span>
         }</For>
     </header>;
 };
@@ -189,48 +146,24 @@ const Row: Component<{ entry: Entry, path?: string[] }> = (props) => {
             const k = path.join('.');
             const context = useSelection();
 
-            const resize = (element: HTMLElement) => {
+            const isSelected = context.isSelected(k);
-                element.style.blockSize = `1px`;
-                element.style.blockSize = `${11 + element.scrollHeight}px`;
-            };
-
-            const mutate = debounce((element: HTMLTextAreaElement) => {
-                const [prop, lang] = element.name.split(':');
-
-                grid.mutate(prop, lang, element.value.trim())
-            }, 300);
-
-            const onKeyUp = (e: KeyboardEvent) => {
-                const element = e.target as HTMLTextAreaElement;
-
-                resize(element);
-                mutate(element);
-            };
 
             return <Show when={isLeaf(value)} fallback={<Group key={key} entry={value as Entry} path={path} />}>
-                <label for={k}>
+                <div class={css.row} use:selectable={{ value, key: k }}>
-                    <div class="cell">
+                    <div class={css.cell}>
-                        <input type="checkbox" id={k} checked={context.isSelected(k)} on:input={(e) => context.select(k, e.target.checked)} />
+                        <input type="checkbox" checked={isSelected()} oninput={() => context.select([k], { append: true })} />
                     </div>
 
-                    <div class="cell">
+                    <div class={css.cell}>
                         <span style={{ '--depth': path.length - 1 }}>{key}</span>
                     </div>
 
                     <For each={values}>{
-                        ([lang, value]) => <div class="cell">
+                        ([lang, value]) => <div class={css.cell}>
-                            <textarea
+                            <TextArea key={k} value={value} lang={lang} oninput={(e) => grid.mutate(k, lang, e.data ?? '')} />
-                                value={value}
-                                lang={lang}
-                                placeholder={lang}
-                                name={`${k}:${lang}`}
-                                spellcheck
-                                wrap="soft"
-                                on:keyup={onKeyUp}
-                            />
                         </div>
                     }</For>
-                </label>
+                </div>
             </Show>;
         }
     }</For>
@@ -243,3 +176,33 @@ const Group: Component<{ key: string, entry: Entry, path: string[] }> = (props)
         <Row entry={props.entry} path={props.path} />
     </details>;
 };
+
+const TextArea: Component<{ key: string, value: string, lang: string, oninput?: (event: InputEvent) => any }> = (props) => {
+    const resize = (element: HTMLElement) => {
+        element.style.blockSize = `1px`;
+        element.style.blockSize = `${11 + element.scrollHeight}px`;
+    };
+
+    const mutate = debounce((element: HTMLTextAreaElement) => {
+        props.oninput?.(new InputEvent('input', {
+            data: element.value.trim(),
+        }))
+    }, 300);
+
+    const onKeyUp = (e: KeyboardEvent) => {
+        const element = e.target as HTMLTextAreaElement;
+
+        resize(element);
+        mutate(element);
+    };
+
+    return <textarea
+        value={props.value}
+        lang={props.lang}
+        placeholder={props.lang}
+        name={`${props.key}:${props.lang}`}
+        spellcheck
+        wrap="soft"
+        onkeyup={onKeyUp}
+    />
+};

src/features/selectable/index.tsx

@@ -1,27 +1,41 @@
-import { Accessor, children, createContext, createEffect, createMemo, createRenderEffect, createSignal, createUniqueId, onCleanup, onMount, ParentComponent, useContext } from "solid-js";
+import { Accessor, children, createContext, createEffect, createMemo, createRenderEffect, createSignal, createUniqueId, onCleanup, onMount, ParentComponent, Setter, Signal, useContext } from "solid-js";
-import { createStore, produce } from "solid-js/store";
+import { createStore } from "solid-js/store";
 import { isServer } from "solid-js/web";
 import css from "./index.module.css";
 
-export interface SelectionContextType {
-    selection(): object[];
-    select(selection: string[], options?: Partial<{ append: boolean }>): void;
-    selectAll(): void;
-    clear(): void;
-    isSelected(key: string): Accessor<boolean>;
-    add(key: string, value: object, element: HTMLElement): void;
-}
-export type SelectionHandler = (selection: object[]) => any;
-
 enum Modifier {
     None = 0,
     Shift = 1 << 0,
     Control = 1 << 1,
 }
 
-const SelectionContext = createContext<SelectionContextType>();
+enum SelectionMode {
+    Normal,
+    Replace,
+    Append,
+    Toggle,
+}
 
-const useSelection = () => {
+export interface SelectionContextType {
+    readonly selection: Accessor<object[]>;
+    readonly length: Accessor<number>;
+    select(selection: string[], options?: Partial<{ mode: SelectionMode }>): void;
+    selectAll(): void;
+    clear(): void;
+    isSelected(key: string): Accessor<boolean>;
+}
+interface InternalSelectionContextType {
+    readonly latest: Signal<HTMLElement | undefined>,
+    readonly modifier: Signal<Modifier>,
+    readonly selectables: Signal<HTMLElement[]>,
+    add(key: string, value: object, element: HTMLElement): void;
+}
+export type SelectionHandler = (selection: object[]) => any;
+
+const SelectionContext = createContext<SelectionContextType>();
+const InternalSelectionContext = createContext<InternalSelectionContextType>();
+
+export const useSelection = () => {
     const context = useContext(SelectionContext);
 
     if (context === undefined) {
@@ -30,24 +44,45 @@ const useSelection = () => {
 
     return context;
 };
+const useInternalSelection = () => useContext(InternalSelectionContext)!;
 
 interface State {
-    selection: string[],
+    selection: string[];
-    data: { key: string, value: Accessor<any>, element: HTMLElement }[]
+    data: { key: string, value: Accessor<any>, element: WeakRef<HTMLElement> }[];
 }
 
-export const SelectionProvider: ParentComponent<{ selection?: SelectionHandler }> = (props) => {
+export const SelectionProvider: ParentComponent<{ selection?: SelectionHandler, multiSelect?: true }> = (props) => {
     const [state, setState] = createStore<State>({ selection: [], data: [] });
     const selection = createMemo(() => state.data.filter(({ key }) => state.selection.includes(key)));
+    const length = createMemo(() => state.data.length);
 
     createEffect(() => {
         props.selection?.(selection().map(({ value }) => value()));
     });
 
-    const context = {
+    const context: SelectionContextType = {
         selection,
-        select(selection: string[]) {
+        length,
-            setState('selection', selection);
+        select(selection, { mode = SelectionMode.Normal } = {}) {
+            if (props.multiSelect === true && mode === SelectionMode.Normal) {
+                mode = SelectionMode.Append;
+            }
+
+            setState('selection', existing => {
+                switch (mode) {
+                    case SelectionMode.Toggle: {
+                        return [...existing.filter(i => !selection.includes(i)), ...selection.filter(i => !existing.includes(i))];
+                    }
+
+                    case SelectionMode.Append: {
+                        return existing.concat(selection);
+                    }
+
+                    default: {
+                        return selection;
+                    }
+                }
+            });
         },
         selectAll() {
             setState('selection', state.data.map(({ key }) => key));
@@ -58,112 +93,61 @@ export const SelectionProvider: ParentComponent<{ selection?: SelectionHandler }
         isSelected(key: string) {
             return createMemo(() => state.selection.includes(key));
         },
+    };
+
+    const internal: InternalSelectionContextType = {
+        modifier: createSignal<Modifier>(Modifier.None),
+        latest: createSignal<HTMLElement>(),
+        selectables: createSignal<HTMLElement[]>([]),
         add(key: string, value: Accessor<any>, element: HTMLElement) {
-            setState('data', data => [...data, { key, value, element }]);
+            setState('data', data => [...data, { key, value, element: new WeakRef(element) }]);
-        }
+        },
     };
 
     return <SelectionContext.Provider value={context}>
+        <InternalSelectionContext.Provider value={internal}>
             <Root>{props.children}</Root>
+        </InternalSelectionContext.Provider>
     </SelectionContext.Provider>;
 };
 
 const Root: ParentComponent = (props) => {
-    const context = useSelection();
+    const internal = useInternalSelection();
     const c = children(() => props.children);
 
-    const [modifier, setModifier] = createSignal<Modifier>(Modifier.None);
-    const [latest, setLatest] = createSignal<HTMLElement>();
     const [root, setRoot] = createSignal<HTMLElement>();
-    const selectables = createMemo(() => {
+    const [, setSelectables] = internal.selectables;
+    const [, setModifier] = internal.modifier;
+
+    createEffect(() => {
         const r = root();
 
-        if (!r) {
+        if (!isServer && r) {
-            return [];
+            const findSelectables = () => {
-        }
+                setSelectables(Array.from((function* () {
-
-        return Array.from((function* () {
                     const iterator = document.createTreeWalker(r, NodeFilter.SHOW_ELEMENT, {
                         acceptNode: (node: HTMLElement) => node.dataset.selectionKey ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,
                     });
 
                     while (iterator.nextNode()) {
-                yield iterator.currentNode;
+                        yield iterator.currentNode as HTMLElement;
-            }
-        })());
-    });
-
-    createRenderEffect(() => {
-        const children = c.toArray();
-        const r = root();
-
-        if (!r) {
-            return;
-        }
-
-        setTimeout(() => {
-            console.log(r, children, Array.from((function* () {
-                const iterator = document.createTreeWalker(r, NodeFilter.SHOW_ELEMENT, {
-                    acceptNode: (node: HTMLElement) => node.dataset.selectionKey ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP,
-                });
-
-                while (iterator.nextNode()) {
-                    console.log(iterator.currentNode);
-
-                    yield iterator.currentNode;
                     }
                 })()));
-        }, 10);
+            };
+
+            const observer = new MutationObserver(entries => {
+                const shouldRecalculate = entries.some(r => r.addedNodes.values().some(node => node instanceof HTMLElement && node.dataset.selectionKey));
+
+                if (shouldRecalculate) {
+                    findSelectables();
+                }
             });
 
-    const createRange = (a?: HTMLElement, b?: HTMLElement): string[] => {
+            findSelectables();
-        if (!a && !b) {
+
-            return [];
+            observer.observe(r, { childList: true, attributes: true, attributeFilter: ['data-selection-key'], subtree: true });
         }
-
+    });
-        if (!a) {
-            return [b!.dataset.selecatableKey!];
-        }
-
-        if (!b) {
-            return [a!.dataset.selecatableKey!];
-        }
-
-        if (a === b) {
-            return [a!.dataset.selecatableKey!];
-        }
-
-        const nodes = selectables();
-        const aIndex = nodes.indexOf(a);
-        const bIndex = nodes.indexOf(b);
-        const selection = nodes.slice(Math.min(aIndex, bIndex), Math.max(aIndex, bIndex) + 1);
-
-        console.log(aIndex, bIndex, nodes,);
-
-        return selection.map(n => n.dataset.selectionKey);
-    };
-
-    const onPointerDown = (e: PointerEvent) => {
-        const key = e.target?.dataset.selectionKey;
-
-        if (!key) {
-            return;
-        }
-
-        const shift = Boolean(modifier() & Modifier.Shift);
-        const append = Boolean(modifier() & Modifier.Control);
-
-        // Logic table
-        // shift | control | behavior                                          |
-        // ------|---------|---------------------------------------------------|
-        // true  | true    | create range from latest to current and append    |
-        // true  | false   | create range from latest to current and overwrite |
-        // false | true    | append                                            |
-        // false | false   | overwrite / set                                   |
-
-        context.select(shift ? createRange(latest(), e.target as HTMLElement) : [key], { append });
-        setLatest(e.target);
-    };
 
     const onKeyboardEvent = (e: KeyboardEvent) => {
         if (e.repeat || ['Control', 'Shift'].includes(e.key) === false) {
@@ -190,7 +174,6 @@ const Root: ParentComponent = (props) => {
     };
 
     onMount(() => {
-        document.addEventListener('pointerdown', onPointerDown);
         document.addEventListener('keydown', onKeyboardEvent);
         document.addEventListener('keyup', onKeyboardEvent);
     });
@@ -200,29 +183,87 @@ const Root: ParentComponent = (props) => {
             return;
         }
 
-        document.removeEventListener('pointerdown', onPointerDown);
         document.removeEventListener('keydown', onKeyboardEvent);
         document.removeEventListener('keyup', onKeyboardEvent);
     });
 
-    createEffect(() => {
-        console.log(selectables());
-    });
-
     return <div ref={setRoot} style={{ 'display': 'contents' }}>{c()}</div>;
 };
 
-export const selectable = (element: HTMLElement, value: Accessor<any>) => {
+export const selectable = (element: HTMLElement, options: Accessor<{ value: object, key?: string }>) => {
     const context = useSelection();
-    const key = createUniqueId();
+    const internal = useInternalSelection();
+
+    const key = options().key ?? createUniqueId();
+    const value = createMemo(() => options().value);
     const isSelected = context.isSelected(key);
 
-    context.add(key, value, element);
+    internal.add(key, value, element);
+
+    const createRange = (a?: HTMLElement, b?: HTMLElement): string[] => {
+        if (!a && !b) {
+            return [];
+        }
+
+        if (!a) {
+            return [b!.dataset.selecatableKey!];
+        }
+
+        if (!b) {
+            return [a!.dataset.selecatableKey!];
+        }
+
+        if (a === b) {
+            return [a!.dataset.selecatableKey!];
+        }
+
+        const nodes = internal.selectables[0]();
+        const aIndex = nodes.indexOf(a);
+        const bIndex = nodes.indexOf(b);
+        const selection = nodes.slice(Math.min(aIndex, bIndex), Math.max(aIndex, bIndex) + 1);
+
+        return selection.map(n => n.dataset.selectionKey!);
+    };
+
 
     createRenderEffect(() => {
         element.dataset.selected = isSelected() ? 'true' : undefined;
     });
 
+    const onPointerDown = (e: PointerEvent) => {
+        e.preventDefault();
+
+        const [latest, setLatest] = internal.latest
+        const [modifier] = internal.modifier
+
+        const withRange = Boolean(modifier() & Modifier.Shift);
+        const append = Boolean(modifier() & Modifier.Control);
+
+        const mode = (() => {
+            if (append) return SelectionMode.Append;
+            if (!withRange && isSelected()) return SelectionMode.Toggle;
+            return SelectionMode.Normal;
+        })();
+
+        context.select(withRange ? createRange(latest(), element) : [key], { mode });
+
+        if (!withRange) {
+            setLatest(element);
+        }
+    };
+
+    onMount(() => {
+        element.addEventListener('pointerdown', onPointerDown);
+    });
+
+    onCleanup(() => {
+        if (isServer) {
+            return;
+        }
+
+        element.removeEventListener('pointerdown', onPointerDown);
+    });
+
     element.classList.add(css.selectable);
     element.dataset.selectionKey = key;
 };
@@ -230,7 +271,7 @@ export const selectable = (element: HTMLElement, value: Accessor<any>) => {
 declare module "solid-js" {
     namespace JSX {
         interface Directives {
-            selectable: any;
+            selectable: { value: object, key?: string };
         }
     }
 }

src/global.d.ts

@@ -1 +1,2 @@
-/// <reference types="@solidjs/start/env" />
+
+

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>
     </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>
   );
 }

tsconfig.json

@@ -10,10 +10,17 @@
     "allowJs": true,
     "strict": true,
     "noEmit": true,
-    "types": ["vinxi/types/client", "@types/wicg-file-system-access"],
+    "types": [
+      "@solidjs/start/env",
+      "vinxi/types/client",
+      "@types/wicg-file-system-access",
+      "vite-plugin-pwa/solid"
+    ],
     "isolatedModules": true,
     "paths": {
-      "~/*": ["./src/*"]
+      "~/*": [
+        "./src/*"
+      ]
     }
   }
 }