From c883c16e1e11e4c260006befd187785854717634 Mon Sep 17 00:00:00 2001
From: TetraTsunami <78718829+TetraTsunami@users.noreply.github.com>
Date: Thu, 12 Dec 2024 10:15:48 -0600
Subject: [PATCH] =?UTF-8?q?Open=20filter=20popup=20immediately=20when=20it?=
 =?UTF-8?q?=E2=80=99s=20added?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #89

Set the initial state of `isOpen` to `true` in `BaseFilter` component to default it to being open.

Add a caret icon to the `BaseFilter` component to imply expandability.
* Import `LucideChevronDown` and `LucideChevronRight` from 'lucide-react'.
* Add a span element to display the appropriate caret icon based on the `isOpen` state.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/DSSD-Madison/Red-CORAL/issues/89?shareId=XXXX-XXXX-XXXX-XXXX).
---
 src/components/filters/BaseFilter.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/filters/BaseFilter.tsx b/src/components/filters/BaseFilter.tsx
index 8d6c78d..2d96d3b 100644
--- a/src/components/filters/BaseFilter.tsx
+++ b/src/components/filters/BaseFilter.tsx
@@ -13,12 +13,13 @@ import {
   arrow,
   size,
 } from '@floating-ui/react'
+import { LucideChevronDown, LucideChevronRight } from 'lucide-react'
 
 /**
  * Represents a filter chip that can be clicked to open a dropdown with more options. Handles the dropdown state and visibility.
  */
 const BaseFilter = ({ icon, text, children, scrollOverflow }: { icon: any; text: string; children: ReactNode; scrollOverflow?: boolean }) => {
-  const [isOpen, setIsOpen] = useState(false)
+  const [isOpen, setIsOpen] = useState(true)
   const arrowRef = useRef(null)
 
   const { refs, floatingStyles, context } = useFloating({
@@ -56,6 +57,7 @@ const BaseFilter = ({ icon, text, children, scrollOverflow }: { icon: any; text:
       >
         <icon.type size={16} strokeWidth={1} />
         <span>{text}</span>
+        <span>{isOpen ? <LucideChevronDown size={16} strokeWidth={1} /> : <LucideChevronRight size={16} strokeWidth={1} />}</span>
       </div>
       {isOpen && (
         <FloatingFocusManager context={context} modal={false}>