style: sort button in /projects

apps/web/src/app/projects/page.tsx

@@ -5,6 +5,7 @@ import {
   ChevronLeft,
   Loader2,
   MoreHorizontal,
+  ArrowDown01,
   Plus,
   Search,
   Trash2,
@@ -29,12 +30,11 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import {
-  Select,
+  Tooltip,
-  SelectContent,
+  TooltipContent,
-  SelectItem,
+  TooltipProvider,
-  SelectTrigger,
+  TooltipTrigger,
-  SelectValue,
+} from "@/components/ui/tooltip";
-} from "@/components/ui/select";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useProjectStore } from "@/stores/project-store";
 import { useTimelineStore } from "@/stores/timeline-store";
@@ -228,17 +228,71 @@ export default function ProjectsPage() {
               onChange={(e) => setSearchQuery(e.target.value)}
             />
           </div>
-          <Select value={sortOption} onValueChange={setSortOption}>
+          <div className="flex items-center gap-0">
-            <SelectTrigger className="w-[180px]">
+            <TooltipProvider>
-              <SelectValue placeholder="Sort by" />
+              <Tooltip>
-            </SelectTrigger>
+                <DropdownMenu>
-            <SelectContent>
+                  <TooltipTrigger asChild>
-              <SelectItem value="createdAt-desc">Newest to Oldest</SelectItem>
+                    <DropdownMenuTrigger asChild>
-              <SelectItem value="createdAt-asc">Oldest to Newest</SelectItem>
+                      <Button
-              <SelectItem value="name-asc">Name (A-Z)</SelectItem>
+                        size="icon"
-              <SelectItem value="name-desc">Name (Z-A)</SelectItem>
+                        variant="secondary"
-            </SelectContent>
+                        className="justify-center items-center w-9 h-9"
-          </Select>
+                      >
+                        <ArrowDown01
+                          strokeWidth={1.5}
+                          className="!size-[1.05rem]"
+                        />
+                      </Button>
+                    </DropdownMenuTrigger>
+                  </TooltipTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem
+                      onClick={() => {
+                        if (sortOption.startsWith("createdAt")) {
+                          setSortOption(
+                            sortOption.endsWith("asc")
+                              ? "createdAt-desc"
+                              : "createdAt-asc"
+                          );
+                        } else {
+                          setSortOption("createdAt-asc");
+                        }
+                      }}
+                    >
+                      Created{" "}
+                      {sortOption.startsWith("createdAt") &&
+                        (sortOption.endsWith("asc") ? "↑" : "↓")}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={() => {
+                        if (sortOption.startsWith("name")) {
+                          setSortOption(
+                            sortOption.endsWith("asc")
+                              ? "name-desc"
+                              : "name-asc"
+                          );
+                        } else {
+                          setSortOption("name-asc");
+                        }
+                      }}
+                    >
+                      Name{" "}
+                      {sortOption.startsWith("name") &&
+                        (sortOption.endsWith("asc") ? "↑" : "↓")}
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+                <TooltipContent>
+                  <p>
+                    Sort by{" "}
+                    {sortOption.startsWith("createdAt") ? "date" : "name"} (
+                    {sortOption.endsWith("asc") ? "ascending" : "descending"})
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
         </div>
 
         {isSelectionMode && sortedProjects.length > 0 && (

apps/web/src/components/ui/button.tsx

@@ -20,7 +20,7 @@ const buttonVariants = cva(
         outline:
           "border border-input bg-background shadow-xs hover:opacity-75 transition-opacity hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-foreground/15 border border-input",
         text: "bg-transparent p-0 rounded-none opacity-100 hover:opacity-50 transition-opacity", // Instead of ghost (matches app better)
         link: "text-primary underline-offset-4 hover:underline",
       },