updated

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.