From 4e6bbf4b88e080b3ab37c70094f1bcc8dfad14a0 Mon Sep 17 00:00:00 2001
From: Luca Rossi <luca.rossi.917@gmail.com>
Date: Fri, 27 Feb 2026 15:27:38 +0100
Subject: [PATCH] fix: revert notelist subtitle to show snippet instead of
 metadata (#118)

The metadata subtitle (date + word count) from #94 was only intended for
search results. Reverts NoteItem and PinnedCard to show first 2 lines of
note content with a date line underneath.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 src/components/NoteItem.tsx      |  7 +++++--
 src/components/NoteList.test.tsx |  6 +++---
 src/components/NoteList.tsx      | 10 ++++++----
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/NoteItem.tsx b/src/components/NoteItem.tsx
index aed4d14c..a6e446bc 100644
--- a/src/components/NoteItem.tsx
+++ b/src/components/NoteItem.tsx
@@ -7,7 +7,7 @@ import {
 } from '@phosphor-icons/react'
 import { getTypeColor, getTypeLightColor } from '../utils/typeColors'
 import { resolveIcon } from '../utils/iconRegistry'
-import { relativeDate, formatSubtitle } from '../utils/noteListHelpers'
+import { relativeDate, getDisplayDate } from '../utils/noteListHelpers'
 
 const TYPE_ICON_MAP: Record<string, ComponentType<SVGAttributes<SVGSVGElement>>> = {
   Project: Wrench,
@@ -105,9 +105,12 @@ export function NoteItem({ entry, isSelected, isMultiSelected = false, noteStatu
           )}
         </div>
       </div>
+      <div className="mt-0.5 text-[12px] leading-[1.5] text-muted-foreground" style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+        {entry.snippet}
+      </div>
       {entry.trashed && entry.trashedAt
         ? <TrashDateLine entry={entry} />
-        : <div className="mt-1 text-[11px] text-muted-foreground">{formatSubtitle(entry)}</div>
+        : <div className="mt-0.5 text-[10px] text-muted-foreground">{relativeDate(getDisplayDate(entry))}</div>
       }
     </div>
   )
diff --git a/src/components/NoteList.test.tsx b/src/components/NoteList.test.tsx
index 34bbc15c..dcfa549d 100644
--- a/src/components/NoteList.test.tsx
+++ b/src/components/NoteList.test.tsx
@@ -266,12 +266,12 @@ describe('NoteList', () => {
     expect(screen.getByText('Facebook Ads Strategy')).toBeInTheDocument()
   })
 
-  it('context view shows prominent card with metadata subtitle', () => {
+  it('context view shows prominent card with snippet subtitle', () => {
     render(
       <NoteList entries={mockEntries} selection={{ kind: 'entity', entry: mockEntries[0] }} selectedNote={null} onSelectNote={noopSelect} onReplaceActiveTab={noopReplace} allContent={{}} onCreateNote={vi.fn()} />
     )
-    // Metadata subtitle (date · word count) appears in the prominent card
-    expect(screen.getAllByText(/Empty/).length).toBeGreaterThan(0)
+    // Snippet text appears in the prominent card
+    expect(screen.getByText('Build a personal knowledge management app.')).toBeInTheDocument()
   })
 })
 
diff --git a/src/components/NoteList.tsx b/src/components/NoteList.tsx
index ea5f926c..657f2fe7 100644
--- a/src/components/NoteList.tsx
+++ b/src/components/NoteList.tsx
@@ -15,7 +15,7 @@ import {
   type SortOption, type SortDirection, type SortConfig, type RelationshipGroup,
   getSortComparator,
   buildRelationshipGroups, filterEntries,
-  formatSubtitle,
+  relativeDate, getDisplayDate,
   loadSortPreferences, saveSortPreferences,
 } from '../utils/noteListHelpers'
 
@@ -33,10 +33,11 @@ interface NoteListProps {
   onBulkTrash?: (paths: string[]) => void
 }
 
-function PinnedCard({ entry, typeEntryMap, onClickNote }: {
+function PinnedCard({ entry, typeEntryMap, onClickNote, showDate }: {
   entry: VaultEntry
   typeEntryMap: Record<string, VaultEntry>
   onClickNote: (entry: VaultEntry, e: React.MouseEvent) => void
+  showDate?: boolean
 }) {
   const te = typeEntryMap[entry.isA ?? '']
   const color = getTypeColor(entry.isA ?? '', te?.color)
@@ -47,7 +48,8 @@ function PinnedCard({ entry, typeEntryMap, onClickNote }: {
       {/* eslint-disable-next-line react-hooks/static-components */}
       <Icon width={16} height={16} className="absolute right-3 top-3.5" style={{ color }} data-testid="type-icon" />
       <div className="pr-6 text-[14px] font-bold" style={{ color }}>{entry.title}</div>
-      <div className="mt-1 text-[11px] opacity-60" style={{ color }}>{formatSubtitle(entry)}</div>
+      <div className="mt-1 text-[12px] leading-[1.5] opacity-80" style={{ color, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{entry.snippet}</div>
+      {showDate && <div className="mt-1 text-[11px] opacity-60" style={{ color }}>{relativeDate(getDisplayDate(entry))}</div>}
     </div>
   )
 }
@@ -122,7 +124,7 @@ function EntityView({ entity, groups, query, collapsedGroups, sortPrefs, onToggl
 }) {
   return (
     <div className="h-full overflow-y-auto">
-      <PinnedCard entry={entity} typeEntryMap={typeEntryMap} onClickNote={onClickNote} />
+      <PinnedCard entry={entity} typeEntryMap={typeEntryMap} onClickNote={onClickNote} showDate />
       {groups.length === 0
         ? <EmptyMessage text={query ? 'No matching items' : 'No related items'} />
         : groups.map((group) => (