fix(search): autocomplete suggestions and Enter key now deliver results (#59)

* fix(search): make suggestions and Enter key trigger results

- onSelect with item.url: use SPA loadContent() instead of window.location.href to avoid a full-page reload
- onSelect without item.url: call performSearch() so the selected suggestion actually highlights matches in the current chapter
- Add onSubmit handler so pressing Enter in the autocomplete input triggers performSearch()

Co-authored-by: danmunz <282860+danmunz@users.noreply.github.com>

* fix(search): configure local algolia env & replace production urls with local origins

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: danmunz <282860+danmunz@users.noreply.github.com>
Co-authored-by: aih <arihershowitz@gmail.com>

Author: 3 people

CompendiumUI/.gitignore

@@ -1,2 +1,5 @@
 node_modules
 dist
+.env
+.env.*
+

CompendiumUI/script.ts

@@ -46,6 +46,21 @@ interface AlgoliaResult {
     hits: AlgoliaItem[];
 }
 
+export function replaceUrlOrigin(originalUrl: string, newOrigin: string): string {
+    try {
+        const url = new URL(originalUrl);
+        const newOriginUrl = new URL(newOrigin);
+        url.protocol = newOriginUrl.protocol;
+        url.host = newOriginUrl.host;
+        url.port = newOriginUrl.port;
+        return url.toString();
+    } catch {
+        // If it's invalid or a relative path, return as is.
+        return originalUrl;
+    }
+}
+
+
 interface AlgoliaItem {
     objectID: string;
     title: string;
@@ -1850,34 +1865,45 @@ document.addEventListener('DOMContentLoaded', () => {
                     },
                     // --- Define What Happens On Select ---
                     onSelect({ item, setQuery, setIsOpen }) {
-                        // Example: Navigate to a product page or log the selection
                         console.log('Selected:', item);
-                        // If you have product URLs in your index (e.g., item.url)
+                        setIsOpen(false);
                         if (item.url) {
                             // Security: Validate URL origin before navigation to prevent open redirect
                             try {
-                                const targetUrl = new URL(item.url, window.location.origin);
-                                // Only navigate to URLs on the same origin
+                                const targetUrl = new URL(replaceUrlOrigin(item.url, window.location.origin), window.location.origin);
+                                // Only navigate to URLs on the same origin (this will now pass locally)
                                 if (targetUrl.origin === window.location.origin) {
-                                    window.location.href = targetUrl.toString();
+                                    // Use SPA navigation instead of a full-page reload
+                                    const pathname = targetUrl.pathname;
+                                    const potentialFilename = pathname.startsWith('/') ? pathname.substring(1) : pathname;
+
+                                    const targetHash = targetUrl.hash ? targetUrl.hash.substring(1) : null;
+                                    if (potentialFilename) {
+                                        loadContent(potentialFilename, { updateHistory: true, targetHash: targetHash, isInitialLoad: false });
+                                    }
                                 } else {
                                     console.warn('External URL in search result blocked for security:', item.url);
                                 }
                             } catch (error) {
                                 console.error('Invalid URL in search result:', item.url, error);
                             }
                         } else {
-                            // Or maybe fill the input with the selected item's name
-                            setQuery(item.title);
-                            setIsOpen(false); // Close the dropdown
-                            // You might want to trigger a full search here if needed
+                            // No URL available — highlight the item title in the current chapter
+                            const searchTerm = item.sectionTitle || item.title;
+                            setQuery(searchTerm);
+                            performSearch(searchTerm);
                         }
                     },
                 },
                 // You can add more sources here (e.g., searching multiple indices)
             ];
         },
 
+        // Trigger in-page highlighting when the user submits the query (e.g. presses Enter)
+        onSubmit({ state }) {
+            performSearch(state.query);
+        },
+
         // Optional: Customize Autocomplete appearance and behavior further
         // See Autocomplete.js documentation for more options
         // Example: Detached mode (dropdown appears separate from input)

CompendiumUI/url-replacement.test.ts

@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest';
+import { replaceUrlOrigin } from './script';
+
+describe('replaceUrlOrigin', () => {
+	it('should replace the origin of an absolute URL', () => {
+		const original = 'https://copyright-compendium.vercel.app/demo/page.html#section-1';
+		const targetOrigin = 'http://localhost:5174';
+		const expected = 'http://localhost:5174/demo/page.html#section-1';
+
+		expect(replaceUrlOrigin(original, targetOrigin)).toBe(expected);
+	});
+
+	it('should handle different target protocols (http vs https)', () => {
+		const original = 'http://example.com/path';
+		const targetOrigin = 'https://compendium.adhocteam.us';
+		const expected = 'https://compendium.adhocteam.us/path';
+
+		expect(replaceUrlOrigin(original, targetOrigin)).toBe(expected);
+	});
+
+	it('should handle root paths without trailing slashes', () => {
+		const original = 'https://copyright-compendium.vercel.app';
+		const targetOrigin = 'http://127.0.0.1:3000';
+		const expected = 'http://127.0.0.1:3000/';
+
+		expect(replaceUrlOrigin(original, targetOrigin)).toBe(expected);
+	});
+
+	it('should keep query parameters intact', () => {
+		const original = 'https://copyright-compendium.vercel.app/search?q=test&page=2';
+		const targetOrigin = 'http://localhost:8080';
+		const expected = 'http://localhost:8080/search?q=test&page=2';
+
+		expect(replaceUrlOrigin(original, targetOrigin)).toBe(expected);
+	});
+
+	it('should return original string if it is a relative path (invalid URL constructor)', () => {
+		const original = '/relative/path.html';
+		const targetOrigin = 'http://localhost:5174';
+
+		expect(replaceUrlOrigin(original, targetOrigin)).toBe(original);
+	});
+
+	it('should return original string if targetOrigin is invalid', () => {
+		const original = 'https://example.com/path';
+		const targetOrigin = 'invalid-origin';
+
+		expect(replaceUrlOrigin(original, targetOrigin)).toBe(original);
+	});
+});