From 92bdbfe303add8d0c12df2d15f77dc58bd556200 Mon Sep 17 00:00:00 2001
From: Pauline Vos <pvos88@gmail.com>
Date: Wed, 4 Nov 2026 12:28:27 +0000
Subject: [PATCH] fix: match search topics to sidebar presentation

---
 resources/js/components/hot-topics.tsx    | 33 +++++++++++++++++------
 resources/js/components/search-dialog.tsx | 12 ++++++---
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/resources/js/components/hot-topics.tsx b/resources/js/components/hot-topics.tsx
index 345a32caa..177d89312 100644
--- a/resources/js/components/hot-topics.tsx
+++ b/resources/js/components/hot-topics.tsx
@@ -32,14 +32,10 @@ export function HotTopics() {
                             className="group -mx-2 flex min-h-8 flex-col justify-center rounded-lg px-2 py-1 text-sm transition-[background-color] hover:bg-accent focus-visible:outline-ring"
                             title={topic.name}
                         >
-                            <span className="w-full truncate font-bold group-hover:underline">
-                                {topic.name}
-                            </span>
-                            {topic.summary !== null && (
-                                <span className="w-full truncate text-xs text-muted-foreground">
-                                    {topic.summary}
-                                </span>
-                            )}
+                            <HotTopicContent
+                                name={topic.name}
+                                summary={topic.summary}
+                            />
                         </Link>
                     </li>
                 ))}
@@ -47,3 +43,24 @@ export function HotTopics() {
         </section>
     );
 }
+
+export function HotTopicContent({
+    name,
+    summary,
+}: {
+    name: string;
+    summary: string | null;
+}) {
+    return (
+        <span className="flex min-w-0 flex-1 flex-col text-sm" title={name}>
+            <span className="w-full truncate font-bold group-hover:underline">
+                {name}
+            </span>
+            {summary !== null && (
+                <span className="w-full truncate text-xs text-muted-foreground">
+                    {summary}
+                </span>
+            )}
+        </span>
+    );
+}
diff --git a/resources/js/components/search-dialog.tsx b/resources/js/components/search-dialog.tsx
index 42044de95..ac99d227f 100644
--- a/resources/js/components/search-dialog.tsx
+++ b/resources/js/components/search-dialog.tsx
@@ -19,6 +19,7 @@ import HeadlineController from '@/actions/App/Http/Controllers/HeadlineControlle
 import ProfileSearchController from '@/actions/App/Http/Controllers/ProfileSearchController';
 import SearchController from '@/actions/App/Http/Controllers/SearchController';
 import { AuthorAvatar } from '@/components/author-avatar';
+import { HotTopicContent } from '@/components/hot-topics';
 import { OrganizationAvatar } from '@/components/organization-avatar';
 import { DialogOverlay, DialogPortal } from '@/components/ui/dialog';
 import { Spinner } from '@/components/ui/spinner';
@@ -66,7 +67,7 @@ type Option =
     | { kind: 'organization'; id: string; organization: Organization }
     | { kind: 'commit'; id: string; commit: Commit }
     | { kind: 'all'; id: string; needsSignIn: boolean }
-    | { kind: 'topic'; id: string; term: string }
+    | { kind: 'topic'; id: string; term: string; summary: string | null }
     | { kind: 'recent'; id: string; term: string };
 
 /**
@@ -174,6 +175,7 @@ export function SearchDialog({
         kind: 'topic',
         id: topic.id,
         term: topic.name,
+        summary: topic.summary,
     }));
     const options =
         isPicking || !(isEmpty || foundNothing)
@@ -666,7 +668,7 @@ function ResultOption({
 }) {
     const className = cn(
         'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left disabled:cursor-not-allowed',
-        { 'bg-accent': isActive },
+        { 'bg-accent': isActive, group: option.kind === 'topic' },
     );
     const content = (
         <>
@@ -752,7 +754,11 @@ function OptionContent({ option }: { option: Option }): ReactNode {
         return <CommitResult commit={option.commit} />;
     }
 
-    if (option.kind === 'topic' || option.kind === 'recent') {
+    if (option.kind === 'topic') {
+        return <HotTopicContent name={option.term} summary={option.summary} />;
+    }
+
+    if (option.kind === 'recent') {
         return (
             <span className="flex min-w-0 flex-1 items-center justify-between gap-3 text-sm">
                 <span className="truncate" title={option.term}>