feat: add duplicate finder view

Author: decaf-dev

src/constants.ts

@@ -0,0 +1 @@
+export const DUPLICATE_FINDER_VIEW = "duplicate-finder";

src/main.ts

@@ -1,27 +1,53 @@
 import { Plugin } from "obsidian";
-import FindDuplicatesModal from "./obsidian/find-duplicates-modal";
+import { DUPLICATE_FINDER_VIEW } from "./constants";
+import DuplicateFinderView from "./obsidian/duplicate-finder-view";
 
-interface FindDuplicatesSettings {}
+interface DuplicateFinderSettings {}
 
-const DEFAULT_SETTINGS: FindDuplicatesSettings = {};
+const DEFAULT_SETTINGS: DuplicateFinderSettings = {};
 
-export default class FindDuplicatesPlugin extends Plugin {
-	settings: FindDuplicatesSettings = DEFAULT_SETTINGS;
+export default class DuplicateFinderPlugin extends Plugin {
+	settings: DuplicateFinderSettings = DEFAULT_SETTINGS;
 
 	async onload() {
 		await this.loadSettings();
 
+		this.registerView(
+			DUPLICATE_FINDER_VIEW,
+			(leaf) => new DuplicateFinderView(leaf, this)
+		);
+
 		this.addCommand({
-			id: "open-find-duplicates",
-			name: "Open Find Duplicates",
-			callback: () => {
-				new FindDuplicatesModal(this.app).open();
+			id: "open",
+			name: "Open finder",
+			callback: async () => {
+				this.openFinderView();
 			},
 		});
-		// // This adds a settings tab so the user can configure various aspects of the plugin
+
+		this.addRibbonIcon("file-search", "Open finder", async () => {
+			this.openFinderView();
+		});
+
+		// TODO add when needed
 		// this.addSettingTab(new SampleSettingTab(this.app, this));
 	}
 
+	private openFinderView() {
+		const leaves = this.app.workspace.getLeavesOfType(
+			DUPLICATE_FINDER_VIEW
+		);
+		if (leaves.length !== 0) {
+			const leaf = leaves[0];
+			this.app.workspace.revealLeaf(leaf);
+		} else {
+			this.app.workspace.getLeaf("tab").setViewState({
+				type: DUPLICATE_FINDER_VIEW,
+				active: true,
+			});
+		}
+	}
+
 	onunload() {}
 
 	async loadSettings() {

src/obsidian/duplicate-finder-setting-tab.ts

@@ -0,0 +1,17 @@
+import { App, PluginSettingTab } from "obsidian";
+import DuplicateFinderPlugin from "src/main";
+
+export class DuplicateFinderSettingTab extends PluginSettingTab {
+	plugin: DuplicateFinderPlugin;
+
+	constructor(app: App, plugin: DuplicateFinderPlugin) {
+		super(app, plugin);
+		this.plugin = plugin;
+	}
+
+	display(): void {
+		const { containerEl } = this;
+
+		containerEl.empty();
+	}
+}

src/obsidian/duplicate-finder-view.ts

@@ -0,0 +1,42 @@
+import { ItemView, WorkspaceLeaf } from "obsidian";
+import { DUPLICATE_FINDER_VIEW } from "src/constants";
+import type DuplicateFinderPlugin from "src/main";
+import { mount, unmount } from "svelte";
+import SvelteApp from "../svelte/index.svelte";
+
+export default class DuplicateFinderView extends ItemView {
+	svelteApp: ReturnType<typeof mount> | null;
+	plugin: DuplicateFinderPlugin;
+
+	constructor(leaf: WorkspaceLeaf, plugin: DuplicateFinderPlugin) {
+		super(leaf);
+		this.svelteApp = null;
+		this.plugin = plugin;
+		this.navigation = true;
+	}
+
+	getIcon(): string {
+		return "file-search";
+	}
+
+	getViewType(): string {
+		return DUPLICATE_FINDER_VIEW;
+	}
+	getDisplayText(): string {
+		return "Duplicate Finder";
+	}
+
+	async onOpen() {
+		const { contentEl } = this;
+		this.svelteApp = mount(SvelteApp, {
+			target: contentEl,
+			props: { obsidianApp: this.app },
+		});
+	}
+
+	async onClose() {
+		if (this.svelteApp) {
+			unmount(this.svelteApp);
+		}
+	}
+}

src/obsidian/find-duplicates-modal.ts

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import type { App } from "obsidian";
-	import { findDuplicateUrls } from "src/find-duplicate-urls";
+	import { Menu, type App } from "obsidian";
+	import { findDuplicateUrls } from "src/utils/find-duplicate-urls";
+	import { openInNewTab, openToTheRight } from "src/utils/open-file-utils";
 	import { onMount } from "svelte";
 
 	interface AppProps {
@@ -11,26 +12,85 @@
 
 	let duplicateUrls: Map<string, string[]> = $state(new Map());
 
+	function handleItemClick(filePath: string) {
+		openInNewTab(obsidianApp, filePath);
+	}
+
+	function handleItemContextMenuClick(event: MouseEvent, filePath: string) {
+		const menu = new Menu();
+		menu.setUseNativeMenu(true);
+		menu.addItem((item) => {
+			item.setTitle("Open in new tab");
+			item.onClick(() => openInNewTab(obsidianApp, filePath));
+		});
+		menu.addItem((item) => {
+			item.setTitle("Open to the right");
+			item.onClick(() => openToTheRight(obsidianApp, filePath));
+		});
+		menu.showAtMouseEvent(event);
+	}
+
 	onMount(async () => {
 		duplicateUrls = await findDuplicateUrls(obsidianApp);
 	});
+
+	let duplicateUrlCount = $derived(
+		Array.from(duplicateUrls.entries()).filter(
+			([_, files]) => files.length > 1,
+		).length,
+	);
 </script>
 
 <div>
-	<h1 class="wtf">Find Duplicates</h1>
-	{#each Array.from(duplicateUrls.entries()) as [url, files]}
-		<div>
-			<h2>{url}</h2>
-			<p>{files.length} files</p>
-		</div>
-	{/each}
+	<h1>Duplicate Finder</h1>
+	<p>Duplicate URLs: {duplicateUrlCount}</p>
+	<div class="accordion-container">
+		{#each Array.from(duplicateUrls.entries()) as [url, files]}
+			{#if files.length > 1}
+				<div class="accordion">
+					<details>
+						<summary>{url} ({files.length} files)</summary>
+						{#each files as file}
+							<div
+								role="button"
+								tabindex="0"
+								class="accordion-item"
+								onkeydown={(event) => {
+									if (event.key === "Enter") {
+										handleItemClick(file);
+									}
+								}}
+								onclick={() => handleItemClick(file)}
+								oncontextmenu={(event) =>
+									handleItemContextMenuClick(event, file)}
+							>
+								{file}
+							</div>
+						{/each}
+					</details>
+				</div>
+			{/if}
+		{/each}
+	</div>
 </div>
 
 <style>
-	:global(h1) {
-		font-size: 1rem;
+	h1 {
+		font-size: 2rem;
 	}
-	:global(.wtf) {
-		color: red;
+
+	.accordion-item {
+		padding: 8px 16px;
+		border-bottom: 1px solid #e0e0e0;
+	}
+
+	.accordion-item:hover {
+		background-color: var(--background-modifier-hover);
+	}
+
+	.accordion-container {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
 	}
 </style>

src/obsidian/find-duplicates-setting-tab.ts

@@ -14,7 +14,7 @@ export const findDuplicateUrls = async (
 				if (!urlMap.has(url)) {
 					urlMap.set(url, []);
 				}
-				urlMap.get(url)?.push(file.basename);
+				urlMap.get(url)?.push(file.path);
 			}
 		}
 	}

src/svelte/index.svelte

@@ -0,0 +1,22 @@
+import type { App } from "obsidian";
+
+export const openToTheRight = (app: App, filePath: string) => {
+	app.workspace.openLinkText(filePath, "", "split", {
+		active: false,
+	});
+};
+
+export const openInNewTab = async (app: App, filePath: string) => {
+	const isOpen = app.workspace.getLeavesOfType("markdown").some((leaf) => {
+		const viewState = leaf.getViewState();
+		return viewState.state?.file === filePath;
+	});
+
+	if (isOpen) {
+		return;
+	}
+
+	app.workspace.openLinkText(filePath, "", "tab", {
+		active: false,
+	});
+};