xtablo-source/backend/templates/files.templ

package templates

import (
	"backend/internal/db/sqlc"
	"backend/internal/web/ui"
	"github.com/google/uuid"
)

// 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="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.
templ FileUploadForm(tabloID uuid.UUID, csrfToken string, uploadErr string) {
	<form
		method="POST"
		action={ templ.SafeURL("/tablos/" + tabloID.String() + "/files") }
		enctype="multipart/form-data"
		hx-post={ "/tablos/" + tabloID.String() + "/files" }
		hx-encoding="multipart/form-data"
		hx-target="#tab-content"
		hx-swap="innerHTML"
		class="space-y-3 rounded border border-slate-200 bg-slate-50 p-4"
	>
		@ui.CSRFField(csrfToken)
		if uploadErr != "" {
			<div class="rounded bg-red-50 border border-red-200 px-3 py-2 text-sm text-red-700">
				{ uploadErr }
			</div>
		}
		<div>
			<label for="file" class="block text-sm font-medium text-slate-700">Attach a file</label>
			<input
				id="file"
				type="file"
				name="file"
				required
				class="mt-1 block w-full text-sm text-slate-700 file:mr-3 file:rounded file:border-0 file:bg-slate-200 file:px-3 file:py-1 file:text-sm file:font-medium hover:file:bg-slate-300"
			/>
		</div>
		@ui.Button(ui.ButtonProps{
			Label:   "Upload",
			Variant: ui.ButtonVariantDefault,
			Tone:    ui.ButtonToneSolid,
			Size:    ui.SizeMD,
			Type:    "submit",
		})
	</form>
}

// 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) {
	<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.
// 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) {
	<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:   "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>
		</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 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) {
	<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="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>
}