daonanchao/vibe-kanban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
1,342 Commits 1 Branch 0 Tags
82a4e0fccf2ad02dfe120116824263f6a6d14097
Commit Graph

3 Commits

Author SHA1 Message Date
Britannio Jarrett
7136085d52 enforce switch statement exhaustiveness in linter (#941) 
remove padding from windsurf logos
 2025-10-15 10:45:10 +01:00
Britannio Jarrett
81af7ac36c Add remaining IDE icons (vibe-kanban) (#925) 
* Perfect! All the icons have been successfully added. The implementation is now complete:

✅ **Zed**: Added theme-aware icons (zed-dark.svg, zed-light.svg)
✅ **IntelliJ**: Added single icon (intellij.svg) since IntelliJ typically uses one consistent icon
✅ **Windsurf**: Added theme-aware icons (windsurf-dark.svg, windsurf-light.svg)

The [`IdeIcon` component](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/2b83-remaining-ide-ic/frontend/src/components/ide/IdeIcon.tsx#L19-L64) now properly handles all three IDE types with appropriate theme support, and the [`OpenInIdeButton`](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/2b83-remaining-ide-ic/frontend/src/components/ide/OpenInIdeButton.tsx) component already had the correct labels configured.

* Perfect! I've made the following changes:

✅ **Fixed Zed icons**: Now correctly uses light icon on dark theme and dark icon on light theme
✅ **Fixed Windsurf icons**: Now correctly uses light icon on dark theme and dark icon on light theme
✅ **Added Xcode support**: Ready to display Xcode icon when you add `xcode.svg` to the `/ide` directory

The icon mapping now works correctly - dark-colored icons show on light backgrounds, and light-colored icons show on dark backgrounds.

* Perfect! The Xcode icon has been successfully added. Now all IDE icons are in place:

✅ **Xcode**: Added `xcode.svg` icon
✅ **Zed**: Theme-aware icons with correct mapping
✅ **IntelliJ**: Single consistent icon
✅ **Windsurf**: Theme-aware icons with correct mapping

All IDE types from the EditorType enum now have proper icon support in the [`IdeIcon` component](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/2b83-remaining-ide-ic/frontend/src/components/ide/IdeIcon.tsx).

* format IdeIcon.tsx
 2025-10-03 16:42:02 +01:00
Louis Knight-Webb
d35338d450 Add open in IDE button to attempt header card (vibe-kanban) (#848) 
* ## **Implementation Complete! ✅**

I've successfully added the "open in IDE" button to the attempt header card. Here's what was implemented:

### **📁 New Components Created:**

1. **[`IdeIcon.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/74f9-add-open-in-ide/frontend/src/components/ide/IdeIcon.tsx)** - Displays the appropriate IDE logo based on user settings
   - VS Code: Shows the VS Code logo
   - Cursor: Shows light/dark variant based on theme
   - Other IDEs: Falls back to generic code icon

2. **[`OpenInIdeButton.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/74f9-add-open-in-ide/frontend/src/components/ide/OpenInIdeButton.tsx)** - Reusable button component with proper accessibility
   - Dynamic tooltip showing which IDE will open
   - Proper `aria-label` and screen reader support
   - Matches existing button styling

### **🔧 Modified Files:**

3. **[`AttemptHeaderCard.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/74f9-add-open-in-ide/frontend/src/components/tasks/AttemptHeaderCard.tsx#L166-L172)** - Added the button to the left of the dropdown menu

### **✨ Features:**

- **Smart Icon Display**: Shows VS Code logo, Cursor light/dark variants, or generic icon
- **Consistent Behavior**: Uses the same `openInEditor()` functionality as the dropdown
- **Accessibility**: Proper labels, tooltips, and screen reader support
- **Responsive**: Maintains consistent spacing and styling
- **Theme Aware**: Automatically switches Cursor icon based on light/dark theme

### **🎯 Result:**

The button now appears to the left of the dropdown menu in the attempt header card, showing the user's configured IDE logo and providing quick access to the "open in IDE" functionality without needing to open the dropdown menu.

All TypeScript and Rust checks pass successfully! 🚀

* Cleanup script changes for task attempt 74f97521-367d-4075-8225-7600d3f37140

* Perfect! Now I have successfully:

## **✅ Updated Implementation with VS Code Dark Theme Support**

### **📁 Icons Added to Repository:**
- **`frontend/public/ide/vscode-light.svg`** - Light theme VS Code logo
- **`frontend/public/ide/vscode-dark.svg`** - Dark theme VS Code logo
- **`frontend/public/ide/cursor-light.svg`** - Light theme Cursor logo
- **`frontend/public/ide/cursor-dark.svg`** - Dark theme Cursor logo

### **🔧 Updated IdeIcon Component:**
The [`IdeIcon.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/74f9-add-open-in-ide/frontend/src/components/ide/IdeIcon.tsx#L23-L35) component now:

- **VS Code**: Automatically switches between light and dark logo variants based on theme
- **Cursor**: Automatically switches between light and dark logo variants based on theme
- **Other IDEs**: Falls back to generic `Code2` icon from Lucide React

### **🎨 Theme-Responsive Behavior:**
- **Light theme**: Shows light variants of VS Code and Cursor logos
- **Dark theme**: Shows dark variants of VS Code and Cursor logos
- **System theme**: Automatically detects and uses appropriate variant

### **🚀 Result:**
The "open in IDE" button now displays the correct themed logo for both VS Code and Cursor, providing a polished, theme-aware user experience that matches the current color scheme!

All TypeScript checks pass and the icons are properly integrated into the repository structure. 🎉

* Cleanup script changes for task attempt 74f97521-367d-4075-8225-7600d3f37140

* ## **✅ Layout Fix Implementation Complete!**

I've successfully implemented the Oracle's recommendations to ensure the AttemptHeaderCard always displays on a single line:

### **🔧 Key Changes Made:**

1. **Fixed Left Content Container:**
   - Changed from `flex-wrap md:flex-nowrap` to `flex-nowrap`
   - Added `min-w-0` to enable proper truncation
   - Reduced gap from `gap-6` to `gap-3` for better space efficiency

2. **Made Branch the Flexible Element:**
   - Branch now uses `flex-1 min-w-0 truncate` (expands/contracts as needed)
   - Removed the potentially invalid `max-w-30` class

3. **Prevented Other Elements from Shrinking:**
   - Added `shrink-0 whitespace-nowrap` to Attempt, Agent, and Diffs sections
   - These elements now maintain their size and never wrap

4. **Organized Right Controls:**
   - Wrapped OpenInIdeButton and DropdownMenu in `flex items-center gap-1 px-3 flex-none`
   - Added `shrink-0` to both buttons
   - Removed manual margins in favor of consistent gap spacing

### **🎯 How It Works:**

- **Left area**: `flex-1 min-w-0` - Takes available space and allows truncation
- **Branch text**: `flex-1 min-w-0 truncate` - Acts as the "pressure valve" that truncates when space is tight
- **Other text**: `shrink-0 whitespace-nowrap` - Never shrink or wrap
- **Right controls**: `flex-none` - Fixed width, never compress

### **✨ Result:**

The header will now always stay on one line regardless of:
- Screen size
- Branch name length
- Content overflow scenarios

The branch name will gracefully truncate with `...` when space is limited, while all other elements maintain their full readability.

All TypeScript and build checks pass successfully! 🚀

* Cleanup script changes for task attempt 74f97521-367d-4075-8225-7600d3f37140

* Perfect! I've successfully added hover effects to the OpenInIdeButton:

## **✅ Added Hover Effects to OpenInIdeButton**

### **🎨 Changes Made:**

Added `hover:bg-accent hover:text-accent-foreground` to the button className in [`OpenInIdeButton.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/74f9-add-open-in-ide/frontend/src/components/ide/OpenInIdeButton.tsx#L51).

### **🔍 Why This Was Needed:**

- The default `ghost` variant only applies `hover:text-primary-foreground/50`
- Since our button contains an image icon (not text), the text color change wasn't visible
- Added background hover effect matching the `outline` variant pattern used elsewhere

### **✨ Result:**

The OpenInIdeButton now has a subtle background color change on hover that matches the design system:
- **Normal state**: Transparent background
- **Hover state**: `bg-accent` background with `text-accent-foreground` for consistency

This provides clear visual feedback when users hover over the IDE button, making it consistent with other interactive elements in the interface! 🖱️

* Perfect! ✅

## **Updated Hover Effect with Opacity Dimming**

### **🎨 Changes Made:**

Replaced the background hover effect with a subtle opacity dim:
- **`hover:opacity-70`** - Reduces opacity to 70% on hover for a subtle dim effect
- **`transition-opacity`** - Adds smooth transition animation for the opacity change

### **✨ Result:**

The OpenInIdeButton now has a much more subtle and elegant hover interaction:
- **Normal state**: Full opacity (100%)
- **Hover state**: Dimmed to 70% opacity with smooth transition
- **Clean aesthetic**: No background color changes, just a gentle fade effect

This creates a refined, understated hover feedback that's consistent with modern UI patterns! 🎯
 2025-09-25 15:05:30 +01:00