From 9e40b5b7bea60e6802a4b448ef315b14fba4de7f Mon Sep 17 00:00:00 2001 From: 苏向夜 Date: Mon, 2 Mar 2026 10:26:21 +0800 Subject: feat(ui): java config --- packages/ui/src/pages/settings.tsx | 90 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 87 insertions(+), 3 deletions(-) (limited to 'packages/ui/src/pages') 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(false); const [activeTab, setActiveTab] = useState("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() { Java Installations - + + + + Java Path + { + settings.merge({ + javaPath: e.target.value, + }); + }} + onBlur={() => { + settings.save(); + }} + /> + +
+ Java Installations + {javaStore.installations ? ( + { + settings.merge({ + javaPath: value, + }); + settings.save(); + }} + > + {javaStore.installations?.map((installation) => ( + + + + + {installation.vendor} ({installation.version}) + + + {installation.path} + + + + + + ))} + + ) : ( +
+ +
+ )} +
+ + -- cgit v1.2.3-70-g09d2 From 24a229ede321e8296ea99b332ccfa61213791d10 Mon Sep 17 00:00:00 2001 From: 苏向夜 Date: Mon, 2 Mar 2026 11:48:33 +0800 Subject: refactor(ui): partial rewrite instance layout --- .changes/instance-layout.md | 6 + packages/ui/src/components/sidebar.tsx | 2 +- packages/ui/src/models/instance.ts | 10 +- packages/ui/src/pages/instances-view.tsx | 214 +++++++++++++++---------------- 4 files changed, 115 insertions(+), 117 deletions(-) create mode 100644 .changes/instance-layout.md (limited to 'packages/ui/src/pages') diff --git a/.changes/instance-layout.md b/.changes/instance-layout.md new file mode 100644 index 0000000..9633046 --- /dev/null +++ b/.changes/instance-layout.md @@ -0,0 +1,6 @@ +--- +"@dropout/ui": "patch:refactor" +dropout: "patch:refactor" +--- + +Partial rewrite layout of instances page. diff --git a/packages/ui/src/components/sidebar.tsx b/packages/ui/src/components/sidebar.tsx index 54a2f33..d81156f 100644 --- a/packages/ui/src/components/sidebar.tsx +++ b/packages/ui/src/components/sidebar.tsx @@ -51,7 +51,7 @@ export function Sidebar() { const renderUserAvatar = () => { return ( -
+
diff --git a/packages/ui/src/models/instance.ts b/packages/ui/src/models/instance.ts index a3fda3d..b1b463e 100644 --- a/packages/ui/src/models/instance.ts +++ b/packages/ui/src/models/instance.ts @@ -96,14 +96,8 @@ export const useInstanceStore = create((set, get) => ({ }, setActiveInstance: async (instance) => { - try { - await setActiveInstance(instance.id); - set({ activeInstance: instance }); - toast.success("Active instance changed"); - } catch (e) { - console.error("Failed to set active instance:", e); - toast.error("Error setting active instance"); - } + await setActiveInstance(instance.id); + set({ activeInstance: instance }); }, duplicate: async (id, newName) => { diff --git a/packages/ui/src/pages/instances-view.tsx b/packages/ui/src/pages/instances-view.tsx index 1634905..e99004c 100644 --- a/packages/ui/src/pages/instances-view.tsx +++ b/packages/ui/src/pages/instances-view.tsx @@ -1,5 +1,7 @@ -import { Copy, Edit2, Plus, Trash2 } from "lucide-react"; +import { CopyIcon, EditIcon, Plus, RocketIcon, Trash2Icon } from "lucide-react"; import { useEffect, useState } from "react"; +import { toast } from "sonner"; +import { startGame } from "@/client"; import InstanceCreationModal from "@/components/instance-creation-modal"; import InstanceEditorModal from "@/components/instance-editor-modal"; import { Button } from "@/components/ui/button"; @@ -12,9 +14,9 @@ import { DialogTitle, } from "@/components/ui/dialog"; import { Input } from "@/components/ui/input"; -import { toNumber } from "@/lib/tsrs-utils"; +import { cn } from "@/lib/utils"; import { useInstanceStore } from "@/models/instance"; -import type { Instance } from "../types/bindings/instance"; +import type { Instance } from "@/types"; export function InstancesView() { const instancesStore = useInstanceStore(); @@ -76,21 +78,6 @@ export function InstancesView() { setShowDuplicateModal(false); }; - const formatDate = (timestamp: number): string => - new Date(timestamp * 1000).toLocaleDateString(); - - const formatLastPlayed = (timestamp: number): string => { - const date = new Date(timestamp * 1000); - const now = new Date(); - const diff = now.getTime() - date.getTime(); - const days = Math.floor(diff / (1000 * 60 * 60 * 24)); - - if (days === 0) return "Today"; - if (days === 1) return "Yesterday"; - if (days < 7) return `${days} days ago`; - return date.toLocaleDateString(); - }; - return (
@@ -115,7 +102,7 @@ export function InstancesView() {
) : ( -
    +
      {instancesStore.instances.map((instance) => { const isActive = instancesStore.activeInstance?.id === instance.id; @@ -123,98 +110,109 @@ export function InstancesView() {
    • instancesStore.setActiveInstance(instance)} - onKeyDown={(e) => - e.key === "Enter" && - instancesStore.setActiveInstance(instance) - } - className={`relative p-4 text-left border-2 transition-all cursor-pointer hover:border-blue-500 ${ - isActive ? "border-blue-500" : "border-transparent" - } bg-gray-100 dark:bg-gray-800`} + onKeyDown={async (e) => { + if (e.key === "Enter") { + try { + await instancesStore.setActiveInstance(instance); + } catch (e) { + console.error("Failed to set active instance:", e); + toast.error("Error setting active instance"); + } + } + }} + className="cursor-pointer" > - {/* Instance Icon */} - {instance.iconPath ? ( -
      - {instance.name} -
      - ) : ( -
      - - {instance.name.charAt(0).toUpperCase()} - -
      - )} - -

      - {instance.name} -

      - -
      - {instance.versionId ? ( -

      Version: {instance.versionId}

      - ) : ( -

      No version selected

      - )} - - {instance.modLoader && ( -

      - Mod Loader:{" "} - {instance.modLoader} -

      +
      +
      + {instance.iconPath ? ( +
      + {instance.name} +
      + ) : ( +
      + + {instance.name.charAt(0).toUpperCase()} + +
      + )} + +
      +

      {instance.name}

      + {instance.versionId ? ( +

      + {instance.versionId} +

      + ) : ( +

      + No version selected +

      + )} +
      +
      -

      - Created: {formatDate(toNumber(instance.createdAt))} -

      - - {instance.lastPlayed && ( -

      - Last played:{" "} - {formatLastPlayed(toNumber(instance.lastPlayed))} -

      - )} -
      - - {/* Action Buttons */} -
      - - - - - +
      +
      + + + + +
      +
      • ); -- cgit v1.2.3-70-g09d2