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.
2026-02-01 08:13:37 +00:00 · 2025-12-15 09:59:20 -05:00
parent 25b1789b0a
commit f04cac8e2f
13 changed files with 148 additions and 46 deletions
--- a/apps/app/src/components/layout/project-setup-dialog.tsx
+++ b/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>
  );
 }
-
--- a/apps/app/src/components/layout/sidebar.tsx
+++ b/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}
--- a/apps/app/src/components/ui/dropdown-menu.tsx
+++ b/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

--- a/apps/app/src/components/views/board-view.tsx
+++ b/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>
--- a/apps/app/src/lib/electron.ts
+++ b/apps/app/src/lib/electron.ts
@@ -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,7 +1838,9 @@ 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" };
@@ -1844,7 +1848,7 @@ function createMockSpecRegenerationAPI(): SpecRegenerationAPI {

      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
--- a/apps/app/src/lib/http-api-client.ts
+++ b/apps/app/src/lib/http-api-client.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) => {
--- a/apps/app/src/types/electron.d.ts
+++ b/apps/app/src/types/electron.d.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;
  }>;