Fix: FolderSettings Count Display & Debounce on LibraryToolbar (WIP)

This commit is contained in:
Youwes09
2026-06-14 21:12:52 -05:00
parent 9824d31fe7
commit 88f43b22c7
2 changed files with 5 additions and 2 deletions
@@ -66,7 +66,9 @@
let wheelTimer: ReturnType<typeof setTimeout> | null = null let wheelTimer: ReturnType<typeof setTimeout> | null = null
function onTabsWheel(e: WheelEvent) { function onTabsWheel(e: WheelEvent) {
if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return
e.preventDefault() e.preventDefault()
tabsEl?.scrollBy({ left: e.deltaY * 0.5, behavior: "instant" })
if (wheelTimer) return if (wheelTimer) return
wheelTimer = setTimeout(() => { wheelTimer = null }, 180) wheelTimer = setTimeout(() => { wheelTimer = null }, 180)
const ids = visibleTabIds.filter(id => id === "library" || id === "downloaded" || visibleCategories.some(c => String(c.id) === id)); const ids = visibleTabIds.filter(id => id === "library" || id === "downloaded" || visibleCategories.some(c => String(c.id) === id));
@@ -2,6 +2,7 @@
import { FolderSimple, Plus, Trash, Star, Eye, EyeSlash, ArrowsClockwise, ArrowsCounterClockwise, DownloadSimple, DotsSixVertical, BookmarkSimple, Lock, CheckSquare } from 'phosphor-svelte' import { FolderSimple, Plus, Trash, Star, Eye, EyeSlash, ArrowsClockwise, ArrowsCounterClockwise, DownloadSimple, DotsSixVertical, BookmarkSimple, Lock, CheckSquare } from 'phosphor-svelte'
import { getAdapter } from '$lib/request-manager' import { getAdapter } from '$lib/request-manager'
import { settingsState, updateSettings } from '$lib/state/settings.svelte' import { settingsState, updateSettings } from '$lib/state/settings.svelte'
import { libraryState } from '$lib/state/library.svelte'
import type { Category } from '$lib/types' import type { Category } from '$lib/types'
let categories = $state<Category[]>([]) let categories = $state<Category[]>([])
@@ -206,7 +207,7 @@
<DotsSixVertical size={14} weight="bold" /> <DotsSixVertical size={14} weight="bold" />
</span> </span>
<span class="s-folder-name">{cat?.name ?? 'Completed'}</span> <span class="s-folder-name">{cat?.name ?? 'Completed'}</span>
<span class="s-folder-count">{cat?.mangas?.length ?? 0} manga</span> <span class="s-folder-count">{libraryState.counts[String(cat?.id)] ?? 0} manga</span>
<span class="s-folder-badge">built-in</span> <span class="s-folder-badge">built-in</span>
<div class="s-folder-actions"> <div class="s-folder-actions">
<button class="s-btn-icon" class:muted={hidden} onclick={() => toggleHidden(id)} title={hidden ? 'Show tab in library' : 'Hide tab from library'}> <button class="s-btn-icon" class:muted={hidden} onclick={() => toggleHidden(id)} title={hidden ? 'Show tab in library' : 'Hide tab from library'}>
@@ -246,7 +247,7 @@
</span> </span>
<button class="s-folder-name" onclick={(e) => { e.stopPropagation(); startEdit(cat.id, cat.name) }} title="Click to rename">{cat.name}</button> <button class="s-folder-name" onclick={(e) => { e.stopPropagation(); startEdit(cat.id, cat.name) }} title="Click to rename">{cat.name}</button>
</div> </div>
<span class="s-folder-count">{cat.mangas?.length ?? 0} manga</span> <span class="s-folder-count">{libraryState.counts[String(cat.id)] ?? 0} manga</span>
<div class="s-folder-actions"> <div class="s-folder-actions">
<button class="s-btn-icon" <button class="s-btn-icon"
class:active={(settingsState.settings.defaultLibraryCategoryId ?? null) === cat.id} class:active={(settingsState.settings.defaultLibraryCategoryId ?? null) === cat.id}