💄 (expo): New Series Cards

[Arklaum]

New series cards as showcased here: https://github.com/stumpapp/stump/discussions/753#discussioncomment-15213149

Before vs After

Before	After

Or do you prefer with centred text? Nothing else in the home screen uses centred text though

For the colour, I've just taken the first book's average colour, but if not extracted it will use an orange-ish colour dependent on light/dark mode.

---

A few things: 1. I don't know how to request the first 3 books only, 2. you said

I really like your card idea for curated screens like the home tab!

Does that mean you want to keep the series grids (i.e. the grids in Browse, Browse>Series and Browse>Libraries>Series) as the single thumbnail versions?

And, 3. I could also try this for libraries if you'd like. It could be a wide card with 5 thumbnails from the library, with only small overlaps. Like, it could be cool if it used your favourites first in such display.

[Arklaum]

I'm totally down to see what it would look like!

A rough design but something like this, though we could make a few 5 book designs so that they don't all look the same:

Rough Library Design Idea

Before	After
It's kinda like you took a pile of books and pushed them over!

Though this one will take a bit of time if you do want me to make them since I have to figure out the scaling for grids / screen width

[aaronleopold]

A rough design but something like this

I personally like it! What do you think? I agree about making multiple varying patterns so there is less visual monotony, and I'm curious about how this would look on tablet and if it should still span an entire row.

Though this one will take a bit of time if you do want me to make them

No expectations on my end, it doesn't have to be in this PR either we can split it up and you can add it as a follow-up if preferred?

---

Also, I'm about to sit down and add those missing bits to the revolvers which would allow you to specify only 3 books in the query. I'll just push it up when I get it done but let me know if that isn't your preference in the future

[Arklaum]

Regarding the Series Cards

The only thing I wanted to revisit was the default background colour. If you want to play around and see what defaults are nice, I'd love that second opinion. I could also use the accent colour picker, but what should be prioritised? (e.g. if average thumbnail colour exists use that over the accent colour picker?)

Regarding the Library Cards

I personally like it! What do you think?

I like the slightly messy layout, though I didn't actually try a symmetric one

I'm curious about how this would look on tablet and if it should still span an entire row.

It's the width of 2 "before" items. A tablet row is either 4 or 6 "before" items, so it could fit those nicely. Full row either means no overlaps of books when using the max size of 5 books, or way more books needed, which brings me to:

I agree about making multiple varying patterns so there is less visual monotony

I'm thinking about whether to curate a few designs or use randomisation somehow using the library name as a seed.

Hand curating is easier (tedious though) and will probably look better. Randomisation will be annoying and maybe probably look worse but scalable to many many books if you want to do like 10 books for a tablet device.

No expectations on my end, it doesn't have to be in this PR either we can split it up and you can add it as a follow-up if preferred?

I meant to say "if you are okay with the change". But let's split it up. This is done once the default background colours are done.

---

Also, I'm about to sit down and add those missing bits to the revolvers which would allow you to specify only 3 books in the query. I'll just push it up when I get it done but let me know if that isn't your preference in the future

thank u, just seen it. I saw there is also a seriesPosition and was gonna use instead of resolvedName but it said it could be undefined? I'm just curious if there is any difference.

[aaronleopold]

The only thing I wanted to revisit was the default background colour. If you want to play around and see what defaults are nice, I'd love that second opinion. I could also try hooking it up to the accent colour picker?

I'll make some time during lunch or after work today to run it locally

It's the width of 2 "before" items

Perfect, I should have actually looked at the code and not just responded to the pictures. That makes sense

I'm thinking about whether to curate a few designs or use randomisation...

Hand curating is easier (tedious though) and will probably look better. Randomisation will be annoying and maybe probably look worse but scalable

I'm biased towards what looks better, but since you are giving your own time and energy for this I'll defer to you for whichever you feel more inclined to do. I agree with both of your points re: the tradeoffs for each though.

I saw there is also a seriesPosition and was gonna use instead of resolvedName but it said it could be undefined? I'm just curious if there is any difference.

There is technically a difference yeah, I think the logic in the field resolver will help explain it a bit. In a perfectly curated library where I know the metadata exists for all my books that would be the better thing to sort with, but I am guaranteed a name (either from metadata or derived from the filename, i.e. resolved_name) even if my library metadata is sparse. I'm happy to change it though if folks generally prefer I optimize for better metadata libraries

[Arklaum]

There is technically a difference yeah

Oh okay, I was just looking through the recently added series list and media(take: 3) for a couple of my epubs gets the wrong books, I assume because the resolved name is in a different order to the actual filename / metadata

[aaronleopold]

for a couple of my epubs gets the wrong books, I assume because the resolved name is in a different order to the actual filename / metadata

Yeah exactly, that would be my guess. There is also a title_sort field in the metadata, so juggling all the options and optimizing for whichever might be the most commonly populated is a bit tricky.

If I have a moment later this evening I'll revisit the ordering I added to maybe just consider the filename for now

[aaronleopold]

Okay so first, I just want to say this looks so good:

Video

https://github.com/user-attachments/assets/5a5698ed-3895-4af2-aad6-e30e97f1fb98

I honestly think you nailed it perfectly, but you asked for my thoughts so I messed around a bit during lunch:

Stack (exactly as you have it)

Light	Dark
Stack light	Stack dark

Accent (default vs secondary)

Light	Dark
Accent light	Accent dark
Accent secondary light	Accent secondary dark

Ignoring the awkward and naive way I determine the DEFAULT vs secondary accent color variants (colors are hard, and side note I can probably do something like you do with colorjs.io/fn moving forward) I don't think I like idea of being stuck with the accent colors for the backgrounds if that makes sense. When I first tried it I did kinda like the pop of color, but after staring at it more and more I liked it less. The default is just too strong (I tried a few different colors, not just my personal preference) and the secondary (while a lot better overall) didn't look as good as what you have for stack and more often than not wound up being too dark. I ignored the possibility of someone setting the accent to something like black or white because that's a bit silly I think.

My small gripe with stack is the dark color looks slightly too brown to my eyes. I tried increasing red and decreasing blue a bit to push a more orange tone but honestly it didn't make a huge difference.

See side-by-side

Before	After
Original	More orange (rgb(92 62 42))

All that to say I think my preference aligns with how you have it:

• Pull colors when available
• Use thumbnail.stack as fallback

[Arklaum]

Okay so first, I just want to say this looks so good

❤️

more often than not wound up being too dark

I actually wrote this but never added it:

accentColor to light + dark versions

const mainThumbnailAverageColor = thumbnailData[0].metadata?.averageColor

let backgroundColor
if (mainThumbnailAverageColor) {
  const color = parse(mainThumbnailAverageColor)
  const darkerColor = darken(color, dark ? 0.33 : 0.1)
  backgroundColor = serialize(darkerColor, { format: 'hex' })
} else if (accentColor) {
  // Take the hue of the accentColor and give it the same chroma and lightness as colors.thumbnail.stack
  const color = parse(accentColor)
  const oklch = to(color, OKLCH)
  const modifiedColor = set(oklch, {
	  'oklch.l': dark ? 0.38 : 0.8,
	  'oklch.c': 0.04,
  })
  const srgb = to(modifiedColor, sRGB)
  backgroundColor = serialize(srgb, { format: 'hex' })
} else {
  backgroundColor = colors.thumbnail.stack
}

I don't use the colour picker so I don't really have any desire to add it, but you can try it out if you want. colors.thumbnail.stack is in fact exactly the hue of the brand colour with those chroma and lightness values

[aaronleopold]

more often than not wound up being too dark

I actually wrote this but never added it:

const mainThumbnailAverageColor = thumbnailData[0].metadata?.averageColor

let backgroundColor
if (mainThumbnailAverageColor) {
  const color = parse(mainThumbnailAverageColor)
  const darkerColor = darken(color, dark ? 0.33 : 0.1)
  backgroundColor = serialize(darkerColor, { format: 'hex' })
} else if (accentColor) {
  // Take the hue of the accentColor and give it the same chroma and lightness as colors.thumbnail.stack
  const color = parse(accentColor)
  const oklch = to(color, OKLCH)
  const modifiedColor = set(oklch, {
	  'oklch.l': dark ? 0.38 : 0.8,
	  'oklch.c': 0.04,
  })
  const srgb = to(modifiedColor, sRGB)
  backgroundColor = serialize(srgb, { format: 'hex' })
} else {
  backgroundColor = colors.thumbnail.stack
}

Okay this is great, I'm happy you're way better with colors. It definitely helps with the funk I saw when using the accent color with less considerate adjustments. Let's go with this (I can push it up since I already have it locally), I tested with a few colors and like it

[codecov[bot]]

Codecov Report

:x: Patch coverage is 0% with 41 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
crates/graphql/src/object/library.rs	0.00%	33 Missing :warning:
crates/graphql/src/object/series.rs	0.00%	8 Missing :warning:

Files with missing lines	Coverage Δ
crates/graphql/src/object/series.rs	0.00% <0.00%> (ø)
crates/graphql/src/object/library.rs	0.00% <0.00%> (ø)

... and 47 files with indirect coverage changes

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.