From dc886dce4409237f05fdc1ad771de6e0d5667ebb Mon Sep 17 00:00:00 2001
From: AndyMik90 <andre@mikalsenutvikling.no>
Date: Wed, 17 Dec 2025 22:04:47 +0100
Subject: [PATCH] auto-claude: subtask-1-1 - Restructure SortableFeatureCard
 badge layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reorganize layout for better visual hierarchy: title first, then description, then metadata
- Make badges more compact with smaller text (text-[10px]) and reduced padding (px-1.5 py-0)
- Separate priority badge in header from complexity/impact badges in footer
- Replace competitor insight text with icon-only badge (with tooltip)
- Reduce card padding from p-4 to p-3
- Change title from truncate to line-clamp-2 for better readability
- Move complexity and impact badges to dedicated metadata row at bottom
- Remove " impact" text suffix for cleaner look
- Shorten "Go to Task" button text to "Task"

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/SortableFeatureCard.tsx        | 96 ++++++++++---------
 1 file changed, 53 insertions(+), 43 deletions(-)

diff --git a/auto-claude-ui/src/renderer/components/SortableFeatureCard.tsx b/auto-claude-ui/src/renderer/components/SortableFeatureCard.tsx
index 086e0911..0c54ccf1 100644
--- a/auto-claude-ui/src/renderer/components/SortableFeatureCard.tsx
+++ b/auto-claude-ui/src/renderer/components/SortableFeatureCard.tsx
@@ -64,39 +64,27 @@ export function SortableFeatureCard({
       {...listeners}
     >
       <Card
-        className="p-4 hover:bg-muted/50 cursor-pointer transition-colors"
+        className="p-3 hover:bg-muted/50 cursor-pointer transition-colors"
         onClick={onClick}
       >
-        <div className="flex items-start justify-between">
+        {/* Header - Title with priority badge and action button */}
+        <div className="flex items-start justify-between gap-2">
           <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2 mb-1 flex-wrap">
+            <div className="flex items-center gap-1.5 mb-1">
               <Badge
                 variant="outline"
-                className={ROADMAP_PRIORITY_COLORS[feature.priority]}
+                className={cn('text-[10px] px-1.5 py-0', ROADMAP_PRIORITY_COLORS[feature.priority])}
               >
                 {ROADMAP_PRIORITY_LABELS[feature.priority]}
               </Badge>
-              <Badge
-                variant="outline"
-                className={`text-xs ${ROADMAP_COMPLEXITY_COLORS[feature.complexity]}`}
-              >
-                {feature.complexity}
-              </Badge>
-              <Badge
-                variant="outline"
-                className={`text-xs ${ROADMAP_IMPACT_COLORS[feature.impact]}`}
-              >
-                {feature.impact} impact
-              </Badge>
               {hasCompetitorInsight && (
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Badge
                       variant="outline"
-                      className="text-xs text-primary border-primary/50"
+                      className="text-[10px] px-1.5 py-0 text-primary border-primary/50"
                     >
-                      <TrendingUp className="h-3 w-3 mr-1" />
-                      Competitor Insight
+                      <TrendingUp className="h-2.5 w-2.5" />
                     </Badge>
                   </TooltipTrigger>
                   <TooltipContent>
@@ -105,39 +93,61 @@ export function SortableFeatureCard({
                 </Tooltip>
               )}
             </div>
-            <h3 className="font-medium truncate">{feature.title}</h3>
-            <p className="text-sm text-muted-foreground line-clamp-2">
-              {feature.description}
-            </p>
+            <h3 className="font-medium text-sm leading-snug line-clamp-2">{feature.title}</h3>
           </div>
-          {feature.linkedSpecId ? (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={(e) => {
-                e.stopPropagation();
-                onGoToTask?.(feature.linkedSpecId!);
-              }}
-            >
-              <ExternalLink className="h-3 w-3 mr-1" />
-              Go to Task
-            </Button>
-          ) : (
-            feature.status !== 'done' &&
-            onConvertToSpec && (
+          <div className="shrink-0">
+            {feature.linkedSpecId ? (
               <Button
                 variant="outline"
                 size="sm"
+                className="h-7 px-2"
                 onClick={(e) => {
                   e.stopPropagation();
-                  onConvertToSpec(feature);
+                  onGoToTask?.(feature.linkedSpecId!);
                 }}
               >
-                <Play className="h-3 w-3 mr-1" />
-                Build
+                <ExternalLink className="h-3 w-3 mr-1" />
+                Task
               </Button>
-            )
-          )}
+            ) : (
+              feature.status !== 'done' &&
+              onConvertToSpec && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-7 px-2"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onConvertToSpec(feature);
+                  }}
+                >
+                  <Play className="h-3 w-3 mr-1" />
+                  Build
+                </Button>
+              )
+            )}
+          </div>
+        </div>
+
+        {/* Description */}
+        <p className="mt-1.5 text-xs text-muted-foreground line-clamp-2">
+          {feature.description}
+        </p>
+
+        {/* Metadata badges - compact row */}
+        <div className="mt-2 flex items-center gap-1.5">
+          <Badge
+            variant="outline"
+            className={cn('text-[10px] px-1.5 py-0', ROADMAP_COMPLEXITY_COLORS[feature.complexity])}
+          >
+            {feature.complexity}
+          </Badge>
+          <Badge
+            variant="outline"
+            className={cn('text-[10px] px-1.5 py-0', ROADMAP_IMPACT_COLORS[feature.impact])}
+          >
+            {feature.impact}
+          </Badge>
         </div>
       </Card>
     </div>