From 4fc03eda4e1348279da57c915c19b399c5aa8b0d 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: Wed, 2 Apr 2025 18:14:20 +0200
Subject: [PATCH] Make New Issue button visually toggleable

---
 src/components/IssueSecondColumn.svelte | 17 +++++---
 src/components/OutlineButton.svelte     | 53 ++++++++++++++++++-------
 2 files changed, 49 insertions(+), 21 deletions(-)

diff --git a/src/components/IssueSecondColumn.svelte b/src/components/IssueSecondColumn.svelte
index 9dccc34b0..d83b81be8 100644
--- a/src/components/IssueSecondColumn.svelte
+++ b/src/components/IssueSecondColumn.svelte
@@ -136,13 +136,18 @@
 
     <OutlineButton
       variant="ghost"
-      disabled={$activeRouteStore.resource === "repo.createIssue"}
+      styleHeight="2.5rem"
+      active={$activeRouteStore.resource === "repo.createIssue"}
       onclick={() => {
-        void router.push({
-          resource: "repo.createIssue",
-          rid: repo.rid,
-          status,
-        });
+        if ($activeRouteStore.resource === "repo.createIssue") {
+          window.history.back();
+        } else {
+          void router.push({
+            resource: "repo.createIssue",
+            rid: repo.rid,
+            status,
+          });
+        }
       }}>
       <Icon name="plus" />New
     </OutlineButton>
diff --git a/src/components/OutlineButton.svelte b/src/components/OutlineButton.svelte
index ffd7efe00..025ab4533 100644
--- a/src/components/OutlineButton.svelte
+++ b/src/components/OutlineButton.svelte
@@ -6,9 +6,18 @@
     variant: "primary" | "secondary" | "ghost";
     onclick?: () => void;
     disabled?: boolean;
+    styleHeight?: "2rem" | "2.5rem";
+    active?: boolean;
   }
 
-  const { children, variant, onclick, disabled = false }: Props = $props();
+  const {
+    children,
+    variant,
+    onclick,
+    disabled = false,
+    styleHeight = "2rem",
+    active = false,
+  }: Props = $props();
 
   const style = $derived(
     `--button-color-1: var(--color-fill-${variant});` +
@@ -160,46 +169,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);
   }
 
@@ -224,7 +246,6 @@
   }
 
   .container {
-    height: 2rem;
     cursor: pointer;
     white-space: nowrap;
 
@@ -249,8 +270,10 @@
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
   class="container"
+  style:height={styleHeight}
   style:cursor={!disabled ? "pointer" : "default"}
   class:disabled
+  class:active
   onclick={!disabled ? onclick : undefined}
   role="button"
   tabindex="0"