mirror of
https://github.com/AutoMaker-Org/automaker.git
synced 2026-01-31 06:42:03 +00:00
feat(sidebar): add P key toggle for project dropdown
Fixed P key behavior to toggle the project dropdown on/off. Added keyboard handler to detect P key when dropdown is open and close it. Also enhanced theme system with action button colors and improved Kanban card styling consistency. 🤖 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
@@ -74,6 +74,10 @@
|
||||
--color-action-verify: var(--action-verify);
|
||||
--color-action-verify-hover: var(--action-verify-hover);
|
||||
|
||||
/* Running task indicator colors */
|
||||
--color-running-indicator: var(--running-indicator);
|
||||
--color-running-indicator-text: var(--running-indicator-text);
|
||||
|
||||
/* Border radius */
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
@@ -133,6 +137,10 @@
|
||||
--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);
|
||||
|
||||
/* Running indicator - Purple */
|
||||
--running-indicator: oklch(0.55 0.25 265);
|
||||
--running-indicator-text: oklch(0.6 0.22 265);
|
||||
}
|
||||
|
||||
.light {
|
||||
@@ -186,6 +194,10 @@
|
||||
--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);
|
||||
|
||||
/* Running indicator - Purple */
|
||||
--running-indicator: oklch(0.55 0.25 265);
|
||||
--running-indicator-text: oklch(0.6 0.22 265);
|
||||
}
|
||||
|
||||
.dark {
|
||||
@@ -253,6 +265,10 @@
|
||||
--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);
|
||||
|
||||
/* Running indicator - Purple */
|
||||
--running-indicator: oklch(0.6 0.25 265);
|
||||
--running-indicator-text: oklch(0.65 0.22 265);
|
||||
}
|
||||
|
||||
.retro {
|
||||
@@ -328,6 +344,10 @@
|
||||
--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);
|
||||
|
||||
/* Running indicator - Neon Green for retro */
|
||||
--running-indicator: oklch(0.85 0.25 145);
|
||||
--running-indicator-text: oklch(0.85 0.25 145);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
@@ -396,6 +416,10 @@
|
||||
--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);
|
||||
|
||||
/* Running indicator - Purple */
|
||||
--running-indicator: oklch(0.7 0.2 320);
|
||||
--running-indicator-text: oklch(0.75 0.18 320);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
@@ -454,6 +478,20 @@
|
||||
--sidebar-accent-foreground: oklch(0.9 0.01 230);
|
||||
--sidebar-border: oklch(0.35 0.03 240);
|
||||
--sidebar-ring: oklch(0.7 0.12 220);
|
||||
|
||||
/* Action button colors - Nord frost blue theme */
|
||||
--action-view: oklch(0.7 0.12 220); /* Frost blue */
|
||||
--action-view-hover: oklch(0.65 0.14 220);
|
||||
--action-followup: oklch(0.65 0.14 220); /* Darker frost */
|
||||
--action-followup-hover: oklch(0.6 0.16 220);
|
||||
--action-commit: oklch(0.7 0.15 140); /* Green */
|
||||
--action-commit-hover: oklch(0.65 0.17 140);
|
||||
--action-verify: oklch(0.7 0.15 140); /* Green */
|
||||
--action-verify-hover: oklch(0.65 0.17 140);
|
||||
|
||||
/* Running indicator - Frost blue */
|
||||
--running-indicator: oklch(0.7 0.12 220);
|
||||
--running-indicator-text: oklch(0.75 0.1 220);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
@@ -512,6 +550,20 @@
|
||||
--sidebar-accent-foreground: oklch(0.95 0.02 100);
|
||||
--sidebar-border: oklch(0.35 0.03 90);
|
||||
--sidebar-ring: oklch(0.8 0.2 350);
|
||||
|
||||
/* Action button colors - Monokai pink/yellow theme */
|
||||
--action-view: oklch(0.8 0.2 350); /* Pink */
|
||||
--action-view-hover: oklch(0.75 0.22 350);
|
||||
--action-followup: oklch(0.75 0.2 200); /* Cyan */
|
||||
--action-followup-hover: oklch(0.7 0.22 200);
|
||||
--action-commit: oklch(0.8 0.2 140); /* Green */
|
||||
--action-commit-hover: oklch(0.75 0.22 140);
|
||||
--action-verify: oklch(0.8 0.2 140); /* Green */
|
||||
--action-verify-hover: oklch(0.75 0.22 140);
|
||||
|
||||
/* Running indicator - Pink */
|
||||
--running-indicator: oklch(0.8 0.2 350);
|
||||
--running-indicator-text: oklch(0.85 0.18 350);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
@@ -570,6 +622,20 @@
|
||||
--sidebar-accent-foreground: oklch(0.85 0.02 250);
|
||||
--sidebar-border: oklch(0.32 0.04 260);
|
||||
--sidebar-ring: oklch(0.7 0.18 280);
|
||||
|
||||
/* Action button colors - Tokyo Night blue/magenta theme */
|
||||
--action-view: oklch(0.7 0.18 280); /* Blue */
|
||||
--action-view-hover: oklch(0.65 0.2 280);
|
||||
--action-followup: oklch(0.75 0.18 200); /* Cyan */
|
||||
--action-followup-hover: oklch(0.7 0.2 200);
|
||||
--action-commit: oklch(0.75 0.18 140); /* Green */
|
||||
--action-commit-hover: oklch(0.7 0.2 140);
|
||||
--action-verify: oklch(0.75 0.18 140); /* Green */
|
||||
--action-verify-hover: oklch(0.7 0.2 140);
|
||||
|
||||
/* Running indicator - Blue */
|
||||
--running-indicator: oklch(0.7 0.18 280);
|
||||
--running-indicator-text: oklch(0.75 0.16 280);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
@@ -628,6 +694,20 @@
|
||||
--sidebar-accent-foreground: oklch(0.75 0.02 90);
|
||||
--sidebar-border: oklch(0.35 0.03 230);
|
||||
--sidebar-ring: oklch(0.65 0.15 220);
|
||||
|
||||
/* Action button colors - Solarized blue/cyan theme */
|
||||
--action-view: oklch(0.65 0.15 220); /* Blue */
|
||||
--action-view-hover: oklch(0.6 0.17 220);
|
||||
--action-followup: oklch(0.6 0.18 180); /* Cyan */
|
||||
--action-followup-hover: oklch(0.55 0.2 180);
|
||||
--action-commit: oklch(0.65 0.2 140); /* Green */
|
||||
--action-commit-hover: oklch(0.6 0.22 140);
|
||||
--action-verify: oklch(0.65 0.2 140); /* Green */
|
||||
--action-verify-hover: oklch(0.6 0.22 140);
|
||||
|
||||
/* Running indicator - Blue */
|
||||
--running-indicator: oklch(0.65 0.15 220);
|
||||
--running-indicator-text: oklch(0.7 0.13 220);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
@@ -686,6 +766,20 @@
|
||||
--sidebar-accent-foreground: oklch(0.85 0.05 85);
|
||||
--sidebar-border: oklch(0.35 0.03 60);
|
||||
--sidebar-ring: oklch(0.7 0.18 55);
|
||||
|
||||
/* Action button colors - Gruvbox yellow/orange theme */
|
||||
--action-view: oklch(0.7 0.18 55); /* Yellow */
|
||||
--action-view-hover: oklch(0.65 0.2 55);
|
||||
--action-followup: oklch(0.7 0.15 200); /* Aqua */
|
||||
--action-followup-hover: oklch(0.65 0.17 200);
|
||||
--action-commit: oklch(0.65 0.2 140); /* Green */
|
||||
--action-commit-hover: oklch(0.6 0.22 140);
|
||||
--action-verify: oklch(0.65 0.2 140); /* Green */
|
||||
--action-verify-hover: oklch(0.6 0.22 140);
|
||||
|
||||
/* Running indicator - Yellow */
|
||||
--running-indicator: oklch(0.7 0.18 55);
|
||||
--running-indicator-text: oklch(0.75 0.16 55);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
@@ -744,6 +838,20 @@
|
||||
--sidebar-accent-foreground: oklch(0.9 0.01 280);
|
||||
--sidebar-border: oklch(0.35 0.03 260);
|
||||
--sidebar-ring: oklch(0.75 0.15 280);
|
||||
|
||||
/* Action button colors - Catppuccin mauve/pink theme */
|
||||
--action-view: oklch(0.75 0.15 280); /* Mauve */
|
||||
--action-view-hover: oklch(0.7 0.17 280);
|
||||
--action-followup: oklch(0.75 0.15 220); /* Blue */
|
||||
--action-followup-hover: oklch(0.7 0.17 220);
|
||||
--action-commit: oklch(0.8 0.15 160); /* Green */
|
||||
--action-commit-hover: oklch(0.75 0.17 160);
|
||||
--action-verify: oklch(0.8 0.15 160); /* Green */
|
||||
--action-verify-hover: oklch(0.75 0.17 160);
|
||||
|
||||
/* Running indicator - Mauve */
|
||||
--running-indicator: oklch(0.75 0.15 280);
|
||||
--running-indicator-text: oklch(0.8 0.13 280);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
@@ -802,6 +910,20 @@
|
||||
--sidebar-accent-foreground: oklch(0.85 0.02 240);
|
||||
--sidebar-border: oklch(0.35 0.02 250);
|
||||
--sidebar-ring: oklch(0.7 0.18 230);
|
||||
|
||||
/* Action button colors - One Dark blue/magenta theme */
|
||||
--action-view: oklch(0.7 0.18 230); /* Blue */
|
||||
--action-view-hover: oklch(0.65 0.2 230);
|
||||
--action-followup: oklch(0.75 0.15 320); /* Magenta */
|
||||
--action-followup-hover: oklch(0.7 0.17 320);
|
||||
--action-commit: oklch(0.75 0.18 150); /* Green */
|
||||
--action-commit-hover: oklch(0.7 0.2 150);
|
||||
--action-verify: oklch(0.75 0.18 150); /* Green */
|
||||
--action-verify-hover: oklch(0.7 0.2 150);
|
||||
|
||||
/* Running indicator - Blue */
|
||||
--running-indicator: oklch(0.7 0.18 230);
|
||||
--running-indicator-text: oklch(0.75 0.16 230);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
@@ -860,6 +982,20 @@
|
||||
--sidebar-accent-foreground: oklch(0.95 0.02 320);
|
||||
--sidebar-border: oklch(0.4 0.1 290);
|
||||
--sidebar-ring: oklch(0.7 0.28 350);
|
||||
|
||||
/* Action button colors - Synthwave hot pink/cyan theme */
|
||||
--action-view: oklch(0.7 0.28 350); /* Hot pink */
|
||||
--action-view-hover: oklch(0.65 0.3 350);
|
||||
--action-followup: oklch(0.8 0.25 200); /* Cyan */
|
||||
--action-followup-hover: oklch(0.75 0.27 200);
|
||||
--action-commit: oklch(0.85 0.2 60); /* Yellow */
|
||||
--action-commit-hover: oklch(0.8 0.22 60);
|
||||
--action-verify: oklch(0.85 0.2 60); /* Yellow */
|
||||
--action-verify-hover: oklch(0.8 0.22 60);
|
||||
|
||||
/* Running indicator - Hot pink */
|
||||
--running-indicator: oklch(0.7 0.28 350);
|
||||
--running-indicator-text: oklch(0.75 0.26 350);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -981,14 +1117,65 @@
|
||||
.content-bg {
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
|
||||
.light .content-bg {
|
||||
background: linear-gradient(135deg, oklch(0.99 0 0), oklch(0.98 0 0), oklch(0.99 0 0));
|
||||
}
|
||||
|
||||
|
||||
.dark .content-bg {
|
||||
background: linear-gradient(135deg, oklch(0.04 0 0), oklch(0.08 0 0), oklch(0.04 0 0));
|
||||
}
|
||||
|
||||
/* Action button utilities */
|
||||
.bg-action-view {
|
||||
background-color: var(--action-view);
|
||||
}
|
||||
|
||||
.hover\:bg-action-view-hover:hover {
|
||||
background-color: var(--action-view-hover);
|
||||
}
|
||||
|
||||
.bg-action-followup {
|
||||
background-color: var(--action-followup);
|
||||
}
|
||||
|
||||
.hover\:bg-action-followup-hover:hover {
|
||||
background-color: var(--action-followup-hover);
|
||||
}
|
||||
|
||||
.bg-action-commit {
|
||||
background-color: var(--action-commit);
|
||||
}
|
||||
|
||||
.hover\:bg-action-commit-hover:hover {
|
||||
background-color: var(--action-commit-hover);
|
||||
}
|
||||
|
||||
.bg-action-verify {
|
||||
background-color: var(--action-verify);
|
||||
}
|
||||
|
||||
.hover\:bg-action-verify-hover:hover {
|
||||
background-color: var(--action-verify-hover);
|
||||
}
|
||||
|
||||
/* Running task indicator utilities */
|
||||
.border-running-indicator {
|
||||
border-color: var(--running-indicator);
|
||||
}
|
||||
|
||||
.bg-running-indicator\/20 {
|
||||
background-color: color-mix(in oklch, var(--running-indicator), transparent 80%);
|
||||
}
|
||||
|
||||
.shadow-running-indicator\/50 {
|
||||
box-shadow: 0 10px 15px -3px color-mix(in oklch, var(--running-indicator), transparent 50%),
|
||||
0 4px 6px -4px color-mix(in oklch, var(--running-indicator), transparent 50%);
|
||||
}
|
||||
|
||||
.text-running-indicator {
|
||||
color: var(--running-indicator-text);
|
||||
}
|
||||
}
|
||||
|
||||
/* Retro Overrides for Utilities */
|
||||
|
||||
@@ -178,7 +178,7 @@ export function Sidebar() {
|
||||
[projects, setCurrentProject]
|
||||
);
|
||||
|
||||
// Handle number key presses when project picker is open
|
||||
// Handle keyboard events when project picker is open
|
||||
useEffect(() => {
|
||||
if (!isProjectPickerOpen) return;
|
||||
|
||||
@@ -189,6 +189,10 @@ export function Sidebar() {
|
||||
selectProjectByNumber(num);
|
||||
} else if (event.key === "Escape") {
|
||||
setIsProjectPickerOpen(false);
|
||||
} else if (event.key.toLowerCase() === "p") {
|
||||
// Toggle off when P is pressed while dropdown is open
|
||||
event.preventDefault();
|
||||
setIsProjectPickerOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -218,8 +222,8 @@ export function Sidebar() {
|
||||
if (projects.length > 0) {
|
||||
shortcuts.push({
|
||||
key: ACTION_SHORTCUTS.projectPicker,
|
||||
action: () => setIsProjectPickerOpen(true),
|
||||
description: "Open project picker",
|
||||
action: () => setIsProjectPickerOpen((prev) => !prev),
|
||||
description: "Toggle project picker",
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -194,7 +194,7 @@ export function KanbanCard({
|
||||
"cursor-grab active:cursor-grabbing transition-all backdrop-blur-sm border-border relative",
|
||||
isDragging && "opacity-50 scale-105 shadow-lg",
|
||||
isCurrentAutoTask &&
|
||||
"border-purple-500 border-2 shadow-purple-500/50 shadow-lg animate-pulse"
|
||||
"border-running-indicator border-2 shadow-running-indicator/50 shadow-lg animate-pulse"
|
||||
)}
|
||||
data-testid={`kanban-card-${feature.id}`}
|
||||
{...attributes}
|
||||
@@ -225,15 +225,15 @@ export function KanbanCard({
|
||||
)}
|
||||
<CardHeader className="p-3 pb-2">
|
||||
{isCurrentAutoTask && (
|
||||
<div className="absolute top-2 right-2 flex items-center gap-2 bg-purple-500/20 border border-purple-500 rounded px-2 py-0.5">
|
||||
<Loader2 className="w-4 h-4 text-purple-400 animate-spin" />
|
||||
<span className="text-xs text-purple-400 font-medium">
|
||||
<div className="absolute top-2 right-2 flex items-center gap-2 bg-running-indicator/20 border border-running-indicator rounded px-2 py-0.5">
|
||||
<Loader2 className="w-4 h-4 text-running-indicator animate-spin" />
|
||||
<span className="text-xs text-running-indicator font-medium">
|
||||
Running...
|
||||
</span>
|
||||
{feature.startedAt && (
|
||||
<CountUpTimer
|
||||
startedAt={feature.startedAt}
|
||||
className="text-purple-400"
|
||||
className="text-running-indicator"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@@ -491,7 +491,7 @@ export function KanbanCard({
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
className="flex-1 h-7 text-xs bg-purple-600 hover:bg-purple-700"
|
||||
className="flex-1 h-7 text-xs bg-action-view hover:bg-action-view-hover"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onViewOutput();
|
||||
@@ -526,7 +526,7 @@ export function KanbanCard({
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
className="flex-1 h-7 text-xs bg-green-600 hover:bg-green-700"
|
||||
className="flex-1 h-7 text-xs bg-action-verify hover:bg-action-verify-hover"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onManualVerify();
|
||||
@@ -540,7 +540,7 @@ export function KanbanCard({
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
className="flex-1 h-7 text-xs bg-blue-600 hover:bg-blue-700"
|
||||
className="flex-1 h-7 text-xs bg-action-verify hover:bg-action-verify-hover"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onResume();
|
||||
@@ -554,7 +554,7 @@ export function KanbanCard({
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
className="flex-1 h-7 text-xs bg-green-600 hover:bg-green-700"
|
||||
className="flex-1 h-7 text-xs bg-action-verify hover:bg-action-verify-hover"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onVerify();
|
||||
@@ -640,7 +640,7 @@ export function KanbanCard({
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
className="flex-1 h-7 text-xs bg-blue-600 hover:bg-blue-700"
|
||||
className="flex-1 h-7 text-xs bg-action-followup hover:bg-action-followup-hover"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onFollowUp();
|
||||
@@ -656,7 +656,7 @@ export function KanbanCard({
|
||||
<Button
|
||||
variant="default"
|
||||
size="sm"
|
||||
className="flex-1 h-7 text-xs bg-green-600 hover:bg-green-700"
|
||||
className="flex-1 h-7 text-xs bg-action-commit hover:bg-action-commit-hover"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onCommit();
|
||||
|
||||
Reference in New Issue
Block a user