1.20.0

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
 

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",

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": {

src/obsidian/properties-filter-modal.ts → 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,
 		});
 	}

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;
 

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;

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,10 +168,14 @@
 		contentCache = value;
 	});
 
+	fileStore.subscribe((value) => {
+		files = value;
+	});
+
 	onMount(() => {
 		function handleFilterToggleSettingChange() {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handleFilterToggleSettingChange",
 				message: "called",
 			});
@@ -198,7 +203,7 @@
 	onMount(() => {
 		function handleClockUpdatesSettingChange() {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handleClockUpdatesSettingChange",
 				message: "called",
 			});
@@ -233,7 +238,7 @@
 	onMount(() => {
 		function handlePropertiesFilterUpdate() {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handlePropertiesFilterUpdate",
 				message: "called",
 			});
@@ -255,14 +260,14 @@
 	onMount(() => {
 		const handleCreateFile = (...data: unknown[]) => {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handleCreateFile",
 				message: "called",
 			});
 			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);
 			}
@@ -277,16 +282,14 @@
 	onMount(() => {
 		const handleDeleteFile = (...data: unknown[]) => {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handleDeleteFile",
 				message: "called",
 			});
 			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);
 			}
@@ -301,7 +304,7 @@
 	onMount(() => {
 		const handleFileRename = (...data: unknown[]) => {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handleFileRename",
 				message: "called",
 			});
@@ -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);
 			}
@@ -331,7 +328,7 @@
 	onMount(() => {
 		const handleFileModify = async (...data: unknown[]) => {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handleFileModify",
 				message: "called",
 			});
@@ -352,7 +349,7 @@
 	onMount(() => {
 		const handleMetadataChange = (...data: unknown[]) => {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handleMetadataChange",
 				message: "called",
 			});
@@ -374,7 +371,7 @@
 	onMount(() => {
 		function handleViewToggleSettingChange() {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handleViewToggleSettingChange",
 				message: "called",
 			});
@@ -398,7 +395,7 @@
 	onMount(() => {
 		function handlePageSizeSettingChange() {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handlePageSizeSettingChange",
 				message: "called",
 			});
@@ -421,7 +418,7 @@
 	onMount(() => {
 		function handlePropertySettingChange() {
 			Logger.trace({
-				fileName: "app/index.ts",
+				fileName: "app/index.svelte",
 				functionName: "handlePropertySettingChange",
 				message: "called",
 			});
@@ -454,7 +451,7 @@
 
 	function updateTimeValues() {
 		Logger.trace({
-			fileName: "app/index.ts",
+			fileName: "app/index.svelte",
 			functionName: "updateTimeValues",
 			message: "called",
 		});
@@ -470,7 +467,7 @@
 
 	function updateFrontmatterCacheTime() {
 		Logger.trace({
-			fileName: "app/index.ts",
+			fileName: "app/index.svelte",
 			functionName: "updateFrontmatterCacheTime",
 			message: "called",
 		});

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();

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;
 

src/svelte/properties-filter-app/components/content-filter.svelte → 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

src/svelte/properties-filter-app/components/file-name-filter.svelte → 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