✨ feat: implement new feature for enhanced user experience

frontend/src/App.svelte

@@ -131,6 +131,7 @@
     }
     let loading = $state(true)
     let notFound = $state(false)
+    let comments = $state<any[]>([])
 
     // Header scroll detection
     let scrolled = $state(false)
@@ -194,7 +195,7 @@
                 1,
                 undefined,
                 undefined,
-                undefined,
+                { aggregate: "comments:contentId:count" },
                 CONTENT_MEDIA_LOOKUP
             )
 
@@ -205,6 +206,17 @@
                     lang: contentEntry.lang,
                     path: contentEntry.path,
                 }
+
+                try {
+                    comments = await getCachedEntries(
+                        "comments",
+                        { active: true, contentId: contentEntry.id as string },
+                        "sort"
+                    )
+                } catch (e) {
+                    console.error("Failed to load comments", e)
+                    comments = []
+                }
             } else {
                 notFound = true
             }
@@ -392,6 +404,26 @@
     {:else if contentEntry?.blocks}
         <div class="page-enter">
             <BlockRenderer blocks={contentEntry.blocks} />
+
+            {#if (contentEntry as any)?._aggregate?.commentsCount !== undefined}
+                <div class="max-w-6xl mx-auto px-6 py-8 border-t border-gray-100 my-12">
+                    <h3 class="text-xl font-bold mb-6">
+                        Kommentare ({(contentEntry as any)._aggregate.commentsCount})
+                    </h3>
+                    {#if comments && comments.length > 0}
+                        <div class="space-y-6">
+                            {#each comments as comment}
+                                <div class="bg-gray-50 p-6 rounded-lg">
+                                    <div class="font-bold text-gray-900 mb-2">{comment.author}</div>
+                                    <p class="text-gray-700 whitespace-pre-wrap">{comment.message}</p>
+                                </div>
+                            {/each}
+                        </div>
+                    {:else}
+                        <p class="text-gray-500 italic">Noch keine Kommentare vorhanden.</p>
+                    {/if}
+                </div>
+            {/if}
         </div>
     {/if}
 </main>