ilia
80a6c01cdb
- Use CoreGraphics (core-graphics crate) for global mouse position instead of Tauri's window-relative cursor_position() which fails when hidden - Switch to titleBarStyle overlay with hiddenTitle for native resize handles while keeping the frameless look (decorations:false had no resize affordance) - Fix paste_and_refocus: use .output() instead of .spawn() so osascript actually completes, increase delay to 250ms for reliable app refocus - Add comprehensive App.test.tsx (7 integration tests) bringing total to 47 - Add multi-select and type badge tests for ClipboardList and ContextMenu - Update Tauri mock in setup.ts with innerSize/scaleFactor for resize tests - Create .cursor/rules/ with 4 rule files for project conventions - Add npm run lint and npm run check scripts - Update README with full usage table and current test counts (74 total) Co-authored-by: Cursor <cursoragent@cursor.com>
34 lines
1.2 KiB
Plaintext
34 lines
1.2 KiB
Plaintext
---
|
|
description: React/TypeScript frontend patterns for Tauri app
|
|
globs: src/**/*.{ts,tsx}
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Frontend Conventions
|
|
|
|
## Component Structure
|
|
|
|
- Functional components with hooks, no class components
|
|
- Types in `src/types.ts`, shared between components
|
|
- Test files colocated: `Component.test.tsx` next to `Component.tsx`
|
|
- Test factories in `src/test/factories.ts` (`makeEntry`, `makeSettings`)
|
|
|
|
## Tauri IPC
|
|
|
|
- Use `invoke()` from `@tauri-apps/api/core` to call Rust commands
|
|
- Use `writeText()` from `@tauri-apps/plugin-clipboard-manager` for clipboard writes
|
|
- Mock all Tauri APIs in `src/test/setup.ts` for Vitest
|
|
|
|
## State Management
|
|
|
|
- App-level state in `App.tsx` via `useState`/`useCallback`
|
|
- Multi-select: `selectedIds` (Set), `anchorIndex`, `focusIndex`
|
|
- Selection actions: `selectOnly` (plain click), `toggleSelect` (Cmd+Click), `selectRange` (Shift+Click/Arrow)
|
|
|
|
## Styling
|
|
|
|
- Tailwind CSS v4 with custom theme tokens in `src/index.css`
|
|
- Theme colors: `--color-surface`, `--color-accent`, `--color-text-primary`, etc.
|
|
- Dark mode via `@media (prefers-color-scheme: dark)` overrides in CSS
|
|
- Never use inline styles except for dynamic positioning (ContextMenu)
|