feat(settings): Filter TransitiveImpliedRelations rules + Jump to bot…

…tom buttons
SkepticMystic · Apr 24, 2024 · 436a918 · 436a918
1 parent dedcf8f
commit 436a918
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 5 deletions.
diff --git a/src/components/settings/EdgeFieldSettings.svelte b/src/components/settings/EdgeFieldSettings.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { PlusIcon, SaveIcon } from "lucide-svelte";
+	import { ArrowDown, PlusIcon, SaveIcon } from "lucide-svelte";
 	import { Menu, Notice } from "obsidian";
 	import { ICON_SIZE } from "src/const";
 	import type { EdgeField, EdgeFieldGroup } from "src/interfaces/settings";
@@ -262,7 +262,7 @@
 		{/if}
 	</div>
 
-	<div class="flex items-center gap-3">
+	<div class="flex items-center gap-4">
 		<h4>Fields</h4>
 
 		<div class="flex gap-1">
@@ -280,6 +280,14 @@
 				X
 			</button>
 		</div>
+
+		{#if settings.edge_fields.length > 3}
+			<button class="w-8" aria-label="Jump to bottom">
+				<a href="#BC-edge-field-{settings.edge_fields.last()?.label}">
+					<ArrowDown size={ICON_SIZE} />
+				</a>
+			</button>
+		{/if}
 	</div>
 
 	<div class="flex flex-col gap-7">
@@ -376,7 +384,7 @@
 
 	<hr />
 
-	<div class="flex items-center gap-3">
+	<div class="flex items-center gap-4">
 		<h4>Groups</h4>
 
 		<div class="flex gap-1">
@@ -394,6 +402,17 @@
 				X
 			</button>
 		</div>
+
+		{#if settings.edge_field_groups.length > 3}
+			<button class="w-8" aria-label="Jump to bottom">
+				<a
+					href="#BC-edge-group-{settings.edge_field_groups.last()
+						?.label}"
+				>
+					<ArrowDown size={ICON_SIZE} />
+				</a>
+			</button>
+		{/if}
 	</div>
 
 	<div class="flex flex-col gap-7">

diff --git a/src/components/settings/TransitiveImpliedRelations.svelte b/src/components/settings/TransitiveImpliedRelations.svelte
@@ -18,6 +18,7 @@
 
 	const settings = plugin.settings;
 
+	let filter = "";
 	let transitives = [...settings.implied_relations.transitive];
 	const opens = transitives.map(() => false);
 
@@ -158,14 +159,45 @@
 			Save
 		</button>
 
+		<div class="flex gap-1">
+			<input
+				type="text"
+				placeholder="Filter Rules by Name"
+				bind:value={filter}
+			/>
+			<button
+				class="w-8"
+				aria-label="Clear Filter"
+				disabled={filter === ""}
+				on:click={() => (filter = "")}
+			>
+				X
+			</button>
+		</div>
+
+		{#if transitives.length > 3}
+			<button class="w-8" aria-label="Jump to bottom">
+				<a href="#BC-transitive-rule-{transitives.length - 1}">
+					<ArrowDown size={ICON_SIZE} />
+				</a>
+			</button>
+		{/if}
+
 		{#if settings.is_dirty}
 			<span class="text-warning">Unsaved changes</span>
 		{/if}
 	</div>
 
 	<div class="flex flex-col gap-3">
-		{#each transitives as rule, rule_i (stringify_transitive_relation(rule) + rule_i)}
-			<details class="rounded border p-2" bind:open={opens[rule_i]}>
+		{#each transitives
+			.map((rule, rule_i) => ({ rule, rule_i }))
+			.filter( (r) => (r.rule.name || stringify_transitive_relation(r.rule)).includes(filter), ) as { rule, rule_i } (stringify_transitive_relation(rule) + rule_i)}
+			<!--  -->
+			<details
+				id="BC-transitive-rule-{rule_i}"
+				class="scroll-mt-24 rounded border p-2"
+				bind:open={opens[rule_i]}
+			>
 				<summary class="flex items-center justify-between gap-2">
 					<div class="flex items-center gap-2">
 						<ChevronOpener open={opens[rule_i]} />