Merge pull request #55 from devonthesofa/feature/status-bar-template-name

[Feature] status bar template name

components/SettingsUI/UISettings.tsx

@@ -144,6 +144,31 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 					onChange={handleChange("statusBarShowNoStatusText")}
 				/>
 			</SettingItem>
+			<SettingItem
+				name="Show template names in status bar"
+				description="Control how template names are displayed alongside status names"
+			>
+				<Select
+					options={[
+						{
+							value: "never",
+							display: "Never show template names",
+						},
+						{
+							value: "auto",
+							display: "Show only when status names conflict",
+						},
+						{
+							value: "always",
+							display: "Always show template names",
+						},
+					]}
+					defaultValue={settings.statusBarShowTemplateName || "auto"}
+					onChange={(value) =>
+						onChange("statusBarShowTemplateName", value)
+					}
+				/>
+			</SettingItem>
 		</div>
 	);
 };

components/StatusBar/StatusBar.tsx

@@ -11,6 +11,7 @@ export type Props = {
 	templates?: { [key: string]: { description: string } };
 	hideIfNotStatuses?: boolean;
 	onStatusClick: StatusBarContextProps["onStatusClick"];
+	templateNameMode?: "always" | "never" | "auto";
 	noStatusConfig?: {
 		text: string;
 		showIcon: boolean;
@@ -24,6 +25,7 @@ export const StatusBar: FC<Props> = ({
 	statuses,
 	hideIfNotStatuses,
 	onStatusClick,
+	templateNameMode = "auto",
 	noStatusConfig,
 }) => {
 	const statusEntries = Object.entries(statuses);
@@ -69,6 +71,7 @@ export const StatusBar: FC<Props> = ({
 					<StatusBarGroup
 						key={frontmatterTagName}
 						statuses={statusList}
+						templateNameMode={templateNameMode}
 						template={{
 							description: "Note status",
 							name: "",

components/StatusBar/StatusBarGroup.tsx

@@ -10,18 +10,25 @@ export interface StatusBarGroupProps {
 	statuses: NoteStatus[];
 	template: StatusTemplate;
 	maxVisible?: number;
+	templateNameMode?: "always" | "never" | "auto";
 }
 
 export const StatusBarGroup: FC<StatusBarGroupProps> = ({
 	statuses,
 	template,
 	maxVisible = 3,
+	templateNameMode = "auto",
 }) => {
 	const [isUncollapsed, setIsUncollapsed] = useState(false);
 	const visibleStatuses = isUncollapsed
 		? statuses
 		: statuses.slice(0, maxVisible);
 	const hiddenCount = Math.max(0, statuses.length - maxVisible);
+
+	const statusNames = statuses.map((s) => s.name);
+	const getHasConflicts = (status: NoteStatus) => {
+		return statusNames.filter((name) => name === status.name).length > 1;
+	};
 	const { onStatusClick } = useStatusBarContext();
 
 	return (
@@ -42,6 +49,8 @@ export const StatusBarGroup: FC<StatusBarGroupProps> = ({
 						<StatusDisplay
 							status={status}
 							variant="badge"
+							templateNameMode={templateNameMode}
+							hasNameConflicts={getHasConflicts(status)}
 							onClick={() => {
 								onStatusClick(status);
 							}}

components/atoms/StatusDisplay.tsx

@@ -9,16 +9,39 @@ interface StatusDisplayProps {
 	status: NoteStatus;
 	variant: StatusDisplayVariant;
 	removable?: boolean;
+	hasNameConflicts?: boolean;
+	templateNameMode?: "always" | "never" | "auto";
 	onRemove?: () => void;
 	onClick?: () => void;
 }
 
 export const StatusDisplay: FC<StatusDisplayProps> = memo(
-	({ status, variant, removable = false, onRemove, onClick }) => {
+	({
+		status,
+		variant,
+		removable = false,
+		hasNameConflicts = false,
+		templateNameMode = "auto",
+		onRemove,
+		onClick,
+	}) => {
 		const [isRemoving, setIsRemoving] = useState(false);
 
 		const getDisplayName = () => {
-			return status.templateId
+			const shouldShowTemplate = (() => {
+				switch (templateNameMode) {
+					case "always":
+						return true;
+					case "never":
+						return false;
+					case "auto":
+						return hasNameConflicts && status.templateId;
+					default:
+						return false;
+				}
+			})();
+
+			return shouldShowTemplate && status.templateId
 				? `${status.name} (${status.templateId})`
 				: status.name;
 		};

constants/defaultSettings.ts

@@ -22,6 +22,7 @@ export const DEFAULT_PLUGIN_SETTINGS: PluginSettings = {
 	enabledTemplates: DEFAULT_ENABLED_TEMPLATES,
 	useCustomStatusesOnly: false,
 	useMultipleStatuses: true,
+	statusBarShowTemplateName: "auto", // Default to show template names only when needed
 	tagPrefix: "obsidian-note-status",
 	strictStatuses: false, // Default to show all statuses from frontmatter
 	quickStatusCommands: ["active", "completed"], // Add default quick commands

integrations/status-bar/status-bar.tsx

@@ -43,6 +43,9 @@ export class StatusBarIntegration {
 				if (key === "showStatusBar") {
 					this.render(); // INFO: Force a render to set disabled or enabled
 				}
+				if (key === "statusBarShowTemplateName") {
+					this.render(); // INFO: Force a render to set disabled or enabled
+				}
 				if (key === "enabledTemplates" || key === "templates") {
 					this.handleActiveFileChange().catch(console.error); // INFO: Force a re-read of the statuses and render
 				}
@@ -148,6 +151,9 @@ export class StatusBarIntegration {
 					hideIfNotStatuses={
 						settingsService.settings.autoHideStatusBar
 					}
+					templateNameMode={
+						settingsService.settings.statusBarShowTemplateName
+					}
 					onStatusClick={() => this.openStatusModal()}
 					noStatusConfig={this.getNoStatusConfig()}
 				/>,

types/pluginSettings.ts

@@ -17,6 +17,7 @@ export type PluginSettings = {
 	autoHideStatusBar: boolean;
 	templates: StatusTemplate[];
 	customStatuses: NoteStatus[];
+	statusBarShowTemplateName: "always" | "never" | "auto"; // How to show template names in status bar
 	showStatusIconsInExplorer: boolean;
 	hideUnknownStatusInExplorer: boolean;
 	enabledTemplates: string[]; // IDs of enabled templates