From a4126e2453c5bd192308ca11b7af25f762ffc8bc Mon Sep 17 00:00:00 2001
From: Trey Wallis <40307803+trey-wallis@users.noreply.github.com>
Date: Wed, 1 May 2024 02:14:19 -0600
Subject: [PATCH] feat: update property filter app UI (#25)

---
 .../components/base-view.svelte               | 87 -------------------
 .../components/group-button.svelte            | 26 ++++++
 .../components/group-edit-view.svelte         | 41 ++++-----
 .../components/group-list.svelte              | 65 ++++++++++++++
 .../components/property-filter.svelte         | 11 ++-
 src/svelte/properties-filter-app/index.svelte | 59 ++++++-------
 src/svelte/shared/components/divider.svelte   | 21 ++++-
 src/svelte/shared/components/flex.svelte      |  3 +-
 8 files changed, 162 insertions(+), 151 deletions(-)
 delete mode 100644 src/svelte/properties-filter-app/components/base-view.svelte
 create mode 100644 src/svelte/properties-filter-app/components/group-button.svelte
 create mode 100644 src/svelte/properties-filter-app/components/group-list.svelte

diff --git a/src/svelte/properties-filter-app/components/base-view.svelte b/src/svelte/properties-filter-app/components/base-view.svelte
deleted file mode 100644
index 19090b9..0000000
--- a/src/svelte/properties-filter-app/components/base-view.svelte
+++ /dev/null
@@ -1,87 +0,0 @@
-<script lang="ts">
-	import IconButton from "src/svelte/shared/components/icon-button.svelte";
-	import Stack from "src/svelte/shared/components/stack.svelte";
-	import Switch from "src/svelte/shared/components/switch.svelte";
-	import { PropertyFilterGroup } from "src/types";
-
-	export let groups: PropertyFilterGroup[];
-	export let selectedGroup: PropertyFilterGroup | undefined;
-
-	import { createEventDispatcher } from "svelte";
-	import Spacer from "src/svelte/shared/components/spacer.svelte";
-	import TabList from "src/svelte/shared/components/tab-list.svelte";
-	import Tab from "src/svelte/shared/components/tab.svelte";
-	const dispatch = createEventDispatcher();
-
-	function handleGroupToggle() {
-		dispatch("groupToggle");
-	}
-
-	function handleAddGroupClick() {
-		dispatch("addGroupClick");
-	}
-
-	function handleDeleteGroupClick() {
-		dispatch("deleteGroupClick");
-	}
-
-	function handleEditClick() {
-		dispatch("editClick");
-	}
-
-	function handleGroupClick(id: string) {
-		dispatch("groupClick", { id });
-	}
-
-	$: selectedIndex =
-		groups.findIndex((group) => group.id === selectedGroup?.id) ?? 0;
-</script>
-
-<div>
-	{#if groups.length > 0}
-		<Stack spacing="sm" align="center">
-			<TabList variant="line" initialSelectedIndex={selectedIndex}>
-				{#each groups as group (group.id)}
-					<Tab on:click={() => handleGroupClick(group.id)}
-						>{group.name}</Tab
-					>
-				{/each}
-			</TabList>
-			<Spacer size="md" />
-		</Stack>
-	{/if}
-	{#if selectedGroup == undefined}
-		<IconButton
-			ariaLabel="Add property filter group"
-			iconId="plus"
-			on:click={() => handleAddGroupClick()}
-		/>
-	{/if}
-	{#if selectedGroup !== undefined}
-		<Spacer size="sm" direction="vertical" />
-		<Stack align="center" spacing="sm">
-			<IconButton
-				ariaLabel="Edit property filter group"
-				iconId="pencil"
-				on:click={() => handleEditClick()}
-			/>
-			<IconButton
-				ariaLabel="Add property filter group"
-				iconId="plus"
-				on:click={() => handleAddGroupClick()}
-			/>
-			<Stack justify="flex-end" width="100%" align="center" spacing="sm">
-				<Switch
-					ariaLabel="Toggle property filter group"
-					value={selectedGroup.isEnabled}
-					on:change={() => handleGroupToggle()}
-				/>
-				<IconButton
-					ariaLabel="Delete property filter group"
-					iconId="trash"
-					on:click={() => handleDeleteGroupClick()}
-				/>
-			</Stack>
-		</Stack>
-	{/if}
-</div>
diff --git a/src/svelte/properties-filter-app/components/group-button.svelte b/src/svelte/properties-filter-app/components/group-button.svelte
new file mode 100644
index 0000000..7c3f4d2
--- /dev/null
+++ b/src/svelte/properties-filter-app/components/group-button.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	export let name: string;
+	export let isSelected: boolean;
+
+	$: className =
+		"vault-explorer-group-button" +
+		(isSelected ? " vault-explorer-group-button--active" : "");
+</script>
+
+<button class={className} on:click>{name}</button>
+
+<style>
+	.vault-explorer-group-button {
+		all: unset;
+		width: calc(100% - 12px);
+		padding: 4px 6px;
+	}
+
+	.vault-explorer-group-button:hover {
+		background-color: var(--background-modifier-hover);
+	}
+
+	.vault-explorer-group-button--active {
+		background-color: var(--background-modifier-hover);
+	}
+</style>
diff --git a/src/svelte/properties-filter-app/components/group-edit-view.svelte b/src/svelte/properties-filter-app/components/group-edit-view.svelte
index 642ecb2..77cbdf1 100644
--- a/src/svelte/properties-filter-app/components/group-edit-view.svelte
+++ b/src/svelte/properties-filter-app/components/group-edit-view.svelte
@@ -2,13 +2,8 @@
 	import Divider from "src/svelte/shared/components/divider.svelte";
 	import IconButton from "src/svelte/shared/components/icon-button.svelte";
 	import Stack from "src/svelte/shared/components/stack.svelte";
-	import { generateUUID } from "src/svelte/shared/services/uuid";
 
-	import {
-		PropertyFilterGroup,
-		TextFilterCondition,
-		TextPropertyFilter,
-	} from "src/types";
+	import { PropertyFilterGroup } from "src/types";
 	import PropertyFilterList from "./property-filter-list.svelte";
 
 	import { createEventDispatcher } from "svelte";
@@ -27,27 +22,18 @@
 		const name = (e.target as HTMLInputElement).value;
 		dispatch("groupNameChange", { name });
 	}
-
-	function handleBackClick() {
-		dispatch("backClick");
-	}
 </script>
 
-<Stack direction="column" align="flex-start" spacing="sm">
-	<Stack spacing="sm">
-		<IconButton
-			ariaLabel="Back"
-			iconId="arrow-left"
-			on:click={handleBackClick}
-		/>
+<Stack width="100%" direction="column" align="flex-start" spacing="sm">
+	<div class="vault-explorer-group-edit-view__header">
 		<input
 			type="text"
 			value={selectedGroup.name}
 			on:change={handleGroupNameChange}
 		/>
-	</Stack>
+	</div>
 	<Divider />
-	<div class="vault-explorer-property-filter-content">
+	<div class="vault-explorer-group-edit-view__body">
 		{#if selectedGroup.filters.length > 0}
 			<PropertyFilterList
 				filters={selectedGroup.filters}
@@ -59,10 +45,10 @@
 				on:filterToggle
 				on:filterDeleteClick
 			/>
-			<Spacer direction="vertical" size="md" />
+			<Spacer direction="vertical" size="sm" />
 		{/if}
 		<IconButton
-			ariaLabel="Add filter"
+			ariaLabel="Add property filter"
 			iconId="plus"
 			on:click={handleAddFilterClick}
 		/>
@@ -70,10 +56,13 @@
 </Stack>
 
 <style>
-	.vault-explorer-property-filter-content {
-		width: 100%;
-		overflow: auto;
-		padding: 5px;
-		/* padding-top: 5px; */
+	.vault-explorer-group-edit-view__header {
+		padding: 5px 10px;
+	}
+
+	.vault-explorer-group-edit-view__body {
+		padding: 5px 10px;
+		overflow-y: auto;
+		max-height: 200px;
 	}
 </style>
diff --git a/src/svelte/properties-filter-app/components/group-list.svelte b/src/svelte/properties-filter-app/components/group-list.svelte
new file mode 100644
index 0000000..c69947b
--- /dev/null
+++ b/src/svelte/properties-filter-app/components/group-list.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import IconButton from "src/svelte/shared/components/icon-button.svelte";
+	import Stack from "src/svelte/shared/components/stack.svelte";
+	import { PropertyFilterGroup } from "src/types";
+
+	export let groups: PropertyFilterGroup[];
+	export let selectedGroup: PropertyFilterGroup | undefined;
+
+	import { createEventDispatcher } from "svelte";
+	import GroupButton from "./group-button.svelte";
+	import Flex from "src/svelte/shared/components/flex.svelte";
+	const dispatch = createEventDispatcher();
+
+	function handleAddGroupClick() {
+		dispatch("addGroupClick");
+	}
+
+	function handleDeleteGroupClick() {
+		dispatch("deleteGroupClick");
+	}
+
+	function handleGroupClick(id: string) {
+		dispatch("groupClick", { id });
+	}
+</script>
+
+<div class="vault-explorer-group-list-container">
+	<Stack direction="column" spacing="sm">
+		<Stack spacing="sm">
+			<IconButton
+				ariaLabel="Add property filter group"
+				iconId="plus"
+				on:click={() => handleAddGroupClick()}
+			/>
+			<IconButton
+				ariaLabel="Delete property filter group"
+				iconId="trash"
+				on:click={() => handleDeleteGroupClick()}
+			/>
+		</Stack>
+		<div class="vault-explorer-group-list">
+			<Flex direction="column" width="100px">
+				{#each groups as group (group.id)}
+					<GroupButton
+						name={group.name}
+						isSelected={selectedGroup?.id === group.id}
+						on:click={() => handleGroupClick(group.id)}
+					/>
+				{/each}
+			</Flex>
+		</div>
+	</Stack>
+</div>
+
+<style>
+	.vault-explorer-group-list-container {
+		margin-right: 5px;
+	}
+
+	.vault-explorer-group-list {
+		max-height: 220px;
+		height: 100%;
+		overflow-y: auto;
+	}
+</style>
diff --git a/src/svelte/properties-filter-app/components/property-filter.svelte b/src/svelte/properties-filter-app/components/property-filter.svelte
index 225fb51..0566e15 100644
--- a/src/svelte/properties-filter-app/components/property-filter.svelte
+++ b/src/svelte/properties-filter-app/components/property-filter.svelte
@@ -33,6 +33,7 @@
 	import store from "src/svelte/shared/services/store";
 	import VaultExplorerPlugin from "src/main";
 	import { ObsidianProperty } from "src/obsidian/types";
+	import Wrap from "src/svelte/shared/components/wrap.svelte";
 	const dispatch = createEventDispatcher();
 
 	function handleDeleteClick() {
@@ -94,7 +95,7 @@
 </script>
 
 <div class="vault-explorer-property-filter">
-	<Stack spacing="md">
+	<Wrap spacingX="sm" spacingY="sm">
 		<select value={type} on:change={handlePropertyTypeChange}>
 			{#each Object.values(PropertyFilterType) as type}
 				<option value={type}>{type}</option>
@@ -118,9 +119,13 @@
 		{/if}
 		<Stack spacing="sm" align="center">
 			<Switch value={isEnabled} on:change={() => handleToggle()} />
-			<IconButton iconId="trash" on:click={() => handleDeleteClick()} />
+			<IconButton
+				ariaLabel="Delete property filter"
+				iconId="trash"
+				on:click={() => handleDeleteClick()}
+			/>
 		</Stack>
-	</Stack>
+	</Wrap>
 </div>
 
 <style>
diff --git a/src/svelte/properties-filter-app/index.svelte b/src/svelte/properties-filter-app/index.svelte
index 7cf4145..fead88f 100644
--- a/src/svelte/properties-filter-app/index.svelte
+++ b/src/svelte/properties-filter-app/index.svelte
@@ -13,11 +13,12 @@
 		TextFilterCondition,
 	} from "src/types";
 	import { generateUUID } from "../shared/services/uuid";
-	import BaseView from "./components/base-view.svelte";
 	import GroupEditView from "./components/group-edit-view.svelte";
 	import { createPropertyFilter } from "./utils";
+	import GroupList from "./components/group-list.svelte";
+	import Flex from "../shared/components/flex.svelte";
+	import Divider from "../shared/components/divider.svelte";
 
-	let editMenu: boolean = false;
 	let selectedGroupId: string = "";
 	let groups: PropertyFilterGroup[] = [];
 	let plugin: VaultExplorerPlugin;
@@ -247,39 +248,35 @@
 	}
 </script>
 
-<div>
-	{#if editMenu === false}
-		<BaseView
+<div class="vault-explorer-property-filter-app">
+	<Flex align="stretch" height="100%">
+		<GroupList
 			{groups}
 			{selectedGroup}
-			on:editClick={() => (editMenu = true)}
 			on:groupClick={handleGroupClick}
 			on:addGroupClick={handleAddGroupClick}
 			on:deleteGroupClick={handleDeleteGroupClick}
-			on:groupToggle={handleGroupToggle}
-			on:groupNameChange={handleGroupNameChange}
-			on:filterAddClick={handleFilterAddClick}
-			on:groupClick={handleGroupClick}
-			on:filterConditionChange={handleFilterConditionChange}
-			on:filterDeleteClick={handleFilterDeleteClick}
-			on:filterNameChange={handleFilterNameChange}
-			on:filterToggle={handleFilterToggle}
-			on:filterValueChange={handleFilterValueChange}
 		/>
-	{/if}
-	{#if editMenu === true && selectedGroup !== undefined}
-		<GroupEditView
-			{selectedGroup}
-			on:backClick={() => (editMenu = false)}
-			on:groupNameChange={handleGroupNameChange}
-			on:filterAddClick={handleFilterAddClick}
-			on:groupClick={handleGroupClick}
-			on:filterTypeChange={handleFilterTypeChange}
-			on:filterConditionChange={handleFilterConditionChange}
-			on:filterDeleteClick={handleFilterDeleteClick}
-			on:filterNameChange={handleFilterNameChange}
-			on:filterToggle={handleFilterToggle}
-			on:filterValueChange={handleFilterValueChange}
-		/>
-	{/if}
+		<Divider direction="vertical" />
+		{#if selectedGroup !== undefined}
+			<GroupEditView
+				{selectedGroup}
+				on:groupNameChange={handleGroupNameChange}
+				on:filterAddClick={handleFilterAddClick}
+				on:groupClick={handleGroupClick}
+				on:filterTypeChange={handleFilterTypeChange}
+				on:filterConditionChange={handleFilterConditionChange}
+				on:filterDeleteClick={handleFilterDeleteClick}
+				on:filterNameChange={handleFilterNameChange}
+				on:filterToggle={handleFilterToggle}
+				on:filterValueChange={handleFilterValueChange}
+			/>
+		{/if}
+	</Flex>
 </div>
+
+<style>
+	.vault-explorer-property-filter-app {
+		height: 255px;
+	}
+</style>
diff --git a/src/svelte/shared/components/divider.svelte b/src/svelte/shared/components/divider.svelte
index 6e0f57a..886b6b0 100644
--- a/src/svelte/shared/components/divider.svelte
+++ b/src/svelte/shared/components/divider.svelte
@@ -1,8 +1,23 @@
-<hr class="vault-explorer-divider" />
+<script lang="ts">
+	export let direction: "horizontal" | "vertical" = "horizontal";
+
+	$: className = `vault-explorer-divider vault-explorer-divider--${direction}`;
+</script>
+
+<div class={className} />
 
 <style>
-	.vault-explorer-divider {
+	.vault-explorer-divider--horizontal {
 		width: 100%;
-		margin: 0.5rem 0;
+		height: 0;
+		border-top: var(--hr-thickness) solid var(--hr-color);
+		border-left: 0;
+	}
+
+	.vault-explorer-divider--vertical {
+		width: 0px;
+		/* height: 100%; */
+		border-top: 0;
+		border-left: var(--hr-thickness) solid var(--hr-color);
 	}
 </style>
diff --git a/src/svelte/shared/components/flex.svelte b/src/svelte/shared/components/flex.svelte
index bc93382..7ab9f9d 100644
--- a/src/svelte/shared/components/flex.svelte
+++ b/src/svelte/shared/components/flex.svelte
@@ -2,7 +2,8 @@
 	export let direction: "row" | "column" = "row";
 	export let justify: "flex-start" | "center" | "space-between" | "flex-end" =
 		"flex-start";
-	export let align: "flex-start" | "center" | "flex-end" = "flex-start";
+	export let align: "flex-start" | "center" | "flex-end" | "stretch" =
+		"flex-start";
 	export let wrap: "wrap" | "nowrap" = "nowrap";
 	export let width: string = "";
 	export let height: string = "";