iliya 1498350cb1 feat: enhance React component data handling and improve task management features

- Updated `ProcessesSection` to directly access data from Zustand store, eliminating prop drilling for cleaner component structure.
- Added new guidelines in `react.md` for accessing data from the store over props to streamline component communication.
- Enhanced `TeamProvisioningService` to include task snapshots for team members, improving task management and visibility.
- Implemented notifications for killed processes, providing better feedback to team leads about process management actions.
- Refactored `TaskDetailDialog` and `GlobalTaskDetailDialog` to improve header content handling, enhancing user experience.
- Introduced folder collapsing functionality in `ReviewFileTree`, allowing for better navigation and organization of file structures.

2026-02-25 18:07:03 +02:00

2.1 KiB

Raw Blame History

globs

src/renderer/**/*.tsx

React Conventions

Component Structure

Components in src/renderer/components/ organized by feature
One component per file, PascalCase naming
Colocate related hooks and utilities

State Management (Zustand)

// Slices pattern
projects: Project[]
selectedProjectId: string | null
projectsLoading: boolean
projectsError: string | null

Each domain slice includes:

Data array or object
Selected/active item ID
Loading state
Error state

Hooks

Custom hooks in src/renderer/hooks/
Prefix with use: useAutoScrollBottom, useTheme
Keep hooks focused and composable

Component Organization

components/
├── chat/           # Chat display, items, viewers, SessionContextPanel
├── common/         # Shared components (badges, token display)
├── dashboard/      # Dashboard views
├── layout/         # Layout components (headers, shells)
├── notifications/  # Notification panels and badges
├── search/         # Search UI and results
├── settings/       # Settings pages and controls
│   ├── components/ # Reusable setting controls
│   ├── hooks/      # Settings-specific hooks
│   ├── sections/   # Setting sections
│   └── NotificationTriggerSettings/  # Trigger config UI
└── sidebar/        # Sidebar navigation

Data Access: Store over Props

When data is available in the Zustand store, child components should read it directly via useStore() instead of receiving it through props. This avoids unnecessary prop drilling and keeps parent components clean.

// Preferred — child reads from store
const ProcessesSection = () => {
  const teamName = useStore((s) => s.selectedTeamName);
  const data = useStore((s) => s.selectedTeamData);
  // ...
};

// Avoid — parent drills store data as props
<ProcessesSection teamName={teamName} processes={data.processes} members={data.members} />

Only pass props when the data is NOT in the store (e.g. local state, computed values, callbacks).

Contexts

contexts/TabUIContext.tsx - Per-tab UI state isolation

2.1 KiB Raw Blame History