diff options
| -rw-r--r-- | .changes/settings-java.md | 6 | ||||
| -rw-r--r-- | .changes/version-select.md | 6 | ||||
| -rw-r--r-- | packages/ui/src/components/bottom-bar.tsx | 19 | ||||
| -rw-r--r-- | packages/ui/src/components/ui/radio-group.tsx | 36 | ||||
| -rw-r--r-- | packages/ui/src/models/java.ts | 25 | ||||
| -rw-r--r-- | packages/ui/src/pages/settings.tsx | 90 | ||||
| -rw-r--r-- | packages/ui/vite.config.ts | 2 |
7 files changed, 167 insertions, 17 deletions
diff --git a/.changes/settings-java.md b/.changes/settings-java.md new file mode 100644 index 0000000..7f13302 --- /dev/null +++ b/.changes/settings-java.md @@ -0,0 +1,6 @@ +--- +"@dropout/ui": "patch:feat" +dropout: "patch:feat" +--- + +Support detect and select java path. diff --git a/.changes/version-select.md b/.changes/version-select.md new file mode 100644 index 0000000..0f6ce83 --- /dev/null +++ b/.changes/version-select.md @@ -0,0 +1,6 @@ +--- +"@dropout/ui": "patch:fix" +dropout: "patch:fix" +--- + +Auto select game version if version is unique. 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/ |