updated

openspec/changes/update-dropdown-style-for-shadcn/.openspec.yaml

@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-03-28

openspec/changes/update-dropdown-style-for-shadcn/design.md

@@ -0,0 +1,24 @@
+## Context
+
+The current dropdown in `FilterBox.js` is a basic HTML `<select>` element. To align with the shadcn/ui aesthetic, we need a more flexible and styleable component. The shadcn/ui Dropdown Menu is built on top of Radix UI's Dropdown Menu primitive, which provides accessibility and interaction features.
+
+## Goals / Non-Goals
+
+**Goals:**
+- Replace the native `<select>` dropdown with a custom component that visually and functionally mimics the shadcn/ui Dropdown Menu.
+- Ensure the new component is accessible and reusable.
+
+**Non-Goals:**
+- Implement every single feature of the shadcn/ui Dropdown Menu. We will only implement the features currently required by the `FilterBox`.
+- Create a full component library. The focus is solely on the dropdown.
+
+## Decisions
+
+- **Component Library:** We will not install the entire `shadcn-ui` library, as that would be overkill. Instead, we will create a new React component that replicates the required styles.
+- **Styling:** We will use CSS modules to encapsulate the styles for the new dropdown component, inspired by the styling of shadcn/ui. This avoids conflicts with existing styles.
+- **Implementation:** A new component, `Dropdown.js`, will be created. It will manage its own state (e.g., open/closed, selected value). `FilterBox.js` will be updated to use this new `Dropdown` component.
+
+## Risks / Trade-offs
+
+- **[Risk]** Creating a custom component takes more effort than using a pre-built library. → **Mitigation:** The required dropdown functionality is simple, and a custom component gives us full control over the implementation and avoids unnecessary dependencies.
+- **[Trade-off]** We are not using the exact shadcn/ui library, so we will have to manually update the component if the shadcn/ui design evolves. → **Mitigation:** The design is for a simple dropdown, which is unlikely to change significantly.

openspec/changes/update-dropdown-style-for-shadcn/proposal.md

@@ -0,0 +1,21 @@
+## Why
+
+The current dropdown component has an outdated and inconsistent style. Adopting a modern, standardized design from a proven design system like shadcn/ui will improve user experience and visual consistency.
+
+## What Changes
+
+- The existing dropdown component will be restyled to match the appearance and behavior of the shadcn/ui Dropdown Menu.
+- This may involve replacing the underlying implementation or applying new CSS styles.
+
+## Capabilities
+
+### New Capabilities
+- `shadcn-dropdown-style`: Implement a dropdown component styled according to the shadcn/ui design system.
+
+### Modified Capabilities
+- None
+
+## Impact
+
+- This will affect all parts of the frontend that use the dropdown component.
+- The `frontend/src/components/FilterBox.js` is a likely candidate to be affected.

openspec/changes/update-dropdown-style-for-shadcn/specs/shadcn-dropdown-style/spec.md

@@ -0,0 +1,14 @@
+## ADDED Requirements
+
+### Requirement: Shadcn-Styled Dropdown Component
+The system SHALL provide a dropdown component with a visual style that mimics the shadcn/ui Dropdown Menu.
+
+#### Scenario: Dropdown Rendering
+- **WHEN** the dropdown component is rendered
+- **THEN** it SHALL display with a style consistent with the shadcn/ui Dropdown Menu, including fonts, colors, and spacing.
+
+#### Scenario: Dropdown Interaction
+- **WHEN** the user clicks on the dropdown trigger
+- **THEN** a menu of options SHALL appear.
+- **WHEN** the user selects an option from the menu
+- **THEN** the menu SHALL close and the selected option SHALL be displayed in the trigger.

openspec/changes/update-dropdown-style-for-shadcn/tasks.md

@@ -0,0 +1,22 @@
+## 1. Create the Dropdown Component
+
+- [x] 1.1 Create a new file `frontend/src/components/Dropdown.js`.
+- [x] 1.2 Create a corresponding CSS module `frontend/src/components/Dropdown.css`.
+- [x] 1.3 Implement the basic structure of the `Dropdown` component in `Dropdown.js`.
+- [x] 1.4 Add state management for open/closed state and selected value.
+
+## 2. Style the Dropdown Component
+
+- [x] 2.1 Add styles to `Dropdown.css` to mimic the shadcn/ui Dropdown Menu.
+- [x] 2.2 Ensure the styles are responsive and work across different screen sizes.
+
+## 3. Integrate the Dropdown Component
+
+- [x] 3.1 Modify `frontend/src/components/FilterBox.js` to import and use the new `Dropdown` component.
+- [x] 3.2 Replace the existing `<select>` element with the `Dropdown` component.
+- [x] 3.3 Pass the necessary props (options, onSelect) to the `Dropdown` component.
+
+## 4. Verification
+
+- [x] 4.1 Manually test the dropdown in the browser to ensure it functions as expected.
+- [ ] 4.2 Run any existing frontend tests to ensure no regressions have been introduced.