Moved pack info to component

deno.json

@@ -22,6 +22,7 @@
     "@std/path": "jsr:@std/path@^1.0.6",
     "autoprefixer": "npm:autoprefixer@^10.4.20",
     "babel-plugin-transform-hook-names": "npm:babel-plugin-transform-hook-names@^1.0.2",
+    "jotai": "npm:jotai@^2.10.1",
     "less": "npm:less@^4.2.0",
     "postcss": "npm:postcss@^8.4.47",
     "preact": "npm:preact@^10.24.3",

deno.lock

@@ -18,6 +18,7 @@
     "npm:@types/node@*": "22.5.4",
     "npm:autoprefixer@^10.4.20": "10.4.20_postcss@8.4.47",
     "npm:babel-plugin-transform-hook-names@^1.0.2": "1.0.2_@babel+core@7.25.8",
+    "npm:jotai@^2.10.1": "2.10.1",
     "npm:less@^4.2.0": "4.2.0",
     "npm:postcss@^8.4.47": "8.4.47",
     "npm:preact@^10.24.3": "10.24.3",
@@ -883,6 +884,9 @@
     "jiti@1.21.6": {
       "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w=="
     },
+    "jotai@2.10.1": {
+      "integrity": "sha512-4FycO+BOTl2auLyF2Chvi6KTDqdsdDDtpaL/WHQMs8f3KS1E3loiUShQzAzFA/sMU5cJ0hz/RT1xum9YbG/zaA=="
+    },
     "js-tokens@4.0.0": {
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
@@ -1400,6 +1404,7 @@
       "npm:@preact/preset-vite@^2.9.1",
       "npm:autoprefixer@^10.4.20",
       "npm:babel-plugin-transform-hook-names@^1.0.2",
+      "npm:jotai@^2.10.1",
       "npm:less@^4.2.0",
       "npm:postcss@^8.4.47",
       "npm:preact@^10.24.3",

server/main.ts

@@ -98,7 +98,7 @@ router.route("/api/world")
     using store = new BearMetalStore();
     const worldPath = store.get("world") as string;
     if (!worldPath) return new Response(null, { status: 400 });
-    return serveFile(req, worldPath);
+    return new Response(worldPath.split("/").pop() as string, { status: 200 });
   });
 
 router.route("/api/pack")

src/classes.ts

@@ -0,0 +1,3 @@
+export const classList = (...classes: (string | undefined)[]) => {
+  return classes.filter(Boolean).join(" ");
+};

src/components/loader.tsx

@@ -1,8 +1,17 @@
-export const Loader = ({ msg }: { msg?: string }) => {
+import { classList } from "../classes.ts";
+
+interface IProps {
+  msg?: string;
+  class?: string;
+}
+
+export const Loader = ({ msg, class: className }: IProps) => {
   return (
-    <div class="flex justify-center items-center gap-4">
+    <div
+      class={classList("flex justify-center items-center gap-4", className)}
+    >
       {!!msg && <p>{msg}</p>}
-      <div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-primary-600">
+      <div class="animate-spin rounded-full max-w-full h-16 w-16 border-t-2 border-b-2 border-primary-600">
       </div>
     </div>
   );

src/components/packInfo.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useState } from "preact/hooks";
+import type { FunctionComponent } from "preact";
+import { Loader } from "./loader.tsx";
+
+interface IProps {
+  packName: string;
+}
+
+export const PackInfo: FunctionComponent<IProps> = ({ packName }) => {
+  const [showVersions, setShowVersions] = useState(false);
+  const [packVersion, setPackVersion] = useState("");
+  const [packVersionList, setPackVersionList] = useState<string[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [world, setWorld] = useState("");
+
+  useEffect(() => {
+    Promise.all([
+      fetch("/api/pack/version").then((res) => res.text()).then((text) => {
+        setPackVersion(text);
+      }),
+      fetch("/api/versions").then((res) => res.json()).then((json) => {
+        setPackVersionList(json);
+      }),
+      fetch("/api/world").then((res) => res.text()).then((text) => {
+        setWorld(text);
+      }),
+    ]).finally(() => setLoading(false));
+  }, []);
+
+  const updatePackVersion = async (version: string) => {
+    const res = await fetch("/api/pack/version", {
+      method: "POST",
+      body: version,
+    });
+
+    if (res.status === 200) {
+      setPackVersion(version);
+    }
+  };
+
+  return (
+    <>
+      <h2 class="text-xl">{world} :: {packName}</h2>
+      <p class="bg-lime-700 rounded-full shadow-md">
+        {loading ? <Loader class="w-8" /> : (
+          <>
+            Datapack Version:{" "}
+            <span
+              class="relative cursor-pointer rounded-full bg-lime-200 text-black px-2 inline-block"
+              onClick={() => setShowVersions(!showVersions)}
+            >
+              {packVersion}
+              {showVersions && (
+                <ul class="absolute top-full left-0 bg-lime-50 rounded-md shadow-md p-2 min-w 12">
+                  {packVersionList.map((version) => (
+                    <li onClick={() => updatePackVersion(version)}>
+                      {version}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </span>
+          </>
+        )}
+      </p>
+    </>
+  );
+};

src/views/editor.tsx

@@ -2,13 +2,12 @@ import { useEffect, useState } from "preact/hooks";
 import { Modal } from "../components/modal.tsx";
 import { LabelledHr } from "../components/labelledHr.tsx";
 import { PacksList } from "../components/packsList.tsx";
+import { PackInfo } from "../components/packInfo.tsx";
 
 export const Editor = () => {
   const [packName, setPackName] = useState("");
   const [loading, setLoading] = useState(true);
   const [namespaces, setNamespaces] = useState<string[]>([]);
-  const [packVersion, setPackVersion] = useState("");
-  const [packVersionList, setPackVersionList] = useState<string[]>([]);
 
   useEffect(() => {
     document.title = "BearMetal Packer";
@@ -16,12 +15,6 @@ export const Editor = () => {
       setPackName(json.packName);
       setLoading(false);
     });
-    fetch("/api/pack/version").then((res) => res.text()).then((text) => {
-      setPackVersion(text);
-    });
-    fetch("/api/versions").then((res) => res.json()).then((json) => {
-      setPackVersionList(json);
-    });
   }, []);
 
   const setPackNameThing = async (event: SubmitEvent) => {
@@ -63,43 +56,12 @@ export const Editor = () => {
     );
   }
 
-  const [showVersions, setShowVersions] = useState(false);
-
-  const updatePackVersion = async (version: string) => {
-    const res = await fetch("/api/pack/version", {
-      method: "POST",
-      body: version,
-    });
-
-    if (res.status === 200) {
-      setPackVersion(version);
-    }
-  };
-
   return (
     <div class="flex h-full">
       <div class="w-1/4 p-4 bg-primary-600">
         <div class="text-center">
           <h1 class="text-2xl">BearMetalPacker</h1>
-          <h2 class="text-xl">{packName}</h2>
+          <PackInfo packName={packName} />
-          <p class="bg-lime-700 rounded-full shadow-md">
-            Datapack Version:{" "}
-            <span
-              class="relative cursor-pointer rounded-full bg-lime-200 text-black px-2 inline-block"
-              onClick={() => setShowVersions(!showVersions)}
-            >
-              {packVersion}
-              {showVersions && (
-                <ul class="absolute top-full left-0 bg-lime-50 rounded-md shadow-md p-2 min-w 12">
-                  {packVersionList.map((version) => (
-                    <li onClick={() => updatePackVersion(version)}>
-                      {version}
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </span>
-          </p>
         </div>
         <LabelledHr>Namespaces</LabelledHr>
         <div>