bug fixes and add button functionality

Author: Advik-Gupta

src/components/PinButton.tsx

@@ -5,16 +5,19 @@ import { Pin, PinOff } from "lucide-react";
 export default function PinButton({
   isPinned,
   onToggle,
+  disabled,
 }: {
   isPinned: boolean;
   onToggle?: () => void;
+  disabled?: boolean;
 }) {
   return (
     <button
       onClick={onToggle}
       className={`ml-2 flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium ${
         isPinned ? "bg-purple-700 text-white" : "bg-[#2B2B30] text-white/80"
       } transition hover:bg-purple-600`}
+      disabled={disabled}
     >
       {isPinned ? <Pin className="h-4 w-4" /> : <PinOff className="h-4 w-4" />}
       <span className="hidden sm:inline">{isPinned ? "Pinned" : "Pin"}</span>

src/components/PinnedPapersCarousel.tsx

@@ -172,7 +172,12 @@ function PinnedPapersCarousel({
                     ))}
 
                     {isLastChunk && displayPapers.length < 8 && (
-                      <div className="h-full">
+                      <div
+                        className="h-full"
+                        onClick={() => {
+                          window.dispatchEvent(new Event("addButtonClicked"));
+                        }}
+                      >
                         <AddPapers />
                       </div>
                     )}

src/components/Searchbar/pinned-searchbar.tsx

@@ -25,6 +25,7 @@ function PinnedSearchBar({
   const [pinned, setPinned] = useState<boolean>(false);
   const [open, setOpen] = useState(false);
   const [showControls, setShowControls] = useState(false);
+  const searchRef = useRef<HTMLInputElement>(null);
 
   const fuzzy = new Fuse(initialSubjects);
 
@@ -74,6 +75,18 @@ function PinnedSearchBar({
     }
   };
 
+  useEffect(() => {
+    const handleAddClicked = () => {
+      searchRef.current?.focus();
+    };
+
+    window.addEventListener("addButtonClicked", handleAddClicked);
+
+    return () => {
+      window.removeEventListener("addButtonClicked", handleAddClicked);
+    };
+  }, []);
+
   const handlePinToggle = () => {
     const current = !pinned;
     setPinned(current);
@@ -154,6 +167,7 @@ function PinnedSearchBar({
                 <Input
                   type="text"
                   value={searchText}
+                  ref={searchRef}
                   onChange={handleSearchChange}
                   placeholder="Search subject to pin..."
                   className={`text-md w-full rounded-lg bg-[#B2B8FF] px-4 py-6 pr-10 font-play tracking-wider text-black shadow-sm ring-0 placeholder:text-black focus:outline-none focus:ring-0 dark:bg-[#7480FF66] dark:text-white placeholder:dark:text-white ${
@@ -189,7 +203,11 @@ function PinnedSearchBar({
               </div>
 
               <div className="hidden md:block">
-                <PinButton isPinned={pinned} onToggle={handlePinToggle} />
+                <PinButton
+                  isPinned={pinned}
+                  onToggle={handlePinToggle}
+                  disabled={!showControls && searchText.trim() === ""}
+                />
               </div>
 
               <div
@@ -210,6 +228,7 @@ function PinnedSearchBar({
                         handlePinToggle();
                         setOpen(false);
                       }}
+                      disabled={!showControls && searchText.trim() === ""}
                     />
                     <button
                       onClick={() => {

src/components/Searchbar/searchbar.tsx

@@ -1,5 +1,6 @@
 "use server";
 
+import React from "react";
 import axios from "axios";
 import { type ICourses } from "@/interface";
 import SearchBarChild from "./searchbar-child";
@@ -18,7 +19,11 @@ export async function fetchSubjects() {
   }
 }
 
-export default async function SearchBar({ type = "default" }) {
+export default async function SearchBar({
+  type = "default",
+}: {
+  type?: "default" | "pinned";
+}) {
   const subjects = await fetchSubjects();
 
   return type === "pinned" ? (