Developer
2ece7074f6
- Revert touch-action: none on .xterm-viewport so xterm.js can fall back to its own viewport scrolling when the custom handler doesn't take over. - Detect alternate screen via reference equality (term.buffer.active === term.buffer.alternate) instead of the string, which could report normal buffer incorrectly. - Lower vertical-scroll activation threshold from 4px to 2px and only prevent default once a vertical gesture is recognized. - In normal buffer use term.scrollLines() so xterm.js handles the buffer scroll consistently; in alternate screen continue sending SGR 1006 mouse-wheel sequences to tmux/vim. Quality gates: typecheck, lint clean, npm test -- --run 87 passed.
3.8 KiB
3.8 KiB
apps/web/src/components
dir: apps/web/src/components
index: apps/web/src/components/.pi-map.index.md
role
Provides reusable, accessible UI components and utilities for rendering the application shell, data states, icons, code display, notifications, and route protection in a React web application.
files
- app-shell.tsx | Renders the main application shell layout with navigation, header, session management, and mobile-responsive behavior for a React Router-based SPA. | exp: AppShell | dep: react-router-dom, ../api/sessions, ../hooks/use-theme, ../state/auth, ../state/sessions, ../hooks/use-mobile-viewport, ../state/events, ../state/toast, ../state/notifications, ./features/notification/event-toast-bridge, ./features/notification/notification-center, ./icon, ./features/mobile/mobile-nav, ./features/tool/start-tool-fab, ../utils/icons
- code-editor.tsx | A React component that renders a syntax-highlighted code editor with line numbers using react-simple-code-editor. | exp: CodeEditor | dep: react, react-simple-code-editor, ../utils/language
- data-states.tsx | Provides reusable React components for displaying loading, error, and empty data states in a UI. | exp: LoadingState, ErrorState, EmptyState | dep: ./icon, icon
- icon.tsx | Provides a centralized, type-safe React icon component that maps semantic names to Phosphor icons with configurable size, weight, color, and accessibility attributes. | exp: IconName, IconProps, Icon | dep: react, @phosphor-icons/react
- loading-overlay.tsx | Renders an accessible loading overlay with optional label that conditionally displays based on visibility prop | exp: func:LoadingOverlay({ visible, label }: LoadingOverlayProps) | dep: ./icon, icon
- protected-route.test.tsx | Tests a ProtectedRoute component that guards content based on authentication state | dep: @testing-library/react, react-router-dom, vitest, ./protected-route
- protected-route.tsx | Conditionally renders children or redirects to login based on authentication state | exp: ProtectedRoute | dep: react-router-dom, ../state/auth
- syntax-highlighter.tsx | Renders syntax-highlighted code blocks with optional line numbers and copy-to-clipboard functionality | exp: SyntaxHighlighter | dep: react, ./icon, ../utils/language, React, icon, language (utils)
- toast-rules.test.ts | Unit tests for mapping instance events to toast notification categories and severities | dep: vitest, ./toast-rules, ../types/events
- toast-rules.ts | Maps instance events to toast notifications with deduplication logic to prevent spam | exp: func:mapEventToCategory(event: InstanceEventPayload) → string, call:event.event.startsWith, func:mapEventToSeverity(event: InstanceEventPayload) → "info" | "warning" | "error" | "success", func:handleEventToast(event: InstanceEventPayload) → void, call:shouldShowToast, call:toast.info, call:toast.success, call:toast.warning, call:toast.error, func:clearToastDedup() → void, call:lastToastTime.clear | dep: ../state/toast, ../types/events, toast state module, InstanceEventPayload type
arch
Component-based React architecture with functional components, composition patterns, separation of concerns (presentation vs logic), and test coverage for critical utilities; integrates third-party libraries (Phosphor icons, react-simple-code-editor) and React Router for SPA navigation.
tags
toast, icon, react, state, code, loading, event, editor
symbols
- LoadingOverlay
- mapEventToCategory
- mapEventToSeverity
- handleEventToast
- clearToastDedup
- AppShell
- CodeEditor
- LoadingState
workflows
- change components behavior read: app-shell.tsx, code-editor.tsx, data-states.tsx
- update components tests read: protected-route.test.tsx, toast-rules.test.ts
- explore components subdirectories index: apps/web/src/components/features/.pi-map.index.md