From e84d21d36d097eaf2ebe0515b889e70b0db166e0 Mon Sep 17 00:00:00 2001
From: lucaronin <luca.rossi.917@gmail.com>
Date: Fri, 20 Mar 2026 21:58:34 +0100
Subject: [PATCH] feat: show emoji icon in sidebar note items

Pass the icon field from VaultEntry to SectionChildItem and render
it before the title when present, matching the pattern used in
NoteItem and other contexts.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/SidebarParts.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/SidebarParts.tsx b/src/components/SidebarParts.tsx
index 53f34eda..83b3649f 100644
--- a/src/components/SidebarParts.tsx
+++ b/src/components/SidebarParts.tsx
@@ -1,6 +1,7 @@
 import { type ComponentType, useState, useEffect, useRef } from 'react'
 import type { VaultEntry, SidebarSelection } from '../types'
 import { cn } from '@/lib/utils'
+import { isEmoji } from '../utils/emoji'
 import { ChevronRight, ChevronDown, Plus } from 'lucide-react'
 import { getTypeColor, getTypeLightColor } from '../utils/typeColors'
 import { type IconProps } from '@phosphor-icons/react'
@@ -148,7 +149,7 @@ function SectionChildList({ items, selection, sectionColor, sectionLightColor, o
         const active = isSelectionActive(selection, sel)
         return (
           <SectionChildItem
-            key={entry.path} title={entry.title} isActive={active}
+            key={entry.path} title={entry.title} icon={entry.icon} isActive={active}
             sectionColor={active ? sectionColor : undefined}
             sectionLightColor={active ? sectionLightColor : undefined}
             onClick={() => { onSelect(sel); onSelectNote?.(entry) }}
@@ -237,8 +238,8 @@ function SectionHeader({ label, type, Icon, sectionColor, isCollapsed, isActive,
   )
 }
 
-function SectionChildItem({ title, isActive, sectionColor, sectionLightColor, onClick }: {
-  title: string; isActive: boolean
+function SectionChildItem({ title, icon, isActive, sectionColor, sectionLightColor, onClick }: {
+  title: string; icon?: string | null; isActive: boolean
   sectionColor?: string; sectionLightColor?: string
   onClick: () => void
 }) {
@@ -248,7 +249,7 @@ function SectionChildItem({ title, isActive, sectionColor, sectionLightColor, on
       style={{ padding: '4px 16px 4px 28px', ...(isActive && { backgroundColor: sectionLightColor, color: sectionColor }) }}
       onClick={onClick}
     >
-      {title}
+      {icon && isEmoji(icon) && <span className="mr-1">{icon}</span>}{title}
     </div>
   )
 }