Files
bookhoard/templates/admin_archived.templ
T
John O'Keefe 88adf30aa9 fix(ui): mobile layout overflows across admin, reader, and book pages
Every fix is a minimal class-level change; desktop layouts are untouched
because each fixed row already fit on one line there.

- progress: CFI string is one unbreakable token — it inflated the page
  layout width to 398-501px (whole-page zoom-out on phones) and rendered
  debug-looking text edge to edge. min-w-0 + break-all lets it wrap.
- audio reader: settings strip min-content (~470px) exceeded the 390px
  viewport, clipping Skip/Sleep and — because the page ICB inflated —
  pushing the chapters drawer (w-full of the viewport) past the screen
  edge so its timestamps clipped too. flex-wrap fixes both symptoms.
- book detail edit-metadata modal footer: Rescan/Reset/Write-to-file row
  overflowed the modal; clipped buttons were unreachable. flex-wrap.
- bookshelf save-filter modal footer: three buttons overflowed both
  screen edges. flex-wrap.
- admin libraries: rows overprinted (badge chips shrink-0 vs actions
  shrink-0, no wrap) — 'manga⟳Scan▸1 folders⌄Manage'. flex-wrap stacks
  actions under the name on phones.
- admin podcasts: maintenance table forced a 892px page (44% zoom).
  overflow-x-auto on the card scrolls the table inside it instead.
- stats: 4-pill range row forced 421px; page permanently ~7% zoomed out.
  flex-wrap.
- podcast feed detail: label+select pairs now travel in their own flex
  pairs so flex-wrap can never split 'Order' from its select; ids and
  htmx change-triggers preserved.
- cosmetics: conflicts stat labels tracking-wide→normal (UNRESOLVED
  clipped), archived file path line-clamp-3, rules-page Smart badge
  wraps cleanly, dashboard View All shrink-0 nowrap (was wrapping to
  two lines).
2026-11-02 09:30:55 -05:00

116 lines
4.4 KiB
Templ

package templates
templ AdminArchived(user User, items []ArchivedItem, retentionDays int) {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Archived Items - Bookhoard</title>
<link href="/static/style.css" rel="stylesheet"/>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
</head>
<body x-data="admin" class={ "theme-" + user.Theme }>
@Header(user, "/admin/archived")
<main class="p-8">
<div class="max-w-5xl">
<div class="mb-8">
<div class="flex items-center justify-between gap-4 flex-wrap">
<div>
<div class="flex items-center gap-3 mb-1">
<span class="grid place-items-center h-10 w-10 rounded-xl" style="background-color: var(--accent-muted); color: var(--accent);">
@Icon("library", "h-5 w-5")
</span>
<h1 class="text-2xl font-bold tracking-tight" style="color: var(--text-primary)">Archived Items</h1>
</div>
<p class="text-sm" style="color: var(--text-secondary)">
Books hidden because their files are missing from disk. Reading history is
kept in case a file returns; moves are detected automatically.
if retentionDays > 0 {
Archived items are permanently deleted after { retentionDays } days
(ARCHIVE_RETENTION_DAYS).
} else {
Archived items are kept until manually purged (retention disabled).
}
</p>
</div>
if len(items) > 0 {
<button type="button" @click="purgeArchivedItems()" class="btn btn-secondary">
@Icon("trash", "h-4 w-4")
Purge All Archived
</button>
}
</div>
</div>
if len(items) == 0 {
<div class="card p-8 text-center">
<p style="color: var(--text-secondary)">Nothing is archived or missing. All clear.</p>
</div>
} else {
<div class="card overflow-hidden">
<table class="w-full text-sm">
<thead>
<tr class="border-b text-left" style="border-color: var(--border); color: var(--text-secondary);">
<th class="px-4 py-3 font-semibold">Book</th>
<th class="px-4 py-3 font-semibold">Library</th>
<th class="px-4 py-3 font-semibold">Status</th>
<th class="px-4 py-3 font-semibold text-right">Actions</th>
</tr>
</thead>
<tbody>
for _, item := range items {
<tr class="border-b" style="border-color: color-mix(in srgb, var(--text-primary) 5%, transparent);">
<td class="px-4 py-3">
<p class="font-medium" style="color: var(--text-primary)">{ item.Title }</p>
if item.Author != "" {
<p style="color: var(--text-secondary)">{ item.Author }</p>
}
<p class="font-mono text-xs break-all line-clamp-3" style="color: var(--text-secondary)">{ item.FilePath }</p>
</td>
<td class="px-4 py-3" style="color: var(--text-primary)">{ item.LibraryName }</td>
<td class="px-4 py-3" style="color: var(--text-secondary)">{ item.Status }</td>
<td class="px-4 py-3 text-right whitespace-nowrap">
if item.MatchID != "" {
<button
type="button"
data-merge-source={ item.ID }
data-merge-target={ item.MatchID }
class="btn btn-ghost text-xs"
title={ "Merge this archived copy's reading data into the active copy \"" + item.MatchTitle + "\" (" + item.MatchLibraryName + ") and remove the archived entry" }
>
@Icon("copy", "h-3.5 w-3.5")
Merge
</button>
}
<button
type="button"
data-unarchive={ item.ID }
class="btn btn-ghost text-xs"
title="Restore to libraries now; if the file is still gone the next scan hides it again"
>
@Icon("refresh", "h-3.5 w-3.5")
Restore
</button>
<button
type="button"
data-delete-archived={ item.ID }
class="btn btn-ghost text-xs"
title="Delete this item and its reading history permanently"
>
@Icon("trash", "h-3.5 w-3.5")
Delete
</button>
</td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
</main>
</body>
</html>
}