Add Course Details Drawer - #126
Merged
Merged
Conversation
v0.1.0 CARPI Site
Fill in README
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a “Course Details” drawer accessible from planner course context menus, enabling users to view key course info without searching the catalog. Along the way, it refactors filter option fetching into a global Zustand store and consolidates header icon-button UI into a shared Button component.
Changes:
- Add
CourseDetailsDrawer(Vaul drawer) and wire it into planner course menu options. - Move catalog filter option fetching/caching into
useFilterStoreand reuse viauseCourseFilters. - Replace catalog-specific
Tagusage and headerHeaderButtonwith sharedTag/Buttoncomponents.
Reviewed changes
Copilot reviewed 15 out of 16 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| src/pages/Catalog.tsx | Renames selected filters component usage. |
| src/lib/stores/useFilterStore.ts | New Zustand store for filter options + useCourseFilters helper. |
| src/features/planner/usePlannerCourse.ts | Adds “View Course Details” menu option hook support. |
| src/features/catalog/search/filters/SelectedFilters.tsx | Switches to shared Tag and passes toggleFilter. |
| src/features/catalog/search/filters/FilterSection.tsx | Switches to shared Tag and passes toggleFilter. |
| src/features/catalog/search/context/provider.tsx | Uses useFilterStore to fetch/provide filter options. |
| src/features/catalog/search/SearchBar.tsx | Renames selected filters component usage. |
| src/features/catalog/components/CatalogCourse.tsx | Uses useCourseFilters and shared Tag for course badges. |
| src/components/header/HeaderButton.tsx | Removes custom header icon button component. |
| src/components/header/ButtonTray.tsx | Migrates to shared Button for header actions. |
| src/components/course/Course.tsx | Wires drawer open state + adds drawer component to planner course view. |
| src/components/Tag.tsx | Decouples from catalog context via injected onToggle. |
| src/components/SideDrawer.tsx | New course details drawer UI (Vaul). |
| src/components/Button.tsx | New shared icon-button with tooltip styling. |
| package.json | Adds vaul dependency. |
| package-lock.json | Locks vaul dependency. |
Comments suppressed due to low confidence (1)
src/components/Tag.tsx:84
handleClickonly toggles whenonToggleis provided, but the button is still enabled wheneverisSelectable/isRemovableis true. This can silently produce “clickable but does nothing” tags if a caller forgetsonToggle. Consider makingonTogglerequired when interactive, or disabling/throwing when it’s missing.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
ramonechen
approved these changes
Apr 21, 2026
ramonechen
left a comment
ramonechen
left a comment
Contributor
There was a problem hiding this comment.
The drawer UI looks and feels very clean and responsive; can't find any issues with it on desktop or mobile views. Looks good to merge 👍
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR addresses Issue #111.
This PR adds the option for users to open up a course details drawer from the planner courses to view a courses details while creating a planner.
To access the details drawer, right click or click on the three horizontal dots on the right side of a
PlannerCourseinstance and select the first option,View Course Details. On desktops, the drawer will open in from the left side, eclipsing the Catalog. On mobile devices, the drawer will open up from the bottom of the screen.