From ba8a9c75655b4444182ec53df5ecf9b3f325890f Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Thu, 11 Jul 2024 18:45:29 +0200
Subject: [PATCH] Webview: add clanList edit

---
 pkgs/webview-ui/app/src/App.tsx               |   2 +
 pkgs/webview-ui/app/src/layout/layout.tsx     |  11 +-
 .../app/src/routes/settings/index.tsx         | 134 ++++++++++--------
 3 files changed, 82 insertions(+), 65 deletions(-)

diff --git a/pkgs/webview-ui/app/src/App.tsx b/pkgs/webview-ui/app/src/App.tsx
index 98061def..9c056ae8 100644
--- a/pkgs/webview-ui/app/src/App.tsx
+++ b/pkgs/webview-ui/app/src/App.tsx
@@ -17,6 +17,8 @@ const [clanList, setClanList] = makePersisted(createSignal<string[]>([]), {
   storage: localStorage,
 });
 
+clanList() && setActiveURI(clanList()[0]);
+
 export { clanList, setClanList };
 
 const App: Component = () => {
diff --git a/pkgs/webview-ui/app/src/layout/layout.tsx b/pkgs/webview-ui/app/src/layout/layout.tsx
index 66bea404..84412fc9 100644
--- a/pkgs/webview-ui/app/src/layout/layout.tsx
+++ b/pkgs/webview-ui/app/src/layout/layout.tsx
@@ -1,17 +1,13 @@
 import { Component, JSXElement, Show } from "solid-js";
 import { Header } from "./header";
 import { Sidebar } from "../Sidebar";
-import { route, setRoute } from "../App";
-import { effect } from "solid-js/web";
+import { clanList, route, setRoute } from "../App";
 
 interface LayoutProps {
   children: JSXElement;
 }
 
 export const Layout: Component<LayoutProps> = (props) => {
-  effect(() => {
-    console.log(route());
-  });
   return (
     <>
       <div class="drawer bg-base-100 lg:drawer-open">
@@ -24,12 +20,13 @@ export const Layout: Component<LayoutProps> = (props) => {
           <Show when={route() !== "welcome"}>
             <Header />
           </Show>
-
           {props.children}
         </div>
         <div
           class="drawer-side z-40"
-          classList={{ "!hidden": route() === "welcome" }}
+          classList={{
+            "!hidden": route() === "welcome" || clanList().length === 0,
+          }}
         >
           <label
             for="toplevel-drawer"
diff --git a/pkgs/webview-ui/app/src/routes/settings/index.tsx b/pkgs/webview-ui/app/src/routes/settings/index.tsx
index 2891d2b1..928e3103 100644
--- a/pkgs/webview-ui/app/src/routes/settings/index.tsx
+++ b/pkgs/webview-ui/app/src/routes/settings/index.tsx
@@ -5,12 +5,14 @@ import {
   required,
   setValue,
 } from "@modular-forms/solid";
-import { activeURI, setClanList, setActiveURI, setRoute } from "@/src/App";
-
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-type SettingsForm = {
-  base_dir: string | null;
-};
+import {
+  activeURI,
+  setClanList,
+  setActiveURI,
+  setRoute,
+  clanList,
+} from "@/src/App";
+import { For } from "solid-js";
 
 export const registerClan = async () => {
   try {
@@ -20,7 +22,10 @@ export const registerClan = async () => {
     console.log(loc);
     if (loc.status === "success" && loc.data) {
       // @ts-expect-error: data is a string
-      setClanList((s) => [...s, loc.data]);
+      setClanList((s) => {
+        const res = new Set([...s, loc.data]);
+        return Array.from(res);
+      });
       setRoute((r) => {
         if (r === "welcome") return "machines";
         return r;
@@ -33,66 +38,79 @@ export const registerClan = async () => {
 };
 
 export const Settings = () => {
-  const [formStore, { Form, Field }] = createForm<SettingsForm>({
-    initialValues: {
-      base_dir: activeURI(),
-    },
-  });
-
-  const handleSubmit: SubmitHandler<SettingsForm> = async (values, event) => {
-    //
-  };
-
   return (
     <div class="card card-normal">
-      <Form onSubmit={handleSubmit} shouldActive>
-        <div class="card-body">
-          <Field name="base_dir" validate={[required("Clan URI is required")]}>
-            {(field, props) => (
-              <label class="form-control w-full">
-                <div class="label">
-                  <span class="label-text block after:ml-0.5 after:text-primary">
-                    Directory
-                  </span>
-                </div>
-                <div class="stats shadow">
-                  <div class="stat">
-                    <div class="stat-figure text-primary">
-                      <span class="material-icons">inventory</span>
-                    </div>
-                    <div class="stat-title">Clan URI</div>
-                    <div
-                      class="stat-value"
-                      classList={{ "text-slate-500": !field.value }}
+      <div class="card-body">
+        <div class="label">
+          <div class="label-text">Registered Clans</div>
+          <button
+            class="btn btn-square btn-primary"
+            onClick={() => {
+              registerClan();
+            }}
+          >
+            <span class="material-icons">add</span>
+          </button>
+        </div>
+        <div class="stats stats-vertical shadow">
+          <For each={clanList()}>
+            {(value) => (
+              <div class="stat">
+                <div class="stat-figure text-primary">
+                  <div class="join">
+                    <button
+                      class=" join-item btn-sm"
+                      classList={{
+                        "btn btn-ghost btn-outline": activeURI() !== value,
+                        "badge badge-primary": activeURI() === value,
+                      }}
+                      disabled={activeURI() === value}
+                      onClick={() => {
+                        setActiveURI(value);
+                      }}
                     >
-                      {field.value || "Not set"}
-                      <button
-                        class="btn btn-ghost mx-4"
-                        onClick={async () => {
-                          const location = await registerClan();
-                          if (location) {
-                            setActiveURI(location);
-                            setValue(formStore, "base_dir", location);
-                          }
-                        }}
-                      >
-                        <span class="material-icons">edit</span>
-                      </button>
-                    </div>
-                    <div class="stat-desc">Where the clan source resides</div>
+                      {activeURI() === value ? "active" : "select"}
+                    </button>
+                    <button
+                      class="btn btn-ghost btn-outline join-item btn-sm"
+                      onClick={() => {
+                        setClanList((s) =>
+                          s.filter((v, idx) => {
+                            if (v == value) {
+                              setActiveURI(
+                                clanList()[idx - 1] ||
+                                  clanList()[idx + 1] ||
+                                  null
+                              );
+                              return false;
+                            }
+                            return true;
+                          })
+                        );
+                        // if (activeURI() === value) {
+                        //   setActiveURI();
+                        // }
+                      }}
+                    >
+                      Remove URI
+                    </button>
                   </div>
                 </div>
+                <div class="stat-title">Clan URI</div>
 
-                <div class="label">
-                  {field.error && (
-                    <span class="label-text-alt">{field.error}</span>
-                  )}
+                <div
+                  class="stat-desc text-lg"
+                  classList={{
+                    "text-primary": activeURI() === value,
+                  }}
+                >
+                  {value}
                 </div>
-              </label>
+              </div>
             )}
-          </Field>
+          </For>
         </div>
-      </Form>
+      </div>
     </div>
   );
 };