Documented and add new feature:

- options for the method of display filename.
- Apply style to the tree entries of the active file.
- Ignoring tags.
- Ignoring docs by tags.

README.md

@@ -6,4 +6,57 @@ This is the plugin that shows your tags as like a folder.
 
 ### How to use
 
-Install this plugin, press `Ctrl+p`, and choose "Show Tag Folder".
+Install this plugin, press `Ctrl+p`, and choose "Show Tag Folder".
+
+### Behavior
+
+This plugin creates a tree by tags permutation.
+Like this,
+### Simple case
+
+If you have the docs,
+```
+Apple : #food #red #sweet
+Pear  : #food #green #sweet
+Tuna  : #food #red
+```
+![](./images/simplecase.png)
+...and more are shown.
+So if you tag many to each doc, It would be heavy.
+I'll make the new options that delay the folder expansion in the tree, but it will have the limitations that active file marking would be disabled till expanding the tree.
+
+### Case of respecting nested tags
+
+The nested tag works well for Tag Folder.
+Tag Folder respects nested tags and makes the dedicated hierarchy. The nested child doesn't leak out of the parent.
+
+```
+TagFolder Readme: #dev #readme #2021/12/10 #status/draft
+Technical informations: #dev #note #2021/12/09 #status/draft
+SelfHosted LiveSync Readme : #dev #readme #2021/12/06 #status/proofread
+Old Note: #dev #readme #2021/12/10 #status/abandoned
+```
+####Tag hierarchy of status
+
+![](./images/respect-nestedtag-1.png)
+
+####Tag hierarchy of date
+
+![](./images/respect-nestedtag-2.png)
+### Settings
+
+#### Always Open
+
+Open Tag Folder when obsidian launched automatically.
+
+#### Display Method
+
+You can configure how the entry shows.
+
+#### Ignore note Tag
+
+If the note has the tag that is set in here, the note would be treated as there was not.
+
+#### Ignore Tag
+
+Tags that were set here would be treated as there were not.

TagFolderViewComponent.svelte

@@ -5,6 +5,7 @@
 
 	export let items: Array<TreeItem | ViewItem> = [];
 	export let openfile: (path: string) => void;
+	export let vaultname: string = "";
 
 	treeRoot.subscribe((root: TreeItem) => {
 		items = root.children;
@@ -15,7 +16,7 @@
 	<div class="nav-folder mod-root">
 		<div class="nav-folder-title">
 			<div class="nav-folder-collapse-indicator collapse-icon" />
-			<div class="nav-folder-title-content">Tags</div>
+			<div class="nav-folder-title-content">Tags: {vaultname}</div>
 		</div>
 		<div class="nav-folder-children">
 			{#each items as entry}

TreeItemComponent.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
+	import { currentFile } from "store";
+
 	import { TreeItem, ViewItem, TagFolderItem } from "./types";
 	export let entry: TreeItem | ViewItem;
 	export let openfile: (path: string) => void;
 	let collapsed = true;
-
+	let currentFilelocal = "";
+	let isSelected = false;
 	function toggleFolder() {
 		collapsed = !collapsed;
 	}
@@ -13,22 +16,39 @@
 			if ("tag" in item) {
 				filenames = [...filenames, ...getFilenames(item)];
 			} else {
-				filenames = [...filenames, item.entry.path];
+				filenames = [...filenames, item.path];
 			}
 		}
 		return Array.from(new Set([...filenames]));
 	}
+
 	function countUnique(entry: TreeItem) {
 		return getFilenames(entry).length;
 	}
 	function openfileLocal(entry: TagFolderItem) {
-		if ("entry" in entry) openfile(entry.entry.path);
+		if ("path" in entry) openfile(entry.path);
 	}
+
+	currentFile.subscribe((path: string) => {
+		currentFilelocal = path;
+		isSelected = false;
+		if ("tags" in entry && entry.path == path) {
+			isSelected = true;
+		}
+		if ("tag" in entry && getFilenames(entry).contains(path)) {
+			isSelected = true;
+		}
+	});
 </script>
 
 <div class="nav-folder  {collapsed ? 'is-collapsed' : ''}">
 	{#if "tag" in entry}
-		<div class="nav-folder-title" on:click={toggleFolder}>
+		<div
+			class="nav-folder-title {entry.children && collapsed && isSelected
+				? 'is-active'
+				: ''}"
+			on:click={toggleFolder}
+		>
 			<div class="nav-folder-collapse-indicator collapse-icon">
 				<svg
 					viewBox="0 0 100 100"
@@ -56,10 +76,13 @@
 				{/each}
 			</div>
 		{/if}
-	{:else if "entry" in entry}
-		<div class="nav-folder-title" on:click={() => openfileLocal(entry)}>
+	{:else if "path" in entry}
+		<div
+			class="nav-folder-title {isSelected ? 'is-active' : ''}"
+			on:click={() => openfileLocal(entry)}
+		>
 			<div class="nav-folder-title-content">
-				{entry.entry.path}
+				{entry.displayName}
 			</div>
 		</div>
 	{/if}