Add delete to context menu (#360)

* chore: bump version

* refactor: remove unused code

* feat: add delete to context menu

* feat: add confirm delete setting

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "vault-explorer",
 	"name": "Vault Explorer",
-	"version": "1.44.6",
+	"version": "1.45.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.44.6",
+	"version": "1.45.0",
 	"description": "Explore your vault in visual format",
 	"main": "main.js",
 	"scripts": {

src/constants.ts

@@ -80,6 +80,7 @@ export const DEFAULT_SETTINGS: VaultExplorerPluginSettings = {
 			isEnabled: false,
 		},
 	},
+	confirmBeforeDelete: true,
 	currentView: TExplorerView.GRID,
 	titleWrapping: "normal",
 	enableClockUpdates: true,

src/migrations/index.ts

@@ -32,6 +32,7 @@ import Migrate_1_39_0 from "./migrate_1_39_0";
 import Migrate_1_40_0 from "./migrate_1_40_0";
 import Migrate_1_41_0 from "./migrate_1_41_0";
 import Migrate_1_42_0 from "./migrate_1_42_0";
+import Migrate_1_45_0 from "./migrate_1_45_0";
 
 const migrations: TMigration[] = [
 	{
@@ -189,6 +190,11 @@ const migrations: TMigration[] = [
 		to: "1.42.0",
 		migrate: Migrate_1_42_0,
 	},
+	{
+		from: "1.44.6",
+		to: "1.45.0",
+		migrate: Migrate_1_45_0,
+	},
 ];
 
 export const preformMigrations = (

src/migrations/migrate_1_41_0.ts

@@ -1,11 +1,11 @@
-import { VaultExplorerPluginSettings } from "src/types";
 import MigrationInterface from "./migration_interface";
 import { VaultExplorerPluginSettings_1_40_2 } from "src/types/types-1.40.2";
+import { VaultExplorerPluginSettings_1_41_1 } from "src/types/types-1.41.1";
 
 export default class Migrate_1_41_0 implements MigrationInterface {
 	migrate(data: Record<string, unknown>) {
 		const typedData = data as unknown as VaultExplorerPluginSettings_1_40_2;
-		const newData: VaultExplorerPluginSettings = {
+		const newData: VaultExplorerPluginSettings_1_41_1 = {
 			...typedData,
 			properties: {
 				...typedData.properties,

src/migrations/migrate_1_42_0.ts

@@ -1,11 +1,11 @@
-import { VaultExplorerPluginSettings } from "src/types";
 import MigrationInterface from "./migration_interface";
 import { VaultExplorerPluginSettings_1_41_1 } from "src/types/types-1.41.1";
+import { VaultExplorerPluginSettings_1_44_6 } from "src/types/types-1.44.6";
 
 export default class Migrate_1_42_0 implements MigrationInterface {
 	migrate(data: Record<string, unknown>) {
 		const typedData = data as unknown as VaultExplorerPluginSettings_1_41_1;
-		const newData: VaultExplorerPluginSettings = {
+		const newData: VaultExplorerPluginSettings_1_44_6 = {
 			...typedData,
 			properties: {
 				...typedData.properties,

src/migrations/migrate_1_45_0.ts

@@ -0,0 +1,30 @@
+import { VaultExplorerPluginSettings_1_44_6 } from "src/types/types-1.44.6";
+import MigrationInterface from "./migration_interface";
+import { TExplorerView, VaultExplorerPluginSettings } from "src/types";
+
+export default class Migrate_1_45_0 implements MigrationInterface {
+	migrate(data: Record<string, unknown>) {
+		const typedData = data as unknown as VaultExplorerPluginSettings_1_44_6;
+
+		let viewOrder = [];
+		if (typedData.views.grid.isEnabled) {
+			viewOrder.push(TExplorerView.GRID);
+		}
+		if (typedData.views.list.isEnabled) {
+			viewOrder.push(TExplorerView.LIST);
+		}
+		if (typedData.views.feed.isEnabled) {
+			viewOrder.push(TExplorerView.FEED);
+		}
+		if (typedData.views.table.isEnabled) {
+			viewOrder.push(TExplorerView.TABLE);
+		}
+
+		const newData: VaultExplorerPluginSettings = {
+			...typedData,
+			confirmBeforeDelete: true,
+			viewOrder,
+		};
+		return newData as unknown as Record<string, unknown>;
+	}
+}

src/obsidian/vault-explorer-settings-tab.ts

@@ -46,10 +46,6 @@ export default class VaultExplorerSettingsTab extends PluginSettingTab {
 			this.app,
 			"datetime"
 		);
-		const checkboxProperties = getObsidianPropertiesByType(
-			this.app,
-			"checkbox"
-		);
 
 		new Setting(containerEl).setName("General").setHeading();
 
@@ -108,6 +104,20 @@ export default class VaultExplorerSettingsTab extends PluginSettingTab {
 					})
 			);
 
+		new Setting(containerEl).setName("Context menu").setHeading();
+
+		new Setting(containerEl)
+			.setName("Confirm before delete")
+			.setDesc("Ask for confirmation before deleting a file.")
+			.addToggle((toggle) =>
+				toggle
+					.setValue(this.plugin.settings.confirmBeforeDelete)
+					.onChange(async (value) => {
+						this.plugin.settings.confirmBeforeDelete = value;
+						await this.plugin.saveSettings();
+					})
+			);
+
 		new Setting(containerEl).setName("Filters").setHeading();
 
 		new Setting(containerEl).setName("Search filter").addToggle((toggle) =>

src/svelte/app/components/feed-card.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from "svelte";
+	import { onMount } from "svelte";
 	import { CollapseStyle } from "src/types";
 	import EventManager from "src/event/event-manager";
 	import VaultExplorerPlugin from "src/main";
@@ -35,6 +35,7 @@
 	export let path: string;
 	export let createdMillis: number;
 	export let content: string | null;
+	export let enablePremiumFeatures: boolean;
 
 	let ref: HTMLElement | null = null;
 	let enableFileIcons = false;
@@ -45,8 +46,6 @@
 	let collapseStyle: CollapseStyle = "no-new-lines";
 	let currentLineClamp: number = lineClampLarge;
 
-	const dispatch = createEventDispatcher();
-
 	let plugin: VaultExplorerPlugin;
 	store.plugin.subscribe((p) => {
 		plugin = p;
@@ -147,7 +146,15 @@
 
 	function handleCardContextMenu(e: Event) {
 		const nativeEvent = e as MouseEvent;
-		openContextMenu(plugin, path, nativeEvent, {});
+		const { app, settings } = plugin;
+		openContextMenu(
+			nativeEvent,
+			path,
+			app,
+			settings,
+			enablePremiumFeatures,
+			{},
+		);
 	}
 
 	function handleCardMouseOver(e: MouseEvent) {

src/svelte/app/components/feed-view.svelte

@@ -5,6 +5,7 @@
 	export let data: FileRenderData[] = [];
 	export let startIndex;
 	export let pageLength;
+	export let enablePremiumFeatures: boolean;
 
 	let filteredItems: FileRenderData[] = [];
 
@@ -23,6 +24,7 @@
 <div class="vault-explorer-feed-view">
 	{#each filteredItems as fileRenderData (fileRenderData.id)}
 		<FeedCard
+			{enablePremiumFeatures}
 			displayName={fileRenderData.displayName}
 			extension={fileRenderData.extension}
 			baseName={fileRenderData.baseName}

src/svelte/app/components/grid-card.svelte

@@ -42,6 +42,7 @@
 	export let custom2: string | null;
 	export let custom3: string | null;
 	export let coverImageFit: CoverImageFit;
+	export let enablePremiumFeatures: boolean;
 
 	let plugin: VaultExplorerPlugin;
 	let enableFileIcons: boolean = false;
@@ -108,12 +109,22 @@
 		const nativeEvent = e as MouseEvent;
 
 		const showCoverImageOptions = path.endsWith(".md");
-		openContextMenu(plugin, path, nativeEvent, {
-			coverImageFit: showCoverImageOptions ? coverImageFit : undefined,
-			onCoverImageFitChange: showCoverImageOptions
-				? handleCoverImageFitChange
-				: undefined,
-		});
+		const { app, settings } = plugin;
+		openContextMenu(
+			nativeEvent,
+			path,
+			app,
+			settings,
+			enablePremiumFeatures,
+			{
+				coverImageFit: showCoverImageOptions
+					? coverImageFit
+					: undefined,
+				onCoverImageFitChange: showCoverImageOptions
+					? handleCoverImageFitChange
+					: undefined,
+			},
+		);
 	}
 
 	function handleCardMouseOver(e: MouseEvent) {

src/svelte/app/components/grid-view.svelte

@@ -5,6 +5,7 @@
 	export let data: FileRenderData[];
 	export let startIndex: number;
 	export let pageLength: number;
+	export let enablePremiumFeatures: boolean;
 
 	let filteredItems: FileRenderData[] = [];
 
@@ -24,6 +25,7 @@
 	<div class="vault-explorer-grid-view__container">
 		{#each filteredItems as fileRenderData (fileRenderData.id)}
 			<GridCard
+				{enablePremiumFeatures}
 				displayName={fileRenderData.displayName}
 				path={fileRenderData.path}
 				coverImageFit={fileRenderData.coverImageFit}

src/svelte/app/components/list-item.svelte

@@ -20,6 +20,7 @@
 	export let tags: string[] | null;
 	export let showTags: boolean;
 	export let isSmallScreenSize: boolean;
+	export let enablePremiumFeatures: boolean;
 
 	let enableFileIcons: boolean = false;
 	let ref: HTMLElement | null = null;
@@ -75,7 +76,15 @@
 
 	function handleItemContextMenu(e: Event) {
 		const nativeEvent = e as MouseEvent;
-		openContextMenu(plugin, path, nativeEvent, {});
+		const { app, settings } = plugin;
+		openContextMenu(
+			nativeEvent,
+			path,
+			app,
+			settings,
+			enablePremiumFeatures,
+			{},
+		);
 	}
 
 	function handleItemMouseOver(e: MouseEvent) {

src/svelte/app/components/list-view.svelte

@@ -8,6 +8,7 @@
 	export let pageLength: number;
 	export let showTags: boolean;
 	export let isSmallScreenSize: boolean;
+	export let enablePremiumFeatures: boolean;
 
 	let filteredItems: FileRenderData[] = [];
 
@@ -26,6 +27,7 @@
 <div class="vault-explorer-list-view">
 	{#each filteredItems as fileRenderData (fileRenderData.id)}
 		<ListItem
+			{enablePremiumFeatures}
 			{showTags}
 			displayName={fileRenderData.displayName}
 			extension={fileRenderData.extension}

src/svelte/app/components/table-view.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from "svelte";
+	import { onMount } from "svelte";
 	import { openContextMenu } from "../services/context-menu";
 	import { formatAsBearTimeString } from "../services/time-string";
 	import { FileRenderData } from "../types";
@@ -25,6 +25,7 @@
 	export let data: FileRenderData[];
 	export let startIndex: number;
 	export let pageLength: number;
+	export let enablePremiumFeatures: boolean;
 
 	let filteredItems: FileRenderData[] = [];
 	let plugin: VaultExplorerPlugin | null = null;
@@ -54,8 +55,6 @@
 		},
 	];
 
-	const dispatch = createEventDispatcher();
-
 	store.plugin.subscribe((p) => {
 		plugin = p;
 		enableFileIcons = plugin.settings.enableFileIcons;
@@ -103,7 +102,15 @@
 		if (plugin === null) return;
 
 		const nativeEvent = e as MouseEvent;
-		openContextMenu(plugin, path, nativeEvent, {});
+		const { app, settings } = plugin;
+		openContextMenu(
+			nativeEvent,
+			path,
+			app,
+			settings,
+			enablePremiumFeatures,
+			{},
+		);
 	}
 
 	function getValue(item: FileRenderData, column: TColumn): unknown {

src/svelte/app/index.svelte

@@ -6,7 +6,7 @@
 	import Flex from "../shared/components/flex.svelte";
 	import TabList from "../shared/components/tab-list.svelte";
 	import Tab from "../shared/components/tab.svelte";
-	import { Notice, TFile } from "obsidian";
+	import { TFile } from "obsidian";
 	import {
 		TCustomFilter,
 		TSearchFilter,
@@ -57,7 +57,7 @@
 	} from "./services/favorites-store";
 	import TableView from "./components/table-view.svelte";
 	import Spacer from "../shared/components/spacer.svelte";
-	import Divider from "../shared/components/divider.svelte";
+	import License from "../shared/services/license";
 
 	// ============================================
 	// Variables
@@ -104,10 +104,18 @@
 	let viewOrder: TExplorerView[] = [];
 	let showListViewTags: boolean = false;
 	let isSmallScreenSize: boolean = false;
+	let enablePremiumFeatures: boolean = false;
 
 	// ============================================
 	// Lifecycle hooks
 	// ============================================
+
+	License.getInstance()
+		.getHasValidKeyStore()
+		.subscribe((hasValidKey) => {
+			enablePremiumFeatures = hasValidKey;
+		});
+
 	randomFileSortStore.subscribe((value) => {
 		randomSortCache = value;
 	});
@@ -967,6 +975,7 @@
 			data={renderData}
 			{startIndex}
 			{pageLength}
+			{enablePremiumFeatures}
 			on:coverImageFitChange={handleCoverImageFitChange}
 		/>
 	{:else if currentView === "list"}
@@ -976,11 +985,22 @@
 			showTags={showListViewTags}
 			{startIndex}
 			{pageLength}
+			{enablePremiumFeatures}
 		/>
 	{:else if currentView === "table"}
-		<TableView data={renderData} {startIndex} {pageLength} />
+		<TableView
+			data={renderData}
+			{startIndex}
+			{pageLength}
+			{enablePremiumFeatures}
+		/>
 	{:else if currentView === "feed"}
-		<FeedView data={renderData} {startIndex} {pageLength} />
+		<FeedView
+			data={renderData}
+			{startIndex}
+			{pageLength}
+			{enablePremiumFeatures}
+		/>
 	{/if}
 	<PaginationIndicator
 		{startIndex}