ros/automaker
1
0
Fork 0
mirror of https://github.com/AutoMaker-Org/automaker.git synced 2026-01-30 06:12:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(kanban): standardize column width and remove masonry layout

Browse Source 
- Remove double-width styling from In Progress column
- Replace masonry 2-column layout with simple vertical stacking
- All Kanban columns now use uniform w-72 width
- Fix Settings view theme consistency with proper CSS variables
- Add action button color variables to theme system

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

Co-Authored-By: Claude Sonnet 4 <noreply@anthropic.com>
This commit is contained in:
Cody Seibert
2025-12-09 19:13:09 -05:00
parent 8a01c1e167
commit 5853653c00
8 changed files with 323 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
.automaker/agents-context/feature-1765325001000-650s5id2p.md Normal file
View File

@@ -0,0 +1,120 @@
📋 Planning implementation for: Fix the design of this section to use the theme we have elsewhere
⚡ Executing implementation for: Fix the design of this section to use the theme we have elsewhere
Starting code implementation...
🔧 Tool: Glob
Let me look at the project structure more specifically to understand where the settings section is:
🔧 Tool: Bash
I found the settings view. Let me read it along with some other views to understand the theme that should be applied:
🔧 Tool: Read
🔧 Tool: Read
🔧 Tool: Read
Now I can see the issue. Looking at the settings-view.tsx, I can see:
1. The **API Keys Section** and **Appearance Section** use the theme-consistent styling with `border-border`, `bg-card`, and theme-aware text colors like `text-foreground`, `text-muted-foreground`.
2. However, the **Kanban Card Display Section** (lines 556-628) uses hardcoded dark theme colors:
- `border-white/10` instead of `border-border`
- `bg-zinc-900/50` instead of `bg-card`
- `text-white` instead of `text-foreground`
- `text-zinc-400` instead of `text-muted-foreground`
- `text-zinc-300` instead of `text-foreground`
- `text-zinc-500` instead of `text-muted-foreground`
- `bg-white/5` and `bg-zinc-950/50` instead of theme-aware colors
Let me also check the context-view and board-view for more examples of consistent theming patterns:
🔧 Tool: Read
Now I have a complete understanding of the theme system. The issue is clear:
1. The **Kanban Card Display Section** in `settings-view.tsx` (lines 556-628) uses hardcoded dark theme styles like `text-white`, `text-zinc-400`, `bg-zinc-900/50`, `border-white/10`, etc.
2. It should use theme variables like:
- `text-foreground` instead of `text-white`
- `text-muted-foreground` instead of `text-zinc-400`, `text-zinc-500`
- `bg-card` instead of `bg-zinc-900/50`
- `border-border` instead of `border-white/10`
- `bg-secondary` instead of `bg-white/5`
- `bg-input` instead of `bg-zinc-950/50`
- `bg-accent` instead of `bg-white/5`
Let me also check the "Back to Home" button at the end of the file which also has hardcoded styles:
Looking at the code, I need to fix:
1. **Lines 556-628 - Kanban Card Display Section** - Replace hardcoded colors with theme variables
2. **Lines 649 - Back to Home button** - Also uses hardcoded `bg-white/5`, `hover:bg-white/10`, `text-white`, `border-white/10`
Let me make these changes:
🔧 Tool: Edit
Now let me also fix the "Back to Home" button which has hardcoded styles:
🔧 Tool: Edit
Let me verify if there are any other hardcoded theme values in the file that I might have missed:
🔧 Tool: Grep
There are two more instances of `text-zinc-500` that need to be fixed. Let me see the context around them:
🔧 Tool: Read
🔧 Tool: Read
I can see these are description/helper texts. Let me fix these to use the theme-consistent `text-muted-foreground`:
🔧 Tool: Edit
🔧 Tool: Edit
Let me verify there are no more hardcoded theme values:
🔧 Tool: Grep
All the hardcoded theme values have been replaced. Let me now verify the file compiles properly by running a quick syntax check:
🔧 Tool: Bash
Those are just missing configuration errors for standalone TSC run (project path aliases and JSX config), not actual code issues. Let me try the proper Next.js build check:
🔧 Tool: Bash
The build errors are pre-existing issues (missing npm packages and network issues with fonts), not related to my changes. The actual TypeScript/React code in the settings-view.tsx file is syntactically correct.
Let me double-check by looking at the final state of the modified sections:
🔧 Tool: Read
The changes have been applied correctly. Now the Settings View uses the consistent theme classes:
**Changes Made Summary:**
1. **Kanban Card Display Section** (lines 556-628):
- Changed `border-white/10` to `border-border`
- Changed `bg-zinc-900/50` to `bg-card`
- Changed `text-white` to `text-foreground`
- Changed `text-zinc-400` to `text-muted-foreground`
- Changed `text-zinc-300` to `text-foreground`
- Changed `text-zinc-500` to `text-muted-foreground`
- Changed `bg-white/5` to `bg-accent`
- Changed `bg-zinc-950/50` to `bg-input`
2. **Back to Home Button** (line 649):
- Changed `bg-white/5 hover:bg-white/10 text-white border border-white/10` to `bg-secondary hover:bg-accent text-secondary-foreground border border-border`
3. **API Key Help Text** (lines 245 and 339):
- Changed `text-zinc-500` to `text-muted-foreground`
Now let me mark this feature as verified using the UpdateFeatureStatus tool:
🔧 Tool: mcp__automaker-tools__UpdateFeatureStatus
The feature has been implemented successfully. Here's a summary of what was done:
## Feature Complete: Fix Settings Design to Use Theme Variables
### Changes Made to `app/src/components/views/settings-view.tsx`:
1. **Kanban Card Display Section** - Replaced all hardcoded dark theme colors with theme-aware CSS variables:
- Container: `border-white/10 bg-zinc-900/50` → `border-border bg-card`
- Headers: `text-white` → `text-foreground`
- Descriptions: `text-zinc-400` → `text-muted-foreground`
- Labels: `text-zinc-300` → `text-foreground`
- Button selected state: `bg-white/5 border-brand-500 text-white` → `bg-accent border-brand-500 text-foreground`
- Button default state: `bg-zinc-950/50 border-white/10 text-zinc-400` → `bg-input border-border text-muted-foreground`
- Helper text: `text-zinc-500` → `text-muted-foreground`
2. **Back to Home Button** - Updated to use theme variables:
- `bg-white/5 hover:bg-white/10 text-white border border-white/10` → `bg-secondary hover:bg-accent text-secondary-foreground border border-border`
3. **API Key Help Text** (2 locations) - Updated muted text color:
- `text-zinc-500` → `text-muted-foreground`
These changes ensure the Settings View now properly respects all 12+ themes defined in the application (dark, light, retro, dracula, nord, monokai, tokyonight, solarized, gruvbox, catppuccin, onedark, synthwave).
The feature is now in `waiting_approval` status for manual review since `skipTests=true`.✅ Verifying implementation for: Fix the design of this section to use the theme we have elsewhere
Verifying implementation and checking test results...
✓ Verification successful: All tests passed

93
.automaker/agents-context/feature-1765325422436-et1qhb1zy.md Normal file
View File

@@ -0,0 +1,93 @@
📋 Planning implementation for: reduce width of in progress to 1 column no masonry
⚡ Executing implementation for: reduce width of in progress to 1 column no masonry
Starting code implementation...
🔧 Tool: Glob
Let me search for Kanban-related files specifically:
🔧 Tool: Grep
🔧 Tool: Read
Now let me also look at the KanbanColumn component to understand the current layout:
🔧 Tool: Read
Now I understand the current implementation. The feature request is to:
1. Reduce the width of the "In Progress" column to 1 column (remove the double width)
2. Remove the masonry layout (2-column CSS columns layout)
Currently:
- `isDoubleWidth` prop controls whether the column is `w-[37rem]` (double width) or `w-72` (single width)
- When `isDoubleWidth` is true, it uses `columns-2` CSS to create a masonry-style layout
The fix involves:
1. Changing the column to not use double width anymore
2. Removing the masonry layout
Let me modify the `board-view.tsx` to not pass `isDoubleWidth` for the in_progress column, and also update the `kanban-column.tsx` to have proper styling:
🔧 Tool: Edit
Now let me also clean up the `kanban-column.tsx` to remove the `isDoubleWidth` prop since it's no longer used:
🔧 Tool: Edit
The changes have been made. Let me verify that there are no TypeScript errors by checking if the code compiles correctly:
🔧 Tool: Bash
The TypeScript errors are from an unrelated example file (`example/page.tsx`), not from my changes. The kanban-column.tsx and board-view.tsx files compile without errors. Let me verify this specifically:
🔧 Tool: Bash
These errors are just configuration issues with running TypeScript outside of the project's build context (JSX flags, path aliases, etc.). The project should work fine with its normal build process (Next.js handles all of this). Let me check to ensure the project builds correctly using the project's build system:
🔧 Tool: Bash
The build errors are unrelated to my changes - they're about a missing `@anthropic-ai/sdk` module in a test route and Google Font fetching issues. My changes to `kanban-column.tsx` and `board-view.tsx` are valid.
Let me verify the changes are correct by reading the modified files:
🔧 Tool: Read
The changes are complete:
**Summary of changes:**
1. **`app/src/components/views/kanban-column.tsx`**:
- Removed the `isDoubleWidth` prop from the interface and component parameters
- Simplified the width class to always be `w-72` (single column width)
- Removed the masonry layout (`columns-2 gap-2 [&>*]:break-inside-avoid [&>*]:mb-2`)
- Now uses simple `space-y-2` for vertical card spacing in all columns
2. **`app/src/components/views/board-view.tsx`**:
- Removed the `isDoubleWidth={column.id === "in_progress"}` prop from the KanbanColumn component
The "In Progress" column now has the same width (w-72, approximately 18rem/288px) as all other columns and displays cards in a single vertical stack without the 2-column masonry layout.
Now let me mark this feature as verified using the UpdateFeatureStatus tool:
🔧 Tool: mcp__automaker-tools__UpdateFeatureStatus
The feature has been implemented successfully.
## Summary
**Feature:** Reduce width of In Progress column to 1 column, no masonry
**Changes made:**
1. **`app/src/components/views/kanban-column.tsx`**:
- Removed the `isDoubleWidth` prop entirely
- All columns now have uniform width (`w-72` ≈ 288px)
- Removed the masonry 2-column CSS layout (`columns-2`)
- All columns now use simple vertical stacking with `space-y-2`
2. **`app/src/components/views/board-view.tsx`**:
- Removed `isDoubleWidth={column.id === "in_progress"}` prop
**Result:** The "In Progress" column is now the same width as all other columns (Backlog, Waiting Approval, Verified) and displays cards in a single vertical column instead of a 2-column masonry layout.
The feature has been marked as `waiting_approval` for your manual review and commit.✅ Verifying implementation for: reduce width of in progress to 1 column no masonry
Verifying implementation and checking test results...
✓ Verification successful: All tests passed
📝 Committing changes for: reduce width of in progress to 1 column no masonry
I'll help you commit the current changes with a proper conventional commit message. Let me start by analyzing the current state of the repository.
🔧 Tool: Bash
🔧 Tool: Bash
🔧 Tool: Bash
Now I can see the changes made. Based on the git diff analysis, I can see:
1. **Kanban column changes**: The main change is reducing the "In Progress" column width from double-width (37rem) to single column (w-72) and removing the masonry 2-column layout
2. **Settings styling**: Fixed the Settings view to use consistent theme variables
3. **Theme system**: Added action button colors to the global CSS theme system
4. **Feature list updates**: Added new features to the automaker feature list
Looking at the recent commit styles, they follow conventional commit format. The main change appears to be about the Kanban column layout modification. Let me stage the changes and create an appropriate commit message.
🔧 Tool: Bash

3
.automaker/categories.json
View File

@@ -2,5 +2,6 @@
"Agent Runner",
"Core",
"Kanban",
"Other"
"Other",
"Settings"
]

28
.automaker/feature_list.json
View File

@@ -71,5 +71,33 @@
"startedAt": "2025-12-09T22:31:41.946Z",
"imagePaths": [],
"skipTests": true
},
{
"id": "feature-1765325001000-650s5id2p",
"category": "Settings",
"description": "Fix the design of this section to use the theme we have elsewhere",
"steps": [],
"status": "waiting_approval",
"imagePaths": [
{
"id": "img-1765324985005-gq72u8269",
"path": "/var/folders/yk/56l0_s6978qfh521xf1dtx3r0000gn/T/automaker-images/1765324985003_Screenshot_2025-12-09_at_7.02.57_PM.png",
"filename": "Screenshot 2025-12-09 at 7.02.57 PM.png",
"mimeType": "image/png"
}
],
"skipTests": true,
"summary": "Fixed Settings View to use consistent theme variables. Modified: settings-view.tsx. Changes: Kanban Card Display section now uses theme-aware classes (border-border, bg-card, text-foreground, text-muted-foreground, bg-accent, bg-input) instead of hardcoded dark theme colors (text-zinc-*, bg-zinc-*, border-white/*, text-white). Also fixed Back to Home button and API key help text styling."
},
{
"id": "feature-1765325422436-et1qhb1zy",
"category": "Kanban",
"description": "reduce width of in progress to 1 column no masonry",
"steps": [],
"status": "waiting_approval",
"startedAt": "2025-12-10T00:10:23.784Z",
"imagePaths": [],
"skipTests": true,
"summary": "Reduced In Progress column width from double-width (37rem) to single column (w-72). Removed masonry 2-column layout. Modified: kanban-column.tsx (removed isDoubleWidth prop, simplified styling), board-view.tsx (removed isDoubleWidth prop from KanbanColumn). All columns now have uniform width with simple vertical card stacking."
}
]

60
app/src/app/globals.css
View File

@@ -64,6 +64,16 @@
--color-brand-500: var(--brand-500);
--color-brand-600: var(--brand-600);
/* Action button colors */
--color-action-view: var(--action-view);
--color-action-view-hover: var(--action-view-hover);
--color-action-followup: var(--action-followup);
--color-action-followup-hover: var(--action-followup-hover);
--color-action-commit: var(--action-commit);
--color-action-commit-hover: var(--action-commit-hover);
--color-action-verify: var(--action-verify);
--color-action-verify-hover: var(--action-verify-hover);
/* Border radius */
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
@@ -113,6 +123,16 @@
--brand-400: oklch(0.6 0.22 265);
--brand-500: oklch(0.55 0.25 265);
--brand-600: oklch(0.5 0.28 270);
/* Action button colors - Light mode */
--action-view: oklch(0.55 0.25 265); /* Purple */
--action-view-hover: oklch(0.5 0.28 270);
--action-followup: oklch(0.55 0.2 230); /* Blue */
--action-followup-hover: oklch(0.5 0.22 230);
--action-commit: oklch(0.55 0.2 140); /* Green */
--action-commit-hover: oklch(0.5 0.22 140);
--action-verify: oklch(0.55 0.2 140); /* Green */
--action-verify-hover: oklch(0.5 0.22 140);
}
.light {
@@ -156,6 +176,16 @@
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.9 0 0);
--sidebar-ring: oklch(0.55 0.25 265);
/* Action button colors */
--action-view: oklch(0.55 0.25 265); /* Purple */
--action-view-hover: oklch(0.5 0.28 270);
--action-followup: oklch(0.55 0.2 230); /* Blue */
--action-followup-hover: oklch(0.5 0.22 230);
--action-commit: oklch(0.55 0.2 140); /* Green */
--action-commit-hover: oklch(0.5 0.22 140);
--action-verify: oklch(0.55 0.2 140); /* Green */
--action-verify-hover: oklch(0.5 0.22 140);
}
.dark {
@@ -213,6 +243,16 @@
--sidebar-accent-foreground: oklch(1 0 0);
--sidebar-border: oklch(1 0 0 / 0.1); /* white/10 for glass borders */
--sidebar-ring: oklch(0.55 0.25 265);
/* Action button colors */
--action-view: oklch(0.6 0.25 265); /* Purple */
--action-view-hover: oklch(0.55 0.27 270);
--action-followup: oklch(0.6 0.2 230); /* Blue */
--action-followup-hover: oklch(0.55 0.22 230);
--action-commit: oklch(0.55 0.2 140); /* Green */
--action-commit-hover: oklch(0.5 0.22 140);
--action-verify: oklch(0.55 0.2 140); /* Green */
--action-verify-hover: oklch(0.5 0.22 140);
}
.retro {
@@ -278,6 +318,16 @@
/* Fonts */
--font-sans: var(--font-geist-mono); /* Force Mono everywhere */
/* Action button colors - All green neon for retro theme */
--action-view: oklch(0.85 0.25 145); /* Neon Green */
--action-view-hover: oklch(0.9 0.25 145);
--action-followup: oklch(0.85 0.25 145); /* Neon Green */
--action-followup-hover: oklch(0.9 0.25 145);
--action-commit: oklch(0.85 0.25 145); /* Neon Green */
--action-commit-hover: oklch(0.9 0.25 145);
--action-verify: oklch(0.85 0.25 145); /* Neon Green */
--action-verify-hover: oklch(0.9 0.25 145);
}
/* ========================================
@@ -336,6 +386,16 @@
--sidebar-accent-foreground: oklch(0.95 0.01 280);
--sidebar-border: oklch(0.35 0.05 280);
--sidebar-ring: oklch(0.7 0.2 320);
/* Action button colors - Dracula purple/pink theme */
--action-view: oklch(0.7 0.2 320); /* Purple */
--action-view-hover: oklch(0.65 0.22 320);
--action-followup: oklch(0.65 0.25 350); /* Pink */
--action-followup-hover: oklch(0.6 0.27 350);
--action-commit: oklch(0.75 0.2 130); /* Green */
--action-commit-hover: oklch(0.7 0.22 130);
--action-verify: oklch(0.75 0.2 130); /* Green */
--action-verify-hover: oklch(0.7 0.22 130);
}
/* ========================================

1
app/src/components/views/board-view.tsx
View File

@@ -1223,7 +1223,6 @@ export function BoardView() {
title={column.title}
color={column.color}
count={columnFeatures.length}
isDoubleWidth={column.id === "in_progress"}
headerAction={
column.id === "verified" && columnFeatures.length > 0 ? (
<Button

14
app/src/components/views/kanban-column.tsx
View File

@@ -10,7 +10,6 @@ interface KanbanColumnProps {
color: string;
count: number;
children: ReactNode;
isDoubleWidth?: boolean;
headerAction?: ReactNode;
}
@@ -20,7 +19,6 @@ export function KanbanColumn({
color,
count,
children,
isDoubleWidth = false,
headerAction,
}: KanbanColumnProps) {
const { setNodeRef, isOver } = useDroppable({ id });
@@ -29,8 +27,7 @@ export function KanbanColumn({
<div
ref={setNodeRef}
className={cn(
"flex flex-col h-full rounded-lg bg-card backdrop-blur-sm border border-border transition-colors",
isDoubleWidth ? "w-[37rem]" : "w-72",
"flex flex-col h-full rounded-lg bg-card backdrop-blur-sm border border-border transition-colors w-72",
isOver && "bg-accent"
)}
data-testid={`kanban-column-${id}`}
@@ -46,14 +43,7 @@ export function KanbanColumn({
</div>
{/* Column Content */}
<div
className={cn(
"flex-1 overflow-y-auto p-2",
isDoubleWidth
? "columns-2 gap-2 [&>*]:break-inside-avoid [&>*]:mb-2"
: "space-y-2"
)}
>
<div className="flex-1 overflow-y-auto p-2 space-y-2">
{children}
</div>
</div>

36
app/src/components/views/settings-view.tsx
View File

@@ -242,7 +242,7 @@ export function SettingsView() {
)}
</Button>
</div>
<p className="text-xs text-zinc-500">
<p className="text-xs text-muted-foreground">
Used for Claude AI features. Get your key at{" "}
<a
href="https://console.anthropic.com/account/keys"
@@ -336,7 +336,7 @@ export function SettingsView() {
)}
</Button>
</div>
<p className="text-xs text-zinc-500">
<p className="text-xs text-muted-foreground">
Used for Gemini AI features (including image/design prompts).
Get your key at{" "}
<a
@@ -553,34 +553,34 @@ export function SettingsView() {
</div>
{/* Kanban Card Display Section */}
<div className="rounded-xl border border-white/10 bg-zinc-900/50 backdrop-blur-md overflow-hidden">
<div className="p-6 border-b border-white/10">
<div className="rounded-xl border border-border bg-card backdrop-blur-md overflow-hidden">
<div className="p-6 border-b border-border">
<div className="flex items-center gap-2 mb-2">
<LayoutGrid className="w-5 h-5 text-brand-500" />
<h2 className="text-lg font-semibold text-white">
<h2 className="text-lg font-semibold text-foreground">
Kanban Card Display
</h2>
</div>
<p className="text-sm text-zinc-400">
<p className="text-sm text-muted-foreground">
Control how much information is displayed on Kanban cards.
</p>
</div>
<div className="p-6 space-y-4">
<div className="space-y-3">
<Label className="text-zinc-300">Detail Level</Label>
<Label className="text-foreground">Detail Level</Label>
<div className="grid grid-cols-3 gap-3">
<button
onClick={() => setKanbanCardDetailLevel("minimal")}
className={`flex flex-col items-center justify-center gap-2 px-4 py-4 rounded-lg border transition-all ${
kanbanCardDetailLevel === "minimal"
? "bg-white/5 border-brand-500 text-white"
: "bg-zinc-950/50 border-white/10 text-zinc-400 hover:text-white hover:bg-white/5"
? "bg-accent border-brand-500 text-foreground"
: "bg-input border-border text-muted-foreground hover:text-foreground hover:bg-accent"
}`}
data-testid="kanban-detail-minimal"
>
<Minimize2 className="w-5 h-5" />
<span className="font-medium text-sm">Minimal</span>
<span className="text-xs text-zinc-500 text-center">
<span className="text-xs text-muted-foreground text-center">
Title & category only
</span>
</button>
@@ -588,14 +588,14 @@ export function SettingsView() {
onClick={() => setKanbanCardDetailLevel("standard")}
className={`flex flex-col items-center justify-center gap-2 px-4 py-4 rounded-lg border transition-all ${
kanbanCardDetailLevel === "standard"
? "bg-white/5 border-brand-500 text-white"
: "bg-zinc-950/50 border-white/10 text-zinc-400 hover:text-white hover:bg-white/5"
? "bg-accent border-brand-500 text-foreground"
: "bg-input border-border text-muted-foreground hover:text-foreground hover:bg-accent"
}`}
data-testid="kanban-detail-standard"
>
<Square className="w-5 h-5" />
<span className="font-medium text-sm">Standard</span>
<span className="text-xs text-zinc-500 text-center">
<span className="text-xs text-muted-foreground text-center">
Steps & progress
</span>
</button>
@@ -603,19 +603,19 @@ export function SettingsView() {
onClick={() => setKanbanCardDetailLevel("detailed")}
className={`flex flex-col items-center justify-center gap-2 px-4 py-4 rounded-lg border transition-all ${
kanbanCardDetailLevel === "detailed"
? "bg-white/5 border-brand-500 text-white"
: "bg-zinc-950/50 border-white/10 text-zinc-400 hover:text-white hover:bg-white/5"
? "bg-accent border-brand-500 text-foreground"
: "bg-input border-border text-muted-foreground hover:text-foreground hover:bg-accent"
}`}
data-testid="kanban-detail-detailed"
>
<Maximize2 className="w-5 h-5" />
<span className="font-medium text-sm">Detailed</span>
<span className="text-xs text-zinc-500 text-center">
<span className="text-xs text-muted-foreground text-center">
Model, tools & tasks
</span>
</button>
</div>
<p className="text-xs text-zinc-500">
<p className="text-xs text-muted-foreground">
<strong>Minimal:</strong> Shows only title and category
<br />
<strong>Standard:</strong> Adds steps preview and progress bar
@@ -646,7 +646,7 @@ export function SettingsView() {
<Button
variant="secondary"
onClick={() => setCurrentView("welcome")}
className="bg-white/5 hover:bg-white/10 text-white border border-white/10"
className="bg-secondary hover:bg-accent text-secondary-foreground border border-border"
data-testid="back-to-home"
>
Back to Home