kaas

src/routes/(editor)/edit.tsx

@@ -1,6 +1,6 @@
 import { Menu } from "~/features/menu";
 import { Sidebar } from "~/components/sidebar";
-import { Component, createEffect, createResource, createSignal, For, onMount, Show } from "solid-js";
+import { Component, createEffect, createMemo, createResource, createSignal, For, onMount, Show } from "solid-js";
 import { Grid, load, useFiles } from "~/features/file";
 import { createCommand, Modifier, noop } from "~/features/command";
 import { GridContextType } from "~/features/file/grid";
@@ -108,6 +108,12 @@ export default function Edit(props) {
         }, { key: 'a', modifier: Modifier.Control }),
     } as const;
 
+    const mutated = createMemo(() => Object.values(ctx()?.rows ?? {}).filter(row => Object.values(row).some(lang => lang.original !== lang.value)));
+
+    createEffect(() => {
+        console.log('KAAS', mutated());
+    });
+
     return <div class={css.root}>
         <Menu.Root>
             <Menu.Item label="file">
@@ -131,7 +137,7 @@ export default function Edit(props) {
 
         <Sidebar as="aside">
             <Tree entries={tree().entries}>{
-                file => <span>{file().name}</span>
+                (file, icon) => <span>{icon} {file().name}</span>
             }</Tree>
         </Sidebar>
 

src/routes/(editor)/experimental.css

@@ -1,6 +1,6 @@
 section.index {
     display: grid;
-    grid: 100% / auto 1fr;
+    grid: 100% / auto minmax(0, 1fr);
     inline-size: 100%;
     block-size: 100%;
 
@@ -17,6 +17,11 @@ section.index {
     }
 
     & > section {
+        display: grid;
+        grid: 100% / 100%;
+        inline-size: 100%;
+        block-size: 100%;
+
         padding-inline: 1em;
     }
 }

src/routes/(editor)/experimental.tsx

@@ -1,11 +1,12 @@
-import { createEffect, createMemo, createResource, createSignal, For, lazy, onMount, Suspense } from "solid-js";
+import { Component, createEffect, createMemo, createResource, createSignal, For, lazy, onMount, Suspense } from "solid-js";
 import { useFiles } from "~/features/file";
 import { Menu } from "~/features/menu";
-import "./experimental.css";
 import { createCommand, Modifier } from "~/features/command";
 import { emptyFolder, FolderEntry, Tree, walk } from "~/components/filetree";
 import { createStore, produce } from "solid-js/store";
-import { Tab, Tabs, TabSimple, TabsSimple } from "~/components/tabs";
+import { Tab, Tabs } from "~/components/tabs";
+import "./experimental.css";
+import { selectable, SelectionProvider } from "~/features/selectable";
 
 interface ExperimentalState {
   files: File[];
@@ -21,7 +22,7 @@ export default function Experimental() {
   });
   const [showHiddenFiles, setShowHiddenFiles] = createSignal<boolean>(false);
   const filters = createMemo<RegExp[]>(() => showHiddenFiles() ? [/^node_modules$/] : [/^node_modules$/, /^\..+$/]);
-  const [root, { mutate, refetch }] = createResource(() => files.get('root'));
+  const [root, { mutate, refetch }] = createResource(() => files?.get('root'));
 
   createEffect(() => {
     setState('numberOfFiles', state.files.length);
@@ -84,12 +85,6 @@ export default function Experimental() {
     }, { key: 's', modifier: Modifier.Control | Modifier.Shift }),
   } as const;
 
-  const Content = lazy(async () => {
-    const text = Promise.resolve('this is text');
-
-    return { default: () => <>{text}</> };
-  });
-
   return (
     <>
       <Menu.Root>
@@ -107,23 +102,31 @@ export default function Experimental() {
       <section class="index">
         <aside>
           <label><input type="checkbox" on:input={() => setShowHiddenFiles(v => !v)} />Show hidden files</label>
-          <Tree entries={tree().entries}>{
-            file => <span on:dblclick={() => open(file().meta)}>{file().name}</span>
+          <Tree entries={tree().entries} open={open}>{
+            file => file().name
           }</Tree>
         </aside>
 
         <section>
-          <TabsSimple>
+          <Tabs>
             <For each={state.files}>{
-              file => <TabSimple label={file.name}>
-                <pre>
-                  <Suspense><Content /></Suspense>
-                </pre>
-              </TabSimple>
+              file => <Tab label={file.name}>
+                <Content file={file} />
+              </Tab>
             }</For>
-          </TabsSimple>
+          </Tabs>
         </section>
       </section>
     </>
   );
 }
+
+const Content: Component<{ file: File }> = (props) => {
+  const [content] = createResource(async () => {
+    return await props.file.text();
+  });
+
+  return <Suspense fallback={'loading'}>
+    <pre>{content()}</pre>
+  </Suspense>
+};