xtablo-source/backend/templates/tablos.templ
Arthur Belleville a12c5abea6
feat(05-02): 3-tab layout + files templates + router + main.go S3 wiring
- tablos.templ: TabloDetailPage gains files+activeTab params, 3-tab nav with hx-push-url
- tablos.templ: TabloOverviewTabFragment + TasksTabFragment (wraps KanbanBoard) added
- files.templ: FilesTabFragment, FileUploadForm (hx-encoding=multipart/form-data),
  FileListRow, FileListEmpty, FileRowGone, UploadErrorFragment
- files_helpers.go: formatBytes() converts int64 bytes to human-readable string
- router.go: fileDeps FilesDeps param added; TabloTasksTabHandler + file routes wired
- handlers_tablos.go: both TabloDetailPage call sites updated (nil, 'overview')
- main.go: S3_ENDPOINT/S3_BUCKET/S3_REGION env vars read; files.NewStore constructed;
  fileDeps wired; nil filesStore allowed when S3 env unset (503 from handlers)
- All test routers updated to pass FilesDeps{} in new param position
2026-05-15 12:28:33 +02:00

481 lines
18 KiB
Text

package templates
import (
"backend/internal/auth"
"backend/internal/db/sqlc"
"backend/internal/web/ui"
)
// TablosDashboard renders the root authenticated dashboard: heading, "New tablo"
// button, create-form slot, and the list of tablo cards (or empty state).
// UI-SPEC §1 Interaction Contract — GET /.
templ TablosDashboard(user *auth.User, csrfToken string, tablos []sqlc.Tablo) {
@Layout("Tablos — Xtablo", user, csrfToken) {
<div class="flex items-center justify-between mb-6">
<h1 class="text-[28px] font-semibold leading-tight">Your Tablos</h1>
@ui.Button(ui.ButtonProps{
Label: "New tablo",
Variant: ui.ButtonVariantDefault,
Tone: ui.ButtonToneSolid,
Size: ui.SizeMD,
Type: "button",
Attrs: templ.Attributes{
"hx-get": "/tablos/new",
"hx-target": "#create-form-slot",
"hx-swap": "innerHTML",
},
})
</div>
<div id="create-form-slot"></div>
<div id="tablos-list">
if len(tablos) == 0 {
@TablosEmptyState()
} else {
for _, tablo := range tablos {
@TabloCard(tablo, csrfToken)
}
}
</div>
}
}
// TablosEmptyState renders the empty-state copy when a user has no tablos.
// Copy strings are locked by UI-SPEC Copywriting Contract.
templ TablosEmptyState() {
<div class="text-center py-16">
<h2 class="text-xl font-semibold leading-snug text-slate-800">No tablos yet</h2>
<p class="mt-2 text-base text-slate-600">Create your first tablo to get started.</p>
<div class="mt-6">
@ui.Button(ui.ButtonProps{
Label: "New tablo",
Variant: ui.ButtonVariantDefault,
Tone: ui.ButtonToneSolid,
Size: ui.SizeMD,
Type: "button",
Attrs: templ.Attributes{
"hx-get": "/tablos/new",
"hx-target": "#create-form-slot",
"hx-swap": "innerHTML",
"aria-label": "Create your first tablo",
},
})
</div>
</div>
}
// TabloCard renders a single tablo as a ui.Card on the dashboard.
// Guards description and color rendering against null pgtype.Text values (Pitfall 6).
// Delegates delete-zone rendering to TabloDeleteButtonFragment (single source of truth).
templ TabloCard(tablo sqlc.Tablo, csrfToken string) {
@ui.Card(templ.Attributes{"id": "tablo-" + tablo.ID.String()}) {
<div class="flex items-start justify-between">
<div>
<h2 class="text-xl font-semibold leading-snug">{ tablo.Title }</h2>
if tablo.Description.Valid && tablo.Description.String != "" {
<p class="mt-2 text-base text-slate-600">{ tablo.Description.String }</p>
}
if tablo.Color.Valid && tablo.Color.String != "" {
<div class="mt-2 flex items-center gap-2">
<span
class="inline-block w-2.5 h-2.5 rounded-full"
style={ "background-color: " + tablo.Color.String }
></span>
<span class="text-sm text-slate-500">{ tablo.Color.String }</span>
</div>
}
</div>
@TabloDeleteButtonFragment(tablo, csrfToken)
</div>
<div class="mt-4">
<a href={ templ.SafeURL("/tablos/" + tablo.ID.String()) } class="text-sm font-medium text-blue-600 hover:underline">View</a>
</div>
}
}
// TabloCreateFormFragment renders the inline create form loaded into #create-form-slot
// via HTMX. Falls back to a plain POST /tablos for non-JS paths.
// UI-SPEC §2 Interaction Contract — GET /tablos/new + POST /tablos.
templ TabloCreateFormFragment(form TabloCreateForm, errs TabloCreateErrors, csrfToken string) {
<form
id="create-form"
method="POST"
action="/tablos"
hx-post="/tablos"
hx-target="#create-form-slot"
hx-swap="innerHTML"
class="mb-6 space-y-4 rounded border border-slate-200 bg-slate-50 p-6"
>
@ui.CSRFField(csrfToken)
@GeneralError(errs.General)
<h2 class="text-xl font-semibold leading-snug">Create a tablo</h2>
<div>
<label for="title" class="block text-sm font-medium text-slate-700">Title</label>
<input
id="title"
type="text"
name="title"
value={ form.Title }
required
class="mt-1 block w-full rounded border border-slate-300 px-3 py-2 text-sm placeholder-slate-400 focus:border-slate-500 focus:outline-none"
placeholder="My tablo"
/>
@FieldError(errs.Title)
</div>
<div>
<label for="description" class="block text-sm font-medium text-slate-700">Description <span class="text-slate-400">(optional)</span></label>
<textarea
id="description"
name="description"
rows="3"
class="mt-1 block w-full rounded border border-slate-300 px-3 py-2 text-sm placeholder-slate-400 focus:border-slate-500 focus:outline-none"
placeholder="What is this tablo for?"
>{ form.Description }</textarea>
</div>
<div>
<label for="color" class="block text-sm font-medium text-slate-700">Color <span class="text-slate-400">(optional)</span></label>
<input
id="color"
type="text"
name="color"
value={ form.Color }
class="mt-1 block w-full rounded border border-slate-300 px-3 py-2 text-sm placeholder-slate-400 focus:border-slate-500 focus:outline-none"
placeholder="#6366f1"
/>
@FieldError(errs.Color)
</div>
<div class="flex items-center gap-3">
@ui.Button(ui.ButtonProps{
Label: "Create tablo",
Variant: ui.ButtonVariantDefault,
Tone: ui.ButtonToneSolid,
Size: ui.SizeMD,
Type: "submit",
})
<a href="/" class="text-sm text-slate-600 hover:underline">Cancel</a>
</div>
</form>
}
// TabloCardWithOOBFormClear renders a TabloCard as the primary swap target
// AND an OOB element that clears #create-form-slot in the same response.
// The OOB div MUST be a top-level sibling of TabloCard — NOT nested (Pitfall 5).
// HTMX applies the primary swap (HX-Retarget: #tablos-list, afterbegin) AND
// the OOB swap (#create-form-slot → empty) from a single response.
templ TabloCardWithOOBFormClear(tablo sqlc.Tablo, csrfToken string) {
@TabloCard(tablo, csrfToken)
<div id="create-form-slot" hx-swap-oob="true"></div>
}
// TabloDetailPage renders the full detail page for a single tablo with a 3-tab layout.
// Tabs: Overview / Tasks / Files. activeTab selects the initially rendered tab content.
// files and tasks are pre-fetched slices for the active tab (may be nil for inactive tabs).
// UI-SPEC §3 Interaction Contract — GET /tablos/{id}.
// D-07: signature includes activeTab string param; D-08: tab bar links carry hx-push-url.
templ TabloDetailPage(user *auth.User, csrfToken string, tablo sqlc.Tablo, tasks []sqlc.Task, files []sqlc.TabloFile, activeTab string) {
@Layout("Tablos — Xtablo", user, csrfToken) {
<div class="mb-4">
<a href="/" class="text-sm text-slate-600 hover:underline">&larr; Back to tablos</a>
</div>
<div class="tablo-title-zone">
@TabloTitleDisplay(tablo, csrfToken)
</div>
<div class="tablo-desc-zone">
@TabloDescDisplay(tablo, csrfToken)
</div>
<div class="tablo-delete-zone">
@TabloDeleteButtonFragment(tablo, csrfToken)
</div>
<!-- Tab navigation bar (D-07, D-08) -->
<nav class="mt-8 flex gap-1 border-b border-slate-200">
<a
href={ templ.SafeURL("/tablos/" + tablo.ID.String()) }
hx-get={ "/tablos/" + tablo.ID.String() }
hx-target="#tab-content"
hx-swap="innerHTML"
hx-push-url={ "/tablos/" + tablo.ID.String() }
if activeTab == "overview" || activeTab == "" {
class="px-4 py-2 text-sm font-semibold border-b-2 border-slate-800 text-slate-800 -mb-px"
} else {
class="px-4 py-2 text-sm text-slate-600 hover:text-slate-800 hover:border-b-2 hover:border-slate-400 -mb-px"
}
>Overview</a>
<a
href={ templ.SafeURL("/tablos/" + tablo.ID.String() + "/tasks") }
hx-get={ "/tablos/" + tablo.ID.String() + "/tasks" }
hx-target="#tab-content"
hx-swap="innerHTML"
hx-push-url={ "/tablos/" + tablo.ID.String() + "/tasks" }
if activeTab == "tasks" {
class="px-4 py-2 text-sm font-semibold border-b-2 border-slate-800 text-slate-800 -mb-px"
} else {
class="px-4 py-2 text-sm text-slate-600 hover:text-slate-800 hover:border-b-2 hover:border-slate-400 -mb-px"
}
>Tasks</a>
<a
href={ templ.SafeURL("/tablos/" + tablo.ID.String() + "/files") }
hx-get={ "/tablos/" + tablo.ID.String() + "/files" }
hx-target="#tab-content"
hx-swap="innerHTML"
hx-push-url={ "/tablos/" + tablo.ID.String() + "/files" }
if activeTab == "files" {
class="px-4 py-2 text-sm font-semibold border-b-2 border-slate-800 text-slate-800 -mb-px"
} else {
class="px-4 py-2 text-sm text-slate-600 hover:text-slate-800 hover:border-b-2 hover:border-slate-400 -mb-px"
}
>Files</a>
</nav>
<!-- Tab content area — HTMX tab switches target this div -->
<div id="tab-content" class="mt-6">
if activeTab == "tasks" {
@TasksTabFragment(tablo, tasks, csrfToken)
} else if activeTab == "files" {
@FilesTabFragment(tablo, files, csrfToken)
} else {
@TabloOverviewTabFragment(tablo, csrfToken)
}
</div>
}
}
// TabloOverviewTabFragment renders the overview tab content — description display.
// Returned as a standalone fragment for HTMX tab-switch responses.
templ TabloOverviewTabFragment(tablo sqlc.Tablo, csrfToken string) {
<div class="overview-tab">
if tablo.Description.Valid && tablo.Description.String != "" {
<p class="text-base text-slate-600">{ tablo.Description.String }</p>
} else {
<p class="text-sm text-slate-400 italic">No description.</p>
}
</div>
}
// TasksTabFragment wraps the KanbanBoard for use as a standalone HTMX tab fragment.
// Returned by TabloTasksTabHandler on HX-Request == "true".
// Lives in tablos.templ (tablo-level concern) per plan D-07.
templ TasksTabFragment(tablo sqlc.Tablo, tasks []sqlc.Task, csrfToken string) {
@KanbanBoard(tablo.ID, csrfToken, tasks)
}
// TabloTitleDisplay renders the tablo title as a clickable element that swaps
// to the edit form on click. The outermost element carries class tablo-title-zone
// so hx-target="closest .tablo-title-zone" + hx-swap="outerHTML" round-trips cleanly.
// UI-SPEC §4 Interaction Contract — title inline-edit display state.
templ TabloTitleDisplay(tablo sqlc.Tablo, csrfToken string) {
<h1
class="tablo-title-zone text-xl font-semibold leading-snug cursor-pointer hover:text-slate-600"
hx-get={ "/tablos/" + tablo.ID.String() + "/edit-title" }
hx-target="closest .tablo-title-zone"
hx-swap="outerHTML"
role="button"
aria-label="Edit title"
>{ tablo.Title }</h1>
}
// TabloTitleEditFragment renders the inline title edit form. Carries class
// tablo-title-zone on the form element so outerHTML round-trips work correctly.
// Includes hidden description field (current value) + hidden _zone="title" for
// TabloUpdateHandler to know which display fragment to render on success.
// UI-SPEC §4 Interaction Contract — title inline-edit edit state.
templ TabloTitleEditFragment(tablo sqlc.Tablo, errs TabloUpdateErrors, csrfToken string) {
<form
class="tablo-title-zone space-y-3"
method="POST"
action={ templ.SafeURL("/tablos/" + tablo.ID.String()) }
hx-post={ "/tablos/" + tablo.ID.String() }
hx-target="closest .tablo-title-zone"
hx-swap="outerHTML"
>
@ui.CSRFField(csrfToken)
<input type="hidden" name="_zone" value="title"/>
<input type="hidden" name="description" value={ tablo.Description.String }/>
<div>
<label for="title" class="block text-sm font-medium text-slate-700">Title</label>
<input
id="title"
type="text"
name="title"
value={ tablo.Title }
required
class="mt-1 block w-full rounded border border-slate-300 px-3 py-2 text-sm placeholder-slate-400 focus:border-slate-500 focus:outline-none"
/>
@FieldError(errs.Title)
</div>
<div class="flex items-center gap-3">
@ui.Button(ui.ButtonProps{
Label: "Save changes",
Variant: ui.ButtonVariantDefault,
Tone: ui.ButtonToneSolid,
Size: ui.SizeMD,
Type: "submit",
})
@ui.Button(ui.ButtonProps{
Label: "Discard changes",
Variant: ui.ButtonVariantNeutral,
Tone: ui.ButtonToneSoft,
Size: ui.SizeMD,
Type: "button",
Attrs: templ.Attributes{
"hx-get": "/tablos/" + tablo.ID.String() + "/show-title",
"hx-target": "closest .tablo-title-zone",
"hx-swap": "outerHTML",
},
})
</div>
</form>
}
// TabloDescDisplay renders the tablo description as a clickable element that
// swaps to the edit form on click. Carries class tablo-desc-zone on the outermost
// element for clean outerHTML round-trips.
// UI-SPEC §4 Interaction Contract — description inline-edit display state.
templ TabloDescDisplay(tablo sqlc.Tablo, csrfToken string) {
<div
class="tablo-desc-zone mt-4 cursor-pointer hover:text-slate-600"
hx-get={ "/tablos/" + tablo.ID.String() + "/edit-desc" }
hx-target="closest .tablo-desc-zone"
hx-swap="outerHTML"
role="button"
aria-label="Edit description"
>
if tablo.Description.Valid && tablo.Description.String != "" {
<p class="text-base text-slate-600">{ tablo.Description.String }</p>
} else {
<p class="text-sm text-slate-400 italic">Add a description</p>
}
</div>
}
// TabloDescEditFragment renders the inline description edit form. Carries class
// tablo-desc-zone on the form element so outerHTML round-trips work correctly.
// Includes hidden title field (current value) + hidden _zone="desc" for
// TabloUpdateHandler to know which display fragment to render on success.
// UI-SPEC §4 Interaction Contract — description inline-edit edit state.
templ TabloDescEditFragment(tablo sqlc.Tablo, errs TabloUpdateErrors, csrfToken string) {
<form
class="tablo-desc-zone mt-4 space-y-3"
method="POST"
action={ templ.SafeURL("/tablos/" + tablo.ID.String()) }
hx-post={ "/tablos/" + tablo.ID.String() }
hx-target="closest .tablo-desc-zone"
hx-swap="outerHTML"
>
@ui.CSRFField(csrfToken)
<input type="hidden" name="_zone" value="desc"/>
<input type="hidden" name="title" value={ tablo.Title }/>
<div>
<label for="description" class="block text-sm font-medium text-slate-700">Description <span class="text-slate-400">(optional)</span></label>
<textarea
id="description"
name="description"
rows="3"
class="mt-1 block w-full rounded border border-slate-300 px-3 py-2 text-sm placeholder-slate-400 focus:border-slate-500 focus:outline-none"
>{ tablo.Description.String }</textarea>
@FieldError(errs.Description)
</div>
<div class="flex items-center gap-3">
@ui.Button(ui.ButtonProps{
Label: "Save changes",
Variant: ui.ButtonVariantDefault,
Tone: ui.ButtonToneSolid,
Size: ui.SizeMD,
Type: "submit",
})
@ui.Button(ui.ButtonProps{
Label: "Discard changes",
Variant: ui.ButtonVariantNeutral,
Tone: ui.ButtonToneSoft,
Size: ui.SizeMD,
Type: "button",
Attrs: templ.Attributes{
"hx-get": "/tablos/" + tablo.ID.String() + "/show-desc",
"hx-target": "closest .tablo-desc-zone",
"hx-swap": "outerHTML",
},
})
</div>
</form>
}
// TabloDeleteButtonFragment renders the delete trigger button wrapped in a
// .tablo-delete-zone div. This is the canonical single source of truth for the
// delete zone shape — TabloCard delegates to this component (no duplication).
// UI-SPEC §5 Interaction Contract — delete display state.
templ TabloDeleteButtonFragment(tablo sqlc.Tablo, csrfToken string) {
<div class="tablo-delete-zone">
@ui.Button(ui.ButtonProps{
Label: "Delete",
Variant: ui.ButtonVariantDanger,
Tone: ui.ButtonToneSoft,
Size: ui.SizeMD,
Type: "button",
Attrs: templ.Attributes{
"hx-get": "/tablos/" + tablo.ID.String() + "/delete-confirm",
"hx-target": "closest .tablo-delete-zone",
"hx-swap": "outerHTML",
"aria-label": "Delete tablo",
},
})
</div>
}
// TabloDeleteConfirmFragment renders the inline confirmation dialog that appears
// when the user clicks Delete. Carries class tablo-delete-zone for outerHTML
// round-trips. "Yes, delete" submits the DELETE action; "Keep tablo" restores
// the original Delete button via TabloDeleteCancelHandler.
// UI-SPEC §5 Interaction Contract — delete confirmation state.
templ TabloDeleteConfirmFragment(tablo sqlc.Tablo, csrfToken string) {
<div class="tablo-delete-zone space-y-3">
<p class="text-base font-semibold text-slate-800">Delete tablo?</p>
<p class="text-sm text-slate-600">This cannot be undone.</p>
<div class="flex items-center gap-3">
<form
method="POST"
action={ templ.SafeURL("/tablos/" + tablo.ID.String() + "/delete") }
hx-post={ "/tablos/" + tablo.ID.String() + "/delete" }
hx-target="closest .tablo-delete-zone"
hx-swap="outerHTML"
>
@ui.CSRFField(csrfToken)
@ui.Button(ui.ButtonProps{
Label: "Yes, delete",
Variant: ui.ButtonVariantDanger,
Tone: ui.ButtonToneSolid,
Size: ui.SizeMD,
Type: "submit",
Attrs: templ.Attributes{
"aria-label": "Confirm delete tablo",
},
})
</form>
@ui.Button(ui.ButtonProps{
Label: "Keep tablo",
Variant: ui.ButtonVariantNeutral,
Tone: ui.ButtonToneSoft,
Size: ui.SizeMD,
Type: "button",
Attrs: templ.Attributes{
"hx-get": "/tablos/" + tablo.ID.String() + "/delete-cancel",
"hx-target": "closest .tablo-delete-zone",
"hx-swap": "outerHTML",
"aria-label": "Keep tablo",
},
})
</div>
</div>
}
// TabloNotFoundPage renders a 404 page for tablos that don't exist or are not
// accessible by the current user (D-04: 404 not 403 to avoid existence leakage).
// user may be nil when called from an unauthenticated context — Layout handles nil.
// UI-SPEC Copywriting Contract: "Not found" + "This tablo doesn't exist or you don't have access."
templ TabloNotFoundPage(user *auth.User, csrfToken string) {
@Layout("Not found", user, csrfToken) {
<div class="py-16 text-center">
<h1 class="text-2xl font-semibold leading-snug text-slate-800">Not found</h1>
<p class="mt-2 text-base text-slate-600">This tablo doesn&#39;t exist or you don&#39;t have access.</p>
<div class="mt-6">
<a href="/" class="text-sm font-medium text-blue-600 hover:underline">Back to tablos</a>
</div>
</div>
}
}