From 4e5c96daa22f0b0c1e0dc3d63e7a7cd1279d795d Mon Sep 17 00:00:00 2001
From: martinshub-tech <jambemail2003@gmail.com>
Date: Sat, 30 May 2026 21:44:11 +0100
Subject: [PATCH] feat(search): implement Node Affinity for filter controls and
 hooks

---
 src/app/components/search/FilterSidebar.tsx   | 52 ++++++++++++++++-
 .../search/__tests__/FilterSidebar.test.tsx   | 57 +++++++++++++++++++
 src/app/hooks/useSearchFilters.ts             |  6 ++
 src/components/search/FilterSidebar.tsx       | 52 ++++++++++++++++-
 .../search/__tests__/FilterSidebar.test.tsx   | 57 +++++++++++++++++++
 src/hooks/useSearchFilters.tsx                |  7 +++
 6 files changed, 229 insertions(+), 2 deletions(-)
 create mode 100644 src/app/components/search/__tests__/FilterSidebar.test.tsx
 create mode 100644 src/components/search/__tests__/FilterSidebar.test.tsx

diff --git a/src/app/components/search/FilterSidebar.tsx b/src/app/components/search/FilterSidebar.tsx
index c0a01f83..3258f523 100644
--- a/src/app/components/search/FilterSidebar.tsx
+++ b/src/app/components/search/FilterSidebar.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { BarChart2, Clock, Tag, Users, Search, RotateCcw, X } from 'lucide-react';
+import { BarChart2, Clock, Tag, Users, Search, RotateCcw, X, Cpu } from 'lucide-react';
 import { FilterState } from '../../hooks/useSearchFilters';
 
 interface FilterSidebarProps {
@@ -227,6 +227,56 @@ export const FilterSidebar: React.FC<FilterSidebarProps> = ({
         </div>
       </div>
 
+      {/* Node Affinity Filter */}
+      <div className="glass-panel p-5 rounded-xl">
+        <h3 className="flex items-center gap-2 text-xs font-mono font-bold text-tech-text uppercase tracking-widest mb-4">
+          <Cpu className="w-3.5 h-3.5 text-blue-500" /> Node Affinity
+        </h3>
+        <p className="text-[11px] text-slate-400 font-sans mb-3 leading-relaxed">
+          Select target cluster node for query execution and data fetching.
+        </p>
+        <div className="space-y-3">
+          {[
+            { id: 'auto', label: 'Auto (Optimized)', desc: 'Dynamic load balancing' },
+            { id: 'primary', label: 'Primary Cluster', desc: 'Direct consistency check' },
+            { id: 'replica', label: 'Replica Node', desc: 'Fast read-heavy execution' },
+            { id: 'edge', label: 'Edge Cache', desc: 'Minimal latency routing' },
+          ].map((node) => {
+            const isSelected = (filters.nodeAffinity || 'auto') === node.id;
+            return (
+              <label key={node.id} className="flex items-start cursor-pointer group">
+                <input
+                  type="radio"
+                  name="nodeAffinity"
+                  className="hidden"
+                  checked={isSelected}
+                  onChange={() => onFilterChange({ nodeAffinity: node.id })}
+                />
+                <div
+                  className={`w-4 h-4 border rounded-sm flex items-center justify-center mr-3 mt-0.5 transition-colors ${
+                    isSelected ? 'border-primary' : 'border-slate-300 group-hover:border-primary'
+                  }`}
+                >
+                  <div
+                    className={`w-2 h-2 bg-primary rounded-sm transition-opacity ${
+                      isSelected ? 'opacity-100' : 'opacity-0'
+                    }`}
+                  ></div>
+                </div>
+                <div className="flex flex-col">
+                  <span className="text-sm font-medium text-slate-600 group-hover:text-primary transition-colors">
+                    {node.label}
+                  </span>
+                  <span className="text-[10px] text-slate-400 font-mono">
+                    {node.desc}
+                  </span>
+                </div>
+              </label>
+            );
+          })}
+        </div>
+      </div>
+
       <button
         onClick={onReset}
         className="w-full py-3 px-4 bg-slate-50 border border-slate-200 text-slate-600 font-mono text-xs uppercase tracking-wider rounded-lg hover:bg-white hover:border-primary hover:text-primary hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2 group cursor-pointer"
diff --git a/src/app/components/search/__tests__/FilterSidebar.test.tsx b/src/app/components/search/__tests__/FilterSidebar.test.tsx
new file mode 100644
index 00000000..0b980fa3
--- /dev/null
+++ b/src/app/components/search/__tests__/FilterSidebar.test.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { FilterSidebar } from '../FilterSidebar';
+import { FilterState } from '../../../hooks/useSearchFilters';
+
+const defaultFilters: FilterState = {
+  difficulty: [],
+  topics: [],
+  duration: 100,
+  priceRange: 500,
+  sort: 'relevance',
+  instructor: '',
+  searchTerm: '',
+  nodeAffinity: 'auto',
+};
+
+describe('FilterSidebar (App) Component - Node Affinity', () => {
+  it('renders all Node Affinity options', () => {
+    const onFilterChange = vi.fn();
+    const onReset = vi.fn();
+
+    render(
+      <FilterSidebar
+        filters={defaultFilters}
+        onFilterChange={onFilterChange}
+        onReset={onReset}
+      />
+    );
+
+    expect(screen.getByText('Node Affinity')).toBeInTheDocument();
+    expect(screen.getByText('Auto (Optimized)')).toBeInTheDocument();
+    expect(screen.getByText('Primary Cluster')).toBeInTheDocument();
+    expect(screen.getByText('Replica Node')).toBeInTheDocument();
+    expect(screen.getByText('Edge Cache')).toBeInTheDocument();
+  });
+
+  it('triggers onFilterChange callback when a new node affinity is selected', () => {
+    const onFilterChange = vi.fn();
+    const onReset = vi.fn();
+
+    render(
+      <FilterSidebar
+        filters={defaultFilters}
+        onFilterChange={onFilterChange}
+        onReset={onReset}
+      />
+    );
+
+    // Click on Replica Node option
+    const replicaOption = screen.getByText('Replica Node');
+    fireEvent.click(replicaOption);
+
+    expect(onFilterChange).toHaveBeenCalledTimes(1);
+    expect(onFilterChange).toHaveBeenCalledWith({ nodeAffinity: 'replica' });
+  });
+});
diff --git a/src/app/hooks/useSearchFilters.ts b/src/app/hooks/useSearchFilters.ts
index cf6a8d4f..102596ed 100644
--- a/src/app/hooks/useSearchFilters.ts
+++ b/src/app/hooks/useSearchFilters.ts
@@ -11,6 +11,7 @@ export interface FilterState {
   sort: string;
   instructor: string;
   searchTerm: string;
+  nodeAffinity?: string;
 }
 
 export const useSearchFilters = () => {
@@ -27,6 +28,7 @@ export const useSearchFilters = () => {
     sort: searchParams?.get('sort') || 'relevance',
     instructor: searchParams?.get('instructor') || '',
     searchTerm: searchParams?.get('q') || '',
+    nodeAffinity: searchParams?.get('affinity') || 'auto',
   });
 
   // Sync URL with state changes
@@ -54,6 +56,9 @@ export const useSearchFilters = () => {
     if (filters.searchTerm) {
       params.set('q', filters.searchTerm);
     }
+    if (filters.nodeAffinity && filters.nodeAffinity !== 'auto') {
+      params.set('affinity', filters.nodeAffinity);
+    }
 
     const newUrl = params.toString() ? `${pathname ?? ''}?${params.toString()}` : pathname ?? '/';
     router.replace(newUrl, { scroll: false });
@@ -77,6 +82,7 @@ export const useSearchFilters = () => {
       sort: 'relevance',
       instructor: '',
       searchTerm: '',
+      nodeAffinity: 'auto',
     });
   }, []);
 
diff --git a/src/components/search/FilterSidebar.tsx b/src/components/search/FilterSidebar.tsx
index 32a344b0..78373edc 100644
--- a/src/components/search/FilterSidebar.tsx
+++ b/src/components/search/FilterSidebar.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useCallback } from 'react';
-import { BarChart2, Clock, Tag, Users, Search, RotateCcw, LifeBuoy } from 'lucide-react';
+import { BarChart2, Clock, Tag, Users, Search, RotateCcw, LifeBuoy, Cpu } from 'lucide-react';
 import { FilterState } from '../../hooks/useSearchFilters';
 import { RangeSlider } from '../ui/RangeSlider';
 import { MultiSelect } from '../ui/MultiSelect';
@@ -203,6 +203,56 @@ export const FilterSidebar = React.memo<FilterSidebarProps>(
           </div>
         </div>
 
+        {/* Node Affinity Filter */}
+        <div className="glass-panel p-5 rounded-xl">
+          <h3 className="flex items-center gap-2 text-xs font-mono font-bold text-tech-text uppercase tracking-widest mb-4">
+            <Cpu className="w-3.5 h-3.5 text-blue-500" /> Node Affinity
+          </h3>
+          <p className="text-[11px] text-slate-400 font-sans mb-3 leading-relaxed">
+            Select target cluster node for query execution and data fetching.
+          </p>
+          <div className="space-y-3">
+            {[
+              { id: 'auto', label: 'Auto (Optimized)', desc: 'Dynamic load balancing' },
+              { id: 'primary', label: 'Primary Cluster', desc: 'Direct consistency check' },
+              { id: 'replica', label: 'Replica Node', desc: 'Fast read-heavy execution' },
+              { id: 'edge', label: 'Edge Cache', desc: 'Minimal latency routing' },
+            ].map((node) => {
+              const isSelected = (filters.nodeAffinity || 'auto') === node.id;
+              return (
+                <label key={node.id} className="flex items-start cursor-pointer group">
+                  <input
+                    type="radio"
+                    name="nodeAffinity"
+                    className="hidden"
+                    checked={isSelected}
+                    onChange={() => onFilterChange({ nodeAffinity: node.id })}
+                  />
+                  <div
+                    className={`w-4 h-4 border rounded-sm flex items-center justify-center mr-3 mt-0.5 transition-colors ${
+                      isSelected ? 'border-primary' : 'border-slate-300 group-hover:border-primary'
+                    }`}
+                  >
+                    <div
+                      className={`w-2 h-2 bg-primary rounded-sm transition-opacity ${
+                        isSelected ? 'opacity-100' : 'opacity-0'
+                      }`}
+                    ></div>
+                  </div>
+                  <div className="flex flex-col">
+                    <span className="text-sm font-medium text-slate-600 group-hover:text-primary transition-colors">
+                      {node.label}
+                    </span>
+                    <span className="text-[10px] text-slate-400 font-mono">
+                      {node.desc}
+                    </span>
+                  </div>
+                </label>
+              );
+            })}
+          </div>
+        </div>
+
         <button
           onClick={onReset}
           className="w-full py-3 px-4 bg-slate-50 border border-slate-200 text-slate-600 font-mono text-xs uppercase tracking-wider rounded-lg hover:bg-white hover:border-primary hover:text-primary hover:shadow-glow transition-all duration-300 flex items-center justify-center gap-2 group cursor-pointer"
diff --git a/src/components/search/__tests__/FilterSidebar.test.tsx b/src/components/search/__tests__/FilterSidebar.test.tsx
new file mode 100644
index 00000000..6da31afd
--- /dev/null
+++ b/src/components/search/__tests__/FilterSidebar.test.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { FilterSidebar } from '../FilterSidebar';
+import { FilterState } from '../../../hooks/useSearchFilters';
+
+const defaultFilters: FilterState = {
+  difficulty: [],
+  topics: [],
+  duration: 100,
+  priceRange: 200,
+  sort: 'relevance',
+  instructor: '',
+  searchTerm: '',
+  nodeAffinity: 'auto',
+};
+
+describe('FilterSidebar Component - Node Affinity', () => {
+  it('renders all Node Affinity options', () => {
+    const onFilterChange = vi.fn();
+    const onReset = vi.fn();
+
+    render(
+      <FilterSidebar
+        filters={defaultFilters}
+        onFilterChange={onFilterChange}
+        onReset={onReset}
+      />
+    );
+
+    expect(screen.getByText('Node Affinity')).toBeInTheDocument();
+    expect(screen.getByText('Auto (Optimized)')).toBeInTheDocument();
+    expect(screen.getByText('Primary Cluster')).toBeInTheDocument();
+    expect(screen.getByText('Replica Node')).toBeInTheDocument();
+    expect(screen.getByText('Edge Cache')).toBeInTheDocument();
+  });
+
+  it('triggers onFilterChange callback when a new node affinity is selected', () => {
+    const onFilterChange = vi.fn();
+    const onReset = vi.fn();
+
+    render(
+      <FilterSidebar
+        filters={defaultFilters}
+        onFilterChange={onFilterChange}
+        onReset={onReset}
+      />
+    );
+
+    // Click on Primary Cluster option
+    const primaryOption = screen.getByText('Primary Cluster');
+    fireEvent.click(primaryOption);
+
+    expect(onFilterChange).toHaveBeenCalledTimes(1);
+    expect(onFilterChange).toHaveBeenCalledWith({ nodeAffinity: 'primary' });
+  });
+});
diff --git a/src/hooks/useSearchFilters.tsx b/src/hooks/useSearchFilters.tsx
index 0287ce26..85fa5fcf 100644
--- a/src/hooks/useSearchFilters.tsx
+++ b/src/hooks/useSearchFilters.tsx
@@ -11,6 +11,7 @@ export interface FilterState {
   sort: string;
   instructor: string;
   searchTerm: string;
+  nodeAffinity?: string;
 }
 
 export const useSearchFilters = () => {
@@ -29,6 +30,7 @@ export const useSearchFilters = () => {
       sort: searchParams?.get('sort') || 'relevance',
       instructor: searchParams?.get('instructor') || '',
       searchTerm: searchParams?.get('q') || '',
+      nodeAffinity: searchParams?.get('affinity') || 'auto',
     }),
     [searchParams],
   );
@@ -55,6 +57,7 @@ export const useSearchFilters = () => {
         prev.sort !== next.sort ||
         prev.instructor !== next.instructor ||
         prev.searchTerm !== next.searchTerm ||
+        prev.nodeAffinity !== next.nodeAffinity ||
         prev.difficulty.join(',') !== next.difficulty.join(',') ||
         prev.topics.join(',') !== next.topics.join(',');
 
@@ -97,6 +100,9 @@ export const useSearchFilters = () => {
       if (filters.searchTerm) {
         params.set('q', filters.searchTerm);
       }
+      if (filters.nodeAffinity && filters.nodeAffinity !== 'auto') {
+        params.set('affinity', filters.nodeAffinity);
+      }
 
       const pPathname = pathnameRef.current;
       const pSearchParams = searchParamsRef.current;
@@ -136,6 +142,7 @@ export const useSearchFilters = () => {
       sort: 'relevance',
       instructor: '',
       searchTerm: '',
+      nodeAffinity: 'auto',
     });
   }, []);