auto-claude: subtask-1-4 - Add URL state management using searchParams and router.push

src/components/blog/BlogList.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { Calendar, Tag, ExternalLink, ChevronLeft, ChevronRight } from 'lucide-react';
 import Link from 'next/link';
 import Image from 'next/image';
+import { useRouter, usePathname } from 'next/navigation';
 import { BlogPost } from '@/lib/blog';
 import { SearchBar } from './SearchBar';
 import { CategoryFilter } from './CategoryFilter';
@@ -281,6 +282,8 @@ function Pagination({
 interface BlogListProps {
   posts: BlogPost[];
   locale: string;
+  initialSearch?: string;
+  initialCategory?: string | null;
   translations: {
     searchPlaceholder: string;
     showingText: (start: number, end: number, total: number) => string;
@@ -290,11 +293,32 @@ interface BlogListProps {
   };
 }
 
-export function BlogList({ posts, locale, translations }: BlogListProps) {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+export function BlogList({ posts, locale, initialSearch = '', initialCategory = null, translations }: BlogListProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const [searchQuery, setSearchQuery] = useState(initialSearch);
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(initialCategory);
   const [currentPage, setCurrentPage] = useState(1);
 
+  // Update URL when filters change
+  useEffect(() => {
+    const params = new URLSearchParams();
+
+    if (searchQuery.trim()) {
+      params.set('search', searchQuery.trim());
+    }
+
+    if (selectedCategory) {
+      params.set('category', selectedCategory);
+    }
+
+    const queryString = params.toString();
+    const newUrl = queryString ? `${pathname}?${queryString}` : pathname;
+
+    router.push(newUrl, { scroll: false });
+  }, [searchQuery, selectedCategory, pathname, router]);
+
   // Extract unique categories from all posts
   const allCategories = useMemo(() => {
     const categories = new Set(posts.map(post => post.category).filter(Boolean));