Refine help UX and monthly close layout

frontend/src/components/HelpLink.tsx

@@ -1,6 +1,8 @@
 import { CircleHelp } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { getHelpSection } from "../help-content";
 
 type HelpLinkProps = {
   anchor: string;
@@ -9,11 +11,34 @@ type HelpLinkProps = {
 };
 
 export function HelpLink({ anchor, label = "Hilfe öffnen", className }: HelpLinkProps) {
+  const section = getHelpSection(anchor);
+
   return (
-    <Button asChild variant="ghost" size="icon-sm" className={className} title={label}>
-      <a href={`/faq#${anchor}`} aria-label={label}>
-        <CircleHelp className="size-4" />
-      </a>
-    </Button>
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button type="button" variant="ghost" size="icon-sm" className={className} title={label} aria-label={label}>
+          <CircleHelp className="size-4" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{section.title}</DialogTitle>
+          <DialogDescription>{section.description}</DialogDescription>
+        </DialogHeader>
+        <ul className="space-y-2 text-sm text-muted-foreground">
+          {section.quickItems.map((item) => (
+            <li key={item} className="flex gap-2">
+              <span className="mt-2 size-1.5 shrink-0 rounded-full bg-primary" />
+              <span>{item}</span>
+            </li>
+          ))}
+        </ul>
+        <DialogFooter>
+          <Button asChild variant="secondary">
+            <a href={`/faq#${section.id}`}>Ausführliche FAQ öffnen</a>
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }