Render FAQ topics as cards, drop dead scoped CSS

Elternbeirat.Web/Features/Faqs/FaqList.razor

@@ -8,25 +8,22 @@
 {
     <p>Die Fragen sind gerade nicht erreichbar. Bitte später erneut versuchen.</p>
 }
-else if (_groups.Count == 0)
+else if (_topics.Count == 0)
 {
     <p>Zurzeit gibt es keine Fragen.</p>
 }
 else
 {
-    @foreach (var group in _groups)
-    {
-        <section class="faq-topic">
-            <h2>@group.Key.Title</h2>
-            @foreach (var faq in group)
-            {
-                <details class="faq-item">
-                    <summary>@faq.Question</summary>
-                    <div class="faq-answer">
-                        @((MarkupString)Markdown.ToHtml(faq.Answer))
-                    </div>
-                </details>
-            }
-        </section>
-    }
+    <ul class="faq-topic-list">
+        @foreach (var topic in _topics)
+        {
+            <li>
+                <h2><a href="@($"/faqs/{topic.Slug}")">@topic.Title</a></h2>
+                @if (!string.IsNullOrWhiteSpace(topic.Intro))
+                {
+                    <div class="faq-topic-intro">@((MarkupString)Markdown.ToHtml(topic.Intro))</div>
+                }
+            </li>
+        }
+    </ul>
 }

Elternbeirat.Web/Features/Faqs/FaqList.razor.cs

@@ -9,7 +9,7 @@ public partial class FaqList
 {
     [LoggerMessage(
         Level = LogLevel.Error,
-        Message = "Could not load FAQs from PocketBase; content source is unavailable.")]
+        Message = "Could not load FAQ topics from PocketBase; content source is unavailable.")]
     private static partial void LogSourceUnavailable(
         ILogger logger,
         Exception exception);
@@ -23,10 +23,10 @@ public partial class FaqList
     [CascadingParameter]
     private HttpContext? HttpContext { get; set; }
 
-    private IReadOnlyList<IGrouping<FaqTopic, Faq>> _groups = [];
+    private IReadOnlyList<FaqTopic> _topics = [];
 
     // Set when the content source could not be reached or read. The markup then
-    // shows a "temporarily unavailable" note instead of "no questions", matching
+    // shows a "temporarily unavailable" note instead of "no topics", matching
     // the 503 this sets on the response.
     private bool _unavailable;
 
@@ -34,17 +34,11 @@ public partial class FaqList
     {
         try
         {
-            var faqs = await PocketBase.GetFaqsAsync(HttpContext?.RequestAborted ?? CancellationToken.None);
-
-            // GetFaqsAsync sorts by topic.order first, so grouping in encounter order
-            // keeps the topic groups in the order an editor gave the topics. Entries
-            // without an expanded topic have no group and are skipped rather than
-            // grouped under a null heading.
-            _groups = [.. faqs.Where(faq => faq.Topic is not null).GroupBy(faq => faq.Topic!)];
+            _topics = await PocketBase.GetFaqTopicsAsync(HttpContext?.RequestAborted ?? CancellationToken.None);
         }
         catch (PocketBaseUnavailableException exception)
         {
-            // An empty page would claim there are no questions. The site works, its
+            // An empty page would claim there are no topics. The site works, its
             // data store is down: 503 and an honest note.
             LogSourceUnavailable(Logger, exception);
             _unavailable = true;

Elternbeirat.Web/Features/Faqs/FaqList.razor.css

@@ -1,10 +0,0 @@
-/* The .faq-item card styles are shared with the home-page embed and live in the
-   global app.css. Only the topic grouping is specific to this full page (the
-   embed shows a flat list without topic headings). */
-.faq-topic {
-    margin-bottom: var(--space-5);
-}
-
-.faq-topic h2 {
-    margin-bottom: var(--space-3);
-}

Elternbeirat.Web/Features/Faqs/FaqTopicDetail.razor

@@ -0,0 +1,30 @@
+@page "/faqs/{Slug}"
+
+@if (_unavailable)
+{
+    <PageTitle>Vorübergehend nicht erreichbar</PageTitle>
+    <p>Das Thema ist gerade nicht erreichbar. Bitte später erneut versuchen.</p>
+}
+else if (_topic is not null)
+{
+    <PageTitle>@_topic.Title</PageTitle>
+    <nav>
+        <a href="/faqs">&larr; Alle Themen</a>
+    </nav>
+    <h1>@_topic.Title</h1>
+    @if (!string.IsNullOrWhiteSpace(_topic.Intro))
+    {
+        <div class="faq-topic-intro">@((MarkupString)Markdown.ToHtml(_topic.Intro))</div>
+    }
+    @foreach (var faq in _topic.Faqs)
+    {
+        <details class="faq-item">
+            <summary>@faq.Question</summary>
+            <div class="faq-answer">
+                @((MarkupString)Markdown.ToHtml(faq.Answer))
+            </div>
+        </details>
+    }
+}
+@* No topic and not unavailable: the slug was unknown; NavigationManager.NotFound()
+   already ran in OnParametersSetAsync and renders the not-found page. *@

Elternbeirat.Web/Features/Faqs/FaqTopicDetail.razor.cs

@@ -0,0 +1,63 @@
+using Elternbeirat.Contracts;
+using Elternbeirat.PocketBase;
+using Elternbeirat.Web.Shared;
+using Microsoft.AspNetCore.Components;
+
+namespace Elternbeirat.Web.Features.Faqs;
+
+public partial class FaqTopicDetail
+{
+    [LoggerMessage(
+        Level = LogLevel.Error,
+        Message = "Could not load FAQ topic '{Slug}' from PocketBase; content source is unavailable.")]
+    private static partial void LogSourceUnavailable(
+        ILogger logger,
+        string slug,
+        Exception exception);
+
+    [Parameter]
+    public string Slug { get; set; } = string.Empty;
+
+    [Inject]
+    private PocketBaseClient PocketBase { get; set; } = null!;
+
+    [Inject]
+    private ILogger<FaqTopicDetail> Logger { get; set; } = null!;
+
+    [Inject]
+    private NavigationManager Navigation { get; set; } = null!;
+
+    [CascadingParameter]
+    private HttpContext? HttpContext { get; set; }
+
+    private FaqTopic? _topic;
+
+    // Set when the content source could not be reached or read. The markup then
+    // shows a "temporarily unavailable" note instead of a not-found page, matching
+    // the 503 this sets on the response.
+    private bool _unavailable;
+
+    protected override async Task OnParametersSetAsync()
+    {
+        try
+        {
+            _topic = await PocketBase.GetFaqTopicBySlugAsync(
+                Slug,
+                HttpContext?.RequestAborted ?? CancellationToken.None);
+        }
+        catch (PocketBaseUnavailableException exception)
+        {
+            // The site works, its data store is down: 503, not 404.
+            LogSourceUnavailable(Logger, Slug, exception);
+            _unavailable = true;
+            SourceUnavailable.SetStatus(HttpContext);
+            return;
+        }
+
+        if (_topic is null)
+        {
+            // The source answered, but there is no topic with this slug: a genuine 404.
+            Navigation.NotFound();
+        }
+    }
+}

Elternbeirat.Web/wwwroot/app.css

@@ -206,7 +206,8 @@ h1:focus {
    lifted off the tinted page background with a soft shadow and a gentle hover. */
 
 .post-list,
-.event-list {
+.event-list,
+.faq-topic-list {
     list-style: none;
     padding: 0;
     margin: 0;
@@ -215,7 +216,8 @@ h1:focus {
 }
 
 .post-list li,
-.event-list li {
+.event-list li,
+.faq-topic-list li {
     background: var(--color-bg);
     border-radius: var(--radius);
     box-shadow: var(--shadow);
@@ -224,11 +226,28 @@ h1:focus {
 }
 
 .post-list li:hover,
-.event-list li:hover {
+.event-list li:hover,
+.faq-topic-list li:hover {
     box-shadow: var(--shadow-hover);
     transform: translateY(-2px);
 }
 
+/* FAQ topics: each card is a link to the topic's own page, with an optional intro
+   below the heading. The heading matches the post/event card titles. */
+.faq-topic-list h2 {
+    margin: 0;
+    font-size: 1.15rem;
+}
+
+.faq-topic-list h2 a {
+    text-decoration: none;
+}
+
+.faq-topic-intro {
+    margin-top: var(--space-2);
+    color: var(--color-text-soft);
+}
+
 /* Posts */
 .post-list a {
     font-size: 1.15rem;