refactor: workshop project page

src/modules/workshop/api/index.ts

@@ -3,6 +3,7 @@ export { useCreateProject } from "./useCreateProject";
 export { useDeleteProject } from "./useDeleteProject";
 export { useImportFromModpkg } from "./useImportFromModpkg";
 export { usePackProject } from "./usePackProject";
+export { useProjectActions } from "./useProjectActions";
 export { projectThumbnailOptions, useProjectThumbnail } from "./useProjectThumbnail";
 export { useRenameProject } from "./useRenameProject";
 export { useSaveProjectConfig } from "./useSaveProjectConfig";

src/modules/workshop/api/useProjectActions.ts

@@ -0,0 +1,86 @@
+import type { NavigateFn } from "@tanstack/react-router";
+import { useState } from "react";
+
+import { api, type PackResult, type WorkshopProject } from "@/lib/tauri";
+
+import { useDeleteProject } from "./useDeleteProject";
+import { usePackProject } from "./usePackProject";
+import { useValidateProject } from "./useValidateProject";
+
+export function useProjectActions(project: WorkshopProject | undefined, navigate: NavigateFn) {
+  const [packDialogOpen, setPackDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [packResult, setPackResult] = useState<PackResult | null>(null);
+
+  const deleteProject = useDeleteProject();
+  const packProject = usePackProject();
+  const { data: validation, isLoading: validationLoading } = useValidateProject(
+    project?.path ?? "",
+    packDialogOpen,
+  );
+
+  function handlePack(format: "modpkg" | "fantome") {
+    if (!project) return;
+    packProject.mutate(
+      { projectPath: project.path, format },
+      {
+        onSuccess: setPackResult,
+        onError: (err) => console.error("Failed to pack project:", err.message),
+      },
+    );
+  }
+
+  function handleOpenPackDialog() {
+    setPackResult(null);
+    setPackDialogOpen(true);
+  }
+
+  function handleClosePackDialog() {
+    setPackDialogOpen(false);
+    setPackResult(null);
+  }
+
+  function handleDeleteProject() {
+    if (!project) return;
+    deleteProject.mutate(project.path, {
+      onSuccess: () => {
+        navigate({ to: "/workshop" });
+      },
+      onError: (err) => console.error("Failed to delete project:", err.message),
+    });
+  }
+
+  function openDeleteDialog() {
+    setDeleteDialogOpen(true);
+  }
+
+  function closeDeleteDialog() {
+    setDeleteDialogOpen(false);
+  }
+
+  async function handleOpenLocation() {
+    if (!project) return;
+    try {
+      await api.revealInExplorer(project.path);
+    } catch (error) {
+      console.error("Failed to open location:", error);
+    }
+  }
+
+  return {
+    packDialogOpen,
+    packResult,
+    deleteDialogOpen,
+    validation: validation ?? null,
+    validationLoading,
+    isPacking: packProject.isPending,
+    isDeleting: deleteProject.isPending,
+    handlePack,
+    handleOpenPackDialog,
+    handleClosePackDialog,
+    handleDeleteProject,
+    handleOpenLocation,
+    openDeleteDialog,
+    closeDeleteDialog,
+  };
+}

src/modules/workshop/components/ProjectHeader.tsx

@@ -0,0 +1,75 @@
+import { Link } from "@tanstack/react-router";
+import { LuArrowLeft, LuEllipsisVertical, LuFolderOpen, LuPackage, LuTrash2 } from "react-icons/lu";
+
+import { Button, IconButton, Menu } from "@/components";
+import type { WorkshopProject } from "@/lib/tauri";
+
+interface ProjectHeaderProps {
+  project: WorkshopProject;
+  onPack: () => void;
+  onDelete: () => void;
+  onOpenLocation: () => void;
+}
+
+export function ProjectHeader({ project, onPack, onDelete, onOpenLocation }: ProjectHeaderProps) {
+  return (
+    <div className="flex items-center gap-3 border-b border-surface-700 px-6 py-3">
+      <Link to="/workshop">
+        <IconButton
+          icon={<LuArrowLeft className="h-4 w-4" />}
+          variant="ghost"
+          size="sm"
+          aria-label="Back to Workshop"
+        />
+      </Link>
+
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-2">
+          <h1 className="truncate text-lg font-semibold text-surface-100">{project.displayName}</h1>
+          <span className="shrink-0 rounded-full bg-surface-700 px-2 py-0.5 text-xs text-surface-400">
+            v{project.version}
+          </span>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          left={<LuPackage className="h-4 w-4" />}
+          onClick={onPack}
+        >
+          Pack
+        </Button>
+        <Menu.Root>
+          <Menu.Trigger
+            render={
+              <IconButton
+                icon={<LuEllipsisVertical className="h-4 w-4" />}
+                variant="ghost"
+                size="sm"
+              />
+            }
+          />
+          <Menu.Portal>
+            <Menu.Positioner>
+              <Menu.Popup>
+                <Menu.Item icon={<LuFolderOpen className="h-4 w-4" />} onClick={onOpenLocation}>
+                  Open Location
+                </Menu.Item>
+                <Menu.Separator />
+                <Menu.Item
+                  icon={<LuTrash2 className="h-4 w-4" />}
+                  variant="danger"
+                  onClick={onDelete}
+                >
+                  Delete
+                </Menu.Item>
+              </Menu.Popup>
+            </Menu.Positioner>
+          </Menu.Portal>
+        </Menu.Root>
+      </div>
+    </div>
+  );
+}

src/modules/workshop/components/index.ts

@@ -11,5 +11,6 @@ export { PackDialog } from "./PackDialog";
 export { ProjectCard } from "./ProjectCard";
 export { ProjectProvider, useProjectContext } from "./ProjectContext";
 export { ProjectGrid } from "./ProjectGrid";
+export { ProjectHeader } from "./ProjectHeader";
 export type { ViewMode } from "./WorkshopToolbar";
 export { WorkshopToolbar } from "./WorkshopToolbar";

src/routes/workshop/$projectName.tsx

@@ -1,18 +1,14 @@
 import { createFileRoute, Link, Outlet, useNavigate } from "@tanstack/react-router";
-import { invoke } from "@tauri-apps/api/core";
-import { useState } from "react";
-import { LuArrowLeft, LuEllipsisVertical, LuFolderOpen, LuPackage, LuTrash2 } from "react-icons/lu";
+import { LuArrowLeft } from "react-icons/lu";
 
-import { Button, IconButton, Menu, NavTabs } from "@/components";
-import type { PackResult } from "@/lib/tauri";
+import { Button, NavTabs } from "@/components";
 import {
   DeleteConfirmDialog,
   LoadingState,
   PackDialog,
+  ProjectHeader,
   ProjectProvider,
-  useDeleteProject,
-  usePackProject,
-  useValidateProject,
+  useProjectActions,
   useWorkshopProjects,
 } from "@/modules/workshop";
 
@@ -27,17 +23,7 @@ function ProjectDetailLayout() {
   const { data: projects, isLoading } = useWorkshopProjects();
   const project = projects?.find((p) => p.name === projectName);
 
-  // Dialog state
-  const [packDialogOpen, setPackDialogOpen] = useState(false);
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [packResult, setPackResult] = useState<PackResult | null>(null);
-
-  const deleteProject = useDeleteProject();
-  const packProject = usePackProject();
-  const { data: validation, isLoading: validationLoading } = useValidateProject(
-    project?.path ?? "",
-    packDialogOpen,
-  );
+  const actions = useProjectActions(project, navigate);
 
   if (isLoading) {
     return <LoadingState />;
@@ -56,41 +42,6 @@ function ProjectDetailLayout() {
     );
   }
 
-  function handlePack(format: "modpkg" | "fantome") {
-    if (!project) return;
-    packProject.mutate(
-      { projectPath: project.path, format },
-      {
-        onSuccess: setPackResult,
-        onError: (err) => console.error("Failed to pack project:", err.message),
-      },
-    );
-  }
-
-  function handleClosePackDialog() {
-    setPackDialogOpen(false);
-    setPackResult(null);
-  }
-
-  function handleDeleteProject() {
-    if (!project) return;
-    deleteProject.mutate(project.path, {
-      onSuccess: () => {
-        navigate({ to: "/workshop" });
-      },
-      onError: (err) => console.error("Failed to delete project:", err.message),
-    });
-  }
-
-  async function handleOpenLocation() {
-    if (!project) return;
-    try {
-      await invoke("reveal_in_explorer", { path: project.path });
-    } catch (error) {
-      console.error("Failed to open location:", error);
-    }
-  }
-
   const tabs = [
     { to: "/workshop/$projectName", params: { projectName }, label: "Overview", exact: true },
     { to: "/workshop/$projectName/strings", params: { projectName }, label: "Strings" },
@@ -100,101 +51,37 @@ function ProjectDetailLayout() {
   return (
     <ProjectProvider project={project}>
       <div className="flex h-full flex-col">
-        {/* Header */}
-        <div className="flex items-center gap-3 border-b border-surface-700 px-6 py-3">
-          <Link to="/workshop">
-            <IconButton
-              icon={<LuArrowLeft className="h-4 w-4" />}
-              variant="ghost"
-              size="sm"
-              aria-label="Back to Workshop"
-            />
-          </Link>
-
-          <div className="min-w-0 flex-1">
-            <div className="flex items-center gap-2">
-              <h1 className="truncate text-lg font-semibold text-surface-100">
-                {project.displayName}
-              </h1>
-              <span className="shrink-0 rounded-full bg-surface-700 px-2 py-0.5 text-xs text-surface-400">
-                v{project.version}
-              </span>
-            </div>
-          </div>
-
-          <div className="flex items-center gap-2">
-            <Button
-              variant="outline"
-              size="sm"
-              left={<LuPackage className="h-4 w-4" />}
-              onClick={() => {
-                setPackResult(null);
-                setPackDialogOpen(true);
-              }}
-            >
-              Pack
-            </Button>
-            <Menu.Root>
-              <Menu.Trigger
-                render={
-                  <IconButton
-                    icon={<LuEllipsisVertical className="h-4 w-4" />}
-                    variant="ghost"
-                    size="sm"
-                  />
-                }
-              />
-              <Menu.Portal>
-                <Menu.Positioner>
-                  <Menu.Popup>
-                    <Menu.Item
-                      icon={<LuFolderOpen className="h-4 w-4" />}
-                      onClick={handleOpenLocation}
-                    >
-                      Open Location
-                    </Menu.Item>
-                    <Menu.Separator />
-                    <Menu.Item
-                      icon={<LuTrash2 className="h-4 w-4" />}
-                      variant="danger"
-                      onClick={() => setDeleteDialogOpen(true)}
-                    >
-                      Delete
-                    </Menu.Item>
-                  </Menu.Popup>
-                </Menu.Positioner>
-              </Menu.Portal>
-            </Menu.Root>
-          </div>
-        </div>
+        <ProjectHeader
+          project={project}
+          onPack={actions.handleOpenPackDialog}
+          onDelete={actions.openDeleteDialog}
+          onOpenLocation={actions.handleOpenLocation}
+        />
 
-        {/* NavTabs */}
         <NavTabs tabs={tabs} />
 
-        {/* Content */}
         <div className="flex-1 overflow-auto p-6">
           <Outlet />
         </div>
       </div>
 
-      {/* Dialogs */}
       <PackDialog
-        open={packDialogOpen}
+        open={actions.packDialogOpen}
         project={project}
-        validation={validation ?? null}
-        validationLoading={validationLoading}
-        onClose={handleClosePackDialog}
-        onPack={handlePack}
-        isPacking={packProject.isPending}
-        packResult={packResult}
+        validation={actions.validation}
+        validationLoading={actions.validationLoading}
+        onClose={actions.handleClosePackDialog}
+        onPack={actions.handlePack}
+        isPacking={actions.isPacking}
+        packResult={actions.packResult}
       />
 
       <DeleteConfirmDialog
-        open={deleteDialogOpen}
+        open={actions.deleteDialogOpen}
         project={project}
-        onClose={() => setDeleteDialogOpen(false)}
-        onConfirm={handleDeleteProject}
-        isPending={deleteProject.isPending}
+        onClose={actions.closeDeleteDialog}
+        onConfirm={actions.handleDeleteProject}
+        isPending={actions.isDeleting}
       />
     </ProjectProvider>
   );