From 6cbd6336dc06dacdf6d84f6c4ab0e042f8d36439 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Thu, 13 Feb 2025 08:54:16 -0600
Subject: [PATCH] Show inbox button in active state when showing inbox

---
 src/components/Header.svelte      |  3 +++
 src/components/NakedButton.svelte | 42 +++++++++++++++++++++----------
 2 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 17b80da90..279e4fdcd 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -8,6 +8,8 @@
   import Icon from "./Icon.svelte";
   import NakedButton from "./NakedButton.svelte";
 
+  const activeRouteStore = router.activeRouteStore;
+
   interface Props {
     publicKey: string;
     center?: Snippet;
@@ -94,6 +96,7 @@
         <NakedButton
           variant="ghost"
           stylePadding="0 4px"
+          active={$activeRouteStore.resource === "inbox"}
           onclick={() => router.push({ resource: "inbox" })}>
           <Icon name="inbox" />
         </NakedButton>
diff --git a/src/components/NakedButton.svelte b/src/components/NakedButton.svelte
index 1be3b068b..45a730b87 100644
--- a/src/components/NakedButton.svelte
+++ b/src/components/NakedButton.svelte
@@ -9,6 +9,7 @@
     onclick?: (e: MouseEvent) => void;
     styleHeight?: string;
     stylePadding?: string;
+    active?: boolean;
   }
 
   const {
@@ -19,6 +20,7 @@
     onclick,
     styleHeight = "2rem",
     stylePadding = "0 8px",
+    active = false,
   }: Props = $props();
 
   const style = $derived(
@@ -147,46 +149,59 @@
     background-color: var(--button-color-1);
   }
 
-  .container:active:not(.disabled) .p1-3 {
+  .container:active:not(.disabled) .p1-3,
+  .container.active:not(.disabled) .p1-3 {
     background-color: var(--button-color-1);
   }
 
-  .container:active:not(.disabled) .p2-2 {
+  .container:active:not(.disabled) .p2-2,
+  .container.active:not(.disabled) .p2-2 {
     background-color: var(--button-color-1);
   }
-  .container:active:not(.disabled) .p2-3 {
+  .container:active:not(.disabled) .p2-3,
+  .container.active:not(.disabled) .p2-3 {
     background-color: var(--button-color-3);
   }
-  .container:active:not(.disabled) .p2-4 {
+  .container:active:not(.disabled) .p2-4,
+  .container.active:not(.disabled) .p2-4 {
     background-color: var(--button-color-1);
   }
 
-  .container:active:not(.disabled) .p3-1 {
+  .container:active:not(.disabled) .p3-1,
+  .container.active:not(.disabled) .p3-1 {
     background-color: var(--button-color-1);
   }
-  .container:active:not(.disabled) .p3-2 {
+  .container:active:not(.disabled) .p3-2,
+  .container.active:not(.disabled) .p3-2 {
     background-color: var(--button-color-3);
   }
-  .container:active:not(.disabled) .p3-3 {
+  .container:active:not(.disabled) .p3-3,
+  .container.active:not(.disabled) .p3-3 {
     background-color: var(--button-color-1);
   }
-  .container:active:not(.disabled) .p3-4 {
+  .container:active:not(.disabled) .p3-4,
+  .container.active:not(.disabled) .p3-4 {
     background-color: var(--button-color-2);
   }
-  .container:active:not(.disabled) .p3-5 {
+  .container:active:not(.disabled) .p3-5,
+  .container.active:not(.disabled) .p3-5 {
     background-color: var(--button-color-1);
   }
 
-  .container:active:not(.disabled) .p4-2 {
+  .container:active:not(.disabled) .p4-2,
+  .container.active:not(.disabled) .p4-2 {
     background-color: var(--button-color-1);
   }
-  .container:active:not(.disabled) .p4-3 {
+  .container:active:not(.disabled) .p4-3,
+  .container.active:not(.disabled) .p4-3 {
     background-color: var(--button-color-2);
   }
-  .container:active:not(.disabled) .p4-4 {
+  .container:active:not(.disabled) .p4-4,
+  .container.active:not(.disabled) .p4-4 {
     background-color: var(--button-color-1);
   }
-  .container:active:not(.disabled) .p5-3 {
+  .container:active:not(.disabled) .p5-3,
+  .container.active:not(.disabled) .p5-3 {
     background-color: var(--button-color-1);
   }
 
@@ -221,6 +236,7 @@
 <div
   class="container"
   class:disabled
+  class:active
   onclick={!disabled ? onclick : undefined}
   {title}
   role="button"