From 9e40b5b7bea60e6802a4b448ef315b14fba4de7f Mon Sep 17 00:00:00 2001
From: 苏向夜 <fu050409@163.com>
Date: Mon, 2 Mar 2026 10:26:21 +0800
Subject: feat(ui): java config

---
 packages/ui/src/components/bottom-bar.tsx     | 19 ++----
 packages/ui/src/components/ui/radio-group.tsx | 36 +++++++++++
 packages/ui/src/models/java.ts                | 25 ++++++++
 packages/ui/src/pages/settings.tsx            | 90 ++++++++++++++++++++++++++-
 packages/ui/vite.config.ts                    |  2 +-
 5 files changed, 155 insertions(+), 17 deletions(-)
 create mode 100644 packages/ui/src/components/ui/radio-group.tsx
 create mode 100644 packages/ui/src/models/java.ts

(limited to 'packages')

diff --git a/packages/ui/src/components/bottom-bar.tsx b/packages/ui/src/components/bottom-bar.tsx
index 5489675..0710c3a 100644
--- a/packages/ui/src/components/bottom-bar.tsx
+++ b/packages/ui/src/components/bottom-bar.tsx
@@ -6,7 +6,6 @@ import { listInstalledVersions, startGame } from "@/client";
 import { cn } from "@/lib/utils";
 import { useAuthStore } from "@/models/auth";
 import { useInstanceStore } from "@/models/instance";
-import { useGameStore } from "@/stores/game-store";
 import { LoginModal } from "./login-modal";
 import { Button } from "./ui/button";
 import {
@@ -26,7 +25,6 @@ interface InstalledVersion {
 
 export function BottomBar() {
   const authStore = useAuthStore();
-  const gameStore = useGameStore();
   const instancesStore = useInstanceStore();
 
   const [isLaunched, setIsLaunched] = useState<boolean>(false);
@@ -51,24 +49,18 @@ export function BottomBar() {
       const versions = await listInstalledVersions(
         instancesStore.activeInstance.id,
       );
-
-      const installed = versions || [];
-      setInstalledVersions(installed);
+      setInstalledVersions(versions);
 
       // If no version is selected but we have installed versions, select the first one
-      if (!gameStore.selectedVersion && installed.length > 0) {
-        gameStore.setSelectedVersion(installed[0].id);
+      if (!selectedVersion && versions.length > 0) {
+        setSelectedVersion(versions[0].id);
       }
     } catch (error) {
       console.error("Failed to load installed versions:", error);
     } finally {
       setIsLoadingVersions(false);
     }
-  }, [
-    instancesStore.activeInstance,
-    gameStore.selectedVersion,
-    gameStore.setSelectedVersion,
-  ]);
+  }, [instancesStore.activeInstance, selectedVersion]);
 
   useEffect(() => {
     loadInstalledVersions();
@@ -225,6 +217,7 @@ export function BottomBar() {
             </div>
 
             <Select
+              value={selectedVersion}
               items={versionOptions}
               onValueChange={setSelectedVersion}
               disabled={isLoadingVersions}
@@ -238,7 +231,7 @@ export function BottomBar() {
                   }
                 />
               </SelectTrigger>
-              <SelectContent>
+              <SelectContent alignItemWithTrigger={false}>
                 <SelectGroup>
                   {versionOptions.map((item) => (
                     <SelectItem
diff --git a/packages/ui/src/components/ui/radio-group.tsx b/packages/ui/src/components/ui/radio-group.tsx
new file mode 100644
index 0000000..d8b39dd
--- /dev/null
+++ b/packages/ui/src/components/ui/radio-group.tsx
@@ -0,0 +1,36 @@
+import { Radio as RadioPrimitive } from "@base-ui/react/radio"
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
+
+import { cn } from "@/lib/utils"
+
+function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
+  return (
+    <RadioGroupPrimitive
+      data-slot="radio-group"
+      className={cn("grid w-full gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
+  return (
+    <RadioPrimitive.Root
+      data-slot="radio-group-item"
+      className={cn(
+        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
+        className
+      )}
+      {...props}
+    >
+      <RadioPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="flex size-4 items-center justify-center"
+      >
+        <span className="bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full" />
+      </RadioPrimitive.Indicator>
+    </RadioPrimitive.Root>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }
diff --git a/packages/ui/src/models/java.ts b/packages/ui/src/models/java.ts
new file mode 100644
index 0000000..3e5d2d0
--- /dev/null
+++ b/packages/ui/src/models/java.ts
@@ -0,0 +1,25 @@
+import { create } from "zustand/react";
+import { detectJava, refreshJavaCatalog } from "@/client";
+import type { JavaCatalog, JavaInstallation } from "@/types";
+
+export interface JavaState {
+  catalog: JavaCatalog | null;
+  installations: JavaInstallation[] | null;
+
+  refresh: () => Promise<void>;
+  refreshInstallations: () => Promise<void>;
+}
+
+export const useJavaStore = create<JavaState>((set) => ({
+  catalog: null,
+  installations: null,
+
+  refresh: async () => {
+    const catalog = await refreshJavaCatalog();
+    set({ catalog });
+  },
+  refreshInstallations: async () => {
+    const installations = await detectJava();
+    set({ installations });
+  },
+}));
diff --git a/packages/ui/src/pages/settings.tsx b/packages/ui/src/pages/settings.tsx
index 440a5dc..9387e23 100644
--- a/packages/ui/src/pages/settings.tsx
+++ b/packages/ui/src/pages/settings.tsx
@@ -1,6 +1,7 @@
 import { toNumber } from "es-toolkit/compat";
 import { FileJsonIcon } from "lucide-react";
 import { useEffect, useState } from "react";
+import { toast } from "sonner";
 import { migrateSharedCaches } from "@/client";
 import { ConfigEditor } from "@/components/config-editor";
 import { Button } from "@/components/ui/button";
@@ -13,9 +14,11 @@ import {
   FieldLabel,
   FieldLegend,
   FieldSet,
+  FieldTitle,
 } from "@/components/ui/field";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Select,
@@ -28,18 +31,40 @@ import {
 import { Spinner } from "@/components/ui/spinner";
 import { Switch } from "@/components/ui/switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useJavaStore } from "@/models/java";
 import { useSettingsStore } from "@/models/settings";
 
 export type SettingsTab = "general" | "appearance" | "advanced";
 
 export function SettingsPage() {
   const { config, ...settings } = useSettingsStore();
+  const javaStore = useJavaStore();
   const [showConfigEditor, setShowConfigEditor] = useState<boolean>(false);
   const [activeTab, setActiveTab] = useState<SettingsTab>("general");
 
   useEffect(() => {
-    if (!config) settings.refresh();
-  }, [config, settings.refresh]);
+    const refresh = async () => {
+      try {
+        await settings.refresh();
+      } catch (error) {
+        console.error(error);
+        toast.error(`Failed to refresh settings: ${error}`);
+      }
+      try {
+        await javaStore.refreshInstallations();
+        if (!javaStore.catalog) await javaStore.refresh();
+      } catch (error) {
+        console.error(error);
+        toast.error(`Failed to refresh java catalogs: ${error}`);
+      }
+    };
+    refresh();
+  }, [
+    settings.refresh,
+    javaStore.refresh,
+    javaStore.refreshInstallations,
+    javaStore.catalog,
+  ]);
 
   const renderScrollArea = () => {
     if (!config) {
@@ -158,7 +183,66 @@ export function SettingsPage() {
               <CardTitle className="font-bold text-xl">
                 Java Installations
               </CardTitle>
-              <CardContent></CardContent>
+              <CardContent>
+                <FieldGroup>
+                  <Field>
+                    <FieldLabel htmlFor="java-path">Java Path</FieldLabel>
+                    <Input
+                      type="text"
+                      name="java-path"
+                      value={config?.javaPath}
+                      onChange={(e) => {
+                        settings.merge({
+                          javaPath: e.target.value,
+                        });
+                      }}
+                      onBlur={() => {
+                        settings.save();
+                      }}
+                    />
+                  </Field>
+                  <FieldSet>
+                    <FieldLegend>Java Installations</FieldLegend>
+                    {javaStore.installations ? (
+                      <RadioGroup
+                        value={config.javaPath}
+                        onValueChange={(value) => {
+                          settings.merge({
+                            javaPath: value,
+                          });
+                          settings.save();
+                        }}
+                      >
+                        {javaStore.installations?.map((installation) => (
+                          <FieldLabel
+                            key={installation.path}
+                            htmlFor={installation.path}
+                          >
+                            <Field orientation="horizontal">
+                              <FieldContent>
+                                <FieldTitle>
+                                  {installation.vendor} ({installation.version})
+                                </FieldTitle>
+                                <FieldDescription>
+                                  {installation.path}
+                                </FieldDescription>
+                              </FieldContent>
+                              <RadioGroupItem
+                                value={installation.path}
+                                id={installation.path}
+                              />
+                            </Field>
+                          </FieldLabel>
+                        ))}
+                      </RadioGroup>
+                    ) : (
+                      <div className="flex justify-center items-center h-30">
+                        <Spinner />
+                      </div>
+                    )}
+                  </FieldSet>
+                </FieldGroup>
+              </CardContent>
             </CardHeader>
           </Card>
         </TabsContent>
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
index 27ce1ff..8c90267 100644
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -1,6 +1,6 @@
+import path from "node:path";
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
-import path from "path";
 import { defineConfig } from "vite";
 
 // https://vite.dev/config/
-- 
cgit v1.2.3-70-g09d2