feat(ui): add new ui project

1 files changed, 662 insertions, 0 deletions

diff --git a/packages/ui-new/src/pages/versions-view.tsx b/packages/ui-new/src/pages/versions-view.tsx
new file mode 100644
index 0000000..7f44611
--- /dev/null
+++ b/packages/ui-new/src/pages/versions-view.tsx
@@ -0,0 +1,662 @@
+import { invoke } from "@tauri-apps/api/core";
+import { listen, type UnlistenFn } from "@tauri-apps/api/event";
+import { Coffee, Loader2, Search, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useGameStore } from "../stores/game-store";
+import { useInstancesStore } from "../stores/instances-store";
+import type { Version } from "../types/bindings/manifest";
+
+interface InstalledModdedVersion {
+  id: string;
+  javaVersion?: number;
+}
+
+type TypeFilter = "all" | "release" | "snapshot" | "installed";
+
+export function VersionsView() {
+  const { versions, selectedVersion, loadVersions, setSelectedVersion } =
+    useGameStore();
+  const { activeInstanceId } = useInstancesStore();
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [typeFilter, setTypeFilter] = useState<TypeFilter>("all");
+  const [installedModdedVersions, setInstalledModdedVersions] = useState<
+    InstalledModdedVersion[]
+  >([]);
+  const [, setIsLoadingModded] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [versionToDelete, setVersionToDelete] = useState<string | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [selectedVersionMetadata, setSelectedVersionMetadata] = useState<{
+    id: string;
+    javaVersion?: number;
+    isInstalled: boolean;
+  } | null>(null);
+  const [isLoadingMetadata, setIsLoadingMetadata] = useState(false);
+  const [showModLoaderSelector, setShowModLoaderSelector] = useState(false);
+
+  const normalizedQuery = searchQuery.trim().toLowerCase().replace(/。/g, ".");
+
+  // Load installed modded versions with Java version info
+  const loadInstalledModdedVersions = useCallback(async () => {
+    if (!activeInstanceId) {
+      setInstalledModdedVersions([]);
+      setIsLoadingModded(false);
+      return;
+    }
+
+    setIsLoadingModded(true);
+    try {
+      const allInstalled = await invoke<Array<{ id: string; type: string }>>(
+        "list_installed_versions",
+        { instanceId: activeInstanceId },
+      );
+
+      const moddedIds = allInstalled
+        .filter((v) => v.type === "fabric" || v.type === "forge")
+        .map((v) => v.id);
+
+      const versionsWithJava = await Promise.all(
+        moddedIds.map(async (id) => {
+          try {
+            const javaVersion = await invoke<number | null>(
+              "get_version_java_version",
+              {
+                instanceId: activeInstanceId,
+                versionId: id,
+              },
+            );
+            return {
+              id,
+              javaVersion: javaVersion ?? undefined,
+            };
+          } catch (e) {
+            console.error(`Failed to get Java version for ${id}:`, e);
+            return { id, javaVersion: undefined };
+          }
+        }),
+      );
+
+      setInstalledModdedVersions(versionsWithJava);
+    } catch (e) {
+      console.error("Failed to load installed modded versions:", e);
+      toast.error("Error loading modded versions");
+    } finally {
+      setIsLoadingModded(false);
+    }
+  }, [activeInstanceId]);
+
+  // Combined versions list (vanilla + modded)
+  const allVersions = (() => {
+    const moddedVersions: Version[] = installedModdedVersions.map((v) => {
+      const versionType = v.id.startsWith("fabric-loader-")
+        ? "fabric"
+        : v.id.includes("-forge-")
+          ? "forge"
+          : "fabric";
+      return {
+        id: v.id,
+        type: versionType,
+        url: "",
+        time: "",
+        releaseTime: new Date().toISOString(),
+        javaVersion: BigInt(v.javaVersion ?? 0),
+        isInstalled: true,
+      };
+    });
+    return [...moddedVersions, ...versions];
+  })();
+
+  // Filter versions based on search and type filter
+  const filteredVersions = allVersions.filter((version) => {
+    if (typeFilter === "release" && version.type !== "release") return false;
+    if (typeFilter === "snapshot" && version.type !== "snapshot") return false;
+    if (typeFilter === "installed" && !version.isInstalled) return false;
+
+    if (
+      normalizedQuery &&
+      !version.id.toLowerCase().includes(normalizedQuery)
+    ) {
+      return false;
+    }
+
+    return true;
+  });
+
+  // Get version badge styling
+  const getVersionBadge = (type: string) => {
+    switch (type) {
+      case "release":
+        return {
+          text: "Release",
+          variant: "default" as const,
+          className: "bg-emerald-500 hover:bg-emerald-600",
+        };
+      case "snapshot":
+        return {
+          text: "Snapshot",
+          variant: "secondary" as const,
+          className: "bg-amber-500 hover:bg-amber-600",
+        };
+      case "fabric":
+        return {
+          text: "Fabric",
+          variant: "outline" as const,
+          className: "border-indigo-500 text-indigo-700 dark:text-indigo-300",
+        };
+      case "forge":
+        return {
+          text: "Forge",
+          variant: "outline" as const,
+          className: "border-orange-500 text-orange-700 dark:text-orange-300",
+        };
+      case "modpack":
+        return {
+          text: "Modpack",
+          variant: "outline" as const,
+          className: "border-purple-500 text-purple-700 dark:text-purple-300",
+        };
+      default:
+        return {
+          text: type,
+          variant: "outline" as const,
+          className: "border-gray-500 text-gray-700 dark:text-gray-300",
+        };
+    }
+  };
+
+  // Load version metadata
+  const loadVersionMetadata = useCallback(
+    async (versionId: string) => {
+      if (!versionId || !activeInstanceId) {
+        setSelectedVersionMetadata(null);
+        return;
+      }
+
+      setIsLoadingMetadata(true);
+      try {
+        const metadata = await invoke<{
+          id: string;
+          javaVersion?: number;
+          isInstalled: boolean;
+        }>("get_version_metadata", {
+          instanceId: activeInstanceId,
+          versionId,
+        });
+        setSelectedVersionMetadata(metadata);
+      } catch (e) {
+        console.error("Failed to load version metadata:", e);
+        setSelectedVersionMetadata(null);
+      } finally {
+        setIsLoadingMetadata(false);
+      }
+    },
+    [activeInstanceId],
+  );
+
+  // Get base version for mod loader selector
+  const selectedBaseVersion = (() => {
+    if (!selectedVersion) return "";
+
+    if (selectedVersion.startsWith("fabric-loader-")) {
+      const parts = selectedVersion.split("-");
+      return parts[parts.length - 1];
+    }
+    if (selectedVersion.includes("-forge-")) {
+      return selectedVersion.split("-forge-")[0];
+    }
+
+    const version = versions.find((v) => v.id === selectedVersion);
+    return version ? selectedVersion : "";
+  })();
+
+  // Handle version deletion
+  const handleDeleteVersion = async () => {
+    if (!versionToDelete || !activeInstanceId) return;
+
+    setIsDeleting(true);
+    try {
+      await invoke("delete_version", {
+        instanceId: activeInstanceId,
+        versionId: versionToDelete,
+      });
+
+      if (selectedVersion === versionToDelete) {
+        setSelectedVersion("");
+      }
+
+      setShowDeleteDialog(false);
+      setVersionToDelete(null);
+      toast.success("Version deleted successfully");
+
+      await loadVersions(activeInstanceId);
+      await loadInstalledModdedVersions();
+    } catch (e) {
+      console.error("Failed to delete version:", e);
+      toast.error(`Failed to delete version: ${e}`);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  // Show delete confirmation dialog
+  const showDeleteConfirmation = (versionId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setVersionToDelete(versionId);
+    setShowDeleteDialog(true);
+  };
+
+  // Setup event listeners for version updates
+  useEffect(() => {
+    let unlisteners: UnlistenFn[] = [];
+
+    const setupEventListeners = async () => {
+      try {
+        const versionDeletedUnlisten = await listen(
+          "version-deleted",
+          async () => {
+            await loadVersions(activeInstanceId ?? undefined);
+            await loadInstalledModdedVersions();
+          },
+        );
+
+        const downloadCompleteUnlisten = await listen(
+          "download-complete",
+          async () => {
+            await loadVersions(activeInstanceId ?? undefined);
+            await loadInstalledModdedVersions();
+          },
+        );
+
+        const versionInstalledUnlisten = await listen(
+          "version-installed",
+          async () => {
+            await loadVersions(activeInstanceId ?? undefined);
+            await loadInstalledModdedVersions();
+          },
+        );
+
+        const fabricInstalledUnlisten = await listen(
+          "fabric-installed",
+          async () => {
+            await loadVersions(activeInstanceId ?? undefined);
+            await loadInstalledModdedVersions();
+          },
+        );
+
+        const forgeInstalledUnlisten = await listen(
+          "forge-installed",
+          async () => {
+            await loadVersions(activeInstanceId ?? undefined);
+            await loadInstalledModdedVersions();
+          },
+        );
+
+        unlisteners = [
+          versionDeletedUnlisten,
+          downloadCompleteUnlisten,
+          versionInstalledUnlisten,
+          fabricInstalledUnlisten,
+          forgeInstalledUnlisten,
+        ];
+      } catch (e) {
+        console.error("Failed to setup event listeners:", e);
+      }
+    };
+
+    setupEventListeners();
+    loadInstalledModdedVersions();
+
+    return () => {
+      unlisteners.forEach((unlisten) => {
+        unlisten();
+      });
+    };
+  }, [activeInstanceId, loadVersions, loadInstalledModdedVersions]);
+
+  // Load metadata when selected version changes
+  useEffect(() => {
+    if (selectedVersion) {
+      loadVersionMetadata(selectedVersion);
+    } else {
+      setSelectedVersionMetadata(null);
+    }
+  }, [selectedVersion, loadVersionMetadata]);
+
+  return (
+    <div className="h-full flex flex-col p-6 overflow-hidden">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-3xl font-black bg-clip-text text-transparent bg-linear-to-r from-gray-900 to-gray-600 dark:from-white dark:to-white/60">
+          Version Manager
+        </h2>
+        <div className="text-sm dark:text-white/40 text-black/50">
+          Select a version to play or modify
+        </div>
+      </div>
+
+      <div className="flex-1 grid grid-cols-1 lg:grid-cols-3 gap-6 overflow-hidden">
+        {/* Left: Version List */}
+        <div className="lg:col-span-2 flex flex-col gap-4 overflow-hidden">
+          {/* Search and Filters */}
+          <div className="flex gap-3">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                type="text"
+                placeholder="Search versions..."
+                className="pl-9 bg-white/60 dark:bg-black/20 border-black/10 dark:border-white/10 dark:text-white text-gray-900 placeholder-black/30 dark:placeholder-white/30 focus:border-indigo-500/50 dark:focus:bg-black/40 focus:bg-white/80 backdrop-blur-sm"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
+          </div>
+
+          {/* Type Filter Tabs */}
+          <Tabs
+            value={typeFilter}
+            onValueChange={(v) => setTypeFilter(v as TypeFilter)}
+            className="w-full"
+          >
+            <TabsList className="grid grid-cols-4 bg-white/60 dark:bg-black/20 border-black/5 dark:border-white/5">
+              <TabsTrigger value="all">All</TabsTrigger>
+              <TabsTrigger value="release">Release</TabsTrigger>
+              <TabsTrigger value="snapshot">Snapshot</TabsTrigger>
+              <TabsTrigger value="installed">Installed</TabsTrigger>
+            </TabsList>
+          </Tabs>
+
+          {/* Version List */}
+          <ScrollArea className="flex-1 pr-2">
+            {versions.length === 0 ? (
+              <div className="flex items-center justify-center h-40 dark:text-white/30 text-black/30 italic animate-pulse">
+                Loading versions...
+              </div>
+            ) : filteredVersions.length === 0 ? (
+              <div className="flex flex-col items-center justify-center h-40 dark:text-white/30 text-black/30 gap-2">
+                <span className="text-2xl">👻</span>
+                <span>No matching versions found</span>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {filteredVersions.map((version) => {
+                  const badge = getVersionBadge(version.type);
+                  const isSelected = selectedVersion === version.id;
+
+                  return (
+                    <Card
+                      key={version.id}
+                      className={`w-full cursor-pointer transition-all duration-200 relative overflow-hidden group ${
+                        isSelected
+                          ? "border-indigo-200 dark:border-indigo-500/50 bg-indigo-50 dark:bg-indigo-600/20 shadow-[0_0_20px_rgba(99,102,241,0.2)]"
+                          : "border-black/5 dark:border-white/5 bg-white/40 dark:bg-white/5 hover:bg-white/60 dark:hover:bg-white/10 hover:border-black/10 dark:hover:border-white/10 hover:translate-x-1"
+                      }`}
+                      onClick={() => setSelectedVersion(version.id)}
+                    >
+                      {isSelected && (
+                        <div className="absolute inset-0 bg-linear-to-r from-indigo-500/10 to-transparent pointer-events-none" />
+                      )}
+
+                      <CardContent className="p-4">
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-4 flex-1">
+                            <Badge
+                              variant={badge.variant}
+                              className={badge.className}
+                            >
+                              {badge.text}
+                            </Badge>
+                            <div className="flex-1">
+                              <div
+                                className={`font-bold font-mono text-lg tracking-tight ${
+                                  isSelected
+                                    ? "text-black dark:text-white"
+                                    : "text-gray-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white"
+                                }`}
+                              >
+                                {version.id}
+                              </div>
+                              <div className="flex items-center gap-2 mt-0.5">
+                                {version.releaseTime &&
+                                  version.type !== "fabric" &&
+                                  version.type !== "forge" && (
+                                    <div className="text-xs dark:text-white/30 text-black/30">
+                                      {new Date(
+                                        version.releaseTime,
+                                      ).toLocaleDateString()}
+                                    </div>
+                                  )}
+                                {version.javaVersion && (
+                                  <div className="flex items-center gap-1 text-xs dark:text-white/40 text-black/40">
+                                    <Coffee className="h-3 w-3 opacity-60" />
+                                    <span className="font-medium">
+                                      Java {version.javaVersion}
+                                    </span>
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          </div>
+
+                          <div className="flex items-center gap-2">
+                            {version.isInstalled && (
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="opacity-0 group-hover:opacity-100 transition-opacity text-red-500 dark:text-red-400 hover:bg-red-500/10 dark:hover:bg-red-500/20"
+                                onClick={(e) =>
+                                  showDeleteConfirmation(version.id, e)
+                                }
+                                title="Delete version"
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                            )}
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  );
+                })}
+              </div>
+            )}
+          </ScrollArea>
+        </div>
+
+        {/* Right: Version Details */}
+        <div className="flex flex-col gap-6">
+          <Card className="border-black/5 dark:border-white/5 bg-white/40 dark:bg-white/5 backdrop-blur-sm">
+            <CardHeader>
+              <CardTitle className="text-lg">Version Details</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {selectedVersion ? (
+                <>
+                  <div>
+                    <div className="text-sm text-muted-foreground mb-1">
+                      Selected Version
+                    </div>
+                    <div className="font-mono text-xl font-bold">
+                      {selectedVersion}
+                    </div>
+                  </div>
+
+                  {isLoadingMetadata ? (
+                    <div className="flex items-center gap-2">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      <span className="text-sm">Loading metadata...</span>
+                    </div>
+                  ) : selectedVersionMetadata ? (
+                    <div className="space-y-3">
+                      <div>
+                        <div className="text-sm text-muted-foreground mb-1">
+                          Installation Status
+                        </div>
+                        <Badge
+                          variant={
+                            selectedVersionMetadata.isInstalled
+                              ? "default"
+                              : "outline"
+                          }
+                        >
+                          {selectedVersionMetadata.isInstalled
+                            ? "Installed"
+                            : "Not Installed"}
+                        </Badge>
+                      </div>
+
+                      {selectedVersionMetadata.javaVersion && (
+                        <div>
+                          <div className="text-sm text-muted-foreground mb-1">
+                            Java Version
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <Coffee className="h-4 w-4" />
+                            <span>
+                              Java {selectedVersionMetadata.javaVersion}
+                            </span>
+                          </div>
+                        </div>
+                      )}
+
+                      {!selectedVersionMetadata.isInstalled && (
+                        <Button
+                          className="w-full"
+                          onClick={() => setShowModLoaderSelector(true)}
+                        >
+                          Install with Mod Loader
+                        </Button>
+                      )}
+                    </div>
+                  ) : null}
+                </>
+              ) : (
+                <div className="text-center py-8 text-muted-foreground">
+                  Select a version to view details
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Mod Loader Installation */}
+          {showModLoaderSelector && selectedBaseVersion && (
+            <Card className="border-black/5 dark:border-white/5 bg-white/40 dark:bg-white/5 backdrop-blur-sm">
+              <CardHeader>
+                <CardTitle className="text-lg">Install Mod Loader</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="text-sm text-muted-foreground">
+                  Install {selectedBaseVersion} with Fabric or Forge
+                </div>
+                <div className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    className="flex-1"
+                    onClick={async () => {
+                      if (!activeInstanceId) return;
+                      try {
+                        await invoke("install_fabric", {
+                          instanceId: activeInstanceId,
+                          gameVersion: selectedBaseVersion,
+                          loaderVersion: "latest",
+                        });
+                        toast.success("Fabric installation started");
+                        setShowModLoaderSelector(false);
+                      } catch (e) {
+                        console.error("Failed to install Fabric:", e);
+                        toast.error(`Failed to install Fabric: ${e}`);
+                      }
+                    }}
+                  >
+                    Install Fabric
+                  </Button>
+                  <Button
+                    variant="outline"
+                    className="flex-1"
+                    onClick={async () => {
+                      if (!activeInstanceId) return;
+                      try {
+                        await invoke("install_forge", {
+                          instanceId: activeInstanceId,
+                          gameVersion: selectedBaseVersion,
+                          installerVersion: "latest",
+                        });
+                        toast.success("Forge installation started");
+                        setShowModLoaderSelector(false);
+                      } catch (e) {
+                        console.error("Failed to install Forge:", e);
+                        toast.error(`Failed to install Forge: ${e}`);
+                      }
+                    }}
+                  >
+                    Install Forge
+                  </Button>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setShowModLoaderSelector(false)}
+                >
+                  Cancel
+                </Button>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete Version</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete version "{versionToDelete}"? This
+              action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setShowDeleteDialog(false);
+                setVersionToDelete(null);
+              }}
+              disabled={isDeleting}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDeleteVersion}
+              disabled={isDeleting}
+            >
+              {isDeleting ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Deleting...
+                </>
+              ) : (
+                "Delete"
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}