Start converting directory page to React.

web/app/globals.css

@@ -8,113 +8,239 @@ body {
   font-family: Arial, Helvetica, sans-serif;
 }
 
-.top-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.ws-name {
-  font-size: 1.5em;
-  flex: 1;
-  color: white;
-}
-.top-bar .logo img {
-  height: 2em;
-  vertical-align: middle;
-  margin: 4px;
-}
-.page {
+.workspace {
   display: flex;
   flex-direction: column;
   height: 100vh;
-}
 
-.tools {
-  display: flex;
-  align-items: center;
-}
-.tools a {
-  font-size: 1.5em;
-  padding: 0 10px;
-}
-.error {
-  background: #ffdddd;
-  padding: 8px;
-  font-size: 12px;
-}
-.title-icon {
-  margin-left: 5px;
-  float: right;
-}
-.node-container {
-  padding: 8px;
-  position: relative;
-}
-.lynxkite-node {
-  box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);
-  border-radius: 4px;
-  background: white;
-}
-.expanded .lynxkite-node {
-  overflow-y: auto;
-  height: 100%;
-}
-.lynxkite-node .title {
-  /* background: oklch(75% 0.2 55); */
-  font-weight: bold;
-  padding: 8px;
-}
-.handle-name {
-  font-size: 10px;
-  color: black;
-  letter-spacing: 0.05em;
-  text-align: right;
-  white-space: nowrap;
-  position: absolute;
-  top: -5px;
-  backdrop-filter: blur(10px);
-  padding: 2px 8px;
-  border-radius: 4px;
-  visibility: hidden;
-}
-.left .handle-name {
-  right: 20px;
-}
-.right .handle-name {
-  left: 20px;
-}
-.top .handle-name,
-.bottom .handle-name {
-  top: -5px;
-  left: 5px;
-  backdrop-filter: none;
-}
-.node-container:hover .handle-name {
-  visibility: visible;
-}
-.node-resizer {
-  position: absolute;
-  bottom: 8px;
-  right: 8px;
-  cursor: nwse-resize;
-}
-.lynxkite-node {
-.param {
-  padding: 4px 8px 4px 8px;
-  display: block;
-}
-.param-name {
-  display: block;
-  font-size: 10px;
-  letter-spacing: 0.05em;
-  margin-left: 10px;
-  width: fit-content;
-  padding: 2px 8px;
-  border-radius: 4px 4px 0 0;
-  ;
-}
-.collapsed-param {
-  min-height: 20px;
-  line-height: 10px;
+  .top-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .ws-name {
+      font-size: 1.5em;
+      flex: 1;
+      color: white;
+    }
+
+    .logo img {
+      height: 2em;
+      vertical-align: middle;
+      margin: 4px;
+    }
+
+    .tools {
+      display: flex;
+      align-items: center;
+
+      a {
+        font-size: 1.5em;
+        padding: 0 10px;
+      }
+    }
+  }
+
+  .error {
+    background: #ffdddd;
+    padding: 8px;
+    font-size: 12px;
+  }
+
+  .title-icon {
+    margin-left: 5px;
+    float: right;
+  }
+
+  .node-container {
+    padding: 8px;
+    position: relative;
+  }
+
+  .lynxkite-node {
+    box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+    background: white;
+  }
+
+  .expanded .lynxkite-node {
+    overflow-y: auto;
+    height: 100%;
+  }
+
+  .lynxkite-node .title {
+    /* background: oklch(75% 0.2 55); */
+    font-weight: bold;
+    padding: 8px;
+  }
+
+  .handle-name {
+    font-size: 10px;
+    color: black;
+    letter-spacing: 0.05em;
+    text-align: right;
+    white-space: nowrap;
+    position: absolute;
+    top: -5px;
+    backdrop-filter: blur(10px);
+    padding: 2px 8px;
+    border-radius: 4px;
+    visibility: hidden;
+  }
+
+  .left .handle-name {
+    right: 20px;
+  }
+
+  .right .handle-name {
+    left: 20px;
+  }
+
+  .top .handle-name,
+  .bottom .handle-name {
+    top: -5px;
+    left: 5px;
+    backdrop-filter: none;
+  }
+
+  .node-container:hover .handle-name {
+    visibility: visible;
+  }
+
+  .node-resizer {
+    position: absolute;
+    bottom: 8px;
+    right: 8px;
+    cursor: nwse-resize;
+  }
+
+  .lynxkite-node {
+    .param {
+      padding: 4px 8px 4px 8px;
+      display: block;
+    }
+
+    .param-name {
+      display: block;
+      font-size: 10px;
+      letter-spacing: 0.05em;
+      margin-left: 10px;
+      width: fit-content;
+      padding: 2px 8px;
+      border-radius: 4px 4px 0 0;
+      ;
+    }
+
+    .collapsed-param {
+      min-height: 20px;
+      line-height: 10px;
+    }
+  }
 }
+
+.directory {
+  .entry-list {
+    width: 100%;
+    margin: 10px auto;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0px 2px 4px;
+    padding: 0 0 10px 0;
+  }
+
+  @media (min-width: 768px) {
+    .entry-list {
+      width: 768px;
+    }
+  }
+
+  @media (min-width: 960px) {
+    .entry-list {
+      width: 80%;
+    }
+  }
+
+  .logo {
+    margin: 0;
+    padding-top: 50px;
+    text-align: center;
+  }
+
+  .logo-image {
+    max-width: 50%;
+  }
+
+  .tagline {
+    color: #39bcf3;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  @media (min-width: 1400px) {
+    .tagline {
+      font-size: 18px;
+    }
+  }
+
+  .actions {
+    display: flex;
+    justify-content: space-evenly;
+    padding: 5px;
+  }
+
+  .actions a {
+    padding: 2px 10px;
+    border-radius: 5px;
+  }
+
+  .actions a:hover {
+    background: #39bcf3;
+    color: white;
+  }
+
+  .breadcrumbs {
+    padding-left: 10px;
+    font-size: 20px;
+    background: #002a4c20;
+  }
+
+  .breadcrumbs a:hover {
+    color: #39bcf3;
+  }
+
+  .entry-list .entry {
+    display: block;
+    border-bottom: 1px solid whitesmoke;
+    padding-left: 10px;
+    color: #004165;
+    cursor: pointer;
+    user-select: none;
+    text-decoration: none;
+  }
+
+  .entry-list .open .entry,
+  .entry-list .entry:hover,
+  .entry-list .entry:focus {
+    background: #39bcf3;
+    color: white;
+  }
+
+  .entry-list .entry:last-child {
+    border-bottom: none;
+  }
+
+  .directory-page {
+    background: #002a4c;
+    height: 100vh;
+  }
+
+  a {
+    color: black;
+    text-decoration: none;
+  }
+
+  .loading {
+    color: #39bcf3;
+    margin: 10px;
+  }
 }

web/app/page.tsx

@@ -1,101 +1,84 @@
+// The directory browser.
 import Image from "next/image";
+import Link from 'next/link';
+// @ts-ignore
+import Home from '~icons/tabler/home'
+// @ts-ignore
+import Folder from '~icons/tabler/folder'
+// @ts-ignore
+import FolderPlus from '~icons/tabler/folder-plus'
+// @ts-ignore
+import File from '~icons/tabler/file'
+// @ts-ignore
+import FilePlus from '~icons/tabler/file-plus'
 
-export default function Home() {
+export default async function Home({
+  searchParams,
+}: {
+  searchParams?: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  ;
+  async function fetchList(path) {
+    const encodedPath = encodeURIComponent(path || '');
+    const res = await fetch(`http://localhost:8000/api/dir/list?path=${encodedPath}`);
+    const j = await res.json();
+    return j;
+  }
+  const path = (await searchParams)?.path || '';
+  const list = await fetchList(path);
+  function link(item) {
+    if (item.type === 'directory') {
+      return `/dir?path=${item.name}`;
+    } else {
+      return `/workspace?path=${item.name}`;
+    }
+  }
+  function shortName(item) {
+    return item.name.split('/').pop();
+  }
+  function newName(list) {
+    let i = 0;
+    while (true) {
+      const name = `Untitled${i ? ` ${i}` : ''}`;
+      if (!list.find(item => item.name === name)) {
+        return name;
+      }
+      i++;
+    }
+  }
+  function newWorkspaceIn(path, list) {
+    const pathSlash = path ? `${path}/` : '';
+    return `/workspace?path=${pathSlash}${newName(list)}`;
+  }
+  async function newFolderIn(path, list) {
+    const pathSlash = path ? `${path}/` : '';
+    const name = newName(list);
+    const res = await fetch(`/api/dir/mkdir`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path: pathSlash + name }),
+    });
+    list = await res.json();
+  }
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
+    <div className="directory-page">
+      <div className="logo">
+        <Link href="https://lynxkite.com/"><img src='/logo.png' className="logo-image" alt="LynxKite logo" /></Link>
+        <div className="tagline">The Complete Graph Data Science Platform</div>
+      </div>
+      <div className="entry-list">
+        <div className="actions">
+          <a href={newWorkspaceIn(path, list)}><FilePlus /> New workspace</a>
+          <a href="" onClick={() => newFolderIn(path, list)}><FolderPlus /> New folder</a>
         </div>
-      </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+        {path && <div className="breadcrumbs"><a href="#dir"><Home /></a> {path} </div>}
+        {list.map(item =>
+          <a className="entry" href={link(item)}>
+            {item.type === 'directory' ? <Folder /> : <File />}
+            {shortName(item)}
+          </a>
+        )}
+      </div>
     </div>
   );
 }

web/package-lock.json

@@ -645,6 +645,111 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.0.3.tgz",
+      "integrity": "sha512-Zxl/TwyXVZPCFSf0u2BNj5sE0F2uR6iSKxWpq4Wlk/Sv9Ob6YCKByQTkV2y6BCic+fkabp9190hyrDdPA/dNrw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.0.3.tgz",
+      "integrity": "sha512-T5+gg2EwpsY3OoaLxUIofmMb7ohAUlcNZW0fPQ6YAutaWJaxt1Z1h+8zdl4FRIOr5ABAAhXtBcpkZNwUcKI2fw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.0.3.tgz",
+      "integrity": "sha512-WkAk6R60mwDjH4lG/JBpb2xHl2/0Vj0ZRu1TIzWuOYfQ9tt9NFsIinI1Epma77JVgy81F32X/AeD+B2cBu/YQA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.0.3.tgz",
+      "integrity": "sha512-gWL/Cta1aPVqIGgDb6nxkqy06DkwJ9gAnKORdHWX1QBbSZZB+biFYPFti8aKIQL7otCE1pjyPaXpFzGeG2OS2w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.0.3.tgz",
+      "integrity": "sha512-QQEMwFd8r7C0GxQS62Zcdy6GKx999I/rTO2ubdXEe+MlZk9ZiinsrjwoiBL5/57tfyjikgh6GOU2WRQVUej3UA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.0.3.tgz",
+      "integrity": "sha512-9TEp47AAd/ms9fPNgtgnT7F3M1Hf7koIYYWCMQ9neOwjbVWJsHZxrFbI3iEDJ8rf1TDGpmHbKxXf2IFpAvheIQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.0.3.tgz",
+      "integrity": "sha512-VNAz+HN4OGgvZs6MOoVfnn41kBzT+M+tB+OK4cww6DNyWS6wKaDpaAm/qLeOUbnMh0oVx1+mg0uoYARF69dJyA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -6932,111 +7037,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
       "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
-    },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "15.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.0.3.tgz",
-      "integrity": "sha512-Zxl/TwyXVZPCFSf0u2BNj5sE0F2uR6iSKxWpq4Wlk/Sv9Ob6YCKByQTkV2y6BCic+fkabp9190hyrDdPA/dNrw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "15.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.0.3.tgz",
-      "integrity": "sha512-T5+gg2EwpsY3OoaLxUIofmMb7ohAUlcNZW0fPQ6YAutaWJaxt1Z1h+8zdl4FRIOr5ABAAhXtBcpkZNwUcKI2fw==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "15.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.0.3.tgz",
-      "integrity": "sha512-WkAk6R60mwDjH4lG/JBpb2xHl2/0Vj0ZRu1TIzWuOYfQ9tt9NFsIinI1Epma77JVgy81F32X/AeD+B2cBu/YQA==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "15.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.0.3.tgz",
-      "integrity": "sha512-gWL/Cta1aPVqIGgDb6nxkqy06DkwJ9gAnKORdHWX1QBbSZZB+biFYPFti8aKIQL7otCE1pjyPaXpFzGeG2OS2w==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "15.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.0.3.tgz",
-      "integrity": "sha512-QQEMwFd8r7C0GxQS62Zcdy6GKx999I/rTO2ubdXEe+MlZk9ZiinsrjwoiBL5/57tfyjikgh6GOU2WRQVUej3UA==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "15.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.0.3.tgz",
-      "integrity": "sha512-9TEp47AAd/ms9fPNgtgnT7F3M1Hf7koIYYWCMQ9neOwjbVWJsHZxrFbI3iEDJ8rf1TDGpmHbKxXf2IFpAvheIQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "15.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.0.3.tgz",
-      "integrity": "sha512-VNAz+HN4OGgvZs6MOoVfnn41kBzT+M+tB+OK4cww6DNyWS6wKaDpaAm/qLeOUbnMh0oVx1+mg0uoYARF69dJyA==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
     }
   }
 }