fix: navbar, pinned carousel, pin state

karannfr · karannfr · commit 871a75877f44 · 2025-10-01T03:43:27.000+05:30
diff --git a/src/components/FloatingNavbar.tsx b/src/components/FloatingNavbar.tsx
@@ -17,7 +17,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
 } from "@/components/ui/dropdown-menu";
-
+import PinnedModal from "./ui/PinnedModal";
 interface Props {
   onNavigate: () => void;
 }
@@ -31,7 +31,7 @@ export default function FloatingNavbar({ onNavigate }: Props) {
       <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
         <DropdownMenuTrigger asChild>
           <button
-            className="flex h-10 w-10 items-center justify-center rounded-full bg-[#4B22D1] text-white shadow-lg transition-transform duration-200 hover:scale-105 active:scale-95 pointer-events-auto"
+            className="flex h-10 w-10 items-center justify-center rounded-full border border-[#3A3745] bg-[#e8e9ff] text-gray-700 hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823] shadow-lg transition-transform duration-200 hover:scale-105 active:scale-95 pointer-events-auto"
             aria-label="Toggle dropdown"
           >
             <ChevronDown
@@ -41,7 +41,10 @@ export default function FloatingNavbar({ onNavigate }: Props) {
         </DropdownMenuTrigger>
 
         <DropdownMenuContent
-          className="xl:hidden mt-2 py-2 w-72 space-y-1 rounded-3xl bg-[#4B22D1] text-white border border-[rgba(255,255,255,0.1)] shadow-2xl backdrop-blur-sm pointer-events-auto"
+          className="xl:hidden mt-2 py-2 w-72 space-y-1 rounded-3xl 
+          border border-[#3A3745] shadow-lg backdrop-blur-sm transition-colors
+          bg-[#e8e9ff] text-gray-700 
+          dark:bg-black dark:text-white dark:border-[#3A3745]"
           align="end"
         >
           <DropdownMenuItem asChild>
@@ -57,15 +60,10 @@ export default function FloatingNavbar({ onNavigate }: Props) {
             </Link>
           </DropdownMenuItem>
 
-          <DropdownMenuItem asChild>
-            <Link
-              href="/pinned"
-              onClick={() => onNavigate()}
-              className="flex w-full items-center gap-3 rounded-lg px-3 py-1 hover:bg-[#1A1823] transition"
-            >
-              <Pin className="h-4 w-4" />
-              <span className="text-sm font-medium">Pinned Subjects</span>
-            </Link>
+          <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+            <div className="flex w-full items-center gap-3 rounded-lg px-3 py-1 hover:bg-[#1A1823] transition">
+              <PinnedModal/>
+            </div>
           </DropdownMenuItem>
 
           <DropdownMenuItem asChild>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -47,7 +47,6 @@ function Navbar() {
       </Link> */}
 
       <div className="flex h-8 items-center gap-1 rounded-full border border-[#3A3745] bg-[#e8e9ff] px-2.5 py-1 text-xs font-semibold text-gray-700 transition hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823] sm:h-9 sm:gap-2 sm:px-3.5 sm:py-1.5 sm:text-sm md:h-10 md:px-4 md:py-2 md:text-base">
-        <Pin className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
         <span className="truncate">
           <PinnedModal/>
         </span>
@@ -98,7 +97,7 @@ function Navbar() {
               <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
                 <DropdownMenuTrigger asChild>
                   <button
-                    className="flex h-10 w-10 items-center justify-center rounded-full bg-[#4B22D1] text-white shadow-lg transition-transform duration-200 hover:scale-105 active:scale-95"
+                    className="flex h-10 w-10 items-center justify-center rounded-full border border-[#3A3745] bg-[#e8e9ff] text-gray-700 hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823] shadow-lg transition-transform duration-200 hover:scale-105 active:scale-95"
                     aria-label="Toggle dropdown"
                   >
                     <ChevronDown
@@ -108,10 +107,10 @@ function Navbar() {
                 </DropdownMenuTrigger>
 
                 <DropdownMenuContent
-                  className="w-56 rounded-2xl border border-[rgba(255,255,255,0.1)] bg-[#4B22D1] text-white shadow-2xl backdrop-blur-sm"
+                  className="w-56 rounded-2xl border border-[rgba(255,255,255,0.1)] border-[#3A3745] bg-[#e8e9ff] text-gray-700 hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823] shadow-2xl backdrop-blur-sm"
                   align="start"
                 >
-                  <DropdownMenuItem asChild>
+                  <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
                     <PinnedModal/>
                   </DropdownMenuItem>
                   <DropdownMenuItem asChild>
@@ -132,7 +131,7 @@ function Navbar() {
                 >
                   <DropdownMenuTrigger asChild>
                     <button
-                      className="flex h-10 w-10 items-center justify-center rounded-full bg-[#4B22D1] text-white shadow-lg transition-transform duration-200 hover:scale-105 active:scale-95"
+                      className="flex h-10 w-10 items-center justify-center rounded-full border border-[#3A3745] bg-[#e8e9ff] text-gray-700 hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823] shadow-lg transition-transform duration-200 hover:scale-105 active:scale-95"
                       aria-label="Toggle dropdown"
                     >
                       <ChevronDown
@@ -142,14 +141,14 @@ function Navbar() {
                   </DropdownMenuTrigger>
 
                   <DropdownMenuContent
-                    className="w-56 rounded-2xl border border-[rgba(255,255,255,0.1)] bg-[#4B22D1] text-white shadow-2xl backdrop-blur-sm"
-                    align="start"
-                  >
-                    <DropdownMenuItem asChild>
-                      <Link href="/pinned" className="flex items-center gap-3">
-                        <Pin className="h-4 w-4" />
-                        <span className="font-medium">Pinned Subjects</span>
-                      </Link>
+                  className="xl:hidden mt-2 py-2 w-72 space-y-1 rounded-3xl 
+                  border border-[#3A3745] shadow-lg backdrop-blur-sm transition-colors
+                  bg-[#e8e9ff] text-gray-700 
+                  dark:bg-black dark:text-white dark:border-[#3A3745]"
+                  align="end"
+                >
+                    <DropdownMenuItem asChild onSelect={(e) => e.preventDefault()}>
+                      <PinnedModal/>
                     </DropdownMenuItem>
                     <DropdownMenuItem asChild>
                       <Link href="/request" className="flex items-center gap-3">
diff --git a/src/components/PapersCarousel.tsx b/src/components/PapersCarousel.tsx
@@ -39,21 +39,24 @@ function PapersCarousel() {
   }, []);
 
   useEffect(() => {
-    async function fetchPapers() {
+    const fetchPapers = async () => {
       try {
         setIsLoading(true);
-        const response = await axios.get<IUpcomingPaper[]>(
-          "/api/upcoming-papers",
-        );
+        const response = await axios.get<IUpcomingPaper[]>("/api/upcoming-papers");
         setDisplayPapers(response.data);
       } catch (error) {
         console.error("Failed to fetch papers:", error);
       } finally {
         setIsLoading(false);
       }
-    }
-
+    };
     void fetchPapers();
+    const handleUpdate = () => void fetchPapers();
+    window.addEventListener("updatePapers", handleUpdate);
+
+    return () => {
+      window.removeEventListener("updatePapers", handleUpdate);
+    };
   }, []);
 
   const chunkedPapers = chunkArray(displayPapers, chunkSize);
diff --git a/src/components/PinnedPapersCarousel.tsx b/src/components/PinnedPapersCarousel.tsx
@@ -23,6 +23,7 @@ import PinnedModal from "./ui/PinnedModal";
 type PinnedPapersCarouselProps = {
   carouselType: "users" | "upcoming",
 }
+import { Plus } from "lucide-react";
 
 function PinnedPapersCarousel({
   carouselType = "upcoming",
@@ -49,6 +50,18 @@ function PinnedPapersCarousel({
 
   const chunkedPapers = chunkArray(displayPapers, chunkSize);
 
+  if (chunkedPapers.length > 0) {
+    const lastChunkIndex = chunkedPapers.length - 1;
+    if ((chunkedPapers[lastChunkIndex]?.length ?? 0) < chunkSize) {
+      chunkedPapers[lastChunkIndex] = [
+        ...(chunkedPapers[lastChunkIndex] ?? []),
+        { subject: "add_subject_button", slots: [] } as IUpcomingPaper,
+      ];
+    } else {
+      chunkedPapers.push([{ subject: "add_subject_button", slots: [] } as IUpcomingPaper]);
+    }
+  }
+
   const fetchPapers = async () => {
     try {
       setIsLoading(true);
@@ -138,7 +151,7 @@ function PinnedPapersCarousel({
   const plugins = [Autoplay({ delay: 8000, stopOnInteraction: true })];
 
   return (
-    <div className="px-4 mt-4">
+    <div className="px-4 mt-8 md:mt-4">
       <div className="">
         {displayPapers.length > 0 ?
         <Carousel
@@ -149,7 +162,7 @@ function PinnedPapersCarousel({
           plugins={plugins}
           className="w-full"
         >
-          {displayPapers.length > 8 &&
+          {displayPapers.length >= 8 &&
           <div
             className={`relative mt-4 flex justify-end gap-4`}
           >
@@ -167,8 +180,7 @@ function PinnedPapersCarousel({
               </CarouselItem>
             ) : (
               chunkedPapers.map((paperGroup, index) => {
-                const isLastChunk = index === chunkedPapers.length - 1;
-
+                const placeholdersNeeded = (chunkSize - paperGroup.length) % chunkSize;
                 return (
                   <CarouselItem
                     key={`carousel-item-${index}`}
@@ -177,6 +189,11 @@ function PinnedPapersCarousel({
                     } gap-4 lg:auto-rows-fr`}
                   >
                     {paperGroup.map((paper, subIndex) => (
+                      paper.subject === "add_subject_button" ?
+                      <div key={subIndex} className="h-full border-dashed border border-[#734DFF] dark:border-[#36266D] rounded-sm font-bold hover:bg-[#EFEAFF] dark:bg-transparent dark:hover:bg-[#1A1823] bg-[#FFFFFF]">
+                        <PinnedModal triggerName={"Add Subjects"} page={"Carousel"}/>
+                      </div>
+                      :
                       <div key={subIndex} className="h-full">
                         <UpcomingPaper
                           subject={paper.subject}
@@ -185,26 +202,24 @@ function PinnedPapersCarousel({
                       </div>
                     ))}
 
-                    {isLastChunk && displayPapers.length < 8 && (
+                    {Array.from({ length: placeholdersNeeded }).map(
+                    (_, placeholderIndex) => (
                       <div
-                        className="h-full"
-                        onClick={() => {
-                          window.dispatchEvent(new Event("addButtonClicked"));
-                        }}
-                      >
-                      </div>
-                    )}
+                        key={`placeholder-${placeholderIndex}`}
+                        className="invisible h-full"
+                      ></div>
+                    ),
+                  )}
                   </CarouselItem>
                 );
               })
             )}
           </CarouselContent>
         </Carousel> : 
-        <div className={`relative flex flex-col justify-center gap-4 items-center h-max text-center my-48 font-bold`}
+        <div className={`relative flex flex-col justify-center gap-4 items-center text-center font-bold`}
         >
           Start pinning subjects for quick and easy access.
           <div className="flex h-8 items-center gap-1 rounded-full border border-[#3A3745] bg-[#e8e9ff] px-2.5 py-1 text-xs font-semibold text-gray-700 transition hover:bg-slate-50 dark:bg-black dark:text-white dark:hover:bg-[#1A1823] sm:h-9 sm:gap-2 sm:px-3.5 sm:py-1.5 sm:text-sm md:h-10 md:px-4 md:py-2 md:text-base">
-            <Pin className="h-3.5 w-3.5 sm:h-4 sm:w-4" />
             <span className="truncate">
               <PinnedModal/>
             </span>
diff --git a/src/components/UpcomingPaper.tsx b/src/components/UpcomingPaper.tsx
@@ -34,6 +34,8 @@ export default function PaperCard({ subject, slots }: PaperCardProps) {
 
     localStorage.setItem("userSubjects", JSON.stringify(updated));
     window.dispatchEvent(new Event("userSubjectsChanged"));
+    if(!current)
+      window.dispatchEvent(new Event("updatePapers"));
   };
 
   useEffect(() => {
diff --git a/src/components/screens/Hero.tsx b/src/components/screens/Hero.tsx
@@ -15,11 +15,7 @@ const Hero = () => {
       <p className="my-8 hidden text-center font-play text-lg font-semibold md:block">
         Pinned Subjects
       </p>
-      <div className="min-h-[40vh]">
-        <PinnedPapersCarousel
-          carouselType="users"
-        />
-      </div>
+      <PinnedPapersCarousel carouselType="users"/>
       <PapersCarousel />
     </div>
   );
diff --git a/src/components/ui/PinnedModal.tsx b/src/components/ui/PinnedModal.tsx
@@ -14,15 +14,15 @@ import { type IUpcomingPaper } from "@/interface";
 import { StoredSubjects } from "@/interface";
 import { useState, useEffect } from "react";
 import { Pin, PinOff } from "lucide-react";
+import { Plus } from "lucide-react";
 
-const PinnedModal = () => {
+const PinnedModal = ({triggerName = "Pin Subjects", page = "Navbar"} : {triggerName? : String, page? : String}) => {
   const [displayPapers, setDisplayPapers] = useState<IUpcomingPaper[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [open, setOpen] = useState(false);
   const fetchPapers = async () => {
     try {
       setIsLoading(true);
-
       const storedSubjects = JSON.parse(
         localStorage.getItem("userSubjects") ?? "[]",
       ) as StoredSubjects;
@@ -65,6 +65,7 @@ const PinnedModal = () => {
     localStorage.setItem("userSubjects", JSON.stringify(updatedSubjects));
     setDisplayPapers((prev) => prev.filter((paper) => paper.subject !== subjectToRemove));
     window.dispatchEvent(new Event("userSubjectsChanged"));
+    window.dispatchEvent(new Event("updatePapers"));
   };
 
   useEffect(() => {
@@ -78,9 +79,19 @@ const PinnedModal = () => {
         void fetchPapers();
       }else{
         window.dispatchEvent(new Event("userSubjectsChanged"));
+        window.dispatchEvent(new Event("updatePapers"));
       }
     }}>
-      <DialogTrigger>Pin Subjects</DialogTrigger>
+      {page === "Navbar" ? 
+      <DialogTrigger className="flex flex-row gap-2 items-center h-full w-full">
+        <Pin size={16}/>
+        {triggerName}
+      </DialogTrigger> :
+      <DialogTrigger className="flex flex-row gap-2 items-center h-full w-full justify-center">
+        <Plus className="font-extrabold"/>
+        {triggerName}
+      </DialogTrigger>
+      }
       <DialogContent className="bg-[#F3F5FF] dark:bg-[#070114] border-[#3A3745]">
         <DialogHeader>
           <DialogTitle>Quick Access to This Semester&apos;s Subjects</DialogTitle>
