sprucing the app up a little

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