From 004ff0b45e92cbdaed5df0cd250e5348096a6bb5 Mon Sep 17 00:00:00 2001
From: Masahiko AMANO <hiko-19@ya.ru>
Date: Tue, 7 Apr 2026 00:56:43 +0300
Subject: [PATCH] fix(frontend): admin section fixes (pagination, actions,
 navbar)

- Audit log: replace load-more with page-based pagination
- Audit log: add all 29 action types to the dropdown
- Audit log: fix pagination bar hidden behind footer
- Root layout: hide footer navbar on /admin/* routes
- Users pages: fix curly-quote parse error in ConfirmDialog messages

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/+layout.svelte            |   3 +-
 frontend/src/routes/admin/audit/+page.svelte  | 141 +++++++++++++-----
 frontend/src/routes/admin/users/+page.svelte  |   2 +-
 .../src/routes/admin/users/[id]/+page.svelte  |   2 +-
 4 files changed, 106 insertions(+), 42 deletions(-)

diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index d2c7e3c..8658611 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -34,11 +34,12 @@
 	];
 
 	const isLogin = $derived($page.url.pathname === '/login');
+	const isAdmin = $derived($page.url.pathname.startsWith('/admin'));
 </script>
 
 {@render children()}
 
-{#if !isLogin}
+{#if !isLogin && !isAdmin}
 	<footer>
 		{#each navItems as item}
 			{@const active = $page.url.pathname.startsWith(item.match)}
diff --git a/frontend/src/routes/admin/audit/+page.svelte b/frontend/src/routes/admin/audit/+page.svelte
index 925d2ad..c7ec654 100644
--- a/frontend/src/routes/admin/audit/+page.svelte
+++ b/frontend/src/routes/admin/audit/+page.svelte
@@ -5,20 +5,43 @@
 	const LIMIT = 50;
 	const OBJECT_TYPES = ['file', 'tag', 'category', 'pool'];
 	const ACTION_LABELS: Record<string, string> = {
-		file_create:        'File uploaded',
-		file_edit:          'File edited',
-		file_delete:        'File deleted',
-		file_tag_add:       'Tag added to file',
-		file_tag_remove:    'Tag removed from file',
-		tag_create:         'Tag created',
-		tag_edit:           'Tag edited',
-		tag_delete:         'Tag deleted',
-		pool_create:        'Pool created',
-		pool_edit:          'Pool edited',
-		pool_delete:        'Pool deleted',
-		category_create:    'Category created',
-		category_edit:      'Category edited',
-		category_delete:    'Category deleted',
+		// Auth
+		user_login:             'User logged in',
+		user_logout:            'User logged out',
+		// Files
+		file_create:            'File uploaded',
+		file_edit:              'File edited',
+		file_delete:            'File deleted',
+		file_restore:           'File restored',
+		file_permanent_delete:  'File permanently deleted',
+		file_replace:           'File replaced',
+		// Tags
+		tag_create:             'Tag created',
+		tag_edit:               'Tag edited',
+		tag_delete:             'Tag deleted',
+		// Categories
+		category_create:        'Category created',
+		category_edit:          'Category edited',
+		category_delete:        'Category deleted',
+		// Pools
+		pool_create:            'Pool created',
+		pool_edit:              'Pool edited',
+		pool_delete:            'Pool deleted',
+		// Relations
+		file_tag_add:           'Tag added to file',
+		file_tag_remove:        'Tag removed from file',
+		file_pool_add:          'File added to pool',
+		file_pool_remove:       'File removed from pool',
+		// ACL
+		acl_change:             'ACL changed',
+		// Admin
+		user_create:            'User created',
+		user_delete:            'User deleted',
+		user_block:             'User blocked',
+		user_unblock:           'User unblocked',
+		user_role_change:       'User role changed',
+		// Sessions
+		session_terminate:      'Session terminated',
 	};
 
 	// ---- Filters ----
@@ -32,19 +55,20 @@
 	// ---- Data ----
 	let entries = $state<AuditEntry[]>([]);
 	let total = $state(0);
-	let offset = $state(0);
+	let page = $state(0);   // 0-based
 	let loading = $state(false);
 	let error = $state('');
-	let hasMore = $state(true);
 	let initialLoaded = $state(false);
 
+	let totalPages = $derived(Math.max(1, Math.ceil(total / LIMIT)));
+
 	// ---- Users for filter dropdown ----
 	let allUsers = $state<User[]>([]);
 	$effect(() => {
 		api.get<UserOffsetPage>('/users?limit=200').then((r) => { allUsers = r.items ?? []; }).catch(() => {});
 	});
 
-	// All distinct action types seen across entries (populated from data)
+	// Unknown action types not in ACTION_LABELS (server may add new ones)
 	let knownActions = $derived([...new Set(entries.map((e) => e.action).filter(Boolean))].sort() as string[]);
 
 	// ---- Reset on filter change ----
@@ -54,9 +78,7 @@
 	$effect(() => {
 		if (filterKey !== prevFilterKey) {
 			prevFilterKey = filterKey;
-			entries = [];
-			offset = 0;
-			hasMore = true;
+			page = 0;
 			initialLoaded = false;
 			error = '';
 		}
@@ -67,24 +89,21 @@
 	});
 
 	async function load() {
-		if (loading || !hasMore) return;
+		if (loading) return;
 		loading = true;
 		error = '';
 		try {
-			const params = new URLSearchParams({ limit: String(LIMIT), offset: String(offset) });
-			if (filterUserId)     params.set('user_id',     filterUserId);
-			if (filterAction)     params.set('action',      filterAction);
-			if (filterObjectType) params.set('object_type', filterObjectType);
-			if (filterObjectId.trim()) params.set('object_id', filterObjectId.trim());
-			if (filterFrom)       params.set('from', new Date(filterFrom).toISOString());
-			if (filterTo)         params.set('to',   new Date(filterTo).toISOString());
+			const params = new URLSearchParams({ limit: String(LIMIT), offset: String(page * LIMIT) });
+			if (filterUserId)          params.set('user_id',     filterUserId);
+			if (filterAction)          params.set('action',      filterAction);
+			if (filterObjectType)      params.set('object_type', filterObjectType);
+			if (filterObjectId.trim()) params.set('object_id',   filterObjectId.trim());
+			if (filterFrom)            params.set('from', new Date(filterFrom).toISOString());
+			if (filterTo)              params.set('to',   new Date(filterTo).toISOString());
 
 			const res = await api.get<AuditOffsetPage>(`/audit?${params}`);
-			const items = res.items ?? [];
-			entries = offset === 0 ? items : [...entries, ...items];
+			entries = res.items ?? [];
 			total = res.total ?? entries.length;
-			offset = entries.length;
-			hasMore = entries.length < total;
 		} catch (e) {
 			error = e instanceof ApiError ? e.message : 'Failed to load audit log';
 		} finally {
@@ -93,6 +112,12 @@
 		}
 	}
 
+	async function goToPage(p: number) {
+		if (p < 0 || p >= totalPages || p === page) return;
+		page = p;
+		initialLoaded = false;
+	}
+
 	function formatTs(iso: string | undefined | null): string {
 		if (!iso) return '—';
 		const d = new Date(iso);
@@ -185,6 +210,7 @@
 	{#if error}
 		<p class="msg error" role="alert">{error}</p>
 	{:else}
+		<div class="content-area">
 		<div class="table-wrap">
 			<table class="table">
 				<thead>
@@ -228,9 +254,18 @@
 			</table>
 		</div>
 
-		{#if hasMore && !loading}
-			<button class="load-more-btn" onclick={load}>Load more</button>
+		{#if totalPages > 1}
+			<div class="pagination">
+				<button class="page-btn" onclick={() => goToPage(page - 1)} disabled={page === 0 || loading}>
+					← Prev
+				</button>
+				<span class="page-info">Page {page + 1} of {totalPages}</span>
+				<button class="page-btn" onclick={() => goToPage(page + 1)} disabled={page >= totalPages - 1 || loading}>
+					Next →
+				</button>
+			</div>
 		{/if}
+		</div>
 	{/if}
 </div>
 
@@ -316,8 +351,17 @@
 	}
 
 	/* ---- Table ---- */
+	.content-area {
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
 	.table-wrap {
 		flex: 1;
+		min-height: 0;
 		overflow-y: auto;
 		border-radius: 10px;
 		border: 1px solid color-mix(in srgb, var(--color-accent) 15%, transparent);
@@ -424,24 +468,43 @@
 
 	@keyframes spin { to { transform: rotate(360deg); } }
 
-	.load-more-btn {
-		align-self: center;
+	.pagination {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 12px;
+		flex-shrink: 0;
+	}
+
+	.page-btn {
 		height: 32px;
-		padding: 0 20px;
+		padding: 0 14px;
 		border-radius: 7px;
 		border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
 		background: none;
 		color: var(--color-text-muted);
-		font-size: 0.85rem;
+		font-size: 0.82rem;
 		font-family: inherit;
 		cursor: pointer;
 	}
 
-	.load-more-btn:hover {
+	.page-btn:hover:not(:disabled) {
 		border-color: var(--color-accent);
 		color: var(--color-accent);
 	}
 
+	.page-btn:disabled {
+		opacity: 0.35;
+		cursor: default;
+	}
+
+	.page-info {
+		font-size: 0.82rem;
+		color: var(--color-text-muted);
+		min-width: 100px;
+		text-align: center;
+	}
+
 	.msg.error {
 		font-size: 0.85rem;
 		color: var(--color-danger);
diff --git a/frontend/src/routes/admin/users/+page.svelte b/frontend/src/routes/admin/users/+page.svelte
index 553c10c..3afc5e8 100644
--- a/frontend/src/routes/admin/users/+page.svelte
+++ b/frontend/src/routes/admin/users/+page.svelte
@@ -172,7 +172,7 @@
 
 {#if confirmDeleteUser}
 	<ConfirmDialog
-		message="Delete user "{confirmDeleteUser.name}"? This cannot be undone."
+		message="Delete user &ldquo;{confirmDeleteUser.name}&rdquo;? This cannot be undone."
 		confirmLabel="Delete"
 		danger
 		onConfirm={() => deleteUser(confirmDeleteUser!)}
diff --git a/frontend/src/routes/admin/users/[id]/+page.svelte b/frontend/src/routes/admin/users/[id]/+page.svelte
index 727179d..dd24fe2 100644
--- a/frontend/src/routes/admin/users/[id]/+page.svelte
+++ b/frontend/src/routes/admin/users/[id]/+page.svelte
@@ -150,7 +150,7 @@
 
 {#if confirmDelete && user}
 	<ConfirmDialog
-		message="Delete user "{user.name}"? This cannot be undone."
+		message="Delete user &ldquo;{user.name}&rdquo;? This cannot be undone."
 		confirmLabel="Delete"
 		danger
 		onConfirm={doDelete}