diff --git a/bun.lockb b/bun.lockb index 9afbb7d..c797463 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 00767c9..ecfd302 100644 --- a/package.json +++ b/package.json @@ -1,32 +1,34 @@ { - "name": "obsidian-vault-explorer", - "version": "0.0.9", - "description": "Explore your vault in visual format", - "main": "main.js", - "scripts": { - "dev": "node esbuild.config.mjs", - "build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production", - "version": "node version-bump.mjs && git add manifest.json versions.json" - }, - "keywords": [], - "author": "Trey Wallis", - "license": "MIT", - "devDependencies": { - "@types/bun": "latest", - "@types/node": "^16.11.6", - "@types/react": "^18.2.65", - "@types/react-dom": "^18.2.21", - "@typescript-eslint/eslint-plugin": "5.29.0", - "@typescript-eslint/parser": "5.29.0", - "builtin-modules": "3.3.0", - "esbuild": "0.17.3", - "obsidian": "latest", - "tslib": "2.4.0", - "typescript": "4.7.4" - }, - "dependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-virtuoso": "^4.7.2" - } + "name": "obsidian-vault-explorer", + "version": "0.0.9", + "description": "Explore your vault in visual format", + "main": "main.js", + "scripts": { + "dev": "node esbuild.config.mjs", + "build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production", + "version": "node version-bump.mjs && git add manifest.json versions.json" + }, + "keywords": [], + "author": "Trey Wallis", + "license": "MIT", + "devDependencies": { + "@types/bun": "latest", + "@types/lodash": "^4.17.0", + "@types/node": "^16.11.6", + "@types/react": "^18.2.65", + "@types/react-dom": "^18.2.21", + "@typescript-eslint/eslint-plugin": "5.29.0", + "@typescript-eslint/parser": "5.29.0", + "builtin-modules": "3.3.0", + "esbuild": "0.17.3", + "obsidian": "latest", + "tslib": "2.4.0", + "typescript": "4.7.4" + }, + "dependencies": { + "lodash": "^4.17.21", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-virtuoso": "^4.7.2" + } } diff --git a/src/main.ts b/src/main.ts index 3a130fd..48bac02 100644 --- a/src/main.ts +++ b/src/main.ts @@ -5,6 +5,7 @@ import VaultExplorerSettingsTab from './obsidian/vault-explorer-settings-tab'; import { VaultExplorerPluginSettings } from './types'; import { VAULT_EXPLORER_VIEW } from './constants'; +import _ from 'lodash'; const DEFAULT_SETTINGS: VaultExplorerPluginSettings = { @@ -13,6 +14,11 @@ const DEFAULT_SETTINGS: VaultExplorerPluginSettings = { sourcePropertyName: "source", revisionPropertyName: "revision", statusPropertyName: "status", + folderFilter: "", + searchFilter: "", + onlyFavorites: false, + onlyCreatedToday: false, + onlyModifiedToday: false, } export default class VaultExplorerPlugin extends Plugin { @@ -21,9 +27,15 @@ export default class VaultExplorerPlugin extends Plugin { async onload() { await this.loadSettings(); + const debounceSettingsChange = _.debounce(async (value: VaultExplorerPluginSettings) => { + this.settings = value; + await this.saveSettings(); + //console.log("Settings saved", this.settings); + }, 1000); + this.registerView( VAULT_EXPLORER_VIEW, - (leaf) => new VaultExplorerView(leaf, this.app, this.settings) + (leaf) => new VaultExplorerView(leaf, this.app, this.settings, debounceSettingsChange) ); this.addRibbonIcon("map", "Vault Explorer", async () => { diff --git a/src/obsidian/vault-explorer-view.tsx b/src/obsidian/vault-explorer-view.tsx index f8f5907..1dfb8dc 100644 --- a/src/obsidian/vault-explorer-view.tsx +++ b/src/obsidian/vault-explorer-view.tsx @@ -6,22 +6,25 @@ import { createRoot, Root } from "react-dom/client"; import { VAULT_EXPLORER_VIEW } from "src/constants"; import ReactView from "src/react/index"; import AppMountProvider from "src/react/app-mount-provider"; -import { VaultExplorerPluginSettings } from "src/types"; +import { onSettingsChange, VaultExplorerPluginSettings } from "src/types"; export default class VaultExplorerView extends ItemView { root: Root | null; app: App; settings: VaultExplorerPluginSettings; + onSettingsChange: onSettingsChange; constructor( leaf: WorkspaceLeaf, app: App, - settings: VaultExplorerPluginSettings + settings: VaultExplorerPluginSettings, + onSettingsChange: onSettingsChange ) { super(leaf); this.root = null; this.app = app; this.settings = settings; + this.onSettingsChange = onSettingsChange; } getViewType(): string { @@ -40,6 +43,7 @@ export default class VaultExplorerView extends ItemView { app={this.app} leaf={this.leaf} settings={this.settings} + onSettingsChange={this.onSettingsChange} > diff --git a/src/react/app-mount-provider.tsx b/src/react/app-mount-provider.tsx index 6df4146..bd468b2 100644 --- a/src/react/app-mount-provider.tsx +++ b/src/react/app-mount-provider.tsx @@ -1,12 +1,13 @@ import { App, WorkspaceLeaf } from "obsidian"; import React from "react"; -import { VaultExplorerPluginSettings } from "src/types"; +import { VaultExplorerPluginSettings, onSettingsChange } from "src/types"; interface ContextProps { app: App; leaf: WorkspaceLeaf; settings: VaultExplorerPluginSettings; + onSettingsChange: onSettingsChange; } const MountContext = React.createContext(null); @@ -30,10 +31,13 @@ export default function AppMountProvider({ app, leaf, settings, + onSettingsChange, children, }: Props) { return ( - + {children} ); diff --git a/src/react/index.tsx b/src/react/index.tsx index 8a2888e..ebc8a0b 100644 --- a/src/react/index.tsx +++ b/src/react/index.tsx @@ -10,14 +10,40 @@ import Flex from "./flex"; import Stack from "./stack"; export default function ReactView() { - const [folderPath, setFolderPath] = React.useState(null); + const [folderPath, setFolderPath] = React.useState(""); const [search, setSearch] = React.useState(""); const [onlyFavorites, setOnlyFavorites] = React.useState(false); const [onlyModifiedToday, setOnlyModifiedToday] = React.useState(false); const [onlyCreatedToday, setOnlyCreatedToday] = React.useState(false); - const { app, settings } = useAppMount(); + const { app, settings, onSettingsChange } = useAppMount(); + + React.useEffect(() => { + setFolderPath(settings.folderFilter); + setSearch(settings.searchFilter); + setOnlyFavorites(settings.onlyFavorites); + setOnlyModifiedToday(settings.onlyModifiedToday); + setOnlyCreatedToday(settings.onlyCreatedToday); + }, []); + + React.useEffect(() => { + onSettingsChange({ + ...settings, + folderFilter: folderPath, + searchFilter: search, + onlyFavorites, + onlyModifiedToday, + onlyCreatedToday, + }); + }, [ + onSettingsChange, + folderPath, + search, + onlyFavorites, + onlyModifiedToday, + onlyCreatedToday, + ]); const { favoritePropertyName, @@ -138,7 +164,7 @@ export default function ReactView() { onChange={(e) => setSearch(e.target.value)} />