feat: profile page, admin pages, infinite scroll on browse
Some checks failed
Deploy / Deploy Production (push) Has been skipped
Deploy / Cleanup Preview (push) Has been skipped
Deploy / Deploy Preview (push) Failing after 1s
CI / UI / Build (pull_request) Successful in 16s
CI / Scraper / Test (pull_request) Successful in 16s
CI / Scraper / Lint (pull_request) Successful in 19s
CI / Scraper / Build (pull_request) Successful in 16s
Some checks failed
Deploy / Deploy Production (push) Has been skipped
Deploy / Cleanup Preview (push) Has been skipped
Deploy / Deploy Preview (push) Failing after 1s
CI / UI / Build (pull_request) Successful in 16s
CI / Scraper / Test (pull_request) Successful in 16s
CI / Scraper / Lint (pull_request) Successful in 19s
CI / Scraper / Build (pull_request) Successful in 16s
- Add /profile page with reading settings (voice, speed, auto-next) and password change form - Add /admin/scrape page showing scraping task history with live status polling and trigger controls - Add /admin/audio page showing audio cache entries with client-side search filter - Add changePassword(), listAudioCache(), listScrapingTasks() to pocketbase.ts - Add /api/admin/scrape and /api/browse-page server-side proxy routes - Replace browse page pagination with IntersectionObserver infinite scroll - Update nav: username becomes a /profile link; admin users see Scrape and Audio cache links
This commit is contained in:
Admin
224
ui/src/routes/profile/+page.svelte
Normal file
224
ui/src/routes/profile/+page.svelte
Normal file
@@ -0,0 +1,224 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { invalidateAll } from '$app/navigation';
|
||||
import type { PageData, ActionData } from './$types';
|
||||
import { audioStore } from '$lib/audio.svelte';
|
||||
|
||||
let { data, form }: { data: PageData; form: ActionData } = $props();
|
||||
|
||||
// ── Settings ────────────────────────────────────────────────────────────────
|
||||
let voices = $state<string[]>([]);
|
||||
let voicesLoaded = $state(false);
|
||||
|
||||
// Load voices on mount
|
||||
$effect(() => {
|
||||
fetch('/api/voices')
|
||||
.then((r) => r.json())
|
||||
.then((d: { voices: string[] }) => {
|
||||
voices = d.voices ?? [];
|
||||
voicesLoaded = true;
|
||||
})
|
||||
.catch(() => {
|
||||
voicesLoaded = true;
|
||||
});
|
||||
});
|
||||
|
||||
// Mirror from audioStore so sliders feel live
|
||||
let voice = $state(audioStore.voice);
|
||||
let speed = $state(audioStore.speed);
|
||||
let autoNext = $state(audioStore.autoNext);
|
||||
|
||||
// Keep in sync when layout changes them externally
|
||||
$effect(() => {
|
||||
voice = audioStore.voice;
|
||||
speed = audioStore.speed;
|
||||
autoNext = audioStore.autoNext;
|
||||
});
|
||||
|
||||
let settingsSaving = $state(false);
|
||||
let settingsSaved = $state(false);
|
||||
|
||||
async function saveSettings() {
|
||||
settingsSaving = true;
|
||||
settingsSaved = false;
|
||||
try {
|
||||
await fetch('/api/settings', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ autoNext, voice, speed })
|
||||
});
|
||||
// Sync to audioStore so the player picks up changes immediately
|
||||
audioStore.autoNext = autoNext;
|
||||
audioStore.voice = voice;
|
||||
audioStore.speed = speed;
|
||||
await invalidateAll();
|
||||
settingsSaved = true;
|
||||
setTimeout(() => (settingsSaved = false), 2500);
|
||||
} finally {
|
||||
settingsSaving = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Password change ─────────────────────────────────────────────────────────
|
||||
let pwSubmitting = $state(false);
|
||||
let pwSuccess = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
if (form?.success) {
|
||||
pwSuccess = true;
|
||||
setTimeout(() => (pwSuccess = false), 3000);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Profile — libnovel</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="max-w-xl mx-auto space-y-10">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-zinc-100">Profile</h1>
|
||||
<p class="text-zinc-400 text-sm mt-1">Signed in as <span class="text-zinc-200 font-medium">{data.user.username}</span></p>
|
||||
</div>
|
||||
|
||||
<!-- ── Reading settings ─────────────────────────────────────────────────── -->
|
||||
<section class="bg-zinc-800 rounded-xl border border-zinc-700 p-6 space-y-5">
|
||||
<h2 class="text-lg font-semibold text-zinc-100">Reading settings</h2>
|
||||
|
||||
<!-- Voice -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-sm font-medium text-zinc-300" for="voice-select">TTS voice</label>
|
||||
{#if !voicesLoaded}
|
||||
<div class="h-9 bg-zinc-700 rounded animate-pulse"></div>
|
||||
{:else if voices.length === 0}
|
||||
<select id="voice-select" disabled class="w-full bg-zinc-700 border border-zinc-600 rounded-lg px-3 py-2 text-zinc-400 text-sm cursor-not-allowed">
|
||||
<option>No voices available</option>
|
||||
</select>
|
||||
{:else}
|
||||
<select
|
||||
id="voice-select"
|
||||
bind:value={voice}
|
||||
class="w-full bg-zinc-700 border border-zinc-600 rounded-lg px-3 py-2 text-zinc-100 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400"
|
||||
>
|
||||
{#each voices as v}
|
||||
<option value={v}>{v}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Speed -->
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-sm font-medium text-zinc-300" for="speed-range">
|
||||
Playback speed — <span class="text-amber-400 font-mono">{speed.toFixed(1)}x</span>
|
||||
</label>
|
||||
<input
|
||||
id="speed-range"
|
||||
type="range"
|
||||
min="0.5"
|
||||
max="3.0"
|
||||
step="0.1"
|
||||
bind:value={speed}
|
||||
class="w-full accent-amber-400"
|
||||
/>
|
||||
<div class="flex justify-between text-xs text-zinc-500">
|
||||
<span>0.5x</span>
|
||||
<span>3.0x</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Auto-next -->
|
||||
<label class="flex items-center gap-3 cursor-pointer select-none">
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={autoNext}
|
||||
class="w-4 h-4 rounded accent-amber-400"
|
||||
/>
|
||||
<span class="text-sm text-zinc-300">Auto-advance to next chapter</span>
|
||||
</label>
|
||||
|
||||
<div class="flex items-center gap-3 pt-1">
|
||||
<button
|
||||
onclick={saveSettings}
|
||||
disabled={settingsSaving}
|
||||
class="px-4 py-2 rounded-lg bg-amber-400 text-zinc-900 font-semibold text-sm hover:bg-amber-300 transition-colors disabled:opacity-60"
|
||||
>
|
||||
{settingsSaving ? 'Saving…' : 'Save settings'}
|
||||
</button>
|
||||
{#if settingsSaved}
|
||||
<span class="text-sm text-green-400">Saved!</span>
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Change password ──────────────────────────────────────────────────── -->
|
||||
<section class="bg-zinc-800 rounded-xl border border-zinc-700 p-6 space-y-4">
|
||||
<h2 class="text-lg font-semibold text-zinc-100">Change password</h2>
|
||||
|
||||
{#if form?.error}
|
||||
<div class="rounded-lg bg-red-900/40 border border-red-700 px-4 py-2.5 text-sm text-red-300">
|
||||
{form.error}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if pwSuccess}
|
||||
<div class="rounded-lg bg-green-900/40 border border-green-700 px-4 py-2.5 text-sm text-green-300">
|
||||
Password changed successfully.
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<form
|
||||
method="POST"
|
||||
action="?/changePassword"
|
||||
use:enhance={() => {
|
||||
pwSubmitting = true;
|
||||
return async ({ update }) => {
|
||||
pwSubmitting = false;
|
||||
await update();
|
||||
};
|
||||
}}
|
||||
class="space-y-4"
|
||||
>
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-sm font-medium text-zinc-300" for="current">Current password</label>
|
||||
<input
|
||||
id="current"
|
||||
name="current"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
required
|
||||
class="w-full bg-zinc-700 border border-zinc-600 rounded-lg px-3 py-2 text-zinc-100 text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-amber-400"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-sm font-medium text-zinc-300" for="next">New password</label>
|
||||
<input
|
||||
id="next"
|
||||
name="next"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
required
|
||||
class="w-full bg-zinc-700 border border-zinc-600 rounded-lg px-3 py-2 text-zinc-100 text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-amber-400"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="block text-sm font-medium text-zinc-300" for="confirm">Confirm new password</label>
|
||||
<input
|
||||
id="confirm"
|
||||
name="confirm"
|
||||
type="password"
|
||||
autocomplete="new-password"
|
||||
required
|
||||
class="w-full bg-zinc-700 border border-zinc-600 rounded-lg px-3 py-2 text-zinc-100 text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-amber-400"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={pwSubmitting}
|
||||
class="px-4 py-2 rounded-lg bg-zinc-600 text-zinc-100 font-semibold text-sm hover:bg-zinc-500 transition-colors disabled:opacity-60"
|
||||
>
|
||||
{pwSubmitting ? 'Updating…' : 'Update password'}
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
Reference in New Issue
Block a user