feat: implement project setup dialog and refactor sidebar integration

- Added a new ProjectSetupDialog component to facilitate project specification generation, enhancing user experience by guiding users through project setup.
- Refactored the Sidebar component to integrate the new ProjectSetupDialog, replacing the previous inline dialog implementation for improved code organization and maintainability.
- Updated the sidebar to handle project overview and feature generation options, streamlining the project setup process.
- Removed the old dialog implementation from the Sidebar, reducing code duplication and improving clarity.

apps/app/src/components/layout/project-setup-dialog.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { Sparkles } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+
+interface ProjectSetupDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectOverview: string;
+  onProjectOverviewChange: (value: string) => void;
+  generateFeatures: boolean;
+  onGenerateFeaturesChange: (value: boolean) => void;
+  onCreateSpec: () => void;
+  onSkip: () => void;
+  isCreatingSpec: boolean;
+}
+
+export function ProjectSetupDialog({
+  open,
+  onOpenChange,
+  projectOverview,
+  onProjectOverviewChange,
+  generateFeatures,
+  onGenerateFeaturesChange,
+  onCreateSpec,
+  onSkip,
+  isCreatingSpec,
+}: ProjectSetupDialogProps) {
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(open) => {
+        if (!open && !isCreatingSpec) {
+          onSkip();
+        }
+      }}
+    >
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Set Up Your Project</DialogTitle>
+          <DialogDescription className="text-muted-foreground">
+            We didn&apos;t find an app_spec.txt file. Let us help you generate
+            your app_spec.txt to help describe your project for our system.
+            We&apos;ll analyze your project&apos;s tech stack and create a
+            comprehensive specification.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Project Overview</label>
+            <p className="text-xs text-muted-foreground">
+              Describe what your project does and what features you want to
+              build. Be as detailed as you want - this will help us create a
+              better specification.
+            </p>
+            <textarea
+              className="w-full h-48 p-3 rounded-md border border-border bg-background font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+              value={projectOverview}
+              onChange={(e) => onProjectOverviewChange(e.target.value)}
+              placeholder="e.g., A project management tool that allows teams to track tasks, manage sprints, and visualize progress through kanban boards. It should support user authentication, real-time updates, and file attachments..."
+              autoFocus
+            />
+          </div>
+
+          <div className="flex items-start space-x-3 pt-2">
+            <Checkbox
+              id="sidebar-generate-features"
+              checked={generateFeatures}
+              onCheckedChange={(checked) =>
+                onGenerateFeaturesChange(checked === true)
+              }
+            />
+            <div className="space-y-1">
+              <label
+                htmlFor="sidebar-generate-features"
+                className="text-sm font-medium cursor-pointer"
+              >
+                Generate feature list
+              </label>
+              <p className="text-xs text-muted-foreground">
+                Automatically create features in the features folder from the
+                implementation roadmap after the spec is generated.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={onSkip}>
+            Skip for now
+          </Button>
+          <Button
+            onClick={onCreateSpec}
+            disabled={!projectOverview.trim()}
+          >
+            <Sparkles className="w-4 h-4 mr-2" />
+            Generate Spec
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+

apps/app/src/components/layout/sidebar.tsx

@@ -79,10 +79,10 @@ import {
 } from "@/lib/project-init";
 import { toast } from "sonner";
 import { themeOptions } from "@/config/theme-options";
-import { Checkbox } from "@/components/ui/checkbox";
 import type { SpecRegenerationEvent } from "@/types/electron";
 import { DeleteProjectDialog } from "@/components/views/settings-view/components/delete-project-dialog";
 import { NewProjectModal } from "@/components/new-project-modal";
+import { ProjectSetupDialog } from "@/components/layout/project-setup-dialog";
 import {
   DndContext,
   DragEndEvent,
@@ -471,6 +471,12 @@ export function Sidebar() {
         toast.error("Failed to create specification", {
           description: result.error,
         });
+      } else {
+        // Show processing toast to inform user
+        toast.info("Generating app specification...", {
+          description:
+            "This may take a minute. You'll be notified when complete.",
+        });
       }
       // If successful, we'll wait for the events to update the state
     } catch (error) {
@@ -1904,79 +1910,17 @@ export function Sidebar() {
       </Dialog>
 
       {/* New Project Setup Dialog */}
-      <Dialog
+      <ProjectSetupDialog
         open={showSetupDialog}
-        onOpenChange={(open) => {
-          if (!open && !isCreatingSpec) {
-            handleSkipSetup();
-          }
-        }}
-      >
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>Set Up Your Project</DialogTitle>
-            <DialogDescription className="text-muted-foreground">
-              We didn&apos;t find an app_spec.txt file. Let us help you generate
-              your app_spec.txt to help describe your project for our system.
-              We&apos;ll analyze your project&apos;s tech stack and create a
-              comprehensive specification.
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className="space-y-4 py-4">
-            <div className="space-y-2">
-              <label className="text-sm font-medium">Project Overview</label>
-              <p className="text-xs text-muted-foreground">
-                Describe what your project does and what features you want to
-                build. Be as detailed as you want - this will help us create a
-                better specification.
-              </p>
-              <textarea
-                className="w-full h-48 p-3 rounded-md border border-border bg-background font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-ring"
-                value={projectOverview}
-                onChange={(e) => setProjectOverview(e.target.value)}
-                placeholder="e.g., A project management tool that allows teams to track tasks, manage sprints, and visualize progress through kanban boards. It should support user authentication, real-time updates, and file attachments..."
-                autoFocus
-              />
-            </div>
-
-            <div className="flex items-start space-x-3 pt-2">
-              <Checkbox
-                id="sidebar-generate-features"
-                checked={generateFeatures}
-                onCheckedChange={(checked) =>
-                  setGenerateFeatures(checked === true)
-                }
-              />
-              <div className="space-y-1">
-                <label
-                  htmlFor="sidebar-generate-features"
-                  className="text-sm font-medium cursor-pointer"
-                >
-                  Generate feature list
-                </label>
-                <p className="text-xs text-muted-foreground">
-                  Automatically create features in the features folder from the
-                  implementation roadmap after the spec is generated.
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <DialogFooter>
-            <Button variant="ghost" onClick={handleSkipSetup}>
-              Skip for now
-            </Button>
-            <Button
-              onClick={handleCreateInitialSpec}
-              disabled={!projectOverview.trim()}
-            >
-              <Sparkles className="w-4 h-4 mr-2" />
-              Generate Spec
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+        onOpenChange={setShowSetupDialog}
+        projectOverview={projectOverview}
+        onProjectOverviewChange={setProjectOverview}
+        generateFeatures={generateFeatures}
+        onGenerateFeaturesChange={setGenerateFeatures}
+        onCreateSpec={handleCreateInitialSpec}
+        onSkip={handleSkipSetup}
+        isCreatingSpec={isCreatingSpec}
+      />
 
       {/* New Project Onboarding Dialog */}
       <Dialog

apps/app/src/components/views/board-view.tsx

@@ -275,7 +275,7 @@ export function BoardView() {
     };
   }, []);
 
-  // Subscribe to spec regeneration events to clear state on completion
+  // Subscribe to spec regeneration events to clear creating state on completion
   useEffect(() => {
     const api = getElectronAPI();
     if (!api.specRegeneration) return;
@@ -495,6 +495,30 @@ export function BoardView() {
     }
   }, [currentProject, setFeatures]);
 
+  // Subscribe to spec regeneration complete events to refresh kanban board
+  useEffect(() => {
+    const api = getElectronAPI();
+    if (!api.specRegeneration) return;
+
+    const unsubscribe = api.specRegeneration.onEvent((event) => {
+      // Refresh the kanban board when spec regeneration completes for the current project
+      if (
+        event.type === "spec_regeneration_complete" &&
+        currentProject &&
+        event.projectPath === currentProject.path
+      ) {
+        console.log(
+          "[BoardView] Spec regeneration complete, refreshing features"
+        );
+        loadFeatures();
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [currentProject, loadFeatures]);
+
   // Load persisted categories from file
   const loadCategories = useCallback(async () => {
     if (!currentProject) return;