refactor: autofocus on search input when the sidebar is toggled

app/components/blocks/sidebar.tsx

@@ -13,7 +13,7 @@ import { ProfileDropdown } from "./profile-dropdown";
 import { NavItem } from "../atoms/nav-item";
 import { CollapsibleChild, CollapsibleItem } from "../atoms/collapsible-item";
 import { navItems, secondaryNavItems } from "@/data/nav";
-import { FC, useState } from "react";
+import { FC, useRef, useState } from "react";
 import { cn } from "@/lib/styles";
 
 interface SidebarProps {
@@ -26,6 +26,14 @@ const Sidebar: FC<SidebarProps> = ({
   toggleSidebar,
 }) => {
   // TODO(glen): Move this to a separate file
+  const searchInputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleSearchIconClick = () => {
+    toggleSidebar(); // Maximize the sidebar
+    setTimeout(() => {
+      searchInputRef.current?.focus(); // Focus the search input after the sidebar is maximized
+    }, 0);
+  };
 
   return (
     <div className="hidden bg-muted/40 md:block">
@@ -55,7 +63,7 @@ const Sidebar: FC<SidebarProps> = ({
           {minimalSidebar ? (
             <div
               className="relative items-center flex justify-center cursor-pointer"
-              onClick={toggleSidebar}
+              onClick={handleSearchIconClick}
             >
               <Search className="absolute left-4 ml-3 top-2.5 s-6 text-muted-foreground hover:text-black" />
               {/* TODO: automatically set focus to the search inpu field */}
@@ -65,6 +73,7 @@ const Sidebar: FC<SidebarProps> = ({
               <div className="relative">
                 <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                 <Input
+                  ref={searchInputRef}
                   type="search"
                   placeholder="Search products..."
                   className="w-full appearance-none bg-background pl-8 shadow-none"

app/routes/contributors/route.tsx

@@ -1,45 +1,6 @@
 import MainLayout from "@/components/layouts/MainLayout";
 import * as React from "react";
-import {
-  type ColumnDef,
-  type ColumnFiltersState,
-  type SortingState,
-  type VisibilityState,
-  flexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
-import {
-  ArrowUpDown,
-  ChevronDown,
-  CircleDollarSignIcon,
-  MoreHorizontal,
-  Plus,
-} from "lucide-react";
 
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { Checkbox } from "@/components/ui/checkbox";
 import { Card } from "@/components/ui/card";
 import { DemographicMap } from "@/components/atoms/role-demographics/demographic-map";
 import { ContributorSummaryCard } from "@/components/atoms/contributors/contributor-summary-card";