From e6d374f444733238f3e7107b90c38f7e148f24f1 Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Mon, 22 Dec 2025 19:37:31 +0000
Subject: [PATCH] chevron rotates when select is open

---
 packages/frontend/src/Index.tsx                | 10 ++++++----
 packages/frontend/src/components/ui/select.tsx |  9 +++++++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/Index.tsx b/packages/frontend/src/Index.tsx
index 8000bba..4a89a9f 100644
--- a/packages/frontend/src/Index.tsx
+++ b/packages/frontend/src/Index.tsx
@@ -6,13 +6,14 @@ import SmallUserDisplay from "@/components/small-user-display";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { getAuthHeaders } from "@/lib/utils";
 import LogOutButton from "./components/log-out-button";
-import Loading from "./components/loading";
 
 function Index() {
     const serverURL = import.meta.env.VITE_SERVER_URL?.trim() || "http://localhost:3000";
 
     const user = JSON.parse(localStorage.getItem("user") || "{}") as UserRecord;
 
+    const [projectSelectOpen, setProjectSelectOpen] = useState(false);
+
     const [selectedProject, setSelectedProject] = useState<ProjectResponse | null>(null);
     const [projects, setProjects] = useState<ProjectResponse[]>([]);
     const projectsRef = useRef(false);
@@ -50,8 +51,8 @@ function Index() {
     return (
         <main className="w-full h-full p-1">
             {/* header area */}
-            <div className="flex gap-4 items-center justify-between">
-                <div className="flex gap-4 items-center">
+            <div className="flex gap-12 items-center justify-between">
+                <div className="flex gap-2 items-center">
                     <Select
                         onValueChange={(value) => {
                             if (value === "NONE") {
@@ -67,8 +68,9 @@ function Index() {
                             setSelectedProject(project);
                             setSelectedIssue(null);
                         }}
+                        onOpenChange={setProjectSelectOpen}
                     >
-                        <SelectTrigger className="h-8 lg:flex">
+                        <SelectTrigger className="h-8 lg:flex" isOpen={projectSelectOpen}>
                             <SelectValue
                                 placeholder={
                                     selectedProject ? `P: ${selectedProject.Project.name}` : "Select Project"
diff --git a/packages/frontend/src/components/ui/select.tsx b/packages/frontend/src/components/ui/select.tsx
index d56791c..89045cd 100644
--- a/packages/frontend/src/components/ui/select.tsx
+++ b/packages/frontend/src/components/ui/select.tsx
@@ -20,8 +20,10 @@ function SelectTrigger({
     className,
     size = "default",
     children,
+    isOpen,
     ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    isOpen?: boolean;
     size?: "sm" | "default";
 }) {
     return (
@@ -46,7 +48,10 @@ function SelectTrigger({
         >
             {children}
             <SelectPrimitive.Icon asChild>
-                <ChevronDownIcon className="size-4 opacity-50" />
+                <ChevronDownIcon
+                    className="size-4 opacity-50"
+                    style={{ rotate: isOpen ? "180deg" : "0deg" }}
+                />
             </SelectPrimitive.Icon>
         </SelectPrimitive.Trigger>
     );
@@ -73,7 +78,7 @@ function SelectContent({
                     "origin-(--radix-select-content-transform-origin) overflow-x-hidden",
                     "overflow-y-auto border shadow-md",
                     position === "popper" &&
-                        "data-[side=bottom]:translate-y-1 data-[side=bottom]:-translate-x-0.5 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 data-[side=top]:-translate-x-0.5",
+                        "data-[side=bottom]:translate-y-1 data-[side=bottom]:-translate-x-1.5 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 data-[side=top]:-translate-x-0.5",
                     className,
                 )}
                 position={position}