updated

openspec/changes/refactor-dropdown-with-checkboxes/.openspec.yaml

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

openspec/changes/refactor-dropdown-with-checkboxes/design.md

@@ -0,0 +1,24 @@
+## Context
+
+The existing `Dropdown` component is a simple, single-select dropdown. The styling is not well-defined, leading to visual inconsistencies. The user wants to be able to select multiple items from the dropdown and have a more polished UI.
+
+## Goals / Non-Goals
+
+**Goals:**
+- Refactor the `Dropdown` component to support multi-selection with checkboxes.
+- Fix the styling issues, including text size and adding a clear boundary to the dropdown.
+- The refactored component should be reusable.
+
+**Non-Goals:**
+- This refactor will not introduce any new third-party libraries. We will use existing CSS and React capabilities.
+- We will not be adding complex features like search or filtering within the dropdown itself.
+
+## Decisions
+
+- **State Management:** The `Dropdown` component will manage its own open/closed state. The selected values will be managed by the parent component (`FilterBox`) to allow for greater flexibility.
+- **Styling:** We will use CSS modules to ensure the styles are scoped to the component. We will define clear classes for the container, header, list, items, and checkboxes.
+- **Component API:** The `Dropdown` component will accept an `options` array, a `selectedValues` array, and an `onSelect` function as props.
+
+## Risks / Trade-offs
+
+- **[Risk]** A complete refactor could introduce new bugs. → **Mitigation:** We will build the new component in isolation first, and then integrate it into `FilterBox`. The user has also requested to skip tests for now, which increases the risk. We will rely on manual testing.

openspec/changes/refactor-dropdown-with-checkboxes/proposal.md

@@ -0,0 +1,23 @@
+## Why
+
+The current dropdown component does not meet the desired style and functionality. The text is too large, it lacks a proper boundary, and it doesn't support multiple selections easily.
+
+## What Changes
+
+- Refactor the `Dropdown` component to improve its styling and layout.
+- Incorporate checkboxes within the dropdown to allow for multiple selections.
+- The component's text size and boundaries will be fixed.
+
+## Capabilities
+
+### New Capabilities
+- `multi-select-dropdown`: Implement a dropdown component that supports multiple selections using checkboxes.
+- `dropdown-styling-fix`: Correct the styling issues of the dropdown component.
+
+### Modified Capabilities
+- None
+
+## Impact
+
+- This will affect the `Dropdown` component and its parent component, `FilterBox`.
+- The changes will be contained within the `frontend` directory.

openspec/changes/refactor-dropdown-with-checkboxes/specs/dropdown-styling-fix/spec.md

@@ -0,0 +1,27 @@
+## ADDED Requirements
+
+### Requirement: Dropdown Styling
+The system SHALL ensure the dropdown component has a professional and consistent visual appearance.
+
+#### Scenario: Dropdown Container Styling
+- **WHEN** the dropdown is rendered
+- **THEN** it SHALL be enclosed in a clearly defined boundary (e.g., a border).
+- **THEN** the text within the dropdown SHALL be a reasonable size and not overflow its container.
+- **THEN** the dropdown content SHALL have a white background.
+- **THEN** the dropdown content SHALL have a width of `w-72`.
+
+#### Scenario: Dropdown Item Styling
+- **WHEN** the dropdown is open
+- **THEN** the dropdown list SHALL have a background color that distinguishes it from the page content.
+- **THEN** hovering over a dropdown item SHALL change its background color to indicate that it is interactive.
+
+### Requirement: Filter Button Styling and Positioning
+The system SHALL ensure the filter button is styled correctly and positioned next to the search box.
+
+#### Scenario: Filter Button Styling
+- **WHEN** the filter button is rendered
+- **THEN** it SHALL have a white background.
+
+#### Scenario: Filter Button Positioning
+- **WHEN** the filter button and search box are rendered
+- **THEN** they SHALL be positioned next to each other with a small spacing (`space-x-2`).

openspec/changes/refactor-dropdown-with-checkboxes/specs/multi-select-dropdown/spec.md

@@ -0,0 +1,16 @@
+## ADDED Requirements
+
+### Requirement: Multi-Select Dropdown
+The system SHALL provide a dropdown component that allows users to select multiple options using checkboxes.
+
+#### Scenario: Select Multiple Options
+- **WHEN** a user clicks on the dropdown to open it
+- **THEN** each option in the dropdown list SHALL be preceded by a checkbox.
+- **WHEN** the user clicks on a checkbox
+- **THEN** the state of that checkbox SHALL be toggled (checked/unchecked).
+- **WHEN** the user clicks on another checkbox
+- **THEN** the state of that checkbox SHALL also be toggled, without affecting the selection of other checkboxes.
+
+#### Scenario: Display Selected Options
+- **WHEN** the dropdown is closed
+- **THEN** the dropdown header SHALL display a summary of the selected options (e.g., "2 selected").

openspec/changes/refactor-dropdown-with-checkboxes/tasks.md

@@ -0,0 +1,19 @@
+## 1. Refactor Dropdown Component
+
+- [x] 1.1 Modify the `Dropdown.js` component to accept `selectedValues` as a prop.
+- [x] 1.2 Implement the logic to render checkboxes for each option.
+- [x] 1.3 Handle the `onSelect` event to toggle the selection of an option.
+
+## 2. Update Styling
+
+- [x] 2.1 Update `Dropdown.css` to include styles for the checkboxes.
+- [x] 2.2 Adjust the styling of the dropdown container and items to fix the boundary and text size issues.
+
+## 3. Update FilterBox Component
+
+- [x] 3.1 Modify `FilterBox.js` to manage the `selectedLabels` state.
+- [x] 3.2 Pass the `selectedLabels` and the `onLabelToggle` function to the `Dropdown` component.
+
+## 4. Verification
+
+- [x] 4.1 Manually test the multi-select dropdown in the browser.