feat: refactor spec-view to folder pattern and add feature count selector

Closes #151

- Refactor spec-view.tsx from 1,230 lines to ~170 lines following folder-pattern.md
- Create unified CreateSpecDialog with all features from both dialogs:
  - featureCount selector (20/50/100) - was missing in spec-view
  - analyzeProject checkbox - was missing in sidebar
- Extract components: spec-header, spec-editor, spec-empty-state
- Extract hooks: use-spec-loading, use-spec-save, use-spec-generation
- Extract dialogs: create-spec-dialog, regenerate-spec-dialog
- Update sidebar to use new CreateSpecDialog with analyzeProject state
- Delete deprecated project-setup-dialog.tsx

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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

@@ -1,166 +0,0 @@
-
-import { Sparkles, Clock } 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";
-import { cn } from "@/lib/utils";
-
-// Feature count options
-export type FeatureCount = 20 | 50 | 100;
-const FEATURE_COUNT_OPTIONS: {
-  value: FeatureCount;
-  label: string;
-  warning?: string;
-}[] = [
-  { value: 20, label: "20" },
-  { value: 50, label: "50", warning: "May take up to 5 minutes" },
-  { value: 100, label: "100", warning: "May take up to 5 minutes" },
-];
-
-interface ProjectSetupDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  projectOverview: string;
-  onProjectOverviewChange: (value: string) => void;
-  generateFeatures: boolean;
-  onGenerateFeaturesChange: (value: boolean) => void;
-  featureCount: FeatureCount;
-  onFeatureCountChange: (value: FeatureCount) => void;
-  onCreateSpec: () => void;
-  onSkip: () => void;
-  isCreatingSpec: boolean;
-}
-
-export function ProjectSetupDialog({
-  open,
-  onOpenChange,
-  projectOverview,
-  onProjectOverviewChange,
-  generateFeatures,
-  onGenerateFeaturesChange,
-  featureCount,
-  onFeatureCountChange,
-  onCreateSpec,
-  onSkip,
-  isCreatingSpec,
-}: ProjectSetupDialogProps) {
-  return (
-    <Dialog
-      open={open}
-      onOpenChange={(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>
-
-          {/* Feature Count Selection - only shown when generateFeatures is enabled */}
-          {generateFeatures && (
-            <div className="space-y-2 pt-2 pl-7">
-              <label className="text-sm font-medium">Number of Features</label>
-              <div className="flex gap-2">
-                {FEATURE_COUNT_OPTIONS.map((option) => (
-                  <Button
-                    key={option.value}
-                    type="button"
-                    variant={
-                      featureCount === option.value ? "default" : "outline"
-                    }
-                    size="sm"
-                    onClick={() => onFeatureCountChange(option.value)}
-                    className={cn(
-                      "flex-1 transition-all",
-                      featureCount === option.value
-                        ? "bg-primary hover:bg-primary/90 text-primary-foreground"
-                        : "bg-muted/30 hover:bg-muted/50 border-border"
-                    )}
-                    data-testid={`feature-count-${option.value}`}
-                  >
-                    {option.label}
-                  </Button>
-                ))}
-              </div>
-              {FEATURE_COUNT_OPTIONS.find((o) => o.value === featureCount)
-                ?.warning && (
-                <p className="text-xs text-amber-500 flex items-center gap-1">
-                  <Clock className="w-3 h-3" />
-                  {
-                    FEATURE_COUNT_OPTIONS.find((o) => o.value === featureCount)
-                      ?.warning
-                  }
-                </p>
-              )}
-            </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/ui/src/components/layout/sidebar.tsx

@@ -81,10 +81,8 @@ import { themeOptions } from "@/config/theme-options";
 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,
-  type FeatureCount,
-} from "@/components/layout/project-setup-dialog";
+import { CreateSpecDialog } from "@/components/views/spec-view/dialogs";
+import type { FeatureCount } from "@/components/views/spec-view/types";
 import {
   DndContext,
   DragEndEvent,
@@ -290,6 +288,7 @@ export function Sidebar() {
   const [setupProjectPath, setSetupProjectPath] = useState("");
   const [projectOverview, setProjectOverview] = useState("");
   const [generateFeatures, setGenerateFeatures] = useState(true);
+  const [analyzeProject, setAnalyzeProject] = useState(true);
   const [featureCount, setFeatureCount] = useState<FeatureCount>(50);
   const [showSpecIndicator, setShowSpecIndicator] = useState(true);
 
@@ -496,7 +495,7 @@ export function Sidebar() {
         setupProjectPath,
         projectOverview.trim(),
         generateFeatures,
-        undefined, // analyzeProject - use default
+        analyzeProject,
         generateFeatures ? featureCount : undefined // only pass maxFeatures if generating features
       );
 
@@ -525,6 +524,7 @@ export function Sidebar() {
     setupProjectPath,
     projectOverview,
     generateFeatures,
+    analyzeProject,
     featureCount,
     setSpecCreatingForProject,
   ]);
@@ -2276,18 +2276,23 @@ export function Sidebar() {
       </Dialog>
 
       {/* New Project Setup Dialog */}
-      <ProjectSetupDialog
+      <CreateSpecDialog
         open={showSetupDialog}
         onOpenChange={setShowSetupDialog}
         projectOverview={projectOverview}
         onProjectOverviewChange={setProjectOverview}
         generateFeatures={generateFeatures}
         onGenerateFeaturesChange={setGenerateFeatures}
+        analyzeProject={analyzeProject}
+        onAnalyzeProjectChange={setAnalyzeProject}
         featureCount={featureCount}
         onFeatureCountChange={setFeatureCount}
         onCreateSpec={handleCreateInitialSpec}
         onSkip={handleSkipSetup}
         isCreatingSpec={isCreatingSpec}
+        showSkipButton={true}
+        title="Set Up Your Project"
+        description="We didn'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'll analyze your project's tech stack and create a comprehensive specification."
       />
 
       {/* New Project Onboarding Dialog */}