Show inbox button in active state when showing inbox — radicle-desktop

👉 Workflow runs 👉 Branch on GitHub

   import Icon from "./Icon.svelte";
   import NakedButton from "./NakedButton.svelte";
   const activeRouteStore = router.activeRouteStore;
   interface Props {
     publicKey: string;
     center?: Snippet;

         <NakedButton
           variant="ghost"
           stylePadding="0 4px"
           active={$activeRouteStore.resource === "inbox"}
           onclick={() => router.push({ resource: "inbox" })}>
           <Icon name="inbox" />
         </NakedButton>

     onclick?: (e: MouseEvent) => void;
     styleHeight?: string;
     stylePadding?: string;
     active?: boolean;
   }
   const {

     onclick,
     styleHeight = "2rem",
     stylePadding = "0 8px",
     active = false,
   }: Props = $props();
   const style = $derived(

     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);
   }

 <div
   class="container"
   class:disabled
   class:active
   onclick={!disabled ? onclick : undefined}
   {title}
   role="button"

       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(args),
     }).then(async response => {
       if (response.status === 404) {
         console.log("Got a 404 response:", response);
         return null;
       }
       const json = await response.json();
       if (!response.ok) {
         throw json;