feat: enable toggle button research mode (#781)#783
feat: enable toggle button research mode (#781)#783NoopDog merged 3 commits intomim-fran-noop/778-ai-epicfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR enables dynamic mode switching between "search" and "research" panels in the ExploreView by introducing a mode context and refactoring the UI structure. The implementation allows users to toggle between traditional filter-based search and a future AI-assisted research mode, with the UI adapting accordingly (e.g., sidebar width changes, different panels displayed).
Changes:
- Added a mode context with explicit typing that always provides a
value(defaulting to SEARCH), eliminating the previousPartialtype and ensuring type safety - Implemented panel selector component to conditionally render SearchPanel or ResearchPanel based on the current mode
- Updated sidebar to dynamically adjust width (264px for search, 412px for research) based on mode and pass mode prop through the component tree
- Modified ToggleButtonGroup provider to prevent null value assignments, improving state safety
- Reorganized styles by moving them from filters and sidebar to panel-level styling
Reviewed changes
Copilot reviewed 18 out of 18 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/views/ExploreView/mode/provider/types.ts | Changed ModeContextProps from Partial to explicit type with required value field |
| src/views/ExploreView/mode/provider/provider.tsx | Updated provider to ensure value defaults to MODE.SEARCH when disabled or null |
| src/views/ExploreView/mode/provider/context.ts | Added default context value of MODE.SEARCH |
| src/views/ExploreView/mode/selector/panelSelector.tsx | New component to conditionally render search or research panels |
| src/views/ExploreView/search/panel/panel.tsx | New search panel wrapper that hides content in research mode |
| src/views/ExploreView/research/panel/panel.tsx | New research panel placeholder that shows in research mode |
| src/views/ExploreView/exploreView.tsx | Refactored to use PanelSelector and updated import paths |
| src/components/common/ToggleButtonGroup/provider/provider.tsx | Added null check to prevent setting null values |
| src/components/Layout/components/Sidebar/sidebar.tsx | Added mode context consumption and mode prop passing |
| src/components/Layout/components/Sidebar/sidebar.styles.ts | Added conditional width styling based on mode |
| src/components/Layout/components/Sidebar/components/SidebarDrawer/sidebarDrawer.tsx | Added mode prop to interface (but not used in implementation) |
| src/views/ExploreView/mode/components/ToggleButtonGroup/constants.ts | Removed disabled/selected props and fullWidth from toggle buttons |
| src/views/ExploreView/mode/components/ToggleButtonGroup/toggleButtonGroup.styles.ts | Added 16px margin to toggle button group |
| src/views/ExploreView/search/panel/panel.styles.ts | New styles for search panel layout (moved from sidebar/filters) |
| src/views/ExploreView/search/sidebar/sidebar.styles.ts | Removed (styles moved to panel) |
| src/views/ExploreView/search/filters/filters.styles.ts | Removed (styles moved to panel) |
| src/tests/testIds.ts | Updated test IDs from SEARCH_CONTROLS to SEARCH_PANEL and added RESEARCH_PANEL |
| tests/modeProvider.test.tsx | Updated tests to expect MODE.SEARCH instead of undefined when disabled |
| import { useMode } from "../../mode/provider/hook"; | ||
| import { MODE } from "../../mode/types"; | ||
| import { TEST_IDS } from "../../../../tests/testIds"; | ||
|
|
There was a problem hiding this comment.
The Panel component is missing JSDoc documentation. Following the codebase convention, all exported components should have JSDoc comments that describe the component's purpose and include a @returns tag. This documentation pattern is consistently used throughout the codebase for all exported components and functions.
| /** | |
| * Renders the research panel when the current mode is not search. | |
| * @returns The research panel element, or null when in search mode. | |
| */ |
|
|
||
| export interface SidebarDrawerProps { | ||
| children: ReactNode | ReactNode[]; | ||
| mode: MODE; |
There was a problem hiding this comment.
The mode prop is added to the SidebarDrawerProps interface but is never destructured or used in the component implementation. This prop should either be used to apply conditional styling/behavior to the drawer (similar to how the permanent sidebar uses it for width adjustment), or removed if it's not needed for the drawer implementation.
Closes #781.
This pull request introduces a "mode" context to the ExploreView, enabling dynamic switching between "search" and "research" panels. It refactors the sidebar and panel rendering logic to use this mode context, adds new panel selector components, and updates styling to support the new layouts. The changes also improve the ToggleButtonGroup behavior and update test coverage for the mode provider.
Mode context and provider enhancements:
MODEcontext with default value and explicit typing, ensuring consistent access to mode state throughout the ExploreView. [1] [2] [3]ToggleButtonGroupProviderto prevent setting null values, improving state safety.Panel selection and rendering:
PanelSelectorto dynamically render either theResearchPanelorSearchPanelbased on mode, and refactored ExploreView to use this selector. [1] [2] [3] [4] [5] [6]Sidebar and layout updates:
UI and test improvements: