Merge branch 'main' into feature/add-language

src/features/file/index.tsx

@@ -28,6 +28,7 @@ interface InternalFilesContextType {
 interface FilesContextType {
     readonly files: Accessor<FileEntity[]>,
     readonly root: Accessor<FileSystemDirectoryHandle | undefined>,
+    readonly loading: Accessor<boolean>,
 
     open(directory: FileSystemDirectoryHandle): void;
     get(key: string): Accessor<FileSystemDirectoryHandle | undefined>
@@ -109,7 +110,7 @@ const serverContext = (): InternalFilesContextType => ({
 export const FilesProvider: ParentComponent = (props) => {
     const internal = isServer ? serverContext() : clientContext();
 
-    const [state, setState] = createStore<{ openedFiles: FileEntity[], root: FileSystemDirectoryHandle | undefined }>({ openedFiles: [], root: undefined });
+    const [state, setState] = createStore<{ loading: boolean, openedFiles: FileEntity[], root: FileSystemDirectoryHandle | undefined }>({ loading: true, openedFiles: [], root: undefined });
 
     internal.onChange(async () => {
         setState('openedFiles', await internal.entries());
@@ -117,19 +118,19 @@ export const FilesProvider: ParentComponent = (props) => {
 
     onMount(() => {
         (async () => {
-            const [root, files] = await Promise.all([
+            const [root, openedFiles] = await Promise.all([
                 internal.get(ROOT),
                 internal.entries(),
             ]);
 
-            setState('root', root);
+            setState(prev => ({ ...prev, loading: false, root, openedFiles }));
-            setState('openedFiles', files);
         })();
     });
 
     const context: FilesContextType = {
         files: createMemo(() => state.openedFiles),
         root: createMemo(() => state.root),
+        loading: createMemo(() => state.loading),
 
         async open(directory: FileSystemDirectoryHandle) {
             await internal.remove(...(await internal.keys()));

src/routes/(editor).tsx

@@ -23,11 +23,8 @@ export default function Editor(props: ParentProps) {
     const themeMenuId = createUniqueId();
 
     const [commandPalette, setCommandPalette] = createSignal<CommandPaletteApi>();
-    const lightness = createMemo(() => {
+    const colorScheme = createMemo(() => (theme.colorScheme === ColorScheme.Auto ? event?.request.headers.get('Sec-CH-Prefers-Color-Scheme') : theme.colorScheme) ?? 'light dark');
-        const scheme = theme.colorScheme === ColorScheme.Auto ? event?.request.headers.get('Sec-CH-Prefers-Color-Scheme') : theme.colorScheme;
+    const lightness = createMemo(() => colorScheme() === ColorScheme.Light ? .9 : .2);
-
-        return scheme === ColorScheme.Light ? .9 : .2;
-    });
 
     const commands = [
         createCommand('open command palette', () => {
@@ -53,12 +50,12 @@ export default function Editor(props: ParentProps) {
         <Title>Calque</Title>
         <Meta name="description" content="Simple tool for managing translation files" />
 
-        <Meta name="color-scheme" content={theme.colorScheme} />
+        <Meta name="color-scheme" content={colorScheme()} />
-        <Meta name="theme-color" content={`oklch(${lightness()} .02 ${theme.hue})`} />
+        <Meta name="theme-color" content={`oklch(${lightness()} .02 ${theme.hue ?? 0})`} />
 
         <style>{`
             :root {
-                --hue: ${theme.hue}deg !important;
+                --hue: ${theme.hue ?? 0}deg !important;
             }
         `}</style>
 
@@ -68,7 +65,7 @@ export default function Editor(props: ParentProps) {
 
         <main class={css.layout} inert={commandPalette()?.open()}>
             <nav class={css.menu}>
-                <A class={css.logo} href="/">
+                <A class={css.logo} href="/welcome">
                     <picture>
                         <source srcset="/images/favicon.dark.svg" media="screen and (prefers-color-scheme: dark)" />
                         <source srcset="/images/favicon.light.svg" media="screen and (prefers-color-scheme: light)" />

src/routes/(editor)/index.tsx

@@ -1,22 +1,23 @@
-import { A } from "@solidjs/router";
+import { useNavigate } from "@solidjs/router";
-import LandingImage from '../../assets/landing.svg'
+import { createEffect } from "solid-js";
-import css from "./index.module.css";
+import { useFiles } from "~/features/file";
-
 
 export default function Index() {
-  return (
+  const navigate = useNavigate();
-    <main class={css.main}>
+  const files = useFiles();
-      <LandingImage />
 
-      <h1>Hi, welcome!</h1>
+  createEffect(() => {
-      <b>Lets get started</b>
+    const loading = files.loading();
+    const root = files.root();
 
-      <ul>
+    if (loading) {
-        <li><A href="/edit">Start editing</A></li>
+      return;
-        {/* <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>
+    navigate(root !== undefined ? '/edit' : '/welcome');
-      </ul>
+  });
-    </main>
+
-  );
+  return <section style="display: grid; place-content: center;">
+    <span>Loading, one moment please</span>
+  </section>;
 }

src/routes/(editor)/welcome.tsx

@@ -0,0 +1,19 @@
+import { A } from "@solidjs/router";
+import LandingImage from '../../assets/landing.svg'
+import css from "./welcome.module.css";
+
+export default function Welcome() {
+    return <main class={css.main}>
+        <LandingImage />
+
+        <h1>Hi, welcome!</h1>
+        <b>Lets get started</b>
+
+        <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>;
+}