From a53c063d45bcef4becec89f1e7b823bc5c82f95b Mon Sep 17 00:00:00 2001 From: Johnson Nifemi Date: Tue, 21 Oct 2025 22:22:27 +0100 Subject: [PATCH 1/3] Fixed styling issues with overflow on main editor and modals --- .../fix-scrollbar-styling-46127466.plan.md | 152 ++++++++++++++++++ .cursor/rules/css-theme-variables.mdc | 95 +++++++++++ .cursor/rules/editor-architecture.mdc | 98 +++++++++++ .cursor/rules/scrollbar-styling.mdc | 52 ++++++ .cursor/rules/tauri-development.mdc | 118 ++++++++++++++ .github/PULL_REQUEST_TEMPLATE.md | 1 + src/components/ai-chat/chat-history-modal.tsx | 2 +- src/components/editor/code-editor.tsx | 1 - src/contexts/toast-context.tsx | 2 +- src/main.tsx | 3 +- src/styles.css | 65 +++++++- 11 files changed, 579 insertions(+), 10 deletions(-) create mode 100644 .cursor/plans/fix-scrollbar-styling-46127466.plan.md create mode 100644 .cursor/rules/css-theme-variables.mdc create mode 100644 .cursor/rules/editor-architecture.mdc create mode 100644 .cursor/rules/scrollbar-styling.mdc create mode 100644 .cursor/rules/tauri-development.mdc diff --git a/.cursor/plans/fix-scrollbar-styling-46127466.plan.md b/.cursor/plans/fix-scrollbar-styling-46127466.plan.md new file mode 100644 index 00000000..e4f39ab5 --- /dev/null +++ b/.cursor/plans/fix-scrollbar-styling-46127466.plan.md @@ -0,0 +1,152 @@ + +# Fix Scrollbar Styling for Editor and Modals + +## Problem + +White scrollbars appear in the editor and modals, breaking the theme consistency. The issue stems from: + +1. Hardcoded light colors in textarea scrollbar styles (lines 796-820 in `src/styles.css`) +2. Generic overflow elements not using theme-aware scrollbar classes +3. Inconsistent scrollbar styling across components + +## Solution + +### 1. Fix Global Textarea Scrollbar Styling + +**File:** `src/styles.css` (lines 795-820) + +Replace the hardcoded colors: + +```css +textarea { + scrollbar-width: thin; + scrollbar-color: var(--color-border) var(--color-secondary-bg); +} + +textarea::-webkit-scrollbar { + width: 12px; +} + +textarea::-webkit-scrollbar-track { + background: var(--color-secondary-bg); +} + +textarea::-webkit-scrollbar-thumb { + background: var(--color-border); + border-radius: 6px; +} + +textarea::-webkit-scrollbar-thumb:hover { + background: var(--color-text-lighter); +} +``` + +### 2. Add Global Overflow Auto Scrollbar Styling + +**File:** `src/styles.css` (after line 820) + +Add theme-aware styling for all overflow elements: + +```css +/* Theme-aware scrollbars for all overflow elements */ +[class*="overflow-auto"], +.overflow-auto, +[class*="overflow-y-auto"], +.overflow-y-auto, +[class*="overflow-x-auto"], +.overflow-x-auto { + scrollbar-width: thin; + scrollbar-color: var(--color-border) var(--color-secondary-bg); +} + +[class*="overflow-auto"]::-webkit-scrollbar, +.overflow-auto::-webkit-scrollbar, +[class*="overflow-y-auto"]::-webkit-scrollbar, +.overflow-y-auto::-webkit-scrollbar, +[class*="overflow-x-auto"]::-webkit-scrollbar, +.overflow-x-auto::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +[class*="overflow-auto"]::-webkit-scrollbar-track, +.overflow-auto::-webkit-scrollbar-track, +[class*="overflow-y-auto"]::-webkit-scrollbar-track, +.overflow-y-auto::-webkit-scrollbar-track, +[class*="overflow-x-auto"]::-webkit-scrollbar-track, +.overflow-x-auto::-webkit-scrollbar-track { + background: var(--color-secondary-bg); +} + +[class*="overflow-auto"]::-webkit-scrollbar-thumb, +.overflow-auto::-webkit-scrollbar-thumb, +[class*="overflow-y-auto"]::-webkit-scrollbar-thumb, +.overflow-y-auto::-webkit-scrollbar-thumb, +[class*="overflow-x-auto"]::-webkit-scrollbar-thumb, +.overflow-x-auto::-webkit-scrollbar-thumb { + background: var(--color-border); + border-radius: 4px; +} + +[class*="overflow-auto"]::-webkit-scrollbar-thumb:hover, +.overflow-auto::-webkit-scrollbar-thumb:hover, +[class*="overflow-y-auto"]::-webkit-scrollbar-thumb:hover, +.overflow-y-auto::-webkit-scrollbar-thumb:hover, +[class*="overflow-x-auto"]::-webkit-scrollbar-thumb:hover, +.overflow-x-auto::-webkit-scrollbar-thumb:hover { + background: var(--color-text-lighter); +} + +[class*="overflow-auto"]::-webkit-scrollbar-corner, +.overflow-auto::-webkit-scrollbar-corner, +[class*="overflow-y-auto"]::-webkit-scrollbar-corner, +.overflow-y-auto::-webkit-scrollbar-corner, +[class*="overflow-x-auto"]::-webkit-scrollbar-corner, +.overflow-x-auto::-webkit-scrollbar-corner { + background: var(--color-secondary-bg); +} +``` + +### 3. Update Modal Scrollbar Styling + +**File:** `src/components/ai-chat/chat-history-modal.tsx` (line 49) + +Change from: + +```tsx +
+``` + +To: + +```tsx +
+``` + +### 4. Update Editor Container + +**File:** `src/components/editor/code-editor.tsx` (lines 277-287) + +Keep scrollbars hidden for editor (this is correct behavior), but ensure no white scrollbars leak through by adding explicit webkit rules in the inline style or ensuring the CSS from `editor-stylesheet.tsx` applies properly. + +## Files to Modify + +1. `src/styles.css` - Update global scrollbar styling (lines 796-828) +2. `src/components/ai-chat/chat-history-modal.tsx` - Add custom-scrollbar class (line 49) +3. Other modal components will automatically inherit the global overflow styling from step 2 + +## Expected Result + +All scrollbars throughout the application (editor, modals, dropdowns, lists) will: + +- Use theme colors (border color for thumb, secondary bg for track) +- Match the current theme (light or dark) +- Have consistent width (8px) and styling +- Eliminate white scrollbars completely + +### To-dos + +- [ ] Update textarea scrollbar styles to use CSS variables instead of hardcoded colors in src/styles.css +- [ ] Add comprehensive scrollbar styling for all overflow-auto, overflow-y-auto, and overflow-x-auto classes in src/styles.css +- [ ] Add custom-scrollbar class to chat-history-modal.tsx overflow container +- [ ] Verify editor scrollbars remain hidden and no white scrollbars appear \ No newline at end of file diff --git a/.cursor/rules/css-theme-variables.mdc b/.cursor/rules/css-theme-variables.mdc new file mode 100644 index 00000000..2f39dc00 --- /dev/null +++ b/.cursor/rules/css-theme-variables.mdc @@ -0,0 +1,95 @@ +--- +globs: *.css,*.tsx,*.ts +--- + +# CSS Theme Variables Guidelines + +## Required Theme Variables + +Always use CSS variables instead of hardcoded colors to maintain theme consistency across light and dark modes. + +### Primary Colors +- `var(--color-primary-bg)` - Primary background color +- `var(--color-secondary-bg)` - Secondary background color +- `var(--color-text)` - Primary text color +- `var(--color-text-lighter)` - Lighter text color +- `var(--color-border)` - Border color + +### Scrollbar Colors +- `var(--color-border)` - Scrollbar thumb color +- `var(--color-secondary-bg)` - Scrollbar track color +- `var(--color-text-lighter)` - Scrollbar thumb hover color + +### Editor Colors +- `var(--editor-font-family)` - Editor font family +- `var(--selection-bg)` - Text selection background +- `var(--git-gutter-added)` - Git gutter added color +- `var(--git-gutter-modified)` - Git gutter modified color +- `var(--git-gutter-deleted)` - Git gutter deleted color + +## Implementation Rules + +### ✅ Correct Usage +```css +background: var(--color-primary-bg); +color: var(--color-text); +border: 1px solid var(--color-border); +``` + +### ❌ Avoid Hardcoded Colors +```css +background: #ffffff; /* Don't do this */ +color: #000000; /* Don't do this */ +border: 1px solid #ccc; /* Don't do this */ +``` + +### Scrollbar Implementation +```css +scrollbar-width: thin; +scrollbar-color: var(--color-border) var(--color-secondary-bg); +``` + +### Webkit Scrollbar Styling +```css +::-webkit-scrollbar { + width: 8px; +} + +::-webkit-scrollbar-track { + background: var(--color-secondary-bg); +} + +::-webkit-scrollbar-thumb { + background: var(--color-border); + border-radius: 4px; +} + +::-webkit-scrollbar-thumb:hover { + background: var(--color-text-lighter); +} +``` + +## Theme-Aware Components + +### Modal Components +Use `custom-scrollbar` class for consistent scrollbar styling: +```tsx +
+``` + +### Editor Components +Hide scrollbars completely: +```css +.editor-container { + scrollbar-width: none; + -ms-overflow-style: none; +} + +.editor-container::-webkit-scrollbar { + display: none; +} +``` + +## Global Styling + +The application includes comprehensive global scrollbar styling in [src/styles.css](mdc:src/styles.css) that automatically applies theme-aware colors to all overflow elements. This ensures consistency across the entire application without requiring individual component styling. \ No newline at end of file diff --git a/.cursor/rules/editor-architecture.mdc b/.cursor/rules/editor-architecture.mdc new file mode 100644 index 00000000..992b14eb --- /dev/null +++ b/.cursor/rules/editor-architecture.mdc @@ -0,0 +1,98 @@ +--- +description: Editor component architecture and development guidelines +--- + +# Editor Architecture Guidelines + +## Main Editor Components + +The editor is built with a sophisticated React-based architecture: + +### Core Components +- **[src/components/editor/code-editor.tsx](mdc:src/components/editor/code-editor.tsx)** - Main editor wrapper component +- **[src/components/editor/core/text-editor.tsx](mdc:src/components/editor/core/text-editor.tsx)** - Core text editing functionality (1,323 lines) +- **[src/components/editor/core/line-based-editor.tsx](mdc:src/components/editor/core/line-based-editor.tsx)** - Line-based editor implementation + +### Editor Sub-components +- **Core**: `src/components/editor/core/` - Core editor functionality +- **Overlays**: `src/components/editor/overlays/` - Editor overlays and UI elements +- **Rendering**: `src/components/editor/rendering/` - Rendering components + +### State Management +Editor state is managed through multiple Zustand stores in `src/stores/editor-*.ts`: +- `editor-state-store.ts` - Core editor state +- `editor-cursor-store.ts` - Cursor management +- `editor-view-store.ts` - View state +- `editor-settings-store.ts` - Editor settings +- And many more specialized stores + +## Development Guidelines + +### Adding New Editor Features +1. **State Management**: Use existing Zustand stores or create new ones +2. **UI Components**: Add to appropriate subdirectory in `src/components/editor/` +3. **Styling**: Use CSS variables for theme consistency +4. **Performance**: Leverage existing performance hooks and optimizations + +### Editor Styling +- **Scrollbars**: Must be hidden using `scrollbar-width: none` and `display: none` +- **Fonts**: Use `var(--editor-font-family)` for consistent font rendering +- **Colors**: Use CSS variables like `var(--color-text)`, `var(--color-primary-bg)` +- **Git Gutter**: Use theme-aware colors defined in editor stylesheet + +### Key Architecture Patterns + +#### Store Integration +```typescript +const { setCursorVisibility, restorePositionForFile } = useEditorCursorStore.use.actions(); +const activeBufferId = useBufferStore.use.activeBufferId(); +``` + +#### Performance Optimization +```typescript +import { useDebouncedFunction, usePerformanceMonitor, useRAFCallback } from "@/hooks/use-performance"; +``` + +#### Theme Integration +```typescript +const { settings } = useSettingsStore(); +const zoomLevel = useZoomStore.use.editorZoomLevel(); +``` + +## File Organization + +### Component Structure +``` +src/components/editor/ +├── code-editor.tsx # Main wrapper +├── core/ # Core functionality +│ ├── text-editor.tsx # Main text editor +│ ├── line-based-editor.tsx +│ └── keyboard-shortcuts.ts +├── overlays/ # UI overlays +│ ├── completion-dropdown.tsx +│ ├── hover-tooltip.tsx +│ └── editor-context-menu.tsx +└── rendering/ # Rendering components + ├── editor-viewport.tsx + ├── line-renderer.tsx + └── line-gutter.tsx +``` + +### State Stores +``` +src/stores/ +├── editor-state-store.ts +├── editor-cursor-store.ts +├── editor-view-store.ts +├── editor-settings-store.ts +└── editor-*.ts # Other specialized stores +``` + +## Best Practices + +1. **Modularity**: Keep editor functionality in separate, focused components +2. **State Management**: Use Zustand stores for complex state, local state for simple UI +3. **Performance**: Use existing performance hooks and avoid unnecessary re-renders +4. **Accessibility**: Maintain keyboard navigation and screen reader support +5. **Theme Consistency**: Always use CSS variables for colors and styling \ No newline at end of file diff --git a/.cursor/rules/scrollbar-styling.mdc b/.cursor/rules/scrollbar-styling.mdc new file mode 100644 index 00000000..2a813003 --- /dev/null +++ b/.cursor/rules/scrollbar-styling.mdc @@ -0,0 +1,52 @@ +--- +description: Scrollbar styling guidelines and theme consistency rules +--- + +# Scrollbar Styling Guidelines + +## Theme-Aware Scrollbar Implementation + +All scrollbars in the application must use theme-aware CSS variables instead of hardcoded colors to maintain consistency across light and dark themes. + +### Required CSS Variables +- `var(--color-border)` - For scrollbar thumb color +- `var(--color-secondary-bg)` - For scrollbar track color +- `var(--color-text-lighter)` - For scrollbar thumb hover color + +### Global Scrollbar Styling +The application uses comprehensive global scrollbar styling in [src/styles.css](mdc:src/styles.css) that automatically applies theme-aware colors to all overflow elements: + +```css +/* Theme-aware scrollbars for all overflow elements */ +[class*="overflow-auto"], +.overflow-auto, +[class*="overflow-y-auto"], +.overflow-y-auto, +[class*="overflow-x-auto"], +.overflow-x-auto { + scrollbar-width: thin; + scrollbar-color: var(--color-border) var(--color-secondary-bg); +} +``` + +### Editor Scrollbar Behavior +- Editor containers use `scrollbar-width: none` and `display: none` to hide scrollbars completely +- This is implemented in [src/components/editor/editor-stylesheet.tsx](mdc:src/components/editor/editor-stylesheet.tsx) +- Editor containers should never show visible scrollbars + +### Modal and Component Scrollbars +- Use `custom-scrollbar` class for enhanced scrollbar styling +- Example: `
` +- All modals automatically inherit global overflow styling + +### Textarea Scrollbars +- Textarea scrollbars use theme variables: `var(--color-border)` and `var(--color-secondary-bg)` +- Never use hardcoded colors like `#ccc` or `#f5f5f5` + +## Implementation Rules + +1. **Never use hardcoded scrollbar colors** - Always use CSS variables +2. **Editor scrollbars must be hidden** - Use `scrollbar-width: none` and `display: none` +3. **Modal scrollbars should be theme-aware** - Use `custom-scrollbar` class or inherit global styling +4. **Consistent sizing** - Use 8px width for most scrollbars, 12px for textareas +5. **Hover effects** - Always include hover states using `var(--color-text-lighter)` \ No newline at end of file diff --git a/.cursor/rules/tauri-development.mdc b/.cursor/rules/tauri-development.mdc new file mode 100644 index 00000000..083712fe --- /dev/null +++ b/.cursor/rules/tauri-development.mdc @@ -0,0 +1,118 @@ +--- +description: Tauri desktop application development workflow and architecture guidelines +--- + +# Tauri Development Guidelines + +## Architecture Overview + +This is a **Tauri desktop application** with: +- **Frontend**: React/TypeScript (in `src/`) +- **Backend**: Rust (in `src-tauri/src/`) +- **Communication**: IPC (Inter-Process Communication) instead of HTTP APIs + +## Backend-Frontend Communication + +### Commands (Request/Response Pattern) +Instead of REST endpoints, use Tauri commands: + +**Backend (Rust):** +```rust +#[tauri::command] +pub fn get_user_data(user_id: String) -> Result { + // Implementation + Ok(user_data) +} +``` + +**Frontend (TypeScript):** +```typescript +import { invoke } from "@tauri-apps/api/core"; + +const userData = await invoke("get_user_data", { userId: "123" }); +``` + +### Events (Pub/Sub Pattern) +For real-time communication: + +**Backend (Rust):** +```rust +app_handle.emit("user-updated", user_data).unwrap(); +``` + +**Frontend (TypeScript):** +```typescript +import { listen } from "@tauri-apps/api/event"; + +listen("user-updated", (event) => { + console.log("User updated:", event.payload); +}); +``` + +## Development Workflow + +### Adding New Commands +1. Create command function in `src-tauri/src/commands/` +2. Export in `src-tauri/src/commands/mod.rs` +3. Register in `src-tauri/src/main.rs` invoke handler +4. Call from frontend using `invoke()` + +### Development Commands +```bash +# Start development server +bun tauri dev + +# Build for production +bun tauri build + +# Type checking +bun typecheck +``` + +### Key Differences from Web Development + +| Web Apps | Tauri Apps | +|----------|------------| +| REST/GraphQL APIs | `invoke()` commands | +| WebSockets | `listen()`/`emit()` events | +| Network requests | Local IPC communication | +| CORS concerns | No CORS (same process) | +| Server deployment | Embedded Rust binary | + +## File Structure + +- **Commands**: `src-tauri/src/commands/` - All backend command functions +- **Main**: `src-tauri/src/main.rs` - Application entry point and command registration +- **Frontend**: `src/` - React components and TypeScript code +- **Config**: `src-tauri/tauri.conf.json` - Tauri configuration + +## Security Model + +- Commands are explicitly registered in `main.rs` +- CSP controls frontend access +- Capabilities system restricts backend access +- No network requests needed (everything is local) + +## Error Handling + +**Backend:** +```rust +#[tauri::command] +pub fn risky_operation() -> Result { + if some_condition { + Ok("Success!".to_string()) + } else { + Err("Error message".to_string()) + } +} +``` + +**Frontend:** +```typescript +try { + const result = await invoke("risky_operation"); + console.log("Success:", result); +} catch (error) { + console.error("Error:", error); +} +``` \ No newline at end of file diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 7b05aecc..7eb5582b 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -21,5 +21,6 @@ Closes # Fixes # +My name diff --git a/src/components/ai-chat/chat-history-modal.tsx b/src/components/ai-chat/chat-history-modal.tsx index d626c471..943732c8 100644 --- a/src/components/ai-chat/chat-history-modal.tsx +++ b/src/components/ai-chat/chat-history-modal.tsx @@ -46,7 +46,7 @@ export default function ChatHistoryModal({
-
+
{filteredChats.length === 0 ? (
diff --git a/src/components/editor/code-editor.tsx b/src/components/editor/code-editor.tsx index f091b6ad..62168464 100644 --- a/src/components/editor/code-editor.tsx +++ b/src/components/editor/code-editor.tsx @@ -30,7 +30,6 @@ interface CodeEditorProps { disabled?: boolean; className?: string; } - export interface CodeEditorRef { editor: HTMLDivElement | null; textarea: HTMLDivElement | null; diff --git a/src/contexts/toast-context.tsx b/src/contexts/toast-context.tsx index cc4f6539..40777a76 100644 --- a/src/contexts/toast-context.tsx +++ b/src/contexts/toast-context.tsx @@ -14,7 +14,7 @@ interface Toast { } interface ToastContextType { - toasts: Toast[]; + toasts: ToastContextTypeoast[]; showToast: (toast: Omit) => string; // Return toast ID updateToast: (id: string, updates: Partial>) => void; dismissToast: (id: string) => void; diff --git a/src/main.tsx b/src/main.tsx index d74b08c8..4e703a0c 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -6,7 +6,8 @@ import { ToastProvider } from "./contexts/toast-context.tsx"; // helps track re-renders in development mode scan({ - enabled: true, + enabled: import.meta.env.DEV, + log: import.meta.env.DEV, }); createRoot(document.getElementById("root")!).render( diff --git a/src/styles.css b/src/styles.css index a7affb7d..5f32ceda 100644 --- a/src/styles.css +++ b/src/styles.css @@ -795,7 +795,7 @@ button { /* Ensure scrolling works properly in all browsers */ textarea { scrollbar-width: thin; - scrollbar-color: #ccc #f5f5f5; + scrollbar-color: var(--color-border) var(--color-secondary-bg); /* Force enable scrolling in Tauri */ overflow: auto !important; -webkit-overflow-scrolling: touch; @@ -807,26 +807,79 @@ textarea::-webkit-scrollbar { } textarea::-webkit-scrollbar-track { - background: #f5f5f5; + background: var(--color-secondary-bg); } textarea::-webkit-scrollbar-thumb { - background: #ccc; + background: var(--color-border); border-radius: 6px; } textarea::-webkit-scrollbar-thumb:hover { - background: #999; + background: var(--color-text-lighter); } -/* Force proper scrolling for all overflow auto elements */ +/* Theme-aware scrollbars for all overflow elements */ [class*="overflow-auto"], -.overflow-auto { +.overflow-auto, +[class*="overflow-y-auto"], +.overflow-y-auto, +[class*="overflow-x-auto"], +.overflow-x-auto { + scrollbar-width: thin; + scrollbar-color: var(--color-border) var(--color-secondary-bg); overflow: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: none !important; } +[class*="overflow-auto"]::-webkit-scrollbar, +.overflow-auto::-webkit-scrollbar, +[class*="overflow-y-auto"]::-webkit-scrollbar, +.overflow-y-auto::-webkit-scrollbar, +[class*="overflow-x-auto"]::-webkit-scrollbar, +.overflow-x-auto::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +[class*="overflow-auto"]::-webkit-scrollbar-track, +.overflow-auto::-webkit-scrollbar-track, +[class*="overflow-y-auto"]::-webkit-scrollbar-track, +.overflow-y-auto::-webkit-scrollbar-track, +[class*="overflow-x-auto"]::-webkit-scrollbar-track, +.overflow-x-auto::-webkit-scrollbar-track { + background: var(--color-secondary-bg); +} + +[class*="overflow-auto"]::-webkit-scrollbar-thumb, +.overflow-auto::-webkit-scrollbar-thumb, +[class*="overflow-y-auto"]::-webkit-scrollbar-thumb, +.overflow-y-auto::-webkit-scrollbar-thumb, +[class*="overflow-x-auto"]::-webkit-scrollbar-thumb, +.overflow-x-auto::-webkit-scrollbar-thumb { + background: var(--color-border); + border-radius: 4px; +} + +[class*="overflow-auto"]::-webkit-scrollbar-thumb:hover, +.overflow-auto::-webkit-scrollbar-thumb:hover, +[class*="overflow-y-auto"]::-webkit-scrollbar-thumb:hover, +.overflow-y-auto::-webkit-scrollbar-thumb:hover, +[class*="overflow-x-auto"]::-webkit-scrollbar-thumb:hover, +.overflow-x-auto::-webkit-scrollbar-thumb:hover { + background: var(--color-text-lighter); +} + +[class*="overflow-auto"]::-webkit-scrollbar-corner, +.overflow-auto::-webkit-scrollbar-corner, +[class*="overflow-y-auto"]::-webkit-scrollbar-corner, +.overflow-y-auto::-webkit-scrollbar-corner, +[class*="overflow-x-auto"]::-webkit-scrollbar-corner, +.overflow-x-auto::-webkit-scrollbar-corner { + background: var(--color-secondary-bg); +} + /* Paper texture and theme-aware colors for welcome screen */ .paper-texture { background: var(--color-primary-bg); From f902e163e498d229d73ca433019e71f1b88cf5d6 Mon Sep 17 00:00:00 2001 From: Johnson Nifemi Date: Wed, 22 Oct 2025 15:59:12 +0100 Subject: [PATCH 2/3] Deleted cursor folder --- .../fix-scrollbar-styling-46127466.plan.md | 152 ------------------ .cursor/rules/css-theme-variables.mdc | 95 ----------- .cursor/rules/editor-architecture.mdc | 98 ----------- .cursor/rules/scrollbar-styling.mdc | 52 ------ .cursor/rules/tauri-development.mdc | 118 -------------- CodeSnap | 1 + 6 files changed, 1 insertion(+), 515 deletions(-) delete mode 100644 .cursor/plans/fix-scrollbar-styling-46127466.plan.md delete mode 100644 .cursor/rules/css-theme-variables.mdc delete mode 100644 .cursor/rules/editor-architecture.mdc delete mode 100644 .cursor/rules/scrollbar-styling.mdc delete mode 100644 .cursor/rules/tauri-development.mdc create mode 160000 CodeSnap diff --git a/.cursor/plans/fix-scrollbar-styling-46127466.plan.md b/.cursor/plans/fix-scrollbar-styling-46127466.plan.md deleted file mode 100644 index e4f39ab5..00000000 --- a/.cursor/plans/fix-scrollbar-styling-46127466.plan.md +++ /dev/null @@ -1,152 +0,0 @@ - -# Fix Scrollbar Styling for Editor and Modals - -## Problem - -White scrollbars appear in the editor and modals, breaking the theme consistency. The issue stems from: - -1. Hardcoded light colors in textarea scrollbar styles (lines 796-820 in `src/styles.css`) -2. Generic overflow elements not using theme-aware scrollbar classes -3. Inconsistent scrollbar styling across components - -## Solution - -### 1. Fix Global Textarea Scrollbar Styling - -**File:** `src/styles.css` (lines 795-820) - -Replace the hardcoded colors: - -```css -textarea { - scrollbar-width: thin; - scrollbar-color: var(--color-border) var(--color-secondary-bg); -} - -textarea::-webkit-scrollbar { - width: 12px; -} - -textarea::-webkit-scrollbar-track { - background: var(--color-secondary-bg); -} - -textarea::-webkit-scrollbar-thumb { - background: var(--color-border); - border-radius: 6px; -} - -textarea::-webkit-scrollbar-thumb:hover { - background: var(--color-text-lighter); -} -``` - -### 2. Add Global Overflow Auto Scrollbar Styling - -**File:** `src/styles.css` (after line 820) - -Add theme-aware styling for all overflow elements: - -```css -/* Theme-aware scrollbars for all overflow elements */ -[class*="overflow-auto"], -.overflow-auto, -[class*="overflow-y-auto"], -.overflow-y-auto, -[class*="overflow-x-auto"], -.overflow-x-auto { - scrollbar-width: thin; - scrollbar-color: var(--color-border) var(--color-secondary-bg); -} - -[class*="overflow-auto"]::-webkit-scrollbar, -.overflow-auto::-webkit-scrollbar, -[class*="overflow-y-auto"]::-webkit-scrollbar, -.overflow-y-auto::-webkit-scrollbar, -[class*="overflow-x-auto"]::-webkit-scrollbar, -.overflow-x-auto::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -[class*="overflow-auto"]::-webkit-scrollbar-track, -.overflow-auto::-webkit-scrollbar-track, -[class*="overflow-y-auto"]::-webkit-scrollbar-track, -.overflow-y-auto::-webkit-scrollbar-track, -[class*="overflow-x-auto"]::-webkit-scrollbar-track, -.overflow-x-auto::-webkit-scrollbar-track { - background: var(--color-secondary-bg); -} - -[class*="overflow-auto"]::-webkit-scrollbar-thumb, -.overflow-auto::-webkit-scrollbar-thumb, -[class*="overflow-y-auto"]::-webkit-scrollbar-thumb, -.overflow-y-auto::-webkit-scrollbar-thumb, -[class*="overflow-x-auto"]::-webkit-scrollbar-thumb, -.overflow-x-auto::-webkit-scrollbar-thumb { - background: var(--color-border); - border-radius: 4px; -} - -[class*="overflow-auto"]::-webkit-scrollbar-thumb:hover, -.overflow-auto::-webkit-scrollbar-thumb:hover, -[class*="overflow-y-auto"]::-webkit-scrollbar-thumb:hover, -.overflow-y-auto::-webkit-scrollbar-thumb:hover, -[class*="overflow-x-auto"]::-webkit-scrollbar-thumb:hover, -.overflow-x-auto::-webkit-scrollbar-thumb:hover { - background: var(--color-text-lighter); -} - -[class*="overflow-auto"]::-webkit-scrollbar-corner, -.overflow-auto::-webkit-scrollbar-corner, -[class*="overflow-y-auto"]::-webkit-scrollbar-corner, -.overflow-y-auto::-webkit-scrollbar-corner, -[class*="overflow-x-auto"]::-webkit-scrollbar-corner, -.overflow-x-auto::-webkit-scrollbar-corner { - background: var(--color-secondary-bg); -} -``` - -### 3. Update Modal Scrollbar Styling - -**File:** `src/components/ai-chat/chat-history-modal.tsx` (line 49) - -Change from: - -```tsx -
-``` - -To: - -```tsx -
-``` - -### 4. Update Editor Container - -**File:** `src/components/editor/code-editor.tsx` (lines 277-287) - -Keep scrollbars hidden for editor (this is correct behavior), but ensure no white scrollbars leak through by adding explicit webkit rules in the inline style or ensuring the CSS from `editor-stylesheet.tsx` applies properly. - -## Files to Modify - -1. `src/styles.css` - Update global scrollbar styling (lines 796-828) -2. `src/components/ai-chat/chat-history-modal.tsx` - Add custom-scrollbar class (line 49) -3. Other modal components will automatically inherit the global overflow styling from step 2 - -## Expected Result - -All scrollbars throughout the application (editor, modals, dropdowns, lists) will: - -- Use theme colors (border color for thumb, secondary bg for track) -- Match the current theme (light or dark) -- Have consistent width (8px) and styling -- Eliminate white scrollbars completely - -### To-dos - -- [ ] Update textarea scrollbar styles to use CSS variables instead of hardcoded colors in src/styles.css -- [ ] Add comprehensive scrollbar styling for all overflow-auto, overflow-y-auto, and overflow-x-auto classes in src/styles.css -- [ ] Add custom-scrollbar class to chat-history-modal.tsx overflow container -- [ ] Verify editor scrollbars remain hidden and no white scrollbars appear \ No newline at end of file diff --git a/.cursor/rules/css-theme-variables.mdc b/.cursor/rules/css-theme-variables.mdc deleted file mode 100644 index 2f39dc00..00000000 --- a/.cursor/rules/css-theme-variables.mdc +++ /dev/null @@ -1,95 +0,0 @@ ---- -globs: *.css,*.tsx,*.ts ---- - -# CSS Theme Variables Guidelines - -## Required Theme Variables - -Always use CSS variables instead of hardcoded colors to maintain theme consistency across light and dark modes. - -### Primary Colors -- `var(--color-primary-bg)` - Primary background color -- `var(--color-secondary-bg)` - Secondary background color -- `var(--color-text)` - Primary text color -- `var(--color-text-lighter)` - Lighter text color -- `var(--color-border)` - Border color - -### Scrollbar Colors -- `var(--color-border)` - Scrollbar thumb color -- `var(--color-secondary-bg)` - Scrollbar track color -- `var(--color-text-lighter)` - Scrollbar thumb hover color - -### Editor Colors -- `var(--editor-font-family)` - Editor font family -- `var(--selection-bg)` - Text selection background -- `var(--git-gutter-added)` - Git gutter added color -- `var(--git-gutter-modified)` - Git gutter modified color -- `var(--git-gutter-deleted)` - Git gutter deleted color - -## Implementation Rules - -### ✅ Correct Usage -```css -background: var(--color-primary-bg); -color: var(--color-text); -border: 1px solid var(--color-border); -``` - -### ❌ Avoid Hardcoded Colors -```css -background: #ffffff; /* Don't do this */ -color: #000000; /* Don't do this */ -border: 1px solid #ccc; /* Don't do this */ -``` - -### Scrollbar Implementation -```css -scrollbar-width: thin; -scrollbar-color: var(--color-border) var(--color-secondary-bg); -``` - -### Webkit Scrollbar Styling -```css -::-webkit-scrollbar { - width: 8px; -} - -::-webkit-scrollbar-track { - background: var(--color-secondary-bg); -} - -::-webkit-scrollbar-thumb { - background: var(--color-border); - border-radius: 4px; -} - -::-webkit-scrollbar-thumb:hover { - background: var(--color-text-lighter); -} -``` - -## Theme-Aware Components - -### Modal Components -Use `custom-scrollbar` class for consistent scrollbar styling: -```tsx -
-``` - -### Editor Components -Hide scrollbars completely: -```css -.editor-container { - scrollbar-width: none; - -ms-overflow-style: none; -} - -.editor-container::-webkit-scrollbar { - display: none; -} -``` - -## Global Styling - -The application includes comprehensive global scrollbar styling in [src/styles.css](mdc:src/styles.css) that automatically applies theme-aware colors to all overflow elements. This ensures consistency across the entire application without requiring individual component styling. \ No newline at end of file diff --git a/.cursor/rules/editor-architecture.mdc b/.cursor/rules/editor-architecture.mdc deleted file mode 100644 index 992b14eb..00000000 --- a/.cursor/rules/editor-architecture.mdc +++ /dev/null @@ -1,98 +0,0 @@ ---- -description: Editor component architecture and development guidelines ---- - -# Editor Architecture Guidelines - -## Main Editor Components - -The editor is built with a sophisticated React-based architecture: - -### Core Components -- **[src/components/editor/code-editor.tsx](mdc:src/components/editor/code-editor.tsx)** - Main editor wrapper component -- **[src/components/editor/core/text-editor.tsx](mdc:src/components/editor/core/text-editor.tsx)** - Core text editing functionality (1,323 lines) -- **[src/components/editor/core/line-based-editor.tsx](mdc:src/components/editor/core/line-based-editor.tsx)** - Line-based editor implementation - -### Editor Sub-components -- **Core**: `src/components/editor/core/` - Core editor functionality -- **Overlays**: `src/components/editor/overlays/` - Editor overlays and UI elements -- **Rendering**: `src/components/editor/rendering/` - Rendering components - -### State Management -Editor state is managed through multiple Zustand stores in `src/stores/editor-*.ts`: -- `editor-state-store.ts` - Core editor state -- `editor-cursor-store.ts` - Cursor management -- `editor-view-store.ts` - View state -- `editor-settings-store.ts` - Editor settings -- And many more specialized stores - -## Development Guidelines - -### Adding New Editor Features -1. **State Management**: Use existing Zustand stores or create new ones -2. **UI Components**: Add to appropriate subdirectory in `src/components/editor/` -3. **Styling**: Use CSS variables for theme consistency -4. **Performance**: Leverage existing performance hooks and optimizations - -### Editor Styling -- **Scrollbars**: Must be hidden using `scrollbar-width: none` and `display: none` -- **Fonts**: Use `var(--editor-font-family)` for consistent font rendering -- **Colors**: Use CSS variables like `var(--color-text)`, `var(--color-primary-bg)` -- **Git Gutter**: Use theme-aware colors defined in editor stylesheet - -### Key Architecture Patterns - -#### Store Integration -```typescript -const { setCursorVisibility, restorePositionForFile } = useEditorCursorStore.use.actions(); -const activeBufferId = useBufferStore.use.activeBufferId(); -``` - -#### Performance Optimization -```typescript -import { useDebouncedFunction, usePerformanceMonitor, useRAFCallback } from "@/hooks/use-performance"; -``` - -#### Theme Integration -```typescript -const { settings } = useSettingsStore(); -const zoomLevel = useZoomStore.use.editorZoomLevel(); -``` - -## File Organization - -### Component Structure -``` -src/components/editor/ -├── code-editor.tsx # Main wrapper -├── core/ # Core functionality -│ ├── text-editor.tsx # Main text editor -│ ├── line-based-editor.tsx -│ └── keyboard-shortcuts.ts -├── overlays/ # UI overlays -│ ├── completion-dropdown.tsx -│ ├── hover-tooltip.tsx -│ └── editor-context-menu.tsx -└── rendering/ # Rendering components - ├── editor-viewport.tsx - ├── line-renderer.tsx - └── line-gutter.tsx -``` - -### State Stores -``` -src/stores/ -├── editor-state-store.ts -├── editor-cursor-store.ts -├── editor-view-store.ts -├── editor-settings-store.ts -└── editor-*.ts # Other specialized stores -``` - -## Best Practices - -1. **Modularity**: Keep editor functionality in separate, focused components -2. **State Management**: Use Zustand stores for complex state, local state for simple UI -3. **Performance**: Use existing performance hooks and avoid unnecessary re-renders -4. **Accessibility**: Maintain keyboard navigation and screen reader support -5. **Theme Consistency**: Always use CSS variables for colors and styling \ No newline at end of file diff --git a/.cursor/rules/scrollbar-styling.mdc b/.cursor/rules/scrollbar-styling.mdc deleted file mode 100644 index 2a813003..00000000 --- a/.cursor/rules/scrollbar-styling.mdc +++ /dev/null @@ -1,52 +0,0 @@ ---- -description: Scrollbar styling guidelines and theme consistency rules ---- - -# Scrollbar Styling Guidelines - -## Theme-Aware Scrollbar Implementation - -All scrollbars in the application must use theme-aware CSS variables instead of hardcoded colors to maintain consistency across light and dark themes. - -### Required CSS Variables -- `var(--color-border)` - For scrollbar thumb color -- `var(--color-secondary-bg)` - For scrollbar track color -- `var(--color-text-lighter)` - For scrollbar thumb hover color - -### Global Scrollbar Styling -The application uses comprehensive global scrollbar styling in [src/styles.css](mdc:src/styles.css) that automatically applies theme-aware colors to all overflow elements: - -```css -/* Theme-aware scrollbars for all overflow elements */ -[class*="overflow-auto"], -.overflow-auto, -[class*="overflow-y-auto"], -.overflow-y-auto, -[class*="overflow-x-auto"], -.overflow-x-auto { - scrollbar-width: thin; - scrollbar-color: var(--color-border) var(--color-secondary-bg); -} -``` - -### Editor Scrollbar Behavior -- Editor containers use `scrollbar-width: none` and `display: none` to hide scrollbars completely -- This is implemented in [src/components/editor/editor-stylesheet.tsx](mdc:src/components/editor/editor-stylesheet.tsx) -- Editor containers should never show visible scrollbars - -### Modal and Component Scrollbars -- Use `custom-scrollbar` class for enhanced scrollbar styling -- Example: `
` -- All modals automatically inherit global overflow styling - -### Textarea Scrollbars -- Textarea scrollbars use theme variables: `var(--color-border)` and `var(--color-secondary-bg)` -- Never use hardcoded colors like `#ccc` or `#f5f5f5` - -## Implementation Rules - -1. **Never use hardcoded scrollbar colors** - Always use CSS variables -2. **Editor scrollbars must be hidden** - Use `scrollbar-width: none` and `display: none` -3. **Modal scrollbars should be theme-aware** - Use `custom-scrollbar` class or inherit global styling -4. **Consistent sizing** - Use 8px width for most scrollbars, 12px for textareas -5. **Hover effects** - Always include hover states using `var(--color-text-lighter)` \ No newline at end of file diff --git a/.cursor/rules/tauri-development.mdc b/.cursor/rules/tauri-development.mdc deleted file mode 100644 index 083712fe..00000000 --- a/.cursor/rules/tauri-development.mdc +++ /dev/null @@ -1,118 +0,0 @@ ---- -description: Tauri desktop application development workflow and architecture guidelines ---- - -# Tauri Development Guidelines - -## Architecture Overview - -This is a **Tauri desktop application** with: -- **Frontend**: React/TypeScript (in `src/`) -- **Backend**: Rust (in `src-tauri/src/`) -- **Communication**: IPC (Inter-Process Communication) instead of HTTP APIs - -## Backend-Frontend Communication - -### Commands (Request/Response Pattern) -Instead of REST endpoints, use Tauri commands: - -**Backend (Rust):** -```rust -#[tauri::command] -pub fn get_user_data(user_id: String) -> Result { - // Implementation - Ok(user_data) -} -``` - -**Frontend (TypeScript):** -```typescript -import { invoke } from "@tauri-apps/api/core"; - -const userData = await invoke("get_user_data", { userId: "123" }); -``` - -### Events (Pub/Sub Pattern) -For real-time communication: - -**Backend (Rust):** -```rust -app_handle.emit("user-updated", user_data).unwrap(); -``` - -**Frontend (TypeScript):** -```typescript -import { listen } from "@tauri-apps/api/event"; - -listen("user-updated", (event) => { - console.log("User updated:", event.payload); -}); -``` - -## Development Workflow - -### Adding New Commands -1. Create command function in `src-tauri/src/commands/` -2. Export in `src-tauri/src/commands/mod.rs` -3. Register in `src-tauri/src/main.rs` invoke handler -4. Call from frontend using `invoke()` - -### Development Commands -```bash -# Start development server -bun tauri dev - -# Build for production -bun tauri build - -# Type checking -bun typecheck -``` - -### Key Differences from Web Development - -| Web Apps | Tauri Apps | -|----------|------------| -| REST/GraphQL APIs | `invoke()` commands | -| WebSockets | `listen()`/`emit()` events | -| Network requests | Local IPC communication | -| CORS concerns | No CORS (same process) | -| Server deployment | Embedded Rust binary | - -## File Structure - -- **Commands**: `src-tauri/src/commands/` - All backend command functions -- **Main**: `src-tauri/src/main.rs` - Application entry point and command registration -- **Frontend**: `src/` - React components and TypeScript code -- **Config**: `src-tauri/tauri.conf.json` - Tauri configuration - -## Security Model - -- Commands are explicitly registered in `main.rs` -- CSP controls frontend access -- Capabilities system restricts backend access -- No network requests needed (everything is local) - -## Error Handling - -**Backend:** -```rust -#[tauri::command] -pub fn risky_operation() -> Result { - if some_condition { - Ok("Success!".to_string()) - } else { - Err("Error message".to_string()) - } -} -``` - -**Frontend:** -```typescript -try { - const result = await invoke("risky_operation"); - console.log("Success:", result); -} catch (error) { - console.error("Error:", error); -} -``` \ No newline at end of file diff --git a/CodeSnap b/CodeSnap new file mode 160000 index 00000000..6de4a985 --- /dev/null +++ b/CodeSnap @@ -0,0 +1 @@ +Subproject commit 6de4a985c48de8ab69c4258e9406e408f7e5a8d6 From f0019236a4e72b248ea75d8aeab356b2c4689449 Mon Sep 17 00:00:00 2001 From: Johnson Nifemi Date: Wed, 22 Oct 2025 15:59:38 +0100 Subject: [PATCH 3/3] Deleted codesnap file --- CodeSnap | 1 - 1 file changed, 1 deletion(-) delete mode 160000 CodeSnap diff --git a/CodeSnap b/CodeSnap deleted file mode 160000 index 6de4a985..00000000 --- a/CodeSnap +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 6de4a985c48de8ab69c4258e9406e408f7e5a8d6