Merge pull request #60 from eferro/claude/implement-roi-improvements-Lvqw5

fix: broken speaker click in TalkDetail and wire up RecentlyAddedTalks filters

Author: eferro

src/components/RecentlyAddedTalks/index.tsx

@@ -1,13 +1,18 @@
 import { useMemo } from 'react';
 import { Talk } from '../../types/talks';
 import { TalkCard } from '../TalksList/TalkCard';
+import { useUrlFilter } from '../../hooks/useUrlFilter';
+import { useFilterHandlers } from '../../hooks/useFilterHandlers';
 
 interface RecentlyAddedTalksProps {
   talks: Talk[];
   maxTalks?: number;
 }
 
 export function RecentlyAddedTalks({ talks, maxTalks = 6 }: RecentlyAddedTalksProps) {
+  const { filter, updateFilter } = useUrlFilter();
+  const { handleConferenceClick, handleTopicClick } = useFilterHandlers(filter, updateFilter);
+
   const recentTalks = useMemo(() => {
     // Filter talks that have registered_at field
     const talksWithDate = talks.filter(talk => talk.registered_at);
@@ -23,10 +28,6 @@ export function RecentlyAddedTalks({ talks, maxTalks = 6 }: RecentlyAddedTalksPr
     return sorted.slice(0, maxTalks);
   }, [talks, maxTalks]);
 
-  // Mock handlers for TalkCard (these will be implemented properly later)
-  const handleConferenceClick = () => {};
-  const handleTopicClick = () => {};
-
   return (
     <section aria-label="Recently added talks" className="mb-8 bg-gray-50 rounded-lg p-6">
       <h2 className="text-2xl font-bold text-gray-900 mb-6">Recently Added</h2>
@@ -39,8 +40,8 @@ export function RecentlyAddedTalks({ talks, maxTalks = 6 }: RecentlyAddedTalksPr
               talk={talk}
               onConferenceClick={handleConferenceClick}
               onTopicClick={handleTopicClick}
-              selectedConference={null}
-              selectedQuery=""
+              selectedConference={filter.conference}
+              selectedQuery={filter.query}
             />
           ))}
         </div>

src/components/TalkDetail/TalkDetail.integration.test.tsx

@@ -252,6 +252,93 @@ describe('TalkDetail Integration', () => {
     });
   });
 
+  describe('Speaker Filter Interaction', () => {
+    it('user can click speaker to search by speaker name', async () => {
+      (useTalks as ReturnType<typeof vi.fn>).mockReturnValue({
+        talks: [mockTalk],
+        loading: false,
+        error: null
+      });
+
+      renderIntegration(
+        <Routes>
+          <Route path="/talk/:id" element={<TalkDetail />} />
+        </Routes>,
+        {
+          initialPath: '/talk/test-123'
+        }
+      );
+
+      // Click speaker button
+      const speakerButton = screen.getByText('Alice Smith');
+      fireEvent.click(speakerButton);
+
+      // Speaker button should show active state (query set to speaker name)
+      await waitFor(() => {
+        expect(speakerButton).toHaveClass('bg-blue-500', 'text-white');
+      });
+    });
+
+    it('user can toggle speaker filter off by clicking again', async () => {
+      (useTalks as ReturnType<typeof vi.fn>).mockReturnValue({
+        talks: [mockTalk],
+        loading: false,
+        error: null
+      });
+
+      // Start with query set to speaker name
+      renderIntegration(
+        <Routes>
+          <Route path="/talk/:id" element={<TalkDetail />} />
+        </Routes>,
+        {
+          initialPath: '/talk/test-123',
+          initialParams: new URLSearchParams('query=Alice Smith')
+        }
+      );
+
+      const speakerButton = screen.getByText('Alice Smith');
+      expect(speakerButton).toHaveClass('bg-blue-500', 'text-white');
+
+      // Click to remove filter
+      fireEvent.click(speakerButton);
+
+      // Button should return to inactive state
+      await waitFor(() => {
+        expect(speakerButton).not.toHaveClass('bg-blue-500');
+      });
+    });
+
+    it('clicking a different speaker replaces the current query', async () => {
+      (useTalks as ReturnType<typeof vi.fn>).mockReturnValue({
+        talks: [mockTalk],
+        loading: false,
+        error: null
+      });
+
+      // Start with query set to first speaker
+      renderIntegration(
+        <Routes>
+          <Route path="/talk/:id" element={<TalkDetail />} />
+        </Routes>,
+        {
+          initialPath: '/talk/test-123',
+          initialParams: new URLSearchParams('query=Alice Smith')
+        }
+      );
+
+      // Click the other speaker
+      const bobButton = screen.getByText('Bob Jones');
+      fireEvent.click(bobButton);
+
+      // Bob should become active, Alice inactive
+      await waitFor(() => {
+        expect(bobButton).toHaveClass('bg-blue-500', 'text-white');
+      });
+      expect(screen.getByText('Alice Smith')).not.toHaveClass('bg-blue-500');
+    });
+  });
+
   describe('Conference Filter Interaction', () => {
     it('user can click conference to apply filter', async () => {
       (useTalks as ReturnType<typeof vi.fn>).mockReturnValue({

src/components/TalkDetail/index.tsx

@@ -17,7 +17,7 @@ import { hasMeaningfulNotes } from '../../utils/talks';
 function TalkDetail() {
   const { id } = useParams<{ id: string }>();
   const { filter, updateFilter } = useUrlFilter();
-  const { handleAuthorClick, handleConferenceClick } = useFilterHandlers(filter, updateFilter);
+  const { handleTopicClick, handleConferenceClick } = useFilterHandlers(filter, updateFilter);
 
   const { talks, loading, error } = useTalks();
 
@@ -79,9 +79,9 @@ function TalkDetail() {
               {talk.speakers.map(speaker => (
                 <button
                   key={speaker}
-                  onClick={() => handleAuthorClick(speaker)}
+                  onClick={() => handleTopicClick(speaker)}
                   className={`font-medium px-3 py-1 rounded-full text-sm transition-colors ${
-                    filter.author === speaker
+                    filter.query === speaker
                       ? 'bg-blue-500 text-white'
                       : 'bg-blue-50 text-blue-700 hover:bg-blue-100'
                   }`}

src/utils/Autocomplete.ts

@@ -1,16 +1,5 @@
 import type { Talk } from '../types/talks';
-
-/**
- * Normalizes text for accent-insensitive comparison.
- * Uses NFD normalization to decompose accented characters,
- * then removes combining diacritical marks.
- */
-function normalizeForSearch(text: string): string {
-  return text
-    .normalize('NFD')
-    .replace(/[\u0300-\u036f]/g, '')
-    .toLowerCase();
-}
+import { normalizeText as normalizeForSearch } from './normalizeText';
 
 export interface Suggestion {
   type: 'speaker' | 'topic';

src/utils/TalksFilter.ts

@@ -1,15 +1,6 @@
 import { Talk } from "../types/talks";
 import { hasMeaningfulNotes } from "./talks";
-
-/**
- * Normalizes text for search: lowercase and removes accents
- */
-function normalizeText(text: string): string {
-  return text
-    .toLowerCase()
-    .normalize('NFD')
-    .replace(/[\u0300-\u036f]/g, '');
-}
+import { normalizeText } from "./normalizeText";
 
 /**
  * Searches for query terms in multiple talk fields (title, description, speakers, topics, notes)

src/utils/normalizeText.test.ts

@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest';
+import { normalizeText } from './normalizeText';
+
+describe('normalizeText', () => {
+  it('converts text to lowercase', () => {
+    expect(normalizeText('Hello World')).toBe('hello world');
+  });
+
+  it('removes accents from characters', () => {
+    expect(normalizeText('café')).toBe('cafe');
+    expect(normalizeText('résumé')).toBe('resume');
+    expect(normalizeText('naïve')).toBe('naive');
+  });
+
+  it('handles combined accents and uppercase', () => {
+    expect(normalizeText('José García')).toBe('jose garcia');
+    expect(normalizeText('André François')).toBe('andre francois');
+  });
+
+  it('preserves non-accented characters', () => {
+    expect(normalizeText('hello world 123')).toBe('hello world 123');
+  });
+
+  it('handles empty string', () => {
+    expect(normalizeText('')).toBe('');
+  });
+
+  it('handles special unicode characters like ñ and ü', () => {
+    expect(normalizeText('España')).toBe('espana');
+    expect(normalizeText('über')).toBe('uber');
+  });
+});

src/utils/normalizeText.ts

@@ -0,0 +1,11 @@
+/**
+ * Normalizes text for accent-insensitive, case-insensitive comparison.
+ * Uses NFD normalization to decompose accented characters,
+ * then removes combining diacritical marks.
+ */
+export function normalizeText(text: string): string {
+  return text
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '');
+}