added all button and minor UX changes

apps/web/components/Blog.tsx

@@ -40,7 +40,7 @@ export const Blog = ({
         {showAppBar && <BlogAppbar problem={problem} track={track} problemIndex={problemIndex} />}
         <NotionRenderer recordMap={problem.notionRecordMap} />
         {showPagination && (
-          <div className="justify-center pt-2">
+          <div className="justify-center">
             <CustomPagination allProblems={track.problems} track={track} problemIndex={problemIndex} />
           </div>
         )}
@@ -51,7 +51,7 @@ export const Blog = ({
         <div className="fixed top-0 w-full">
           <BlogAppbar problem={problem} track={track} problemIndex={problemIndex} />
         </div>
-        <div className="itemsc-center fixed bottom-0 mx-auto w-full justify-center">
+        <div className="items-center fixed bottom-0 mx-auto w-full justify-center">
           <TrackTools allProblems={track.problems} track={track} problemIndex={problemIndex} />
         </div>
       </div>

apps/web/components/BlogAppbar.tsx

@@ -17,7 +17,6 @@ import { Button, Card, CardContent, Separator } from "@repo/ui";
 
 import { ModeToggle } from "./ModeToggle";
 import UserAccountDropDown from "./UserAccountDropDown";
-import CustomPagination from "./CustomPagination";
 
 export const BlogAppbar = ({
   track,
@@ -119,7 +118,7 @@ export const BlogAppbar = ({
   const renderUIModeToggleButton = () => (
     <Button onClick={toggleViewMode} className="flex gap-2">
       <span className="hidden lg:block">{`Switch to ${isLegacyMode ? "New" : "Old"} UI`}</span>
-      <RefreshCcwDot size={16} />
+      <RefreshCcwDot size={"lg"} />
     </Button>
   );
 
@@ -140,17 +139,16 @@ export const BlogAppbar = ({
             {track.title} ({problemIndex + 1} / {track.problems.length})
           </p>
           <div className="flex items-center space-x-2">
-            <CustomPagination allProblems={track.problems} isAtHeader track={track} problemIndex={problemIndex} />
             <ModeToggle />
             <Link href={`/pdf/${track.id}/${track.problems[problemIndex]!.id}`} target="_blank">
               <Button variant="outline" className="ml-2 hidden bg-black text-white md:flex">
                 {/* Don't think this is required and its cluttering the AppBar at the top. Uncomment this if its required */}
                 {/* Download */}
-                <DownloadIcon />
+                <DownloadIcon className="size-4"/>
               </Button>
               <Button variant="outline" className="block bg-black text-white md:hidden">
                 <div>
-                  <DownloadIcon />
+                  <DownloadIcon className="size-4" />
                 </div>
               </Button>
             </Link>

apps/web/components/CustomPagination.tsx

@@ -2,7 +2,8 @@ import { Track, Problem } from "@prisma/client";
 import { PageToggle } from "./PageToggle";
 import Link from "next/link";
 import { Button } from "@repo/ui";
-import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import { ArrowUp, ChevronLeft, ChevronRight, HomeIcon } from "lucide-react";
+import { motion } from "framer-motion";
 
 const CustomPagination = ({
   isAtHeader = false,
@@ -14,8 +15,18 @@ const CustomPagination = ({
   problemIndex: number;
   track: Track & { problems: Problem[] };
 }) => {
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
   return (
-    <div className="flex items-center justify-center space-x-2">
+    <div className="flex items-center justify-center space-x-2 p-4">
+      <Link href={"/"}>
+        <Button className="gap-2 bg-black text-white md:flex" size={"lg"} variant="outline">
+          <span className="hidden lg:block">Home</span>
+          <HomeIcon className="size-4" />
+        </Button>
+      </Link>
       <PageToggle allProblems={track.problems} isAtHeader track={track} />
       <Link
         prefetch
@@ -24,21 +35,23 @@ const CustomPagination = ({
       >
         <Button
           variant="outline"
-          className="ml-2 hidden bg-black text-white md:flex"
+          className="hidden bg-black text-white md:flex"
+          size={"lg"}
           disabled={problemIndex !== 0 ? false : true}
         >
           <div className="pr-2">
-            <ChevronLeftIcon />
+            <ChevronLeft className="size-4" />
           </div>
           <span className={isAtHeader ? "hidden lg:block" : ""}>Prev</span>
         </Button>
         <Button
           variant="outline"
           className="block bg-black text-white md:hidden"
+          size={"lg"}
           disabled={problemIndex !== 0 ? false : true}
         >
           <div>
-            <ChevronLeftIcon />
+            <ChevronLeft className="size-4" />
           </div>
         </Button>
       </Link>
@@ -55,23 +68,29 @@ const CustomPagination = ({
         <Button
           variant="outline"
           className="hidden bg-black text-white md:flex"
+          size={"lg"}
           disabled={problemIndex + 1 !== track.problems.length ? false : true}
         >
           <span className={isAtHeader ? "hidden lg:block" : ""}>Next</span>
           <div className="pl-2">
-            <ChevronRightIcon />
+            <ChevronRight className="size-4" />
           </div>
         </Button>
         <Button
           variant="outline"
           className="block bg-black text-white md:hidden"
+          size={"lg"}
           disabled={problemIndex + 1 !== track.problems.length ? false : true}
         >
           <div>
-            <ChevronRightIcon />
+            <ChevronRight className="size-4" />
           </div>
         </Button>
       </Link>
+      <Button className="gap-2 bg-black text-white md:flex" onClick={scrollToTop} size={"lg"} variant="outline">
+        <span className="hidden lg:block">Go to Top</span>
+        <ArrowUp className="size-4" />
+      </Button>
     </div>
   );
 };

apps/web/components/TrackTools.tsx

@@ -2,7 +2,7 @@ import { Track, Problem } from "@prisma/client";
 import { PageToggle } from "./PageToggle";
 import Link from "next/link";
 import { Button } from "@repo/ui";
-import { ArrowUp, ChevronLeft, ChevronRight } from "lucide-react";
+import { ArrowUp, ChevronLeft, ChevronRight, HomeIcon } from "lucide-react";
 import { motion } from "framer-motion";
 
 const TrackTools = ({
@@ -25,9 +25,10 @@ const TrackTools = ({
       className="flex w-full items-center justify-between gap-2 p-6"
     >
       <div className="border-primary/10 flex gap-2 rounded-lg border bg-black/10 p-1 backdrop-blur-lg">
-        <Link href={"/"} className="hidden lg:block">
+        <Link href={"/"}>
           <Button className="flex gap-2 bg-[#323232] font-semibold dark:bg-slate-50" size={"lg"}>
-            Back to home
+            <span className="hidden lg:block">Back to home</span>
+            <HomeIcon className="size-4" />
           </Button>
         </Link>
         <PageToggle allProblems={track.problems} track={track} />
@@ -42,7 +43,7 @@ const TrackTools = ({
             size={"lg"}
           >
             <ChevronLeft className="size-4" />
-            <span className="hidden md:block">Prev</span>
+            <span className="hidden lg:block">Prev</span>
           </Button>
         </Link>
         <Link
@@ -59,14 +60,14 @@ const TrackTools = ({
             disabled={problemIndex + 1 === track.problems.length}
             size={"lg"}
           >
-            <span className="hidden md:block">Next</span>
+            <span className="hidden lg:block">Next</span>
             <ChevronRight className="size-4" />
           </Button>
         </Link>
 
         {/* To Top */}
         <Button className="flex gap-2 dark:bg-[#323232]" onClick={scrollToTop} size={"lg"} variant={"secondary"}>
-          <span className="hidden md:block">Go to Top</span>
+          <span className="hidden lg:block">Go to Top</span>
           <ArrowUp className="size-4" />
         </Button>
       </div>

apps/web/components/Tracks.tsx

@@ -61,7 +61,9 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
 
   const filterTracks = () => {
     setLoading(true);
-    let newFilteredTracks = tracks;
+    let newFilteredTracks = [...tracks].sort(
+      (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+    );
     if (selectedCohort) {
       newFilteredTracks = newFilteredTracks.filter((t) => t.cohort === selectedCohort);
     }
@@ -95,6 +97,15 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
     setSelectedCohort((prevCohort) => (prevCohort === cohort ? null : cohort));
   };
 
+  const handleAllTracks = () => {
+    setLoading(true);
+    setFilteredTracks(tracks);
+    setSelectedCategory("");
+    setSelectedCohort(null);
+    setCurrentPage(1);
+    setLoading(false);
+  };
+
   useEffect(() => {
     filterTracks();
   }, [selectedCategory, selectedCohort, tracks]);
@@ -131,8 +142,17 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
       className="flex max-w-5xl flex-col gap-4 w-full mx-auto p-4"
       id="tracks"
     >
-      <div className="flex w-full gap-4 justify-between items-center flex-col md:flex-row">
+      <div className="flex w-full gap-4 justify-between items-center flex-col lg:flex-row">
         <div className="flex items-center gap-2 p-2 rounded-lg bg-primary/5 mx-auto md:mx-0 justify-center">
+          <Button
+            size={"lg"}
+            variant={"ghost"}
+            onClick={() => handleAllTracks()}
+            className={!selectedCohort && !selectedCategory ? "bg-blue-600 text-white hover:bg-blue-600" : ""}
+          >
+            All
+          </Button>
+          <Separator className="bg-primary/25 h-4 w-0.5" />
           <Button
             size={"lg"}
             variant={"ghost"}
@@ -151,7 +171,7 @@ export const Tracks = ({ tracks, categories }: TracksWithCategoriesProps) => {
             Cohort 3.0
           </Button>
         </div>
-        <div className="flex gap-2 p-2.5 bg-primary/5 rounded-lg w-full md:w-fit">
+        <div className="flex gap-2 p-2.5 bg-primary/5 rounded-lg w-fit">
           {/* Filter by Categories */}
           <div className="flex gap-2 items-center ">
             <Select onValueChange={(e) => setSelectedCategory(e === "All" ? "" : e)}>