From 2d1ccd1127d68a95ce8ddac176bdeaa6ec8f03f3 Mon Sep 17 00:00:00 2001
From: Aleix Soler <aleixsoler64@gmail.com>
Date: Wed, 16 Jul 2025 18:36:01 +0200
Subject: [PATCH] chore: unified status display system

---
 .../ChangeStatusModal/CurrentStatusChips.tsx  |   6 +-
 .../GroupedStatusView/GroupedStatusView.tsx   |   2 +-
 .../components/StatusGroup.tsx                |   5 +-
 components/SettingsUI.tsx/TemplateItem.tsx    |   4 +-
 .../SettingsUI.tsx/TemplateStatusChip.tsx     |  18 ---
 components/StatusBar/StatusBarGroup.tsx       |   5 +-
 .../StatusDashboard/CurrentNoteSection.tsx    |   5 +-
 .../StatusDistributionChart.tsx               |   7 +-
 .../StatusFileInfoPopup.tsx                   |   7 +-
 components/atoms/StatusBadge.tsx              |  25 ----
 components/atoms/StatusChip.tsx               |  74 ----------
 components/atoms/StatusDisplay.tsx            | 132 ++++++++++++++++++
 12 files changed, 158 insertions(+), 132 deletions(-)
 delete mode 100644 components/SettingsUI.tsx/TemplateStatusChip.tsx
 delete mode 100644 components/atoms/StatusBadge.tsx
 delete mode 100644 components/atoms/StatusChip.tsx
 create mode 100644 components/atoms/StatusDisplay.tsx

diff --git a/components/ChangeStatusModal/CurrentStatusChips.tsx b/components/ChangeStatusModal/CurrentStatusChips.tsx
index 99c4e14..6155e0b 100644
--- a/components/ChangeStatusModal/CurrentStatusChips.tsx
+++ b/components/ChangeStatusModal/CurrentStatusChips.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { NoteStatus } from "@/types/noteStatus";
-import { StatusChip } from "../atoms/StatusChip";
+import { StatusDisplay } from "../atoms/StatusDisplay";
 import { SettingItem } from "../SettingsUI.tsx/SettingItem";
 
 interface Props {
@@ -25,9 +25,11 @@ export const CurrentStatusChips: React.FC<Props> = ({
 				}}
 			>
 				{currentStatuses.map((status) => (
-					<StatusChip
+					<StatusDisplay
 						key={status.name}
 						status={status}
+						variant="chip"
+						removable
 						onRemove={() => onRemoveStatus(status)}
 					/>
 				))}
diff --git a/components/GroupedStatusView/GroupedStatusView.tsx b/components/GroupedStatusView/GroupedStatusView.tsx
index 071f604..fc1f797 100644
--- a/components/GroupedStatusView/GroupedStatusView.tsx
+++ b/components/GroupedStatusView/GroupedStatusView.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo } from "react";
+import { useState, useCallback, useMemo } from "react";
 import { FilterSection } from "./components/FilterSection";
 import { TagSection } from "./components/TagSection";
 import { LoadingSpinner } from "./components/LoadingSpinner";
diff --git a/components/GroupedStatusView/components/StatusGroup.tsx b/components/GroupedStatusView/components/StatusGroup.tsx
index b5ac851..b398053 100644
--- a/components/GroupedStatusView/components/StatusGroup.tsx
+++ b/components/GroupedStatusView/components/StatusGroup.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { StatusBadge } from "@/components/atoms/StatusBadge";
+import { StatusDisplay } from "@/components/atoms/StatusDisplay";
 import { CollapsibleCounter } from "@/components/atoms/CollapsibleCounter";
 import { FileItem, StatusItem } from "../GroupedStatusView";
 import { FileList } from "./FileList";
@@ -43,10 +43,11 @@ export const StatusGroup = ({
 	return (
 		<div className="grouped-status-group">
 			<div className="grouped-status-group-header" onClick={handleToggle}>
-				<StatusBadge
+				<StatusDisplay
 					status={
 						{ ...status, icon: status.icon || "" } as NoteStatus
 					}
+					variant="badge"
 				/>
 				<div className="grouped-status-group-info">
 					<CollapsibleCounter
diff --git a/components/SettingsUI.tsx/TemplateItem.tsx b/components/SettingsUI.tsx/TemplateItem.tsx
index ed7c16b..5603ffb 100644
--- a/components/SettingsUI.tsx/TemplateItem.tsx
+++ b/components/SettingsUI.tsx/TemplateItem.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { StatusTemplate } from "@/types/pluginSettings";
-import { TemplateStatusChip } from "./TemplateStatusChip";
+import { StatusDisplay } from "../atoms/StatusDisplay";
 
 interface TemplateItemProps {
 	template: StatusTemplate;
@@ -29,7 +29,7 @@ export const TemplateItem: React.FC<TemplateItemProps> = ({
 		<div className="setting-item-description">{template.description}:</div>
 		<div className="template-statuses">
 			{template.statuses.map((status, index) => (
-				<TemplateStatusChip key={index} status={status} />
+				<StatusDisplay key={index} status={status} variant="template" />
 			))}
 		</div>
 	</div>
diff --git a/components/SettingsUI.tsx/TemplateStatusChip.tsx b/components/SettingsUI.tsx/TemplateStatusChip.tsx
deleted file mode 100644
index f83d18b..0000000
--- a/components/SettingsUI.tsx/TemplateStatusChip.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { NoteStatus } from "@/types/noteStatus";
-import React from "react";
-
-interface StatusChipProps {
-	status: NoteStatus;
-}
-
-export const TemplateStatusChip: React.FC<StatusChipProps> = ({ status }) => (
-	<div className="template-status-chip">
-		<span
-			className="template-status-color-dot"
-			style={{ "--dot-color": status.color } as React.CSSProperties}
-		/>
-		<span>
-			{status.icon} {status.name}
-		</span>
-	</div>
-);
diff --git a/components/StatusBar/StatusBarGroup.tsx b/components/StatusBar/StatusBarGroup.tsx
index 0fc109d..c2e94e0 100644
--- a/components/StatusBar/StatusBarGroup.tsx
+++ b/components/StatusBar/StatusBarGroup.tsx
@@ -3,7 +3,7 @@ import { NoteStatus } from "@/types/noteStatus";
 import { StatusTemplate } from "@/types/pluginSettings";
 import { GroupLabel } from "../atoms/GroupLabel";
 import { CollapsibleCounter } from "../atoms/CollapsibleCounter";
-import { StatusBadge } from "../atoms/StatusBadge";
+import { StatusDisplay } from "../atoms/StatusDisplay";
 import { useStatusBarContext } from "./StatusBarContext";
 
 export interface StatusBarGroupProps {
@@ -39,8 +39,9 @@ export const StatusBarGroup: FC<StatusBarGroupProps> = ({
 						}}
 						title={status.description}
 					>
-						<StatusBadge
+						<StatusDisplay
 							status={status}
+							variant="badge"
 							onClick={() => {
 								onStatusClick(status);
 							}}
diff --git a/components/StatusDashboard/CurrentNoteSection.tsx b/components/StatusDashboard/CurrentNoteSection.tsx
index 9e7bf27..fe2a5c5 100644
--- a/components/StatusDashboard/CurrentNoteSection.tsx
+++ b/components/StatusDashboard/CurrentNoteSection.tsx
@@ -1,6 +1,6 @@
 import { TFile } from "obsidian";
 import { NoteStatus } from "@/types/noteStatus";
-import { StatusBadge } from "@/components/atoms/StatusBadge";
+import { StatusDisplay } from "@/components/atoms/StatusDisplay";
 import { GroupLabel } from "@/components/atoms/GroupLabel";
 
 interface CurrentNoteInfo {
@@ -50,9 +50,10 @@ export const CurrentNoteSection = ({
 										<div className="current-note-status-list">
 											{statuses.length > 0 ? (
 												statuses.map((status) => (
-													<StatusBadge
+													<StatusDisplay
 														key={status.name}
 														status={status}
+														variant="badge"
 													/>
 												))
 											) : (
diff --git a/components/StatusDashboard/StatusDistributionChart.tsx b/components/StatusDashboard/StatusDistributionChart.tsx
index cacb71d..694538d 100644
--- a/components/StatusDashboard/StatusDistributionChart.tsx
+++ b/components/StatusDashboard/StatusDistributionChart.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { BaseNoteStatusService } from "@/core/noteStatusService";
-import { StatusBadge } from "@/components/atoms/StatusBadge";
+import { StatusDisplay } from "@/components/atoms/StatusDisplay";
 import { VaultStats } from "./useVaultStats";
 
 interface StatusDistributionChartProps {
@@ -50,7 +50,10 @@ export const StatusDistributionChart = ({
 								<div key={name} className="status-chart-item">
 									<div className="status-chart-info">
 										{status && (
-											<StatusBadge status={status} />
+											<StatusDisplay
+												status={status}
+												variant="badge"
+											/>
 										)}
 										<span className="status-chart-count">
 											{count} notes ({percentage}%)
diff --git a/components/StatusFileInfoPopup/StatusFileInfoPopup.tsx b/components/StatusFileInfoPopup/StatusFileInfoPopup.tsx
index 4d80e08..6cd42c7 100644
--- a/components/StatusFileInfoPopup/StatusFileInfoPopup.tsx
+++ b/components/StatusFileInfoPopup/StatusFileInfoPopup.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { GroupedStatuses } from "@/types/noteStatus";
-import { StatusBadge } from "../atoms/StatusBadge";
+import { StatusDisplay } from "../atoms/StatusDisplay";
 
 export interface Props {
 	statuses: GroupedStatuses;
@@ -44,7 +44,10 @@ export const StatusFileInfoPopup: React.FC<Props> = ({ statuses }) => {
 									key={`${groupName}-${index}`}
 									className="status-item"
 								>
-									<StatusBadge status={status} />
+									<StatusDisplay
+										status={status}
+										variant="badge"
+									/>
 									{status.description && (
 										<div
 											className="status-description"
diff --git a/components/atoms/StatusBadge.tsx b/components/atoms/StatusBadge.tsx
deleted file mode 100644
index 4f3dab1..0000000
--- a/components/atoms/StatusBadge.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { FC } from "react";
-import { NoteStatus } from "@/types/noteStatus";
-
-export interface StatusBadgeProps {
-	status: NoteStatus;
-	onClick?: () => void;
-}
-
-export const StatusBadge: FC<StatusBadgeProps> = ({ status, onClick }) => {
-	return (
-		<div
-			className="status-badge-container"
-			style={{
-				backgroundColor: `${status.color}15`,
-				border: `1px solid ${status.color}30`,
-			}}
-			onClick={onClick}
-		>
-			<div className="status-badge-item">
-				<span className="status-badge-icon">{status.icon}</span>
-				<span className="status-badge-text">{status.name}</span>
-			</div>
-		</div>
-	);
-};
diff --git a/components/atoms/StatusChip.tsx b/components/atoms/StatusChip.tsx
deleted file mode 100644
index 7d76cd6..0000000
--- a/components/atoms/StatusChip.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { NoteStatus } from "@/types/noteStatus";
-import { FC, memo, useState } from "react";
-
-interface Props {
-	status: NoteStatus;
-	onRemove: () => void;
-}
-
-export const StatusChip: FC<Props> = memo(({ status, onRemove }) => {
-	const [isRemoving, setIsRemoving] = useState(false);
-
-	const handleRemove = (e: React.MouseEvent) => {
-		e.stopPropagation();
-		setIsRemoving(true);
-		setTimeout(() => {
-			onRemove();
-		}, 150);
-	};
-
-	return (
-		<div
-			className="note-status-chip"
-			title={
-				status.description
-					? `${status.name} - ${status.description}`
-					: status.name
-			}
-			style={{
-				display: "inline-flex",
-				alignItems: "center",
-				gap: "6px",
-				padding: "4px 8px",
-				background: "var(--interactive-accent)",
-				color: "var(--text-on-accent)",
-				borderRadius: "var(--radius-s)",
-				fontSize: "var(--font-ui-smaller)",
-				cursor: "pointer",
-				transition: "all 150ms ease",
-				opacity: isRemoving ? "0.5" : "1",
-			}}
-		>
-			<span className="note-status-chip-icon">{status.icon}</span>
-			<span className="note-status-chip-text">{status.name}</span>
-			<div
-				className="note-status-chip-remove"
-				onClick={handleRemove}
-				style={{
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "center",
-					width: "16px",
-					height: "16px",
-					borderRadius: "50%",
-					background: "rgba(255, 255, 255, 0.2)",
-					cursor: "pointer",
-				}}
-			>
-				<svg
-					width="12"
-					height="12"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					strokeWidth="2"
-					strokeLinecap="round"
-					strokeLinejoin="round"
-				>
-					<line x1="18" y1="6" x2="6" y2="18" />
-					<line x1="6" y1="6" x2="18" y2="18" />
-				</svg>
-			</div>
-		</div>
-	);
-});
diff --git a/components/atoms/StatusDisplay.tsx b/components/atoms/StatusDisplay.tsx
new file mode 100644
index 0000000..9fd987f
--- /dev/null
+++ b/components/atoms/StatusDisplay.tsx
@@ -0,0 +1,132 @@
+import { NoteStatus } from "@/types/noteStatus";
+import { FC, memo, useState } from "react";
+
+export type StatusDisplayVariant = "chip" | "badge" | "template";
+
+interface StatusDisplayProps {
+	status: NoteStatus;
+	variant: StatusDisplayVariant;
+	removable?: boolean;
+	onRemove?: () => void;
+	onClick?: () => void;
+}
+
+export const StatusDisplay: FC<StatusDisplayProps> = memo(
+	({ status, variant, removable = false, onRemove, onClick }) => {
+		const [isRemoving, setIsRemoving] = useState(false);
+
+		const handleRemove = (e: React.MouseEvent) => {
+			e.stopPropagation();
+			if (onRemove) {
+				setIsRemoving(true);
+				setTimeout(() => {
+					onRemove();
+				}, 150);
+			}
+		};
+
+		const handleClick = () => {
+			if (onClick) {
+				onClick();
+			}
+		};
+
+		if (variant === "chip") {
+			return (
+				<div
+					className="note-status-chip"
+					title={
+						status.description
+							? `${status.name} - ${status.description}`
+							: status.name
+					}
+					style={{
+						display: "inline-flex",
+						alignItems: "center",
+						gap: "6px",
+						padding: "4px 8px",
+						background: "var(--interactive-accent)",
+						color: "var(--text-on-accent)",
+						borderRadius: "var(--radius-s)",
+						fontSize: "var(--font-ui-smaller)",
+						cursor: onClick ? "pointer" : "default",
+						transition: "all 150ms ease",
+						opacity: isRemoving ? "0.5" : "1",
+					}}
+					onClick={handleClick}
+				>
+					<span className="note-status-chip-icon">{status.icon}</span>
+					<span className="note-status-chip-text">{status.name}</span>
+					{removable && (
+						<div
+							className="note-status-chip-remove"
+							onClick={handleRemove}
+							style={{
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center",
+								width: "16px",
+								height: "16px",
+								borderRadius: "50%",
+								background: "rgba(255, 255, 255, 0.2)",
+								cursor: "pointer",
+							}}
+						>
+							<svg
+								width="12"
+								height="12"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="2"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+							>
+								<line x1="18" y1="6" x2="6" y2="18" />
+								<line x1="6" y1="6" x2="18" y2="18" />
+							</svg>
+						</div>
+					)}
+				</div>
+			);
+		}
+
+		if (variant === "badge") {
+			return (
+				<div
+					className="status-badge-container"
+					style={{
+						backgroundColor: `${status.color}15`,
+						border: `1px solid ${status.color}30`,
+					}}
+					onClick={handleClick}
+				>
+					<div className="status-badge-item">
+						<span className="status-badge-icon">{status.icon}</span>
+						<span className="status-badge-text">{status.name}</span>
+					</div>
+				</div>
+			);
+		}
+
+		if (variant === "template") {
+			return (
+				<div className="template-status-chip" onClick={handleClick}>
+					<span
+						className="template-status-color-dot"
+						style={
+							{
+								"--dot-color": status.color,
+							} as React.CSSProperties
+						}
+					/>
+					<span>
+						{status.icon} {status.name}
+					</span>
+				</div>
+			);
+		}
+
+		return null;
+	},
+);