// ScreensA.jsx — Home, News (+ article), Events (+ sheet) // ─── Hilfsfunktionen ───────────────────────────────────────── function fmtNewsDate(dateStr) { if (!dateStr) return ''; return new Date(dateStr).toLocaleDateString('de-AT', { day: 'numeric', month: 'long', year: 'numeric' }); } function formatNewsArticle(n) { return { ...n, date: fmtNewsDate(n.created_at) }; } // ─────────────────── HOME ─────────────────── function ScreenHome({ onNav, onOpenArticle, onOpenEvent, events = [], unreadCount = 0, onOpenNotifications }) { const [featured, setFeatured] = React.useState(null); const upcoming = events.slice(0, 3); React.useEffect(() => { const token = sessionStorage.getItem('sbp_token'); sbpApi('GET', '/news', null, token) .then(data => { if (data.length > 0) setFeatured(data[0]); }) .catch(() => {}); }, []); return (
{/* HERO */}
{/* dramatic horns silhouette */} {/* mountain ridges */} {/* horns silhouette */}
{/* Top brand row */}
Schafberg
· Pass ·
{/* hero text */}
Gegründet · Anno MMV

Willkommen

Hier findest du alle Termine, Neuigkeiten und zukünftig noch mehr.

{/* QUICK ACCESS */}
{[ { i: , l: 'Termine', a: 'events' }, { i: , l: 'News', a: 'news' }, { i: , l: 'Profil', a: 'profile' }, ].map(s => ( ))}
{/* FEATURED NEWS */} {featured && (
✦ News ✦
onOpenArticle(formatNewsArticle(featured))} className="sbp-card sbp-card--ember" style={{ cursor: 'pointer' }}>
{featured.eyebrow} · {fmtNewsDate(featured.created_at)}

{featured.title}

{featured.excerpt}

Weiterlesen
)} {/* UPCOMING */}
Kommende Läufe
{upcoming.map(ev => ( ))}
{/* Zitat */}
✦ Zitat ✦

„Wir san a richtig geile Truppe ,
und man kann sich auf jeden verlassen!
Sau geil is do dabei zu sein ."

— Obmann Michael Dorn, 2025
); } // ─────────────────── CONFIRM DELETE MODAL ──────────────────── function ConfirmDeleteModal({ onConfirm, onCancel, message }) { return (
e.stopPropagation()} style={{ width: '100%', maxWidth: 320, background: 'linear-gradient(180deg, var(--sbp-night-2), var(--sbp-night-1))', borderRadius: 20, border: '1px solid var(--sbp-border-strong)', boxShadow: '0 20px 60px rgba(0,0,0,0.6)', padding: '28px 24px 24px', textAlign: 'center', }}>

Beitrag löschen?

{message || 'Wollen Sie den Beitrag wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.'}

); } // ─────────────────── NEWS LIST ─────────────────── function ScreenNews({ onOpenArticle, role = 'user', bookmarks = { news: {}, events: {} }, onBookmarkToggle }) { const canEdit = role === 'moderator' || role === 'admin'; const [filter, setFilter] = React.useState('Alle'); const [news, setNews] = React.useState([]); const [loading, setLoading] = React.useState(true); const [showAdd, setShowAdd] = React.useState(false); const [deleteId, setDeleteId] = React.useState(null); const [showSearch, setShowSearch] = React.useState(false); const [query, setQuery] = React.useState(''); const searchRef = React.useRef(null); const token = sessionStorage.getItem('sbp_token'); const isNewsBookmarked = (id) => !!(bookmarks.news?.[String(id)]); const toggleNewsBookmark = (n) => onBookmarkToggle?.('news', n.id, formatNewsArticle(n)); const loadNews = async () => { setLoading(true); try { const data = await sbpApi('GET', '/news', null, token); data.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)); setNews(data); } catch (err) { console.error('[NEWS]', err); } finally { setLoading(false); } }; React.useEffect(() => { loadNews(); }, []); // Fokus ins Suchfeld sobald es eingeblendet wird React.useEffect(() => { if (showSearch && searchRef.current) searchRef.current.focus(); }, [showSearch]); const openSearch = () => { setShowSearch(true); setQuery(''); }; const closeSearch = () => { setShowSearch(false); setQuery(''); }; // Tags aus den tatsächlich vorhandenen Beiträgen ableiten const tags = ['Alle', ...Array.from(new Set(news.map(n => n.tag))).sort()]; React.useEffect(() => { if (filter !== 'Alle' && !news.some(n => n.tag === filter)) setFilter('Alle'); }, [news]); // Volltextsuche über Titel, Eyebrow, Excerpt, Body, Tag const matchesQuery = (n) => { if (!query.trim()) return true; const q = query.toLowerCase(); return ( (n.title || '').toLowerCase().includes(q) || (n.eyebrow || '').toLowerCase().includes(q) || (n.excerpt || '').toLowerCase().includes(q) || (n.body || '').toLowerCase().includes(q) || (n.tag || '').toLowerCase().includes(q) ); }; const byTag = filter === 'Alle' ? news : news.filter(n => n.tag === filter); const filtered = byTag.filter(matchesQuery); const doDelete = async () => { const id = deleteId; setDeleteId(null); try { await sbpApi('DELETE', `/news/${id}`, null, token); setNews(prev => prev.filter(n => n.id !== id)); } catch (err) { alert(err.message); } }; return (
{showSearch ? : } } trailing={ canEdit ? : } /> {/* Suchfeld */} {showSearch && (
setQuery(e.target.value)} style={{ paddingLeft: 38, paddingRight: query ? 36 : 12 }} /> {query && ( )}
)} {/* Tag-Filter (dynamisch aus DB-Beiträgen) — bei aktiver Suche ausgeblendet */} {!showSearch && (
{tags.map(t => ( ))}
)}
{loading ? (
Lade Beiträge…
) : filtered.length === 0 ? (

{query ? `Keine Ergebnisse für „${query}".` : 'Keine Beiträge vorhanden.'}

) : filtered.map((n, i) => ( // Outer div is position:relative wrapper — NOT clickable itself
{/* Navigation button: covers image + text, no interactive children inside */} {/* Bookmark button: top-right (shifts left if delete button also visible) */} {/* Delete button: sibling to nav button, absolutely positioned — no bubbling to nav */} {canEdit && ( )}
))}
{deleteId && ( setDeleteId(null)} onConfirm={doDelete} /> )} {showAdd && ( setShowAdd(false)} onSave={() => { setShowAdd(false); loadNews(); }} /> )}
); } // ─────────────────── ARTICLE ─────────────────── function ScreenArticle({ article, onBack, role = 'user', bookmarks = { news: {}, events: {} }, onBookmarkToggle }) { const canEdit = role === 'moderator' || role === 'admin'; const [current, setCurrent] = React.useState(article); const [showDelete, setShowDelete] = React.useState(false); const [showEdit, setShowEdit] = React.useState(false); const token = sessionStorage.getItem('sbp_token'); const bookmarked = !!(bookmarks.news?.[String(article.id)]); const toggleBookmark = () => onBookmarkToggle?.('news', current.id, current); const doDelete = async () => { setShowDelete(false); try { await sbpApi('DELETE', `/news/${current.id}`, null, token); onBack(); } catch (err) { alert(err.message); } }; return (
{current.tag}

{current.title}

{current.date}·{current.eyebrow || current.author_name || 'Vorstand'}

{current.body}

{/* Merken-Button — für alle User */} {/* Moderator/Admin Aktionen */} {canEdit && (
Verwaltung
)}
{showDelete && ( setShowDelete(false)} onConfirm={doDelete} /> )} {showEdit && ( setShowEdit(false)} onSave={(updated) => { setCurrent({ ...current, ...updated, date: fmtNewsDate(updated.updated_at || current.created_at) }); setShowEdit(false); }} /> )}
); } // ─────────────────── EDIT NEWS SHEET ───────────────────────── function EditNewsSheet({ article, token, onCancel, onSave }) { const [f, setF] = React.useState({ eyebrow: article.eyebrow || '', title: article.title || '', tag: article.tag || 'News', excerpt: article.excerpt || '', body: article.body || '', }); const [saving, setSaving] = React.useState(false); const [error, setError] = React.useState(''); const set = (k) => (e) => setF(prev => ({ ...prev, [k]: e.target.value })); const submit = async () => { if (!f.title.trim()) { setError('Titel ist erforderlich.'); return; } setSaving(true); setError(''); try { await sbpApi('PUT', `/news/${article.id}`, f, token); onSave(f); } catch (err) { setError(err.message); setSaving(false); } }; return (
e.stopPropagation()} style={{ width: '100%', maxHeight: '92%', background: 'linear-gradient(180deg, var(--sbp-night-2), var(--sbp-night-1))', borderTopLeftRadius: 24, borderTopRightRadius: 24, border: '1px solid var(--sbp-border-strong)', borderBottom: 0, boxShadow: '0 -20px 60px rgba(0,0,0,0.5), 0 -4px 30px color-mix(in oklab, var(--sbp-accent) 20%, transparent)', overflow: 'auto', padding: '8px 22px 28px', animation: 'sbp-fade-in 0.3s ease', }}>
Beitrag bearbeiten

Beitrag bearbeiten

{error && (
{error}
)}