initial

.editorconfig

@@ -0,0 +1,9 @@
+# top-most EditorConfig file
+root = true
+
+[*]
+charset = utf-8
+insert_final_newline = true
+indent_style = tab
+indent_size = 4
+tab_width = 4

.eslintignore

@@ -0,0 +1,2 @@
+npm node_modules
+build

.eslintrc

@@ -0,0 +1,22 @@
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+      "@typescript-eslint"
+    ],
+    "extends": [
+      "eslint:recommended",
+      "plugin:@typescript-eslint/eslint-recommended",
+      "plugin:@typescript-eslint/recommended"
+    ], 
+    "parserOptions": {
+        "sourceType": "module"
+    },
+    "rules": {
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": ["error", { "args": "none" }],
+      "@typescript-eslint/ban-ts-comment": "off",
+      "no-prototype-builtins": "off",
+      "@typescript-eslint/no-empty-function": "off"
+    } 
+  }

.gitignore

@@ -0,0 +1,20 @@
+# vscode
+.vscode 
+
+# Intellij
+*.iml
+.idea
+
+# npm
+node_modules
+package-lock.json
+
+# Don't include the compiled main.js file in the repo.
+# They should be uploaded to GitHub releases instead.
+main.js
+
+# Exclude sourcemaps
+*.map
+
+# obsidian
+data.json

README.md

@@ -0,0 +1,9 @@
+## TagFolder
+
+This is the plugin that shows your tags as like a folder.
+
+![screenshot](images/screenshot.png)
+
+### How to use
+
+Install this plugin, press `Ctrl+p`, and choose "Show Tag Folder".

TagFolderViewComponent.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { treeRoot } from "./store";
+	import { TreeItem, ViewItem } from "./types";
+	import TreeItemComponent from "./TreeItemComponent.svelte";
+
+	export let items: Array<TreeItem | ViewItem> = [];
+	export let openfile: (path: string) => void;
+
+	treeRoot.subscribe((root: TreeItem) => {
+		items = root.children;
+	});
+</script>
+
+<div class="wrapper">
+	<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>
+		<div class="nav-folder-children">
+			{#each items as entry}
+				<TreeItemComponent {entry} {openfile} />
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.wrapper {
+		flex-grow: 1;
+		padding-bottom: 20px;
+	}
+</style>

TreeItemComponent.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { TreeItem, ViewItem, TagFolderItem } from "./types";
+	export let entry: TreeItem | ViewItem;
+	export let openfile: (path: string) => void;
+	let collapsed = true;
+
+	function toggleFolder() {
+		collapsed = !collapsed;
+	}
+	function getFilenames(entry: TreeItem) {
+		let filenames: string[] = [];
+		for (const item of entry.children) {
+			if ("tag" in item) {
+				filenames = [...filenames, ...getFilenames(item)];
+			} else {
+				filenames = [...filenames, item.entry.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);
+	}
+</script>
+
+<div class="nav-folder  {collapsed ? 'is-collapsed' : ''}">
+	{#if "tag" in entry}
+		<div class="nav-folder-title" on:click={toggleFolder}>
+			<div class="nav-folder-collapse-indicator collapse-icon">
+				<svg
+					viewBox="0 0 100 100"
+					class="right-triangle"
+					width="8"
+					height="8"
+					><path
+						fill="currentColor"
+						stroke="currentColor"
+						d="M94.9,20.8c-1.4-2.5-4.1-4.1-7.1-4.1H12.2c-3,0-5.7,1.6-7.1,4.1c-1.3,2.4-1.2,5.2,0.2,7.6L43.1,88c1.5,2.3,4,3.7,6.9,3.7 s5.4-1.4,6.9-3.7l37.8-59.6C96.1,26,96.2,23.2,94.9,20.8L94.9,20.8z"
+					/></svg
+				>
+			</div>
+			<div class="nav-folder-title-content lsl-f">
+				<div class="tagfolder-titletagname">
+					{entry.tag}
+				</div>
+				<div class="tagfolder-quantity">{countUnique(entry)}</div>
+			</div>
+		</div>
+		{#if entry.children && !collapsed}
+			<div class="nav-folder-children">
+				{#each entry.children as item}
+					<svelte:self entry={item} {openfile} />
+				{/each}
+			</div>
+		{/if}
+	{:else if "entry" in entry}
+		<div class="nav-folder-title" on:click={() => openfileLocal(entry)}>
+			<div class="nav-folder-title-content">
+				{entry.entry.path}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.lsl-f {
+		flex-direction: row;
+		display: flex;
+		flex-grow: 1;
+	}
+	.tagfolder-titletagname {
+		flex-grow: 1;
+	}
+	.tagfolder-quantity {
+		width: 3em;
+		text-align: right;
+	}
+</style>

esbuild.config.mjs

@@ -0,0 +1,38 @@
+import esbuild from "esbuild";
+import process from "process";
+import builtins from "builtin-modules";
+import sveltePlugin from "esbuild-svelte";
+import sveltePreprocess from "svelte-preprocess";
+
+const banner = `/*
+THIS IS A GENERATED/BUNDLED FILE BY ESBUILD
+if you want to view the source, please visit the github repository of this plugin
+*/
+`;
+
+const prod = process.argv[2] === "production";
+
+esbuild
+	.build({
+		banner: {
+			js: banner,
+		},
+		entryPoints: ["main.ts"],
+		bundle: true,
+		external: ["obsidian", "electron", ...builtins],
+		format: "cjs",
+		watch: !prod,
+		target: "es2016",
+		logLevel: "info",
+		sourcemap: prod ? false : "inline",
+		// sourcemap: false,
+		treeShaking: true,
+		plugins: [
+			sveltePlugin({
+				preprocess: sveltePreprocess(),
+				compilerOptions: { css: true },
+			}),
+		],
+		outfile: "main.js",
+	})
+	.catch(() => process.exit(1));