Dedup page: shorten paths, fix column alignment, per-row delete

- Strip the common /data/music/Library/ prefix from displayed keep/delete
  paths (every track lives there, so it added width without adding
  information); full path is still available via a hover title.
- Table now uses a colgroup with fixed column widths so headers stay
  aligned with their content regardless of how long a given path is,
  instead of drifting with the widest cell in the column.
- Add a per-row Delete button (self-contained form per cell) alongside
  the existing checkbox + bulk "Delete selected" flow -- the checkboxes
  now target an external form via the HTML `form` attribute instead of
  wrapping the table in a form, since a form can't legally nest another
  form for the per-row buttons.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
andrew
2026-07-08 16:31:21 -06:00
parent 02744f6654
commit 491dd1844f
3 changed files with 70 additions and 31 deletions
+22 -1
View File
@@ -4,14 +4,35 @@ from fastapi.templating import Jinja2Templates
from app.security.deps import require_auth
from app.services import dedup_review_service
from app.settings import settings
router = APIRouter(prefix="/dedup", tags=["dedup"])
templates = Jinja2Templates(directory="app/templates")
# Every library track lives under this prefix -- showing it on every row of
# every candidate adds nothing but width, so strip it for display (the full
# path is still available in the title attribute on hover).
_LIBRARY_PREFIX = str(settings.music_data_dir / "Library") + "/"
def _display_path(path: str) -> str:
return path[len(_LIBRARY_PREFIX):] if path.startswith(_LIBRARY_PREFIX) else path
@router.get("")
async def dedup_index(request: Request, user: dict = Depends(require_auth)):
candidates = dedup_review_service.list_pending_candidates()
candidates = [
{
"id": c.id,
"pass_name": c.pass_name,
"keep_path": c.keep_path,
"delete_path": c.delete_path,
"keep_display": _display_path(c.keep_path),
"delete_display": _display_path(c.delete_path),
"delete_size_bytes": c.delete_size_bytes,
}
for c in dedup_review_service.list_pending_candidates()
]
return templates.TemplateResponse(request, "dedup/index.html", {"candidates": candidates})
+8
View File
@@ -411,6 +411,14 @@ tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(167, 139, 250, 0.055); }
tbody td.actions-cell { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.dedup-table { table-layout: fixed; }
.dedup-table .path-cell {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 0; /* forces the cell to respect the colgroup width instead of the content's natural width */
}
.empty-row td { padding: 2.5rem 1rem; text-align: center; }
/* ---- badges / pills ---- */
+40 -30
View File
@@ -17,34 +17,44 @@
</div>
<h2>Pending candidates</h2>
<form method="post" action="/dedup/confirm">
<div class="table-wrap scroll">
<table>
<thead>
<tr><th></th><th>Pass</th><th>Keep</th><th>Delete</th><th>Size</th></tr>
</thead>
<tbody>
{% for c in candidates %}
<tr>
<td><input type="checkbox" name="candidate_id" value="{{ c.id }}"></td>
<td><span class="badge badge-info">{{ c.pass_name }}</span></td>
<td class="muted mono truncate">{{ c.keep_path }}</td>
<td class="mono truncate">{{ c.delete_path }}</td>
<td class="muted">{{ (c.delete_size_bytes / 1024 / 1024) | round(1) if c.delete_size_bytes else '?' }} MB</td>
</tr>
{% else %}
<tr class="empty-row"><td colspan="5">
<div class="empty-state">
<span class="sparkle" style="position:relative; display:inline-block; margin-bottom:0.5rem;"></span>
<p class="muted" style="margin:0;">No pending candidates. Run a scan.</p>
</div>
</td></tr>
{% endfor %}
</tbody>
</table>
</div>
{% if candidates %}
<button type="submit" class="btn btn-danger">Delete selected</button>
{% endif %}
</form>
<p class="muted" style="margin-top:-0.5rem;">Paths are relative to the library root. Hover a name for the full path.</p>
<form id="bulk-delete-form" method="post" action="/dedup/confirm"></form>
<div class="table-wrap scroll">
<table class="dedup-table">
<colgroup>
<col style="width:2.2rem"><col style="width:7rem"><col style="width:33%">
<col style="width:33%"><col style="width:5rem"><col style="width:5rem">
</colgroup>
<thead>
<tr><th></th><th>Pass</th><th>Keep</th><th>Delete</th><th>Size</th><th></th></tr>
</thead>
<tbody>
{% for c in candidates %}
<tr>
<td><input type="checkbox" name="candidate_id" value="{{ c.id }}" form="bulk-delete-form"></td>
<td><span class="badge badge-info">{{ c.pass_name }}</span></td>
<td class="muted mono path-cell" title="{{ c.keep_path }}">{{ c.keep_display }}</td>
<td class="mono path-cell" title="{{ c.delete_path }}">{{ c.delete_display }}</td>
<td class="muted">{{ (c.delete_size_bytes / 1024 / 1024) | round(1) if c.delete_size_bytes else '?' }} MB</td>
<td>
<form method="post" action="/dedup/confirm" class="inline">
<input type="hidden" name="candidate_id" value="{{ c.id }}">
<button type="submit" class="btn btn-sm btn-danger">Delete</button>
</form>
</td>
</tr>
{% else %}
<tr class="empty-row"><td colspan="6">
<div class="empty-state">
<span class="sparkle" style="position:relative; display:inline-block; margin-bottom:0.5rem;"></span>
<p class="muted" style="margin:0;">No pending candidates. Run a scan.</p>
</div>
</td></tr>
{% endfor %}
</tbody>
</table>
</div>
{% if candidates %}
<button type="submit" form="bulk-delete-form" class="btn btn-danger">Delete selected</button>
{% endif %}
{% endblock %}