Florian WildeandClaude Opus 5
6d04bc2c1c
Zwei Mängel, die erst in den aufgenommenen Bildern auffielen. Auf Handybreite brach die Kopfleiste um und drängte den Namen der Anwendung in die zweite Zeile, mitten zwischen die Menüpunkte. Sie bleibt jetzt auf allen Breiten einzeilig; wird es eng, scrollt die Navigation waagerecht. Das Tagesdatum auf der Startseite wird serverseitig gerendert, weshalb Playwrights Uhr nicht griff — die Bilder hätten sich täglich geändert. In der Screenshot-Instanz (DEMO_MODUS=true) steht die Uhr jetzt fest. Reine Funktionen bekommen den Zeitpunkt weiterhin als Parameter; src/server/ zeitgeber.ts ist die eine Stelle, an der er entsteht. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
import Link from 'next/link'
|
|
import {
|
|
Card,
|
|
CardBeschreibung,
|
|
CardInhalt,
|
|
CardKopf,
|
|
CardTitel,
|
|
} from '@/components/ui/card'
|
|
import { wochenKapazitaet } from '@/lib/bereich'
|
|
import { alsDatum, alsDauer } from '@/lib/zeit'
|
|
import { verlangeAnmeldung } from '@/server/berechtigung'
|
|
import { db } from '@/server/db'
|
|
import { jetzt } from '@/server/zeitgeber'
|
|
|
|
export default async function StartSeite() {
|
|
const benutzer = await verlangeAnmeldung('/')
|
|
const heute = jetzt()
|
|
|
|
const bereiche = await db.bereich.findMany({
|
|
where: { aktiv: true },
|
|
orderBy: [{ reihenfolge: 'asc' }, { name: 'asc' }],
|
|
})
|
|
|
|
const anrede = benutzer.name?.split(' ')[0] ?? benutzer.email
|
|
|
|
return (
|
|
<div className="flex flex-col gap-8">
|
|
<header>
|
|
<h1 className="text-2xl font-semibold tracking-tight">Guten Tag, {anrede}</h1>
|
|
<p className="text-gedaempft-vordergrund mt-1 text-sm">{alsDatum(heute)}</p>
|
|
</header>
|
|
|
|
<section className="flex flex-col gap-4">
|
|
<h2 className="text-lg font-medium">Deine Bereiche</h2>
|
|
|
|
{bereiche.length === 0 ? (
|
|
<Card>
|
|
<CardInhalt className="text-gedaempft-vordergrund py-8 text-center text-sm">
|
|
Noch keine Bereiche angelegt.{' '}
|
|
<Link href="/bereiche" className="text-betont underline underline-offset-4">
|
|
Jetzt einrichten
|
|
</Link>
|
|
</CardInhalt>
|
|
</Card>
|
|
) : (
|
|
<ul className="grid gap-4 sm:grid-cols-2">
|
|
{bereiche.map((bereich) => (
|
|
<li key={bereich.id}>
|
|
<Card>
|
|
<CardKopf className="flex-row items-center gap-3">
|
|
<span
|
|
aria-hidden
|
|
className="size-3 shrink-0 rounded-full ring-1 ring-black/10"
|
|
style={{ backgroundColor: bereich.farbe }}
|
|
/>
|
|
<CardTitel className="text-base">{bereich.name}</CardTitel>
|
|
</CardKopf>
|
|
<CardInhalt>
|
|
<p className="text-gedaempft-vordergrund text-sm">
|
|
{alsDauer(wochenKapazitaet(bereich))} in der Woche eingeplant
|
|
</p>
|
|
</CardInhalt>
|
|
</Card>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
|
|
<Card>
|
|
<CardKopf>
|
|
<CardTitel className="text-base">Was als Nächstes kommt</CardTitel>
|
|
<CardBeschreibung>
|
|
Aufgaben und Ideen folgen mit M2, das Lesen der Kalender mit M3, die
|
|
Wochenplanung per Ziehen und Ablegen mit M4.
|
|
</CardBeschreibung>
|
|
</CardKopf>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|