diff --git a/src/lib/admin/api.ts b/src/lib/admin/api.ts index f41b7fa..acbc331 100644 --- a/src/lib/admin/api.ts +++ b/src/lib/admin/api.ts @@ -3,90 +3,99 @@ import { goto } from '$app/navigation' export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' export interface RequestOptions { - method?: HttpMethod - body?: TBody - signal?: AbortSignal - headers?: Record + method?: HttpMethod + body?: TBody + signal?: AbortSignal + headers?: Record } export interface ApiError extends Error { - status: number - details?: unknown + status: number + details?: unknown } function getAuthHeader() { - return {} + return {} } async function handleResponse(res: Response) { - if (res.status === 401) { - // Redirect to login for unauthorized requests - try { - goto('/admin/login') - } catch {} - } + if (res.status === 401) { + // Redirect to login for unauthorized requests + try { + goto('/admin/login') + } catch {} + } - const contentType = res.headers.get('content-type') || '' - const isJson = contentType.includes('application/json') - const data = isJson ? await res.json().catch(() => undefined) : undefined + const contentType = res.headers.get('content-type') || '' + const isJson = contentType.includes('application/json') + const data = isJson ? await res.json().catch(() => undefined) : undefined - if (!res.ok) { - const err: ApiError = Object.assign(new Error('Request failed'), { - status: res.status, - details: data - }) - throw err - } - return data + if (!res.ok) { + const err: ApiError = Object.assign(new Error('Request failed'), { + status: res.status, + details: data + }) + throw err + } + return data } export async function request( - url: string, - opts: RequestOptions = {} + url: string, + opts: RequestOptions = {} ): Promise { - const { method = 'GET', body, signal, headers } = opts + const { method = 'GET', body, signal, headers } = opts - const isFormData = typeof FormData !== 'undefined' && body instanceof FormData - const mergedHeaders: Record = { - ...(isFormData ? {} : { 'Content-Type': 'application/json' }), - ...getAuthHeader(), - ...(headers || {}) - } + const isFormData = typeof FormData !== 'undefined' && body instanceof FormData + const mergedHeaders: Record = { + ...(isFormData ? {} : { 'Content-Type': 'application/json' }), + ...getAuthHeader(), + ...(headers || {}) + } - const res = await fetch(url, { - method, - headers: mergedHeaders, - body: body ? (isFormData ? (body as any) : JSON.stringify(body)) : undefined, - signal, - credentials: 'same-origin' - }) + const res = await fetch(url, { + method, + headers: mergedHeaders, + body: body ? (isFormData ? (body as any) : JSON.stringify(body)) : undefined, + signal, + credentials: 'same-origin' + }) - return handleResponse(res) as Promise + return handleResponse(res) as Promise } export const api = { - get: (url: string, opts: Omit = {}) => - request(url, { ...opts, method: 'GET' }), - post: (url: string, body: B, opts: Omit, 'method' | 'body'> = {}) => - request(url, { ...opts, method: 'POST', body }), - put: (url: string, body: B, opts: Omit, 'method' | 'body'> = {}) => - request(url, { ...opts, method: 'PUT', body }), - patch: (url: string, body: B, opts: Omit, 'method' | 'body'> = {}) => - request(url, { ...opts, method: 'PATCH', body }), - delete: (url: string, opts: Omit = {}) => - request(url, { ...opts, method: 'DELETE' }) + get: (url: string, opts: Omit = {}) => + request(url, { ...opts, method: 'GET' }), + post: ( + url: string, + body: B, + opts: Omit, 'method' | 'body'> = {} + ) => request(url, { ...opts, method: 'POST', body }), + put: ( + url: string, + body: B, + opts: Omit, 'method' | 'body'> = {} + ) => request(url, { ...opts, method: 'PUT', body }), + patch: ( + url: string, + body: B, + opts: Omit, 'method' | 'body'> = {} + ) => request(url, { ...opts, method: 'PATCH', body }), + delete: (url: string, opts: Omit = {}) => + request(url, { ...opts, method: 'DELETE' }) } export function createAbortable() { - let controller: AbortController | null = null - return { - nextSignal() { - if (controller) controller.abort() - controller = new AbortController() - return controller.signal - }, - abort() { - if (controller) controller.abort() - } - } + let controller: AbortController | null = null + return { + nextSignal() { + if (controller) controller.abort() + controller = new AbortController() + return controller.signal + }, + abort() { + if (controller) controller.abort() + } + } } diff --git a/src/lib/admin/autoSave.svelte.ts b/src/lib/admin/autoSave.svelte.ts index 5f71242..30e72d5 100644 --- a/src/lib/admin/autoSave.svelte.ts +++ b/src/lib/admin/autoSave.svelte.ts @@ -1,20 +1,20 @@ export type AutoSaveStatus = 'idle' | 'saving' | 'saved' | 'error' | 'offline' export interface AutoSaveStoreOptions { - debounceMs?: number - idleResetMs?: number - getPayload: () => TPayload | null | undefined - save: (payload: TPayload, ctx: { signal: AbortSignal }) => Promise - onSaved?: (res: TResponse, ctx: { prime: (payload: TPayload) => void }) => void + debounceMs?: number + idleResetMs?: number + getPayload: () => TPayload | null | undefined + save: (payload: TPayload, ctx: { signal: AbortSignal }) => Promise + onSaved?: (res: TResponse, ctx: { prime: (payload: TPayload) => void }) => void } export interface AutoSaveStore { - readonly status: AutoSaveStatus - readonly lastError: string | null - schedule: () => void - flush: () => Promise - destroy: () => void - prime: (payload: TPayload) => void + readonly status: AutoSaveStatus + readonly lastError: string | null + schedule: () => void + flush: () => Promise + destroy: () => void + prime: (payload: TPayload) => void } /** @@ -35,109 +35,109 @@ export interface AutoSaveStore { * // Trigger save: autoSave.schedule() */ export function createAutoSaveStore( - opts: AutoSaveStoreOptions + opts: AutoSaveStoreOptions ): AutoSaveStore { - const debounceMs = opts.debounceMs ?? 2000 - const idleResetMs = opts.idleResetMs ?? 2000 - let timer: ReturnType | null = null - let idleResetTimer: ReturnType | null = null - let controller: AbortController | null = null - let lastSentHash: string | null = null + const debounceMs = opts.debounceMs ?? 2000 + const idleResetMs = opts.idleResetMs ?? 2000 + let timer: ReturnType | null = null + let idleResetTimer: ReturnType | null = null + let controller: AbortController | null = null + let lastSentHash: string | null = null - let status = $state('idle') - let lastError = $state(null) + let status = $state('idle') + let lastError = $state(null) - function setStatus(next: AutoSaveStatus) { - if (idleResetTimer) { - clearTimeout(idleResetTimer) - idleResetTimer = null - } + function setStatus(next: AutoSaveStatus) { + if (idleResetTimer) { + clearTimeout(idleResetTimer) + idleResetTimer = null + } - status = next + status = next - // Auto-transition from 'saved' to 'idle' after idleResetMs - if (next === 'saved') { - idleResetTimer = setTimeout(() => { - status = 'idle' - idleResetTimer = null - }, idleResetMs) - } - } + // Auto-transition from 'saved' to 'idle' after idleResetMs + if (next === 'saved') { + idleResetTimer = setTimeout(() => { + status = 'idle' + idleResetTimer = null + }, idleResetMs) + } + } - function prime(payload: TPayload) { - lastSentHash = safeHash(payload) - } + function prime(payload: TPayload) { + lastSentHash = safeHash(payload) + } - function schedule() { - if (timer) clearTimeout(timer) - timer = setTimeout(() => void run(), debounceMs) - } + function schedule() { + if (timer) clearTimeout(timer) + timer = setTimeout(() => void run(), debounceMs) + } - async function run() { - if (timer) { - clearTimeout(timer) - timer = null - } + async function run() { + if (timer) { + clearTimeout(timer) + timer = null + } - const payload = opts.getPayload() - if (!payload) return + const payload = opts.getPayload() + if (!payload) return - const hash = safeHash(payload) - if (lastSentHash && hash === lastSentHash) return + const hash = safeHash(payload) + if (lastSentHash && hash === lastSentHash) return - if (controller) controller.abort() - controller = new AbortController() + if (controller) controller.abort() + controller = new AbortController() - setStatus('saving') - lastError = null - try { - const res = await opts.save(payload, { signal: controller.signal }) - lastSentHash = hash - setStatus('saved') - if (opts.onSaved) opts.onSaved(res, { prime }) - } catch (e: any) { - if (e?.name === 'AbortError') { - // Newer save superseded this one - return - } - if (typeof navigator !== 'undefined' && navigator.onLine === false) { - setStatus('offline') - } else { - setStatus('error') - } - lastError = e?.message || 'Auto-save failed' - } - } + setStatus('saving') + lastError = null + try { + const res = await opts.save(payload, { signal: controller.signal }) + lastSentHash = hash + setStatus('saved') + if (opts.onSaved) opts.onSaved(res, { prime }) + } catch (e: any) { + if (e?.name === 'AbortError') { + // Newer save superseded this one + return + } + if (typeof navigator !== 'undefined' && navigator.onLine === false) { + setStatus('offline') + } else { + setStatus('error') + } + lastError = e?.message || 'Auto-save failed' + } + } - function flush() { - return run() - } + function flush() { + return run() + } - function destroy() { - if (timer) clearTimeout(timer) - if (idleResetTimer) clearTimeout(idleResetTimer) - if (controller) controller.abort() - } + function destroy() { + if (timer) clearTimeout(timer) + if (idleResetTimer) clearTimeout(idleResetTimer) + if (controller) controller.abort() + } - return { - get status() { - return status - }, - get lastError() { - return lastError - }, - schedule, - flush, - destroy, - prime - } + return { + get status() { + return status + }, + get lastError() { + return lastError + }, + schedule, + flush, + destroy, + prime + } } function safeHash(obj: unknown): string { - try { - return JSON.stringify(obj) - } catch { - // Fallback for circular structures; not expected for form payloads - return String(obj) - } + try { + return JSON.stringify(obj) + } catch { + // Fallback for circular structures; not expected for form payloads + return String(obj) + } } diff --git a/src/lib/admin/autoSave.ts b/src/lib/admin/autoSave.ts index fe917eb..89a205b 100644 --- a/src/lib/admin/autoSave.ts +++ b/src/lib/admin/autoSave.ts @@ -1,139 +1,139 @@ export type AutoSaveStatus = 'idle' | 'saving' | 'saved' | 'error' | 'offline' export interface AutoSaveController { - status: { subscribe: (run: (v: AutoSaveStatus) => void) => () => void } - lastError: { subscribe: (run: (v: string | null) => void) => () => void } - schedule: () => void - flush: () => Promise - destroy: () => void - prime: (payload: T) => void + status: { subscribe: (run: (v: AutoSaveStatus) => void) => () => void } + lastError: { subscribe: (run: (v: string | null) => void) => () => void } + schedule: () => void + flush: () => Promise + destroy: () => void + prime: (payload: T) => void } interface CreateAutoSaveControllerOptions { - debounceMs?: number - idleResetMs?: number - getPayload: () => TPayload | null | undefined - save: (payload: TPayload, ctx: { signal: AbortSignal }) => Promise - onSaved?: (res: TResponse, ctx: { prime: (payload: TPayload) => void }) => void + debounceMs?: number + idleResetMs?: number + getPayload: () => TPayload | null | undefined + save: (payload: TPayload, ctx: { signal: AbortSignal }) => Promise + onSaved?: (res: TResponse, ctx: { prime: (payload: TPayload) => void }) => void } export function createAutoSaveController( - opts: CreateAutoSaveControllerOptions + opts: CreateAutoSaveControllerOptions ) { - const debounceMs = opts.debounceMs ?? 2000 - const idleResetMs = opts.idleResetMs ?? 2000 - let timer: ReturnType | null = null - let idleResetTimer: ReturnType | null = null - let controller: AbortController | null = null - let lastSentHash: string | null = null + const debounceMs = opts.debounceMs ?? 2000 + const idleResetMs = opts.idleResetMs ?? 2000 + let timer: ReturnType | null = null + let idleResetTimer: ReturnType | null = null + let controller: AbortController | null = null + let lastSentHash: string | null = null - let _status: AutoSaveStatus = 'idle' - let _lastError: string | null = null - const statusSubs = new Set<(v: AutoSaveStatus) => void>() - const errorSubs = new Set<(v: string | null) => void>() + let _status: AutoSaveStatus = 'idle' + let _lastError: string | null = null + const statusSubs = new Set<(v: AutoSaveStatus) => void>() + const errorSubs = new Set<(v: string | null) => void>() - function setStatus(next: AutoSaveStatus) { - if (idleResetTimer) { - clearTimeout(idleResetTimer) - idleResetTimer = null - } + function setStatus(next: AutoSaveStatus) { + if (idleResetTimer) { + clearTimeout(idleResetTimer) + idleResetTimer = null + } - _status = next - statusSubs.forEach((fn) => fn(_status)) + _status = next + statusSubs.forEach((fn) => fn(_status)) - // Auto-transition from 'saved' to 'idle' after idleResetMs - if (next === 'saved') { - idleResetTimer = setTimeout(() => { - _status = 'idle' - statusSubs.forEach((fn) => fn(_status)) - idleResetTimer = null - }, idleResetMs) - } - } + // Auto-transition from 'saved' to 'idle' after idleResetMs + if (next === 'saved') { + idleResetTimer = setTimeout(() => { + _status = 'idle' + statusSubs.forEach((fn) => fn(_status)) + idleResetTimer = null + }, idleResetMs) + } + } - function prime(payload: TPayload) { - lastSentHash = safeHash(payload) - } + function prime(payload: TPayload) { + lastSentHash = safeHash(payload) + } - function schedule() { - if (timer) clearTimeout(timer) - timer = setTimeout(() => void run(), debounceMs) - } + function schedule() { + if (timer) clearTimeout(timer) + timer = setTimeout(() => void run(), debounceMs) + } - async function run() { - if (timer) { - clearTimeout(timer) - timer = null - } + async function run() { + if (timer) { + clearTimeout(timer) + timer = null + } - const payload = opts.getPayload() - if (!payload) return + const payload = opts.getPayload() + if (!payload) return - const hash = safeHash(payload) - if (lastSentHash && hash === lastSentHash) return + const hash = safeHash(payload) + if (lastSentHash && hash === lastSentHash) return - if (controller) controller.abort() - controller = new AbortController() + if (controller) controller.abort() + controller = new AbortController() - setStatus('saving') - _lastError = null - try { - const res = await opts.save(payload, { signal: controller.signal }) - lastSentHash = hash - setStatus('saved') - if (opts.onSaved) opts.onSaved(res, { prime }) - } catch (e: any) { - if (e?.name === 'AbortError') { - // Newer save superseded this one - return - } - if (typeof navigator !== 'undefined' && navigator.onLine === false) { - setStatus('offline') - } else { - setStatus('error') - } - _lastError = e?.message || 'Auto-save failed' - errorSubs.forEach((fn) => fn(_lastError)) - } - } + setStatus('saving') + _lastError = null + try { + const res = await opts.save(payload, { signal: controller.signal }) + lastSentHash = hash + setStatus('saved') + if (opts.onSaved) opts.onSaved(res, { prime }) + } catch (e: any) { + if (e?.name === 'AbortError') { + // Newer save superseded this one + return + } + if (typeof navigator !== 'undefined' && navigator.onLine === false) { + setStatus('offline') + } else { + setStatus('error') + } + _lastError = e?.message || 'Auto-save failed' + errorSubs.forEach((fn) => fn(_lastError)) + } + } - function flush() { - return run() - } + function flush() { + return run() + } - function destroy() { - if (timer) clearTimeout(timer) - if (idleResetTimer) clearTimeout(idleResetTimer) - if (controller) controller.abort() - } + function destroy() { + if (timer) clearTimeout(timer) + if (idleResetTimer) clearTimeout(idleResetTimer) + if (controller) controller.abort() + } - return { - status: { - subscribe(run: (v: AutoSaveStatus) => void) { - run(_status) - statusSubs.add(run) - return () => statusSubs.delete(run) - } - }, - lastError: { - subscribe(run: (v: string | null) => void) { - run(_lastError) - errorSubs.add(run) - return () => errorSubs.delete(run) - } - }, - schedule, - flush, - destroy, - prime - } + return { + status: { + subscribe(run: (v: AutoSaveStatus) => void) { + run(_status) + statusSubs.add(run) + return () => statusSubs.delete(run) + } + }, + lastError: { + subscribe(run: (v: string | null) => void) { + run(_lastError) + errorSubs.add(run) + return () => errorSubs.delete(run) + } + }, + schedule, + flush, + destroy, + prime + } } function safeHash(obj: unknown): string { - try { - return JSON.stringify(obj) - } catch { - // Fallback for circular structures; not expected for form payloads - return String(obj) - } + try { + return JSON.stringify(obj) + } catch { + // Fallback for circular structures; not expected for form payloads + return String(obj) + } } diff --git a/src/lib/admin/autoSaveLifecycle.ts b/src/lib/admin/autoSaveLifecycle.ts index 710ae39..fa8695d 100644 --- a/src/lib/admin/autoSaveLifecycle.ts +++ b/src/lib/admin/autoSaveLifecycle.ts @@ -4,58 +4,58 @@ import type { AutoSaveController } from './autoSave' import type { AutoSaveStore } from './autoSave.svelte' interface AutoSaveLifecycleOptions { - isReady?: () => boolean - onFlushError?: (error: unknown) => void - enableShortcut?: boolean + isReady?: () => boolean + onFlushError?: (error: unknown) => void + enableShortcut?: boolean } export function initAutoSaveLifecycle( - controller: AutoSaveController | AutoSaveStore, - options: AutoSaveLifecycleOptions = {} + controller: AutoSaveController | AutoSaveStore, + options: AutoSaveLifecycleOptions = {} ) { - const { isReady = () => true, onFlushError, enableShortcut = true } = options + const { isReady = () => true, onFlushError, enableShortcut = true } = options - if (typeof window === 'undefined') { - onDestroy(() => controller.destroy()) - return - } + if (typeof window === 'undefined') { + onDestroy(() => controller.destroy()) + return + } - function handleKeydown(event: KeyboardEvent) { - if (!enableShortcut) return - if (!isReady()) return - const key = event.key.toLowerCase() - const isModifier = event.metaKey || event.ctrlKey - if (!isModifier || key !== 's') return - event.preventDefault() - controller.flush().catch((error) => { - onFlushError?.(error) - }) - } + function handleKeydown(event: KeyboardEvent) { + if (!enableShortcut) return + if (!isReady()) return + const key = event.key.toLowerCase() + const isModifier = event.metaKey || event.ctrlKey + if (!isModifier || key !== 's') return + event.preventDefault() + controller.flush().catch((error) => { + onFlushError?.(error) + }) + } - if (enableShortcut) { - document.addEventListener('keydown', handleKeydown) - } + if (enableShortcut) { + document.addEventListener('keydown', handleKeydown) + } - const stopNavigating = beforeNavigate(async (navigation) => { - if (!isReady()) return - navigation.cancel() - try { - await controller.flush() - navigation.retry() - } catch (error) { - onFlushError?.(error) - } - }) + const stopNavigating = beforeNavigate(async (navigation) => { + if (!isReady()) return + navigation.cancel() + try { + await controller.flush() + navigation.retry() + } catch (error) { + onFlushError?.(error) + } + }) - const stop = () => { - if (enableShortcut) { - document.removeEventListener('keydown', handleKeydown) - } - stopNavigating?.() - controller.destroy() - } + const stop = () => { + if (enableShortcut) { + document.removeEventListener('keydown', handleKeydown) + } + stopNavigating?.() + controller.destroy() + } - onDestroy(stop) + onDestroy(stop) - return { stop } + return { stop } } diff --git a/src/lib/admin/draftStore.ts b/src/lib/admin/draftStore.ts index 08fc1ed..717b18b 100644 --- a/src/lib/admin/draftStore.ts +++ b/src/lib/admin/draftStore.ts @@ -1,49 +1,49 @@ export type Draft = { payload: T; ts: number } export function makeDraftKey(type: string, id: string | number) { - return `admin:draft:${type}:${id}` + return `admin:draft:${type}:${id}` } export function saveDraft(key: string, payload: T) { - try { - const entry: Draft = { payload, ts: Date.now() } - localStorage.setItem(key, JSON.stringify(entry)) - } catch { - // Ignore quota or serialization errors - } + try { + const entry: Draft = { payload, ts: Date.now() } + localStorage.setItem(key, JSON.stringify(entry)) + } catch { + // Ignore quota or serialization errors + } } export function loadDraft(key: string): Draft | null { - try { - const raw = localStorage.getItem(key) - if (!raw) return null - return JSON.parse(raw) as Draft - } catch { - return null - } + try { + const raw = localStorage.getItem(key) + if (!raw) return null + return JSON.parse(raw) as Draft + } catch { + return null + } } export function clearDraft(key: string) { - try { - localStorage.removeItem(key) - } catch {} + try { + localStorage.removeItem(key) + } catch {} } export function timeAgo(ts: number): string { - const diff = Date.now() - ts - const sec = Math.floor(diff / 1000) - if (sec < 5) return 'just now' - if (sec < 60) return `${sec} second${sec !== 1 ? 's' : ''} ago` - const min = Math.floor(sec / 60) - if (min < 60) return `${min} minute${min !== 1 ? 's' : ''} ago` - const hr = Math.floor(min / 60) - if (hr < 24) return `${hr} hour${hr !== 1 ? 's' : ''} ago` - const day = Math.floor(hr / 24) - if (day <= 29) { - if (day < 7) return `${day} day${day !== 1 ? 's' : ''} ago` - const wk = Math.floor(day / 7) - return `${wk} week${wk !== 1 ? 's' : ''} ago` - } - // Beyond 29 days, show a normal localized date - return new Date(ts).toLocaleDateString() + const diff = Date.now() - ts + const sec = Math.floor(diff / 1000) + if (sec < 5) return 'just now' + if (sec < 60) return `${sec} second${sec !== 1 ? 's' : ''} ago` + const min = Math.floor(sec / 60) + if (min < 60) return `${min} minute${min !== 1 ? 's' : ''} ago` + const hr = Math.floor(min / 60) + if (hr < 24) return `${hr} hour${hr !== 1 ? 's' : ''} ago` + const day = Math.floor(hr / 24) + if (day <= 29) { + if (day < 7) return `${day} day${day !== 1 ? 's' : ''} ago` + const wk = Math.floor(day / 7) + return `${wk} week${wk !== 1 ? 's' : ''} ago` + } + // Beyond 29 days, show a normal localized date + return new Date(ts).toLocaleDateString() } diff --git a/src/lib/admin/listFilters.svelte.ts b/src/lib/admin/listFilters.svelte.ts index 44eee41..9637832 100644 --- a/src/lib/admin/listFilters.svelte.ts +++ b/src/lib/admin/listFilters.svelte.ts @@ -127,38 +127,54 @@ export function createListFilters( */ export const commonSorts = { /** Sort by date field, newest first */ - dateDesc: (field: keyof T) => (a: T, b: T) => - new Date(b[field] as string).getTime() - new Date(a[field] as string).getTime(), + dateDesc: + (field: keyof T) => + (a: T, b: T) => + new Date(b[field] as string).getTime() - new Date(a[field] as string).getTime(), /** Sort by date field, oldest first */ - dateAsc: (field: keyof T) => (a: T, b: T) => - new Date(a[field] as string).getTime() - new Date(b[field] as string).getTime(), + dateAsc: + (field: keyof T) => + (a: T, b: T) => + new Date(a[field] as string).getTime() - new Date(b[field] as string).getTime(), /** Sort by string field, A-Z */ - stringAsc: (field: keyof T) => (a: T, b: T) => - String(a[field] || '').localeCompare(String(b[field] || '')), + stringAsc: + (field: keyof T) => + (a: T, b: T) => + String(a[field] || '').localeCompare(String(b[field] || '')), /** Sort by string field, Z-A */ - stringDesc: (field: keyof T) => (a: T, b: T) => - String(b[field] || '').localeCompare(String(a[field] || '')), + stringDesc: + (field: keyof T) => + (a: T, b: T) => + String(b[field] || '').localeCompare(String(a[field] || '')), /** Sort by number field, ascending */ - numberAsc: (field: keyof T) => (a: T, b: T) => - Number(a[field]) - Number(b[field]), + numberAsc: + (field: keyof T) => + (a: T, b: T) => + Number(a[field]) - Number(b[field]), /** Sort by number field, descending */ - numberDesc: (field: keyof T) => (a: T, b: T) => - Number(b[field]) - Number(a[field]), + numberDesc: + (field: keyof T) => + (a: T, b: T) => + Number(b[field]) - Number(a[field]), /** Sort by status field, published first */ - statusPublishedFirst: (field: keyof T) => (a: T, b: T) => { - if (a[field] === b[field]) return 0 - return a[field] === 'published' ? -1 : 1 - }, + statusPublishedFirst: + (field: keyof T) => + (a: T, b: T) => { + if (a[field] === b[field]) return 0 + return a[field] === 'published' ? -1 : 1 + }, /** Sort by status field, draft first */ - statusDraftFirst: (field: keyof T) => (a: T, b: T) => { - if (a[field] === b[field]) return 0 - return a[field] === 'draft' ? -1 : 1 - } + statusDraftFirst: + (field: keyof T) => + (a: T, b: T) => { + if (a[field] === b[field]) return 0 + return a[field] === 'draft' ? -1 : 1 + } } diff --git a/src/lib/components/Album.svelte b/src/lib/components/Album.svelte index 9a26d6b..4bc5228 100644 --- a/src/lib/components/Album.svelte +++ b/src/lib/components/Album.svelte @@ -101,10 +101,10 @@ // Use the album's isNowPlaying status directly - single source of truth const isNowPlaying = $derived(album?.isNowPlaying ?? false) const nowPlayingTrack = $derived(album?.nowPlayingTrack) - + // Use Apple Music URL if available, otherwise fall back to Last.fm const albumUrl = $derived(album?.appleMusicData?.url || album?.url || '#') - + // Debug logging $effect(() => { if (album && (isNowPlaying || album.isNowPlaying)) { diff --git a/src/lib/components/AppleMusicSearchModal.svelte b/src/lib/components/AppleMusicSearchModal.svelte index 678c08a..b246499 100644 --- a/src/lib/components/AppleMusicSearchModal.svelte +++ b/src/lib/components/AppleMusicSearchModal.svelte @@ -2,7 +2,7 @@ import { onMount } from 'svelte' import XIcon from '$icons/x.svg' import LoaderIcon from '$icons/loader.svg' - + let isOpen = $state(false) let searchQuery = $state('') let storefront = $state('us') @@ -10,7 +10,7 @@ let searchResults = $state(null) let searchError = $state(null) let responseTime = $state(0) - + // Available storefronts const storefronts = [ { value: 'us', label: 'United States' }, @@ -26,7 +26,7 @@ { value: 'cn', label: 'China' }, { value: 'br', label: 'Brazil' } ] - + export function open() { isOpen = true searchQuery = '' @@ -34,23 +34,23 @@ searchError = null responseTime = 0 } - + function close() { isOpen = false } - + async function performSearch() { if (!searchQuery.trim()) { searchError = 'Please enter a search query' return } - + isSearching = true searchError = null searchResults = null - + const startTime = performance.now() - + try { const response = await fetch('/api/admin/debug/apple-music-search', { method: 'POST', @@ -60,13 +60,13 @@ storefront }) }) - + responseTime = Math.round(performance.now() - startTime) - + if (!response.ok) { throw new Error(`HTTP ${response.status}: ${response.statusText}`) } - + searchResults = await response.json() } catch (error) { searchError = error instanceof Error ? error.message : 'Unknown error occurred' @@ -75,7 +75,7 @@ isSearching = false } } - + function handleKeydown(e: KeyboardEvent) { if (e.key === 'Escape' && isOpen) { close() @@ -83,7 +83,7 @@ performSearch() } } - + onMount(() => { window.addEventListener('keydown', handleKeydown) return () => window.removeEventListener('keydown', handleKeydown) @@ -99,7 +99,7 @@ - +
@@ -112,7 +112,7 @@ disabled={isSearching} />
- +
- -
- + {#if searchError}
- Error: {searchError} + Error: + {searchError}
{/if} - + {#if responseTime > 0}
Response time: {responseTime}ms
{/if} - + {#if searchResults}

Results

- +
- - +
- + 
{JSON.stringify(searchResults, null, 2)}
@@ -206,7 +201,7 @@ justify-content: center; backdrop-filter: blur(4px); } - + .modal-container { background: rgba(20, 20, 20, 0.98); border-radius: $unit * 1.5; @@ -218,21 +213,21 @@ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); } - + .modal-header { display: flex; justify-content: space-between; align-items: center; padding: $unit * 2; border-bottom: 1px solid rgba(255, 255, 255, 0.1); - + h2 { margin: 0; color: white; font-size: 18px; font-weight: 600; } - + .close-btn { background: none; border: none; @@ -241,34 +236,34 @@ padding: $unit-half; border-radius: 4px; transition: all 0.2s; - + :global(svg) { width: 20px; height: 20px; } - + &:hover { color: white; background: rgba(255, 255, 255, 0.1); } } } - + .modal-body { flex: 1; overflow-y: auto; padding: $unit * 2; } - + .search-controls { display: flex; gap: $unit * 2; margin-bottom: $unit * 2; align-items: flex-end; - + .control-group { flex: 1; - + label { display: block; color: rgba(255, 255, 255, 0.8); @@ -276,8 +271,9 @@ font-weight: 500; margin-bottom: $unit-half; } - - input, select { + + input, + select { width: 100%; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); @@ -286,24 +282,24 @@ border-radius: 4px; font-size: 14px; font-family: inherit; - + &::placeholder { color: rgba(255, 255, 255, 0.4); } - + &:focus { outline: none; border-color: $primary-color; background: rgba(255, 255, 255, 0.15); } - + &:disabled { opacity: 0.5; cursor: not-allowed; } } } - + .search-btn { padding: $unit $unit * 2; background: $primary-color; @@ -318,23 +314,23 @@ align-items: center; gap: $unit-half; white-space: nowrap; - + &:hover:not(:disabled) { background: darken($primary-color, 10%); } - + &:disabled { opacity: 0.5; cursor: not-allowed; } - + :global(.icon) { width: 16px; height: 16px; } } } - + .error-message { background: rgba(255, 59, 48, 0.1); border: 1px solid rgba(255, 59, 48, 0.3); @@ -344,16 +340,16 @@ font-size: 13px; margin-bottom: $unit * 2; } - + .response-time { color: rgba(255, 255, 255, 0.6); font-size: 12px; margin-bottom: $unit; } - + .results-section { margin-top: $unit * 2; - + h3 { margin: 0 0 $unit 0; color: #87ceeb; @@ -361,14 +357,14 @@ font-weight: 600; } } - + .result-tabs { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: $unit * 2; - + .tab { padding: $unit $unit * 2; background: none; @@ -379,17 +375,17 @@ font-weight: 500; transition: all 0.2s; border-bottom: 2px solid transparent; - + &:hover { color: rgba(255, 255, 255, 0.8); } - + &.active { color: white; border-bottom-color: $primary-color; } } - + .copy-btn { padding: $unit-half $unit; background: rgba(255, 255, 255, 0.1); @@ -400,7 +396,7 @@ font-weight: 500; cursor: pointer; transition: all 0.2s; - + &:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); @@ -408,14 +404,14 @@ } } } - + .results-content { background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; max-height: 400px; overflow-y: auto; - + pre { margin: 0; padding: $unit * 1.5; @@ -425,11 +421,11 @@ font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace; } } - + :global(.spinning) { animation: spin 1s linear infinite; } - + @keyframes spin { from { transform: rotate(0deg); @@ -438,4 +434,4 @@ transform: rotate(360deg); } } - \ No newline at end of file + diff --git a/src/lib/components/Avatar.svelte b/src/lib/components/Avatar.svelte index d5a982d..a69a0ed 100644 --- a/src/lib/components/Avatar.svelte +++ b/src/lib/components/Avatar.svelte @@ -12,7 +12,6 @@ let isBlinking = $state(false) let isPlayingMusic = $state(forcePlayingMusic) - const scale = new Spring(1, { stiffness: 0.1, damping: 0.125 diff --git a/src/lib/components/DebugPanel.svelte b/src/lib/components/DebugPanel.svelte index 9543a6b..6c82c33 100644 --- a/src/lib/components/DebugPanel.svelte +++ b/src/lib/components/DebugPanel.svelte @@ -3,7 +3,7 @@ import { musicStream } from '$lib/stores/music-stream' import type { Album } from '$lib/types/lastfm' import { toast } from 'svelte-sonner' - + // Import SVG icons import SettingsIcon from '$icons/settings.svg' import CheckIcon from '$icons/check.svg' @@ -20,27 +20,27 @@ let isMinimized = $state(true) let activeTab = $state<'nowplaying' | 'albums' | 'cache'>('nowplaying') - + // Music stream state let albums = $state([]) let nowPlaying = $state<{ album: Album; track?: string } | null>(null) let connected = $state(false) let lastUpdate = $state(null) let updateFlash = $state(false) - + // Expanded album view let expandedAlbumId = $state(null) - + // Update timing let nextUpdateIn = $state(0) let updateInterval = $state(30) // seconds let trackRemainingTime = $state(0) // seconds - + // Cache management let cacheKey = $state('') let isClearing = $state(false) let clearingAlbums = $state(new Set()) - + // Search modal reference let searchModal: AppleMusicSearchModal @@ -49,27 +49,34 @@ const unsubscribe = musicStream.subscribe((state) => { albums = state.albums connected = state.connected - + // Flash indicator when update is received - if (state.lastUpdate && (!lastUpdate || state.lastUpdate.getTime() !== lastUpdate.getTime())) { + if ( + state.lastUpdate && + (!lastUpdate || state.lastUpdate.getTime() !== lastUpdate.getTime()) + ) { updateFlash = true - setTimeout(() => updateFlash = false, 500) + setTimeout(() => (updateFlash = false), 500) } - + lastUpdate = state.lastUpdate - + // Calculate smart interval based on track remaining time - const nowPlayingAlbum = state.albums.find(a => a.isNowPlaying) - if (nowPlayingAlbum?.nowPlayingTrack && nowPlayingAlbum.appleMusicData?.tracks && nowPlayingAlbum.lastScrobbleTime) { + const nowPlayingAlbum = state.albums.find((a) => a.isNowPlaying) + if ( + nowPlayingAlbum?.nowPlayingTrack && + nowPlayingAlbum.appleMusicData?.tracks && + nowPlayingAlbum.lastScrobbleTime + ) { const track = nowPlayingAlbum.appleMusicData.tracks.find( - t => t.name === nowPlayingAlbum.nowPlayingTrack + (t) => t.name === nowPlayingAlbum.nowPlayingTrack ) - + if (track?.durationMs) { const elapsed = Date.now() - new Date(nowPlayingAlbum.lastScrobbleTime).getTime() const remaining = Math.max(0, track.durationMs - elapsed) trackRemainingTime = Math.round(remaining / 1000) - + // Smart interval based on remaining time if (remaining < 20000) { updateInterval = 5 @@ -98,29 +105,29 @@ }) return unsubscribe }) - + // Calculate next update countdown $effect(() => { if (!lastUpdate) { nextUpdateIn = updateInterval return } - + // Calculate initial remaining time const calculateRemaining = () => { const elapsed = Date.now() - lastUpdate.getTime() - const remaining = (updateInterval * 1000) - elapsed + const remaining = updateInterval * 1000 - elapsed return Math.max(0, Math.ceil(remaining / 1000)) } - + // Set initial value nextUpdateIn = calculateRemaining() - + // Update every second const timer = setInterval(() => { nextUpdateIn = calculateRemaining() }, 1000) - + return () => clearInterval(timer) }) @@ -129,7 +136,7 @@ toast.error('Please enter a cache key') return } - + isClearing = true try { const response = await fetch('/api/admin/debug/clear-cache', { @@ -137,7 +144,7 @@ headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: cacheKey }) }) - + if (response.ok) { const result = await response.json() toast.success(`Cleared cache: ${result.deleted} keys deleted`) @@ -152,7 +159,7 @@ isClearing = false } } - + async function clearAllMusicCache() { isClearing = true try { @@ -161,7 +168,7 @@ headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pattern: 'apple:album:*' }) }) - + if (response.ok) { const result = await response.json() toast.success(`Cleared all music cache: ${result.deleted} keys deleted`) @@ -175,11 +182,11 @@ isClearing = false } } - + async function clearAlbumCache(album: Album) { const albumKey = `apple:album:${album.artist.name}:${album.name}` const albumId = `${album.artist.name}:${album.name}` - + clearingAlbums.add(albumId) try { const response = await fetch('/api/admin/debug/clear-cache', { @@ -187,7 +194,7 @@ headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: albumKey }) }) - + if (response.ok) { const result = await response.json() toast.success(`Cleared cache for "${album.name}"`) @@ -213,56 +220,64 @@ {#if dev}
-
isMinimized = !isMinimized}> +
(isMinimized = !isMinimized)}>

Debug Panel

- + {#if !isMinimized}
- - -
- +
{#if activeTab === 'nowplaying'}

Connection

- Status: {#if connected} Connected{:else} Disconnected{/if} + Status: {#if connected} Connected{:else} Disconnected{/if}

Last Update: {lastUpdate ? lastUpdate.toLocaleTimeString() : 'Never'}

Next Update: {formatTime(nextUpdateIn)}

-

Interval: {updateInterval}s {trackRemainingTime > 0 ? `(smart mode)` : nowPlaying ? '(fast mode)' : '(normal)'}

+

+ Interval: {updateInterval}s {trackRemainingTime > 0 + ? `(smart mode)` + : nowPlaying + ? '(fast mode)' + : '(normal)'} +

{#if trackRemainingTime > 0}

Track Remaining: {formatTime(trackRemainingTime)}

{/if}
- +

Now Playing

{#if nowPlaying} @@ -274,7 +289,10 @@ {/if} {#if nowPlaying.album.appleMusicData}

- Preview: {#if nowPlaying.album.appleMusicData.previewUrl} Available{:else} Not found{/if} + Preview: + {#if nowPlaying.album.appleMusicData.previewUrl} Available{:else} Not found{/if}

{/if}
@@ -283,15 +301,23 @@ {/if}
{/if} - + {#if activeTab === 'albums'}

Recent Albums ({albums.length})

{#each albums as album} {@const albumId = `${album.artist.name}:${album.name}`} -
-
expandedAlbumId = expandedAlbumId === albumId ? null : albumId}> +
+
+ (expandedAlbumId = expandedAlbumId === albumId ? null : albumId)} + >
{album.name} @@ -306,16 +332,21 @@ {album.appleMusicData.tracks?.length || 0} tracks - {#if album.appleMusicData.previewUrl} Preview{:else} No preview{/if} + {#if album.appleMusicData.previewUrl} Preview{:else} No preview{/if} {:else} No Apple Music data {/if}
-
- + {#if expandedAlbumId === albumId}
{#if album.appleMusicData} {#if album.appleMusicData.searchMetadata}
Search Information
-

Search Query: {album.appleMusicData.searchMetadata.searchQuery}

-

Search Time: {new Date(album.appleMusicData.searchMetadata.searchTime).toLocaleString()}

-

Status: +

+ Search Query: + {album.appleMusicData.searchMetadata.searchQuery} +

+

+ Search Time: + {new Date( + album.appleMusicData.searchMetadata.searchTime + ).toLocaleString()} +

+

+ Status: {#if album.appleMusicData.searchMetadata.found} Found {:else} @@ -343,59 +383,76 @@ {/if}

{#if album.appleMusicData.searchMetadata.error} -

Error: {album.appleMusicData.searchMetadata.error}

+

+ Error: + {album.appleMusicData.searchMetadata.error} +

{/if}
{/if} - + {#if album.appleMusicData.appleMusicId}
Apple Music Details
-

Apple Music ID: {album.appleMusicData.appleMusicId}

+

+ Apple Music ID: + {album.appleMusicData.appleMusicId} +

{/if} - - {#if album.appleMusicData.releaseDate} -

Release Date: {album.appleMusicData.releaseDate}

- {/if} - - {#if album.appleMusicData.recordLabel} -

Label: {album.appleMusicData.recordLabel}

- {/if} - - {#if album.appleMusicData.genres?.length} -

Genres: {album.appleMusicData.genres.join(', ')}

- {/if} - - {#if album.appleMusicData.previewUrl} -

Preview URL: {album.appleMusicData.previewUrl}

- {/if} - - {#if album.appleMusicData.tracks?.length} -
-
Tracks ({album.appleMusicData.tracks.length})
-
- {#each album.appleMusicData.tracks as track, i} -
- {i + 1}. - {track.name} - {#if track.durationMs} - {Math.floor(track.durationMs / 60000)}:{String(Math.floor((track.durationMs % 60000) / 1000)).padStart(2, '0')} - {/if} - {#if track.previewUrl} - - {/if} -
- {/each} + + {#if album.appleMusicData.releaseDate} +

Release Date: {album.appleMusicData.releaseDate}

+ {/if} + + {#if album.appleMusicData.recordLabel} +

Label: {album.appleMusicData.recordLabel}

+ {/if} + + {#if album.appleMusicData.genres?.length} +

Genres: {album.appleMusicData.genres.join(', ')}

+ {/if} + + {#if album.appleMusicData.previewUrl} +

+ Preview URL: + {album.appleMusicData.previewUrl} +

+ {/if} + + {#if album.appleMusicData.tracks?.length} +
+
Tracks ({album.appleMusicData.tracks.length})
+
+ {#each album.appleMusicData.tracks as track, i} +
+ {i + 1}. + {track.name} + {#if track.durationMs} + {Math.floor(track.durationMs / 60000)}:{String( + Math.floor((track.durationMs % 60000) / 1000) + ).padStart(2, '0')} + {/if} + {#if track.previewUrl} + + {/if} +
+ {/each} +
+ {/if} + +
+
Raw Data
+ 
{JSON.stringify(album.appleMusicData, null, 2)}
- {/if} - -
-
Raw Data
- 
{JSON.stringify(album.appleMusicData, null, 2)}
-
{:else}
No Apple Music Data
-

This album was not searched in Apple Music or the search is pending.

+

+ This album was not searched in Apple Music or the search is pending. +

{/if}
{/if} @@ -404,37 +461,33 @@
{/if} - + {#if activeTab === 'cache'}

Redis Cache Management

- +
- -
- +
- - - - -
- +

Key format: apple:album:ArtistName:AlbumName

Example: apple:album:藤井風:Hachikō

@@ -481,7 +531,7 @@
{/if}
- + {/if} @@ -501,13 +551,13 @@ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); transition: all 0.2s ease; - + &.minimized { width: auto; max-height: auto; } } - + .debug-header { display: flex; justify-content: space-between; @@ -516,13 +566,13 @@ border-bottom: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; user-select: none; - + h3 { margin: 0; font-size: 14px; font-weight: 600; } - + .minimize-btn { background: none; border: none; @@ -532,22 +582,22 @@ padding: 4px 8px; border-radius: 4px; transition: background 0.2s; - + &:hover { background: rgba(255, 255, 255, 0.1); } } } - + .debug-content { overflow-y: auto; max-height: 520px; } - + .tabs { display: flex; border-bottom: 1px solid rgba(255, 255, 255, 0.1); - + .tab { flex: 1; padding: $unit $unit * 2; @@ -558,12 +608,12 @@ font-size: 12px; font-weight: 500; transition: all 0.2s; - + &:hover { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.05); } - + &.active { color: white; background: rgba(255, 255, 255, 0.1); @@ -571,112 +621,112 @@ } } } - + .tab-content { padding: $unit * 2; } - + .section { margin-bottom: $unit * 2; - + &:last-child { margin-bottom: 0; } - + h4 { margin: 0 0 $unit 0; color: #87ceeb; font-size: 13px; font-weight: 600; } - + p { margin: $unit-half 0; line-height: 1.4; } - + .connected { color: #4caf50; } - + .flash { animation: flash 0.5s ease-out; } } - + .now-playing-info { background: rgba(255, 255, 255, 0.05); padding: $unit; border-radius: 6px; - + .artist { font-weight: 600; color: #ffd700; } - + .album { color: #87ceeb; } - + .track { font-size: 11px; color: rgba(255, 255, 255, 0.8); } - + .preview { font-size: 11px; margin-top: $unit; } } - + .no-music { color: rgba(255, 255, 255, 0.5); font-style: italic; } - + .albums-list { display: flex; flex-direction: column; gap: $unit; } - + .album-item { background: rgba(255, 255, 255, 0.05); border-radius: 6px; position: relative; transition: all 0.2s; - + &.playing { background: rgba(76, 175, 80, 0.2); border: 1px solid rgba(76, 175, 80, 0.5); } - + &.expanded { background: rgba(255, 255, 255, 0.08); } - + .album-header { padding: $unit; display: flex; align-items: center; gap: $unit; cursor: pointer; - + &:hover { background: rgba(255, 255, 255, 0.03); } } - + .album-content { flex: 1; min-width: 0; // Allows text truncation } - + .album-info { display: flex; flex-direction: column; gap: 2px; - + .name { font-weight: 600; color: #87ceeb; @@ -684,7 +734,7 @@ text-overflow: ellipsis; white-space: nowrap; } - + .artist { font-size: 11px; color: rgba(255, 255, 255, 0.7); @@ -693,7 +743,7 @@ white-space: nowrap; } } - + .playing-badge { position: absolute; top: $unit; @@ -705,18 +755,18 @@ font-size: 10px; font-weight: 600; } - + .album-meta { display: flex; gap: $unit * 2; margin-top: $unit-half; - + .meta-item { font-size: 10px; color: rgba(255, 255, 255, 0.6); } } - + .clear-cache-btn { flex-shrink: 0; width: 28px; @@ -732,47 +782,47 @@ display: flex; align-items: center; justify-content: center; - + &:hover:not(:disabled) { background: rgba(255, 59, 48, 0.2); border-color: rgba(255, 59, 48, 0.5); } - + &:disabled { opacity: 0.5; cursor: not-allowed; } } - + .album-details { padding: $unit * 2; border-top: 1px solid rgba(255, 255, 255, 0.1); - + h5 { margin: 0 0 $unit 0; color: #87ceeb; font-size: 13px; font-weight: 600; } - + h6 { margin: $unit * 1.5 0 $unit 0; color: #ffd700; font-size: 12px; font-weight: 600; } - + p { margin: $unit-half 0; font-size: 11px; line-height: 1.5; - + strong { color: rgba(255, 255, 255, 0.8); margin-right: $unit-half; } } - + code { background: rgba(255, 255, 255, 0.1); padding: 2px 4px; @@ -780,11 +830,11 @@ font-size: 10px; word-break: break-all; } - + .tracks-section { margin-top: $unit * 2; } - + .tracks-list { background: rgba(0, 0, 0, 0.3); border-radius: 4px; @@ -792,37 +842,37 @@ max-height: 200px; overflow-y: auto; } - + .track-item { display: flex; align-items: center; gap: $unit; padding: $unit-half 0; font-size: 11px; - + &:not(:last-child) { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } - + .track-number { color: rgba(255, 255, 255, 0.5); min-width: 20px; } - + .track-name { flex: 1; color: rgba(255, 255, 255, 0.9); } - + .track-duration { color: rgba(255, 255, 255, 0.6); font-size: 10px; } } - + .raw-data { margin-top: $unit * 2; - + pre { background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); @@ -835,30 +885,30 @@ margin: 0; } } - + .search-metadata { background: rgba(255, 255, 255, 0.05); border-radius: 4px; padding: $unit; margin-bottom: $unit * 2; - + .error-text { color: #ff6b6b; } } - + .no-data { color: rgba(255, 255, 255, 0.6); font-style: italic; } } } - + .cache-controls { display: flex; gap: $unit; margin-bottom: $unit * 2; - + input { flex: 1; background: rgba(255, 255, 255, 0.1); @@ -868,22 +918,22 @@ border-radius: 4px; font-size: 12px; font-family: inherit; - + &::placeholder { color: rgba(255, 255, 255, 0.4); } - + &:focus { outline: none; border-color: $primary-color; background: rgba(255, 255, 255, 0.15); } - + &:disabled { opacity: 0.5; } } - + .clear-btn { padding: $unit $unit * 2; background: $primary-color; @@ -894,25 +944,26 @@ font-weight: 500; cursor: pointer; transition: all 0.2s; - + &:hover:not(:disabled) { background: darken($primary-color, 10%); } - + &:disabled { opacity: 0.5; cursor: not-allowed; } } } - + .cache-actions { margin-bottom: $unit * 2; display: flex; flex-wrap: wrap; gap: $unit; - - .clear-all-btn, .clear-not-found-btn { + + .clear-all-btn, + .clear-not-found-btn { flex: 1; min-width: 140px; padding: $unit * 1.5; @@ -924,29 +975,29 @@ font-weight: 500; cursor: pointer; transition: all 0.2s; - + &:hover:not(:disabled) { background: rgba(255, 59, 48, 0.3); border-color: rgba(255, 59, 48, 0.7); } - + &:disabled { opacity: 0.5; cursor: not-allowed; } } - + .clear-not-found-btn { background: rgba(255, 149, 0, 0.2); border-color: rgba(255, 149, 0, 0.5); color: #ff9500; - + &:hover:not(:disabled) { background: rgba(255, 149, 0, 0.3); border-color: rgba(255, 149, 0, 0.7); } } - + .search-btn { flex: 1; min-width: 140px; @@ -959,24 +1010,24 @@ font-weight: 500; cursor: pointer; transition: all 0.2s; - + &:hover { background: rgba(135, 206, 235, 0.3); border-color: rgba(135, 206, 235, 0.7); } } } - + .cache-help { background: rgba(255, 255, 255, 0.05); padding: $unit; border-radius: 4px; - + p { margin: $unit-half 0; font-size: 11px; color: rgba(255, 255, 255, 0.7); - + code { background: rgba(255, 255, 255, 0.1); padding: 2px 4px; @@ -985,7 +1036,7 @@ } } } - + @keyframes flash { 0% { background: rgba(76, 175, 80, 0.5); @@ -996,31 +1047,31 @@ transform: scale(1); } } - + .debug-panel :global(.icon) { width: 14px; height: 14px; display: inline-block; vertical-align: text-bottom; - + &:global(.success) { color: #4caf50; } - + &:global(.error) { color: #ff6b6b; } - + &:global(.inline) { width: 12px; height: 12px; } - + &:global(.spinning) { animation: spin 1s linear infinite; } } - + @keyframes spin { from { transform: rotate(0deg); @@ -1029,30 +1080,30 @@ transform: rotate(360deg); } } - + .debug-header h3 { text-align: center; flex: 1; margin: 0; } - + .status { display: flex; align-items: center; gap: 4px; - + :global(.status-icon) { margin-left: 4px; } } - + .preview { display: flex; align-items: center; gap: 4px; - + :global(.icon) { margin-left: 4px; } } - \ No newline at end of file + diff --git a/src/lib/components/DynamicPostContent.svelte b/src/lib/components/DynamicPostContent.svelte index 629da73..b796e4f 100644 --- a/src/lib/components/DynamicPostContent.svelte +++ b/src/lib/components/DynamicPostContent.svelte @@ -250,8 +250,8 @@ background: $gray-95; padding: 2px 6px; border-radius: 4px; - font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', - monospace; + font-family: + 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace; font-size: 0.9em; color: $text-color; } diff --git a/src/lib/components/NowPlayingBar.svelte b/src/lib/components/NowPlayingBar.svelte index 2c9d8ac..76f599f 100644 --- a/src/lib/components/NowPlayingBar.svelte +++ b/src/lib/components/NowPlayingBar.svelte @@ -7,12 +7,14 @@ } let { album, getAlbumArtwork }: Props = $props() - - const trackText = $derived(`${album.artist.name} — ${album.name}${ - album.appleMusicData?.releaseDate - ? ` (${new Date(album.appleMusicData.releaseDate).getFullYear()})` - : '' - } — ${album.nowPlayingTrack || album.name}`) + + const trackText = $derived( + `${album.artist.name} — ${album.name}${ + album.appleMusicData?.releaseDate + ? ` (${new Date(album.appleMusicData.releaseDate).getFullYear()})` + : '' + } — ${album.nowPlayingTrack || album.name}` + )
{#if !isLoading} - + {/if}
diff --git a/src/lib/components/admin/AlbumListItem.svelte b/src/lib/components/admin/AlbumListItem.svelte index 1169e01..cd33c87 100644 --- a/src/lib/components/admin/AlbumListItem.svelte +++ b/src/lib/components/admin/AlbumListItem.svelte @@ -38,7 +38,14 @@ ondelete?: (event: CustomEvent<{ album: Album; event: MouseEvent }>) => void } - let { album, isDropdownActive = false, ontoggledropdown, onedit, ontogglepublish, ondelete }: Props = $props() + let { + album, + isDropdownActive = false, + ontoggledropdown, + onedit, + ontogglepublish, + ondelete + }: Props = $props() function formatRelativeTime(dateString: string): string { const date = new Date(dateString) diff --git a/src/lib/components/admin/AutoSaveStatus.svelte b/src/lib/components/admin/AutoSaveStatus.svelte index 5f31252..cfc124b 100644 --- a/src/lib/components/admin/AutoSaveStatus.svelte +++ b/src/lib/components/admin/AutoSaveStatus.svelte @@ -1,117 +1,119 @@ {#if label} -
- {#if status === 'saving'} - - {/if} - {label} -
+
+ {#if status === 'saving'} + + {/if} + {label} +
{/if} diff --git a/src/lib/components/admin/DraftPrompt.svelte b/src/lib/components/admin/DraftPrompt.svelte index 16ce008..79a5e49 100644 --- a/src/lib/components/admin/DraftPrompt.svelte +++ b/src/lib/components/admin/DraftPrompt.svelte @@ -11,7 +11,8 @@
- Unsaved draft found{#if timeAgo} (saved {timeAgo}){/if}. + Unsaved draft found{#if timeAgo} + (saved {timeAgo}){/if}.
diff --git a/src/lib/components/admin/EssayForm.svelte b/src/lib/components/admin/EssayForm.svelte index aac0bc5..0866338 100644 --- a/src/lib/components/admin/EssayForm.svelte +++ b/src/lib/components/admin/EssayForm.svelte @@ -50,43 +50,46 @@ let showDraftPrompt = $state(false) let draftTimestamp = $state(null) let timeTicker = $state(0) - const draftTimeText = $derived.by(() => (draftTimestamp ? (timeTicker, timeAgo(draftTimestamp)) : null)) + const draftTimeText = $derived.by(() => + draftTimestamp ? (timeTicker, timeAgo(draftTimestamp)) : null + ) -function buildPayload() { - return { - title, - slug, - type: 'essay', - status, - content, - tags, - updatedAt - } -} + function buildPayload() { + return { + title, + slug, + type: 'essay', + status, + content, + tags, + updatedAt + } + } -// Autosave store (edit mode only) -let autoSave = mode === 'edit' && postId - ? createAutoSaveStore({ - debounceMs: 2000, - getPayload: () => (hasLoaded ? buildPayload() : null), - save: async (payload, { signal }) => { - const response = await fetch(`/api/posts/${postId}`, { - method: 'PUT', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(payload), - credentials: 'same-origin', - signal + // Autosave store (edit mode only) + let autoSave = + mode === 'edit' && postId + ? createAutoSaveStore({ + debounceMs: 2000, + getPayload: () => (hasLoaded ? buildPayload() : null), + save: async (payload, { signal }) => { + const response = await fetch(`/api/posts/${postId}`, { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(payload), + credentials: 'same-origin', + signal + }) + if (!response.ok) throw new Error('Failed to save') + return await response.json() + }, + onSaved: (saved: any, { prime }) => { + updatedAt = saved.updatedAt + prime(buildPayload()) + if (draftKey) clearDraft(draftKey) + } }) - if (!response.ok) throw new Error('Failed to save') - return await response.json() - }, - onSaved: (saved: any, { prime }) => { - updatedAt = saved.updatedAt - prime(buildPayload()) - if (draftKey) clearDraft(draftKey) - } - }) - : null + : null const tabOptions = [ { value: 'metadata', label: 'Metadata' }, @@ -107,14 +110,14 @@ let autoSave = mode === 'edit' && postId ] // Auto-generate slug from title -$effect(() => { - if (title && !slug) { + $effect(() => { + if (title && !slug) { slug = title .toLowerCase() .replace(/[^a-z0-9]+/g, '-') .replace(/^-+|-+$/g, '') } -}) + }) // Prime autosave on initial load (edit mode only) $effect(() => { @@ -126,7 +129,12 @@ $effect(() => { // Trigger autosave when form data changes $effect(() => { - title; slug; status; content; tags; activeTab + title + slug + status + content + tags + activeTab if (hasLoaded && autoSave) { autoSave.schedule() } @@ -142,14 +150,14 @@ $effect(() => { } }) -// Show restore prompt if a draft exists -$effect(() => { - const draft = loadDraft(draftKey) - if (draft) { - showDraftPrompt = true - draftTimestamp = draft.ts - } -}) + // Show restore prompt if a draft exists + $effect(() => { + const draft = loadDraft(draftKey) + if (draft) { + showDraftPrompt = true + draftTimestamp = draft.ts + } + }) function restoreDraft() { const draft = loadDraft(draftKey) @@ -297,8 +305,8 @@ $effect(() => { const savedPost = await response.json() toast.dismiss(loadingToastId) - toast.success(`Essay ${mode === 'edit' ? 'saved' : 'created'} successfully!`) - clearDraft(draftKey) + toast.success(`Essay ${mode === 'edit' ? 'saved' : 'created'} successfully!`) + clearDraft(draftKey) if (mode === 'create') { goto(`/admin/posts/${savedPost.id}/edit`) @@ -311,7 +319,6 @@ $effect(() => { isSaving = false } } - @@ -341,7 +348,8 @@ $effect(() => {
- Unsaved draft found{#if draftTimeText} (saved {draftTimeText}){/if}. + Unsaved draft found{#if draftTimeText} + (saved {draftTimeText}){/if}.
@@ -381,11 +389,7 @@ $effect(() => { - +
diff --git a/src/lib/components/admin/InlineComposerModal.svelte b/src/lib/components/admin/InlineComposerModal.svelte index cc67de0..1f0af75 100644 --- a/src/lib/components/admin/InlineComposerModal.svelte +++ b/src/lib/components/admin/InlineComposerModal.svelte @@ -236,7 +236,7 @@ const isOverLimit = $derived(characterCount > CHARACTER_LIMIT) const canSave = $derived( (postType === 'post' && (characterCount > 0 || attachedPhotos.length > 0) && !isOverLimit) || - (postType === 'essay' && essayTitle.length > 0 && content) + (postType === 'essay' && essayTitle.length > 0 && content) ) diff --git a/src/lib/components/admin/MediaGrid.svelte b/src/lib/components/admin/MediaGrid.svelte index 0af3846..a01f667 100644 --- a/src/lib/components/admin/MediaGrid.svelte +++ b/src/lib/components/admin/MediaGrid.svelte @@ -90,8 +90,8 @@ {:else if isVideoFile(item.mimeType)} {#if item.thumbnailUrl}
- {item.filename} import Button from './Button.svelte' - import { formatFileSize, getFileType, isVideoFile, formatDuration, formatBitrate } from '$lib/utils/mediaHelpers' + import { + formatFileSize, + getFileType, + isVideoFile, + formatDuration, + formatBitrate + } from '$lib/utils/mediaHelpers' import type { Media } from '@prisma/client' interface Props { diff --git a/src/lib/components/admin/PhotoPostForm.svelte b/src/lib/components/admin/PhotoPostForm.svelte index 9584039..14fdd49 100644 --- a/src/lib/components/admin/PhotoPostForm.svelte +++ b/src/lib/components/admin/PhotoPostForm.svelte @@ -47,49 +47,52 @@ let showDraftPrompt = $state(false) let draftTimestamp = $state(null) let timeTicker = $state(0) - const draftTimeText = $derived.by(() => (draftTimestamp ? (timeTicker, timeAgo(draftTimestamp)) : null)) + const draftTimeText = $derived.by(() => + draftTimestamp ? (timeTicker, timeAgo(draftTimestamp)) : null + ) -function buildPayload() { - return { - title: title.trim(), - slug: createSlug(title), - type: 'photo', - status, - content, - featuredImage: featuredImage ? featuredImage.url : null, - tags: tags - ? tags - .split(',') - .map((tag) => tag.trim()) - .filter(Boolean) - : [], - updatedAt - } -} + function buildPayload() { + return { + title: title.trim(), + slug: createSlug(title), + type: 'photo', + status, + content, + featuredImage: featuredImage ? featuredImage.url : null, + tags: tags + ? tags + .split(',') + .map((tag) => tag.trim()) + .filter(Boolean) + : [], + updatedAt + } + } -// Autosave store (edit mode only) -let autoSave = mode === 'edit' && postId - ? createAutoSaveStore({ - debounceMs: 2000, - getPayload: () => (hasLoaded ? buildPayload() : null), - save: async (payload, { signal }) => { - const response = await fetch(`/api/posts/${postId}`, { - method: 'PUT', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(payload), - credentials: 'same-origin', - signal + // Autosave store (edit mode only) + let autoSave = + mode === 'edit' && postId + ? createAutoSaveStore({ + debounceMs: 2000, + getPayload: () => (hasLoaded ? buildPayload() : null), + save: async (payload, { signal }) => { + const response = await fetch(`/api/posts/${postId}`, { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(payload), + credentials: 'same-origin', + signal + }) + if (!response.ok) throw new Error('Failed to save') + return await response.json() + }, + onSaved: (saved: any, { prime }) => { + updatedAt = saved.updatedAt + prime(buildPayload()) + if (draftKey) clearDraft(draftKey) + } }) - if (!response.ok) throw new Error('Failed to save') - return await response.json() - }, - onSaved: (saved: any, { prime }) => { - updatedAt = saved.updatedAt - prime(buildPayload()) - if (draftKey) clearDraft(draftKey) - } - }) - : null + : null // Prime autosave on initial load (edit mode only) $effect(() => { @@ -101,7 +104,11 @@ let autoSave = mode === 'edit' && postId // Trigger autosave when form data changes $effect(() => { - title; status; content; featuredImage; tags + title + status + content + featuredImage + tags if (hasLoaded && autoSave) { autoSave.schedule() } @@ -117,13 +124,13 @@ let autoSave = mode === 'edit' && postId } }) -$effect(() => { - const draft = loadDraft(draftKey) - if (draft) { - showDraftPrompt = true - draftTimestamp = draft.ts - } -}) + $effect(() => { + const draft = loadDraft(draftKey) + if (draft) { + showDraftPrompt = true + draftTimestamp = draft.ts + } + }) function restoreDraft() { const draft = loadDraft(draftKey) @@ -330,11 +337,11 @@ $effect(() => { throw new Error(`Failed to ${mode === 'edit' ? 'update' : 'create'} photo post`) } - const savedPost = await response.json() + const savedPost = await response.json() - toast.dismiss(loadingToastId) - toast.success(`Photo post ${status === 'published' ? 'published' : 'saved'} successfully!`) - clearDraft(draftKey) + toast.dismiss(loadingToastId) + toast.success(`Photo post ${status === 'published' ? 'published' : 'saved'} successfully!`) + clearDraft(draftKey) // Redirect to posts list or edit page if (mode === 'create') { @@ -397,7 +404,8 @@ $effect(() => {
- Unsaved draft found{#if draftTimeText} (saved {draftTimeText}){/if}. + Unsaved draft found{#if draftTimeText} + (saved {draftTimeText}){/if}.
diff --git a/src/lib/components/admin/PostDropdown.svelte b/src/lib/components/admin/PostDropdown.svelte index 5d87131..5cf0fe7 100644 --- a/src/lib/components/admin/PostDropdown.svelte +++ b/src/lib/components/admin/PostDropdown.svelte @@ -43,7 +43,11 @@ } -
+
+ diff --git a/src/lib/components/admin/ProjectBrandingForm.svelte b/src/lib/components/admin/ProjectBrandingForm.svelte index 59a21c6..891c56b 100644 --- a/src/lib/components/admin/ProjectBrandingForm.svelte +++ b/src/lib/components/admin/ProjectBrandingForm.svelte @@ -81,7 +81,9 @@ const hasFeaturedImage = $derived( !!(formData.featuredImage && featuredImageMedia) || !!featuredImageMedia ) - const hasBackgroundColor = $derived(!!(formData.backgroundColor && formData.backgroundColor?.trim())) + const hasBackgroundColor = $derived( + !!(formData.backgroundColor && formData.backgroundColor?.trim()) + ) const hasLogo = $derived(!!(formData.logoUrl && logoMedia) || !!logoMedia) // Auto-disable toggles when content is removed diff --git a/src/lib/components/admin/ProjectForm.svelte b/src/lib/components/admin/ProjectForm.svelte index 27cbbda..9683d7f 100644 --- a/src/lib/components/admin/ProjectForm.svelte +++ b/src/lib/components/admin/ProjectForm.svelte @@ -43,21 +43,22 @@ const draftKey = $derived(mode === 'edit' && project ? makeDraftKey('project', project.id) : null) // Autosave (edit mode only) - const autoSave = mode === 'edit' - ? createAutoSaveStore({ - debounceMs: 2000, - getPayload: () => (hasLoaded ? formStore.buildPayload() : null), - save: async (payload, { signal }) => { - return await api.put(`/api/projects/${project?.id}`, payload, { signal }) - }, - onSaved: (savedProject: any, { prime }) => { - project = savedProject - formStore.populateFromProject(savedProject) - prime(formStore.buildPayload()) - if (draftKey) clearDraft(draftKey) - } - }) - : null + const autoSave = + mode === 'edit' + ? createAutoSaveStore({ + debounceMs: 2000, + getPayload: () => (hasLoaded ? formStore.buildPayload() : null), + save: async (payload, { signal }) => { + return await api.put(`/api/projects/${project?.id}`, payload, { signal }) + }, + onSaved: (savedProject: any, { prime }) => { + project = savedProject + formStore.populateFromProject(savedProject) + prime(formStore.buildPayload()) + if (draftKey) clearDraft(draftKey) + } + }) + : null // Draft recovery helper const draftRecovery = useDraftRecovery>({ @@ -89,7 +90,8 @@ // Trigger autosave when formData changes (edit mode) $effect(() => { // Establish dependencies on fields - formStore.fields; activeTab + formStore.fields + activeTab if (mode === 'edit' && hasLoaded && autoSave) { autoSave.schedule() } @@ -143,9 +145,9 @@ let savedProject: Project if (mode === 'edit') { - savedProject = await api.put(`/api/projects/${project?.id}`, payload) as Project + savedProject = (await api.put(`/api/projects/${project?.id}`, payload)) as Project } else { - savedProject = await api.post('/api/projects', payload) as Project + savedProject = (await api.post('/api/projects', payload)) as Project } toast.dismiss(loadingToastId) @@ -168,8 +170,6 @@ isSaving = false } } - - @@ -225,7 +225,11 @@ handleSave() }} > - +
@@ -239,7 +243,11 @@ handleSave() }} > - +
diff --git a/src/lib/components/admin/ProjectListItem.svelte b/src/lib/components/admin/ProjectListItem.svelte index c7f1cde..75c42cc 100644 --- a/src/lib/components/admin/ProjectListItem.svelte +++ b/src/lib/components/admin/ProjectListItem.svelte @@ -131,9 +131,7 @@ {#if isDropdownOpen}
- + diff --git a/src/lib/components/admin/SimplePostForm.svelte b/src/lib/components/admin/SimplePostForm.svelte index 6a5c8f0..2e96155 100644 --- a/src/lib/components/admin/SimplePostForm.svelte +++ b/src/lib/components/admin/SimplePostForm.svelte @@ -24,7 +24,7 @@ mode: 'create' | 'edit' } -let { postType, postId, initialData, mode }: Props = $props() + let { postType, postId, initialData, mode }: Props = $props() // State let isSaving = $state(false) @@ -38,7 +38,7 @@ let { postType, postId, initialData, mode }: Props = $props() let linkDescription = $state(initialData?.linkDescription || '') let title = $state(initialData?.title || '') -// Character count for posts + // Character count for posts const maxLength = 280 const textContent = $derived.by(() => { if (!content.content) return '' @@ -50,178 +50,185 @@ let { postType, postId, initialData, mode }: Props = $props() const isOverLimit = $derived(charCount > maxLength) // Check if form has content -const hasContent = $derived.by(() => { + const hasContent = $derived.by(() => { // For posts, check if either content exists or it's a link with URL const hasTextContent = textContent.trim().length > 0 const hasLinkContent = linkUrl && linkUrl.trim().length > 0 return hasTextContent || hasLinkContent -}) + }) -// Draft backup -const draftKey = $derived(makeDraftKey('post', postId ?? 'new')) -let showDraftPrompt = $state(false) -let draftTimestamp = $state(null) -let timeTicker = $state(0) -const draftTimeText = $derived.by(() => (draftTimestamp ? (timeTicker, timeAgo(draftTimestamp)) : null)) + // Draft backup + const draftKey = $derived(makeDraftKey('post', postId ?? 'new')) + let showDraftPrompt = $state(false) + let draftTimestamp = $state(null) + let timeTicker = $state(0) + const draftTimeText = $derived.by(() => + draftTimestamp ? (timeTicker, timeAgo(draftTimestamp)) : null + ) -function buildPayload() { - const payload: any = { - type: 'post', - status, - content, - updatedAt - } - if (linkUrl && linkUrl.trim()) { - payload.title = title || linkUrl - payload.link_url = linkUrl - payload.linkDescription = linkDescription - } else if (title) { - payload.title = title - } - return payload -} + function buildPayload() { + const payload: any = { + type: 'post', + status, + content, + updatedAt + } + if (linkUrl && linkUrl.trim()) { + payload.title = title || linkUrl + payload.link_url = linkUrl + payload.linkDescription = linkDescription + } else if (title) { + payload.title = title + } + return payload + } -// Autosave store (edit mode only) -let autoSave = mode === 'edit' && postId - ? createAutoSaveStore({ - debounceMs: 2000, - getPayload: () => (hasLoaded ? buildPayload() : null), - save: async (payload, { signal }) => { - const response = await fetch(`/api/posts/${postId}`, { - method: 'PUT', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(payload), - credentials: 'same-origin', - signal + // Autosave store (edit mode only) + let autoSave = + mode === 'edit' && postId + ? createAutoSaveStore({ + debounceMs: 2000, + getPayload: () => (hasLoaded ? buildPayload() : null), + save: async (payload, { signal }) => { + const response = await fetch(`/api/posts/${postId}`, { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(payload), + credentials: 'same-origin', + signal + }) + if (!response.ok) throw new Error('Failed to save') + return await response.json() + }, + onSaved: (saved: any, { prime }) => { + updatedAt = saved.updatedAt + prime(buildPayload()) + if (draftKey) clearDraft(draftKey) + } }) - if (!response.ok) throw new Error('Failed to save') - return await response.json() - }, - onSaved: (saved: any, { prime }) => { - updatedAt = saved.updatedAt - prime(buildPayload()) - if (draftKey) clearDraft(draftKey) + : null + + // Prime autosave on initial load (edit mode only) + $effect(() => { + if (mode === 'edit' && initialData && !hasLoaded && autoSave) { + autoSave.prime(buildPayload()) + hasLoaded = true + } + }) + + // Trigger autosave when form data changes + $effect(() => { + status + content + linkUrl + linkDescription + title + if (hasLoaded && autoSave) { + autoSave.schedule() + } + }) + + // Save draft only when autosave fails + $effect(() => { + if (hasLoaded && autoSave) { + const saveStatus = autoSave.status + if (saveStatus === 'error' || saveStatus === 'offline') { + saveDraft(draftKey, buildPayload()) } - }) - : null - -// Prime autosave on initial load (edit mode only) -$effect(() => { - if (mode === 'edit' && initialData && !hasLoaded && autoSave) { - autoSave.prime(buildPayload()) - hasLoaded = true - } -}) - -// Trigger autosave when form data changes -$effect(() => { - status; content; linkUrl; linkDescription; title - if (hasLoaded && autoSave) { - autoSave.schedule() - } -}) - -// Save draft only when autosave fails -$effect(() => { - if (hasLoaded && autoSave) { - const saveStatus = autoSave.status - if (saveStatus === 'error' || saveStatus === 'offline') { - saveDraft(draftKey, buildPayload()) } - } -}) + }) -$effect(() => { - const draft = loadDraft(draftKey) - if (draft) { - showDraftPrompt = true - draftTimestamp = draft.ts - } -}) - -function restoreDraft() { - const draft = loadDraft(draftKey) - if (!draft) return - const p = draft.payload - status = p.status ?? status - content = p.content ?? content - if (p.link_url) { - linkUrl = p.link_url - linkDescription = p.linkDescription ?? linkDescription - title = p.title ?? title - } else { - title = p.title ?? title - } - showDraftPrompt = false - clearDraft(draftKey) -} - -function dismissDraft() { - showDraftPrompt = false - clearDraft(draftKey) -} - -// Auto-update draft time text every minute when prompt visible -$effect(() => { - if (showDraftPrompt) { - const id = setInterval(() => (timeTicker = timeTicker + 1), 60000) - return () => clearInterval(id) - } -}) - -// Navigation guard: flush autosave before navigating away (only if unsaved) -beforeNavigate(async (navigation) => { - if (hasLoaded && autoSave) { - if (autoSave.status === 'saved') { - return + $effect(() => { + const draft = loadDraft(draftKey) + if (draft) { + showDraftPrompt = true + draftTimestamp = draft.ts } - // Flush any pending changes before allowing navigation to proceed - try { - await autoSave.flush() - } catch (error) { - console.error('Autosave flush failed:', error) - } - } -}) + }) -// Warn before closing browser tab/window if there are unsaved changes -$effect(() => { - if (!hasLoaded || !autoSave) return - - function handleBeforeUnload(event: BeforeUnloadEvent) { - if (autoSave!.status !== 'saved') { - event.preventDefault() - event.returnValue = '' + function restoreDraft() { + const draft = loadDraft(draftKey) + if (!draft) return + const p = draft.payload + status = p.status ?? status + content = p.content ?? content + if (p.link_url) { + linkUrl = p.link_url + linkDescription = p.linkDescription ?? linkDescription + title = p.title ?? title + } else { + title = p.title ?? title } + showDraftPrompt = false + clearDraft(draftKey) } - window.addEventListener('beforeunload', handleBeforeUnload) - return () => window.removeEventListener('beforeunload', handleBeforeUnload) -}) + function dismissDraft() { + showDraftPrompt = false + clearDraft(draftKey) + } -// Keyboard shortcut: Cmd/Ctrl+S to save immediately -$effect(() => { - if (!hasLoaded || !autoSave) return + // Auto-update draft time text every minute when prompt visible + $effect(() => { + if (showDraftPrompt) { + const id = setInterval(() => (timeTicker = timeTicker + 1), 60000) + return () => clearInterval(id) + } + }) - function handleKeydown(e: KeyboardEvent) { - if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') { - e.preventDefault() - autoSave!.flush().catch((error) => { + // Navigation guard: flush autosave before navigating away (only if unsaved) + beforeNavigate(async (navigation) => { + if (hasLoaded && autoSave) { + if (autoSave.status === 'saved') { + return + } + // Flush any pending changes before allowing navigation to proceed + try { + await autoSave.flush() + } catch (error) { console.error('Autosave flush failed:', error) - }) + } } - } + }) - document.addEventListener('keydown', handleKeydown) - return () => document.removeEventListener('keydown', handleKeydown) -}) + // Warn before closing browser tab/window if there are unsaved changes + $effect(() => { + if (!hasLoaded || !autoSave) return -// Cleanup autosave on unmount -$effect(() => { - if (autoSave) { - return () => autoSave.destroy() - } -}) + function handleBeforeUnload(event: BeforeUnloadEvent) { + if (autoSave!.status !== 'saved') { + event.preventDefault() + event.returnValue = '' + } + } + + window.addEventListener('beforeunload', handleBeforeUnload) + return () => window.removeEventListener('beforeunload', handleBeforeUnload) + }) + + // Keyboard shortcut: Cmd/Ctrl+S to save immediately + $effect(() => { + if (!hasLoaded || !autoSave) return + + function handleKeydown(e: KeyboardEvent) { + if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') { + e.preventDefault() + autoSave!.flush().catch((error) => { + console.error('Autosave flush failed:', error) + }) + } + } + + document.addEventListener('keydown', handleKeydown) + return () => document.removeEventListener('keydown', handleKeydown) + }) + + // Cleanup autosave on unmount + $effect(() => { + if (autoSave) { + return () => autoSave.destroy() + } + }) async function handleSave(publishStatus: 'draft' | 'published') { if (isOverLimit) { @@ -275,11 +282,11 @@ $effect(() => { throw new Error(`Failed to ${mode === 'edit' ? 'save' : 'create'} post`) } - const savedPost = await response.json() + const savedPost = await response.json() - toast.dismiss(loadingToastId) - toast.success(`Post ${publishStatus === 'published' ? 'published' : 'saved'} successfully!`) - clearDraft(draftKey) + toast.dismiss(loadingToastId) + toast.success(`Post ${publishStatus === 'published' ? 'published' : 'saved'} successfully!`) + clearDraft(draftKey) // Redirect back to posts list after creation goto('/admin/posts') @@ -336,7 +343,8 @@ $effect(() => {
- Unsaved draft found{#if draftTimeText} (saved {draftTimeText}){/if}. + Unsaved draft found{#if draftTimeText} + (saved {draftTimeText}){/if}.
diff --git a/src/lib/components/admin/StatusPicker.svelte b/src/lib/components/admin/StatusPicker.svelte index 5b715c8..26e1fe4 100644 --- a/src/lib/components/admin/StatusPicker.svelte +++ b/src/lib/components/admin/StatusPicker.svelte @@ -66,14 +66,7 @@ > {currentConfig.label} - +
- + View on site {/if} diff --git a/src/lib/components/admin/UnifiedMediaModal.svelte b/src/lib/components/admin/UnifiedMediaModal.svelte index 36c670a..8218f3f 100644 --- a/src/lib/components/admin/UnifiedMediaModal.svelte +++ b/src/lib/components/admin/UnifiedMediaModal.svelte @@ -225,7 +225,6 @@ // Short delay to prevent flicker await new Promise((resolve) => setTimeout(resolve, 500)) - let url = `/api/media?page=${page}&limit=24` if (filterType !== 'all') { diff --git a/src/lib/components/edra/drag-handle.svelte b/src/lib/components/edra/drag-handle.svelte index 51ef757..8f7c9d6 100644 --- a/src/lib/components/edra/drag-handle.svelte +++ b/src/lib/components/edra/drag-handle.svelte @@ -350,7 +350,7 @@ if (!nodeToUse) return const { node, pos } = nodeToUse - + // Create a copy of the node const nodeCopy = node.toJSON() @@ -358,27 +358,24 @@ // We need to find the actual position of the node in the document const resolvedPos = editor.state.doc.resolve(pos) let nodePos = pos - + // If we're inside a node, get the position before it if (resolvedPos.depth > 0) { nodePos = resolvedPos.before(resolvedPos.depth) } - + // Get the actual node at this position const actualNode = editor.state.doc.nodeAt(nodePos) if (!actualNode) { console.error('Could not find node at position', nodePos) return } - + // Calculate the position after the node const afterPos = nodePos + actualNode.nodeSize // Insert the duplicated node - editor.chain() - .focus() - .insertContentAt(afterPos, nodeCopy) - .run() + editor.chain().focus().insertContentAt(afterPos, nodeCopy).run() isMenuOpen = false } @@ -388,23 +385,23 @@ if (!nodeToUse) return const { node, pos } = nodeToUse - + // Find the actual position of the node const resolvedPos = editor.state.doc.resolve(pos) let nodePos = pos - + // If we're inside a node, get the position before it if (resolvedPos.depth > 0) { nodePos = resolvedPos.before(resolvedPos.depth) } - + // Get the actual node at this position const actualNode = editor.state.doc.nodeAt(nodePos) if (!actualNode) { console.error('Could not find node at position', nodePos) return } - + const nodeEnd = nodePos + actualNode.nodeSize // Set selection to the entire block @@ -413,7 +410,7 @@ // Execute copy command setTimeout(() => { const success = document.execCommand('copy') - + // Clear selection after copy editor.chain().focus().setTextSelection(nodeEnd).run() diff --git a/src/lib/server/admin/authenticated-fetch.ts b/src/lib/server/admin/authenticated-fetch.ts index 5954234..3efb3c5 100644 --- a/src/lib/server/admin/authenticated-fetch.ts +++ b/src/lib/server/admin/authenticated-fetch.ts @@ -33,7 +33,10 @@ export async function adminFetch( let detail: string | undefined try { const json = await response.clone().json() - detail = typeof json === 'object' && json !== null && 'error' in json ? String(json.error) : undefined + detail = + typeof json === 'object' && json !== null && 'error' in json + ? String(json.error) + : undefined } catch { try { detail = await response.clone().text() diff --git a/src/lib/server/apple-music-client.ts b/src/lib/server/apple-music-client.ts index 54a0791..f06de01 100644 --- a/src/lib/server/apple-music-client.ts +++ b/src/lib/server/apple-music-client.ts @@ -166,7 +166,7 @@ function containsJapanese(str: string): boolean { // Helper function to search for an album by artist and album name export async function findAlbum(artist: string, album: string): Promise { const identifier = `${artist}:${album}` - + logger.music('info', `=== SEARCHING FOR ALBUM: "${album}" by "${artist}" ===`) // Check if this album was already marked as not found @@ -326,66 +326,74 @@ export async function findAlbum(artist: string, album: string): Promise { - logger.music('debug', `Song ${index + 1}: "${s.attributes?.name}" by "${s.attributes?.artistName}" on "${s.attributes?.albumName}"`) + logger.music( + 'debug', + `Song ${index + 1}: "${s.attributes?.name}" by "${s.attributes?.artistName}" on "${s.attributes?.albumName}"` + ) }) - + // Find matching song - const matchingSong = songs.find(s => { + const matchingSong = songs.find((s) => { const songName = s.attributes?.name || '' const artistName = s.attributes?.artistName || '' const albumName = s.attributes?.albumName || '' - + // For single/track searches, the "album" parameter from Last.fm might actually be the track name // Check if this is our song by comparing against the track name const songNameLower = songName.toLowerCase() const albumSearchLower = album.toLowerCase() const artistNameLower = artistName.toLowerCase() const artistSearchLower = artist.toLowerCase() - + // Check if the song name matches what we're looking for - const songMatches = songNameLower === albumSearchLower || + const songMatches = + songNameLower === albumSearchLower || songNameLower.includes(albumSearchLower) || albumSearchLower.includes(songNameLower) - + // Check if the artist matches (handle spaces in Japanese names) const artistNameNormalized = artistNameLower.replace(/\s+/g, '') const artistSearchNormalized = artistSearchLower.replace(/\s+/g, '') - - const artistMatches = artistNameLower === artistSearchLower || + + const artistMatches = + artistNameLower === artistSearchLower || artistNameNormalized === artistSearchNormalized || artistNameLower.includes(artistSearchLower) || artistSearchLower.includes(artistNameLower) || artistNameNormalized.includes(artistSearchNormalized) || artistSearchNormalized.includes(artistNameNormalized) - + if (songMatches && artistMatches) { - logger.music('debug', `Found matching song: "${songName}" by "${artistName}" on album "${albumName}"`) + logger.music( + 'debug', + `Found matching song: "${songName}" by "${artistName}" on album "${albumName}"` + ) return true } - + return false }) - + if (matchingSong) { // Get the album info from the song const albumName = matchingSong.attributes?.albumName if (albumName) { logger.music('debug', `Found as single/song, searching for album: "${albumName}"`) - + // Search for the actual album const albumResponse = await searchAlbums(`${artist} ${albumName}`, 5, storefront) if (albumResponse.results?.albums?.data?.length) { @@ -395,9 +403,12 @@ export async function findAlbum(artist: string, album: string): Promise = new Map([ - ['lastfm-recent', { prefix: 'lastfm:recent:', defaultTTL: 30, description: 'Last.fm recent tracks' }], - ['lastfm-album', { prefix: 'lastfm:albuminfo:', defaultTTL: 3600, description: 'Last.fm album info' }], - ['apple-album', { prefix: 'apple:album:', defaultTTL: 86400, description: 'Apple Music album data' }], - ['apple-notfound', { prefix: 'notfound:apple-music:', defaultTTL: 3600, description: 'Apple Music not found records' }], - ['apple-failure', { prefix: 'failure:apple-music:', defaultTTL: 86400, description: 'Apple Music API failures' }], - ['apple-ratelimit', { prefix: 'ratelimit:apple-music:', defaultTTL: 3600, description: 'Apple Music rate limit state' }] + [ + 'lastfm-recent', + { prefix: 'lastfm:recent:', defaultTTL: 30, description: 'Last.fm recent tracks' } + ], + [ + 'lastfm-album', + { prefix: 'lastfm:albuminfo:', defaultTTL: 3600, description: 'Last.fm album info' } + ], + [ + 'apple-album', + { prefix: 'apple:album:', defaultTTL: 86400, description: 'Apple Music album data' } + ], + [ + 'apple-notfound', + { + prefix: 'notfound:apple-music:', + defaultTTL: 3600, + description: 'Apple Music not found records' + } + ], + [ + 'apple-failure', + { prefix: 'failure:apple-music:', defaultTTL: 86400, description: 'Apple Music API failures' } + ], + [ + 'apple-ratelimit', + { + prefix: 'ratelimit:apple-music:', + defaultTTL: 3600, + description: 'Apple Music rate limit state' + } + ] ]) /** @@ -43,7 +69,7 @@ export class CacheManager { const fullKey = `${config.prefix}${key}` const expiry = ttl || config.defaultTTL - + await redis.set(fullKey, value, 'EX', expiry) logger.music('debug', `Cached ${type} for key: ${key} (TTL: ${expiry}s)`) } @@ -75,9 +101,9 @@ export class CacheManager { const pattern = `${config.prefix}*` const keys = await redis.keys(pattern) - + if (keys.length === 0) return 0 - + const deleted = await redis.del(...keys) logger.music('info', `Cleared ${deleted} entries from ${type} cache`) return deleted @@ -95,9 +121,9 @@ export class CacheManager { const searchPattern = `${config.prefix}*${pattern}*` const keys = await redis.keys(searchPattern) - + if (keys.length === 0) return 0 - + const deleted = await redis.del(...keys) logger.music('info', `Cleared ${deleted} entries matching "${pattern}" from ${type} cache`) return deleted @@ -118,7 +144,10 @@ export class CacheManager { } } - logger.music('info', `Cleared ${totalDeleted} cache entries for album "${album}" by "${artist}"`) + logger.music( + 'info', + `Cleared ${totalDeleted} cache entries for album "${album}" by "${artist}"` + ) return totalDeleted } @@ -134,7 +163,7 @@ export class CacheManager { */ static async getStats(): Promise> { const stats = [] - + for (const [type, config] of this.cacheTypes) { const keys = await redis.keys(`${config.prefix}*`) stats.push({ @@ -143,7 +172,7 @@ export class CacheManager { description: config.description }) } - + return stats } } @@ -152,14 +181,21 @@ export class CacheManager { export const cache = { lastfm: { getRecent: (username: string) => CacheManager.get('lastfm-recent', username), - setRecent: (username: string, data: string) => CacheManager.set('lastfm-recent', username, data), - getAlbum: (artist: string, album: string) => CacheManager.get('lastfm-album', `${artist}:${album}`), - setAlbum: (artist: string, album: string, data: string) => CacheManager.set('lastfm-album', `${artist}:${album}`, data) + setRecent: (username: string, data: string) => + CacheManager.set('lastfm-recent', username, data), + getAlbum: (artist: string, album: string) => + CacheManager.get('lastfm-album', `${artist}:${album}`), + setAlbum: (artist: string, album: string, data: string) => + CacheManager.set('lastfm-album', `${artist}:${album}`, data) }, apple: { - getAlbum: (artist: string, album: string) => CacheManager.get('apple-album', `${artist}:${album}`), - setAlbum: (artist: string, album: string, data: string, ttl?: number) => CacheManager.set('apple-album', `${artist}:${album}`, data, ttl), - isNotFound: (artist: string, album: string) => CacheManager.get('apple-notfound', `${artist}:${album}`), - markNotFound: (artist: string, album: string, ttl?: number) => CacheManager.set('apple-notfound', `${artist}:${album}`, '1', ttl) + getAlbum: (artist: string, album: string) => + CacheManager.get('apple-album', `${artist}:${album}`), + setAlbum: (artist: string, album: string, data: string, ttl?: number) => + CacheManager.set('apple-album', `${artist}:${album}`, data, ttl), + isNotFound: (artist: string, album: string) => + CacheManager.get('apple-notfound', `${artist}:${album}`), + markNotFound: (artist: string, album: string, ttl?: number) => + CacheManager.set('apple-notfound', `${artist}:${album}`, '1', ttl) } -} \ No newline at end of file +} diff --git a/src/lib/server/cloudinary.ts b/src/lib/server/cloudinary.ts index f7ed2ae..32e9e1a 100644 --- a/src/lib/server/cloudinary.ts +++ b/src/lib/server/cloudinary.ts @@ -165,19 +165,19 @@ export async function uploadFile( // Generate thumbnail URL - different approach for videos vs images const isVideo = file.type.startsWith('video/') - const thumbnailUrl = isVideo + const thumbnailUrl = isVideo ? cloudinary.url(result.public_id + '.jpg', { - resource_type: 'video', - transformation: [ - { width: 1920, crop: 'scale', quality: 'auto:good' }, // 'scale' maintains aspect ratio - { start_offset: 'auto' } // Let Cloudinary pick the most interesting frame - ], - secure: true - }) + resource_type: 'video', + transformation: [ + { width: 1920, crop: 'scale', quality: 'auto:good' }, // 'scale' maintains aspect ratio + { start_offset: 'auto' } // Let Cloudinary pick the most interesting frame + ], + secure: true + }) : cloudinary.url(result.public_id, { - ...imageSizes.thumbnail, - secure: true - }) + ...imageSizes.thumbnail, + secure: true + }) // Extract dominant color using smart selection let dominantColor: string | undefined @@ -192,13 +192,13 @@ export async function uploadFile( // Calculate aspect ratio const aspectRatio = result.width && result.height ? result.width / result.height : undefined - + // Extract video metadata if present let duration: number | undefined let videoCodec: string | undefined let audioCodec: string | undefined let bitrate: number | undefined - + if (isVideo && result.duration) { duration = result.duration videoCodec = result.video?.codec diff --git a/src/lib/server/local-storage.ts b/src/lib/server/local-storage.ts index 499b80f..e360877 100644 --- a/src/lib/server/local-storage.ts +++ b/src/lib/server/local-storage.ts @@ -95,26 +95,26 @@ export async function uploadFileLocally( } // Extract video metadata - const videoStream = metadata.streams.find(s => s.codec_type === 'video') - const audioStream = metadata.streams.find(s => s.codec_type === 'audio') - + const videoStream = metadata.streams.find((s) => s.codec_type === 'video') + const audioStream = metadata.streams.find((s) => s.codec_type === 'audio') + if (videoStream) { width = videoStream.width || 0 height = videoStream.height || 0 videoCodec = videoStream.codec_name } - + if (audioStream) { audioCodec = audioStream.codec_name } - + duration = metadata.format.duration bitrate = metadata.format.bit_rate ? parseInt(metadata.format.bit_rate) : undefined // Generate thumbnail ffmpeg(filepath) .on('end', () => { - logger.info('Video thumbnail generated', { + logger.info('Video thumbnail generated', { filename: thumbnailFilename, duration, videoCodec, @@ -166,7 +166,7 @@ export async function uploadFileLocally( // Construct URLs const url = `${PUBLIC_PATH}/${type}/${filename}` - const thumbnailUrl = existsSync(thumbnailPath) + const thumbnailUrl = existsSync(thumbnailPath) ? `${PUBLIC_PATH}/thumbnails/${thumbnailFilename}` : null diff --git a/src/lib/stores/music-stream.ts b/src/lib/stores/music-stream.ts index 388bc61..9d5fc13 100644 --- a/src/lib/stores/music-stream.ts +++ b/src/lib/stores/music-stream.ts @@ -44,20 +44,20 @@ function createMusicStream() { const albums: Album[] = JSON.parse(event.data) const nowPlayingAlbum = albums.find((a) => a.isNowPlaying) const updateTime = new Date() - + console.log('🎵 Music stream update at', updateTime.toLocaleTimeString(), { totalAlbums: albums.length, nowPlaying: nowPlayingAlbum ? `${nowPlayingAlbum.artist.name} - ${nowPlayingAlbum.name}` : 'none', - albums: albums.map(a => ({ + albums: albums.map((a) => ({ name: a.name, artist: a.artist.name, isNowPlaying: a.isNowPlaying, nowPlayingTrack: a.nowPlayingTrack })) }) - + update((state) => ({ ...state, albums, @@ -75,7 +75,7 @@ function createMusicStream() { interval: data.interval, hasUpdates: data.hasUpdates }) - + // Update lastUpdate time even on heartbeat to keep countdown in sync update((state) => ({ ...state, @@ -144,13 +144,15 @@ function createMusicStream() { albums: derived({ subscribe }, ($state) => $state.albums) as Readable, // Helper to check if any album is playing nowPlaying: derived({ subscribe }, ($state) => { - const playing = $state.albums.find(a => a.isNowPlaying) - return playing ? { - album: playing, - track: playing.nowPlayingTrack - } : null + const playing = $state.albums.find((a) => a.isNowPlaying) + return playing + ? { + album: playing, + track: playing.nowPlayingTrack + } + : null }) as Readable<{ album: Album; track?: string } | null> } } -export const musicStream = createMusicStream() \ No newline at end of file +export const musicStream = createMusicStream() diff --git a/src/lib/stores/project-form.svelte.ts b/src/lib/stores/project-form.svelte.ts index 9fe8505..1cec12f 100644 --- a/src/lib/stores/project-form.svelte.ts +++ b/src/lib/stores/project-form.svelte.ts @@ -9,9 +9,7 @@ export function createProjectFormStore(initialProject?: Project | null) { let original = $state(null) // Derived state using $derived rune - const isDirty = $derived( - original ? JSON.stringify(fields) !== JSON.stringify(original) : false - ) + const isDirty = $derived(original ? JSON.stringify(fields) !== JSON.stringify(original) : false) // Initialize from project if provided if (initialProject) { @@ -96,7 +94,8 @@ export function createProjectFormStore(initialProject?: Project | null) { role: fields.role, projectType: fields.projectType, externalUrl: fields.externalUrl, - featuredImage: fields.featuredImage && fields.featuredImage !== '' ? fields.featuredImage : null, + featuredImage: + fields.featuredImage && fields.featuredImage !== '' ? fields.featuredImage : null, logoUrl: fields.logoUrl && fields.logoUrl !== '' ? fields.logoUrl : null, backgroundColor: fields.backgroundColor, highlightColor: fields.highlightColor, diff --git a/src/lib/utils/lastfmStreamManager.ts b/src/lib/utils/lastfmStreamManager.ts index 9db193f..f55d722 100644 --- a/src/lib/utils/lastfmStreamManager.ts +++ b/src/lib/utils/lastfmStreamManager.ts @@ -40,7 +40,7 @@ export class LastfmStreamManager { try { // Always fetch fresh data for now playing detection const freshData = await this.fetchFreshRecentTracks() - + // Fetch recent albums const albums = await this.getRecentAlbums(4, freshData) @@ -63,7 +63,10 @@ export class LastfmStreamManager { } // Check for now playing updates for non-recent albums - const nowPlayingUpdates = await this.getNowPlayingUpdatesForNonRecentAlbums(enrichedAlbums, freshData) + const nowPlayingUpdates = await this.getNowPlayingUpdatesForNonRecentAlbums( + enrichedAlbums, + freshData + ) if (nowPlayingUpdates.length > 0) { update.nowPlayingUpdates = nowPlayingUpdates } diff --git a/src/lib/utils/mediaHelpers.ts b/src/lib/utils/mediaHelpers.ts index 254585a..20cc456 100644 --- a/src/lib/utils/mediaHelpers.ts +++ b/src/lib/utils/mediaHelpers.ts @@ -100,7 +100,7 @@ export function formatDuration(seconds: number): string { const hours = Math.floor(seconds / 3600) const minutes = Math.floor((seconds % 3600) / 60) const secs = Math.floor(seconds % 60) - + if (hours > 0) { return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}` } diff --git a/src/lib/utils/nowPlayingDetector.ts b/src/lib/utils/nowPlayingDetector.ts index 9ed6bbe..053f5a3 100644 --- a/src/lib/utils/nowPlayingDetector.ts +++ b/src/lib/utils/nowPlayingDetector.ts @@ -163,13 +163,19 @@ export class NowPlayingDetector { for (const track of tracks) { if (track.nowPlaying) { hasOfficialNowPlaying = true - logger.music('debug', `Last.fm reports "${track.name}" by ${track.artist.name} as now playing`) + logger.music( + 'debug', + `Last.fm reports "${track.name}" by ${track.artist.name} as now playing` + ) break } } if (!hasOfficialNowPlaying) { - logger.music('debug', 'No official now playing from Last.fm, will use duration-based detection') + logger.music( + 'debug', + 'No official now playing from Last.fm, will use duration-based detection' + ) } // Process all tracks @@ -230,8 +236,11 @@ export class NowPlayingDetector { this.updateRecentTracks(newRecentTracks) // Log summary - const nowPlayingCount = Array.from(albums.values()).filter(a => a.isNowPlaying).length - logger.music('debug', `Detected ${nowPlayingCount} album(s) as now playing out of ${albums.size} recent albums`) + const nowPlayingCount = Array.from(albums.values()).filter((a) => a.isNowPlaying).length + logger.music( + 'debug', + `Detected ${nowPlayingCount} album(s) as now playing out of ${albums.size} recent albums` + ) // Ensure only one album is marked as now playing return this.ensureSingleNowPlaying(albums, newRecentTracks) diff --git a/src/lib/utils/simpleLastfmStreamManager.ts b/src/lib/utils/simpleLastfmStreamManager.ts index 9879ced..1d1e2dc 100644 --- a/src/lib/utils/simpleLastfmStreamManager.ts +++ b/src/lib/utils/simpleLastfmStreamManager.ts @@ -34,7 +34,10 @@ export class SimpleLastfmStreamManager { limit: 50, extended: true }) - logger.music('debug', `📊 Got ${recentTracksResponse.tracks?.length || 0} tracks from Last.fm`) + logger.music( + 'debug', + `📊 Got ${recentTracksResponse.tracks?.length || 0} tracks from Last.fm` + ) // Cache for other uses but always use fresh for now playing await this.albumEnricher.cacheRecentTracks(this.username, recentTracksResponse) @@ -48,7 +51,7 @@ export class SimpleLastfmStreamManager { trackCount: recentTracksResponse.tracks?.length || 0, firstTrack: recentTracksResponse.tracks?.[0] }) - + // Process now playing status const albumsWithNowPlaying = await this.detector.processAlbums( albums, @@ -64,7 +67,7 @@ export class SimpleLastfmStreamManager { // Check if anything changed const currentState = JSON.stringify( - enrichedAlbums.map(a => ({ + enrichedAlbums.map((a) => ({ key: `${a.artist.name}:${a.name}`, isNowPlaying: a.isNowPlaying, track: a.nowPlayingTrack @@ -104,4 +107,4 @@ export class SimpleLastfmStreamManager { return Array.from(uniqueAlbums.values()) } -} \ No newline at end of file +} diff --git a/src/lib/utils/simpleNowPlayingDetector.ts b/src/lib/utils/simpleNowPlayingDetector.ts index eca5f36..726bbde 100644 --- a/src/lib/utils/simpleNowPlayingDetector.ts +++ b/src/lib/utils/simpleNowPlayingDetector.ts @@ -12,11 +12,14 @@ export class SimpleNowPlayingDetector { const now = new Date() const elapsed = now.getTime() - scrobbleTime.getTime() const maxPlayTime = durationMs + BUFFER_TIME_MS - + const isPlaying = elapsed >= 0 && elapsed <= maxPlayTime - - logger.music('debug', `Track playing check: elapsed=${Math.round(elapsed/1000)}s, duration=${Math.round(durationMs/1000)}s, maxPlay=${Math.round(maxPlayTime/1000)}s, isPlaying=${isPlaying}`) - + + logger.music( + 'debug', + `Track playing check: elapsed=${Math.round(elapsed / 1000)}s, duration=${Math.round(durationMs / 1000)}s, maxPlay=${Math.round(maxPlayTime / 1000)}s, isPlaying=${isPlaying}` + ) + // Track is playing if we're within the duration + buffer return isPlaying } @@ -30,27 +33,33 @@ export class SimpleNowPlayingDetector { recentTracks: any[], appleMusicDataLookup: (artistName: string, albumName: string) => Promise ): Promise { - logger.music('debug', `Processing ${albums.length} albums with ${recentTracks.length} recent tracks`) - + logger.music( + 'debug', + `Processing ${albums.length} albums with ${recentTracks.length} recent tracks` + ) + // First check if Last.fm reports anything as officially playing - const officialNowPlaying = recentTracks.find(track => track.nowPlaying) - + const officialNowPlaying = recentTracks.find((track) => track.nowPlaying) + if (officialNowPlaying) { // Trust Last.fm's official now playing status - logger.music('debug', `✅ Last.fm official now playing: "${officialNowPlaying.name}" by ${officialNowPlaying.artist.name}`) - - return albums.map(album => ({ + logger.music( + 'debug', + `✅ Last.fm official now playing: "${officialNowPlaying.name}" by ${officialNowPlaying.artist.name}` + ) + + return albums.map((album) => ({ ...album, - isNowPlaying: - album.name === officialNowPlaying.album.name && + isNowPlaying: + album.name === officialNowPlaying.album.name && album.artist.name === officialNowPlaying.artist.name, - nowPlayingTrack: - album.name === officialNowPlaying.album.name && + nowPlayingTrack: + album.name === officialNowPlaying.album.name && album.artist.name === officialNowPlaying.artist.name ? officialNowPlaying.name : undefined, - lastScrobbleTime: - album.name === officialNowPlaying.album.name && + lastScrobbleTime: + album.name === officialNowPlaying.album.name && album.artist.name === officialNowPlaying.artist.name ? new Date() // Now playing tracks are playing right now : album.lastScrobbleTime @@ -59,47 +68,50 @@ export class SimpleNowPlayingDetector { // Fall back to duration-based detection logger.music('debug', 'Using duration-based detection') - + // Find the most recent track across all albums let mostRecentTrack: any = null let mostRecentTime = new Date(0) - + for (const track of recentTracks) { if (track.date && track.date > mostRecentTime) { mostRecentTime = track.date mostRecentTrack = track } } - + if (!mostRecentTrack) { // No recent tracks, nothing is playing logger.music('debug', '❌ No recent tracks found, nothing is playing') - return albums.map(album => ({ + return albums.map((album) => ({ ...album, isNowPlaying: false, nowPlayingTrack: undefined })) } - logger.music('debug', `Most recent track: "${mostRecentTrack.name}" by ${mostRecentTrack.artist.name} from ${mostRecentTrack.album.name}`) + logger.music( + 'debug', + `Most recent track: "${mostRecentTrack.name}" by ${mostRecentTrack.artist.name} from ${mostRecentTrack.album.name}` + ) logger.music('debug', `Scrobbled at: ${mostRecentTrack.date}`) - + // Check if the most recent track is still playing const albumKey = `${mostRecentTrack.artist.name}:${mostRecentTrack.album.name}` let isPlaying = false let playingTrack: string | undefined - + try { const appleMusicData = await appleMusicDataLookup( - mostRecentTrack.artist.name, + mostRecentTrack.artist.name, mostRecentTrack.album.name ) - + if (appleMusicData?.tracks) { const trackData = appleMusicData.tracks.find( (t: any) => t.name.toLowerCase() === mostRecentTrack.name.toLowerCase() ) - + if (trackData?.durationMs) { isPlaying = this.isTrackPlaying(mostRecentTrack.date, trackData.durationMs) if (isPlaying) { @@ -112,28 +124,39 @@ export class SimpleNowPlayingDetector { logger.music('debug', `⚠️ No duration found for track "${mostRecentTrack.name}"`) // Fallback: assume track is playing if scrobbled within last 5 minutes const timeSinceScrobble = Date.now() - mostRecentTrack.date.getTime() - if (timeSinceScrobble < 5 * 60 * 1000) { // 5 minutes + if (timeSinceScrobble < 5 * 60 * 1000) { + // 5 minutes isPlaying = true playingTrack = mostRecentTrack.name - logger.music('debug', `⏰ Using time-based fallback: track scrobbled ${Math.round(timeSinceScrobble/1000)}s ago, assuming still playing`) + logger.music( + 'debug', + `⏰ Using time-based fallback: track scrobbled ${Math.round(timeSinceScrobble / 1000)}s ago, assuming still playing` + ) } } } } catch (error) { logger.error('Error checking track duration:', error as Error, undefined, 'music') - logger.music('debug', `❌ Failed to get Apple Music data for ${mostRecentTrack.artist.name} - ${mostRecentTrack.album.name}`) - + logger.music( + 'debug', + `❌ Failed to get Apple Music data for ${mostRecentTrack.artist.name} - ${mostRecentTrack.album.name}` + ) + // Fallback when Apple Music lookup fails const timeSinceScrobble = Date.now() - mostRecentTrack.date.getTime() - if (timeSinceScrobble < 5 * 60 * 1000) { // 5 minutes + if (timeSinceScrobble < 5 * 60 * 1000) { + // 5 minutes isPlaying = true playingTrack = mostRecentTrack.name - logger.music('debug', `⏰ Using time-based fallback after Apple Music error: track scrobbled ${Math.round(timeSinceScrobble/1000)}s ago`) + logger.music( + 'debug', + `⏰ Using time-based fallback after Apple Music error: track scrobbled ${Math.round(timeSinceScrobble / 1000)}s ago` + ) } } // Update albums with the result - return albums.map(album => { + return albums.map((album) => { const key = `${album.artist.name}:${album.name}` const isThisAlbumPlaying = isPlaying && key === albumKey return { @@ -144,4 +167,4 @@ export class SimpleNowPlayingDetector { } }) } -} \ No newline at end of file +} diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte index 14c3fc3..4b4b34a 100644 --- a/src/routes/+error.svelte +++ b/src/routes/+error.svelte @@ -1,5 +1,5 @@
@@ -30,4 +30,4 @@ margin-top: $unit-2x; color: var(--text-secondary); } - \ No newline at end of file + diff --git a/src/routes/admin/login/+page.server.ts b/src/routes/admin/login/+page.server.ts index 33a2a9e..8b5c673 100644 --- a/src/routes/admin/login/+page.server.ts +++ b/src/routes/admin/login/+page.server.ts @@ -1,6 +1,10 @@ import { fail, redirect } from '@sveltejs/kit' import type { Actions, PageServerLoad } from './$types' -import { clearSessionCookie, setSessionCookie, validateAdminPassword } from '$lib/server/admin/session' +import { + clearSessionCookie, + setSessionCookie, + validateAdminPassword +} from '$lib/server/admin/session' export const load = (async ({ cookies }) => { // Ensure we start with a clean session when hitting the login page diff --git a/src/routes/admin/media/+page.svelte b/src/routes/admin/media/+page.svelte index a8bc60b..a2a244c 100644 --- a/src/routes/admin/media/+page.svelte +++ b/src/routes/admin/media/+page.svelte @@ -361,213 +361,207 @@ - - {#snippet left()} - handlePublishedFilterChange((e.target as HTMLSelectElement).value)} - /> - {/snippet} - {#snippet right()} - + {#snippet left()} + handlePublishedFilterChange((e.target as HTMLSelectElement).value)} + /> + {/snippet} + {#snippet right()} + + - - - - - {/snippet} - + + + + {/snippet} + - {#if isMultiSelectMode && media.length > 0} -
-
- - -
-
- {#if selectedMediaIds.size > 0} - - - - - {/if} -
+ {#if isMultiSelectMode && media.length > 0} +
+
+ +
- {/if} +
+ {#if selectedMediaIds.size > 0} + + + + + {/if} +
+
+ {/if} - {#if media.length === 0} - - {#snippet action()} - - {/snippet} - - {:else} -
- {#each media as item} -
- {#if isMultiSelectMode} -
- toggleMediaSelection(item.id)} - id="media-{item.id}" - /> - -
- {/if} - + {/snippet} + + {:else} +
+ {#each media as item} +
+ {#if isMultiSelectMode} +
+ toggleMediaSelection(item.id)} + id="media-{item.id}" + /> + +
+ {/if} + -
- {/each} -
- {/if} + {/if} +
+ {item.filename} +
+
+ {#if item.isPhotography} + Photo + {/if} + {#if item.description} + + Alt + + {:else} + No Alt + {/if} +
+ {formatFileSize(item.size)} +
+
+ +
+ {/each} +
+ {/if} - {#if totalPages > 1} - - {/if} + {#if totalPages > 1} + + {/if} diff --git a/src/routes/admin/media/audit/+page.svelte b/src/routes/admin/media/audit/+page.svelte index 3c310f0..4f39fbd 100644 --- a/src/routes/admin/media/audit/+page.svelte +++ b/src/routes/admin/media/audit/+page.svelte @@ -49,7 +49,9 @@ let showCleanupModal = $state(false) let cleaningUp = $state(false) - const allSelected = $derived(auditData && selectedFiles.size >= Math.min(20, auditData.orphanedFiles.length)) + const allSelected = $derived( + auditData && selectedFiles.size >= Math.min(20, auditData.orphanedFiles.length) + ) const hasSelection = $derived(selectedFiles.size > 0) const selectedSize = $derived( auditData?.orphanedFiles diff --git a/src/routes/admin/media/upload/+page.svelte b/src/routes/admin/media/upload/+page.svelte index f92b7ee..1ea26d6 100644 --- a/src/routes/admin/media/upload/+page.svelte +++ b/src/routes/admin/media/upload/+page.svelte @@ -37,8 +37,8 @@ function addFiles(newFiles: File[]) { // Filter for supported file types (images and videos) - const supportedFiles = newFiles.filter((file) => - file.type.startsWith('image/') || file.type.startsWith('video/') + const supportedFiles = newFiles.filter( + (file) => file.type.startsWith('image/') || file.type.startsWith('video/') ) if (supportedFiles.length !== newFiles.length) { @@ -305,7 +305,9 @@

Drop media files here

or click to browse and select files

-

Images: JPG, PNG, GIF, WebP, SVG | Videos: WebM, MP4, OGG, MOV, AVI

+

+ Images: JPG, PNG, GIF, WebP, SVG | Videos: WebM, MP4, OGG, MOV, AVI +

{:else}
() + const { data, form } = $props<{ data: PageData; form?: { message?: string } }>() -let showInlineComposer = true -let showDeleteConfirmation = false -let postToDelete: AdminPost | null = null + let showInlineComposer = true + let showDeleteConfirmation = false + let postToDelete: AdminPost | null = null -const actionError = form?.message ?? '' -const posts = data.items ?? [] + const actionError = form?.message ?? '' + const posts = data.items ?? [] -// Create reactive filters -const filters = createListFilters(posts, { - filters: { - type: { field: 'postType', default: 'all' }, - status: { field: 'status', default: 'all' } - }, - sorts: { - newest: commonSorts.dateDesc('createdAt'), - oldest: commonSorts.dateAsc('createdAt'), - 'title-asc': commonSorts.stringAsc('title'), - 'title-desc': commonSorts.stringDesc('title'), - 'status-published': commonSorts.statusPublishedFirst('status'), - 'status-draft': commonSorts.statusDraftFirst('status') - }, - defaultSort: 'newest' -}) + // Create reactive filters + const filters = createListFilters(posts, { + filters: { + type: { field: 'postType', default: 'all' }, + status: { field: 'status', default: 'all' } + }, + sorts: { + newest: commonSorts.dateDesc('createdAt'), + oldest: commonSorts.dateAsc('createdAt'), + 'title-asc': commonSorts.stringAsc('title'), + 'title-desc': commonSorts.stringDesc('title'), + 'status-published': commonSorts.statusPublishedFirst('status'), + 'status-draft': commonSorts.statusDraftFirst('status') + }, + defaultSort: 'newest' + }) let toggleForm: HTMLFormElement | null = null let toggleIdField: HTMLInputElement | null = null @@ -48,17 +48,17 @@ const filters = createListFilters(posts, { let deleteForm: HTMLFormElement | null = null let deleteIdField: HTMLInputElement | null = null -const typeFilterOptions = [ - { value: 'all', label: 'All posts' }, - { value: 'post', label: 'Posts' }, - { value: 'essay', label: 'Essays' } -] + const typeFilterOptions = [ + { value: 'all', label: 'All posts' }, + { value: 'post', label: 'Posts' }, + { value: 'essay', label: 'Essays' } + ] -const statusFilterOptions = [ + const statusFilterOptions = [ { value: 'all', label: 'All statuses' }, { value: 'published', label: 'Published' }, { value: 'draft', label: 'Draft' } -] + ] const sortOptions = [ { value: 'newest', label: 'Newest first' }, @@ -120,9 +120,7 @@ const statusFilterOptions = [ {#snippet actions()} - + {/snippet} diff --git a/src/routes/admin/posts/[id]/edit/+page.svelte b/src/routes/admin/posts/[id]/edit/+page.svelte index ff816a7..5ba91d7 100644 --- a/src/routes/admin/posts/[id]/edit/+page.svelte +++ b/src/routes/admin/posts/[id]/edit/+page.svelte @@ -1,9 +1,9 @@ @@ -521,7 +529,8 @@ $effect(() => {
- Unsaved draft found{#if draftTimeText} (saved {draftTimeText}){/if}. + Unsaved draft found{#if draftTimeText} + (saved {draftTimeText}){/if}.
diff --git a/src/routes/admin/posts/new/+page.svelte b/src/routes/admin/posts/new/+page.svelte index d587f1e..9843e8c 100644 --- a/src/routes/admin/posts/new/+page.svelte +++ b/src/routes/admin/posts/new/+page.svelte @@ -1,7 +1,7 @@