From b7306877f1ca7c995f6697235105d0fbe336db77 Mon Sep 17 00:00:00 2001 From: root Date: Wed, 8 Apr 2026 20:54:37 +0500 Subject: [PATCH] refactor: clean up home page UI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove all emojis (flame icon in streak widget, 🔥 in stats footer, ✓ in completed badge) — they cheapened the overall feel - Fix double carousel indicator: drop the animated progress sub-line below the active dot; the expanding pill shape is sufficient signal. Also removes the rAF animation loop and progressStart state. - Remove 'X left' badge from Continue Reading shelf cards - Remove 'X chapters ahead' text from hero card info row --- ui/src/routes/+page.svelte | 55 ++++---------------------------------- 1 file changed, 5 insertions(+), 50 deletions(-) diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte index a8ce37b..9460b28 100644 --- a/ui/src/routes/+page.svelte +++ b/ui/src/routes/+page.svelte @@ -90,17 +90,13 @@ // Auto-advance carousel every CAROUSEL_INTERVAL ms when there are multiple books. // autoAdvanceSeed is bumped on manual swipe/dot to restart the interval. let autoAdvanceSeed = $state(0); - // progressStart tracks when the current interval began (for the progress bar). - let progressStart = $state(browser ? performance.now() : 0); $effect(() => { if (heroBooks.length <= 1) return; const len = heroBooks.length; void autoAdvanceSeed; // restart when seed changes - progressStart = browser ? performance.now() : 0; const id = setInterval(() => { heroIndex = (heroIndex + 1) % len; - progressStart = browser ? performance.now() : 0; }, CAROUSEL_INTERVAL); return () => clearInterval(id); }); @@ -109,8 +105,7 @@ autoAdvanceSeed++; } - // ── Swipe handling ─────────────────────────────────────────────────────── - let swipeStartX = 0; + // ── Swipe handling ─────────────────────────────────────────────────────── let swipeStartX = 0; function onSwipeStart(e: TouchEvent) { swipeStartX = e.touches[0].clientX; } @@ -127,22 +122,6 @@ resetAutoAdvance(); } - // ── Progress bar animation ─────────────────────────────────────────────── - // rAF loop drives a 0→1 progress value that resets on each advance. - let rafProgress = $state(0); - $effect(() => { - if (!browser || heroBooks.length <= 1) return; - void autoAdvanceSeed; // re-subscribe so effect re-runs on manual nav - void heroIndex; - let raf: number; - function tick() { - rafProgress = Math.min((performance.now() - progressStart) / CAROUSEL_INTERVAL, 1); - raf = requestAnimationFrame(tick); - } - raf = requestAnimationFrame(tick); - return () => cancelAnimationFrame(raf); - }); - function playChapter(slug: string, chapter: number) { audioStore.autoStartChapter = chapter; goto(`/books/${slug}/chapters/${chapter}`); @@ -210,10 +189,6 @@ Listen - {#if heroBook.book.total_chapters > 0 && heroBook.chapter < heroBook.book.total_chapters} - {@const ahead = heroBook.book.total_chapters - heroBook.chapter} - - {/if} {#each parseGenres(heroBook.book.genres).slice(0, 2) as genre} {genre} {/each} @@ -221,7 +196,7 @@ - + {#if heroBooks.length > 1}
{#each heroBooks as _, i} @@ -229,21 +204,10 @@ type="button" onclick={() => heroDot(i)} aria-label="Go to book {i + 1}" - class="relative flex flex-col items-center gap-0.5 group/dot" > - - - {#if i === heroIndex} - - - - {/if} + : 'w-1.5 h-1.5 bg-(--color-border) hover:bg-(--color-muted)'}"> {/each}
@@ -256,9 +220,6 @@ {#if streak > 0}
- - - {streak} day{streak !== 1 ? 's' : ''} reading @@ -293,12 +254,6 @@ {m.home_chapter_badge({ n: String(chapter) })} - - {#if book.total_chapters > 0 && chapter < book.total_chapters} - - {book.total_chapters - chapter} left - - {/if}
@@ -338,7 +293,7 @@ {/if} - ✓ Done + Done

{book.title ?? ''}

@@ -597,6 +552,6 @@ {data.stats.totalChapters.toLocaleString()} {m.home_stat_chapters()} {#if streak > 0} - {streak} day streak 🔥 + {streak} day streak {/if}