feat: add setting to toggle status overview popup

components/SettingsUI/UISettings.tsx

@@ -42,6 +42,17 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 				/>
 			</SettingItem>
 
+			<SettingItem
+				name="Show status overview popup"
+				description="When enabled, show the popup with statuses when hovering or interacting with the status indicator."
+			>
+				<input
+					type="checkbox"
+					checked={settings.enableStatusOverviewPopup ?? true}
+					onChange={handleChange("enableStatusOverviewPopup")}
+				/>
+			</SettingItem>
+
 			<SettingItem
 				name="Show status icons in file explorer"
 				description="Display status icons in the file explorer"

constants/defaultSettings.ts

@@ -15,6 +15,7 @@ export const DEFAULT_PLUGIN_SETTINGS: PluginSettings = {
 	},
 	showStatusBar: true,
 	autoHideStatusBar: false,
+	enableStatusOverviewPopup: true,
 	templates: [...PREDEFINED_TEMPLATES],
 	customStatuses: [],
 	showStatusIconsInExplorer: true,

integrations/popups/statusesInfoPopupIntegration.tsx

@@ -1,6 +1,7 @@
 import { createRoot, Root } from "react-dom/client";
 import { GroupedStatuses } from "@/types/noteStatus";
 import { StatusFileInfoPopup } from "@/components/StatusFileInfoPopup/StatusFileInfoPopup";
+import settingsService from "@/core/settingsService";
 
 export class StatusesInfoPopup {
 	private root: Root | null = null;
@@ -11,8 +12,14 @@ export class StatusesInfoPopup {
 	private constructor() {}
 
 	static open(statuses: GroupedStatuses) {
+		// Always ensure previous instance is cleaned up before showing or when disabled
 		StatusesInfoPopup.close();
 
+		const isEnabled =
+			settingsService.settings?.enableStatusOverviewPopup ?? true;
+		if (!isEnabled) {
+			return;
+		}
 		StatusesInfoPopup.instance = new StatusesInfoPopup();
 		StatusesInfoPopup.instance.statuses = statuses;
 		StatusesInfoPopup.instance.show();

main.tsx

@@ -17,6 +17,7 @@ import {
 	StatusDashboardView,
 	VIEW_TYPE_STATUS_DASHBOARD,
 } from "./integrations/views/status-dashboard-view";
+import { StatusesInfoPopup } from "./integrations/popups/statusesInfoPopupIntegration";
 
 export default class NoteStatusPlugin extends Plugin {
 	private statusBarIntegration: StatusBarIntegration;
@@ -73,6 +74,10 @@ export default class NoteStatusPlugin extends Plugin {
 			"triggered-open-modal",
 			"main-triggered-open-modal-subscriptor",
 		);
+		eventBus.unsubscribe(
+			"plugin-settings-changed",
+			"main-status-popup-setting-subscriptor",
+		);
 	}
 
 	async activateView() {
@@ -165,6 +170,16 @@ export default class NoteStatusPlugin extends Plugin {
 			},
 			"main-triggered-open-modal-subscriptor",
 		);
+
+		eventBus.subscribe(
+			"plugin-settings-changed",
+			({ key, value }) => {
+				if (key === "enableStatusOverviewPopup" && value === false) {
+					StatusesInfoPopup.close();
+				}
+			},
+			"main-status-popup-setting-subscriptor",
+		);
 	}
 
 	async loadPluginSettings() {

types/pluginSettings.ts

@@ -15,6 +15,7 @@ export type PluginSettings = {
 	statusColors: Record<string, string>;
 	showStatusBar: boolean;
 	autoHideStatusBar: boolean;
+	enableStatusOverviewPopup: boolean; // Whether to show popup with grouped statuses
 	templates: StatusTemplate[];
 	customStatuses: NoteStatus[];
 	statusBarShowTemplateName: "always" | "never" | "auto"; // How to show template names in status bar