fix: some minor layout changes on feed

frontend/components/feed.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { useInfiniteQuery } from "@tanstack/react-query";
+import { CheckCircle2 } from "lucide-react";
 import { Fragment, useEffect } from "react";
 import { useInView } from "react-intersection-observer";
 import { getFeed } from "@/services/feed";
@@ -65,10 +66,20 @@ export default function Feed() {
         </Fragment>
       ))}
 
-      {hasNextPage && (
+      {hasNextPage ? (
         <div ref={ref}>
           <QuibSkeleton mediaClassName="h-20" />
         </div>
+      ) : (
+        <div className="flex flex-col items-center justify-center px-4 py-12 text-center">
+          <div className="relative mb-4 rounded-full border border-primary/20 bg-primary/10 p-3">
+            <CheckCircle2 className="h-8 w-8 text-primary shadow-sm" />
+          </div>
+          <h3 className="font-bold text-foreground">You've reached the end</h3>
+          <p className="max-w-xs text-muted-foreground text-sm">
+            You're all caught up! Why not join some new quiblets to see more?
+          </p>
+        </div>
       )}
     </div>
   );

frontend/components/quib-header/quib-sort.tsx

@@ -8,18 +8,22 @@ const sortMapping = {
   best: {
     Icon: Rocket,
     label: "Best",
+    isDisabled: false,
   },
   hot: {
     Icon: Flame,
     label: "Hot",
+    isDisabled: true,
   },
   new: {
     Icon: Sparkles,
     label: "New",
+    isDisabled: true,
   },
   top: {
     Icon: CircleArrowOutUpRight,
     label: "Top",
+    isDisabled: true,
   },
 };
 
@@ -46,10 +50,13 @@ export default function QuibSort() {
           <button
             key={key}
             type="button"
-            className="flex items-center gap-2"
             aria-pressed={isActive}
             aria-label={item.label}
-            disabled={isActive}
+            disabled={item.isDisabled}
+            className={cn(
+              "flex items-center gap-2",
+              item.isDisabled && "pointer-events-none opacity-75",
+            )}
             onClick={() => !isActive && setSearchParams("s", key)}
           >
             <item.Icon

frontend/components/quiblet-info.tsx

@@ -6,6 +6,7 @@ import { useParams } from "next/navigation";
 import { formatDate } from "@/lib/utils";
 import { getQuiblet } from "@/services/quiblet";
 import type { Quiblet } from "@/types/quiblet";
+import LegalLinks from "./legal-links";
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { Button } from "./ui/button";
 
@@ -76,6 +77,7 @@ export default function QuibletInfo() {
           </div>
         ))}
       </div>
+      <LegalLinks />
     </aside>
   );
 }