From af5cd41dab86829ec116f8fb54c723b5cebdd1db Mon Sep 17 00:00:00 2001
From: Alex Perathoner <alex.perathoner@gmail.com>
Date: Wed, 23 Oct 2024 06:49:12 +0200
Subject: [PATCH] Added color based on status

---
 src/lib/nav/DetailedMenu.svelte    |  8 ++++++--
 src/lib/poster/ExtraDetails.svelte | 19 ++++++++++++++-----
 src/routes/(app)/+layout.svelte    |  2 +-
 src/vars.scss                      | 12 ++++++++++++
 4 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/lib/nav/DetailedMenu.svelte b/src/lib/nav/DetailedMenu.svelte
index 2bb5ade8..0d4f7ad1 100644
--- a/src/lib/nav/DetailedMenu.svelte
+++ b/src/lib/nav/DetailedMenu.svelte
@@ -17,7 +17,12 @@
   $: dve = $wlDetailedView;
 </script>
 
-<div class={`menu${$page.url?.pathname.startsWith("/search/") ? " on-search-page" : ""}`}>
+<div
+  class={`menu${$page.url?.pathname.startsWith("/search/") ? " on-search-page" : ""}`}
+  style="right: {$page.url?.pathname === '/' || $page.url?.pathname.startsWith('/search/')
+    ? 92
+    : 12}px;"
+>
   <div class="inner">
     <h4 class="norm sm-caps">Shown Details</h4>
     <button
@@ -50,7 +55,6 @@
 <style lang="scss">
   div.menu {
     width: 200px;
-    right: 92px;
 
     &:before {
       left: 3px;
diff --git a/src/lib/poster/ExtraDetails.svelte b/src/lib/poster/ExtraDetails.svelte
index ddfb398f..38d6c780 100644
--- a/src/lib/poster/ExtraDetails.svelte
+++ b/src/lib/poster/ExtraDetails.svelte
@@ -15,6 +15,16 @@
   $: settings = $userSettings;
   $: isUsingThumbs = settings && settings.ratingSystem === RatingSystem.Thumbs;
 
+  let statusColorMap = {
+    FINISHED: "var(--status-finished-color)",
+    PLANNED: "var(--status-planned-color)",
+    WATCHING: "var(--status-watching-color)",
+    HOLD: "var(--status-hold-color)",
+    DROPPED: "var(--status-dropped-color)"
+  };
+
+  $: backgroundColor = status !== undefined ? statusColorMap[status] : "";
+
   function formatDate(e: number) {
     if (!e) {
       return "Unknown";
@@ -26,8 +36,8 @@
   }
 </script>
 
-{#if ($page.url?.pathname === "/" || $page.url?.pathname.startsWith("/search/")) && details && dve && dve.length > 0}
-  <div class="extra-details">
+{#if details && dve && dve.length > 0}
+  <div class="extra-details" style="background-color: {backgroundColor}">
     <!--
       The `if` statements can't be on their own line to look pretty
       because that will cause whitespace in the generated markup,
@@ -90,7 +100,7 @@
 <style lang="scss">
   .extra-details {
     position: absolute;
-    bottom: 5px;
+    bottom: 0.5rem;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
@@ -98,9 +108,8 @@
     justify-content: center;
     align-items: center;
     font-size: 14px;
-    width: 160px;
+    width: 80%;
     color: white;
-    background-color: $poster-extra-detail-bg-color;
     border-radius: 10px;
     transition: opacity 100ms ease-out;
     pointer-events: none !important;
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 4d18f448..2c414586 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -252,7 +252,7 @@
     </div>
     <div class="btns">
       <!-- Detailed posters only supported on own watched list currently -->
-      {#if $page.url?.pathname === "/" || $page.url?.pathname.startsWith("/search/")}
+      {#if $page.url?.pathname === "/" || $page.url?.pathname.startsWith("/search/") || $page.url?.pathname.startsWith("/discover/") || $page.url?.pathname.startsWith("/person/")}
         <button
           class="plain other detailedView"
           on:click={() => {
diff --git a/src/vars.scss b/src/vars.scss
index 8117131b..89f4e6b6 100644
--- a/src/vars.scss
+++ b/src/vars.scss
@@ -10,6 +10,12 @@
   --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 {
@@ -24,6 +30,12 @@
   --placeholder-color: #8e8e8e;
   --poster-rating-color: black;
   --img-blend-multiply-bg-col: rgba(255, 255, 255, 0.03);
+
+  --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);
 }
 
 $bg-color: var(--bg-color);