From 7e2b6b1f4ed0fe68578060818be99000e41b9777 Mon Sep 17 00:00:00 2001
From: DecafDev <40307803+decaf-dev@users.noreply.github.com>
Date: Sat, 6 Jul 2024 12:36:49 -0600
Subject: [PATCH 1/4] feat: add duplicate rule button

---
 ...filter-modal.ts => custom-filter-modal.ts} | 12 +--
 .../app/components/custom-filter.svelte       |  6 +-
 .../app/components/group-tag-list.svelte      |  4 +-
 src/svelte/app/index.svelte                   | 26 ++---
 .../filters/custom/filter-by-groups.ts        | 10 +-
 .../components/content-filter.svelte          |  1 +
 .../components/display-name-utils.ts          |  0
 .../components/file-name-filter.svelte        |  1 +
 .../components/filter-rule-list.svelte        |  8 +-
 .../components/filter-rule.svelte             | 28 +++++-
 .../components/folder-filter.svelte           |  1 +
 .../components/group-edit-view.svelte         |  5 +-
 .../components/group-list-item.svelte         |  0
 .../components/group-list.svelte              |  6 +-
 .../components/property-filter.svelte         |  1 +
 .../index.svelte                              | 96 +++++++++++++++----
 .../utils.ts                                  |  0
 src/types/index.ts                            |  9 +-
 18 files changed, 154 insertions(+), 60 deletions(-)
 rename src/obsidian/{properties-filter-modal.ts => custom-filter-modal.ts} (57%)
 rename src/svelte/{properties-filter-app => custom-filter-app}/components/content-filter.svelte (98%)
 rename src/svelte/{properties-filter-app => custom-filter-app}/components/display-name-utils.ts (100%)
 rename src/svelte/{properties-filter-app => custom-filter-app}/components/file-name-filter.svelte (97%)
 rename src/svelte/{properties-filter-app => custom-filter-app}/components/filter-rule-list.svelte (91%)
 rename src/svelte/{properties-filter-app => custom-filter-app}/components/filter-rule.svelte (87%)
 rename src/svelte/{properties-filter-app => custom-filter-app}/components/folder-filter.svelte (99%)
 rename src/svelte/{properties-filter-app => custom-filter-app}/components/group-edit-view.svelte (94%)
 rename src/svelte/{properties-filter-app => custom-filter-app}/components/group-list-item.svelte (100%)
 rename src/svelte/{properties-filter-app => custom-filter-app}/components/group-list.svelte (93%)
 rename src/svelte/{properties-filter-app => custom-filter-app}/components/property-filter.svelte (99%)
 rename src/svelte/{properties-filter-app => custom-filter-app}/index.svelte (84%)
 rename src/svelte/{properties-filter-app => custom-filter-app}/utils.ts (100%)

diff --git a/src/obsidian/properties-filter-modal.ts b/src/obsidian/custom-filter-modal.ts
similarity index 57%
rename from src/obsidian/properties-filter-modal.ts
rename to src/obsidian/custom-filter-modal.ts
index 8930802..aecface 100644
--- a/src/obsidian/properties-filter-modal.ts
+++ b/src/obsidian/custom-filter-modal.ts
@@ -1,14 +1,12 @@
 import { Modal } from "obsidian";
-import PropertiesFilterApp from "../svelte/properties-filter-app/index.svelte";
+import CustomFilterApp from "../svelte/custom-filter-app/index.svelte";
 import VaultExplorerPlugin from "src/main";
 
-export default class PropertiesFilterModal extends Modal {
-	component: PropertiesFilterApp | null;
+export default class CustomFilterModal extends Modal {
+	component: CustomFilterApp | null;
 	plugin: VaultExplorerPlugin;
 
-	constructor(
-		plugin: VaultExplorerPlugin,
-	) {
+	constructor(plugin: VaultExplorerPlugin) {
 		super(plugin.app);
 		this.plugin = plugin;
 		this.component = null;
@@ -17,7 +15,7 @@ export default class PropertiesFilterModal extends Modal {
 	onOpen(): void {
 		const { contentEl } = this;
 
-		this.component = new PropertiesFilterApp({
+		this.component = new CustomFilterApp({
 			target: contentEl,
 		});
 	}
diff --git a/src/svelte/app/components/custom-filter.svelte b/src/svelte/app/components/custom-filter.svelte
index 0538948..9268f47 100644
--- a/src/svelte/app/components/custom-filter.svelte
+++ b/src/svelte/app/components/custom-filter.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
 	import VaultExplorerPlugin from "src/main";
-	import PropertiesFilterModal from "src/obsidian/properties-filter-modal";
+	import PropertiesFilterModal from "src/obsidian/custom-filter-modal";
 	import IconButton from "src/svelte/shared/components/icon-button.svelte";
 	import Stack from "src/svelte/shared/components/stack.svelte";
 	import store from "src/svelte/shared/services/store";
-	import { FilterGroup } from "src/types";
+	import { TFilterGroup } from "src/types";
 	import GroupTagList from "./group-tag-list.svelte";
 
-	export let groups: FilterGroup[] = [];
+	export let groups: TFilterGroup[] = [];
 
 	let plugin: VaultExplorerPlugin;
 
diff --git a/src/svelte/app/components/group-tag-list.svelte b/src/svelte/app/components/group-tag-list.svelte
index 539bf0d..64b33e7 100644
--- a/src/svelte/app/components/group-tag-list.svelte
+++ b/src/svelte/app/components/group-tag-list.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { FilterGroup } from "src/types";
+	import { TFilterGroup } from "src/types";
 	import GroupTag from "./group-tag.svelte";
 	import Stack from "src/svelte/shared/components/stack.svelte";
 	import ScrollButton from "src/svelte/shared/components/scroll-button.svelte";
@@ -9,7 +9,7 @@
 	import VaultExplorerPlugin from "src/main";
 	import EventManager from "src/event/event-manager";
 
-	export let groups: FilterGroup[] = [];
+	export let groups: TFilterGroup[] = [];
 	let plugin: VaultExplorerPlugin;
 	let tagContainerRef: HTMLDivElement | null;
 	let enableScrollButtons = false;
diff --git a/src/svelte/app/index.svelte b/src/svelte/app/index.svelte
index 5e4f656..78c7b71 100644
--- a/src/svelte/app/index.svelte
+++ b/src/svelte/app/index.svelte
@@ -170,7 +170,7 @@
 	onMount(() => {
 		function handleFilterToggleSettingChange() {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handleFilterToggleSettingChange",
 				message: "called",
 			});
@@ -198,7 +198,7 @@
 	onMount(() => {
 		function handleClockUpdatesSettingChange() {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handleClockUpdatesSettingChange",
 				message: "called",
 			});
@@ -233,7 +233,7 @@
 	onMount(() => {
 		function handlePropertiesFilterUpdate() {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handlePropertiesFilterUpdate",
 				message: "called",
 			});
@@ -255,7 +255,7 @@
 	onMount(() => {
 		const handleCreateFile = (...data: unknown[]) => {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handleCreateFile",
 				message: "called",
 			});
@@ -277,7 +277,7 @@
 	onMount(() => {
 		const handleDeleteFile = (...data: unknown[]) => {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handleDeleteFile",
 				message: "called",
 			});
@@ -301,7 +301,7 @@
 	onMount(() => {
 		const handleFileRename = (...data: unknown[]) => {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handleFileRename",
 				message: "called",
 			});
@@ -331,7 +331,7 @@
 	onMount(() => {
 		const handleFileModify = async (...data: unknown[]) => {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handleFileModify",
 				message: "called",
 			});
@@ -352,7 +352,7 @@
 	onMount(() => {
 		const handleMetadataChange = (...data: unknown[]) => {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handleMetadataChange",
 				message: "called",
 			});
@@ -374,7 +374,7 @@
 	onMount(() => {
 		function handleViewToggleSettingChange() {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handleViewToggleSettingChange",
 				message: "called",
 			});
@@ -398,7 +398,7 @@
 	onMount(() => {
 		function handlePageSizeSettingChange() {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handlePageSizeSettingChange",
 				message: "called",
 			});
@@ -421,7 +421,7 @@
 	onMount(() => {
 		function handlePropertySettingChange() {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handlePropertySettingChange",
 				message: "called",
 			});
@@ -454,7 +454,7 @@
 
 	function updateTimeValues() {
 		Logger.trace({
-			fileName: "app/index.ts",
+			fileName: "app/index.svelte",
 			functionName: "updateTimeValues",
 			message: "called",
 		});
@@ -470,7 +470,7 @@
 
 	function updateFrontmatterCacheTime() {
 		Logger.trace({
-			fileName: "app/index.ts",
+			fileName: "app/index.svelte",
 			functionName: "updateFrontmatterCacheTime",
 			message: "called",
 		});
diff --git a/src/svelte/app/services/filters/custom/filter-by-groups.ts b/src/svelte/app/services/filters/custom/filter-by-groups.ts
index b0201de..1c845fc 100644
--- a/src/svelte/app/services/filters/custom/filter-by-groups.ts
+++ b/src/svelte/app/services/filters/custom/filter-by-groups.ts
@@ -1,7 +1,7 @@
 import { FrontMatterCache } from "obsidian";
 import {
-	FilterRule,
-	FilterGroup,
+	TFilterRule,
+	TFilterGroup,
 	DatePropertyFilterValue,
 	PropertyFilterRule,
 	FilterRuleType,
@@ -29,7 +29,7 @@ export const filterByGroups = (
 	filePath: string,
 	fileFrontmatter: FrontMatterCache | undefined,
 	fileContent: string | null,
-	groups: FilterGroup[]
+	groups: TFilterGroup[]
 ) => {
 	return groups.every((group) => {
 		if (!group.isEnabled) return true;
@@ -48,7 +48,7 @@ const filterByGroup = (
 	filePath: string,
 	fileFrontmatter: FrontMatterCache | undefined,
 	fileContent: string | null,
-	group: FilterGroup
+	group: TFilterGroup
 ) => {
 	let result: boolean | null = null;
 
@@ -81,7 +81,7 @@ const filterByRule = (
 	filePath: string,
 	frontmatter: FrontMatterCache | undefined,
 	fileContent: string | null,
-	filter: FilterRule
+	filter: TFilterRule
 ) => {
 	const { type } = filter;
 
diff --git a/src/svelte/properties-filter-app/components/content-filter.svelte b/src/svelte/custom-filter-app/components/content-filter.svelte
similarity index 98%
rename from src/svelte/properties-filter-app/components/content-filter.svelte
rename to src/svelte/custom-filter-app/components/content-filter.svelte
index 9a9c301..134d290 100644
--- a/src/svelte/properties-filter-app/components/content-filter.svelte
+++ b/src/svelte/custom-filter-app/components/content-filter.svelte
@@ -44,6 +44,7 @@
 	{condition}
 	{isEnabled}
 	on:ruleDeleteClick
+	on:ruleDuplicateClick
 	on:ruleTypeChange
 	on:ruleConditionChange
 	on:ruleOperatorChange
diff --git a/src/svelte/properties-filter-app/components/display-name-utils.ts b/src/svelte/custom-filter-app/components/display-name-utils.ts
similarity index 100%
rename from src/svelte/properties-filter-app/components/display-name-utils.ts
rename to src/svelte/custom-filter-app/components/display-name-utils.ts
diff --git a/src/svelte/properties-filter-app/components/file-name-filter.svelte b/src/svelte/custom-filter-app/components/file-name-filter.svelte
similarity index 97%
rename from src/svelte/properties-filter-app/components/file-name-filter.svelte
rename to src/svelte/custom-filter-app/components/file-name-filter.svelte
index f4fc7fd..8f07aed 100644
--- a/src/svelte/properties-filter-app/components/file-name-filter.svelte
+++ b/src/svelte/custom-filter-app/components/file-name-filter.svelte
@@ -28,6 +28,7 @@
 	{condition}
 	{isEnabled}
 	on:ruleDeleteClick
+	on:ruleDuplicateClick
 	on:ruleTypeChange
 	on:ruleConditionChange
 	on:ruleOperatorChange
diff --git a/src/svelte/properties-filter-app/components/filter-rule-list.svelte b/src/svelte/custom-filter-app/components/filter-rule-list.svelte
similarity index 91%
rename from src/svelte/properties-filter-app/components/filter-rule-list.svelte
rename to src/svelte/custom-filter-app/components/filter-rule-list.svelte
index fc28f0a..ddfb686 100644
--- a/src/svelte/properties-filter-app/components/filter-rule-list.svelte
+++ b/src/svelte/custom-filter-app/components/filter-rule-list.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import Stack from "src/svelte/shared/components/stack.svelte";
 	import PropertyFilter from "./property-filter.svelte";
-	import { FilterRule, FilterRuleType, PropertyType } from "src/types";
+	import { TFilterRule, FilterRuleType, PropertyType } from "src/types";
 	import ContentFilter from "./content-filter.svelte";
 	import FolderFilter from "./folder-filter.svelte";
 	import FileNameFilter from "./file-name-filter.svelte";
 
-	export let rules: FilterRule[] = [];
+	export let rules: TFilterRule[] = [];
 </script>
 
 <Stack direction="column" spacing="md" width="100%">
@@ -32,6 +32,7 @@
 				on:ruleValueChange
 				on:ruleToggle
 				on:ruleDeleteClick
+				on:ruleDuplicateClick
 				on:propertyNameChange
 				on:propertyTypeChange
 				on:propertyValueDataChange
@@ -53,6 +54,7 @@
 				on:ruleOperatorChange
 				on:ruleValueChange
 				on:ruleToggle
+				on:ruleDuplicateClick
 				on:ruleDeleteClick
 			/>
 		{/if}
@@ -72,6 +74,7 @@
 				on:ruleOperatorChange
 				on:ruleValueChange
 				on:ruleToggle
+				on:ruleDuplicateClick
 				on:ruleDeleteClick
 				on:folderSubfoldersToggle
 			/>
@@ -91,6 +94,7 @@
 				on:ruleOperatorChange
 				on:ruleValueChange
 				on:ruleToggle
+				on:ruleDuplicateClick
 				on:ruleDeleteClick
 			/>
 		{/if}
diff --git a/src/svelte/properties-filter-app/components/filter-rule.svelte b/src/svelte/custom-filter-app/components/filter-rule.svelte
similarity index 87%
rename from src/svelte/properties-filter-app/components/filter-rule.svelte
rename to src/svelte/custom-filter-app/components/filter-rule.svelte
index 7856c87..435c3b9 100644
--- a/src/svelte/properties-filter-app/components/filter-rule.svelte
+++ b/src/svelte/custom-filter-app/components/filter-rule.svelte
@@ -23,6 +23,7 @@
 	import { createEventDispatcher } from "svelte";
 	import Wrap from "src/svelte/shared/components/wrap.svelte";
 	import License from "src/svelte/shared/services/license";
+	import { Menu } from "obsidian";
 
 	export let index: number;
 	export let id: string;
@@ -42,6 +43,27 @@
 			enablePremiumFeatures = isRegistered;
 		});
 
+	function handleActionsClick(e: CustomEvent) {
+		const nativeEvent = e.detail.nativeEvent as MouseEvent;
+
+		const menu = new Menu();
+		menu.setUseNativeMenu(true);
+
+		menu.addItem((item) => {
+			item.setTitle("Duplicate");
+			item.onClick(() => handleDuplicateClick());
+		});
+		menu.addItem((item) => {
+			item.setTitle("Delete");
+			item.onClick(() => handleDeleteClick());
+		});
+		menu.showAtMouseEvent(nativeEvent);
+	}
+
+	function handleDuplicateClick() {
+		dispatch("ruleDuplicateClick", { id });
+	}
+
 	function handleDeleteClick() {
 		dispatch("ruleDeleteClick", { id });
 	}
@@ -134,9 +156,9 @@
 		<Stack spacing="sm" align="center">
 			<Switch value={isEnabled} on:change={() => handleToggle()} />
 			<IconButton
-				ariaLabel="Delete filter rule"
-				iconId="trash"
-				on:click={() => handleDeleteClick()}
+				ariaLabel="Rule actions"
+				iconId="ellipsis-vertical"
+				on:click={handleActionsClick}
 			/>
 			<slot name="after-toggle"></slot>
 		</Stack>
diff --git a/src/svelte/properties-filter-app/components/folder-filter.svelte b/src/svelte/custom-filter-app/components/folder-filter.svelte
similarity index 99%
rename from src/svelte/properties-filter-app/components/folder-filter.svelte
rename to src/svelte/custom-filter-app/components/folder-filter.svelte
index eba07fc..2782c2f 100644
--- a/src/svelte/properties-filter-app/components/folder-filter.svelte
+++ b/src/svelte/custom-filter-app/components/folder-filter.svelte
@@ -108,6 +108,7 @@
 	{condition}
 	{isEnabled}
 	on:ruleDeleteClick
+	on:ruleDuplicateClick
 	on:ruleTypeChange
 	on:ruleConditionChange
 	on:ruleOperatorChange
diff --git a/src/svelte/properties-filter-app/components/group-edit-view.svelte b/src/svelte/custom-filter-app/components/group-edit-view.svelte
similarity index 94%
rename from src/svelte/properties-filter-app/components/group-edit-view.svelte
rename to src/svelte/custom-filter-app/components/group-edit-view.svelte
index c260474..4ad05e2 100644
--- a/src/svelte/properties-filter-app/components/group-edit-view.svelte
+++ b/src/svelte/custom-filter-app/components/group-edit-view.svelte
@@ -3,7 +3,7 @@
 	import IconButton from "src/svelte/shared/components/icon-button.svelte";
 	import Stack from "src/svelte/shared/components/stack.svelte";
 
-	import { FilterGroup } from "src/types";
+	import { TFilterGroup } from "src/types";
 	import FilterRuleList from "./filter-rule-list.svelte";
 
 	import { createEventDispatcher } from "svelte";
@@ -11,7 +11,7 @@
 	import Spacer from "src/svelte/shared/components/spacer.svelte";
 	const dispatch = createEventDispatcher();
 
-	export let selectedGroup: FilterGroup;
+	export let selectedGroup: TFilterGroup;
 
 	function handleFilterAddClick() {
 		const newFilter = createPropertyFilter();
@@ -44,6 +44,7 @@
 				on:ruleValueChange
 				on:ruleToggle
 				on:ruleDeleteClick
+				on:ruleDuplicateClick
 				on:propertyTypeChange
 				on:propertyNameChange
 				on:propertyMatchWhenPropertyDNEChange
diff --git a/src/svelte/properties-filter-app/components/group-list-item.svelte b/src/svelte/custom-filter-app/components/group-list-item.svelte
similarity index 100%
rename from src/svelte/properties-filter-app/components/group-list-item.svelte
rename to src/svelte/custom-filter-app/components/group-list-item.svelte
diff --git a/src/svelte/properties-filter-app/components/group-list.svelte b/src/svelte/custom-filter-app/components/group-list.svelte
similarity index 93%
rename from src/svelte/properties-filter-app/components/group-list.svelte
rename to src/svelte/custom-filter-app/components/group-list.svelte
index 0deab38..601bd44 100644
--- a/src/svelte/properties-filter-app/components/group-list.svelte
+++ b/src/svelte/custom-filter-app/components/group-list.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 	import IconButton from "src/svelte/shared/components/icon-button.svelte";
 	import Stack from "src/svelte/shared/components/stack.svelte";
-	import { FilterGroup } from "src/types";
+	import { TFilterGroup } from "src/types";
 
-	export let groups: FilterGroup[];
-	export let selectedGroup: FilterGroup | undefined;
+	export let groups: TFilterGroup[];
+	export let selectedGroup: TFilterGroup | undefined;
 
 	let listContainerRef: HTMLDivElement | null;
 	let previousLength = 0;
diff --git a/src/svelte/properties-filter-app/components/property-filter.svelte b/src/svelte/custom-filter-app/components/property-filter.svelte
similarity index 99%
rename from src/svelte/properties-filter-app/components/property-filter.svelte
rename to src/svelte/custom-filter-app/components/property-filter.svelte
index 4ff7a81..265b691 100644
--- a/src/svelte/properties-filter-app/components/property-filter.svelte
+++ b/src/svelte/custom-filter-app/components/property-filter.svelte
@@ -89,6 +89,7 @@
 	{condition}
 	{isEnabled}
 	on:ruleDeleteClick
+	on:ruleDuplicateClick
 	on:ruleTypeChange
 	on:ruleConditionChange
 	on:ruleOperatorChange
diff --git a/src/svelte/properties-filter-app/index.svelte b/src/svelte/custom-filter-app/index.svelte
similarity index 84%
rename from src/svelte/properties-filter-app/index.svelte
rename to src/svelte/custom-filter-app/index.svelte
index fbb65da..2c48aa0 100644
--- a/src/svelte/properties-filter-app/index.svelte
+++ b/src/svelte/custom-filter-app/index.svelte
@@ -8,7 +8,6 @@
 		DateFilterCondition,
 		ListFilterCondition,
 		NumberFilterCondition,
-		FilterGroup,
 		TextFilterCondition,
 		DatePropertyFilterValue,
 		PropertyType,
@@ -16,6 +15,8 @@
 		ContentFilterCondition,
 		FolderFilterCondition,
 		FileNameFilterCondition,
+		TFilterRule,
+		TFilterGroup,
 	} from "src/types";
 	import { generateRandomId } from "../shared/services/random";
 	import GroupEditView from "./components/group-edit-view.svelte";
@@ -23,9 +24,10 @@
 	import GroupList from "./components/group-list.svelte";
 	import Flex from "../shared/components/flex.svelte";
 	import Divider from "../shared/components/divider.svelte";
+	import Logger from "js-logger";
 
 	let selectedGroupId: string = "";
-	let groups: FilterGroup[] = [];
+	let groups: TFilterGroup[] = [];
 	let plugin: VaultExplorerPlugin;
 
 	$: selectedGroup = groups.find((group) => group.id === selectedGroupId);
@@ -57,7 +59,7 @@
 	}
 
 	function handleGroupAddClick() {
-		const newGroup: FilterGroup = {
+		const newGroup: TFilterGroup = {
 			id: generateRandomId(),
 			name: `Group ${groups.length + 1}`,
 			rules: [createPropertyFilter()],
@@ -114,7 +116,7 @@
 	function handleRuleConditionChange(e: CustomEvent) {
 		const { id, condition } = e.detail;
 
-		const newGroups = groups.map((group) =>
+		const newGroups: TFilterGroup[] = groups.map((group) =>
 			group.id === selectedGroupId
 				? {
 						...group,
@@ -166,16 +168,77 @@
 
 	function handleRuleDeleteClick(e: CustomEvent) {
 		const { id } = e.detail;
+		Logger.trace({
+			fileName: "custom-filter-app/index.svelte",
+			functionName: "handleRuleDeleteClick",
+			message: "called",
+		});
+		Logger.debug(
+			{
+				fileName: "custom-filter-app/index.svelte",
+				functionName: "handleRuleDeleteClick",
+				message: "deleting rule",
+			},
+			{ id },
+		);
 
-		const newGroups = groups.map((group) =>
-			group.id === selectedGroupId
-				? {
-						...group,
-						rules: group.rules.filter((rule) => rule.id !== id),
-					}
-				: group,
+		const newGroups: TFilterGroup[] = groups.map((group) => {
+			if (group.id === selectedGroupId) {
+				const newRules: TFilterRule[] = group.rules.filter(
+					(rule) => rule.id !== id,
+				);
+				return {
+					...group,
+					rules: newRules,
+				};
+			}
+			return group;
+		});
+
+		groups = newGroups;
+	}
+
+	function handleRuleDuplicateClick(e: CustomEvent) {
+		const { id } = e.detail;
+
+		Logger.trace({
+			fileName: "custom-filter-app/index.svelte",
+			functionName: "handleRuleDuplicateClick",
+			message: "called",
+		});
+		Logger.debug(
+			{
+				fileName: "custom-filter-app/index.svelte",
+				functionName: "handleRuleDuplicateClick",
+				message: "duplicating rule",
+			},
+			{ id },
 		);
 
+		const newGroups: TFilterGroup[] = groups.map((group) => {
+			if (group.id === selectedGroupId) {
+				const rule = group.rules.find((rule) => rule.id === id);
+				if (!rule) {
+					throw new Error(`Rule with id ${id} not found`);
+				}
+
+				const newRules: TFilterRule[] = [
+					...group.rules,
+					{
+						...rule,
+						id: generateRandomId(),
+					},
+				];
+
+				return {
+					...group,
+					rules: newRules,
+				};
+			}
+
+			return group;
+		});
+
 		groups = newGroups;
 	}
 
@@ -250,7 +313,7 @@
 			throw new Error(`Unhandled filter type: ${type}`);
 		}
 
-		const newGroups: FilterGroup[] = groups.map((group) => {
+		const newGroups: TFilterGroup[] = groups.map((group) => {
 			if (group.id === selectedGroupId) {
 				const newRules = group.rules.map((rule) => {
 					if (rule.id === id) {
@@ -295,7 +358,7 @@
 			throw new Error(`Unhandled filter type: ${propertyType}`);
 		}
 
-		const newGroups: FilterGroup[] = groups.map((group) =>
+		const newGroups: TFilterGroup[] = groups.map((group) =>
 			group.id === selectedGroupId
 				? {
 						...group,
@@ -325,7 +388,7 @@
 	function handleRuleValueChange(e: CustomEvent) {
 		const { id, value } = e.detail;
 
-		const newGroups: FilterGroup[] = groups.map((group) => {
+		const newGroups: TFilterGroup[] = groups.map((group) => {
 			const { rules } = group;
 			if (group.id === selectedGroupId) {
 				const newRules = rules.map((rule) => {
@@ -375,7 +438,7 @@
 	function handleFolderSubfoldersToggle(e: CustomEvent) {
 		const { id, includeSubfolders } = e.detail;
 
-		const newGroups: FilterGroup[] = groups.map((group) =>
+		const newGroups: TFilterGroup[] = groups.map((group) =>
 			group.id === selectedGroupId
 				? {
 						...group,
@@ -398,7 +461,7 @@
 	function handlePropertyMatchWhenPropertyDNEChange(e: CustomEvent) {
 		const { id, matchWhenDNE } = e.detail;
 
-		const newGroups: FilterGroup[] = groups.map((group) =>
+		const newGroups: TFilterGroup[] = groups.map((group) =>
 			group.id === selectedGroupId
 				? {
 						...group,
@@ -438,6 +501,7 @@
 				on:ruleAddClick={handleRuleAddClick}
 				on:ruleConditionChange={handleRuleConditionChange}
 				on:ruleDeleteClick={handleRuleDeleteClick}
+				on:ruleDuplicateClick={handleRuleDuplicateClick}
 				on:ruleValueChange={handleRuleValueChange}
 				on:ruleOperatorChange={handleRuleOperatorChange}
 				on:ruleToggle={handleRuleToggle}
diff --git a/src/svelte/properties-filter-app/utils.ts b/src/svelte/custom-filter-app/utils.ts
similarity index 100%
rename from src/svelte/properties-filter-app/utils.ts
rename to src/svelte/custom-filter-app/utils.ts
diff --git a/src/types/index.ts b/src/types/index.ts
index f4a8b08..b4856da 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -75,7 +75,7 @@ export interface TTimestampFilter extends BaseFilter {
 
 export interface TCustomFilter extends BaseFilter {
 	selectedGroupId: string;
-	groups: FilterGroup[];
+	groups: TFilterGroup[];
 }
 
 export type TimestampFilterOption =
@@ -277,11 +277,12 @@ export interface ContentFilterRule extends BaseFilterRule {
 	condition: ContentFilterCondition;
 }
 
-export type FilterRule =
+export type TFilterRule =
 	| PropertyFilterRule
 	| FolderFilterRule
 	| FileNameFilterRule
 	| ContentFilterRule;
+
 export type PropertyFilterRule =
 	| TextPropertyFilterRule
 	| NumberPropertyFilterRule
@@ -289,10 +290,10 @@ export type PropertyFilterRule =
 	| CheckboxPropertyFilterRule
 	| DatePropertyFilterRule;
 
-export interface FilterGroup {
+export interface TFilterGroup {
 	id: string;
 	name: string;
-	rules: FilterRule[];
+	rules: TFilterRule[];
 	isEnabled: boolean;
 	isSticky: boolean;
 }

From 2573d62bef25eba04f4614089eaf551581b2ee6c Mon Sep 17 00:00:00 2001
From: DecafDev <40307803+decaf-dev@users.noreply.github.com>
Date: Sat, 6 Jul 2024 12:47:54 -0600
Subject: [PATCH 2/4] refactor: add file store

---
 src/svelte/app/index.svelte           | 21 ++++++------
 src/svelte/app/services/file-store.ts | 46 +++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 12 deletions(-)
 create mode 100644 src/svelte/app/services/file-store.ts

diff --git a/src/svelte/app/index.svelte b/src/svelte/app/index.svelte
index 78c7b71..90a6bf0 100644
--- a/src/svelte/app/index.svelte
+++ b/src/svelte/app/index.svelte
@@ -53,6 +53,7 @@
 	import Wrap from "../shared/components/wrap.svelte";
 	import { randomFileSortStore } from "./services/random-file-sort-store";
 	import { fileContentStore } from "./services/file-content-store";
+	import { fileStore } from "./services/file-store";
 
 	// ============================================
 	// Variables
@@ -134,7 +135,6 @@
 		plugin = p;
 
 		const { app, settings } = plugin;
-		files = app.vault.getFiles();
 		pageSize = settings.pageSize;
 		searchFilter = settings.filters.search;
 		favoritesFilter = settings.filters.favorites;
@@ -155,6 +155,7 @@
 			setTimeValuesUpdateInterval();
 		}
 
+		fileStore.load(app);
 		fileContentStore.load(app);
 		randomFileSortStore.load(files);
 	});
@@ -167,6 +168,10 @@
 		contentCache = value;
 	});
 
+	fileStore.subscribe((value) => {
+		files = value;
+	});
+
 	onMount(() => {
 		function handleFilterToggleSettingChange() {
 			Logger.trace({
@@ -261,8 +266,8 @@
 			});
 			if (data.length > 0 && data[0] instanceof TFile) {
 				const newFile = data[0] as TFile;
-				files = [...files, newFile];
 
+				fileStore.onFileCreate(newFile);
 				randomFileSortStore.onFileCreate(newFile.path);
 				fileContentStore.onFileCreate(plugin.app, newFile);
 			}
@@ -284,9 +289,7 @@
 			if (data.length > 0 && typeof data[0] === "string") {
 				const path = data[0] as string;
 
-				//Remove the file from the files array
-				files = files.filter((file) => file.path !== path);
-
+				fileStore.onFileDelete(path);
 				randomFileSortStore.onFileDelete(path);
 				fileContentStore.onFileDelete(path);
 			}
@@ -310,13 +313,7 @@
 				const oldPath = data[0] as string;
 				const updatedFile = data[1] as TFile;
 
-				files = files.map((file) => {
-					if (file.path === oldPath) {
-						return updatedFile;
-					}
-					return file;
-				});
-
+				fileStore.onFileRename(oldPath, updatedFile);
 				randomFileSortStore.onFileRename(oldPath, updatedFile.path);
 				fileContentStore.onFileRename(oldPath, updatedFile.path);
 			}
diff --git a/src/svelte/app/services/file-store.ts b/src/svelte/app/services/file-store.ts
new file mode 100644
index 0000000..ca7a107
--- /dev/null
+++ b/src/svelte/app/services/file-store.ts
@@ -0,0 +1,46 @@
+import { App, TFile } from "obsidian";
+import { writable } from "svelte/store";
+
+type FileStore = TFile[];
+
+function createFileStore() {
+	const { subscribe, set, update } = writable<FileStore>([]);
+
+	async function load(app: App) {
+		set(app.vault.getFiles());
+	}
+
+	async function handleFileCreate(file: TFile) {
+		update((files) => {
+			// Create a shallow copy of the files object to ensure reactivity
+			return [...files, file];
+		});
+	}
+
+	function handleFileRename(oldPath: string, updatedFile: TFile) {
+		update((files) => {
+			return files.map((file) => {
+				if (file.path === oldPath) {
+					return updatedFile;
+				}
+				return file;
+			});
+		});
+	}
+
+	function handleFileDelete(path: string) {
+		update((files) => {
+			return files.filter((file) => file.path !== path);
+		});
+	}
+
+	return {
+		load,
+		subscribe,
+		onFileCreate: handleFileCreate,
+		onFileRename: handleFileRename,
+		onFileDelete: handleFileDelete,
+	};
+}
+
+export const fileStore = createFileStore();

From c9d666a1f52e996e8bc66b281f971d0b5bd44699 Mon Sep 17 00:00:00 2001
From: DecafDev <40307803+decaf-dev@users.noreply.github.com>
Date: Sat, 6 Jul 2024 12:49:10 -0600
Subject: [PATCH 3/4] chore: bump version

---
 manifest.json | 2 +-
 package.json  | 2 +-
 versions.json | 3 ++-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/manifest.json b/manifest.json
index 04b8f91..6b2e600 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
 	"id": "vault-explorer",
 	"name": "Vault Explorer",
-	"version": "1.19.1",
+	"version": "1.20.0",
 	"minAppVersion": "1.4.13",
 	"description": "Explore your vault in visual format",
 	"author": "DecafDev",
diff --git a/package.json b/package.json
index 6031196..5f911a0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-vault-explorer",
-	"version": "1.19.1",
+	"version": "1.20.0",
 	"description": "Explore your vault in visual format",
 	"main": "main.js",
 	"scripts": {
diff --git a/versions.json b/versions.json
index 93fc505..818f8c1 100644
--- a/versions.json
+++ b/versions.json
@@ -80,5 +80,6 @@
 	"1.18.1": "1.4.13",
 	"1.18.2": "1.4.13",
 	"1.19.0": "1.4.13",
-	"1.19.1": "1.4.13"
+	"1.19.1": "1.4.13",
+	"1.20.0": "1.4.13"
 }

From 61f798930940666e891db4b7c3666eb25b9a4f6d Mon Sep 17 00:00:00 2001
From: DecafDev <40307803+decaf-dev@users.noreply.github.com>
Date: Sat, 6 Jul 2024 12:49:58 -0600
Subject: [PATCH 4/4] docs: update FEATURES.md

---
 FEATURES.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/FEATURES.md b/FEATURES.md
index ee3924b..1a66566 100644
--- a/FEATURES.md
+++ b/FEATURES.md
@@ -49,6 +49,8 @@ Features are what the software should do.
 | Add sticky groups                                                | #filter                  |
 | Disable filters condtionally                                     | #filter                  |
 | Left/right buttons to allow a user to scroll between groups      | #accessibility           |
+| Duplicate a filter rule                                          | #filter                  |
+| Random sort                                                      | #filter                  |
 
 ## Event callbacks