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.

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

@@ -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/sidebar.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/ui/dropdown-menu.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/views/board-view.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>