Improved:

- Now separated files pane is available on mobile device.
- Now we can open the hierarchy even using separated pane without selecting that one.

Fixed:
- Code has been tidied up.
- Now do nothing when clicking tags with alt-key.

ScrollView.ts

@@ -42,10 +42,12 @@ export class ScrollView extends ItemView {
 	getDisplayText() {
 		return this.state.tagPath || "Tags scroll";
 	}
+
 	async setFile(filenames: ScrollViewFile[]) {
 		this.state = { ...this.state, files: filenames };
 		await this.updateView();
 	}
+
 	async setState(state: ScrollViewState, result: ViewStateResult): Promise<void> {
 		this.state = { ...state };
 		this.title = state.title;
@@ -61,6 +63,7 @@ export class ScrollView extends ItemView {
 	isFileOpened(path: string) {
 		return this.state.files.some(e => e.path == path);
 	}
+
 	getScrollViewState(): ScrollViewState {
 		return this.state;
 	}

ScrollViewComponent.svelte

@@ -64,6 +64,7 @@
 	</div>
 	<hr />
 	{#each files as file}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<div
 			class="file"
 			on:click={(evt) => handleOpenFile(evt, file)}

ScrollViewMarkdownComponent.svelte

@@ -9,7 +9,7 @@
 
 	let el: HTMLElement;
 
-	function onAppearing(this: HTMLElement, ev: Event) {
+	function onAppearing(this: HTMLElement, _: Event) {
 		if (file.content && el) {
 			MarkdownRenderer.renderMarkdown(file.content, el, file.path, null);
 		}

TagFolderList.ts

@@ -0,0 +1,110 @@
+import { Menu, TFile, ViewStateResult, WorkspaceLeaf } from "obsidian";
+import TagFolderViewComponent from "./TagFolderViewComponent.svelte";
+import {
+	TagFolderListState,
+	TreeItem,
+	VIEW_TYPE_TAGFOLDER_LIST
+} from "./types";
+import { isSpecialTag } from "./util";
+import { treeRoot } from "./store";
+import TagFolderPlugin from "./main";
+import { TagFolderViewBase } from "./TagFolderViewBase";
+
+export class TagFolderList extends TagFolderViewBase {
+	component: TagFolderViewComponent;
+	plugin: TagFolderPlugin;
+	icon: "stacked-levels";
+	title: string;
+
+	onPaneMenu(menu: Menu, source: string): void {
+		super.onPaneMenu(menu, source);
+		menu.addItem(item => {
+			item.setIcon("pin")
+				.setTitle("Pin")
+				.onClick(() => {
+					this.leaf.togglePinned();
+				})
+		})
+	}
+
+	getIcon(): string {
+		return "stacked-levels";
+	}
+
+	state: TagFolderListState = { tags: [], title: "" };
+
+	async setState(state: TagFolderListState, result: ViewStateResult): Promise<void> {
+		this.state = { ...state };
+		this.title = state.tags.join(",");
+		this.component.$set({ tags: state.tags, title: state.title ?? "" })
+		result = {};
+		return;
+	}
+
+	getState() {
+		return this.state;
+	}
+
+	constructor(leaf: WorkspaceLeaf, plugin: TagFolderPlugin) {
+		super(leaf);
+		this.plugin = plugin;
+
+		this.showMenu = this.showMenu.bind(this);
+		this.showOrder = this.showOrder.bind(this);
+		this.newNote = this.newNote.bind(this);
+		this.showLevelSelect = this.showLevelSelect.bind(this);
+		this.switchView = this.switchView.bind(this);
+	}
+
+	async newNote(evt: MouseEvent) {
+
+		const expandedTags = this.state.tags
+			.map(e => e.split("/")
+				.filter(ee => !isSpecialTag(ee))
+				.join("/")).filter(e => e != "")
+			.map((e) => "#" + e)
+			.join(" ")
+			.trim();
+
+		//@ts-ignore
+		const ww = await this.app.fileManager.createAndOpenMarkdownFile() as TFile;
+		await this.app.vault.append(ww, expandedTags);
+	}
+
+	getViewType() {
+		return VIEW_TYPE_TAGFOLDER_LIST;
+	}
+
+	getDisplayText() {
+		return `Files with ${this.state.title}`;
+	}
+
+	async onOpen() {
+		this.component = new TagFolderViewComponent({
+			target: this.contentEl,
+			props: {
+				openfile: this.plugin.focusFile,
+				hoverPreview: this.plugin.hoverPreview,
+				expandFolder: this.plugin.expandFolder,
+				title: "",
+				showMenu: this.showMenu,
+				showLevelSelect: this.showLevelSelect,
+				showOrder: this.showOrder,
+				newNote: this.newNote,
+				openScrollView: this.plugin.openScrollView,
+				items: [],
+				isViewSwitchable: this.plugin.settings.useMultiPaneList,
+				switchView: this.switchView
+			},
+		});
+	}
+
+	async onClose() {
+		this.component.$destroy();
+	}
+
+	setTreeRoot(root: TreeItem) {
+		treeRoot.set(root);
+	}
+
+}

TagFolderView.ts

@@ -0,0 +1,64 @@
+import { WorkspaceLeaf } from "obsidian";
+import TagFolderViewComponent from "./TagFolderViewComponent.svelte";
+import { TreeItem, VIEW_TYPE_TAGFOLDER } from "./types";
+import { treeRoot } from "./store";
+import TagFolderPlugin from "./main";
+import { TagFolderViewBase } from "./TagFolderViewBase";
+
+export class TagFolderView extends TagFolderViewBase {
+	icon: "stacked-levels";
+
+	getIcon(): string {
+		return "stacked-levels";
+	}
+
+	constructor(leaf: WorkspaceLeaf, plugin: TagFolderPlugin) {
+		super(leaf);
+		this.plugin = plugin;
+
+		this.showMenu = this.showMenu.bind(this);
+		this.showOrder = this.showOrder.bind(this);
+		this.newNote = this.newNote.bind(this);
+		this.showLevelSelect = this.showLevelSelect.bind(this);
+		this.switchView = this.switchView.bind(this);
+	}
+
+	newNote(evt: MouseEvent) {
+		//@ts-ignore
+		this.app.commands.executeCommandById("file-explorer:new-file");
+	}
+	getViewType() {
+		return VIEW_TYPE_TAGFOLDER;
+	}
+
+	getDisplayText() {
+		return "Tag Folder";
+	}
+
+	async onOpen() {
+		this.component = new TagFolderViewComponent({
+			target: this.contentEl,
+			props: {
+				openfile: this.plugin.focusFile,
+				hoverPreview: this.plugin.hoverPreview,
+				expandFolder: this.plugin.expandFolder,
+				vaultname: this.app.vault.getName(),
+				showMenu: this.showMenu,
+				showLevelSelect: this.showLevelSelect,
+				showOrder: this.showOrder,
+				newNote: this.newNote,
+				openScrollView: this.plugin.openScrollView,
+				isViewSwitchable: this.plugin.settings.useMultiPaneList,
+				switchView: this.switchView
+			},
+		});
+	}
+
+	async onClose() {
+		this.component.$destroy();
+	}
+
+	setTreeRoot(root: TreeItem) {
+		treeRoot.set(root);
+	}
+}