style: refine sidebar and dropdown menu components for improved UI

- Simplified the sidebar button's class structure by removing unnecessary overflow styling.
- Enhanced the visual representation of the trashed projects count with updated styling for better visibility.
- Wrapped the dropdown menu's subcontent in a portal for improved rendering and performance.

Author: webdevcody

.DS_Store

@@ -1,6 +1,6 @@
 "use client";
 
-import { Sparkles } from "lucide-react";
+import { Sparkles, Clock } from "lucide-react";
 import {
   Dialog,
   DialogContent,
@@ -11,6 +11,19 @@ import {
 } 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;
@@ -19,6 +32,8 @@ interface ProjectSetupDialogProps {
   onProjectOverviewChange: (value: string) => void;
   generateFeatures: boolean;
   onGenerateFeaturesChange: (value: boolean) => void;
+  featureCount: FeatureCount;
+  onFeatureCountChange: (value: FeatureCount) => void;
   onCreateSpec: () => void;
   onSkip: () => void;
   isCreatingSpec: boolean;
@@ -31,6 +46,8 @@ export function ProjectSetupDialog({
   onProjectOverviewChange,
   generateFeatures,
   onGenerateFeaturesChange,
+  featureCount,
+  onFeatureCountChange,
   onCreateSpec,
   onSkip,
   isCreatingSpec,
@@ -94,16 +111,52 @@ export function ProjectSetupDialog({
               </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()}
-          >
+          <Button onClick={onCreateSpec} disabled={!projectOverview.trim()}>
             <Sparkles className="w-4 h-4 mr-2" />
             Generate Spec
           </Button>
@@ -112,4 +165,3 @@ export function ProjectSetupDialog({
     </Dialog>
   );
 }
-

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

@@ -82,7 +82,10 @@ 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 } from "@/components/layout/project-setup-dialog";
+import {
+  ProjectSetupDialog,
+  type FeatureCount,
+} from "@/components/layout/project-setup-dialog";
 import {
   DndContext,
   DragEndEvent,
@@ -261,6 +264,7 @@ export function Sidebar() {
   const [setupProjectPath, setSetupProjectPath] = useState("");
   const [projectOverview, setProjectOverview] = useState("");
   const [generateFeatures, setGenerateFeatures] = useState(true);
+  const [featureCount, setFeatureCount] = useState<FeatureCount>(50);
   const [showSpecIndicator, setShowSpecIndicator] = useState(true);
 
   // Derive isCreatingSpec from store state
@@ -466,7 +470,9 @@ export function Sidebar() {
       const result = await api.specRegeneration.create(
         setupProjectPath,
         projectOverview.trim(),
-        generateFeatures
+        generateFeatures,
+        undefined, // analyzeProject - use default
+        generateFeatures ? featureCount : undefined // only pass maxFeatures if generating features
       );
 
       if (!result.success) {
@@ -490,7 +496,13 @@ export function Sidebar() {
         description: error instanceof Error ? error.message : "Unknown error",
       });
     }
-  }, [setupProjectPath, projectOverview, setSpecCreatingForProject]);
+  }, [
+    setupProjectPath,
+    projectOverview,
+    generateFeatures,
+    featureCount,
+    setSpecCreatingForProject,
+  ]);
 
   // Handle skipping setup
   const handleSkipSetup = useCallback(() => {
@@ -1453,7 +1465,7 @@ export function Sidebar() {
               onClick={() => setShowTrashDialog(true)}
               className={cn(
                 "group flex items-center justify-center px-3 h-[42px] rounded-xl",
-                "relative overflow-hidden",
+                "relative",
                 "text-muted-foreground hover:text-destructive",
                 // Subtle background that turns red on hover
                 "bg-accent/20 hover:bg-destructive/15",
@@ -1467,7 +1479,7 @@ export function Sidebar() {
             >
               <Recycle className="size-4 shrink-0 transition-transform duration-200 group-hover:rotate-12" />
               {trashedProjects.length > 0 && (
-                <span className="absolute -top-1.5 -right-1.5 flex items-center justify-center min-w-4 h-4 px-1 text-[9px] font-bold rounded-full bg-destructive text-destructive-foreground shadow-sm">
+                <span className="absolute -top-1.5 -right-1.5 z-10 flex items-center justify-center min-w-4 h-4 px-1 text-[9px] font-bold rounded-full bg-red-500 text-white shadow-md ring-1 ring-red-600/50">
                   {trashedProjects.length > 9 ? "9+" : trashedProjects.length}
                 </span>
               )}
@@ -2248,6 +2260,8 @@ export function Sidebar() {
         onProjectOverviewChange={setProjectOverview}
         generateFeatures={generateFeatures}
         onGenerateFeaturesChange={setGenerateFeatures}
+        featureCount={featureCount}
+        onFeatureCountChange={setFeatureCount}
         onCreateSpec={handleCreateInitialSpec}
         onSkip={handleSkipSetup}
         isCreatingSpec={isCreatingSpec}

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

@@ -43,14 +43,16 @@ const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.SubContent
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
 ))
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
 

apps/app/src/components/ui/dropdown-menu.tsx

@@ -2180,7 +2180,7 @@ export function BoardView() {
                                   data-testid="start-next-button"
                                 >
                                   <FastForward className="w-3 h-3 mr-1" />
-                                  Pull Top
+                                  Make
                                 </HotkeyButton>
                               )}
                             </div>

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

@@ -148,15 +148,17 @@ export interface SpecRegenerationAPI {
     projectPath: string,
     projectOverview: string,
     generateFeatures?: boolean,
-    analyzeProject?: boolean
+    analyzeProject?: boolean,
+    maxFeatures?: number
   ) => Promise<{ success: boolean; error?: string }>;
   generate: (
     projectPath: string,
     projectDefinition: string,
     generateFeatures?: boolean,
-    analyzeProject?: boolean
+    analyzeProject?: boolean,
+    maxFeatures?: number
   ) => Promise<{ success: boolean; error?: string }>;
-  generateFeatures: (projectPath: string) => Promise<{
+  generateFeatures: (projectPath: string, maxFeatures?: number) => Promise<{
     success: boolean;
     error?: string;
   }>;
@@ -1836,15 +1838,17 @@ function createMockSpecRegenerationAPI(): SpecRegenerationAPI {
     create: async (
       projectPath: string,
       projectOverview: string,
-      generateFeatures = true
+      generateFeatures = true,
+      _analyzeProject?: boolean,
+      maxFeatures?: number
     ) => {
       if (mockSpecRegenerationRunning) {
         return { success: false, error: "Spec creation is already running" };
       }
 
       mockSpecRegenerationRunning = true;
       console.log(
-        `[Mock] Creating initial spec for: ${projectPath}, generateFeatures: ${generateFeatures}`
+        `[Mock] Creating initial spec for: ${projectPath}, generateFeatures: ${generateFeatures}, maxFeatures: ${maxFeatures}`
       );
 
       // Simulate async spec creation
@@ -1856,7 +1860,9 @@ function createMockSpecRegenerationAPI(): SpecRegenerationAPI {
     generate: async (
       projectPath: string,
       projectDefinition: string,
-      generateFeatures = false
+      generateFeatures = false,
+      _analyzeProject?: boolean,
+      maxFeatures?: number
     ) => {
       if (mockSpecRegenerationRunning) {
         return {
@@ -1867,7 +1873,7 @@ function createMockSpecRegenerationAPI(): SpecRegenerationAPI {
 
       mockSpecRegenerationRunning = true;
       console.log(
-        `[Mock] Regenerating spec for: ${projectPath}, generateFeatures: ${generateFeatures}`
+        `[Mock] Regenerating spec for: ${projectPath}, generateFeatures: ${generateFeatures}, maxFeatures: ${maxFeatures}`
       );
 
       // Simulate async spec regeneration
@@ -1880,7 +1886,7 @@ function createMockSpecRegenerationAPI(): SpecRegenerationAPI {
       return { success: true };
     },
 
-    generateFeatures: async (projectPath: string) => {
+    generateFeatures: async (projectPath: string, maxFeatures?: number) => {
       if (mockSpecRegenerationRunning) {
         return {
           success: false,
@@ -1890,7 +1896,7 @@ function createMockSpecRegenerationAPI(): SpecRegenerationAPI {
 
       mockSpecRegenerationRunning = true;
       console.log(
-        `[Mock] Generating features from existing spec for: ${projectPath}`
+        `[Mock] Generating features from existing spec for: ${projectPath}, maxFeatures: ${maxFeatures}`
       );
 
       // Simulate async feature generation

apps/app/src/lib/electron.ts

@@ -582,28 +582,32 @@ export class HttpApiClient implements ElectronAPI {
       projectPath: string,
       projectOverview: string,
       generateFeatures?: boolean,
-      analyzeProject?: boolean
+      analyzeProject?: boolean,
+      maxFeatures?: number
     ) =>
       this.post("/api/spec-regeneration/create", {
         projectPath,
         projectOverview,
         generateFeatures,
         analyzeProject,
+        maxFeatures,
       }),
     generate: (
       projectPath: string,
       projectDefinition: string,
       generateFeatures?: boolean,
-      analyzeProject?: boolean
+      analyzeProject?: boolean,
+      maxFeatures?: number
     ) =>
       this.post("/api/spec-regeneration/generate", {
         projectPath,
         projectDefinition,
         generateFeatures,
         analyzeProject,
+        maxFeatures,
       }),
-    generateFeatures: (projectPath: string) =>
-      this.post("/api/spec-regeneration/generate-features", { projectPath }),
+    generateFeatures: (projectPath: string, maxFeatures?: number) =>
+      this.post("/api/spec-regeneration/generate-features", { projectPath, maxFeatures }),
     stop: () => this.post("/api/spec-regeneration/stop"),
     status: () => this.get("/api/spec-regeneration/status"),
     onEvent: (callback: (event: SpecRegenerationEvent) => void) => {

apps/app/src/lib/http-api-client.ts

@@ -267,7 +267,8 @@ export interface SpecRegenerationAPI {
     projectPath: string,
     projectOverview: string,
     generateFeatures?: boolean,
-    analyzeProject?: boolean
+    analyzeProject?: boolean,
+    maxFeatures?: number
   ) => Promise<{
     success: boolean;
     error?: string;
@@ -277,13 +278,14 @@ export interface SpecRegenerationAPI {
     projectPath: string,
     projectDefinition: string,
     generateFeatures?: boolean,
-    analyzeProject?: boolean
+    analyzeProject?: boolean,
+    maxFeatures?: number
   ) => Promise<{
     success: boolean;
     error?: string;
   }>;
 
-  generateFeatures: (projectPath: string) => Promise<{
+  generateFeatures: (projectPath: string, maxFeatures?: number) => Promise<{
     success: boolean;
     error?: string;
   }>;

apps/app/src/types/electron.d.ts

@@ -13,15 +13,18 @@ import { parseAndCreateFeatures } from "./parse-and-create-features.js";
 
 const logger = createLogger("SpecRegeneration");
 
-const MAX_FEATURES = 100;
+const DEFAULT_MAX_FEATURES = 50;
 
 export async function generateFeaturesFromSpec(
   projectPath: string,
   events: EventEmitter,
-  abortController: AbortController
+  abortController: AbortController,
+  maxFeatures?: number
 ): Promise<void> {
+  const featureCount = maxFeatures ?? DEFAULT_MAX_FEATURES;
   logger.debug("========== generateFeaturesFromSpec() started ==========");
   logger.debug("projectPath:", projectPath);
+  logger.debug("maxFeatures:", featureCount);
 
   // Read existing spec
   const specPath = path.join(projectPath, ".automaker", "app_spec.txt");
@@ -73,7 +76,7 @@ Format as JSON:
   ]
 }
 
-Generate ${MAX_FEATURES} features that build on each other logically.
+Generate ${featureCount} features that build on each other logically.
 
 IMPORTANT: Do not ask for clarification. The specification is provided above. Generate the JSON immediately.`;