fix(desktop): persist new workspace modal state

apps/desktop/src/renderer/components/NewWorkspaceModal/NewWorkspaceModal.tsx

@@ -9,51 +9,88 @@ import {
 import { toast } from "@superset/ui/sonner";
 import { Tabs, TabsList, TabsTrigger } from "@superset/ui/tabs";
 import { useNavigate } from "@tanstack/react-router";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { electronTrpc } from "renderer/lib/electron-trpc";
 import { useOpenProject } from "renderer/react-query/projects";
 import {
+	type NewWorkspaceModalTab,
 	useCloseNewWorkspaceModal,
+	useNewWorkspaceModalActiveTab,
+	useNewWorkspaceModalBranchesQuery,
+	useNewWorkspaceModalIssuesQuery,
 	useNewWorkspaceModalOpen,
-	usePreSelectedProjectId,
+	useNewWorkspaceModalPullRequestsQuery,
+	useSelectedNewWorkspaceModalProjectId,
+	useSetNewWorkspaceModalActiveTab,
+	useSetNewWorkspaceModalBranchesQuery,
+	useSetNewWorkspaceModalIssuesQuery,
+	useSetNewWorkspaceModalPullRequestsQuery,
+	useSetSelectedNewWorkspaceModalProjectId,
 } from "renderer/stores/new-workspace-modal";
 import { BranchesGroup } from "./components/BranchesGroup";
 import { IssuesGroup } from "./components/IssuesGroup";
 import { ProjectSelector } from "./components/ProjectSelector";
 import { PromptGroup } from "./components/PromptGroup";
 import { PullRequestsGroup } from "./components/PullRequestsGroup";
 
-type Tab = "prompt" | "issues" | "pull-requests" | "branches";
+const COMMAND_CLASS_NAME =
+	"[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 flex h-full w-full flex-1 flex-col overflow-hidden rounded-none";
 
 export function NewWorkspaceModal() {
 	const isOpen = useNewWorkspaceModalOpen();
 	const closeModal = useCloseNewWorkspaceModal();
-	const preSelectedProjectId = usePreSelectedProjectId();
-	const [activeTab, setActiveTab] = useState<Tab>("prompt");
-	const [selectedProjectId, setSelectedProjectId] = useState<string | null>(
-		null,
-	);
+	const activeTab = useNewWorkspaceModalActiveTab();
+	const setActiveTab = useSetNewWorkspaceModalActiveTab();
+	const selectedProjectId = useSelectedNewWorkspaceModalProjectId();
+	const setSelectedProjectId = useSetSelectedNewWorkspaceModalProjectId();
+	const issuesQuery = useNewWorkspaceModalIssuesQuery();
+	const setIssuesQuery = useSetNewWorkspaceModalIssuesQuery();
+	const pullRequestsQuery = useNewWorkspaceModalPullRequestsQuery();
+	const setPullRequestsQuery = useSetNewWorkspaceModalPullRequestsQuery();
+	const branchesQuery = useNewWorkspaceModalBranchesQuery();
+	const setBranchesQuery = useSetNewWorkspaceModalBranchesQuery();
 	const navigate = useNavigate();
 	const { openNew } = useOpenProject();
 
 	const { data: recentProjects = [] } =
 		electronTrpc.projects.getRecents.useQuery();
 
-	// Sync pre-selected project when modal opens
-	// biome-ignore lint/correctness/useExhaustiveDependencies: reset on modal open
 	useEffect(() => {
 		if (!isOpen) return;
-		if (preSelectedProjectId) {
-			setSelectedProjectId(preSelectedProjectId);
-		} else if (recentProjects.length > 0 && !selectedProjectId) {
-			setSelectedProjectId(recentProjects[0].id);
+		const hasSelectedProject = recentProjects.some(
+			(project) => project.id === selectedProjectId,
+		);
+		if (!hasSelectedProject) {
+			setSelectedProjectId(recentProjects[0]?.id ?? null);
 		}
-	}, [isOpen]);
+	}, [isOpen, recentProjects, selectedProjectId, setSelectedProjectId]);
 
 	const selectedProject = recentProjects.find(
-		(p) => p.id === selectedProjectId,
+		(project) => project.id === selectedProjectId,
 	);
 	const isListTab = activeTab !== "prompt";
+	const listQuery =
+		activeTab === "issues"
+			? issuesQuery
+			: activeTab === "branches"
+				? branchesQuery
+				: pullRequestsQuery;
+
+	const handleListQueryChange = (value: string) => {
+		switch (activeTab) {
+			case "issues":
+				setIssuesQuery(value);
+				return;
+			case "branches":
+				setBranchesQuery(value);
+				return;
+			case "pull-requests":
+				setPullRequestsQuery(value);
+				return;
+			default:
+				return;
+		}
+	};
 
 	const handleImportRepo = async () => {
 		closeModal();
@@ -87,7 +124,9 @@ export function NewWorkspaceModal() {
 				<div className="flex items-center justify-between border-b px-3 py-2">
 					<Tabs
 						value={activeTab}
-						onValueChange={(value) => setActiveTab(value as Tab)}
+						onValueChange={(value) =>
+							setActiveTab(value as NewWorkspaceModalTab)
+						}
 					>
 						<TabsList>
 							<TabsTrigger value="prompt">Prompt</TabsTrigger>
@@ -99,16 +138,20 @@ export function NewWorkspaceModal() {
 					<ProjectSelector
 						selectedProjectId={selectedProjectId}
 						selectedProjectName={selectedProject?.name ?? null}
-						recentProjects={recentProjects.filter((p) => Boolean(p.id))}
+						recentProjects={recentProjects.filter((project) =>
+							Boolean(project.id),
+						)}
 						onSelectProject={setSelectedProjectId}
 						onImportRepo={handleImportRepo}
 						onNewProject={handleNewProject}
 					/>
 				</div>
 
 				{isListTab ? (
-					<Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 flex h-full w-full flex-1 flex-col overflow-hidden rounded-none">
+					<Command className={COMMAND_CLASS_NAME}>
 						<CommandInput
+							value={listQuery}
+							onValueChange={handleListQueryChange}
 							placeholder={
 								activeTab === "issues"
 									? "Search by slug, title, or description"

apps/desktop/src/renderer/components/NewWorkspaceModal/components/BranchesGroup/BranchesGroup.tsx

@@ -8,6 +8,11 @@ import { electronTrpc } from "renderer/lib/electron-trpc";
 import { useCreateBranchWorkspace } from "renderer/react-query/workspaces";
 import { navigateToWorkspace } from "renderer/routes/_authenticated/_dashboard/utils/workspace-navigation";
 import { useHotkeysStore } from "renderer/stores/hotkeys/store";
+import {
+	useClearNewWorkspaceModalInputs,
+	useClearNewWorkspaceModalInputsIfDraftVersion,
+	useNewWorkspaceModalDraftVersion,
+} from "renderer/stores/new-workspace-modal";
 
 interface BranchesGroupProps {
 	projectId: string | null;
@@ -19,6 +24,10 @@ export function BranchesGroup({ projectId, onClose }: BranchesGroupProps) {
 	const modKey = platform === "darwin" ? "⌘" : "Ctrl";
 	const navigate = useNavigate();
 	const createBranchWorkspace = useCreateBranchWorkspace();
+	const clearInputs = useClearNewWorkspaceModalInputs();
+	const clearInputsIfDraftVersion =
+		useClearNewWorkspaceModalInputsIfDraftVersion();
+	const draftVersion = useNewWorkspaceModalDraftVersion();
 
 	const { data, isLoading } = electronTrpc.projects.getBranches.useQuery(
 		{ projectId: projectId ?? "" },
@@ -52,29 +61,40 @@ export function BranchesGroup({ projectId, onClose }: BranchesGroupProps) {
 	const handleCreate = useCallback(
 		(branchName: string) => {
 			if (!projectId) return;
+			const submitDraftVersion = draftVersion;
+			const createWorkspacePromise = createBranchWorkspace.mutateAsync({
+				projectId,
+				branch: branchName,
+			});
 			onClose();
-			toast.promise(
-				createBranchWorkspace.mutateAsync({
-					projectId,
-					branch: branchName,
-				}),
-				{
-					loading: "Creating workspace from branch...",
-					success: "Workspace created",
-					error: (err) =>
-						err instanceof Error ? err.message : "Failed to create workspace",
-				},
-			);
+			toast.promise(createWorkspacePromise, {
+				loading: "Creating workspace from branch...",
+				success: "Workspace created",
+				error: (err) =>
+					err instanceof Error ? err.message : "Failed to create workspace",
+			});
+			void createWorkspacePromise
+				.then(() => {
+					clearInputsIfDraftVersion(submitDraftVersion);
+				})
+				.catch(() => undefined);
 		},
-		[projectId, onClose, createBranchWorkspace],
+		[
+			clearInputsIfDraftVersion,
+			createBranchWorkspace,
+			draftVersion,
+			onClose,
+			projectId,
+		],
 	);
 
 	const handleOpen = useCallback(
 		(workspaceId: string) => {
+			clearInputs();
 			onClose();
 			navigateToWorkspace(workspaceId, navigate);
 		},
-		[onClose, navigate],
+		[clearInputs, onClose, navigate],
 	);
 
 	if (!projectId) {

apps/desktop/src/renderer/components/NewWorkspaceModal/components/IssuesGroup/IssuesGroup.tsx

@@ -19,6 +19,11 @@ import {
 } from "renderer/routes/_authenticated/_dashboard/tasks/components/TasksView/components/shared/StatusIcon";
 import { navigateToWorkspace } from "renderer/routes/_authenticated/_dashboard/utils/workspace-navigation";
 import { useCollections } from "renderer/routes/_authenticated/providers/CollectionsProvider";
+import {
+	useClearNewWorkspaceModalInputs,
+	useClearNewWorkspaceModalInputsIfDraftVersion,
+	useNewWorkspaceModalDraftVersion,
+} from "renderer/stores/new-workspace-modal";
 
 interface IssuesGroupProps {
 	projectId: string | null;
@@ -30,6 +35,10 @@ export function IssuesGroup({ projectId, onClose }: IssuesGroupProps) {
 	const navigate = useNavigate();
 	const { gateFeature } = usePaywall();
 	const createWorkspace = useCreateWorkspace();
+	const clearInputs = useClearNewWorkspaceModalInputs();
+	const clearInputsIfDraftVersion =
+		useClearNewWorkspaceModalInputsIfDraftVersion();
+	const draftVersion = useNewWorkspaceModalDraftVersion();
 
 	const { data: integrations } = useLiveQuery(
 		(q) =>
@@ -125,26 +134,31 @@ export function IssuesGroup({ projectId, onClose }: IssuesGroupProps) {
 						}
 						const existingId = workspaceByBranch.get(task.slug.toLowerCase());
 						if (existingId) {
+							clearInputs();
 							onClose();
 							navigateToWorkspace(existingId, navigate);
 							return;
 						}
+						const submitDraftVersion = draftVersion;
+						const createWorkspacePromise = createWorkspace.mutateAsync({
+							projectId,
+							name: task.title,
+							branchName: task.slug.toLowerCase(),
+						});
 						onClose();
-						toast.promise(
-							createWorkspace.mutateAsync({
-								projectId,
-								name: task.title,
-								branchName: task.slug.toLowerCase(),
-							}),
-							{
-								loading: "Creating workspace...",
-								success: "Workspace created",
-								error: (err) =>
-									err instanceof Error
-										? err.message
-										: "Failed to create workspace",
-							},
-						);
+						toast.promise(createWorkspacePromise, {
+							loading: "Creating workspace...",
+							success: "Workspace created",
+							error: (err) =>
+								err instanceof Error
+									? err.message
+									: "Failed to create workspace",
+						});
+						void createWorkspacePromise
+							.then(() => {
+								clearInputsIfDraftVersion(submitDraftVersion);
+							})
+							.catch(() => undefined);
 					}}
 					className="group h-12"
 				>