Devlog-Seite: Bildergalerie, Projekt-Chips, Monats-Trenner

- Bild-Attachments werden beim Archivieren lokal gespeichert (Discord-CDN-URLs
  laufen ab) und unter /devlog-assets/ ausgeliefert; DB-Migration: images-Spalte
- Frontend: Bildergalerie im Grid (responsive nach Anzahl), Embed-Titel als
  Projekt-Chip, Commit-Fußzeile abgesetzt, Monats-Trenner in der Timeline
- Backfill lädt Bilder alter Devlogs nach (Dedupe verhindert Doppel-Downloads)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/pages/Devlogs.jsx

@@ -5,6 +5,7 @@ import { Markdown } from '../markdown.jsx';
 const dateFmt = new Intl.DateTimeFormat('de-DE', {
     weekday: 'short', day: '2-digit', month: '2-digit', year: 'numeric',
 });
+const monthFmt = new Intl.DateTimeFormat('de-DE', { month: 'long', year: 'numeric' });
 
 /** Relative Angabe wie „vor 3 Tagen" für die Karten-Ecke */
 function relative(iso) {
@@ -16,6 +17,29 @@ function relative(iso) {
     return months === 1 ? 'vor 1 Monat' : `vor ${months} Monaten`;
 }
 
+/**
+ * Devlog-Inhalt in Karten-Teile zerlegen:
+ * - Embed-Titel („Devlog — Projekt") → Projekt-Chip statt Fließtext
+ * - Abschließende Kursiv-Zeile („*X Commits heute …*") → abgesetzte Fußzeile
+ */
+function splitContent(raw) {
+    const blocks = raw.split(/\n{2,}/);
+    let project = null;
+    let footer = null;
+
+    const title = blocks[0]?.match(/^Devlog\s*[—–-]\s*(.+)$/i);
+    if (title) {
+        project = title[1].trim();
+        blocks.shift();
+    }
+    const last = blocks[blocks.length - 1];
+    if (blocks.length > 1 && /^\*[^*]+\*$/s.test(last?.trim() ?? '')) {
+        footer = last.trim().slice(1, -1);
+        blocks.pop();
+    }
+    return { project, footer, body: blocks.join('\n\n') };
+}
+
 export default function Devlogs() {
     const [data, setData] = useState(null);
     const [page, setPage] = useState(1);
@@ -29,6 +53,9 @@ export default function Devlogs() {
 
     const pages = data ? Math.ceil(data.total / data.pageSize) : 0;
 
+    // Monats-Trenner in der Timeline
+    let lastMonth = null;
+
     return (
         <>
             <section className="page-header">
@@ -50,19 +77,43 @@ export default function Devlogs() {
 
                 {data?.total > 0 && (
                     <div className="timeline">
-                        {data.items.map((d) => (
-                            <article className="card" key={d.message_id}>
-                                <div className="card-meta">
-                                    <span className="card-date">
-                                        {dateFmt.format(new Date(d.posted_at))}
-                                    </span>
-                                    <span className="card-rel">{relative(d.posted_at)}</span>
+                        {data.items.map((d) => {
+                            const { project, footer, body } = splitContent(d.content);
+                            const month = monthFmt.format(new Date(d.posted_at));
+                            const showMonth = month !== lastMonth;
+                            lastMonth = month;
+                            return (
+                                <div key={d.message_id}>
+                                    {showMonth && <div className="month-sep">{month}</div>}
+                                    <article className="card">
+                                        <div className="card-meta">
+                                            <span className="card-date">
+                                                {dateFmt.format(new Date(d.posted_at))}
+                                            </span>
+                                            {project && <span className="card-project">{project}</span>}
+                                            <span className="card-rel">{relative(d.posted_at)}</span>
+                                        </div>
+                                        <div className="card-body">
+                                            <Markdown text={body} />
+                                        </div>
+                                        {d.images?.length > 0 && (
+                                            <div className={`card-images n${Math.min(d.images.length, 4)}`}>
+                                                {d.images.map((src) => (
+                                                    <a key={src} href={src} target="_blank" rel="noreferrer">
+                                                        <img src={src} alt="Devlog-Screenshot" loading="lazy" />
+                                                    </a>
+                                                ))}
+                                            </div>
+                                        )}
+                                        {footer && (
+                                            <div className="card-footer">
+                                                <Markdown text={footer} />
+                                            </div>
+                                        )}
+                                    </article>
                                 </div>
-                                <div className="card-body">
-                                    <Markdown text={d.content} />
-                                </div>
-                            </article>
-                        ))}
+                            );
+                        })}
                     </div>
                 )}
 

frontend/src/style.css

@@ -187,6 +187,18 @@ body::after {
     display: flex; flex-direction: column; gap: 1.5rem;
     position: relative; padding-left: 1.6rem;
 }
+.month-sep {
+    font-family: var(--mono);
+    font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
+    color: var(--neon2);
+    margin: .5rem 0 1.25rem;
+    display: flex; align-items: center; gap: 1rem;
+}
+.month-sep::after {
+    content: ''; flex: 1; height: 1px;
+    background: linear-gradient(to right, rgba(255, 77, 0, .35), transparent);
+}
+.timeline > div:first-child .month-sep { margin-top: 0; }
 .timeline::before {
     content: '';
     position: absolute; left: 3px; top: 10px; bottom: 10px;
@@ -224,6 +236,15 @@ body::after {
     font-family: var(--mono);
     font-size: .65rem; letter-spacing: .1em;
     color: var(--muted2); white-space: nowrap;
+    margin-left: auto;
+}
+.card-project {
+    font-family: var(--mono);
+    font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
+    color: var(--neon2);
+    border: 1px solid rgba(255, 77, 0, .3);
+    padding: .1rem .5rem;
+    white-space: nowrap;
 }
 
 .card-body { color: var(--text); font-weight: 300; font-size: 1.08rem; }
@@ -247,6 +268,42 @@ body::after {
     color: var(--success);
 }
 
+/* Bildergalerie (heruntergeladene Devlog-Screenshots) */
+.card-images {
+    display: grid; gap: .5rem;
+    margin-top: .9rem;
+}
+.card-images.n1 { grid-template-columns: 1fr; }
+.card-images.n2 { grid-template-columns: 1fr 1fr; }
+.card-images.n3 { grid-template-columns: 1fr 1fr 1fr; }
+.card-images.n4 { grid-template-columns: 1fr 1fr; }
+.card-images a {
+    display: block; overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, .08);
+    aspect-ratio: 16 / 9;
+    transition: border-color .2s;
+}
+.card-images a:hover { border-color: var(--neon); }
+.card-images img {
+    width: 100%; height: 100%; object-fit: cover; display: block;
+    transition: transform .3s;
+}
+.card-images a:hover img { transform: scale(1.03); }
+.card-images.n1 a { aspect-ratio: auto; max-height: 420px; }
+.card-images.n1 img { object-fit: contain; background: #000; }
+
+/* Abgesetzte Fußzeile („X Commits heute — Details im Repo") */
+.card-footer {
+    margin-top: .9rem; padding-top: .7rem;
+    border-top: 1px solid rgba(255, 255, 255, .06);
+    font-family: var(--mono);
+    font-size: .68rem; letter-spacing: .08em;
+    color: var(--muted2);
+}
+.card-footer p { margin: 0; }
+.card-footer a { color: var(--muted); border-bottom: 1px solid transparent; }
+.card-footer a:hover { color: var(--neon); }
+
 /* ── COMMIT-LISTE ──────────────────────────────────── */
 .commit-list { border: 1px solid rgba(255, 255, 255, .06); background: var(--bg2); }
 .commit-row {