feat: use dynamic type colors for selected note in NoteList

The selected note's border-left and background now reflect the note's
type color instead of hardcoded blue.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
lucaronin
2026-02-17 18:17:21 +01:00
parent 952d8afd05
commit ebc77002d2

View File

@@ -4,6 +4,7 @@ import type { VaultEntry, SidebarSelection, ModifiedFile } from '../types'
import { cn } from '@/lib/utils'
import { Input } from '@/components/ui/input'
import { MagnifyingGlass, Plus } from '@phosphor-icons/react'
import { getTypeColor, getTypeLightColor } from '../utils/typeColors'
interface NoteListProps {
entries: VaultEntry[]
@@ -207,17 +208,23 @@ function NoteListInner({ entries, selection, selectedNote, modifiedFiles, onSele
const renderItem = useCallback((entry: VaultEntry, isPinned = false) => {
const isSelected = selectedNote?.path === entry.path && !isPinned
const typeColor = getTypeColor(entry.isA)
const typeLightColor = getTypeLightColor(entry.isA)
return (
<div
key={entry.path}
className={cn(
"cursor-pointer border-b border-[var(--border)] transition-colors",
isPinned && "border-l-[3px] border-l-[var(--accent-green)] bg-muted",
isSelected && "border-l-[3px] border-l-[#155DFF] bg-[#155DFF12]",
isSelected && "border-l-[3px]",
!isPinned && !isSelected && "hover:bg-muted"
)}
style={{
padding: isPinned || isSelected ? '10px 16px 10px 13px' : '10px 16px',
...(isSelected && {
borderLeftColor: typeColor,
backgroundColor: typeLightColor,
}),
}}
onClick={() => onSelectNote(entry)}
>