caffa_Obsidian-Current-Folder-Note-Display-Plugin/main.ts

import { App, Notice, Plugin, PluginSettingTab, Setting, TFile } from 'obsidian';
import { ItemView, WorkspaceLeaf } from "obsidian";
import { MarkdownView } from "obsidian";
import { TFolder } from "obsidian";

interface CurrentFolderNotesDisplaySettings {
	excludeTitlesFilter: string;
	includeTitleFilter: string;
	prettyTitleCase: boolean;
	includeSubfolderNotes: boolean;
	includeCurrentFileOutline: boolean;
	includeListFileOutlines: boolean;
	styleMode: 'minimal' | 'fancy' | 'neobrutalist';
	showNavigation: boolean;
	biggerText: boolean; // Add this line
	biggerTextMobileOnly: boolean; // Add this new setting
	maxFilesDisplay: number; // Add new setting for max files to display
}

const DEFAULT_SETTINGS: Partial<CurrentFolderNotesDisplaySettings> = {
	excludeTitlesFilter: '_index',
	includeTitleFilter: '',
	prettyTitleCase: true,
	includeSubfolderNotes: false,
	includeCurrentFileOutline: true,
	includeListFileOutlines: false,
	styleMode: 'fancy',
	showNavigation: false,
	biggerText: false,
	biggerTextMobileOnly: false,
	maxFilesDisplay: 100 // Default to showing 100 files
}

export default class CurrentFolderNotesDisplay extends Plugin {
	settings: CurrentFolderNotesDisplaySettings;
	public leaves: WorkspaceLeaf[] = [];

	fileChangeHandler(file: TFile) {
		if (file instanceof TFile) {
			this.load();
		}
	}

	async onload() {
		await this.loadSettings();

		 // Load custom styles
		this.loadStyles();

		// This adds a settings tab so the user can configure various aspects of the plugin
		this.addSettingTab(new CurrentFolderNotesDisplaySettingTab(this.app, this));

		// add a panel to the right sidebar - view
		this.registerView(VIEW_TYPE_CURRENT_FOLDER_NOTES_DISPLAY, (leaf) => new CurrentFolderNotesDisplayView(leaf, this));

		// Add a ribbon icon
		this.addRibbonIcon('folder', 'Activate folder notes display', () => {
			this.activateView();
		});

		// Add a command to open the view
		this.addCommand({
			id: 'activate-folder-notes-display',
			name: 'Open Pane',
			callback: () => {
				this.activateView();
			}
		});

		 // Add debouncing for refreshView
		let refreshTimeout: NodeJS.Timeout | null = null;
		const debouncedRefresh = () => {
			if (refreshTimeout) clearTimeout(refreshTimeout);
			refreshTimeout = setTimeout(() => {
				this.refreshView();
			}, 300); // Wait 300ms before refreshing
		};

		// Use debounced refresh for all file events
		this.registerEvent(this.app.workspace.on('file-open', debouncedRefresh));
		this.registerEvent(this.app.vault.on('delete', debouncedRefresh));
		this.registerEvent(this.app.vault.on('create', debouncedRefresh));
		this.registerEvent(this.app.vault.on('rename', debouncedRefresh));
	}

	async onunload() {
		console.log('unloading plugin');

		// Clean up by detaching any leaves created by this plugin
		const leavesToDetach = this.app.workspace.getLeavesOfType(VIEW_TYPE_CURRENT_FOLDER_NOTES_DISPLAY);
		leavesToDetach.forEach(leaf => {
			leaf.detach();
		});

		// Clear the leaves array
		this.leaves = [];
	}

	async activateView() {
		const { workspace } = this.app;

		// Clean up existing leaves first to prevent duplicates
		const existingLeaves = workspace.getLeavesOfType(VIEW_TYPE_CURRENT_FOLDER_NOTES_DISPLAY);

		// Keep only the first leaf if multiple exist
		if (existingLeaves.length > 1) {
			for (let i = 1; i < existingLeaves.length; i++) {
				existingLeaves[i].detach();
			}
		}

		let leaf: WorkspaceLeaf | null = null;

		if (existingLeaves.length) {
			// A leaf with our view already exists, use that
			leaf = existingLeaves[0];
		} else {
			// Our view could not be found in the workspace, create a new leaf
			// in the right sidebar for it
			leaf = workspace.getRightLeaf(false);
			if (leaf) {
				await leaf.setViewState({ type: VIEW_TYPE_CURRENT_FOLDER_NOTES_DISPLAY, active: true });
				// Only add to leaves array if it's a new leaf
				this.leaves.push(leaf);
			}
		}

		if (!leaf) {
			new Notice('Could not create a new leaf for the view');
			return;
		}
		workspace.revealLeaf(leaf);
	}

	async refreshView() {
		const { workspace } = this.app;
		// console.log("[CFN] Refresh view triggered");
		const leaves = workspace.getLeavesOfType(VIEW_TYPE_CURRENT_FOLDER_NOTES_DISPLAY);
		// console.log("[CFN] Found leaves:", leaves.length);

		if (leaves.length > 1) {
			// console.log("[CFN] Multiple leaves found, cleaning up extras");
			for (let i = 1; i < leaves.length; i++) {
				leaves[i].detach();
			}
		}

		if (leaves.length === 1) {
			// console.log("[CFN] Updating existing view");
			const leaf = leaves[0];
			const view = leaf.view;

			// Check if view is an instance of CurrentFolderNotesDisplayView
			if (view && view instanceof CurrentFolderNotesDisplayView) {
				await view.displayNotesInCurrentFolder();
			} else {
				// If the view doesn't have the expected method, recreate it
				console.log("[CFN] View is not a CurrentFolderNotesDisplayView, recreating view");
				leaf.detach();
				await this.activateView();
			}
		} else if (leaves.length === 0) {
			// console.log("[CFN] No view found, creating new one");
			this.activateView();
		}
	}

	async loadSettings() {
		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
	}

	async saveSettings() {
		await this.saveData(this.settings);
	}

	// Add this method to load styles
	loadStyles() {
		// Load styles from the plugin's styles.css
		const styleEl = document.createElement('style');
		styleEl.id = 'current-folder-notes-styles';
		document.head.appendChild(styleEl);

		// Register the stylesheet to be removed when the plugin unloads
		this.register(() => styleEl.remove());

		// Load the CSS file from the plugin directory
		this.loadData().then(data => {
			// You can add default styles here if needed
			const defaultStyles = `
				.folder-notes-style { font-weight: 500; }
				.folder-notes-style.current-file { font-weight: bold; }
				.hover-style-file { text-decoration: underline; }
				.hover-style-heading { font-style: italic; }
				/* Add more default styles as needed */
			`;
			styleEl.textContent = defaultStyles;
		});
	}
}

export const VIEW_TYPE_CURRENT_FOLDER_NOTES_DISPLAY = "current-folder-notes-view";

export class CurrentFolderNotesDisplayView extends ItemView {
	plugin: CurrentFolderNotesDisplay;

	constructor(leaf: WorkspaceLeaf, plugin: CurrentFolderNotesDisplay) {
		super(leaf);
		this.plugin = plugin;
	}

	getViewType() {
		return VIEW_TYPE_CURRENT_FOLDER_NOTES_DISPLAY;
	}

	getDisplayText() {
		return "Current Folder Notes";
	}

	getIcon(): string {
		return 'folder';

	}

	async onOpen() {

		await this.displayNotesInCurrentFolder();
	}

	async onClose() {
			// Remove this leaf from the plugin's leaves array to avoid memory leaks
			const index = this.plugin.leaves.indexOf(this.leaf);
			if (index > -1) {
				this.plugin.leaves.splice(index, 1);
			}
		}

	// main.ts

	// Function to create clickable headings
	createClickableHeadings(container: HTMLElement, currentFileContent: string, currentFilePath: string, addExtraHeadingCSS: boolean): void {
		// Set a maximum limit on the file content to process for safety
		const MAX_CONTENT_SIZE = 500000; // 500KB max processing size

		if (currentFileContent.length > MAX_CONTENT_SIZE) {
			currentFileContent = currentFileContent.substring(0, MAX_CONTENT_SIZE);
			// Add a note that content was truncated
			container.createEl('p', {
				cls: 'content-truncated-note',
				text: 'Note is very large. Only showing headings from the first portion.'
			});
		}

		// Use a more efficient regex approach for large files
		const headingRegex = /^(#+)\s+(.*)$/gm;
		let match;
		let headingCount = 0;
		const MAX_HEADINGS = 100; // Limit the number of headings displayed

		// Process headings in batches for very large files
		try {
			while ((match = headingRegex.exec(currentFileContent)) !== null && headingCount < MAX_HEADINGS) {
				const headingLevel = match[1].length;
				let headingText = match[2];

				// Use extractAlias to get the alias from the heading text
				headingText = this.extractAlias(headingText);
				// Add a right arrow symbol to the heading text
				let headingLabel = '→ ' + headingText;

				const p: HTMLElement = container.createEl('p', { text: headingLabel });
				p.classList.add('basic-heading');
				p.classList.add(`heading-level-${headingLevel}`);

				if (addExtraHeadingCSS) {
					p.classList.add('extra-heading-style');
				}

				p.addEventListener('click', (event) => {
					// Prevent default behavior
					event.preventDefault();

					// Use the openLinkText method to navigate to the heading
					this.app.workspace.openLinkText('#' + headingText, currentFilePath);

					// Clear any text selection
					const selection = window.getSelection();
					if (selection) {
						selection.removeAllRanges();
					}
				});

				// Add hover effect
				p.onmouseover = () => {
					p.classList.add('hover-style-heading');
				}
				// Remove hover effect when not hovering
				p.onmouseout = () => {
					p.classList.remove('hover-style-heading');
				}

				headingCount++;
			}

			// Indicate if there are more headings not shown
			if (headingCount >= MAX_HEADINGS) {
				container.createEl('p', {
					cls: 'more-headings-note',
					text: '... more headings available (not shown)'
				});
			}
		} catch (err) {
			console.error("Error processing headings:", err);
			container.createEl('p', {
				cls: 'error-note',
				text: 'Error processing headings'
			});
		}
	}

	// Function to extract alias from heading text
	extractAlias(headingText: string): string {
		const matches = headingText.match(/\[\[.*\|(.*?)\]\]/);
		return matches ? matches[1] : headingText;
	}

	private getShortNoteName(basename: string): string {
		// Try to find T numbers first (e.g., T1, T23)
		const tMatch = basename.match(/T(\d+)/);
		if (tMatch) return `T${tMatch[1]}`;

		// Try to find Y numbers next (e.g., Y1, Y2023)
		const yMatch = basename.match(/Y(\d+)/);
		if (yMatch) return `Y${yMatch[1]}`;

		// Try to find any numbers
		const numberMatch = basename.match(/\d+/);
		if (numberMatch) return numberMatch[0];

		// Try to find text after dash
		const dashMatch = basename.match(/-\s*(.+)$/);
		if (dashMatch) return dashMatch[1];

		// If nothing else matches, return the basename
		return basename;
	}

	async displayNotesInCurrentFolder(): Promise<void> {
		// console.log("[CFN] Starting displayNotesInCurrentFolder");
		const container = this.containerEl.children[1] as HTMLElement;
		container.empty();

		// Get display settings
		// const displayMode = this.plugin.settings.displayMode; // Removed
		const styleMode = this.plugin.settings.styleMode;
		const showNavigation = this.plugin.settings.showNavigation;

		// Create header
		const headerContainer = container.createDiv({ cls: 'folder-view-header' });
		headerContainer.createEl("h6", { text: "Current Folder Notes" });

		// Get current file info and folder path
		const activeFile = this.app.workspace.getActiveFile();
		// console.log("[CFN] Active file:", activeFile?.path);

		const currentFilePath = activeFile ? activeFile.path : '';
		let parentFolderPath = '';  // Don't default to root

		if (currentFilePath) {
			const lastSlashIndex = currentFilePath.lastIndexOf('/');
			parentFolderPath = lastSlashIndex > 0 ? currentFilePath.substring(0, lastSlashIndex) : '';
			// console.log("[CFN] Parent folder path from current file:", parentFolderPath);
		} else if (this.app.workspace.getActiveViewOfType(MarkdownView)) {
			const activeView = this.app.workspace.getActiveViewOfType(MarkdownView);
			// console.log("[CFN] Found active view:", activeView?.file?.path);
			if (activeView?.file) {
				const viewFilePath = activeView.file.path;
				const lastSlashIndex = viewFilePath.lastIndexOf('/');
				parentFolderPath = lastSlashIndex > 0 ? viewFilePath.substring(0, lastSlashIndex) : '';
				// console.log("[CFN] Parent folder path from view:", parentFolderPath);
			}
		}

		// Show warning if no valid folder path found
		if (!parentFolderPath) {
			const warningDiv = container.createDiv({ cls: 'empty-state-message' });
			warningDiv.createEl('p', {
				text: 'Please open a note in a folder to view related notes.',
				cls: 'empty-state-highlight'
			});
			warningDiv.createEl('p', {
				text: 'The root folder cannot be shown to prevent performance issues with large vaults.',
				cls: 'empty-state-subtext'
			});
			return;
		}

		// Show current folder path
		const pathDisplay = headerContainer.createEl('div', {
			cls: 'folder-path-display',
			text: parentFolderPath
		});
		pathDisplay.style.fontSize = 'var(--font-smaller)';
		pathDisplay.style.color = 'var(--text-muted)';
		pathDisplay.style.marginBottom = '10px';
		pathDisplay.style.wordBreak = 'break-word';

		// Get and filter files
		let folder = this.app.vault.getAbstractFileByPath(parentFolderPath);
		// console.log("[CFN] Found folder:", folder?.path);
		let files: TFile[] = [];
		if (folder instanceof TFolder) {
			files = folder.children.filter((file: any) => file instanceof TFile) as TFile[];
			// console.log("[CFN] Initial files count:", files.length);
		}

		files = this.applyFilters(files, parentFolderPath);
		// console.log("[CFN] Files after filtering:", files.length);
		// console.log("[CFN] Current filters - Include:", this.plugin.settings.includeTitleFilter, "Exclude:", this.plugin.settings.excludeTitlesFilter);

		if (files.length === 0) {
			this.showEmptyState(container, activeFile, currentFilePath, files);
			return;
		}

		// Sort files by name/sequence
		const sequenceWithPrefixOrLongest = (str: string) => {
			const tMatches = str.match(/T(\d+)/);
			if (tMatches) return parseInt(tMatches[1]);
			const yMatches = str.match(/Y(\d+)/);
			if (yMatches) return parseInt(yMatches[1]) + 1000;
			const matches = str.match(/\d+/g) || [];
			return Math.max(...matches.map(numStr => parseInt(numStr)), 0);
		};

		files.sort((a, b) => sequenceWithPrefixOrLongest(a.basename) - sequenceWithPrefixOrLongest(b.basename));
		const currentFileIndex = files.findIndex(file => file.path === currentFilePath);

		// Create main content container
		const mainContent = container.createDiv({ cls: 'main-content' });

		// Show navigation section if enabled and we have a current file
		if (showNavigation && currentFileIndex !== -1) {
			const navigationSection = mainContent.createDiv({ cls: 'navigation-section' });

			// Navigation header with prev/next
			const navHeader = navigationSection.createDiv({ cls: 'navigation-header' });

			// Previous note
			if (currentFileIndex > 0) {
				const prevNote = files[currentFileIndex - 1];
				const prevLink = navHeader.createDiv({ cls: 'nav-link prev-note' });
				const prevIcon = prevLink.createSpan({ cls: 'nav-icon' });
				prevIcon.innerHTML = `<svg viewBox="0 0 100 100" class="arrow-left" width="16" height="16"><path fill="currentColor" stroke="currentColor" d="M 60,20 L 30,50 L 60,80"></path></svg>`;
				prevLink.createSpan({ cls: 'nav-direction', text: 'Previous' });
				const prevTitle = prevLink.createSpan({
					cls: 'nav-title',
					text: this.getShortNoteName(prevNote.basename)
				});
				prevLink.setAttribute('aria-label', `Previous: ${prevNote.basename}`);
				prevLink.addEventListener('click', () => {
					// Use the full path to handle duplicate file names
					this.app.workspace.openLinkText(prevNote.path, '');
				});
			}

			// Next note
			if (currentFileIndex < files.length - 1) {
				const nextNote = files[currentFileIndex + 1];
				const nextLink = navHeader.createDiv({ cls: 'nav-link next-note' });
				nextLink.createSpan({ cls: 'nav-direction', text: 'Next' });
				const nextIcon = nextLink.createSpan({ cls: 'nav-icon' });
				nextIcon.innerHTML = `<svg viewBox="0 0 100 100" class="arrow-right" width="16" height="16"><path fill="currentColor" stroke="currentColor" d="M 40,20 L 70,50 L 40,80"></path></svg>`;
				const nextTitle = nextLink.createSpan({
					cls: 'nav-title',
					text: this.getShortNoteName(nextNote.basename)
				});
				nextLink.setAttribute('aria-label', `Next: ${nextNote.basename}`);
				nextLink.addEventListener('click', () => {
					// Use the full path to handle duplicate file names
					this.app.workspace.openLinkText(nextNote.path, '');
				});
			}

			// Current note outline - LAZY LOAD
			if (this.plugin.settings.includeCurrentFileOutline) {
				const currentFile = files[currentFileIndex];
				// Create the outline section first
				const outlineSection = navigationSection.createDiv({ cls: 'outline-section' });

				// Add current note title
				outlineSection.createEl('div', {
					cls: 'current-note-title',
					text: currentFile.basename
				});

				outlineSection.createEl('div', {
					cls: 'folder-section-header',
					text: 'CURRENT NOTE OUTLINE'
				});

				// Add a loading indicator
				const loadingEl = outlineSection.createEl('div', {
					cls: 'loading-indicator',
					text: 'Loading outline...'
				});

				// Load content asynchronously
				setTimeout(async () => {
					const fileContent = await this.app.vault.read(currentFile);
					if (fileContent) {
						// Remove loading indicator
						loadingEl.remove();
						// Create the headings
						this.createClickableHeadings(outlineSection, fileContent, currentFile.path, true);
					} else {
						loadingEl.setText('No content found');
					}
				}, 10);
			}

			// Add separator
			mainContent.createDiv({ cls: 'section-separator' });
		}

		// Always show flat list view
		const listContainer = mainContent.createDiv({ cls: 'notes-flat-list' });
		listContainer.createEl('div', {
			cls: 'folder-section-header',
			text: 'FOLDER NOTES'
		});

		// OPTIMIZE: Limit the number of files displayed at once to prevent memory issues
		const MAX_FILES_DISPLAY = this.plugin.settings.maxFilesDisplay; // Use the setting value
		const displayedFiles = files.slice(0, MAX_FILES_DISPLAY);
		const hasMoreFiles = files.length > MAX_FILES_DISPLAY;

		// Process files in batches to prevent UI freezing
		const BATCH_SIZE = 20;
		const processBatch = async (startIdx: number) => {
			const endIdx = Math.min(startIdx + BATCH_SIZE, displayedFiles.length);

			for (let i = startIdx; i < endIdx; i++) {
				const file = displayedFiles[i];
				const isCurrentFile = file.path === currentFilePath;
				const fileContainer = listContainer.createDiv({
					cls: isCurrentFile ? 'file-container current' : 'file-container'
				});

				this.createFileLink(fileContainer, file, currentFilePath, parentFolderPath);

				// Only load outlines if explicitly enabled
				if (this.plugin.settings.includeListFileOutlines) {
					// Add a placeholder initially
					const outlinePlaceholder = fileContainer.createEl('div', {
						cls: 'outline-placeholder',
						text: 'Loading outline...'
					});

					// Load outline in the next animation frame
					requestAnimationFrame(async () => {
						try {
							const fileContent = await this.app.vault.read(file);
							outlinePlaceholder.remove();
							if (fileContent) {
								this.createClickableHeadings(fileContainer, fileContent, file.path, isCurrentFile);
							}
						} catch (err) {
							console.error("Error loading outline:", err);
							outlinePlaceholder.setText("Failed to load outline");
						}
					});
				}
			}

			// Process next batch if needed
			if (endIdx < displayedFiles.length) {
				setTimeout(() => processBatch(endIdx), 50);
			}

			// Show message if we're not displaying all files
			if (hasMoreFiles && endIdx === displayedFiles.length) {
				listContainer.createEl('div', {
					cls: 'more-files-message',
					text: `Showing ${MAX_FILES_DISPLAY} of ${files.length} notes. Use filters to narrow results.`
				});
			}
		};

		// Start processing the first batch
		processBatch(0);

		// Apply display classes
		container.classList.add('compact-mode'); // Always use compact mode
		// container.classList.toggle('expanded-mode', displayMode === 'expanded'); // Removed
		container.classList.toggle('minimal-style', styleMode === 'minimal');
		container.classList.toggle('fancy-style', styleMode === 'fancy');
		container.classList.toggle('neobrutalist-style', styleMode === 'neobrutalist');
		const shouldApplyBiggerText = this.plugin.settings.biggerText &&
			(!this.plugin.settings.biggerTextMobileOnly || (this.app as any).isMobile);
		container.classList.toggle('bigger-text', shouldApplyBiggerText);

	}

	// Helper function to create file links with consistent styling
	createFileLink(container: HTMLElement, file: any, currentFilePath: string, parentFolderPath: string): void {
		const p = container.createEl('p');
		const a = p.createEl('a', { text: file.basename });

		if (this.plugin.settings.prettyTitleCase) {
			a.innerText = a.innerText.replace(/\w\S*/g, function(txt) {
				return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
			});
		}

		// Apply styling
		a.className = 'folder-notes-style';

		// If current file, add special styling
		if (file.path === currentFilePath) {
			a.className += ' current-file';
			a.innerText = '\u2605 ' + a.innerText;
		}

		// Add hover effects
		a.onmouseover = () => a.classList.add('hover-style-file');
		a.onmouseout = () => a.classList.remove('hover-style-file');

		// Add click handler to open the file
		a.addEventListener('click', () => {
			// Use the full path instead of just basename to handle duplicate file names
			this.app.workspace.openLinkText(file.path, '');
		});
	}

	// Helper method to show empty state
	private showEmptyState(container: HTMLElement, activeFile: TFile | null, currentFilePath: string, files: TFile[]): void {
		const emptyStateDiv = container.createDiv({ cls: 'empty-state-message' });
		if (files.length === 0) {
			emptyStateDiv.createEl('p', {
				text: 'No notes found. If you have recently added or moved notes, Obsidian might still be indexing them. Please wait a moment and try again.',
				cls: 'empty-state-highlight'
			});
		}
		if (this.plugin.settings.includeTitleFilter) {
			emptyStateDiv.createEl('p', {
				text: `🔍 No notes match the current filter "${this.plugin.settings.includeTitleFilter}".`,
				cls: 'empty-state-highlight'
			});
		} else if (this.plugin.settings.excludeTitlesFilter) {
			emptyStateDiv.createEl('p', {
				text: `All notes are currently filtered out by the exclude pattern "${this.plugin.settings.excludeTitlesFilter}"`,
			});
		} else {
			emptyStateDiv.createEl('p', {
				text: 'This folder is empty',
			});
		}

		if (currentFilePath && activeFile) {
			emptyStateDiv.createEl('p', {
				text: 'Showing outline of current note:',
				cls: 'empty-state-subtext'
			});

			// Add a loading indicator
			const loadingEl = emptyStateDiv.createEl('div', {
				cls: 'loading-indicator',
				text: 'Loading outline...'
			});

			// Load content asynchronously with timeout to prevent blocking UI
			setTimeout(async () => {
				try {
					const fileContent = await this.app.vault.read(activeFile);
					if (fileContent) {
						// Remove loading indicator
						loadingEl.remove();
						// Create the headings with a limited subset of content if it's large
						const contentSize = fileContent.length;
						if (contentSize > 100000) { // If content is very large (>100KB)
							const truncatedContent = fileContent.substring(0, 100000);
							this.createClickableHeadings(container as HTMLElement, truncatedContent, currentFilePath, true);
							container.createEl('p', {
								text: 'Note is very large. Only showing first portion of headings.',
								cls: 'empty-state-subtext'
							});
						} else {
							this.createClickableHeadings(container as HTMLElement, fileContent, currentFilePath, true);
						}
					} else {
						loadingEl.setText('No content found');
					}
				} catch (err) {
					console.error("Error loading outline:", err);
					loadingEl.setText("Failed to load outline");
				}
			}, 10);
		}
	}

	private applyFilters(files: TFile[], parentFolderPath: string): TFile[] {
		// Create a single-pass filter function to avoid multiple array iterations
		return files.filter(file => {
			// Skip files in subfolders if that setting is disabled
			if (!this.plugin.settings.includeSubfolderNotes &&
				file.path.substring(parentFolderPath.length + 1).includes('/')) {
				return false;
			}

			const lowerBasename = file.basename.toLowerCase();

			// Check exclude filter
			const excludeFilter = this.plugin.settings.excludeTitlesFilter;
			if (excludeFilter && excludeFilter.length > 0) {
				const excludeWords = excludeFilter.split(/[,\s]+/).filter(word => word.trim().length > 0)
					.map(word => word.trim().toLowerCase());

				if (excludeWords.length > 0 &&
					excludeWords.some(word => lowerBasename.includes(word))) {
					return false;
				}
			}

			// Check include filter
			const includesFilter = this.plugin.settings.includeTitleFilter;
			if (includesFilter && includesFilter.length > 0) {
				const includeWords = includesFilter.split(/[,\s]+/).filter(word => word.trim().length > 0)
					.map(word => word.trim().toLowerCase());

				if (includeWords.length > 0 &&
					!includeWords.some(word => lowerBasename.includes(word))) {
					return false;
				}
			}

			return true;
		});
	}
}

class CurrentFolderNotesDisplaySettingTab extends PluginSettingTab {
	plugin: CurrentFolderNotesDisplay;

	constructor(app: App, plugin: CurrentFolderNotesDisplay) {
		super(app, plugin);
		this.plugin = plugin;
	}

	display(): void {
		const {containerEl} = this;

		containerEl.empty();

		// Add some CSS for styling the settings
		containerEl.createEl('style', {
			text: `
				.settings-section {
					margin-bottom: 24px;
					border-bottom: 1px solid var(--background-modifier-border);
					padding-bottom: 16px;
				}
				.settings-section-header {
					margin-bottom: 12px;
					font-size: 16px;
					font-weight: 600;
					color: var(--text-normal);
				}
				.settings-section-description {
					margin-bottom: 12px;
					font-size: 13px;
					color: var(--text-muted);
				}
				.setting-item {
					border-top: none !important;
					padding-top: 12px !important;
				}
				.setting-item-description {
					font-size: 12px !important;
				}
			`
		});

		// Title section with plugin description
		const titleEl = containerEl.createDiv({ cls: 'settings-section' });
		titleEl.createEl('h2', { text: 'Current Folder Notes Settings' });
		titleEl.createEl('p', {
			cls: 'settings-section-description',
			text: 'Configure how notes from the current folder are displayed in the panel.'
		});

		// Filter settings section
		const filtersEl = containerEl.createDiv({ cls: 'settings-section' });
		filtersEl.createEl('h3', { cls: 'settings-section-header', text: '📂 Filter Settings' });
		filtersEl.createEl('p', {
			cls: 'settings-section-description',
			text: 'Control which notes appear in the folder notes panel.'
		});

		new Setting(filtersEl)
			.setName('Exclude titles filter')
			.setDesc('Notes containing these words will be hidden. Separate multiple words with commas.')
			.addText(text => text
				.setPlaceholder('_index, draft, template')
				.setValue(this.plugin.settings.excludeTitlesFilter)
				.onChange(async (value) => {
					this.plugin.settings.excludeTitlesFilter = value;
					await this.plugin.saveSettings();
				}));

		new Setting(filtersEl)
			.setName('Include titles filter')
			.setDesc('Only notes containing these words will be shown. Leave empty to show all notes. Separate multiple words with commas.')
			.addText(text => text
				.setPlaceholder('chapter, section, lesson')
				.setValue(this.plugin.settings.includeTitleFilter)
				.onChange(async (value) => {
					this.plugin.settings.includeTitleFilter = value;
					await this.plugin.saveSettings();
				}));

		// Display options section
		const displayEl = containerEl.createDiv({ cls: 'settings-section' });
		displayEl.createEl('h3', { cls: 'settings-section-header', text: '🖥️ Display Options' });
		displayEl.createEl('p', {
			cls: 'settings-section-description',
			text: 'Control how notes and their contents are displayed in the panel.'
		});

		new Setting(displayEl)
			.setName('Show navigation')
			.setDesc('Show navigation links for previous and next notes.')
			.addToggle(toggle => toggle
				.setValue(this.plugin.settings.showNavigation)
				.onChange(async (value) => {
					this.plugin.settings.showNavigation = value;
					await this.plugin.saveSettings();
					this.plugin.refreshView();
				}));

		new Setting(displayEl)
			.setName('Pretty title case')
			.setDesc('Convert note titles to Title Case for better readability.')
			.addToggle(toggle => toggle
				.setValue(this.plugin.settings.prettyTitleCase)
				.onChange(async (value) => {
					this.plugin.settings.prettyTitleCase = value;
					await this.plugin.saveSettings();
				}));

		new Setting(displayEl)
			.setName('Style mode')
			.setDesc('Choose between minimal, fancy, and neobrutalist styles.')
			.addDropdown(dropdown => dropdown
				.addOption('minimal', 'Minimal')
				.addOption('fancy', 'Fancy')
				.addOption('neobrutalist', 'Neobrutalist')
				.setValue(this.plugin.settings.styleMode)
				.onChange(async (value) => {
					this.plugin.settings.styleMode = value as 'minimal' | 'fancy' | 'neobrutalist';
					await this.plugin.saveSettings();
					this.plugin.refreshView();
				}));

		new Setting(displayEl)
			.setName('Bigger text')
			.setDesc('Make all the text bigger for easier clicking.')
			.addToggle(toggle => toggle
				.setValue(this.plugin.settings.biggerText)
				.onChange(async (value) => {
					this.plugin.settings.biggerText = value;
					await this.plugin.saveSettings();
					this.plugin.refreshView();
				}));

			// Add this after the existing biggerText setting
			new Setting(displayEl)
				.setName('Mobile-only bigger text')
				.setDesc('Only apply bigger text when using Obsidian on mobile devices.')
				.addToggle(toggle => toggle
					.setValue(this.plugin.settings.biggerTextMobileOnly)
					.onChange(async (value) => {
						this.plugin.settings.biggerTextMobileOnly = value;
						await this.plugin.saveSettings();
						this.plugin.refreshView();
					}));

		// Content options section
		const contentEl = containerEl.createDiv({ cls: 'settings-section' });
		contentEl.createEl('h3', { cls: 'settings-section-header', text: '📝 Content Options' });
		contentEl.createEl('p', {
			cls: 'settings-section-description',
			text: 'Configure what content is included in the folder notes panel.'
		});

		new Setting(contentEl)
			.setName('Include subfolder notes')
			.setDesc('Show notes from subfolders within the current folder.')
			.addToggle(toggle => toggle
				.setValue(this.plugin.settings.includeSubfolderNotes)
				.onChange(async (value) => {
					this.plugin.settings.includeSubfolderNotes = value;
					await this.plugin.saveSettings();
				}));

		new Setting(contentEl)
			.setName('Show outline in current file section')
			.setDesc('Display headings from the currently active file at the top of the panel.')
			.addToggle(toggle => toggle
				.setValue(this.plugin.settings.includeCurrentFileOutline)
				.onChange(async (value) => {
					this.plugin.settings.includeCurrentFileOutline = value;
					await this.plugin.saveSettings();
				}));

		new Setting(contentEl)
			.setName('Show outline in files list')
			.setDesc('Display headings under each file in the folder notes list.')
			.addToggle(toggle => toggle
				.setValue(this.plugin.settings.includeListFileOutlines)
				.onChange(async (value) => {
					this.plugin.settings.includeListFileOutlines = value;
					await this.plugin.saveSettings();
				}));

		new Setting(contentEl)
			.setName('Maximum files to display')
			.setDesc('Limit the number of files shown in the folder notes list. Use a lower value for better performance in large folders.')
			.addSlider(slider => slider
				.setLimits(10, 500, 10)
				.setValue(this.plugin.settings.maxFilesDisplay)
				.setDynamicTooltip()
				.onChange(async (value) => {
					this.plugin.settings.maxFilesDisplay = value;
					await this.plugin.saveSettings();
					this.plugin.refreshView();
				}));

		// About section with help text
		const aboutEl = containerEl.createDiv({ cls: 'settings-section' });
		aboutEl.createEl('h3', { cls: 'settings-section-header', text: 'ℹ️ About' });
		aboutEl.createEl('p', {
			cls: 'settings-section-description',
			text: 'Current Folder Notes displays notes and outlines from the current folder for quick navigation. Changes to settings will apply immediately.'
		});

		// Add a refresh button to explicitly refresh the view
		new Setting(aboutEl)
			.setName('Refresh panel')
			.setDesc('Manually refresh the Current Folder Notes panel to apply changes.')
			.addButton(button => button
				.setButtonText('Refresh Now')
				.setCta()
				.onClick(() => {
					this.plugin.refreshView();
					new Notice('Current Folder Notes panel refreshed');
				}));
	}
}