fix(admin): UX and bug fixes across admin pages
All checks were successful
All checks were successful
- Import: fix "1/1/1" date display (Go zero time.Time → show dash) - AI Jobs: guard fmtDate against zero-time dates - AI Jobs: add "Cancel all in-flight (N)" bulk action button - AI Jobs sidebar: show live running+pending count badge from layout - Notifications: add broadcast panel linking to push.libnovel.cc, relabel inbox section Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,8 +1,16 @@
|
|||||||
import { redirect } from '@sveltejs/kit';
|
import { redirect } from '@sveltejs/kit';
|
||||||
import type { LayoutServerLoad } from './$types';
|
import type { LayoutServerLoad } from './$types';
|
||||||
|
import { listAIJobs } from '$lib/server/pocketbase';
|
||||||
|
import { log } from '$lib/server/logger';
|
||||||
|
|
||||||
export const load: LayoutServerLoad = async ({ locals }) => {
|
export const load: LayoutServerLoad = async ({ locals }) => {
|
||||||
if (locals.user?.role !== 'admin') {
|
if (locals.user?.role !== 'admin') {
|
||||||
redirect(302, '/');
|
redirect(302, '/');
|
||||||
}
|
}
|
||||||
|
const jobs = await listAIJobs().catch((e) => {
|
||||||
|
log.warn('admin/layout', 'failed to load ai jobs for sidebar badge', { err: String(e) });
|
||||||
|
return [];
|
||||||
|
});
|
||||||
|
const runningAiJobs = jobs.filter((j) => j.status === 'running' || j.status === 'pending').length;
|
||||||
|
return { runningAiJobs };
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { page } from '$app/state';
|
import { page } from '$app/state';
|
||||||
import * as m from '$lib/paraglide/messages.js';
|
import * as m from '$lib/paraglide/messages.js';
|
||||||
|
import type { LayoutData } from './$types';
|
||||||
|
|
||||||
const internalLinks = [
|
const internalLinks = [
|
||||||
{
|
{
|
||||||
@@ -105,8 +106,9 @@
|
|||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
children?: import('svelte').Snippet;
|
children?: import('svelte').Snippet;
|
||||||
|
data: LayoutData;
|
||||||
}
|
}
|
||||||
let { children }: Props = $props();
|
let { children, data }: Props = $props();
|
||||||
|
|
||||||
let sidebarOpen = $state(false);
|
let sidebarOpen = $state(false);
|
||||||
</script>
|
</script>
|
||||||
@@ -136,6 +138,7 @@
|
|||||||
<nav class="flex flex-col gap-0.5">
|
<nav class="flex flex-col gap-0.5">
|
||||||
{#each internalLinks as link}
|
{#each internalLinks as link}
|
||||||
{@const active = page.url.pathname.startsWith(link.href)}
|
{@const active = page.url.pathname.startsWith(link.href)}
|
||||||
|
{@const isAiJobs = link.href === '/admin/ai-jobs'}
|
||||||
<a
|
<a
|
||||||
href={link.href}
|
href={link.href}
|
||||||
onclick={() => (sidebarOpen = false)}
|
onclick={() => (sidebarOpen = false)}
|
||||||
@@ -147,7 +150,12 @@
|
|||||||
<svg class="w-3.5 h-3.5 shrink-0 {active ? 'text-(--color-brand)' : 'opacity-50'}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
<svg class="w-3.5 h-3.5 shrink-0 {active ? 'text-(--color-brand)' : 'opacity-50'}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
{@html link.icon}
|
{@html link.icon}
|
||||||
</svg>
|
</svg>
|
||||||
{link.label()}
|
<span class="flex-1">{link.label()}</span>
|
||||||
|
{#if isAiJobs && data.runningAiJobs > 0}
|
||||||
|
<span class="text-[10px] font-bold tabular-nums px-1.5 py-0.5 rounded-full bg-(--color-brand) text-black leading-none">
|
||||||
|
{data.runningAiJobs}
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
</a>
|
</a>
|
||||||
{/each}
|
{/each}
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@@ -57,6 +57,7 @@
|
|||||||
// ── Cancel ────────────────────────────────────────────────────────────────────
|
// ── Cancel ────────────────────────────────────────────────────────────────────
|
||||||
let cancellingIds = $state(new Set<string>());
|
let cancellingIds = $state(new Set<string>());
|
||||||
let cancelErrors: Record<string, string> = $state({});
|
let cancelErrors: Record<string, string> = $state({});
|
||||||
|
let cancellingAll = $state(false);
|
||||||
|
|
||||||
async function cancelJob(id: string) {
|
async function cancelJob(id: string) {
|
||||||
if (cancellingIds.has(id)) return;
|
if (cancellingIds.has(id)) return;
|
||||||
@@ -77,6 +78,14 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function cancelAllRunning() {
|
||||||
|
if (cancellingAll) return;
|
||||||
|
cancellingAll = true;
|
||||||
|
const inFlight = jobs.filter((j) => j.status === 'running' || j.status === 'pending');
|
||||||
|
await Promise.all(inFlight.map((j) => cancelJob(j.id)));
|
||||||
|
cancellingAll = false;
|
||||||
|
}
|
||||||
|
|
||||||
// ── Review & Apply (chapter-names jobs) ──────────────────────────────────────
|
// ── Review & Apply (chapter-names jobs) ──────────────────────────────────────
|
||||||
|
|
||||||
interface ProposedTitle {
|
interface ProposedTitle {
|
||||||
@@ -411,7 +420,9 @@
|
|||||||
|
|
||||||
function fmtDate(s: string | undefined) {
|
function fmtDate(s: string | undefined) {
|
||||||
if (!s) return '—';
|
if (!s) return '—';
|
||||||
return new Date(s).toLocaleString(undefined, {
|
const d = new Date(s);
|
||||||
|
if (d.getFullYear() < 2000) return '—';
|
||||||
|
return d.toLocaleString(undefined, {
|
||||||
month: 'short',
|
month: 'short',
|
||||||
day: 'numeric',
|
day: 'numeric',
|
||||||
hour: '2-digit',
|
hour: '2-digit',
|
||||||
@@ -482,6 +493,27 @@
|
|||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Bulk actions -->
|
||||||
|
{#if stats.running + stats.pending > 0}
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<button
|
||||||
|
onclick={cancelAllRunning}
|
||||||
|
disabled={cancellingAll}
|
||||||
|
class="flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium bg-(--color-danger)/10 text-(--color-danger) hover:bg-(--color-danger)/20 disabled:opacity-50 transition-colors"
|
||||||
|
>
|
||||||
|
{#if cancellingAll}
|
||||||
|
<svg class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||||
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
|
||||||
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
|
||||||
|
</svg>
|
||||||
|
Cancelling…
|
||||||
|
{:else}
|
||||||
|
Cancel all in-flight ({stats.running + stats.pending})
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<!-- Filters -->
|
<!-- Filters -->
|
||||||
<div class="flex flex-wrap gap-3 items-center">
|
<div class="flex flex-wrap gap-3 items-center">
|
||||||
<input
|
<input
|
||||||
|
|||||||
@@ -169,7 +169,9 @@
|
|||||||
|
|
||||||
function formatDate(dateStr: string) {
|
function formatDate(dateStr: string) {
|
||||||
if (!dateStr) return '-';
|
if (!dateStr) return '-';
|
||||||
return new Date(dateStr).toLocaleString();
|
const d = new Date(dateStr);
|
||||||
|
if (d.getFullYear() < 2000) return '-';
|
||||||
|
return d.toLocaleString();
|
||||||
}
|
}
|
||||||
|
|
||||||
function statusColor(status: string) {
|
function statusColor(status: string) {
|
||||||
|
|||||||
@@ -47,9 +47,31 @@
|
|||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<div class="max-w-2xl mx-auto px-4 py-8">
|
<div class="max-w-2xl mx-auto px-4 py-8">
|
||||||
|
<!-- Broadcast panel -->
|
||||||
|
<div class="mb-6 rounded-lg border border-(--color-border) bg-(--color-surface-2) p-4 flex items-start gap-3">
|
||||||
|
<svg class="w-5 h-5 text-(--color-brand) mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
|
||||||
|
</svg>
|
||||||
|
<div class="min-w-0">
|
||||||
|
<p class="text-sm font-semibold text-(--color-text)">Broadcast to users</p>
|
||||||
|
<p class="text-sm text-(--color-muted) mt-0.5">To send push notifications or in-app messages to all subscribers, use the push dashboard.</p>
|
||||||
|
<a
|
||||||
|
href="https://push.libnovel.cc"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
class="inline-flex items-center gap-1 mt-2 text-sm text-(--color-brand) hover:underline"
|
||||||
|
>
|
||||||
|
Open push.libnovel.cc
|
||||||
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center justify-between mb-6">
|
<div class="flex items-center justify-between mb-6">
|
||||||
<div>
|
<div>
|
||||||
<h1 class="text-xl font-semibold">Notifications</h1>
|
<h1 class="text-xl font-semibold">Your Notification Inbox</h1>
|
||||||
{#if unreadCount > 0}
|
{#if unreadCount > 0}
|
||||||
<p class="text-sm text-(--color-muted) mt-0.5">{unreadCount} unread</p>
|
<p class="text-sm text-(--color-muted) mt-0.5">{unreadCount} unread</p>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
Reference in New Issue
Block a user