Skip to content

Library

Jump to bottom
dim145 edited this page Apr 26, 2026 · 1 revision

Library & dashboard

The dashboard at /dashboard is the home base — every series you track, every shelf you've built, every gap you haven't filled. This page describes what each block does and how to navigate it.

Library dashboard

Layout

The page is divided into four bands stacked top to bottom:

  1. Eyebrow + heading — Japanese supertitle + your archive's title.
  2. Stat chips — series, volumes, complete, progress percentage.
  3. "Nearly there" — series closest to completion, click to jump straight to their page.
  4. Search + filter pills + grid — your collection.

Each band animates in independently on page load (staggered fade-up), so the page reads as a series of breathable plates rather than a wall of data.

Stat chips

Chip What it counts Accent
Series Distinct titles in your library washi (cream)
Volumes owned / tracked across all series hanko (red)
Complete Series where every published volume is on your shelf gold
Progress Aggregate completion percentage hanko

The chips are computed entirely from your locally-cached library — they're always correct offline, and they update optimistically the moment you add or remove a volume.

"Nearly there" carousel

Surfaces up to 4 series sorted by how few volumes they have left — "only 2 to go", "only 1 to go", etc. Designed to be your shopping list.

The chip on each card reads N volumes to go. Click the card to jump to the series page where you can add the missing tomes.

A series is excluded from "Nearly there" when it has zero published volumes (custom entries with volumes = 0) — there's no completion target to compute.

Search

The search bar filters by:

  • series name (case-insensitive substring match against MAL or custom)
  • alternative titles (English / Japanese / Romaji depending on your title preference)

Search is client-side, against your Dexie cache, so it works offline and is instant.

Filter pills

Five mutually-exclusive states:

Pill Meaning
All Everything tracked
Ongoing At least one volume owned, but not all
Complete Owned ≥ tracked total
Wishlist (願) Tracked but zero volumes owned
Upcoming (来) Has at least one announced future volume

Pills double as visual cues — the Wishlist pill matches the sakura accent that wishlist cards use; the Upcoming pill matches the moegi accent of the calendar.

Genre tag filter

Above the grid, a horizontal strip of clickable genre tags lets you intersect by topic — Action, Romance, Slice of Life, …

  • Tags are inclusive — clicking multiple tags ANDs them.
  • An active tag is highlighted; click again to unset.
  • The 解 clear-tags button at the bottom resets the filter without losing your search query.

The series grid

Library cards

Each card shows:

  • Cover at 2:3 aspect ratio (the usual tankōbon proportion)
  • State badge in the top-right corner:
    • 完 COMPLET in moegi (green tea) — fully owned
    • ◐ ONGOING in hanko (red) — partial
    • 願 À ACQUÉRIR in sakura (rose) — wishlist
  • Collector seal (限) in the top-left when every owned volume is marked collector
  • Tsundoku counter (積 N) when you have unread tomes piling up
  • Title at the bottom, clamped to two lines
  • Owned / tracked counter
  • Progress bar colour-coded by state
  • 来 · DD MM ribbon under the title when the series is fully owned and a future tome has been announced

Click any card to open the Series page.

Card hover affordances

  • Cards lift on hover (translate-y-1) with a richer shadow.
  • The cover gains a slow zoom (scale-110) over 700 ms.
  • Border tone shifts based on state — hanko for ongoing, gold for full-collector, moegi for complete, sakura for wishlist.

Mobile layout

Below the md breakpoint:

  • Top header collapses; navigation moves to the bottom of the screen as a fixed pill bar with 5 tabs (Library / Add / Stats / Calendar / Settings).
  • The Add button gets a special "floating" treatment — a circular hanko pill that lifts above the bar.
  • The grid drops to 2 columns.

The layout is touch-aware — no hover affordances; tap-state animations trigger on :active.

Empty states

Three different empty messages, depending on context:

Trigger Message
Truly empty archive "Your library is empty — add your first series" with the + Add manga button
No match for the active search "No series matches your search"
No match for the active tags "No tags returned anything" with a 解 clear-tags button

Each is its own animation entry and uses a Japanese kanji watermark (空, "emptiness") in the seal slot.

MangaCollector

Home

🛠️ Infrastructure

👤 User guide

🔌 Release proxy

📚 Reference

Clone this wiki locally