56194cfdb5
- discussion.templ: #discussion-messages uses .ui-card; DiscussionMessageRow uses .message-row/.message-other/.message-bubble/.message-meta classes; day separator gets data-day-separator attribute - planning.templ: wraps content in .overview-section; heading uses .overview-section-heading with h1; empty state uses .ui-card - app.css: add Section 26 .message-* bubble classes; extend .overview-section-heading selector to include h1 Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
69 lines
2.8 KiB
Text
69 lines
2.8 KiB
Text
package templates
|
|
|
|
import (
|
|
"backend/internal/auth"
|
|
"backend/internal/db/sqlc"
|
|
)
|
|
|
|
templ PlanningPage(user *auth.User, csrfToken string, activePath string, tablos []sqlc.Tablo, agenda PlanningAgenda) {
|
|
@AppLayout("Planning - Xtablo", user, csrfToken, activePath, tablos) {
|
|
<section class="overview-section">
|
|
<div class="overview-section-heading">
|
|
<div>
|
|
<h1>Planning</h1>
|
|
<p class="mt-1 text-sm text-slate-600">{ agenda.RangeLabel }</p>
|
|
</div>
|
|
<nav class="flex flex-wrap items-center gap-2" aria-label="Planning navigation">
|
|
<a href={ templ.SafeURL(agenda.PrevURL) } class="ui-button ui-button-soft ui-button-neutral ui-button-md">Previous 14 days</a>
|
|
<a
|
|
href={ templ.SafeURL(agenda.TodayURL) }
|
|
if agenda.ShowingToday {
|
|
class="ui-button ui-button-soft ui-button-neutral ui-button-md"
|
|
} else {
|
|
class="ui-button ui-button-solid ui-button-default ui-button-md"
|
|
}
|
|
>Today</a>
|
|
<a href={ templ.SafeURL(agenda.NextURL) } class="ui-button ui-button-soft ui-button-neutral ui-button-md">Next 14 days</a>
|
|
</nav>
|
|
</div>
|
|
if len(agenda.Events) == 0 {
|
|
<div class="ui-card ui-card-body py-12 text-center">
|
|
<h2 class="text-xl font-semibold leading-snug text-slate-800">No events in this range</h2>
|
|
<p class="mt-2 text-base text-slate-600">Use the navigation controls to browse another 14-day window.</p>
|
|
</div>
|
|
} else {
|
|
<ul class="divide-y divide-slate-200 border-y border-slate-200" aria-label="Planning agenda">
|
|
for _, event := range agenda.Events {
|
|
@PlanningEventListItem(event)
|
|
}
|
|
</ul>
|
|
}
|
|
</section>
|
|
}
|
|
}
|
|
|
|
templ PlanningEventListItem(event PlanningEventRow) {
|
|
<li class="bg-white px-4 py-3 hover:bg-slate-50">
|
|
<a href={ templ.SafeURL(event.URL) } class="block focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2" aria-label={ "Open event in tablo: " + event.Title }>
|
|
<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
|
<div class="flex min-w-0 flex-col gap-1 sm:flex-row sm:items-center sm:gap-3">
|
|
<span class="text-sm font-medium text-slate-700">{ event.DateLabel }</span>
|
|
<span class="text-sm font-medium text-slate-700">{ event.TimeRange }</span>
|
|
<span class="text-base font-semibold text-slate-900">{ event.Title }</span>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-2 text-sm text-slate-600">
|
|
<span class="inline-flex items-center gap-1">
|
|
if event.HasColor {
|
|
<span class="inline-block h-2.5 w-2.5 rounded-full" style={ "background-color: " + event.TabloColor }></span>
|
|
}
|
|
<span>{ event.TabloTitle }</span>
|
|
</span>
|
|
if event.HasLocation {
|
|
<span aria-hidden="true">·</span>
|
|
<span>{ event.Location }</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
}
|