[ffigenpad] add basic file tree

pkgs/ffigenpad/web/src/App.tsx

@@ -1,12 +1,13 @@
 import { useStore } from "@nanostores/solid";
-import { TbInfoCircleFilled } from "solid-icons/tb";
+import { TbClipboardCopy, TbInfoCircleFilled } from "solid-icons/tb";
 import { createResource, createSignal, Show } from "solid-js";
 import { Center, Flex, HStack, Stack } from "styled-system/jsx";
 import * as dart from "../../bin/ffigenpad.mjs";
 import dartWasm from "../../bin/ffigenpad.wasm?url";
 import createLibClang from "../../third_party/libclang/bin/libclang.mjs";
 import { BindingsViewer } from "./components/bindings-viewer";
 import { ConfigEditor } from "./components/config-editor";
+import { FileExplorer } from "./components/file-explorer";
 import { HeaderEditor } from "./components/header-editor";
 import { LogsViewer } from "./components/logs-viewer";
 import { Navbar } from "./components/navbar";
@@ -20,13 +21,13 @@ import { $bindings } from "./lib/bindings";
 import { $ffigenConfig } from "./lib/ffigen-config";
 import { $headers } from "./lib/headers";
 import { $logs } from "./lib/log";
-import { FileExplorer } from "./components/file-explorer";
 
 function FFIGenPad({ ffigenpad }: { ffigenpad: WebAssembly.Instance }) {
   const logs = useStore($logs);
   const ffigenConfig = useStore($ffigenConfig);
   const headers = useStore($headers);
   const [loading, setLoading] = createSignal(false);
+
   function generate() {
     setLoading(true);
     globalThis.FS.writeFile("/home/web_user/main.h", headers());
@@ -36,6 +37,10 @@ function FFIGenPad({ ffigenpad }: { ffigenpad: WebAssembly.Instance }) {
     setLoading(false);
   }
 
+  function copyBindings() {
+    navigator.clipboard.writeText($bindings.get());
+  }
+
   return (
     <Splitter.Root
       defaultSize={[{ id: "input" }, { id: "output" }]}
@@ -82,12 +87,15 @@ function FFIGenPad({ ffigenpad }: { ffigenpad: WebAssembly.Instance }) {
       <Splitter.ResizeTrigger id="input:output" />
       <Splitter.Panel id="output">
         <Tabs.Root defaultValue="bindings" variant="enclosed">
-          <HStack>
+          <HStack justify="space-between">
             <Tabs.List>
               <Tabs.Trigger value="bindings">Bindings</Tabs.Trigger>
               <Tabs.Trigger value="logs">Logs ({logs().length})</Tabs.Trigger>
               <Tabs.Indicator />
             </Tabs.List>
+            <IconButton onClick={copyBindings}>
+              <TbClipboardCopy />
+            </IconButton>
           </HStack>
 
           <Tabs.Content value="bindings">

pkgs/ffigenpad/web/src/components/file-explorer.tsx

@@ -1,58 +1,117 @@
-import { TbFileDots } from "solid-icons/tb";
+import {
+  TbChevronRight,
+  TbFileDots,
+  TbFilePlus,
+  TbFolderPlus,
+  TbTrash,
+} from "solid-icons/tb";
+import { For, Show } from "solid-js";
+import { HStack } from "styled-system/jsx";
 import { Drawer } from "./ui/drawer";
+import { Editable } from "./ui/editable";
 import { IconButton } from "./ui/icon-button";
-import { TreeView } from "./ui/tree-view";
+import * as StyledTreeView from "./ui/styled/tree-view";
 
 const data = {
   label: "Root",
   children: [
     {
-      value: "1",
-      name: "Item 1",
+      name: "home/web_user",
       children: [
         {
-          value: "1.1",
-          name: "Item 1.1",
+          name: "a.h",
         },
         {
-          value: "1.2",
-          name: "Item 1.2",
+          name: "clang-c",
           children: [
             {
-              value: "1.2.1",
-              name: "Item 1.2.1",
+              name: "b.h",
             },
             {
-              value: "1.2.2",
-              name: "Item 1.2.2",
+              name: "a.h",
             },
           ],
         },
       ],
     },
-    {
-      value: "2",
-      name: "Item 2",
-      children: [
-        {
-          value: "2.1",
-          name: "Item 2.1",
-        },
-        {
-          value: "2.2",
-          name: "Item 2.2",
-        },
-      ],
-    },
-    {
-      value: "3",
-      name: "Item 3",
-    },
   ],
 };
 
-export const FileTree = () => {
-  return <TreeView data={data} />;
+interface Child {
+  name: string;
+  children?: Child[];
+}
+
+const FileTree = () => {
+  const renderChild = (child: Child, parent: string) => (
+    <Show
+      when={child.children}
+      fallback={
+        <Editable.Root activationMode="dblclick" defaultValue={child.name}>
+          <HStack justify="space-between">
+            <StyledTreeView.Item value={`${parent}/${child.name}`}>
+              <Editable.Area>
+                <Editable.Input />
+                <StyledTreeView.ItemText>
+                  <Editable.Preview />
+                </StyledTreeView.ItemText>
+              </Editable.Area>
+            </StyledTreeView.Item>
+
+            <IconButton size="xs" variant="ghost">
+              <TbTrash />
+            </IconButton>
+          </HStack>
+        </Editable.Root>
+      }
+    >
+      <StyledTreeView.Branch value={`${parent}/${child.name}`}>
+        <Editable.Root activationMode="dblclick" value={child.name}>
+          <HStack justify="space-between">
+            <StyledTreeView.BranchControl>
+              <StyledTreeView.BranchIndicator>
+                <TbChevronRight />
+              </StyledTreeView.BranchIndicator>
+              <Editable.Area>
+                <Editable.Input />
+                <StyledTreeView.BranchText>
+                  <Editable.Preview />
+                </StyledTreeView.BranchText>
+              </Editable.Area>
+            </StyledTreeView.BranchControl>
+            <HStack gap="0">
+              <IconButton size="xs" variant="ghost">
+                <TbFilePlus />
+              </IconButton>
+              <IconButton size="xs" variant="ghost">
+                <TbFolderPlus />
+              </IconButton>
+              <IconButton size="xs" variant="ghost">
+                <TbTrash />
+              </IconButton>
+            </HStack>
+          </HStack>
+        </Editable.Root>
+        <StyledTreeView.BranchContent>
+          <For each={child.children}>
+            {(c) => renderChild(c, `${parent}/${child.name}`)}
+          </For>
+        </StyledTreeView.BranchContent>
+      </StyledTreeView.Branch>
+    </Show>
+  );
+
+  return (
+    <StyledTreeView.Root
+      aria-label={data.label}
+      defaultExpandedValue={["/home/web_user"]}
+      onSelectionChange={console.log}
+    >
+      <StyledTreeView.Tree>
+        <For each={data.children}>{(c) => renderChild(c, "")}</For>
+      </StyledTreeView.Tree>
+    </StyledTreeView.Root>
+  );
 };
 
 export const FileExplorer = () => {
@@ -67,6 +126,10 @@ export const FileExplorer = () => {
       />
       <Drawer.Positioner>
         <Drawer.Content>
+          <Drawer.Header>
+            <Drawer.Title>FileSystem</Drawer.Title>
+            <Drawer.Description>Tip: double click to rename</Drawer.Description>
+          </Drawer.Header>
           <Drawer.Body>
             <FileTree />
           </Drawer.Body>

pkgs/ffigenpad/web/src/components/ui/editable.tsx

@@ -0,0 +1 @@
+export * as Editable from './styled/editable'

pkgs/ffigenpad/web/src/components/ui/icon.tsx

@@ -0,0 +1 @@
+export { Icon, type IconProps } from './styled/icon'

pkgs/ffigenpad/web/src/components/ui/styled/editable.tsx

@@ -0,0 +1,56 @@
+import { type Assign, Editable } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type EditableVariantProps, editable } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(editable)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Editable.RootProviderBaseProps>, EditableVariantProps>
+>(Editable.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Editable.RootBaseProps>, EditableVariantProps>
+>(Editable.Root, 'root')
+
+export const Area = withContext<Assign<HTMLStyledProps<'div'>, Editable.AreaBaseProps>>(
+  Editable.Area,
+  'area',
+)
+
+export const CancelTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Editable.CancelTriggerBaseProps>
+>(Editable.CancelTrigger, 'cancelTrigger')
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, Editable.ControlBaseProps>>(
+  Editable.Control,
+  'control',
+)
+
+export const EditTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Editable.EditTriggerBaseProps>
+>(Editable.EditTrigger, 'editTrigger')
+
+export const Input = withContext<Assign<HTMLStyledProps<'input'>, Editable.InputBaseProps>>(
+  Editable.Input,
+  'input',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, Editable.LabelBaseProps>>(
+  Editable.Label,
+  'label',
+)
+
+export const Preview = withContext<Assign<HTMLStyledProps<'span'>, Editable.PreviewBaseProps>>(
+  Editable.Preview,
+  'preview',
+)
+
+export const SubmitTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Editable.SubmitTriggerBaseProps>
+>(Editable.SubmitTrigger, 'submitTrigger')
+
+export { EditableContext as Context } from '@ark-ui/solid'

pkgs/ffigenpad/web/src/components/ui/styled/icon.tsx

@@ -0,0 +1,7 @@
+import { ark } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
+import { icon } from 'styled-system/recipes'
+
+export type IconProps = ComponentProps<typeof Icon>
+export const Icon = styled(ark.svg, icon)

pkgs/ffigenpad/web/src/components/ui/tree-view.tsx

@@ -15,7 +15,6 @@ export interface TreeViewData {
 export interface TreeViewProps extends StyledTreeView.RootProps {
   data: TreeViewData;
 }
-
 export const TreeView = (props: TreeViewProps) => {
   const [localProps, rootProps] = splitProps(props, ["data"]);