From 98568fd2ff32d802b2fcc5be261fa0c532829f64 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: Mon, 30 Oct 2023 13:49:36 +0100
Subject: [PATCH] Improve collapse/expand button visuals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>
---
 src/components/File.svelte          |  1 +
 src/views/projects/Changeset.svelte | 21 ++++++++++++---------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/File.svelte b/src/components/File.svelte
index c19907672..c6dbd7ece 100644
--- a/src/components/File.svelte
+++ b/src/components/File.svelte
@@ -63,6 +63,7 @@
   <div class="left">
     {#if collapsable}
       <ExpandButton
+        {expanded}
         on:toggle={async () => {
           expanded = !expanded;
           if (!expanded) {
diff --git a/src/views/projects/Changeset.svelte b/src/views/projects/Changeset.svelte
index 8e9eecbb0..e350b1de0 100644
--- a/src/views/projects/Changeset.svelte
+++ b/src/views/projects/Changeset.svelte
@@ -9,10 +9,10 @@
 
   import { pluralize } from "@app/lib/pluralize";
 
-  import Button from "@app/components/Button.svelte";
   import FileDiff from "@app/views/projects/Changeset/FileDiff.svelte";
   import FileLocationChange from "@app/views/projects/Changeset/FileLocationChange.svelte";
   import Observer, { intersection } from "@app/components/Observer.svelte";
+  import IconButton from "@app/components/IconButton.svelte";
 
   export let diff: Diff;
   export let files: Record<string, CommitBlob>;
@@ -96,14 +96,17 @@
       {pluralize("deletion", diff.stats.deletions)}
     </span>
   </summary>
-  <div style:display="flex" style:gap="1rem">
-    <Button variant="outline" on:click={() => (expanded = true)}>
-      Expand all
-    </Button>
-    <Button variant="outline" on:click={() => (expanded = false)}>
-      Collapse all
-    </Button>
-  </div>
+  {#if diff.stats.filesChanged > 1}
+    <div style:display="flex" style:gap="1rem">
+      <IconButton on:click={() => (expanded = !expanded)}>
+        {#if expanded === true}
+          Collapse all
+        {:else}
+          Expand all
+        {/if}
+      </IconButton>
+    </div>
+  {/if}
 </div>
 
 <div class="diff-list">