A bit of cleanup and add min height to bookshelf

src/ui/components/bookshelf/Book.svelte

@@ -76,12 +76,8 @@
 		</BookTilted>
 	{:else if orientation === "on-display"}
 		<BookOnDisplay color={color.hex} {onClick}>
-			<div
-				class="book-display-crease"
-				style:--book-color={color.hex}
-			></div>
 			{#if title}
-				<BookText {title} {subtitle} />
+				<BookText {title} {subtitle} allowWrap />
 				<p class="bookshelf__book-author">By: {author}</p>
 			{/if}
 		</BookOnDisplay>
@@ -110,15 +106,6 @@
 {/if}
 
 <style lang="scss">
-	.book-display-crease {
-		background-color: color-mix(in srgb, var(--book-color), black 14%);
-		width: 5px;
-		height: 100%;
-		position: absolute;
-		top: 0;
-		left: 8px;
-	}
-
 	div.bookshelf__book-wrapper {
 		background: var(--book-color);
 		border-left: 2px solid var(--book-border-left-color);
@@ -136,7 +123,7 @@
 			&:before {
 				content: " ";
 				display: block;
-				background: var(--book-background-color);
+				background: var(--book-band-color);
 				height: 100%;
 				width: calc(var(--book-width));
 				border-radius: 4px;
@@ -147,7 +134,8 @@
 			}
 		}
 
-		&.dual-top-bands {
+		&.dual-top-bands,
+		&.split-bands {
 			&:after,
 			&:before {
 				content: "";
@@ -159,6 +147,16 @@
 				left: -2px;
 			}
 
+			&:before {
+				z-index: 2;
+			}
+
+			:global(.bookshelf__book-content) {
+				height: calc(var(--book-width));
+			}
+		}
+
+		&.dual-top-bands {
 			&:after {
 				height: 10px;
 				top: 8px;
@@ -167,56 +165,30 @@
 			&:before {
 				height: 15px;
 				top: 26px;
-				z-index: 2;
 			}
 
 			:global(.bookshelf__book-content) {
-				height: calc(var(--book-width));
+				width: calc(200px - 61px) !important;
-				width: calc(200px - 41px) !important;
+				margin: 40px var(--book-width);
-				margin: 41px var(--book-width);
 			}
 		}
 
 		&.split-bands {
 			&:after,
 			&:before {
-				content: "";
-				display: block;
-				background: var(--book-band-color);
 				height: 20px;
-				width: calc(100% + 4px);
-
-				position: absolute;
-				left: -2px;
 			}
 
 			&:after {
-				content: "";
-				display: block;
-				background: var(--book-band-color);
-				height: 20px;
-				width: calc(100% + 4px);
-
-				position: absolute;
 				top: 10px;
-				left: -2px;
 			}
 
 			&:before {
-				content: "";
-				display: block;
-				background: var(--book-band-color);
-				height: 20px;
-				width: calc(100% + 4px);
-
-				position: absolute;
 				bottom: 10px;
-				z-index: 2;
 			}
 
 			:global(.bookshelf__book-content) {
-				height: calc(var(--book-width));
+				width: calc(200px - 62px) !important;
-				width: calc(200px - 60px) !important;
 				margin: 30px var(--book-width);
 			}
 		}

src/ui/components/bookshelf/BookOnDisplay.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
+	import chroma from "chroma-js";
 
 	interface Props {
 		children?: Snippet;
@@ -8,21 +9,57 @@
 	}
 
 	let { children, color = "green", onClick }: Props = $props();
+
+	let backgroundColor = $derived(chroma(color));
+	let bandColor = $derived(chroma(color).mix("black", 0.14));
 </script>
 
 <div
 	class="bookshelf__book-wrapper bookshelf__book-onDisplay"
-	style:--book-color={color}
+	style:--book-color={backgroundColor.css()}
+	style:--book-band-color={bandColor.css()}
 	onclick={onClick}
 	onkeydown={(ev) => ev.key === "Enter" && onClick?.()}
 	role="link"
 	tabindex="0"
 >
+	<div class="book-display-crease"></div>
 	{@render children?.()}
 </div>
 
 <style lang="scss">
-	div {
+	$band-width: 5px;
+	$band-offset: 8px;
+
+	div.bookshelf__book-onDisplay {
+		width: 150px;
+		height: 200px;
 		background: var(--book-color);
+		display: flex;
+		flex-flow: column wrap;
+		justify-content: space-between;
+		align-items: center;
+		text-align: center;
+		margin: 20px 2px 10px 2px;
+		position: relative;
+
+		padding-left: calc($band-offset + $band-width);
+		padding-right: 8px;
+
+		&:before {
+			content: " ";
+			display: block;
+			background: var(--book-band-color);
+			width: $band-width;
+			height: 100%;
+			position: absolute;
+			top: 0;
+			left: $band-offset;
+		}
+
+		&:global(.bookshelf__book-author) {
+			font-size: 0.8em;
+			margin-left: 13px;
+		}
 	}
 </style>

src/ui/components/bookshelf/BookStackElement.svelte

@@ -27,24 +27,112 @@
 			? Color.fromName(colorRaw).darken()
 			: Color.fromCSSColor(colorRaw),
 	);
+
+	const backgroundColor = $derived(
+		design === "colored-spine"
+			? color.chroma.mix("black", 0.14)
+			: color.chroma,
+	);
+	const borderLeftColor = $derived(color.chroma.mix("white", 0.04));
+	const borderRightColor = $derived(color.chroma.mix("black", 0.04));
+	const bandColor = $derived(color.chroma.mix("black", 0.14));
+	const textColor = $derived(new Color(backgroundColor).contrastColor.hex);
 </script>
 
 <li class="bookshelf__bookstack-elem">
-	{#if design === "split-bands"}
+	<div
-		<BookStackSplitBands color={color.hex} {onClick}>
+		class="bookshelf__book-wrapper"
-			<BookText {title} {subtitle} />
+		class:default={design === "default"}
-		</BookStackSplitBands>
+		class:colored-spine={design === "colored-spine"}
-	{:else if design === "dual-top-bands"}
+		class:dual-top-bands={design === "dual-top-bands"}
-		<BookStackDualTopBands color={color.hex} {onClick}>
+		class:split-bands={design === "split-bands"}
-			<BookText {title} {subtitle} />
+		style:--book-color={backgroundColor.css()}
-		</BookStackDualTopBands>
+		style:--book-border-left-color={borderLeftColor.css()}
-	{:else if design === "colored-spine"}
+		style:--book-border-right-color={borderRightColor.css()}
-		<BookStackColoredSpine color={color.hex} {onClick}>
+		style:--book-band-color={bandColor.css()}
-			<BookText {title} {subtitle} />
+		style:color={textColor}
-		</BookStackColoredSpine>
+		onclick={onClick}
-	{:else}
+		onkeydown={(ev) => ev.key === "Enter" && onClick?.()}
-		<BookStackDefault color={color.hex} {onClick}>
+		role="link"
-			<BookText {title} {subtitle} />
+		tabindex="0"
-		</BookStackDefault>
+	>
-	{/if}
+		<BookText {title} {subtitle} />
+	</div>
 </li>
+
+<style lang="scss">
+	div {
+		background: var(--book-color);
+		border-left: 2px solid var(--book-border-left-color);
+		border-right: 2px solid var(--book-border-right-color);
+
+		&.colored-spine {
+			&:before {
+				content: " ";
+				display: block;
+				background: var(--book-band-color);
+				height: 40px;
+				width: calc(100% + 4px);
+				border-radius: 4px;
+
+				position: absolute;
+				top: 0px;
+				left: -2px;
+			}
+		}
+
+		&.split-bands,
+		&.dual-top-bands {
+			&:after,
+			&:before {
+				content: " ";
+				display: block;
+				background: var(--book-band-color);
+				height: 40px;
+				border-radius: 4px;
+
+				position: absolute;
+				top: 0px;
+			}
+
+			&:before {
+				z-index: 2;
+			}
+		}
+
+		&.split-bands {
+			&:after {
+				width: 20px;
+				left: 10px;
+			}
+
+			&:before {
+				width: 20px;
+				right: 10px;
+			}
+
+			:global(.bookshelf__book-content) {
+				width: calc(200px - 60px) !important;
+				margin: 0 30px;
+			}
+		}
+
+		&.dual-top-bands {
+			&:after {
+				width: 10px;
+				left: 6px;
+			}
+
+			&:before {
+				width: 15px;
+				left: 24px;
+				z-index: 2;
+			}
+
+			:global(.bookshelf__book-content) {
+				width: calc(200px - 31px) !important;
+				margin: 0 31px;
+			}
+		}
+	}
+</style>

src/ui/components/bookshelf/BookText.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { fitText } from "@ui/directives";
+	import { wrap } from "module";
 
 	interface Props {
 		title?: string;
 		subtitle?: string;
+		allowWrap?: boolean;
 	}
 
-	let { title, subtitle }: Props = $props();
+	let { title, subtitle, allowWrap }: Props = $props();
 </script>
 
 <div
@@ -16,8 +18,12 @@
 	{#if title}
 		<h2
 			class="bookshelf__book-title"
-			style:width="100%"
+			class:wrap={allowWrap}
-			use:fitText={{ minFontSize: 12, maxFontSize: 16 }}
+			use:fitText={{
+				minFontSize: 12,
+				maxFontSize: 16,
+				multiLine: allowWrap,
+			}}
 		>
 			{title}
 		</h2>
@@ -25,8 +31,11 @@
 	{#if subtitle}
 		<h4
 			class="bookshelf__book-subtitle"
-			style:width="100%"
+			use:fitText={{
-			use:fitText={{ minFontSize: 12, maxFontSize: 16 }}
+				minFontSize: 10,
+				maxFontSize: 14,
+				multiLine: allowWrap,
+			}}
 		>
 			{subtitle}
 		</h4>
@@ -36,6 +45,8 @@
 <style lang="scss">
 	.bookshelf__book-title,
 	.bookshelf__book-subtitle {
+		width: 100% !important;
+
 		:global(.textFitted) {
 			width: 100%;
 			word-wrap: break-word;
@@ -43,11 +54,6 @@
 	}
 
 	.bookshelf__book-subtitle {
-		:global(.textFitted) {
+		overflow: hidden;
-			width: 100%;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-		}
 	}
 </style>

src/ui/components/bookshelf/bookshelf.scss

@@ -12,6 +12,7 @@ $bookEdge: 2px;
 	margin: 0 auto;
 	overflow: hidden;
 	background-size: 10px 230px;
+	min-height: 230px;
 
 	.bookshelf__bookStack-wrapper {
 		width: 200px;
@@ -186,16 +187,6 @@ $bookEdge: 2px;
 	}
 
 	.bookshelf__book-onDisplay {
-		width: 150px;
-		height: 200px;
-		display: flex;
-		flex-flow: column wrap;
-		justify-content: space-between;
-		align-items: center;
-		text-align: center;
-		margin: 20px 2px 10px 2px;
-		position: relative;
-
 		.bookshelf__book-content {
 			width: calc(100% - 11px);
 			margin-left: 11px;