Color by status by AlexPerathoner · Pull Request #672 · sbondCo/Watcharr

AlexPerathoner · 2024-10-23T04:49:27Z

Changes made

Added background color on Poster based on watch status

IRHM

Hi @AlexPerathoner thank you for implementing this!

I had some comments on some of the code. One of them I was unsure of if I was testing correctly, if it fixed anything im not seeing?

When I find some more time, I wanted to look into the colors too. I may just tweak around with them to see if we can get them to hide less of the poster while still being legible (like the old color). If not, I may implement a setting to allow toggling this on/off.

AlexPerathoner · 2025-08-18T22:52:42Z

Any update on this?

Copilot

Pull request overview

Adds status-based coloring for poster “Extra Details” and expands where the “Detailed View” UI can be used (search/person/discover), with a small menu positioning tweak.

Changes:

Introduces CSS variables intended for per-status colors.
Applies a status-based background color to the poster ExtraDetails overlay and adjusts its sizing/positioning.
Enables the “Detailed View” button on /person and /discover routes and adjusts the detailed menu alignment for those routes.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
src/vars.scss	Adds theme CSS custom properties + SCSS vars, including new `--status-*` color variables.
src/routes/(app)/+layout.svelte	Shows the “Detailed View” button on additional routes (`/person`, `/discover`).
src/lib/poster/ExtraDetails.svelte	Computes/applies a status-based background color and tweaks overlay layout.
src/lib/nav/DetailedMenu.svelte	Adjusts menu `right` positioning for `/person` and `/discover`.

Comments suppressed due to low confidence (1)

src/vars.scss:66

src/vars.scss largely duplicates variables already present in src/styles/norm.scss (CSS custom properties) and src/styles/_vars.scss (SCSS variables). Keeping parallel sources of truth for theme variables will make future changes error-prone. Prefer adding only the new status-related variables to the existing global theme files instead of introducing a second vars file.

:root {
	--bg-color: white;
	--bg-color-accent: rgb(180, 180, 180);
	--nav-color: rgba(255, 255, 255, 0.8);
	--text-color: black;
	--text-color-accent: rgb(90, 90, 90);
	--accent-color: rgba(128, 128, 128, 0.226);
	--accent-color-hover: rgba(46, 46, 46);
	--backdrop-filter: blur(4px) grayscale(80%);
	--backdrop-mix-blend-mode: multiply;
	--rating-color: black;
	--placeholder-color: #8e8e8e;
	--poster-rating-color: gold;
	--img-blend-multiply-bg-col: rgba(0, 0, 0, 0.85);

	--status-finished-color: rgba(123, 213, 85, 0.8);
	--status-planned-color: rgba(247, 154, 99, 0.8);
	--status-watching-color: rgba(61, 100, 242, 0.8);
	--status-hold-color: rgba(232, 93, 117, 0.8);
	--status-dropped-color: rgba(232, 93, 117, 0.8);
}

:root.theme-dark {
	--bg-color: rgb(15, 15, 15);
	--bg-color-accent: rgb(70, 70, 70);
	--nav-color: rgba(15, 15, 15, 0.438);
	--text-color: white;
	--text-color-accent: rgb(180, 180, 180);
	--accent-color: rgba(46, 46, 46);
	--accent-color-hover: rgba(255, 255, 255, 0.8);
	--backdrop-filter: blur(0.5px) grayscale(50%);
	--backdrop-mix-blend-mode: difference;
	--rating-color: gold;
	--placeholder-color: #8e8e8e;
	--poster-rating-color: black;
	--img-blend-multiply-bg-col: rgba(255, 255, 255, 0.03);
}

$bg-color: var(--bg-color);
$bg-color-accent: var(--bg-color-accent);
$text-color: var(--text-color);
$text-color-accent: var(--text-color-accent);
$placeholder-color: var(--placeholder-color);
$accent-color: var(--accent-color);
$accent-color-hover: var(--accent-color-hover);
$backdrop-filter: var(--backdrop-filter);
$backdrop-mix-blend-mode: var(--backdrop-mix-blend-mode);
$backdrop-mask-image: linear-gradient(
	to bottom,
	rgba(0, 0, 0, 1) 80%,
	rgba(0, 0, 0, 0)
);
$nav-color: var(--nav-color);
$nav-height: 71px; // How tall the nav is naturally, usefull in some places.
$poster-rating-color: var(--poster-rating-color);
$poster-extra-detail-bg-color: rgba(46, 46, 46, 0.5);
// Bg col of elements with image behind with mix-blend-mode: multiply where we want a little of image to come through.
$img-blend-multiply-bg-col: var(--img-blend-multiply-bg-col);
$warn: #f38755;
$error: #f3555a;
$success: #28a745;
$success-hover: #1e7e34;

// For ratings that are on bg-color.
$rating-color: var(--rating-color);

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-02T23:38:15Z

+:root {
+	--bg-color: white;
+	--bg-color-accent: rgb(180, 180, 180);
+	--nav-color: rgba(255, 255, 255, 0.8);
+	--text-color: black;
+	--text-color-accent: rgb(90, 90, 90);
+	--accent-color: rgba(128, 128, 128, 0.226);
+	--accent-color-hover: rgba(46, 46, 46);
+	--backdrop-filter: blur(4px) grayscale(80%);
+	--backdrop-mix-blend-mode: multiply;
+	--rating-color: black;
+	--placeholder-color: #8e8e8e;
+	--poster-rating-color: gold;
+	--img-blend-multiply-bg-col: rgba(0, 0, 0, 0.85);
+
+	--status-finished-color: rgba(123, 213, 85, 0.8);
+	--status-planned-color: rgba(247, 154, 99, 0.8);
+	--status-watching-color: rgba(61, 100, 242, 0.8);
+	--status-hold-color: rgba(232, 93, 117, 0.8);
+	--status-dropped-color: rgba(232, 93, 117, 0.8);


This file defines the CSS custom properties used for status colors (e.g. --status-finished-color), but the app’s global CSS variables appear to be defined in src/styles/norm.scss (imported from src/routes/+layout.svelte), and SCSS globals are prepended from src/styles/_vars.scss via svelte.config.js. src/vars.scss doesn’t appear to be imported anywhere, so these --status-* variables likely won’t exist at runtime and the new poster coloring won’t work. Either move these :root additions into src/styles/norm.scss or ensure this file is included in the global stylesheet.

Copilot · 2026-03-02T23:38:15Z


-{#if (page.url?.pathname === "/" || page.url?.pathname.startsWith("/search")) && store.wlDetailedView && store.wlDetailedView.length > 0}
-	<div class="extra-details">
+{#if (page.url?.pathname === "/" || page.url?.pathname.startsWith("/search") || page.url?.pathname.startsWith("/person") || page.url?.pathname.startsWith("/discover")) && details && store.wlDetailedView && store.wlDetailedView.length > 0}


details is referenced in this {#if ...} condition but it isn’t defined anywhere in this component (it’s not part of PosterExtraDetails and isn’t destructured from $props()). This will cause a compile/runtime error. Remove the details && guard or replace it with the correct prop/variable you intended to check.

Suggested change

{#if (page.url?.pathname === "/" || page.url?.pathname.startsWith("/search") || page.url?.pathname.startsWith("/person") || page.url?.pathname.startsWith("/discover")) && details && store.wlDetailedView && store.wlDetailedView.length > 0}

{#if (page.url?.pathname === "/" || page.url?.pathname.startsWith("/search") || page.url?.pathname.startsWith("/person") || page.url?.pathname.startsWith("/discover")) && store.wlDetailedView && store.wlDetailedView.length > 0}

Copilot · 2026-03-02T23:38:15Z

+		DROPPED: "var(--status-dropped-color)",
+	};
+
+	let backgroundColor = status !== undefined ? statusColorMap[status] : "";


backgroundColor is computed once at component initialization, so it won’t update when status changes (e.g., after the user updates the watched status). Make this value reactive (e.g., derive it from status) so the background color stays in sync.

Suggested change

let backgroundColor = status !== undefined ? statusColorMap[status] : "";

let backgroundColor = $derived(

status !== undefined ? statusColorMap[status] : "",

);

Copilot · 2026-03-02T23:38:16Z

+	<div class="extra-details" style="background-color: {backgroundColor}">
 		<!--


The inline style="background-color: {backgroundColor}" will override the SCSS background-color: $poster-extra-detail-bg-color;. When status is undefined or not in the map, backgroundColor becomes an empty/undefined value and the element may end up with no background (hurting readability). Consider falling back to $poster-extra-detail-bg-color or only applying the inline background color when a mapped status color exists.

AlexPerathoner force-pushed the feature/color-by-status branch from af5cd41 to 10602b5 Compare November 5, 2024 23:38

IRHM requested changes Dec 1, 2024

View reviewed changes

Comment thread src/lib/poster/ExtraDetails.svelte Outdated

Comment thread src/lib/nav/DetailedMenu.svelte Outdated

IRHM self-assigned this Dec 2, 2024

IRHM added the enhancement New feature or request label Dec 2, 2024

AlexPerathoner force-pushed the feature/color-by-status branch from 5bdc826 to dbaf09c Compare June 2, 2025 15:54

AlexPerathoner requested a review from IRHM June 20, 2025 23:22

ExtraDetails: Add backup background color

c2b2379

Copilot AI review requested due to automatic review settings March 2, 2026 23:34

AlexPerathoner force-pushed the feature/color-by-status branch from dbaf09c to c2b2379 Compare March 2, 2026 23:34

Copilot started reviewing on behalf of AlexPerathoner March 2, 2026 23:34 View session

Copilot AI reviewed Mar 2, 2026

View reviewed changes

Navigation Menu

Uh oh!

Color by status - #672

Color by status#672
AlexPerathoner wants to merge 1 commit into
sbondCo:devfrom
AlexPerathoner:feature/color-by-status

AlexPerathoner commented Oct 23, 2024

Uh oh!

IRHM left a comment

Uh oh!

Uh oh!

Uh oh!

AlexPerathoner commented Aug 18, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Copilot AI Mar 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	{#if (page.url?.pathname === "/" \|\| page.url?.pathname.startsWith("/search") \|\| page.url?.pathname.startsWith("/person") \|\| page.url?.pathname.startsWith("/discover")) && details && store.wlDetailedView && store.wlDetailedView.length > 0}
	{#if (page.url?.pathname === "/" \|\| page.url?.pathname.startsWith("/search") \|\| page.url?.pathname.startsWith("/person") \|\| page.url?.pathname.startsWith("/discover")) && store.wlDetailedView && store.wlDetailedView.length > 0}

-	let backgroundColor = status !== undefined ? statusColorMap[status] : "";
+	let backgroundColor = $derived(
+		status !== undefined ? statusColorMap[status] : "",
+	);

		<div class="extra-details" style="background-color: {backgroundColor}">
		<!--

Uh oh!

Conversation

AlexPerathoner commented Oct 23, 2024

Changes made

Uh oh!

IRHM left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

AlexPerathoner commented Aug 18, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants