Fix: WebUI Splashscreen Boot & Extensions Issues

This commit is contained in:
Youwes09
2026-06-13 02:48:46 -05:00
parent 09d794da96
commit bf19ee02bc
5 changed files with 14 additions and 12 deletions
@@ -509,9 +509,9 @@
</div> </div>
</div> </div>
{:else} {:else if isTauri || failed || notConfigured || ringFull}
<div style="position:relative;width:{ringSize}px;height:{ringSize}px;margin-bottom:20px;display:flex;align-items:center;justify-content:center"> <div style="position:relative;width:{ringSize}px;height:{ringSize}px;margin-bottom:20px;display:flex;align-items:center;justify-content:center">
{#if !failed && !notConfigured} {#if !failed && !notConfigured && isTauri}
<svg width={ringSize} height={ringSize} class="loading-ring" style="position:absolute;top:0;left:0;pointer-events:none"> <svg width={ringSize} height={ringSize} class="loading-ring" style="position:absolute;top:0;left:0;pointer-events:none">
<circle cx={ringC} cy={ringC} r={ringR} fill="none" stroke="var(--border-base)" stroke-width="2" /> <circle cx={ringC} cy={ringC} r={ringR} fill="none" stroke="var(--border-base)" stroke-width="2" />
<circle cx={ringC} cy={ringC} r={ringR} fill="none" stroke="var(--accent)" stroke-width="2" <circle cx={ringC} cy={ringC} r={ringR} fill="none" stroke="var(--accent)" stroke-width="2"
@@ -13,9 +13,9 @@
import ExtensionLibrary from "$lib/components/extensions/ExtensionLibrary.svelte"; import ExtensionLibrary from "$lib/components/extensions/ExtensionLibrary.svelte";
const anims = $derived(settingsState.settings.qolAnimations ?? true); const anims = $derived(settingsState.settings.qolAnimations ?? true);
const cols = $derived(settingsState.settings.libraryCols ?? 5); const cols = $derived(settingsState.settings.libraryPageSize ?? 5);
const cropCovers = $derived(settingsState.settings.cropCovers ?? true); const cropCovers = $derived(settingsState.settings.libraryCropCovers ?? true);
const statsAlways = $derived(settingsState.settings.statsAlways ?? false); const statsAlways = $derived(settingsState.settings.libraryStatsAlways ?? false);
let tabsEl = $state<HTMLDivElement | undefined>(undefined); let tabsEl = $state<HTMLDivElement | undefined>(undefined);
let tabIndicator = $state({ left: 0, width: 0 }); let tabIndicator = $state({ left: 0, width: 0 });
@@ -337,14 +337,14 @@
{:else} {:else}
<div class="list"> <div class="list">
{#if showLocal} {#if showLocal}
<div class="local-row" style="cursor:pointer" onclick={() => libraryTarget = { pkgName: '__local__', extensionName: 'Local Source', iconUrl: '' }}> <button type="button" class="local-row" onclick={() => libraryTarget = { pkgName: '__local__', extensionName: 'Local Source', iconUrl: '' }}>
<div class="local-icon"><HardDrives size={18} weight="bold" /></div> <div class="local-icon"><HardDrives size={18} weight="bold" /></div>
<div class="info"> <div class="info">
<span class="name">Local Source</span> <span class="name">Local Source</span>
<span class="meta">Built-in · {localMangaCount} {localMangaCount === 1 ? "manga" : "manga"}</span> <span class="meta">Built-in · {localMangaCount} {localMangaCount === "1" ? "manga" : "mangas"}</span>
</div> </div>
<span class="local-badge">Built-in</span> <span class="local-badge">Built-in</span>
</div> </button>
{/if} {/if}
{#each groups as { base, primary, variants }} {#each groups as { base, primary, variants }}
<ExtensionCard <ExtensionCard
@@ -404,8 +404,7 @@
.repo-remove { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-sm); color: var(--text-faint); flex-shrink: 0; transition: color var(--t-base), background var(--t-base); } .repo-remove { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-sm); color: var(--text-faint); flex-shrink: 0; transition: color var(--t-base), background var(--t-base); }
.repo-remove:hover:not(:disabled) { color: var(--color-error); background: var(--bg-overlay); } .repo-remove:hover:not(:disabled) { color: var(--color-error); background: var(--bg-overlay); }
@keyframes panelSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } @keyframes panelSlide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.local-row { display: flex; align-items: center; gap: var(--sp-3); padding: 8px var(--sp-3); border-radius: var(--radius-md); border: 1px solid transparent; transition: background var(--t-fast), border-color var(--t-fast); margin-bottom: 1px; } .local-row { display: flex; align-items: center; gap: var(--sp-3); padding: 8px var(--sp-3); border-radius: var(--radius-md); border: 1px solid transparent; transition: background var(--t-fast), border-color var(--t-fast); margin-bottom: 1px; width: 100%; text-align: left; background: none; font: inherit; cursor: pointer; }
.local-row:hover { background: var(--bg-raised); border-color: var(--border-dim); }
.local-icon { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--accent-muted); border: 1px solid var(--accent-dim); display: flex; align-items: center; justify-content: center; color: var(--accent-fg); flex-shrink: 0; } .local-icon { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--accent-muted); border: 1px solid var(--accent-dim); display: flex; align-items: center; justify-content: center; color: var(--accent-fg); flex-shrink: 0; }
.info { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .info { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.name { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .name { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+1 -1
View File
@@ -19,7 +19,7 @@
const entries = $derived( const entries = $derived(
historyState.sessions historyState.sessions
.filter((s, i, arr) => arr.findIndex(x => x.mangaId === s.mangaId) === i) .filter((s, i, arr) => arr.findIndex(x => x.mangaId === s.mangaId) === i)
.slice(0, 5) .slice(0, 6)
) )
</script> </script>
+3 -1
View File
@@ -6,6 +6,7 @@ import { appState } from '$lib/state/app.svelte'
import { settingsState } from '$lib/state/settings.svelte' import { settingsState } from '$lib/state/settings.svelte'
const MAX_ATTEMPTS = 40 const MAX_ATTEMPTS = 40
const WEB_MAX_ATTEMPTS = 1
const BG_MAX_ATTEMPTS = 120 const BG_MAX_ATTEMPTS = 120
export const boot = $state({ export const boot = $state({
@@ -101,7 +102,8 @@ export async function startProbe(
if (result === 'ok') { handleProbeSuccess(gen); return } if (result === 'ok') { handleProbeSuccess(gen); return }
if (result === 'auth_required') { handleAuthRequired(gen, authMode, user, pass); return } if (result === 'auth_required') { handleAuthRequired(gen, authMode, user, pass); return }
if (tries >= MAX_ATTEMPTS) { boot.failed = true; appState.status = 'error'; startBackgroundProbe(gen, authMode, user, pass); return } const maxAttempts = appState.platform === 'tauri' ? MAX_ATTEMPTS : WEB_MAX_ATTEMPTS
if (tries >= maxAttempts) { boot.failed = true; appState.status = 'error'; startBackgroundProbe(gen, authMode, user, pass); return }
setTimeout(probe, Math.min(500 + tries * 200, 2000)) setTimeout(probe, Math.min(500 + tries * 200, 2000))
} }
+1
View File
@@ -7,6 +7,7 @@ export interface Source {
isNsfw: boolean isNsfw: boolean
isConfigurable: boolean isConfigurable: boolean
supportsLatest: boolean supportsLatest: boolean
extension?: { pkgName: string }
} }
export interface Extension { export interface Extension {