From ca693f1683c9d65d3670ea79d4e54cc5125a0355 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Sat, 16 May 2026 23:46:12 +0200
Subject: [PATCH] feat(16-04): restyle files section with @ui.Table,
 EmptyState, and tr rows

- Replace <ul>/<li> layout with @ui.Table using fileTableHead/fileTableBody helpers
- Add .overview-section-heading header with "Files" h3 and Upload file button
- Convert FileListRow outer element from <li> to <tr class="file-row-zone">
- Convert FileDeleteConfirmFragment outer element from <div> to <tr class="file-row-zone"> with <td colspan="4">
- Add Download and Delete @ui.IconButton in FileListRow actions column
- Replace FileListEmpty with @ui.EmptyState in FilesTabFragment and UploadErrorFragment
- Convert FileRowGone from <div> to <tr> for DOM consistency
- All 9 file handler tests pass; go build ./... exits 0
---
 backend/templates/files.templ | 252 +++++++++++++++++++++-------------
 1 file changed, 156 insertions(+), 96 deletions(-)

diff --git a/backend/templates/files.templ b/backend/templates/files.templ
index 9bc02bb..3a6d6c4 100644
--- a/backend/templates/files.templ
+++ b/backend/templates/files.templ
@@ -6,26 +6,57 @@ import (
 	"github.com/google/uuid"
 )
 
-// FilesTabFragment renders the upload form followed by the file list.
-// Called by TabloFilesTabHandler for HTMX requests and embedded in TabloDetailPage
-// #tab-content for the "files" tab.
+// FilesTabFragment renders the files section with an overview-section layout,
+// an "Upload file" button, and either a table of files or an empty state.
 templ FilesTabFragment(tablo sqlc.Tablo, files []sqlc.TabloFile, csrfToken string) {
-	<div class="files-tab">
-		@FileUploadForm(tablo.ID, csrfToken, "")
-		<div class="mt-6">
-			if len(files) == 0 {
-				@FileListEmpty()
-			} else {
-				<ul class="divide-y divide-slate-200 rounded border border-slate-200">
-					for _, f := range files {
-						@FileListRow(tablo.ID, f)
-					}
-				</ul>
-			}
+	<div class="overview-section">
+		<div class="overview-section-heading">
+			<h3>Files</h3>
+			@ui.Button(ui.ButtonProps{
+				Label:   "Upload file",
+				Variant: ui.ButtonVariantDefault,
+				Tone:    ui.ButtonToneSolid,
+				Size:    ui.SizeMD,
+				Type:    "button",
+				Attrs: templ.Attributes{
+					"hx-get":    "/tablos/" + tablo.ID.String() + "/files/upload-form",
+					"hx-target": "#file-upload-slot",
+					"hx-swap":   "innerHTML",
+				},
+			})
 		</div>
+		<div id="file-upload-slot"></div>
+		if len(files) == 0 {
+			@ui.EmptyState(ui.EmptyStateProps{
+				Title:       "No files yet",
+				Description: "Upload your first file to get started.",
+			})
+		} else {
+			@ui.Table(ui.TableProps{
+				Head: fileTableHead(),
+				Body: fileTableBody(tablo.ID, files),
+			})
+		}
 	</div>
 }
 
+// fileTableHead renders the <thead> row for the files table.
+templ fileTableHead() {
+	<tr>
+		<th>Filename</th>
+		<th>Size</th>
+		<th>Uploaded</th>
+		<th>Actions</th>
+	</tr>
+}
+
+// fileTableBody renders the <tbody> rows for the files table.
+templ fileTableBody(tabloID uuid.UUID, files []sqlc.TabloFile) {
+	for _, f := range files {
+		@FileListRow(tabloID, f)
+	}
+}
+
 // FileUploadForm renders the multipart upload form.
 // hx-encoding="multipart/form-data" is required for HTMX multipart submissions.
 // If uploadErr is non-empty, a red error message is shown above the form.
@@ -66,112 +97,141 @@ templ FileUploadForm(tabloID uuid.UUID, csrfToken string, uploadErr string) {
 	</form>
 }
 
-// FileListRow renders a single file row showing filename, human-readable size, and date.
-// Download link points to GET /tablos/{tabloID}/files/{file.ID}/download (wired in Plan 03).
-// Delete confirm link uses HTMX outerHTML swap on .file-row-zone (Plan 03).
+// FileListRow renders a single file row as a <tr> for use inside @ui.Table.
+// HTMX outerHTML swap on .file-row-zone works because both FileListRow and
+// FileDeleteConfirmFragment use <tr class="file-row-zone">.
 templ FileListRow(tabloID uuid.UUID, file sqlc.TabloFile) {
-	<li class="file-row-zone" id={ "file-" + file.ID.String() }>
-		<div class="flex items-center justify-between px-4 py-3">
-			<div class="flex-1 min-w-0">
-				<p class="text-sm font-medium text-slate-800 truncate">{ file.Filename }</p>
-				<p class="text-xs text-slate-500 mt-0.5">
-					{ formatBytes(file.SizeBytes) }
-					if file.CreatedAt.Valid {
-						<span class="ml-2">{ file.CreatedAt.Time.Format("2006-01-02 15:04") }</span>
-					}
-				</p>
-			</div>
-			<div class="flex items-center gap-3 ml-4">
-				<a
-					href={ templ.SafeURL("/tablos/" + tabloID.String() + "/files/" + file.ID.String() + "/download") }
-					class="text-sm text-blue-600 hover:underline"
-				>Download</a>
-				<button
-					type="button"
-					class="text-sm text-red-600 hover:underline"
-					hx-get={ "/tablos/" + tabloID.String() + "/files/" + file.ID.String() + "/delete-confirm" }
-					hx-target="closest .file-row-zone"
-					hx-swap="outerHTML"
-				>Delete</button>
-			</div>
-		</div>
-	</li>
+	<tr class="file-row-zone" id={ "file-" + file.ID.String() }>
+		<td>{ file.Filename }</td>
+		<td>{ formatBytes(file.SizeBytes) }</td>
+		<td>
+			if file.CreatedAt.Valid {
+				{ file.CreatedAt.Time.Format("2006-01-02") }
+			}
+		</td>
+		<td>
+			<a
+				href={ templ.SafeURL("/tablos/" + tabloID.String() + "/files/" + file.ID.String() + "/download") }
+				aria-label={ "Download " + file.Filename }
+			>
+				@ui.IconButton(ui.IconButtonProps{
+					Label:   "Download file",
+					Icon:    "download",
+					Variant: ui.IconButtonVariantNeutral,
+					Tone:    ui.IconButtonToneGhost,
+					Type:    "button",
+				})
+			</a>
+			@ui.IconButton(ui.IconButtonProps{
+				Label:   "Delete file",
+				Icon:    "trash",
+				Variant: ui.IconButtonVariantDanger,
+				Tone:    ui.IconButtonToneGhost,
+				Type:    "button",
+				Attrs: templ.Attributes{
+					"hx-get":    "/tablos/" + tabloID.String() + "/files/" + file.ID.String() + "/delete-confirm",
+					"hx-target": "closest .file-row-zone",
+					"hx-swap":   "outerHTML",
+				},
+			})
+		</td>
+	</tr>
 }
 
 // FileDeleteConfirmFragment renders the inline delete confirmation for a single file row.
-// Mirrors TaskDeleteConfirmFragment exactly: outer wrapper reuses the .file-row-zone id
-// so HTMX outerHTML swap replaces the row in place (T-05-03-05, FILE-05).
+// Outer element MUST be <tr class="file-row-zone"> to match FileListRow for HTMX outerHTML swap.
+// colspan="4" spans all 4 columns (Filename / Size / Uploaded / Actions).
 templ FileDeleteConfirmFragment(tabloID uuid.UUID, file sqlc.TabloFile, csrfToken string) {
-	<div class="file-row-zone" id={ "file-" + file.ID.String() }>
-		<div class="bg-white rounded border border-slate-200 p-3 shadow-sm space-y-2">
-			<p class="text-sm font-semibold text-slate-800">Delete file?</p>
-			<p class="text-xs text-slate-600 truncate">{ file.Filename }</p>
-			<p class="text-xs text-slate-500">This cannot be undone.</p>
-			<div class="flex items-center gap-2">
-				<form
-					method="POST"
-					action={ templ.SafeURL("/tablos/" + tabloID.String() + "/files/" + file.ID.String() + "/delete") }
-					hx-post={ "/tablos/" + tabloID.String() + "/files/" + file.ID.String() + "/delete" }
-					hx-target="closest .file-row-zone"
-					hx-swap="outerHTML"
-				>
-					@ui.CSRFField(csrfToken)
+	<tr class="file-row-zone" id={ "file-" + file.ID.String() }>
+		<td colspan="4">
+			<div class="bg-white rounded border border-slate-200 p-3 shadow-sm space-y-2">
+				<p class="text-sm font-semibold text-slate-800">Delete file?</p>
+				<p class="text-xs text-slate-600 truncate">{ file.Filename }</p>
+				<p class="text-xs text-slate-500">This cannot be undone.</p>
+				<div class="flex items-center gap-2">
+					<form
+						method="POST"
+						action={ templ.SafeURL("/tablos/" + tabloID.String() + "/files/" + file.ID.String() + "/delete") }
+						hx-post={ "/tablos/" + tabloID.String() + "/files/" + file.ID.String() + "/delete" }
+						hx-target="closest .file-row-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 file",
+							},
+						})
+					</form>
 					@ui.Button(ui.ButtonProps{
-						Label:   "Yes, delete",
-						Variant: ui.ButtonVariantDanger,
-						Tone:    ui.ButtonToneSolid,
+						Label:   "Keep file",
+						Variant: ui.ButtonVariantNeutral,
+						Tone:    ui.ButtonToneSoft,
 						Size:    ui.SizeMD,
-						Type:    "submit",
+						Type:    "button",
 						Attrs: templ.Attributes{
-							"aria-label": "Confirm delete file",
+							"hx-get":     "/tablos/" + tabloID.String() + "/files",
+							"hx-target":  "#tab-content",
+							"hx-swap":    "innerHTML",
+							"aria-label": "Keep file",
 						},
 					})
-				</form>
-				@ui.Button(ui.ButtonProps{
-					Label:   "Keep file",
-					Variant: ui.ButtonVariantNeutral,
-					Tone:    ui.ButtonToneSoft,
-					Size:    ui.SizeMD,
-					Type:    "button",
-					Attrs: templ.Attributes{
-						"hx-get":     "/tablos/" + tabloID.String() + "/files",
-						"hx-target":  "#tab-content",
-						"hx-swap":    "innerHTML",
-						"aria-label": "Keep file",
-					},
-				})
+				</div>
 			</div>
-		</div>
-	</div>
+		</td>
+	</tr>
 }
 
 // FileListEmpty renders the empty-state message when no files are attached.
+// Retained for backward compatibility; FilesTabFragment now uses @ui.EmptyState instead.
 templ FileListEmpty() {
 	<p class="text-sm text-slate-400 italic py-4">No files attached yet.</p>
 }
 
-// FileRowGone renders an empty zone div with the file's id so HTMX outerHTML
-// swap removes the row from the DOM after a successful delete (Plan 03, FILE-05).
+// FileRowGone renders an empty zone tr with the file's id so HTMX outerHTML
+// swap removes the row from the DOM after a successful delete (FILE-05).
 // Same pattern as TaskCardGone.
 templ FileRowGone(fileID uuid.UUID) {
-	<div id={ "file-" + fileID.String() } class="file-row-zone"></div>
+	<tr id={ "file-" + fileID.String() } class="file-row-zone"></tr>
 }
 
 // UploadErrorFragment re-renders FilesTabFragment with the error message set.
 // Used by FileUploadHandler on size violation (returns 422).
 templ UploadErrorFragment(tablo sqlc.Tablo, files []sqlc.TabloFile, csrfToken string, errMsg string) {
-	<div class="files-tab">
-		@FileUploadForm(tablo.ID, csrfToken, errMsg)
-		<div class="mt-6">
-			if len(files) == 0 {
-				@FileListEmpty()
-			} else {
-				<ul class="divide-y divide-slate-200 rounded border border-slate-200">
-					for _, f := range files {
-						@FileListRow(tablo.ID, f)
-					}
-				</ul>
-			}
+	<div class="overview-section">
+		<div class="overview-section-heading">
+			<h3>Files</h3>
+			@ui.Button(ui.ButtonProps{
+				Label:   "Upload file",
+				Variant: ui.ButtonVariantDefault,
+				Tone:    ui.ButtonToneSolid,
+				Size:    ui.SizeMD,
+				Type:    "button",
+				Attrs: templ.Attributes{
+					"hx-get":    "/tablos/" + tablo.ID.String() + "/files/upload-form",
+					"hx-target": "#file-upload-slot",
+					"hx-swap":   "innerHTML",
+				},
+			})
 		</div>
+		<div id="file-upload-slot">
+			@FileUploadForm(tablo.ID, csrfToken, errMsg)
+		</div>
+		if len(files) == 0 {
+			@ui.EmptyState(ui.EmptyStateProps{
+				Title:       "No files yet",
+				Description: "Upload your first file to get started.",
+			})
+		} else {
+			@ui.Table(ui.TableProps{
+				Head: fileTableHead(),
+				Body: fileTableBody(tablo.ID, files),
+			})
+		}
 	</div>
 }