Add a modal for all files and paths combined

src/main.ts

@@ -1,8 +1,7 @@
-import { ManageHiddenDirectories } from './settings/manageHiddenFolders';
 import { VisibilityToggleCommand } from './commands/toggleVisibility';
 import { VisibilityToggleSetting } from './settings/hiddenToggle';
-import { App, Notice, Plugin, PluginSettingTab, TFolder } from 'obsidian';
+import { App, Plugin, PluginSettingTab, TFolder } from 'obsidian';
-import { ManageHiddenFiles } from './settings/manageHiddenFiles';
+import { ManageHiddenPaths } from './settings/manageHiddenPaths';
 import { changePathVisibility } from './utils';
 
 interface FileHiderSettings {
@@ -103,8 +102,8 @@ export default class FileHider extends Plugin {
 
 	unhidePath(path: string) {
 		let i = this.settings.hiddenList.indexOf(path);
-		changePathVisibility(path, false);
 		this.settings.hiddenList.splice(i, 1);
+		changePathVisibility(path, false);
 		this.saveSettings();
 	};
 };
@@ -126,7 +125,6 @@ class FileHiderSettingsTab extends PluginSettingTab {
 
 		container.empty();
 		VisibilityToggleSetting.create(this.plugin, container);
-		ManageHiddenFiles.create(this.plugin, container);
+		ManageHiddenPaths.create(this.plugin, container);
-		ManageHiddenDirectories.create(this.plugin, container);
 	};
 }

src/modals/HiddenList.ts

@@ -0,0 +1,36 @@
+import { Modal, Setting } from "obsidian";
+import FileHider from "../main";
+
+export class HiddenPathsModal extends Modal {
+	private plugin: FileHider;
+
+	constructor(plugin: FileHider) {
+		super(plugin.app);
+		this.plugin = plugin;
+	}
+
+	onOpen() {
+		const {contentEl: content} = this;
+		content.createEl(`h1`, { text: `Hidden Files and Folders` });
+		content.createEl(`hr`);
+		let body = content.createEl(`div`, { cls: `hidden-list-modal-body` });
+		this.plugin.settings.hiddenList.forEach(path => {
+			let c = body.createEl(`div`);
+			new Setting(c)
+			.setName(path)
+			.addButton(btn => {
+				btn.setIcon(`cross`)
+				.setTooltip(`Remove`)
+				.onClick((e) => {
+					this.plugin.unhidePath(path);
+					c.hide();
+				});
+			});
+		});
+	}
+
+	onClose() {
+		const {contentEl} = this;
+		contentEl.empty();
+	}
+}

src/settings/manageHiddenPaths.ts

@@ -0,0 +1,22 @@
+import { Setting } from "obsidian";
+import FileHider from "../main";
+import { HiddenPathsModal } from "../modals/HiddenList";
+
+
+export class ManageHiddenPaths {
+
+	public static create(plugin: FileHider, container: HTMLElement) {
+		return new Setting(container)
+		.setName(`Hidden Files and Folders`)
+		.setDesc(`Add or remove files and folders from the list that are being hidden`)
+		.addButton(b => {
+			b.setButtonText(`Manage`)
+			.onClick(event => {
+				// sanity check to prevent other code from opening the modal
+				if (!event.isTrusted) { return }
+
+				new HiddenPathsModal(plugin).open()
+			});
+		});
+	};
+};