Skip to content

fix: connected the side filter bar to match the project list #215

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
agzaiyenth merged 1 commit into from
May 31, 2026
Merged

fix: connected the side filter bar to match the project list #215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 20 additions & 11 deletions app/(public)/project/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand All @@ -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);
}, []);
Comment thread
agzaiyenth marked this conversation as resolved.

const initialFilters = useMemo((): FilterState => ({
featured: currentParams.featured || false,
status: currentParams.status || [],
Expand Down Expand Up @@ -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) => {
Expand All @@ -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';
Expand Down Expand Up @@ -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 || []}
Expand Down
12 changes: 9 additions & 3 deletions components/projects/project-explorer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand All @@ -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);
Expand Down Expand Up @@ -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>
)}

Expand Down
Loading