From 233497cb5ce9eeebf70f704a7e7d351f261ce8ec Mon Sep 17 00:00:00 2001
From: Test <test@test.com>
Date: Sat, 28 Feb 2026 10:53:30 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20search=20results=20=E2=80=94=20type=20ic?=
 =?UTF-8?q?on=20on=20left,=20type=20label=20aligned=20right?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/SearchPanel.tsx | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/SearchPanel.tsx b/src/components/SearchPanel.tsx
index 10c9e69e..2d7f166d 100644
--- a/src/components/SearchPanel.tsx
+++ b/src/components/SearchPanel.tsx
@@ -1,11 +1,11 @@
 import { useRef, useEffect, useCallback } from 'react'
 import { useMemo } from 'react'
 import { cn } from '@/lib/utils'
-import { Badge } from '@/components/ui/badge'
 import type { SearchResult, VaultEntry } from '../types'
 import { useUnifiedSearch } from '../hooks/useUnifiedSearch'
-import { getTypeColor, getTypeLightColor, buildTypeEntryMap } from '../utils/typeColors'
+import { getTypeColor, buildTypeEntryMap } from '../utils/typeColors'
 import { formatSearchSubtitle } from '../utils/noteListHelpers'
+import { getTypeIcon } from './NoteItem'
 
 interface SearchPanelProps {
   open: boolean
@@ -194,8 +194,9 @@ function SearchContent({
               const entry = entryLookup.get(result.path)
               const isA = entry?.isA ?? result.noteType
               const noteType = isA && isA !== 'Note' ? isA : null
-              const typeColor = noteType ? getTypeColor(isA, typeEntryMap[isA ?? '']?.color) : undefined
-              const typeLightColor = noteType ? getTypeLightColor(isA, typeEntryMap[isA ?? '']?.color) : undefined
+              const te = typeEntryMap[isA ?? '']
+              const typeColor = noteType ? getTypeColor(isA, te?.color) : undefined
+              const TypeIcon = getTypeIcon(isA ?? null, te?.icon)
               const subtitle = entry ? formatSearchSubtitle(entry) : null
               return (
                 <div
@@ -208,15 +209,15 @@ function SearchContent({
                   onMouseEnter={() => onHover(i)}
                 >
                   <div className="flex items-center gap-2">
-                    <span className="text-[13px] font-medium text-foreground">{result.title}</span>
+                    {/* eslint-disable-next-line react-hooks/static-components -- icon from static map lookup */}
+                    <TypeIcon width={14} height={14} className="shrink-0" style={{ color: typeColor ?? 'var(--muted-foreground)' }} />
+                    <span className="min-w-0 flex-1 truncate text-[13px] font-medium text-foreground">{result.title}</span>
                     {noteType && (
-                      <Badge variant="secondary" className="text-[10px]" style={typeColor ? { color: typeColor, backgroundColor: typeLightColor } : undefined}>
-                        {noteType}
-                      </Badge>
+                      <span className="shrink-0 text-[11px] text-muted-foreground/70">{noteType}</span>
                     )}
                   </div>
                   {subtitle && (
-                    <p className="mt-0.5 text-[11px] text-muted-foreground">
+                    <p className="mt-0.5 pl-[22px] text-[11px] text-muted-foreground">
                       {subtitle}
                     </p>
                   )}