15 Commits

• style: improve current provider visual feedback and toast duration

  - Add light blue ring border to active provider card instead of solid border
  - Fix border flashing issue when switching providers
  - Reduce toast notification duration from 4s to 2s for better UX

  Jason · 2025-10-30 16:48:07 +08:00
  b3e14b3985
• refactor: unify focus styles across all input fields

  Replace inconsistent focus border styles with a unified soft blue ring effect
  across all input and textarea components.
  
  Changes:
  - Add consistent focus:ring styles to Input and Textarea components
  - Use focus:ring-blue-500/20 (light) and focus:ring-blue-400/20 (dark)
  - Remove focus border color changes for a more subtle design
  - Update ApiKeyInput to match the unified focus style
  - Update all manual textarea elements (Codex and Claude configs)
  
  Benefits:
  - Consistent visual feedback across all form inputs
  - Soft, elegant focus indication with blue glow effect
  - No jarring border color changes
  - Better user experience with subtle, professional styling
  
  The focus effect now uses only a soft blue ring (20% opacity) without
  changing border colors, creating a more refined and less distracting
  interaction pattern.

  Jason · 2025-10-22 13:31:17 +08:00
  3504fae4cb
• refactor: complete border unification across all components

  - Add border styles to JsonEditor (CodeMirror) with theme-responsive colors
  - Update all dialog header/footer dividers to use border-border-default
  - Replace remaining border-border instances in settings components
  - Ensure all borders (including separators and container borders) use unified design system
  - All borders now consistently use CSS variables and respond to light/dark themes

  Jason · 2025-10-21 10:07:03 +08:00
  cbd1903b90
• refactor: implement unified border design system

  - Define custom border utilities in @layer utilities for consistent theming
  - Add border-default (1px gray), border-active (2px primary), border-hover (40% primary), and border-dragging (60% primary) classes
  - Update all UI components (Input, Select, TextArea, Button, Dialog, Dropdown) to use unified border classes
  - Replace hardcoded border colors (gray-200/300/600/700) with theme-responsive border-border-default
  - Update provider cards, MCP components, settings, and forms with new border system
  - Remove dark mode border overrides to simplify CSS and improve maintainability
  - Ensure all borders automatically adapt to light/dark themes via CSS variables

  Jason · 2025-10-20 23:44:06 +08:00
  3626880663
• refine: center toast notifications and silence plugin sync feedback

  - Change toast position from top-right to top-center for better visibility
  - Remove success notifications for plugin sync operations to reduce noise
  - Keep error notifications to alert users of actual issues

  Jason · 2025-10-20 23:20:22 +08:00
  13acc5323c
• fix: improve dialog vertical alignment and spacing consistency

  Fix multiple alignment and spacing issues in dialog components to ensure
  proper visual balance and symmetry across all dialog elements.
  
  Changes to DialogHeader:
  - Change padding from pt-6 pb-4 to py-5 for symmetric vertical spacing
  - Ensures header content is equidistant from top and bottom borders
  
  Changes to DialogFooter:
  - Change padding from pt-4 pb-6 to py-5 for symmetric vertical spacing
  - Replace sm:space-x-2 with gap-2 for consistent button spacing at all breakpoints
  - Add sm:items-center to vertically center buttons in horizontal layout
  - Ensures footer buttons align properly and are equidistant from borders
  
  Changes to DialogTitle:
  - Change line-height from leading-none to leading-tight (1 → 1.25)
  - Provides better visual balance with button heights
  - Improves readability and alignment with adjacent buttons
  
  Impact:
  All dialog components now have:
  - Symmetric vertical padding (1.25rem top/bottom)
  - Properly centered content regardless of viewport size
  - Consistent button spacing and alignment
  - Better visual harmony between text and interactive elements

  Jason · 2025-10-19 10:35:37 +08:00
  a5fff93732
• refine: enhance settings dialog UI with improved visual feedback

  Improve the visual hierarchy and interaction feedback in the settings dialog:
  
  1. Tab navigation enhancement:
     - Active tabs now use blue background (blue-500/600) with white text
     - Add shadow effect to active tabs for better depth perception
     - Inactive tabs show hover effects (opacity + background)
     - Consistent with app's primary blue theme color
  
  2. Switch component visual improvement:
     - Checked state: blue background (blue-500/600) for clear indication
     - Unchecked state: gray background (gray-300/700) for neutral appearance
     - White thumb color for better contrast on both states
     - Enhanced focus ring (ring-2 + offset-2) for accessibility
  
  3. Layout spacing refinement:
     - Change content area padding from pb-4 to py-4 for symmetrical spacing
     - Ensure consistent 4-unit spacing between all dialog sections
  
  4. Clarify plugin integration description:
     - Update description to accurately reflect that provider switching
       in this app will sync with VS Code Claude Code extension
     - Previous wording was ambiguous about the synchronization behavior
  
  Files changed:
  - src/components/ui/tabs.tsx: Enhanced tab visual states
  - src/components/ui/switch.tsx: Improved switch contrast
  - src/components/settings/SettingsDialog.tsx: Fixed spacing
  - src/i18n/locales/{zh,en}.json: Updated plugin description

  Jason · 2025-10-17 23:40:07 +08:00
  e6b66f425a
• refine: improve settings dialog layout spacing and fix footer visibility

  This commit refines the visual hierarchy and fixes layout issues in the
  settings dialog:
  
  1. Add visual separators to dialog sections:
     - Add bottom border and background to DialogHeader
     - Both header and footer now have consistent border + bg-muted/20 styling
     - Creates clear three-section layout: header | content | footer
  
  2. Fix footer overflow issue:
     - Remove min-h-[480px] from content area that conflicted with max-h-[90vh]
     - Keep min-h-[400px] on TabsContent to prevent height jumps
     - Add flex-shrink-0 to header and footer to ensure they stay visible
     - Content area uses flex-1 to fill remaining space naturally
  
  3. Improve spacing:
     - Add pb-4 to content area for breathing room above footer
     - Add pb-4 to DialogHeader for consistent spacing below title
     - Ensure proper padding hierarchy across all dialog sections
  
  Layout calculation (small screens, 90vh ≈ 540px):
  - Header: ~70px (fixed)
  - Content: 400px minimum, scrollable (flexible)
  - Footer: ~70px (fixed)
  - Total: ≤ 540px, footer always visible ✓
  
  Files modified:
  - src/components/ui/dialog.tsx (DialogHeader, DialogFooter styling)
  - src/components/settings/SettingsDialog.tsx (content area height constraint)

  Jason · 2025-10-17 23:27:37 +08:00
  8e82ded158
• fix: redesign settings dialog layout to prevent content overflow and visual jitter

  Fixed multiple layout issues in the settings dialog:
  
  1. Dialog structure: Changed from grid to flexbox layout
     - Removed global padding from DialogContent
     - Added individual padding to DialogHeader (px-6 pt-6) and DialogFooter (px-6 pb-6 pt-4)
     - Added max-h-[90vh] constraint to prevent dialog from exceeding viewport
  
  2. Content area improvements:
     - Replaced max-h-[70vh] with flex-1 for better space utilization
     - Set min-h-[480px] on content wrapper to maintain consistent dialog height
     - Applied min-h-[400px] to all TabsContent components to prevent height jumps
  
  3. Scrollbar optimization:
     - Changed overflow-y-auto to overflow-y-scroll to force scrollbar gutter
     - Eliminates horizontal shift when switching between tabs with different content heights
     - Consistent with main app layout approach (App.tsx)
  
  4. Footer enhancement:
     - Added border-t and bg-muted/20 for visual separation
     - Fixed footer overlapping content in advanced tab
  
  Result: Settings dialog now displays all content properly without requiring
  fullscreen, maintains consistent height across tabs, and eliminates layout shift
  when switching tabs.

  Jason · 2025-10-17 23:09:21 +08:00
  c04f636bbe
• refactor: unify modal overlay system with shadcn/ui Dialog

  Fix inconsistent modal overlays by migrating all custom implementations
  to the unified shadcn/ui Dialog component with proper z-index layering.
  
  Changes:
  - Update Dialog component to support three z-index levels:
    - base (z-40): First-level dialogs
    - nested (z-50): Nested dialogs
    - alert (z-[60]): Alert/confirmation dialogs (using Tailwind arbitrary value)
  - Refactor all custom modal implementations to use Dialog:
    - EndpointSpeedTest: API endpoint speed testing panel
    - ClaudeConfigEditor: Claude common config editor
    - CodexQuickWizardModal: Codex quick setup wizard
    - CodexCommonConfigModal: Codex common config editor
    - SettingsDialog: Restart confirmation prompt
  - Remove custom backdrop implementations and manual z-index
  - Leverage Radix UI Portal for automatic DOM order management
  - Ensure consistent overlay behavior and keyboard interactions
  
  This eliminates the "background residue" issue where overlays from
  different layers would conflict, providing a unified and professional
  user experience across all modal interactions.

  Jason · 2025-10-17 21:32:28 +08:00
  2d3d717826
• refactor: migrate all MCP dialogs to shadcn/ui Dialog component

  Convert all MCP-related modal windows to use the unified shadcn/ui Dialog
  component for consistency with the rest of the application.
  
  Changes:
  - McpPanel: Replace custom modal with Dialog component
    - Update props from onClose to open/onOpenChange pattern
    - Use DialogContent, DialogHeader, DialogTitle components
    - Remove custom backdrop and close button (handled by Dialog)
  
  - McpFormModal: Migrate form modal to Dialog
    - Wrap entire form in Dialog component structure
    - Use DialogFooter for action buttons
    - Apply variant="mcp" to maintain green button styling
    - Remove unused X icon import
  
  - McpWizardModal: Convert wizard to Dialog
    - Replace custom modal structure with Dialog components
    - Use Button component with variant="mcp" for consistency
    - Remove unused isLinux and X icon imports
  
  - App.tsx: Update McpPanel usage
    - Remove conditional rendering wrapper
    - Pass open and onOpenChange props directly
  
  - dialog.tsx: Fix dialog overlay and content styling
    - Change overlay from bg-background/80 to bg-black/50 for consistency
    - Change content from bg-background to explicit bg-white dark:bg-gray-900
    - Ensures opaque backgrounds matching MCP panel style
  
  Benefits:
  - Unified dialog behavior across the application
  - Consistent styling and animations
  - Better accessibility with Radix UI primitives
  - Reduced code duplication
  - Maintains MCP-specific green color scheme
  
  All dialogs now share the same base styling while preserving their unique
  content and functionality.

  Jason · 2025-10-16 16:20:45 +08:00
  92528e6a9f
• style: restore original color scheme to shadcn/ui components

  Restore the vibrant color palette from the pre-refactoring version while
  maintaining shadcn/ui component architecture and modern design patterns.
  
  ## Color Scheme Restoration
  
  ### Button Component
  - **default variant**: Blue primary (`bg-blue-500`) - matches old `primary`
  - **destructive variant**: Red (`bg-red-500`) - matches old `danger`
  - **secondary variant**: Gray text (`text-gray-500`) - matches old `secondary`
  - **ghost variant**: Transparent hover (`hover:bg-gray-100`) - matches old `ghost`
  - **mcp variant**: Emerald green (`bg-emerald-500`) - matches old `mcp`
  - Updated border-radius to `rounded-lg` for consistency
  
  ### CSS Variables
  - Set `--primary` to blue (`hsl(217 91% 60%)` ≈ `bg-blue-500`)
  - Added complete shadcn/ui theme variables for light/dark modes
  - Maintained semantic color tokens for maintainability
  
  ### Component-Specific Colors
  - **"Currently Using" badge**: Green (`bg-green-500/10 text-green-500`)
  - **Delete button hover**: Red (`hover:text-red-500 hover:bg-red-100`)
  - **MCP button**: Emerald green with minimum width (`min-w-[80px]`)
  - **Links/URLs**: Blue (`text-blue-500`)
  
  ## Benefits
  
  - ✅ Restored original vibrant UI (blue, green, red accents)
  - ✅ Maintained shadcn/ui component system (accessibility, animations)
  - ✅ Easy global theming via CSS variables
  - ✅ Consistent design language across all components
  - ✅ Code formatted with Prettier (shadcn/ui standards)
  
  ## Files Changed
  
  - `src/index.css`: Added shadcn/ui theme variables with blue primary
  - `src/components/ui/button.tsx`: Restored all original button color variants
  - `src/components/providers/ProviderCard.tsx`: Green badge for current provider
  - `src/components/providers/ProviderActions.tsx`: Red hover for delete button
  - `src/components/mcp/McpPanel.tsx`: Use `mcp` variant for consistency
  - `src/App.tsx`: MCP button with emerald color and wider width
  
  The UI now matches the original colorful design while leveraging modern
  shadcn/ui components for better maintainability and user experience.

  Jason · 2025-10-16 15:32:26 +08:00
  5f2bede5c4
• feat: complete stage 4 cleanup and code formatting

  This commit completes stage 4 of the refactoring plan, focusing on cleanup
  and optimization of the modernized codebase.
  
  ## Key Changes
  
  ### Code Cleanup
  - Remove legacy `src/lib/styles.ts` (no longer needed)
  - Remove old modal components (`ImportProgressModal.tsx`, `ProviderList.tsx`)
  - Streamline `src/lib/tauri-api.ts` from 712 lines to 17 lines (-97.6%)
    - Remove global `window.api` pollution
    - Keep only event listeners (`tauriEvents.onProviderSwitched`)
    - All API calls now use modular `@/lib/api/*` layer
  
  ### Type System
  - Clean up `src/vite-env.d.ts` (remove 156 lines of outdated types)
  - Remove obsolete global type declarations
  - All TypeScript checks pass with zero errors
  
  ### Code Formatting
  - Format all source files with Prettier (82 files)
  - Fix formatting issues in 15 files:
    - App.tsx and core components
    - MCP management components
    - Settings module components
    - Provider management components
    - UI components
  
  ### Documentation Updates
  - Update `REFACTORING_CHECKLIST.md` with stage 4 progress
  - Mark completed tasks in `REFACTORING_MASTER_PLAN.md`
  
  ## Impact
  
  **Code Reduction:**
  - Total: -1,753 lines, +384 lines (net -1,369 lines)
  - tauri-api.ts: 712 → 17 lines (-97.6%)
  - Removed styles.ts: -82 lines
  - Removed vite-env.d.ts declarations: -156 lines
  
  **Quality Improvements:**
  - ✅ Zero TypeScript errors
  - ✅ Zero TODO/FIXME comments
  - ✅ 100% Prettier compliant
  - ✅ Zero `window.api` references
  - ✅ Fully modular API layer
  
  ## Testing
  - [x] TypeScript compilation passes
  - [x] Code formatting validated
  - [x] No linting errors
  
  Stage 4 completion: 100%
  Ready for stage 5 (testing and bug fixes)

  Jason · 2025-10-16 12:13:51 +08:00
  f3e7412a14
• feat: complete stage 2 core refactor
  Jason · 2025-10-16 10:49:56 +08:00
  b88eb88608
• feat: complete stage 1 infrastructure
  Jason · 2025-10-16 10:00:22 +08:00
  cc0b7053aa