From 9ffba98012f9355e4f12828606f0774191f43212 Mon Sep 17 00:00:00 2001
From: editinghero <69391940+editinghero@users.noreply.github.com>
Date: Thu, 3 Sep 2026 17:49:26 +0000
Subject: [PATCH] fix: replace raw text note previews with rendered Markdown

Updates the note card components on both Android and Web platforms to properly
render Markdown content in the preview snippet, replacing the previous logic
that stripped formatting and displayed plain text.

- Android: Swapped `Text` showing `plainContentPreview` for `MarkdownRenderer` in `NoteCard.kt`. Wrapped in a `Box` with `heightIn(max = 100.dp)` and `clipToBounds()` to mimic original vertical bounds constraints.
- Web: Replaced the regex-stripped `cleanSnippet` with `renderMarkdown(note.content)` in `main.ts` HTML template.
- Web: Added CSS constraints `.note-card-snippet.markdown-preview` to restrict preview max-height and manage nested spacing so block items (like headings/lists) fit elegantly inside cards.
---
 .../notes/ui/components/NoteCard.kt           | 28 ++++++++-----------
 web/src/main.ts                               |  7 +----
 web/src/style.css                             | 17 +++++++++++
 3 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/app/src/main/java/com/astralquarks/notes/ui/components/NoteCard.kt b/app/src/main/java/com/astralquarks/notes/ui/components/NoteCard.kt
index f1bcd49..fce6311 100644
--- a/app/src/main/java/com/astralquarks/notes/ui/components/NoteCard.kt
+++ b/app/src/main/java/com/astralquarks/notes/ui/components/NoteCard.kt
@@ -12,6 +12,7 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -50,6 +51,7 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.luminance
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.draw.clipToBounds
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextDecoration
@@ -59,6 +61,7 @@ import androidx.compose.ui.unit.sp
 import coil.compose.AsyncImage
 import com.astralquarks.notes.model.Note
 import com.astralquarks.notes.model.NoteColorPalette
+import com.astralquarks.notes.markdown.MarkdownRenderer
 import java.text.SimpleDateFormat
 import java.util.Date
 import java.util.Locale
@@ -115,13 +118,6 @@ fun NoteCard(
         }
     }
 
-    val plainContentPreview = remember(note.content) {
-        if (checklistItems.isNotEmpty()) ""
-        else {
-            val sample = if (note.content.length > 250) note.content.take(250) else note.content
-            sample.replace(MD_FORMAT_REGEX, " ").trim()
-        }
-    }
 
     Card(
         onClick = onClick,
@@ -225,17 +221,15 @@ fun NoteCard(
                             }
                         }
                     }
-                } else if (plainContentPreview.isNotBlank()) {
+                } else if (note.content.isNotBlank()) {
                     Spacer(modifier = Modifier.height(4.dp))
-                    Text(
-                        text = plainContentPreview,
-                        style = MaterialTheme.typography.bodyMedium.copy(
-                            color = secondaryTextColor,
-                            lineHeight = 20.sp
-                        ),
-                        maxLines = 5,
-                        overflow = TextOverflow.Ellipsis
-                    )
+                    Box(modifier = Modifier.heightIn(max = 100.dp).clipToBounds()) {
+                        MarkdownRenderer(
+                            markdown = note.content,
+                            textColor = secondaryTextColor,
+                            modifier = Modifier.fillMaxWidth()
+                        )
+                    }
                 }
 
                 // Tags flow row
diff --git a/web/src/main.ts b/web/src/main.ts
index c8f7415..7834c06 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -656,11 +656,6 @@ class AstralNotesApp {
       day: 'numeric'
     });
 
-    const cleanSnippet = note.content
-      .replace(/#+\s*/g, '')
-      .replace(/!\[.*?\]\(.*?\)/g, '[Image]')
-      .slice(0, 180);
-
     const borderStyle = note.colorHex && note.colorHex !== '#DEFAULT'
       ? `style="border-left: 4px solid ${note.colorHex};"`
       : '';
@@ -673,7 +668,7 @@ class AstralNotesApp {
             ${getIconSvg('pin', 16)}
           </button>
         </div>
-        <p class="note-card-snippet">${cleanSnippet || 'Empty note...'}</p>
+        <div class="note-card-snippet markdown-preview">${renderMarkdown(note.content) || 'Empty note...'}</div>
         ${note.tags.length > 0 ? `
           <div class="note-card-tags">
             ${note.tags.map(t => `<span class="tag-chip">#${t}</span>`).join('')}
diff --git a/web/src/style.css b/web/src/style.css
index def1988..010aa61 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -543,6 +543,23 @@ body {
   flex: 1;
 }
 
+.note-card-snippet.markdown-preview {
+  max-height: 150px;
+  display: block;
+}
+
+.note-card-snippet.markdown-preview > * {
+  margin-bottom: 0.5rem;
+}
+
+.note-card-snippet.markdown-preview > *:last-child {
+  margin-bottom: 0;
+}
+
+.note-card-snippet.markdown-preview p {
+  margin: 0;
+}
+
 .note-card-tags {
   display: flex;
   flex-wrap: wrap;