From ca5bfb12dabb12615d416825240f911935ae10c5 Mon Sep 17 00:00:00 2001
From: DecafDev <40307803+decaf-dev@users.noreply.github.com>
Date: Mon, 9 Sep 2024 23:24:31 -0600
Subject: [PATCH] feat: update custom filter button

---
 .../app/components/filter-group-list.svelte   |  6 +--
 src/svelte/app/index.svelte                   | 50 +++++++++++--------
 2 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/src/svelte/app/components/filter-group-list.svelte b/src/svelte/app/components/filter-group-list.svelte
index 179f7db..5ac3b48 100644
--- a/src/svelte/app/components/filter-group-list.svelte
+++ b/src/svelte/app/components/filter-group-list.svelte
@@ -33,7 +33,7 @@
 			{/each}
 		{/if}
 		{#if groups.length === 0}
-			<span class="vault-explorer-empty-label">No groups</span>
+			<span class="vault-explorer-empty-label">No groups to display</span>
 		{/if}
 	</Stack>
 </div>
@@ -42,11 +42,11 @@
 	.vault-explorer-filter-group-list {
 		width: min(100%, 700px);
 		overflow-x: auto;
-		padding-bottom: 8px;
 	}
 
 	.vault-explorer-empty-label {
 		color: var(--text-faint);
-		font-size: var(--font-smaller);
+		font-size: var(--font-md);
+		margin-left: 4px;
 	}
 </style>
diff --git a/src/svelte/app/index.svelte b/src/svelte/app/index.svelte
index 53356f9..2f6d566 100644
--- a/src/svelte/app/index.svelte
+++ b/src/svelte/app/index.svelte
@@ -929,29 +929,25 @@
 <div class="vault-explorer" bind:this={ref}>
 	{#if shouldCollapseFilters === false}
 		<div class="vault-explorer-filters">
-			<Stack spacing="md" direction="column">
-				<Stack direction="column" spacing="sm">
-					<Flex justify="space-between">
-						{#if customFilter.isEnabled}
-							<FilterGroupList
-								groups={customFilter.groups}
-								on:groupClick={handleGroupClick}
-								on:groupContextMenu={handleGroupContextMenu}
-								on:groupDrop={handleGroupDrop}
-								on:groupDragOver={handleGroupDragOver}
-								on:groupDragStart={handleGroupDragStart}
-							/>
-						{/if}
-					</Flex>
-					<Flex justify="space-between">
-						<IconButton
-							ariaLabel="Change custom filter"
-							iconId="settings-2"
-							on:click={handleCustomFilterClick}
+			<Stack spacing="sm" direction="column">
+				<Flex justify="space-between">
+					{#if customFilter.isEnabled}
+						<FilterGroupList
+							groups={customFilter.groups}
+							on:groupClick={handleGroupClick}
+							on:groupContextMenu={handleGroupContextMenu}
+							on:groupDrop={handleGroupDrop}
+							on:groupDragOver={handleGroupDragOver}
+							on:groupDragStart={handleGroupDragStart}
 						/>
-						<Stack spacing="sm"></Stack>
-					</Flex>
-				</Stack>
+					{/if}
+				</Flex>
+				<div>
+					<button
+						class="vault-explorer-button"
+						on:click={handleCustomFilterClick}>Configure</button
+					>
+				</div>
 			</Stack>
 			<Spacer size="md" />
 		</div>
@@ -1058,4 +1054,14 @@
 	.vault-explorer-view-select {
 		flex: 1;
 	}
+
+	.vault-explorer-button {
+		background: none;
+		text-decoration: underline;
+		color: var(--text-faint);
+		font-size: var(--font-small);
+		border: none;
+		box-shadow: none;
+		padding: 0;
+	}
 </style>