sprucing the app up a little

src/routes/(editor).tsx

@@ -1,23 +1,26 @@
-import { Link, Meta, Title } from "@solidjs/meta";
-import { Component, createMemo, createSignal, ErrorBoundary, ParentProps, Show } from "solid-js";
-import { BsTranslate } from "solid-icons/bs";
+import { Link, Meta, Style, Title } from "@solidjs/meta";
+import { Component, createEffect, createMemo, createSignal, ErrorBoundary, ParentProps, Show } from "solid-js";
 import { FilesProvider } from "~/features/file";
 import { CommandPalette, CommandPaletteApi, Menu, MenuProvider } from "~/features/menu";
-import { A, createAsync, useBeforeLeave } from "@solidjs/router";
+import { A, RouteDefinition, useBeforeLeave } from "@solidjs/router";
 import { createCommand, Modifier } from "~/features/command";
-import { ColorScheme, ColorSchemePicker, getColorScheme } from "~/components/colorschemepicker";
+import { ColorScheme, ColorSchemePicker, getState, useTheme } from "~/components/colorschemepicker";
 import css from "./editor.module.css";
 
+export const route: RouteDefinition = {
+    preload: () => getState(),
+};
+
 export default function Editor(props: ParentProps) {
-    const storedColorScheme = createAsync<keyof typeof ColorScheme>(() => getColorScheme(), { initialValue: 'Auto' });
+    const theme = useTheme();
 
     const [commandPalette, setCommandPalette] = createSignal<CommandPaletteApi>();
-    const colorScheme = createMemo(() => ColorScheme[storedColorScheme()]);
+
     const color = createMemo(() => ({
         [ColorScheme.Auto]: undefined,
         [ColorScheme.Light]: '#eee',
         [ColorScheme.Dark]: '#333',
-    }[ColorScheme[storedColorScheme()]]));
+    }[theme.colorScheme]));
 
     const commands = [
         createCommand('open command palette', () => {
@@ -32,7 +35,7 @@ export default function Editor(props: ParentProps) {
     }
 
     useBeforeLeave((e) => {
-        e.preventDefault()
+        e.preventDefault();
 
         transition(() => { e.retry(true) })
     });
@@ -40,14 +43,18 @@ export default function Editor(props: ParentProps) {
     return <MenuProvider commands={commands}>
         <Title>Calque</Title>
 
-        <Meta id="theme-scheme" name="color-scheme" content={colorScheme()} />
-        <Meta id="theme-color" name="theme-color" content={color()} />
-
-        <Show when={color() === undefined}>
+        <Meta id="theme-scheme" name="color-scheme" content={theme.colorScheme} />
+        <Show when={color() === undefined} fallback={<Meta id="theme-color" name="theme-color" content={color()} />}>
             <Meta id="theme-auto-light" name="theme-color" media="(prefers-color-scheme: light)" content="#eee" />
             <Meta id="theme-auto-dark" name="theme-color" media="(prefers-color-scheme: dark)" content="#333" />
         </Show>
 
+        <Style>{`
+            :root {
+                --hue: ${theme.hue}deg !important;
+            }
+        `}</Style>
+
         <Link rel="icon" href="/images/favicon.dark.svg" media="screen and (prefers-color-scheme: dark)" />
         <Link rel="icon" href="/images/favicon.light.svg" media="screen and (prefers-color-scheme: light)" />
         <Link rel="manifest" href="/manifest.json" />
@@ -66,6 +73,7 @@ export default function Editor(props: ParentProps) {
 
                 <section class={css.right}>
                     <ColorSchemePicker />
+
                 </section>
             </nav>
 

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

@@ -27,9 +27,25 @@
 
 .blank {
     display: grid;
-    grid: 100% / 100%;
+    place-content: center;
+    place-items: center;
+    grid-auto-flow: column;
+    gap: var(--padding-l);
     inline-size: 100%;
     block-size: 100%;
 
-    place-items: center;
+    & > svg {
+        padding-inline-end: 3em;
+        margin-inline-end: 3em;
+        border-inline-end: 2px solid var(--surface-5);
+    }
+
+    & > button {
+        background-color: var(--surface-4);
+        color: var(--text-1);
+        padding: var(--padding-l) var(--padding-xl);
+        border: none;
+        border-radius: var(--radii-m);
+        cursor: pointer;
+    }
 }

src/routes/(editor)/edit.tsx

@@ -7,9 +7,10 @@ import { Grid, load, useFiles } from "~/features/file";
 import { Command, CommandType, Context, createCommand, Modifier, noop, useCommands } from "~/features/command";
 import { GridApi } from "~/features/file/grid";
 import { Tab, Tabs } from "~/components/tabs";
-import css from "./edit.module.css";
 import { isServer } from "solid-js/web";
 import { Prompt, PromptApi } from "~/components/prompt";
+import EditBlankImage from '~/assets/edit-blank.svg'
+import css from "./edit.module.css";
 
 const isInstalledPWA = !isServer && window.matchMedia('(display-mode: standalone)').matches;
 
@@ -269,6 +270,10 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
                 <Menu.Item command={commands.open} />
 
                 <Menu.Item command={commands.save} />
+
+                <Menu.Separator />
+
+                <Menu.Item command={commands.close} />
             </Menu.Item>
 
             <Menu.Item label="edit">
@@ -385,6 +390,8 @@ const Content: Component<{ directory: FileSystemDirectoryHandle, api?: Setter<Gr
 
 const Blank: Component<{ open: CommandType }> = (props) => {
     return <div class={css.blank}>
+        <EditBlankImage />
+
         <button onpointerdown={() => props.open()}>open a folder</button>
     </div>
 };

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

@@ -3,6 +3,11 @@
     place-content: center;
     gap: var(--padding-m);
 
+    & > :is(.primary, .secondary) {
+        display: grid;
+        grid: 3em / repeat(5, 3em);
+    }
+
     ul {
         display: flex;
         flex-flow: column;

src/routes/(editor)/index.tsx

@@ -1,46 +1,13 @@
-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 { A } from "@solidjs/router";
+import LandingImage from '../../assets/landing.svg'
 import css from "./index.module.css";
 
-interface FileEntry {
-  name: string;
-  kind: 'file';
-  meta: File;
-}
-
-interface FolderEntry {
-  name: string;
-  kind: 'folder';
-  entries: Entry[];
-}
-
-type Entry = FileEntry | FolderEntry;
-
-async function* walk(directory: FileSystemDirectoryHandle, filters: RegExp[] = [], depth = 0): AsyncGenerator<Entry, void, never> {
-  if (depth === 10) {
-    return;
-  }
-
-  for await (const handle of directory.values()) {
-
-    if (filters.some(f => f.test(handle.name))) {
-      continue;
-    }
-
-    if (handle.kind === 'file') {
-      yield { name: handle.name, kind: 'file', meta: await handle.getFile() };
-    }
-    else {
-      yield { name: handle.name, kind: 'folder', entries: await Array.fromAsync(walk(handle, filters, depth + 1)) };
-    }
-  }
-}
 
 export default function Index() {
   return (
     <main class={css.main}>
+      <LandingImage />
+
       <h1>Hi, welcome!</h1>
       <b>Lets get started</b>
 

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

@@ -0,0 +1,66 @@
+.main {
+    display: grid;
+    place-content: center;
+    gap: var(--padding-m);
+
+    & > svg {
+        inline-size: 100%;
+    }
+
+    & > :is(.primary, .secondary) {
+        display: grid;
+        grid: 3em / repeat(5, 3em);
+    }
+
+    & > .primary {
+        & > :nth-child(1) {
+            background-color: var(--primary-100);
+        }
+
+        & > :nth-child(2) {
+            background-color: var(--primary-300);
+        }
+
+        & > :nth-child(3) {
+            background-color: var(--primary-500);
+        }
+
+        & > :nth-child(4) {
+            background-color: var(--primary-700);
+        }
+
+        & > :nth-child(5) {
+            background-color: var(--primary-900);
+        }
+    }
+
+    & > .secondary {
+        & > :nth-child(1) {
+            background-color: var(--secondary-100);
+        }
+
+        & > :nth-child(2) {
+            background-color: var(--secondary-300);
+        }
+
+        & > :nth-child(3) {
+            background-color: var(--secondary-500);
+        }
+
+        & > :nth-child(4) {
+            background-color: var(--secondary-700);
+        }
+
+        & > :nth-child(5) {
+            background-color: var(--secondary-900);
+        }
+    }
+
+    ul {
+        display: flex;
+        flex-flow: column;
+        gap: var(--padding-s);
+        padding-inline-start: var(--padding-l);
+        margin: 0;
+    }
+}

src/routes/(editor)/test.tsx

@@ -0,0 +1,38 @@
+import { A } from "@solidjs/router";
+import LandingImage from '../../assets/landing.svg'
+import css from "./test.module.css";
+
+
+export default function Index() {
+  return (
+    <main class={css.main}>
+      <LandingImage />
+
+      <h1>Hi, welcome!</h1>
+      <b>Lets get started</b>
+
+      <div class={css.primary}>
+        <span />
+        <span />
+        <span />
+        <span />
+        <span />
+      </div>
+
+      <div class={css.secondary}>
+        <span />
+        <span />
+        <span />
+        <span />
+        <span />
+      </div>
+
+      <ul>
+        <li><A href="/edit">Start editing</A></li>
+        {/* <li><A href="/experimental">Try new features</A></li> */}
+        <li><A href="/instructions">Read the instructions</A></li>
+        <li><A href="/about">About this app</A></li>
+      </ul>
+    </main>
+  );
+}

src/routes/editor.module.css

@@ -50,6 +50,7 @@
 
         & .right {
             display: grid;
+            grid-auto-flow: column;
             align-content: center;
         }
     }