From ae25e46542a6ad1052b80f67632ab9d2eafec95f Mon Sep 17 00:00:00 2001
From: Faaeq Fazal <mdfaaeqfzl@gmail.com>
Date: Tue, 26 May 2026 13:19:18 +0530
Subject: [PATCH] fix: connected the side filter bar to match the project list

---
 app/(public)/project/page.tsx            | 31 +++++++++++++++---------
 components/projects/project-explorer.tsx | 12 ++++++---
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/app/(public)/project/page.tsx b/app/(public)/project/page.tsx
index 40fd54c..def3295 100644
--- a/app/(public)/project/page.tsx
+++ b/app/(public)/project/page.tsx
@@ -36,6 +36,7 @@ function ProjectsPageContent() {
     const searchParams = useSearchParams();
     const [showMobileFilters, setShowMobileFilters] = useState(false);
     const [isInitialLoad, setIsInitialLoad] = useState(true);
+    const rightPanelRef = useRef<HTMLDivElement>(null);
 
     const currentParams = useMemo((): ProjectQueryParams => ({
         page: parseInt(searchParams.get('page') || '1', 10),
@@ -60,6 +61,19 @@ function ProjectsPageContent() {
         }
     }, [isLoading, projects, isInitialLoad]);
 
+    // Intercept all wheel events and redirect to the right panel
+    useEffect(() => {
+        const handleWheel = (e: WheelEvent) => {
+            if (rightPanelRef.current) {
+                e.preventDefault();
+                rightPanelRef.current.scrollTop += e.deltaY;
+            }
+        };
+
+        document.addEventListener('wheel', handleWheel, { passive: false });
+        return () => document.removeEventListener('wheel', handleWheel);
+    }, []);
+
     const initialFilters = useMemo((): FilterState => ({
         featured: currentParams.featured || false,
         status: currentParams.status || [],
@@ -122,9 +136,6 @@ function ProjectsPageContent() {
 
         const newUrl = `${window.location.pathname}?${params.toString()}`;
         router.push(newUrl, { scroll: false });
-
-        // Close mobile filters after applying changes
-        //setShowMobileFilters(false);
     }, [router, currentParams.limit, currentParams.title]);
 
     const handleSearch = useCallback((value: string) => {
@@ -149,13 +160,12 @@ function ProjectsPageContent() {
     useEffect(() => {
         const handleEscape = (e: KeyboardEvent) => {
             if (e.key === 'Escape' && showMobileFilters) {
-                //setShowMobileFilters(false);
+                // setShowMobileFilters(false);
             }
         };
 
         if (showMobileFilters) {
             document.addEventListener('keydown', handleEscape);
-            // Prevent body scroll when mobile filters are open
             document.body.style.overflow = 'hidden';
         } else {
             document.body.style.overflow = 'unset';
@@ -185,15 +195,14 @@ function ProjectsPageContent() {
                         onSearch={handleSearch}
                     />
 
-                    <div className="flex flex-col md:flex-row gap-6 mt-8">
+                    <div className="flex flex-col md:flex-row gap-6 mt-8 md:h-[calc(100vh-12rem)]">
                         {/* Desktop Filter Sidebar */}
-                        <div className="hidden md:block w-64 lg:w-72 flex-shrink-0">
-                            <div className="sticky top-0">
-                                <FilterSidebar onFilterChange={handleFilterChange} initialFilters={initialFilters} />
-                            </div>
+                        <div className="hidden md:block w-64 lg:w-72 flex-shrink-0 overflow-y-auto overscroll-contain">
+                            <FilterSidebar onFilterChange={handleFilterChange} initialFilters={initialFilters} />
                         </div>
 
-                        <div className="flex-1">
+                        {/* Right panel — ref used to capture all wheel scroll */}
+                        <div ref={rightPanelRef} className="flex-1 overflow-y-auto overscroll-contain">
                             <ProjectExplorer
                                 currentParams={currentParams}
                                 projects={projects || []}
diff --git a/components/projects/project-explorer.tsx b/components/projects/project-explorer.tsx
index d1df12f..4f64815 100644
--- a/components/projects/project-explorer.tsx
+++ b/components/projects/project-explorer.tsx
@@ -38,6 +38,8 @@ export default function ProjectExplorer({
     const sentinel = sentinelRef.current;
     if (!sentinel) return;
 
+    const scrollRoot = sentinel.closest<HTMLElement>('.overflow-y-auto');
+
     const observer = new IntersectionObserver(
       (entries) => {
         const entry = entries[0];
@@ -52,7 +54,7 @@ export default function ProjectExplorer({
           onPageChange((meta.currentPage || 1) + 1);
         }
       },
-      { threshold: 0.1 }
+      { threshold: 0.1, root: scrollRoot ?? null }
     );
 
     observer.observe(sentinel);
@@ -199,8 +201,12 @@ export default function ProjectExplorer({
       </div>
 
       {isLoading && projects.length > 0 && (
-        <div className="flex justify-center py-6">
-          <div className="w-8 h-8 border-2 border-primary/50 border-t-primary rounded-full animate-spin" />
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {Array(3)
+            .fill(0)
+            .map((_, i) => (
+              <Skeleton key={`next-batch-${i}`} className="h-[350px] rounded-xl bg-muted" />
+            ))}
         </div>
       )}