feat(resources): sync catalog search and filter tabs with URL query parameters (#664)

src/app/resources/page.tsx

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import Resources from '@/components/home/Resources';
 
 export default function ResourcesPage() {
   return (
     <main>
-      <Resources />
+      <Suspense fallback={<div className="min-h-screen flex items-center justify-center text-slate-400 font-medium">Loading Resources...</div>}>
+        <Resources />
+      </Suspense>
     </main>
   );
 }

src/components/home/ResourcesTabs.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect, useRef } from 'react';
-import { useSearchParams } from 'next/navigation';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
 import { motion, AnimatePresence } from 'framer-motion';
 import {
   FileText,
@@ -354,37 +354,58 @@ const categoryConfig: Record<string, { icon: any; color: string }> = {
 };
 
 export default function ResourcesTabs() {
-  // Custom Auth Fallback
-  const { user } = useAuth() || { user: { uid: 'test-user-id' } };
-
-  // 5 Main Sections - Reordered: Roadmaps First
-  const mainSections = [
-    { id: 'roadmaps', label: 'Roadmaps', icon: <Map size={18} /> },
-    { id: 'ai-prompts', label: 'AI Prompts', icon: <Brain size={18} /> },
-    { id: 'internships', label: 'Internships', icon: <Briefcase size={18} /> },
-    { id: 'learning', label: 'Learning', icon: <GraduationCap size={18} /> },
-    { id: 'practice', label: 'Practice', icon: <Code size={18} /> },
-  ];
-
-  const [activeMainTab, setActiveMainTab] = useState('roadmaps');
-  useEffect(() => {
-    setVisibleCount(ITEMS_PER_PAGE);
-  }, [activeMainTab]);
-  const [activeSubTab, setActiveSubTab] = useState(aiPromptsCategories[0]);
-  const [isInternshipModalOpen, setIsInternshipModalOpen] = useState(false);
-  const [isRoadmapModalOpen, setIsRoadmapModalOpen] = useState(false);
-  const [isMindsetModalOpen, setIsMindsetModalOpen] = useState(false);
-  const [activeRoadmap, setActiveRoadmap] = useState<any>(null);
-
-  // Progress State mapping roadmap IDs to completion percentages
-  const [progressData, setProgressData] = useState<Record<string, number>>({});
-  const ITEMS_PER_PAGE = 2;
-  const [visibleCount, setVisibleCount] = useState(ITEMS_PER_PAGE);
-  const [isLoading, setIsLoading] = useState(false);
-  const observerRef = useRef<HTMLDivElement>(null);
-  const searchParams = useSearchParams();
+    // Custom Auth Fallback
+    const { user } = useAuth() || { user: { uid: 'test-user-id' } }; 
+
+    // 5 Main Sections - Reordered: Roadmaps First
+    const mainSections = [
+        { id: 'roadmaps', label: 'Roadmaps', icon: <Map size={18} /> },
+        { id: 'ai-prompts', label: 'AI Prompts', icon: <Brain size={18} /> },
+        { id: 'internships', label: 'Internships', icon: <Briefcase size={18} /> },
+        { id: 'learning', label: 'Learning', icon: <GraduationCap size={18} /> },
+        { id: 'practice', label: 'Practice', icon: <Code size={18} /> },
+    ];
+
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+
+    const [activeMainTab, setActiveMainTab] = useState('roadmaps');
+    useEffect(() => {
+        setVisibleCount(ITEMS_PER_PAGE);
+    }, [activeMainTab]);
+    const [activeSubTab, setActiveSubTab] = useState(aiPromptsCategories[0]);
+    const [isInternshipModalOpen, setIsInternshipModalOpen] = useState(false);
+    const [isRoadmapModalOpen, setIsRoadmapModalOpen] = useState(false);
+    const [isMindsetModalOpen, setIsMindsetModalOpen] = useState(false);
+    const [activeRoadmap, setActiveRoadmap] = useState<any>(null);
+
+    // Progress State mapping roadmap IDs to completion percentages
+    const [progressData, setProgressData] = useState<Record<string, number>>({});
+    const ITEMS_PER_PAGE = 2;
+    const [visibleCount, setVisibleCount] = useState(ITEMS_PER_PAGE);
+    const [isLoading, setIsLoading] = useState(false);
+    const observerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        // Sync states on mount from URL parameters
+        const tab = searchParams.get('tab');
+        if (tab) {
+            setActiveMainTab(tab);
+        }
+        const subtab = searchParams.get('subtab');
+        if (subtab) {
+            setActiveSubTab(subtab);
+        }
+    }, []);
 
-  useEffect(() => {
+    const updateQueryParam = (key: string, value: string) => {
+        const params = new URLSearchParams(searchParams.toString());
+        params.set(key, value);
+        router.push(`${pathname}?${params.toString()}`, { scroll: false });
+    };
+
+    useEffect(() => {
     if (activeMainTab !== 'roadmaps') return;
 
     const observer = new IntersectionObserver(