good forst commit

apps/web/app/search/page.tsx

@@ -1,3 +1,6 @@
+import Link from 'next/link';
+import { apiFetch } from '../_lib/api';
+
 interface MeiliHit {
   id: string;
   content: string;
@@ -52,20 +55,25 @@ export function SearchResults({
           </p>
           <ul className="flex flex-col gap-3">
             {hits.map((hit) => (
-              <li key={hit.id} className="rounded-xl border border-gray-200 bg-white p-4">
-                <p className="text-sm">{hit.content}</p>
-                <div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-gray-400">
-                  <span>{hit.senderName}</span>
-                  <span>·</span>
-                  <span>{hit.sourceGroupName}</span>
-                  <span>·</span>
-                  <span>{new Date(hit.approvedAt).toLocaleDateString()}</span>
-                  {hit.tags.map((tag) => (
-                    <span key={tag} className="rounded-full bg-blue-50 px-2 py-0.5 text-blue-600">
-                      {tag}
-                    </span>
-                  ))}
-                </div>
+              <li key={hit.id}>
+                <Link
+                  href={`/messages/${hit.id}`}
+                  className="block rounded-xl border border-gray-200 bg-white p-4 hover:border-blue-300 hover:shadow-sm transition-colors"
+                >
+                  <p className="text-sm">{hit.content}</p>
+                  <div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-gray-400">
+                    <span>{hit.senderName}</span>
+                    <span>·</span>
+                    <span>{hit.sourceGroupName}</span>
+                    <span>·</span>
+                    <span>{new Date(hit.approvedAt).toLocaleDateString()}</span>
+                    {hit.tags.map((tag) => (
+                      <span key={tag} className="rounded-full bg-blue-50 px-2 py-0.5 text-blue-600">
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </Link>
               </li>
             ))}
           </ul>
@@ -81,14 +89,10 @@ export default async function SearchPage({
   searchParams: Promise<{ q?: string; page?: string }>;
 }) {
   const { q = '', page = '1' } = await searchParams;
-  const apiUrl = process.env.API_URL ?? 'http://localhost:3001';
-  const url = new URL(`${apiUrl}/search`);
-  url.searchParams.set('q', q);
-  url.searchParams.set('page', page);
 
   let data: SearchResponse = { hits: [], total: 0, page: 1, limit: 20, query: q };
   try {
-    const res = await fetch(url, { cache: 'no-store' });
+    const res = await apiFetch(`/search?q=${encodeURIComponent(q)}&page=${page}`);
     if (res.ok) data = await res.json();
   } catch {
     // API unavailable — render empty results