devonthesofa_obsidian-note-status/components/toolbar-button.ts

import { NoteStatusSettings } from "models/types";
import { StatusService } from "services/status-service";

export class ToolbarButton {
	private element: HTMLElement | null = null;
	private settings: NoteStatusSettings;
	private statusService: StatusService;

	constructor(settings: NoteStatusSettings, statusService: StatusService) {
		this.settings = settings;
		this.statusService = statusService;
	}

	public createElement(): HTMLElement {
		const button = document.createElement("button");
		button.addClass(
			"note-status-toolbar-button",
			"clickable-icon",
			"view-action",
		);
		button.setAttribute("aria-label", "Note status");

		this.element = button;
		return button;
	}

	public updateDisplay(statuses: string[]): void {
		if (!this.element) return;

		this.element.empty();

		const hasValidStatus = statuses.length > 0 && statuses[0] !== "unknown";
		const badgeContainer = document.createElement("div");
		badgeContainer.addClass("note-status-toolbar-badge-container");

		if (hasValidStatus) {
			this.renderStatusBadge(badgeContainer, statuses);
		} else {
			this.renderUnknownBadge(badgeContainer);
		}

		this.element.appendChild(badgeContainer);
	}

	private renderStatusBadge(
		container: HTMLElement,
		statuses: string[],
	): void {
		const primaryStatus = statuses[0];
		const icon = this.statusService.getStatusIcon(primaryStatus);

		const iconSpan = document.createElement("span");
		iconSpan.addClass(
			`note-status-toolbar-icon`,
			`status-${primaryStatus}`,
		);
		iconSpan.textContent = icon;
		container.appendChild(iconSpan);

		if (this.settings.useMultipleStatuses && statuses.length > 1) {
			const countBadge = document.createElement("span");
			countBadge.addClass("note-status-count-badge");
			countBadge.textContent = `${statuses.length}`;
			container.appendChild(countBadge);
		}
	}

	private renderUnknownBadge(container: HTMLElement): void {
		const iconSpan = document.createElement("span");
		iconSpan.addClass("note-status-toolbar-icon", "status-unknown");
		iconSpan.textContent = this.statusService.getStatusIcon("unknown");
		container.appendChild(iconSpan);
	}

	public updateSettings(settings: NoteStatusSettings): void {
		this.settings = settings;
	}

	public destroy(): void {
		if (this.element) {
			this.element.remove();
			this.element = null;
		}
	}
}