daonanchao/vibe-kanban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1fd114b75df2776736ce8adee4c2e17ce99b6567
vibe-kanban/frontend/public/ide/cursor-light.svg

12 lines
793 B
XML
Raw Normal View History

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
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 466.73 532.09">
<!-- Generator: Adobe Illustrator 29.6.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 9) -->
<defs>
<style>
.st0 {
fill: #26251e;
}
</style>
</defs>
<path class="st0" d="M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z"/>
</svg>
Reference in New Issue Copy Permalink