search bar overflow and pinned search bug fix

Author: Advik-Gupta

src/app/pinned/page.tsx

@@ -6,7 +6,7 @@ const Pinned = () => {
   return (
     <div id="pinned" className="mt-5 flex flex-col justify-between">
       <h1 className="mx-auto my-8 hidden text-center font-vipnabd text-3xl font-extrabold md:block">
-        Pinned Papers
+        Pinned Subjects
       </h1>
 
       <div className="mb-3 flex w-full flex-col items-center gap-2 px-6">

src/components/Card.tsx

@@ -9,7 +9,11 @@ import {
   extractBracketContent,
   extractWithoutBracketContent,
 } from "@/util/utils";
-import { getSecureUrl, generateFileName, downloadFile } from "@/util/download";
+import {
+  getSecureUrl,
+  generateFileName,
+  downloadFile,
+} from "@/util/download_paper";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
 

src/components/CatalogueContent.tsx

@@ -14,7 +14,11 @@ import { Filter } from "lucide-react";
 import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
 import { Pin } from "lucide-react";
 import { StoredSubjects } from "@/interface";
-import { getSecureUrl, generateFileName, downloadFile } from "@/util/download";
+import {
+  getSecureUrl,
+  generateFileName,
+  downloadFile,
+} from "@/util/download_paper";
 
 const CatalogueContent = () => {
   const router = useRouter();

src/components/Searchbar/pinned-searchbar.tsx

@@ -57,6 +57,7 @@ function PinnedSearchBar({
       setPinned(currentPinnedSubjects.includes(suggestion));
     }
 
+    setShowControls(true);
     setSuggestions([]);
     filtersNotPulled?.();
   };
@@ -110,6 +111,9 @@ function PinnedSearchBar({
 
     localStorage.setItem("userSubjects", JSON.stringify(updated));
     window.dispatchEvent(new Event("userSubjectsChanged"));
+
+    setSearchText("");
+    setPinned(false);
   };
 
   useEffect(() => {

src/components/Searchbar/searchbar-child.tsx

@@ -135,20 +135,37 @@ function SearchBarChild({
                 <li
                   key={index}
                   onClick={() => handleSelectSuggestion(suggestion)}
-                  className="flex cursor-pointer items-center truncate rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-800"
+                  className="flex cursor-pointer items-center rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-800"
                 >
                   <div
                     id="paper_count"
                     className="mr-4 flex h-10 w-10 items-center justify-center rounded-md bg-[#171720] text-sm font-semibold text-white"
                   >
                     {subjectCounts[suggestion] ?? "0"}
                   </div>
-                  <span
-                    id="subject"
-                    className="items-center text-sm tracking-wide text-white sm:text-base"
-                  >
-                    {suggestion}
-                  </span>
+
+                  {(() => {
+                    const codeMatch = /\[[^\]]+\]$/.exec(suggestion);
+                    const code = codeMatch ? codeMatch[0] : "";
+                    const title = suggestion.replace(/\s\[[^\]]+\]$/, "");
+
+                    let displayTitle = title;
+                    if (title.length > 40) {
+                      const start = title.slice(0, 25).trim();
+                      const end = title.slice(-15).trim();
+                      displayTitle = `${start}.....${end}`;
+                    }
+
+                    return (
+                      <span
+                        id="subject"
+                        className="flex w-full items-center text-sm tracking-wide text-white sm:text-base"
+                      >
+                        <span className="truncate">{displayTitle}</span>
+                        <span className="ml-2 shrink-0">{code}</span>
+                      </span>
+                    );
+                  })()}
                 </li>
               ))}
             </ul>

src/components/pdfViewer.tsx

@@ -6,7 +6,7 @@ import { useState, useRef, useCallback, useEffect } from "react";
 import { Document, Page, pdfjs } from "react-pdf";
 import { Download, ZoomIn, ZoomOut, Maximize2, Minimize2 } from "lucide-react";
 import { Button } from "./ui/button";
-import { downloadFile } from "@/util/download";
+import { downloadFile } from "@/util/download_paper";
 import ShareButton from "./ShareButton";
 import Loader from "./ui/loader";
 import { FaGreaterThan, FaLessThan } from "react-icons/fa6";