---
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)