Skip to content

3: Severity Filter Tabs #42

Description

@DarthPanda27

Summary

When multiple brief cards are present, there is no way to filter by severity
level. Users who only care about CRITICAL findings must scroll through HIGH and
MEDIUM cards to find them.

Acceptance Criteria

  • A filter strip appears below the page title with tabs: ALL / CRITICAL / HIGH / MEDIUM
  • Selecting a tab hides cards that do not match the severity
  • The ALL tab is selected by default
  • The active tab is visually distinct (indigo underline or filled pill)
  • Tab counts show how many cards match (e.g. "CRITICAL (2)")
  • Filter state is local to the session (no persistence needed)
  • Works correctly in both light and dark mode

Prompt

Add a severity filter strip to src/App.tsx directly below the brief title and
date line. Use local useState to track the active filter ('ALL' | 'CRITICAL' | 'HIGH' | 'MEDIUM'). Derive filtered cards from the full fetched list. Render tab
buttons with counts derived from the live data. Style the active tab with an indigo
indicator consistent with the existing color scheme. Ensure all dark: variants
are applied so the strip looks correct in dark mode.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions