From 1b26ba6d8039008716580dc5fb6f9e1a049ccc22 Mon Sep 17 00:00:00 2001
From: Aleix Soler <aleixsoler64@gmail.com>
Date: Fri, 21 Nov 2025 08:04:30 +0100
Subject: [PATCH 1/8] feat: add lucid icons support

---
 components/FileExplorer/FileExplorerIcon.tsx  |   1 +
 .../GroupedStatusView/GroupedStatusView.tsx   |   2 +
 .../components/StatusGroup.tsx                |   6 +-
 components/SettingsUI/CustomStatusItem.tsx    |  50 +++++--
 .../SettingsUI/CustomStatusSettings.tsx       |   3 +-
 components/SettingsUI/LucideIconPicker.tsx    | 133 ++++++++++++++++++
 components/SettingsUI/StatusGroup.tsx         |  10 +-
 components/SettingsUI/TemplateEditorModal.tsx |   6 +-
 components/SettingsUI/UISettings.tsx          |   2 +-
 components/StatusBar/StatusBar.tsx            |  10 +-
 components/Toolbar/EditorToolbarButton.tsx    |  27 ++--
 components/atoms/StatusDisplay.tsx            |  27 +++-
 components/atoms/StatusIcon.tsx               |  52 +++++++
 components/atoms/StatusIconPreview.tsx        |  13 +-
 components/atoms/StatusSelector.tsx           |   3 +-
 integrations/views/grouped-dashboard-view.tsx |   2 +
 integrations/views/grouped-status-view.tsx    |   1 +
 styles/components/file-explorer.css           |   3 +
 styles/components/settings.css                | 114 ++++++++++++++-
 styles/components/status-icon.css             |   6 +
 styles/components/toolbar-button.css          |   3 +
 styles/index.css                              |   1 +
 types/noteStatus.ts                           |   1 +
 utils/iconUtils.ts                            |  51 +++++++
 24 files changed, 477 insertions(+), 50 deletions(-)
 create mode 100644 components/SettingsUI/LucideIconPicker.tsx
 create mode 100644 components/atoms/StatusIcon.tsx
 create mode 100644 styles/components/status-icon.css
 create mode 100644 utils/iconUtils.ts

diff --git a/components/FileExplorer/FileExplorerIcon.tsx b/components/FileExplorer/FileExplorerIcon.tsx
index 92d6cf8..01642df 100644
--- a/components/FileExplorer/FileExplorerIcon.tsx
+++ b/components/FileExplorer/FileExplorerIcon.tsx
@@ -65,6 +65,7 @@ export const FileExplorerIcon: FC<Props> = memo(
 		return (
 			<StatusIconPreview
 				icon={primaryStatus.icon}
+				lucideIcon={primaryStatus.lucideIcon}
 				color={iconColor}
 				count={totalStatuses}
 				iconFrameMode={iconFrameMode}
diff --git a/components/GroupedStatusView/GroupedStatusView.tsx b/components/GroupedStatusView/GroupedStatusView.tsx
index 891528c..0e19a44 100644
--- a/components/GroupedStatusView/GroupedStatusView.tsx
+++ b/components/GroupedStatusView/GroupedStatusView.tsx
@@ -18,6 +18,7 @@ export type StatusItem = {
 	name: string;
 	color: string;
 	icon?: string;
+	lucideIcon?: string;
 };
 
 export type FilesByStatus = {
@@ -69,6 +70,7 @@ const GroupedStatusViewContent = () => {
 				name: noteStatus.name,
 				color: noteStatus.color || "white",
 				icon: noteStatus.icon,
+				lucideIcon: noteStatus.lucideIcon,
 			};
 
 			const scopedIdentifier = noteStatus.templateId
diff --git a/components/GroupedStatusView/components/StatusGroup.tsx b/components/GroupedStatusView/components/StatusGroup.tsx
index 8a34f9c..e7cc35c 100644
--- a/components/GroupedStatusView/components/StatusGroup.tsx
+++ b/components/GroupedStatusView/components/StatusGroup.tsx
@@ -54,7 +54,11 @@ export const StatusGroup = ({
 				<div className="grouped-status-group__status">
 					<StatusDisplay
 						status={
-							{ ...status, icon: status.icon || "" } as NoteStatus
+							{
+								...status,
+								icon: status.icon || "",
+								lucideIcon: status.lucideIcon,
+							} as NoteStatus
 						}
 						variant="badge"
 					/>
diff --git a/components/SettingsUI/CustomStatusItem.tsx b/components/SettingsUI/CustomStatusItem.tsx
index 8df4afd..511ac51 100644
--- a/components/SettingsUI/CustomStatusItem.tsx
+++ b/components/SettingsUI/CustomStatusItem.tsx
@@ -1,13 +1,15 @@
 import { NoteStatus } from "@/types/noteStatus";
 import React from "react";
 import { Input } from "@/components/atoms/Input";
+import { StatusIcon } from "@/components/atoms/StatusIcon";
+import { LucideIconPicker } from "./LucideIconPicker";
 
 export type Props = {
 	status: NoteStatus;
 	index: number;
 	onCustomStatusChange: (
 		index: number,
-		column: "name" | "icon" | "color" | "description",
+		column: "name" | "icon" | "color" | "description" | "lucideIcon",
 		value: string,
 	) => void;
 	onCustomStatusRemove: (index: number) => void;
@@ -28,26 +30,47 @@ export const CustomStatusItem: React.FC<Props> = ({
 	canMoveDown = false,
 }) => {
 	const isValid = status.name.trim().length > 0;
-	const displayIcon = status.icon.trim() || "📝";
-
 	return (
 		<div className="custom-status-item">
-			{/* Simple horizontal layout with all inputs in a row */}
-			<div className="custom-status-item__row">
-				{/* Icon field - simple text input */}
-				<div className="custom-status-item__field">
-					<label className="custom-status-item__label">Icon</label>
+			<div className="custom-status-item__row custom-status-item__row--icons">
+				<div className="custom-status-item__field custom-status-item__field--icon">
+					<label className="custom-status-item__label">
+						Emoji icon
+					</label>
 					<Input
 						variant="text"
 						value={status.icon}
 						onChange={(value) =>
 							onCustomStatusChange(index, "icon", value || "")
 						}
-						placeholder="📝"
+						placeholder="Example: ✅ or 🚧"
 						className="custom-status-item__input custom-status-item__input--icon"
 					/>
+					<p className="custom-status-item__hint">
+						This fallback icon is shown anywhere Lucide is not
+						available.
+					</p>
 				</div>
 
+				<div className="custom-status-item__field custom-status-item__field--lucide">
+					<label className="custom-status-item__label">
+						Lucide icon (optional)
+					</label>
+					<LucideIconPicker
+						value={status.lucideIcon || ""}
+						onChange={(value) =>
+							onCustomStatusChange(index, "lucideIcon", value)
+						}
+					/>
+					<p className="custom-status-item__hint">
+						Matches Obsidian&apos;s toolbar icons so your status
+						button blends in.
+					</p>
+				</div>
+			</div>
+
+			{/* Simple horizontal layout with remaining inputs */}
+			<div className="custom-status-item__row">
 				{/* Name field */}
 				<div className="custom-status-item__field custom-status-item__field--name">
 					<label className="custom-status-item__label">
@@ -139,12 +162,13 @@ export const CustomStatusItem: React.FC<Props> = ({
 
 			{/* Preview row - shows how the status will look */}
 			<div className="custom-status-item__preview">
-				<span
+				<StatusIcon
+					icon={status.icon}
+					lucideIcon={status.lucideIcon}
 					className="custom-status-item__preview-icon"
+					size={18}
 					style={{ color: status.color }}
-				>
-					{displayIcon}
-				</span>
+				/>
 				<span
 					className="custom-status-item__preview-text"
 					style={{ color: status.color }}
diff --git a/components/SettingsUI/CustomStatusSettings.tsx b/components/SettingsUI/CustomStatusSettings.tsx
index febb8ca..3c38696 100644
--- a/components/SettingsUI/CustomStatusSettings.tsx
+++ b/components/SettingsUI/CustomStatusSettings.tsx
@@ -20,6 +20,7 @@ export const CustomStatusSettings: React.FC<Props> = ({
 		currentStatuses.push({
 			name: "",
 			icon: "",
+			lucideIcon: "",
 		});
 		onChange("customStatuses", currentStatuses);
 	};
@@ -84,7 +85,7 @@ export const CustomStatusSettings: React.FC<Props> = ({
 
 			<SettingItem
 				name="Custom statuses"
-				description="Create custom statuses with icons, names, and colors. All statuses require a name."
+				description="Create custom statuses with emoji icons and optional Lucide icon names plus colors. All statuses require a name."
 				vertical
 			>
 				<div className="custom-status-list">
diff --git a/components/SettingsUI/LucideIconPicker.tsx b/components/SettingsUI/LucideIconPicker.tsx
new file mode 100644
index 0000000..bab0749
--- /dev/null
+++ b/components/SettingsUI/LucideIconPicker.tsx
@@ -0,0 +1,133 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { IconName, getIconIds } from "obsidian";
+import { Input } from "@/components/atoms/Input";
+import { StatusIcon } from "@/components/atoms/StatusIcon";
+
+export interface LucideIconPickerProps {
+	value?: string;
+	onChange: (value: string) => void;
+	maxResults?: number;
+}
+
+const DEFAULT_MAX_RESULTS = 36;
+
+export const LucideIconPicker: React.FC<LucideIconPickerProps> = ({
+	value = "",
+	onChange,
+	maxResults = DEFAULT_MAX_RESULTS,
+}) => {
+	const [query, setQuery] = useState(value);
+
+	useEffect(() => {
+		setQuery(value || "");
+	}, [value]);
+
+	const iconIds = useMemo(() => {
+		try {
+			return getIconIds()
+				.slice()
+				.sort((a, b) => a.localeCompare(b));
+		} catch (error) {
+			console.error("Failed to load Lucide icon list", error);
+			return [] as IconName[];
+		}
+	}, []);
+
+	const filteredIcons = useMemo(() => {
+		if (!iconIds.length) {
+			return [];
+		}
+
+		const normalizedQuery = query.trim().toLowerCase();
+		const source = normalizedQuery.length
+			? iconIds.filter((name) =>
+					name.toLowerCase().includes(normalizedQuery),
+				)
+			: iconIds;
+
+		return source.slice(0, maxResults);
+	}, [iconIds, query, maxResults]);
+
+	const handleSelect = (iconName: IconName) => {
+		onChange(iconName);
+		setQuery(iconName);
+	};
+
+	const handleClear = () => {
+		onChange("");
+		setQuery("");
+	};
+
+	return (
+		<div className="lucide-icon-picker">
+			<div className="lucide-icon-picker__control">
+				<Input
+					variant="text"
+					value={query}
+					onChange={setQuery}
+					placeholder="Search by name (e.g. check-circle)"
+					className="lucide-icon-picker__input"
+				/>
+				{value && (
+					<button
+						type="button"
+						className="lucide-icon-picker__clear"
+						onClick={handleClear}
+					>
+						Clear
+					</button>
+				)}
+			</div>
+
+			<div className="lucide-icon-picker__selected">
+				<span className="lucide-icon-picker__selected-preview">
+					<StatusIcon
+						icon={value}
+						lucideIcon={value}
+						size={18}
+						className="lucide-icon-picker__selected-icon"
+					/>
+				</span>
+				<span className="lucide-icon-picker__selected-label">
+					{value || "No Lucide icon selected"}
+				</span>
+			</div>
+
+			{!iconIds.length && (
+				<div className="lucide-icon-picker__empty">
+					Lucide icons are not available yet. Try reloading the
+					plugin.
+				</div>
+			)}
+
+			{iconIds.length > 0 && (
+				<div className="lucide-icon-picker__grid">
+					{filteredIcons.map((iconName) => {
+						const isSelected = iconName === value;
+						return (
+							<button
+								type="button"
+								key={iconName}
+								className={`lucide-icon-picker__option ${isSelected ? "lucide-icon-picker__option--selected" : ""}`}
+								onClick={() => handleSelect(iconName)}
+								title={iconName}
+							>
+								<StatusIcon
+									icon={iconName}
+									lucideIcon={iconName}
+									size={16}
+								/>
+								<span>{iconName}</span>
+							</button>
+						);
+					})}
+					{filteredIcons.length === 0 && (
+						<div className="lucide-icon-picker__empty">
+							No icons match "{query.trim()}"
+						</div>
+					)}
+				</div>
+			)}
+		</div>
+	);
+};
diff --git a/components/SettingsUI/StatusGroup.tsx b/components/SettingsUI/StatusGroup.tsx
index 4d18334..8c72ebb 100644
--- a/components/SettingsUI/StatusGroup.tsx
+++ b/components/SettingsUI/StatusGroup.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { PluginSettings } from "@/types/pluginSettings";
+import { StatusIcon } from "@/components/atoms/StatusIcon";
 
 export type StatusGroupProps = {
 	statuses: PluginSettings["customStatuses"];
@@ -39,9 +40,12 @@ export const StatusGroup: React.FC<StatusGroupProps> = ({
 					>
 						<div className="status-selector__content">
 							<div className="status-selector__status">
-								<span className="status-selector__icon">
-									{status.icon}
-								</span>
+								<StatusIcon
+									icon={status.icon}
+									lucideIcon={status.lucideIcon}
+									className="status-selector__icon"
+									size={16}
+								/>
 								<span className="status-selector__name">
 									{status.name}
 								</span>
diff --git a/components/SettingsUI/TemplateEditorModal.tsx b/components/SettingsUI/TemplateEditorModal.tsx
index 8459688..ab05d0c 100644
--- a/components/SettingsUI/TemplateEditorModal.tsx
+++ b/components/SettingsUI/TemplateEditorModal.tsx
@@ -23,6 +23,7 @@ export const TemplateEditorModal: React.FC<TemplateEditorModalProps> = ({
 			{
 				name: "",
 				icon: "",
+				lucideIcon: "",
 				color: "#888888",
 				templateId: template?.id || "",
 			},
@@ -63,6 +64,7 @@ export const TemplateEditorModal: React.FC<TemplateEditorModalProps> = ({
 			{
 				name: "",
 				icon: "",
+				lucideIcon: "",
 				color: "#888888",
 				templateId: template?.id || "",
 			},
@@ -72,7 +74,7 @@ export const TemplateEditorModal: React.FC<TemplateEditorModalProps> = ({
 	const handleStatusChange = useCallback(
 		(
 			index: number,
-			column: "name" | "icon" | "color" | "description",
+			column: "name" | "icon" | "color" | "description" | "lucideIcon",
 			value: string,
 		) => {
 			setStatuses((prev) =>
@@ -145,7 +147,7 @@ export const TemplateEditorModal: React.FC<TemplateEditorModalProps> = ({
 
 				<SettingItem
 					name="Statuses"
-					description="Define the statuses included in this template"
+					description="Define the statuses included in this template, including emojis and optional Lucide icons"
 					vertical
 				>
 					<div className="template-editor-statuses">
diff --git a/components/SettingsUI/UISettings.tsx b/components/SettingsUI/UISettings.tsx
index 532da1e..65f8c17 100644
--- a/components/SettingsUI/UISettings.tsx
+++ b/components/SettingsUI/UISettings.tsx
@@ -268,7 +268,7 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 
 			<SettingItem
 				name="Icon for unknown status"
-				description="Icon displayed whenever a note does not have a status."
+				description="Emoji or Lucide icon name displayed whenever a note does not have a status."
 			>
 				<Input
 					variant="text"
diff --git a/components/StatusBar/StatusBar.tsx b/components/StatusBar/StatusBar.tsx
index a9ef051..d59e421 100644
--- a/components/StatusBar/StatusBar.tsx
+++ b/components/StatusBar/StatusBar.tsx
@@ -5,6 +5,7 @@ import {
 	Props as StatusBarContextProps,
 } from "./StatusBarContext";
 import { StatusBarGroup } from "./StatusBarGroup";
+import { StatusIcon } from "@/components/atoms/StatusIcon";
 
 export type Props = {
 	statuses: GroupedStatuses;
@@ -51,13 +52,14 @@ export const StatusBar: FC<Props> = ({
 				}}
 			>
 				{noStatusConfig.showIcon && (
-					<span
+					<StatusIcon
+						icon={noStatusConfig.icon}
+						size={14}
+						className="status-bar-no-status-icon"
 						style={{
 							marginRight: noStatusConfig.showText ? "4px" : "0",
 						}}
-					>
-						{noStatusConfig.icon}
-					</span>
+					/>
 				)}
 				{noStatusConfig.showText && noStatusConfig.text}
 			</span>
diff --git a/components/Toolbar/EditorToolbarButton.tsx b/components/Toolbar/EditorToolbarButton.tsx
index eaaca2c..d5d3a17 100644
--- a/components/Toolbar/EditorToolbarButton.tsx
+++ b/components/Toolbar/EditorToolbarButton.tsx
@@ -1,6 +1,7 @@
 import React, { FC, memo } from "react";
 import { GroupedStatuses } from "@/types/noteStatus";
 import { StatusesInfoPopup } from "@/integrations/popups/statusesInfoPopupIntegration";
+import { StatusIcon } from "@/components/atoms/StatusIcon";
 
 interface EditorToolbarButtonProps {
 	statuses: GroupedStatuses;
@@ -40,12 +41,12 @@ export const EditorToolbarButton: FC<EditorToolbarButtonProps> = memo(
 					onMouseLeave={handleMouseLeave}
 					aria-label="Add status to note"
 				>
-					<span
+					<StatusIcon
+						icon={unknownStatusConfig.icon}
+						size={16}
 						className="editor-toolbar-button__icon"
 						style={{ color: unknownStatusConfig.color }}
-					>
-						{unknownStatusConfig.icon}
-					</span>
+					/>
 				</button>
 			);
 		}
@@ -63,16 +64,17 @@ export const EditorToolbarButton: FC<EditorToolbarButtonProps> = memo(
 					onMouseLeave={handleMouseLeave}
 					aria-label={`Current status: ${primaryStatus.name}. Click to change.`}
 				>
-					<span
+					<StatusIcon
+						icon={primaryStatus.icon}
+						lucideIcon={primaryStatus.lucideIcon}
+						size={16}
 						className="editor-toolbar-button__icon editor-toolbar-button__icon--has-status"
 						style={{
 							color:
 								primaryStatus.color ||
 								"var(--interactive-accent)",
 						}}
-					>
-						{primaryStatus.icon || "📝"}
-					</span>
+					/>
 				</button>
 			);
 		}
@@ -88,16 +90,17 @@ export const EditorToolbarButton: FC<EditorToolbarButtonProps> = memo(
 				aria-label={`${totalStatuses} statuses assigned. Click to change.`}
 			>
 				<div className="editor-toolbar-button__icon-container">
-					<span
+					<StatusIcon
+						icon={primaryStatus.icon}
+						lucideIcon={primaryStatus.lucideIcon}
+						size={16}
 						className="editor-toolbar-button__icon editor-toolbar-button__icon--has-status"
 						style={{
 							color:
 								primaryStatus.color ||
 								"var(--interactive-accent)",
 						}}
-					>
-						{primaryStatus.icon || "📝"}
-					</span>
+					/>
 					<span className="editor-toolbar-button__counter">
 						{totalStatuses}
 					</span>
diff --git a/components/atoms/StatusDisplay.tsx b/components/atoms/StatusDisplay.tsx
index 9fb71c1..1c7afe7 100644
--- a/components/atoms/StatusDisplay.tsx
+++ b/components/atoms/StatusDisplay.tsx
@@ -2,6 +2,7 @@ import { NoteStatus } from "@/types/noteStatus";
 import { FC, memo, useState } from "react";
 import { getStatusTooltip } from "@/utils/statusUtils";
 import { ObsidianIcon } from "./ObsidianIcon";
+import { StatusIcon } from "./StatusIcon";
 
 export type StatusDisplayVariant = "chip" | "badge" | "template";
 
@@ -82,9 +83,12 @@ export const StatusDisplay: FC<StatusDisplayProps> = memo(
 					}}
 					onClick={handleClick}
 				>
-					<span className="note-status-chip-icon">
-						{status.icon ? status.icon : "📝"}
-					</span>
+					<StatusIcon
+						icon={status.icon}
+						lucideIcon={status.lucideIcon}
+						className="note-status-chip-icon"
+						size={16}
+					/>
 					<span className="note-status-chip-text">
 						{getDisplayName()}
 					</span>
@@ -121,9 +125,12 @@ export const StatusDisplay: FC<StatusDisplayProps> = memo(
 					onClick={handleClick}
 				>
 					<div className="status-badge-item">
-						<span className="status-badge-icon">
-							{status.icon ? status.icon : "📝"}
-						</span>
+						<StatusIcon
+							icon={status.icon}
+							lucideIcon={status.lucideIcon}
+							className="status-badge-icon"
+							size={14}
+						/>
 						<span className="status-badge-text">
 							{getDisplayName()}
 						</span>
@@ -144,7 +151,13 @@ export const StatusDisplay: FC<StatusDisplayProps> = memo(
 						}
 					/>
 					<span>
-						{status.icon ? status.icon : "📝"} {getDisplayName()}
+						<StatusIcon
+							icon={status.icon}
+							lucideIcon={status.lucideIcon}
+							size={14}
+							style={{ marginRight: "4px" }}
+						/>
+						{getDisplayName()}
 					</span>
 				</div>
 			);
diff --git a/components/atoms/StatusIcon.tsx b/components/atoms/StatusIcon.tsx
new file mode 100644
index 0000000..86980f2
--- /dev/null
+++ b/components/atoms/StatusIcon.tsx
@@ -0,0 +1,52 @@
+import React, { CSSProperties, FC } from "react";
+import { ObsidianIcon } from "./ObsidianIcon";
+import { resolveLucideIconName } from "@/utils/iconUtils";
+
+interface StatusIconProps {
+	icon?: string;
+	lucideIcon?: string;
+	fallbackIcon?: string;
+	className?: string;
+	size?: number;
+	style?: CSSProperties;
+}
+
+export const StatusIcon: FC<StatusIconProps> = ({
+	icon,
+	lucideIcon,
+	fallbackIcon = "📝",
+	className = "",
+	size,
+	style = {},
+}) => {
+	const lucideName = resolveLucideIconName(lucideIcon, icon);
+	const resolvedSize = size ?? 16;
+	const combinedClassName = ["status-icon", className]
+		.filter(Boolean)
+		.join(" ");
+
+	const wrapperStyle: CSSProperties = {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		lineHeight: 1,
+		...style,
+	};
+
+	if (size) {
+		wrapperStyle.fontSize = `${size}px`;
+	}
+
+	const fallbackValue =
+		icon && icon.trim().length ? icon : (fallbackIcon ?? "");
+
+	return (
+		<span className={combinedClassName} style={wrapperStyle}>
+			{lucideName ? (
+				<ObsidianIcon name={lucideName} size={resolvedSize} />
+			) : (
+				fallbackValue
+			)}
+		</span>
+	);
+};
diff --git a/components/atoms/StatusIconPreview.tsx b/components/atoms/StatusIconPreview.tsx
index 86d7bcc..f4d1523 100644
--- a/components/atoms/StatusIconPreview.tsx
+++ b/components/atoms/StatusIconPreview.tsx
@@ -1,10 +1,12 @@
 import React, { CSSProperties, FC, memo } from "react";
+import { StatusIcon } from "./StatusIcon";
 
 type IconFrameMode = "always" | "never";
 type IconColorMode = "status" | "theme";
 
 export interface StatusIconPreviewProps {
 	icon?: string;
+	lucideIcon?: string;
 	color?: string;
 	count?: number;
 	iconFrameMode?: IconFrameMode;
@@ -14,6 +16,7 @@ export interface StatusIconPreviewProps {
 	iconClassName?: string;
 	wrapperClassName?: string;
 	style?: CSSProperties;
+	iconSize?: number;
 	onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>) => void;
 	onMouseLeave?: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
@@ -21,6 +24,7 @@ export interface StatusIconPreviewProps {
 export const StatusIconPreview: FC<StatusIconPreviewProps> = memo(
 	({
 		icon,
+		lucideIcon,
 		color,
 		count,
 		iconFrameMode = "never",
@@ -30,10 +34,10 @@ export const StatusIconPreview: FC<StatusIconPreviewProps> = memo(
 		iconClassName = "",
 		wrapperClassName = "",
 		style,
+		iconSize,
 		onMouseEnter,
 		onMouseLeave,
 	}) => {
-		const iconDisplay = icon?.trim().length ? icon : "📝";
 		const useStatusColor = iconColorMode === "status";
 		const appliedColor = useStatusColor && color ? color.trim() : undefined;
 
@@ -58,7 +62,12 @@ export const StatusIconPreview: FC<StatusIconPreviewProps> = memo(
 				onMouseEnter={onMouseEnter}
 				onMouseLeave={onMouseLeave}
 			>
-				<span className="status-minimal__icon">{iconDisplay}</span>
+				<StatusIcon
+					icon={icon}
+					lucideIcon={lucideIcon}
+					size={iconSize ?? (compact ? 13 : 16)}
+					className="status-minimal__icon"
+				/>
 				{count && count > 1 && (
 					<span
 						className="status-minimal__count"
diff --git a/components/atoms/StatusSelector.tsx b/components/atoms/StatusSelector.tsx
index b3dc9e4..8407fcc 100644
--- a/components/atoms/StatusSelector.tsx
+++ b/components/atoms/StatusSelector.tsx
@@ -34,6 +34,7 @@ export const StatusModalOption: React.FC<StatusOptionProps> = memo(
 					<div className="note-status-option__icon-wrapper">
 						<StatusIconPreview
 							icon={status.icon}
+							lucideIcon={status.lucideIcon}
 							color={status.color}
 							iconFrameMode={iconFrameMode}
 							iconColorMode={iconColorMode}
@@ -101,7 +102,7 @@ export const StatusSelector: React.FC<Props> = ({
 		>
 			{availableStatuses.map((status, index) => (
 				<StatusModalOption
-					key={`${status.templateId || "custom"}:${status.name}:${status.description}:${status.color}:${status.icon}`}
+					key={`${status.templateId || "custom"}:${status.name}:${status.description}:${status.color}:${status.icon}:${status.lucideIcon ?? ""}`}
 					status={status}
 					isSelected={isStatusSelected(status, currentStatuses)}
 					isFocused={index === focusedIndex}
diff --git a/integrations/views/grouped-dashboard-view.tsx b/integrations/views/grouped-dashboard-view.tsx
index 0063157..db0df26 100644
--- a/integrations/views/grouped-dashboard-view.tsx
+++ b/integrations/views/grouped-dashboard-view.tsx
@@ -18,6 +18,7 @@ interface StatusItem {
 	name: string;
 	color: string;
 	icon?: string;
+	lucideIcon?: string;
 }
 
 interface FilesByStatus {
@@ -57,6 +58,7 @@ export class GroupedDashboardView extends ItemView {
 		name: status.name,
 		color: status.color || "",
 		icon: status.icon,
+		lucideIcon: status.lucideIcon,
 	});
 
 	private getAllFiles = (): FileItem[] => {
diff --git a/integrations/views/grouped-status-view.tsx b/integrations/views/grouped-status-view.tsx
index d7d7618..768d5bd 100644
--- a/integrations/views/grouped-status-view.tsx
+++ b/integrations/views/grouped-status-view.tsx
@@ -42,6 +42,7 @@ export class GroupedStatusView extends ItemView {
 		name: status.name,
 		color: status.color || "white",
 		icon: status.icon,
+		lucideIcon: status.lucideIcon,
 	});
 
 	private getAllFiles = (): FileItem[] => {
diff --git a/styles/components/file-explorer.css b/styles/components/file-explorer.css
index d56afaa..d5c9ae8 100644
--- a/styles/components/file-explorer.css
+++ b/styles/components/file-explorer.css
@@ -53,6 +53,9 @@
 .status-minimal__icon {
 	font-size: 11px;
 	line-height: 1;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
 	filter: grayscale(0.2);
 	transition: filter var(--anim-duration-fast) ease;
 }
diff --git a/styles/components/settings.css b/styles/components/settings.css
index 02eb5b7..e71fef4 100644
--- a/styles/components/settings.css
+++ b/styles/components/settings.css
@@ -36,12 +36,23 @@
 	margin-bottom: var(--size-4-2);
 }
 
+.custom-status-item__row--icons {
+	align-items: stretch;
+	flex-wrap: wrap;
+}
+
 .custom-status-item__field {
 	display: flex;
 	flex-direction: column;
 	gap: var(--size-2-1);
 }
 
+.custom-status-item__field--icon,
+.custom-status-item__field--lucide {
+	flex: 1;
+	min-width: 240px;
+}
+
 .custom-status-item__field--name {
 	flex: 2;
 	min-width: 120px;
@@ -82,9 +93,15 @@
 }
 
 .custom-status-item__input--icon {
-	width: 50px !important;
-	text-align: center;
-	font-size: 1.2em;
+	width: 100% !important;
+	text-align: left;
+	font-size: 1em;
+}
+
+.custom-status-item__hint {
+	margin: 0;
+	font-size: var(--font-ui-smaller);
+	color: var(--text-muted);
 }
 
 .custom-status-item__input--name {
@@ -203,6 +220,97 @@
 	border-left: 3px solid var(--text-error);
 }
 
+.lucide-icon-picker {
+	display: flex;
+	flex-direction: column;
+	gap: var(--size-2-2);
+}
+
+.lucide-icon-picker__control {
+	display: flex;
+	gap: var(--size-2-1);
+	align-items: center;
+}
+
+.lucide-icon-picker__input {
+	flex: 1;
+}
+
+.lucide-icon-picker__clear {
+	background: var(--background-modifier-border);
+	border: none;
+	padding: 4px 8px;
+	border-radius: var(--radius-s);
+	cursor: pointer;
+	font-size: var(--font-ui-smaller);
+}
+
+.lucide-icon-picker__clear:hover {
+	background: var(--interactive-hover);
+	color: var(--text-normal);
+}
+
+.lucide-icon-picker__selected {
+	display: flex;
+	align-items: center;
+	gap: var(--size-2-1);
+	font-size: var(--font-ui-smaller);
+	color: var(--text-muted);
+}
+
+.lucide-icon-picker__selected-preview {
+	width: 28px;
+	height: 28px;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--background-secondary);
+	border-radius: var(--radius-s);
+}
+
+.lucide-icon-picker__grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+	gap: var(--size-2-1);
+	max-height: 220px;
+	overflow-y: auto;
+	padding: var(--size-2-1);
+	border: 1px solid var(--background-modifier-border);
+	border-radius: var(--radius-m);
+	background: var(--background-primary-alt);
+}
+
+.lucide-icon-picker__option {
+	display: flex;
+	align-items: center;
+	gap: var(--size-2-1);
+	padding: var(--size-2-1) var(--size-2-2);
+	border-radius: var(--radius-s);
+	border: 1px solid transparent;
+	background: transparent;
+	cursor: pointer;
+	font-size: var(--font-ui-smaller);
+	transition:
+		border var(--anim-duration-fast) ease,
+		background var(--anim-duration-fast) ease;
+}
+
+.lucide-icon-picker__option:hover {
+	background: var(--background-modifier-hover);
+}
+
+.lucide-icon-picker__option--selected {
+	border-color: var(--interactive-accent);
+	background: var(--background-modifier-success);
+	color: var(--text-normal);
+}
+
+.lucide-icon-picker__empty {
+	font-size: var(--font-ui-smaller);
+	color: var(--text-muted);
+	padding: var(--size-2-1);
+}
+
 /* Custom Status List - BEM */
 .custom-status-list {
 	/* Container for multiple custom status items */
diff --git a/styles/components/status-icon.css b/styles/components/status-icon.css
new file mode 100644
index 0000000..2010386
--- /dev/null
+++ b/styles/components/status-icon.css
@@ -0,0 +1,6 @@
+.status-icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	line-height: 1;
+}
diff --git a/styles/components/toolbar-button.css b/styles/components/toolbar-button.css
index 4d47ce9..2432d73 100644
--- a/styles/components/toolbar-button.css
+++ b/styles/components/toolbar-button.css
@@ -21,6 +21,9 @@
 	align-items: center;
 	justify-content: center;
 	color: var(--text-muted);
+	width: 18px;
+	height: 18px;
+	line-height: 1;
 }
 
 /* Icon with status color */
diff --git a/styles/index.css b/styles/index.css
index a43eb59..3d95810 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -15,5 +15,6 @@
 @import "components/group-label.css";
 @import "components/collapsible-counter.css";
 @import "components/status-display.css";
+@import "components/status-icon.css";
 @import "components/obsidian-icon.css";
 @import "components/toolbar-button.css";
diff --git a/types/noteStatus.ts b/types/noteStatus.ts
index 17aff56..881351f 100644
--- a/types/noteStatus.ts
+++ b/types/noteStatus.ts
@@ -1,6 +1,7 @@
 export type NoteStatus = {
 	name: string;
 	icon: string;
+	lucideIcon?: string;
 	color?: string; // Optional color property
 	description?: string; // Optional description property
 	templateId?: string; // Optional template scope for namespacing
diff --git a/utils/iconUtils.ts b/utils/iconUtils.ts
new file mode 100644
index 0000000..11c8b46
--- /dev/null
+++ b/utils/iconUtils.ts
@@ -0,0 +1,51 @@
+import { IconName, getIcon, getIconIds } from "obsidian";
+
+let cachedIconSet: Set<IconName> | null = null;
+
+const getLucideIconSet = () => {
+	if (!cachedIconSet || cachedIconSet.size === 0) {
+		try {
+			const ids = getIconIds();
+			if (ids?.length) {
+				cachedIconSet = new Set(ids);
+			}
+		} catch (error) {
+			// Ignore – fallback detection will rely on getIcon
+			cachedIconSet = null;
+		}
+	}
+	return cachedIconSet;
+};
+
+const iconExists = (iconName: string): boolean => {
+	const iconSet = getLucideIconSet();
+	if (iconSet?.size) {
+		return iconSet.has(iconName as IconName);
+	}
+	try {
+		return !!getIcon(iconName as IconName);
+	} catch {
+		return false;
+	}
+};
+
+export const resolveLucideIconName = (
+	...candidates: Array<string | undefined | null>
+): IconName | null => {
+	for (const candidate of candidates) {
+		const trimmed = candidate?.trim();
+		if (trimmed && iconExists(trimmed)) {
+			return trimmed as IconName;
+		}
+	}
+
+	return null;
+};
+
+export const isLucideIconName = (name?: string | null) => {
+	const trimmed = name?.trim();
+	if (!trimmed) {
+		return false;
+	}
+	return iconExists(trimmed);
+};

From 71706a440f97cb293da6a05feb981d6f6a00d00e Mon Sep 17 00:00:00 2001
From: Aleix Soler <aleixsoler64@gmail.com>
Date: Fri, 21 Nov 2025 08:33:25 +0100
Subject: [PATCH 2/8] chore: improve lucide-icon selector

---
 components/SettingsUI/CustomStatusItem.tsx |   2 +
 components/SettingsUI/LucideIconPicker.tsx | 202 ++++++++++++++-------
 components/SettingsUI/UISettings.tsx       |   9 +-
 styles/components/settings.css             | 110 +++++++----
 4 files changed, 211 insertions(+), 112 deletions(-)

diff --git a/components/SettingsUI/CustomStatusItem.tsx b/components/SettingsUI/CustomStatusItem.tsx
index 511ac51..5198cfd 100644
--- a/components/SettingsUI/CustomStatusItem.tsx
+++ b/components/SettingsUI/CustomStatusItem.tsx
@@ -61,6 +61,8 @@ export const CustomStatusItem: React.FC<Props> = ({
 						onChange={(value) =>
 							onCustomStatusChange(index, "lucideIcon", value)
 						}
+						placeholder="Browse Lucide icons"
+						allowClear
 					/>
 					<p className="custom-status-item__hint">
 						Matches Obsidian&apos;s toolbar icons so your status
diff --git a/components/SettingsUI/LucideIconPicker.tsx b/components/SettingsUI/LucideIconPicker.tsx
index bab0749..641db9e 100644
--- a/components/SettingsUI/LucideIconPicker.tsx
+++ b/components/SettingsUI/LucideIconPicker.tsx
@@ -1,26 +1,38 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
 import { IconName, getIconIds } from "obsidian";
 import { Input } from "@/components/atoms/Input";
 import { StatusIcon } from "@/components/atoms/StatusIcon";
+import { ObsidianIcon } from "@/components/atoms/ObsidianIcon";
 
 export interface LucideIconPickerProps {
 	value?: string;
 	onChange: (value: string) => void;
+	placeholder?: string;
+	allowTextInput?: boolean;
+	allowClear?: boolean;
 	maxResults?: number;
 }
 
-const DEFAULT_MAX_RESULTS = 36;
+const DEFAULT_MAX_RESULTS = 80;
 
 export const LucideIconPicker: React.FC<LucideIconPickerProps> = ({
 	value = "",
 	onChange,
+	placeholder = "Select Lucide icon",
+	allowTextInput = false,
+	allowClear = true,
 	maxResults = DEFAULT_MAX_RESULTS,
 }) => {
-	const [query, setQuery] = useState(value);
-
-	useEffect(() => {
-		setQuery(value || "");
-	}, [value]);
+	const [query, setQuery] = useState("");
+	const [isOpen, setIsOpen] = useState(false);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const searchInputRef = useRef<HTMLInputElement>(null);
 
 	const iconIds = useMemo(() => {
 		try {
@@ -37,20 +49,57 @@ export const LucideIconPicker: React.FC<LucideIconPickerProps> = ({
 		if (!iconIds.length) {
 			return [];
 		}
-
-		const normalizedQuery = query.trim().toLowerCase();
-		const source = normalizedQuery.length
-			? iconIds.filter((name) =>
-					name.toLowerCase().includes(normalizedQuery),
-				)
+		const normalized = query.trim().toLowerCase();
+		const matches = normalized.length
+			? iconIds.filter((name) => name.toLowerCase().includes(normalized))
 			: iconIds;
+		return matches.slice(0, maxResults);
+	}, [iconIds, maxResults, query]);
 
-		return source.slice(0, maxResults);
-	}, [iconIds, query, maxResults]);
+	const closePicker = useCallback(() => {
+		setIsOpen(false);
+		setQuery("");
+	}, []);
+
+	useEffect(() => {
+		if (!isOpen) return;
+
+		const handleClickOutside = (event: MouseEvent) => {
+			if (
+				containerRef.current &&
+				!containerRef.current.contains(event.target as Node)
+			) {
+				closePicker();
+			}
+		};
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key === "Escape") {
+				closePicker();
+			}
+		};
+
+		document.addEventListener("mousedown", handleClickOutside);
+		document.addEventListener("keydown", handleKeyDown);
+
+		return () => {
+			document.removeEventListener("mousedown", handleClickOutside);
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [closePicker, isOpen]);
+
+	useEffect(() => {
+		if (isOpen) {
+			setTimeout(() => searchInputRef.current?.focus(), 0);
+		}
+	}, [isOpen]);
 
 	const handleSelect = (iconName: IconName) => {
 		onChange(iconName);
-		setQuery(iconName);
+		closePicker();
+	};
+
+	const handleManualInput = (text: string) => {
+		onChange(text);
 	};
 
 	const handleClear = () => {
@@ -58,20 +107,44 @@ export const LucideIconPicker: React.FC<LucideIconPickerProps> = ({
 		setQuery("");
 	};
 
+	const togglePopover = () => {
+		setIsOpen((prev) => !prev);
+	};
+
 	return (
-		<div className="lucide-icon-picker">
-			<div className="lucide-icon-picker__control">
+		<div className="lucide-icon-picker" ref={containerRef}>
+			{allowTextInput && (
 				<Input
 					variant="text"
-					value={query}
-					onChange={setQuery}
-					placeholder="Search by name (e.g. check-circle)"
-					className="lucide-icon-picker__input"
+					value={value}
+					onChange={handleManualInput}
+					placeholder="Emoji or icon name"
+					className="lucide-icon-picker__text-input"
 				/>
-				{value && (
+			)}
+
+			<div className="lucide-icon-picker__actions">
+				<button
+					type="button"
+					className={`lucide-icon-picker__trigger${isOpen ? " is-active" : ""}`}
+					onClick={togglePopover}
+				>
+					<span className="lucide-icon-picker__trigger-icon">
+						<StatusIcon icon={value} lucideIcon={value} size={16} />
+					</span>
+					<span className="lucide-icon-picker__trigger-label">
+						{value || placeholder}
+					</span>
+					<ObsidianIcon
+						name={isOpen ? "chevron-up" : "chevron-down"}
+						size={14}
+					/>
+				</button>
+
+				{allowClear && value && (
 					<button
 						type="button"
-						className="lucide-icon-picker__clear"
+						className="lucide-icon-picker__clear-trigger"
 						onClick={handleClear}
 					>
 						Clear
@@ -79,51 +152,44 @@ export const LucideIconPicker: React.FC<LucideIconPickerProps> = ({
 				)}
 			</div>
 
-			<div className="lucide-icon-picker__selected">
-				<span className="lucide-icon-picker__selected-preview">
-					<StatusIcon
-						icon={value}
-						lucideIcon={value}
-						size={18}
-						className="lucide-icon-picker__selected-icon"
-					/>
-				</span>
-				<span className="lucide-icon-picker__selected-label">
-					{value || "No Lucide icon selected"}
-				</span>
-			</div>
-
-			{!iconIds.length && (
-				<div className="lucide-icon-picker__empty">
-					Lucide icons are not available yet. Try reloading the
-					plugin.
-				</div>
-			)}
-
-			{iconIds.length > 0 && (
-				<div className="lucide-icon-picker__grid">
-					{filteredIcons.map((iconName) => {
-						const isSelected = iconName === value;
-						return (
-							<button
-								type="button"
-								key={iconName}
-								className={`lucide-icon-picker__option ${isSelected ? "lucide-icon-picker__option--selected" : ""}`}
-								onClick={() => handleSelect(iconName)}
-								title={iconName}
-							>
-								<StatusIcon
-									icon={iconName}
-									lucideIcon={iconName}
-									size={16}
-								/>
-								<span>{iconName}</span>
-							</button>
-						);
-					})}
-					{filteredIcons.length === 0 && (
+			{isOpen && (
+				<div className="lucide-icon-picker__popover">
+					{iconIds.length > 0 ? (
+						<>
+							<Input
+								ref={searchInputRef}
+								variant="search"
+								value={query}
+								onChange={setQuery}
+								placeholder="Search Lucide icons…"
+								className="lucide-icon-picker__search"
+							/>
+							<div className="lucide-icon-picker__options">
+								{filteredIcons.map((iconName) => (
+									<button
+										type="button"
+										key={iconName}
+										className={`lucide-icon-picker__option${iconName === value ? " lucide-icon-picker__option--selected" : ""}`}
+										onClick={() => handleSelect(iconName)}
+									>
+										<StatusIcon
+											icon={iconName}
+											lucideIcon={iconName}
+											size={16}
+										/>
+										<span>{iconName}</span>
+									</button>
+								))}
+								{filteredIcons.length === 0 && (
+									<div className="lucide-icon-picker__empty">
+										No icons match “{query.trim()}”.
+									</div>
+								)}
+							</div>
+						</>
+					) : (
 						<div className="lucide-icon-picker__empty">
-							No icons match "{query.trim()}"
+							Lucide icons are not available right now.
 						</div>
 					)}
 				</div>
diff --git a/components/SettingsUI/UISettings.tsx b/components/SettingsUI/UISettings.tsx
index 65f8c17..53750d6 100644
--- a/components/SettingsUI/UISettings.tsx
+++ b/components/SettingsUI/UISettings.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { Input } from "../atoms/Input";
 import { Select } from "../atoms/Select";
 import { SettingItem } from "./SettingItem";
+import { LucideIconPicker } from "./LucideIconPicker";
 
 export type Props = {
 	settings: PluginSettings;
@@ -270,12 +271,12 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 				name="Icon for unknown status"
 				description="Emoji or Lucide icon name displayed whenever a note does not have a status."
 			>
-				<Input
-					variant="text"
+				<LucideIconPicker
 					value={settings.unknownStatusIcon}
 					onChange={(value) => onChange("unknownStatusIcon", value)}
-					placeholder="❓"
-					style={{ maxWidth: "150px" }}
+					placeholder="Emoji or Lucide icon"
+					allowTextInput
+					allowClear
 				/>
 			</SettingItem>
 
diff --git a/styles/components/settings.css b/styles/components/settings.css
index e71fef4..309fefb 100644
--- a/styles/components/settings.css
+++ b/styles/components/settings.css
@@ -221,78 +221,108 @@
 }
 
 .lucide-icon-picker {
+	position: relative;
 	display: flex;
 	flex-direction: column;
-	gap: var(--size-2-2);
+	gap: var(--size-2-1);
 }
 
-.lucide-icon-picker__control {
+.lucide-icon-picker__text-input {
+	max-width: 220px;
+}
+
+.lucide-icon-picker__actions {
 	display: flex;
 	gap: var(--size-2-1);
 	align-items: center;
 }
 
-.lucide-icon-picker__input {
-	flex: 1;
-}
-
-.lucide-icon-picker__clear {
-	background: var(--background-modifier-border);
-	border: none;
-	padding: 4px 8px;
-	border-radius: var(--radius-s);
+.lucide-icon-picker__trigger {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--size-2-1);
+	border: 1px solid var(--background-modifier-border);
+	border-radius: var(--radius-m);
+	padding: var(--size-2-1) var(--size-4-1);
+	background: var(--background-secondary);
 	cursor: pointer;
-	font-size: var(--font-ui-smaller);
+	transition:
+		border var(--anim-duration-fast) ease,
+		background var(--anim-duration-fast) ease;
+	min-width: 220px;
+	justify-content: space-between;
 }
 
-.lucide-icon-picker__clear:hover {
-	background: var(--interactive-hover);
-	color: var(--text-normal);
+.lucide-icon-picker__trigger.is-active {
+	border-color: var(--interactive-accent);
 }
 
-.lucide-icon-picker__selected {
-	display: flex;
+.lucide-icon-picker__trigger-icon {
+	display: inline-flex;
 	align-items: center;
-	gap: var(--size-2-1);
+	justify-content: center;
+	width: 20px;
+	height: 20px;
+}
+
+.lucide-icon-picker__trigger-label {
+	flex: 1;
+	text-align: left;
 	font-size: var(--font-ui-smaller);
 	color: var(--text-muted);
 }
 
-.lucide-icon-picker__selected-preview {
-	width: 28px;
-	height: 28px;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	background: var(--background-secondary);
-	border-radius: var(--radius-s);
+.lucide-icon-picker__clear-trigger {
+	background: transparent;
+	border: none;
+	color: var(--text-muted);
+	font-size: var(--font-ui-smaller);
+	cursor: pointer;
+	padding: var(--size-2-1) var(--size-2-2);
 }
 
-.lucide-icon-picker__grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+.lucide-icon-picker__clear-trigger:hover {
+	color: var(--text-normal);
+	text-decoration: underline;
+}
+
+.lucide-icon-picker__popover {
+	position: absolute;
+	top: calc(100% + 4px);
+	left: 0;
+	width: min(320px, 90vw);
+	background: var(--background-primary);
+	border: 1px solid var(--background-modifier-border);
+	border-radius: var(--radius-m);
+	box-shadow: var(--shadow-l);
+	padding: var(--size-2-2);
+	z-index: var(--layer-popover);
+	display: flex;
+	flex-direction: column;
+	gap: var(--size-2-1);
+}
+
+.lucide-icon-picker__search {
+	width: 100%;
+}
+
+.lucide-icon-picker__options {
+	display: flex;
+	flex-direction: column;
 	gap: var(--size-2-1);
 	max-height: 220px;
 	overflow-y: auto;
-	padding: var(--size-2-1);
-	border: 1px solid var(--background-modifier-border);
-	border-radius: var(--radius-m);
-	background: var(--background-primary-alt);
 }
 
 .lucide-icon-picker__option {
 	display: flex;
 	align-items: center;
 	gap: var(--size-2-1);
-	padding: var(--size-2-1) var(--size-2-2);
+	padding: var(--size-2-1);
 	border-radius: var(--radius-s);
 	border: 1px solid transparent;
-	background: transparent;
 	cursor: pointer;
 	font-size: var(--font-ui-smaller);
-	transition:
-		border var(--anim-duration-fast) ease,
-		background var(--anim-duration-fast) ease;
 }
 
 .lucide-icon-picker__option:hover {
@@ -302,13 +332,13 @@
 .lucide-icon-picker__option--selected {
 	border-color: var(--interactive-accent);
 	background: var(--background-modifier-success);
-	color: var(--text-normal);
 }
 
 .lucide-icon-picker__empty {
 	font-size: var(--font-ui-smaller);
 	color: var(--text-muted);
-	padding: var(--size-2-1);
+	padding: var(--size-2-2);
+	text-align: center;
 }
 
 /* Custom Status List - BEM */

From 9535296919fa00a1b56a2a799e84ed187be20ecb Mon Sep 17 00:00:00 2001
From: Aleix Soler <aleixsoler64@gmail.com>
Date: Fri, 21 Nov 2025 08:39:40 +0100
Subject: [PATCH 3/8] chore: show all lucide icons

---
 components/SettingsUI/LucideIconPicker.tsx | 11 +++++++++--
 styles/components/settings.css             | 13 ++++++++++---
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/components/SettingsUI/LucideIconPicker.tsx b/components/SettingsUI/LucideIconPicker.tsx
index 641db9e..a3c7b40 100644
--- a/components/SettingsUI/LucideIconPicker.tsx
+++ b/components/SettingsUI/LucideIconPicker.tsx
@@ -19,7 +19,7 @@ export interface LucideIconPickerProps {
 	maxResults?: number;
 }
 
-const DEFAULT_MAX_RESULTS = 80;
+const DEFAULT_MAX_RESULTS = Infinity;
 
 export const LucideIconPicker: React.FC<LucideIconPickerProps> = ({
 	value = "",
@@ -53,7 +53,10 @@ export const LucideIconPicker: React.FC<LucideIconPickerProps> = ({
 		const matches = normalized.length
 			? iconIds.filter((name) => name.toLowerCase().includes(normalized))
 			: iconIds;
-		return matches.slice(0, maxResults);
+		if (Number.isFinite(maxResults)) {
+			return matches.slice(0, maxResults);
+		}
+		return matches;
 	}, [iconIds, maxResults, query]);
 
 	const closePicker = useCallback(() => {
@@ -164,6 +167,10 @@ export const LucideIconPicker: React.FC<LucideIconPickerProps> = ({
 								placeholder="Search Lucide icons…"
 								className="lucide-icon-picker__search"
 							/>
+							<div className="lucide-icon-picker__count">
+								Showing {filteredIcons.length} of{" "}
+								{iconIds.length} icons
+							</div>
 							<div className="lucide-icon-picker__options">
 								{filteredIcons.map((iconName) => (
 									<button
diff --git a/styles/components/settings.css b/styles/components/settings.css
index 309fefb..c923332 100644
--- a/styles/components/settings.css
+++ b/styles/components/settings.css
@@ -306,12 +306,18 @@
 	width: 100%;
 }
 
+.lucide-icon-picker__count {
+	font-size: var(--font-ui-smaller);
+	color: var(--text-muted);
+}
+
 .lucide-icon-picker__options {
-	display: flex;
-	flex-direction: column;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 	gap: var(--size-2-1);
-	max-height: 220px;
+	max-height: 280px;
 	overflow-y: auto;
+	padding-right: var(--size-2-1);
 }
 
 .lucide-icon-picker__option {
@@ -323,6 +329,7 @@
 	border: 1px solid transparent;
 	cursor: pointer;
 	font-size: var(--font-ui-smaller);
+	background: var(--background-secondary);
 }
 
 .lucide-icon-picker__option:hover {

From 85c0e6be5c5731f4d9b1fb6105562b89402e7450 Mon Sep 17 00:00:00 2001
From: Aleix Soler <aleixsoler64@gmail.com>
Date: Fri, 21 Nov 2025 08:51:00 +0100
Subject: [PATCH 4/8] feat: add lucid icon modal

---
 components/SettingsUI/LucideIconModal.tsx  | 186 +++++++++++++++++++++
 components/SettingsUI/LucideIconPicker.tsx | 181 +++-----------------
 styles/components/lucide-icon-picker.css   | 157 +++++++++++++++++
 styles/components/settings.css             | 128 --------------
 styles/index.css                           |   1 +
 5 files changed, 371 insertions(+), 282 deletions(-)
 create mode 100644 components/SettingsUI/LucideIconModal.tsx
 create mode 100644 styles/components/lucide-icon-picker.css

diff --git a/components/SettingsUI/LucideIconModal.tsx b/components/SettingsUI/LucideIconModal.tsx
new file mode 100644
index 0000000..f4de2ff
--- /dev/null
+++ b/components/SettingsUI/LucideIconModal.tsx
@@ -0,0 +1,186 @@
+import React, {
+	FC,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import { App, Modal } from "obsidian";
+import { IconName, getIconIds } from "obsidian";
+import { Input } from "@/components/atoms/Input";
+import { StatusIcon } from "@/components/atoms/StatusIcon";
+import { ObsidianIcon } from "@/components/atoms/ObsidianIcon";
+import { createRoot, Root } from "react-dom/client";
+
+const BATCH_SIZE = 80;
+
+interface LucideIconModalProps {
+	initialValue?: string;
+	onSelect: (value: string) => void;
+	onCloseRequest: () => void;
+}
+
+const LucideIconModalContent: FC<LucideIconModalProps> = ({
+	initialValue = "",
+	onSelect,
+	onCloseRequest,
+}) => {
+	const [query, setQuery] = useState("");
+	const [visibleCount, setVisibleCount] = useState(BATCH_SIZE);
+	const [showLabels, setShowLabels] = useState(true);
+	const listRef = useRef<HTMLDivElement>(null);
+
+	const iconIds = useMemo(() => {
+		try {
+			return getIconIds()
+				.slice()
+				.sort((a, b) => a.localeCompare(b));
+		} catch (error) {
+			console.error("Failed to fetch Lucide icon list", error);
+			return [] as IconName[];
+		}
+	}, []);
+
+	const filteredIcons = useMemo(() => {
+		if (!iconIds.length) {
+			return [];
+		}
+		const normalized = query.trim().toLowerCase();
+		const matches = normalized.length
+			? iconIds.filter((name) => name.toLowerCase().includes(normalized))
+			: iconIds;
+		return matches;
+	}, [iconIds, query]);
+
+	const visibleIcons = useMemo(
+		() => filteredIcons.slice(0, visibleCount),
+		[filteredIcons, visibleCount],
+	);
+
+	useEffect(() => {
+		setVisibleCount(BATCH_SIZE);
+		listRef.current?.scrollTo({ top: 0 });
+	}, [query, filteredIcons.length]);
+
+	const handleScroll = useCallback(
+		(event: React.UIEvent<HTMLDivElement>) => {
+			const target = event.currentTarget;
+			if (
+				target.scrollTop + target.clientHeight >=
+				target.scrollHeight - 64
+			) {
+				setVisibleCount((prev) =>
+					Math.min(prev + BATCH_SIZE, filteredIcons.length),
+				);
+			}
+		},
+		[filteredIcons.length],
+	);
+
+	const handleSelect = (iconName: string) => {
+		onSelect(iconName);
+		onCloseRequest();
+	};
+
+	return (
+		<div className="lucide-icon-modal">
+			<div className="lucide-icon-modal__header">
+				<div>
+					<h3 className="modal-title">Select Lucide icon</h3>
+					<p className="lucide-icon-modal__count">
+						Showing {visibleIcons.length} of {filteredIcons.length}{" "}
+						( Total {iconIds.length})
+					</p>
+				</div>
+				<button
+					type="button"
+					className="modal-close-button lucide-icon-modal__close"
+					onClick={onCloseRequest}
+					aria-label="Close"
+				>
+					<ObsidianIcon name="x" size={14} />
+				</button>
+			</div>
+
+			<Input
+				variant="search"
+				value={query}
+				onChange={setQuery}
+				placeholder="Search icons…"
+				className="lucide-icon-modal__search"
+			/>
+
+			<label className="lucide-icon-modal__toggle">
+				<input
+					type="checkbox"
+					checked={showLabels}
+					onChange={(e) => setShowLabels(e.target.checked)}
+				/>
+				Show icon names
+			</label>
+
+			<div
+				ref={listRef}
+				className={`lucide-icon-modal__list${showLabels ? "" : " lucide-icon-modal__list--icons-only"}`}
+				onScroll={handleScroll}
+			>
+				{visibleIcons.map((iconName) => (
+					<button
+						key={iconName}
+						type="button"
+						className={`lucide-icon-modal__option${iconName === initialValue ? " lucide-icon-modal__option--selected" : ""}${showLabels ? "" : " lucide-icon-modal__option--compact"}`}
+						onClick={() => handleSelect(iconName)}
+					>
+						<StatusIcon
+							icon={iconName}
+							lucideIcon={iconName}
+							size={16}
+						/>
+						<span>{iconName}</span>
+					</button>
+				))}
+
+				{visibleIcons.length === 0 && (
+					<div className="lucide-icon-modal__empty">
+						No icons match “{query.trim()}”.
+					</div>
+				)}
+			</div>
+		</div>
+	);
+};
+
+type ModalOptions = {
+	initialValue?: string;
+	onSelect: (value: string) => void;
+};
+
+export class LucideIconModal extends Modal {
+	private root: Root | null = null;
+	private readonly options: ModalOptions;
+
+	constructor(app: App, options: ModalOptions) {
+		super(app);
+		this.options = options;
+	}
+
+	onOpen(): void {
+		this.contentEl.empty();
+		this.contentEl.addClass("lucide-icon-modal-wrapper");
+		this.root = createRoot(this.contentEl);
+		this.root.render(
+			<LucideIconModalContent
+				initialValue={this.options.initialValue}
+				onSelect={this.options.onSelect}
+				onCloseRequest={() => this.close()}
+			/>,
+		);
+	}
+
+	onClose(): void {
+		this.root?.unmount();
+		this.root = null;
+		this.contentEl.empty();
+	}
+}
diff --git a/components/SettingsUI/LucideIconPicker.tsx b/components/SettingsUI/LucideIconPicker.tsx
index a3c7b40..f550881 100644
--- a/components/SettingsUI/LucideIconPicker.tsx
+++ b/components/SettingsUI/LucideIconPicker.tsx
@@ -1,14 +1,12 @@
-import React, {
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from "react";
-import { IconName, getIconIds } from "obsidian";
-import { Input } from "@/components/atoms/Input";
+import React from "react";
 import { StatusIcon } from "@/components/atoms/StatusIcon";
-import { ObsidianIcon } from "@/components/atoms/ObsidianIcon";
+import { LucideIconModal } from "./LucideIconModal";
+import { App } from "obsidian";
+import { Input } from "@/components/atoms/Input";
+
+const getAppInstance = (): App | undefined => {
+	return (window as typeof window & { app?: App }).app;
+};
 
 export interface LucideIconPickerProps {
 	value?: string;
@@ -16,134 +14,56 @@ export interface LucideIconPickerProps {
 	placeholder?: string;
 	allowTextInput?: boolean;
 	allowClear?: boolean;
-	maxResults?: number;
 }
 
-const DEFAULT_MAX_RESULTS = Infinity;
-
 export const LucideIconPicker: React.FC<LucideIconPickerProps> = ({
 	value = "",
 	onChange,
-	placeholder = "Select Lucide icon",
+	placeholder = "Choose Lucide icon",
 	allowTextInput = false,
 	allowClear = true,
-	maxResults = DEFAULT_MAX_RESULTS,
 }) => {
-	const [query, setQuery] = useState("");
-	const [isOpen, setIsOpen] = useState(false);
-	const containerRef = useRef<HTMLDivElement>(null);
-	const searchInputRef = useRef<HTMLInputElement>(null);
-
-	const iconIds = useMemo(() => {
-		try {
-			return getIconIds()
-				.slice()
-				.sort((a, b) => a.localeCompare(b));
-		} catch (error) {
-			console.error("Failed to load Lucide icon list", error);
-			return [] as IconName[];
+	const openModal = () => {
+		const app = getAppInstance();
+		if (!app) {
+			console.warn("Cannot open Lucide icon modal without Obsidian app");
+			return;
 		}
-	}, []);
-
-	const filteredIcons = useMemo(() => {
-		if (!iconIds.length) {
-			return [];
-		}
-		const normalized = query.trim().toLowerCase();
-		const matches = normalized.length
-			? iconIds.filter((name) => name.toLowerCase().includes(normalized))
-			: iconIds;
-		if (Number.isFinite(maxResults)) {
-			return matches.slice(0, maxResults);
-		}
-		return matches;
-	}, [iconIds, maxResults, query]);
-
-	const closePicker = useCallback(() => {
-		setIsOpen(false);
-		setQuery("");
-	}, []);
-
-	useEffect(() => {
-		if (!isOpen) return;
-
-		const handleClickOutside = (event: MouseEvent) => {
-			if (
-				containerRef.current &&
-				!containerRef.current.contains(event.target as Node)
-			) {
-				closePicker();
-			}
-		};
-		const handleKeyDown = (event: KeyboardEvent) => {
-			if (event.key === "Escape") {
-				closePicker();
-			}
-		};
-
-		document.addEventListener("mousedown", handleClickOutside);
-		document.addEventListener("keydown", handleKeyDown);
-
-		return () => {
-			document.removeEventListener("mousedown", handleClickOutside);
-			document.removeEventListener("keydown", handleKeyDown);
-		};
-	}, [closePicker, isOpen]);
-
-	useEffect(() => {
-		if (isOpen) {
-			setTimeout(() => searchInputRef.current?.focus(), 0);
-		}
-	}, [isOpen]);
-
-	const handleSelect = (iconName: IconName) => {
-		onChange(iconName);
-		closePicker();
-	};
-
-	const handleManualInput = (text: string) => {
-		onChange(text);
+		const modal = new LucideIconModal(app, {
+			initialValue: value,
+			onSelect: (icon) => onChange(icon),
+		});
+		modal.open();
 	};
 
 	const handleClear = () => {
 		onChange("");
-		setQuery("");
-	};
-
-	const togglePopover = () => {
-		setIsOpen((prev) => !prev);
 	};
 
 	return (
-		<div className="lucide-icon-picker" ref={containerRef}>
+		<div className="lucide-icon-picker">
 			{allowTextInput && (
 				<Input
 					variant="text"
 					value={value}
-					onChange={handleManualInput}
+					onChange={(val) => onChange(val)}
 					placeholder="Emoji or icon name"
 					className="lucide-icon-picker__text-input"
 				/>
 			)}
-
-			<div className="lucide-icon-picker__actions">
+			<div className="lucide-icon-picker__row">
 				<button
 					type="button"
-					className={`lucide-icon-picker__trigger${isOpen ? " is-active" : ""}`}
-					onClick={togglePopover}
+					className="lucide-icon-picker__modal-button"
+					onClick={openModal}
 				>
-					<span className="lucide-icon-picker__trigger-icon">
-						<StatusIcon icon={value} lucideIcon={value} size={16} />
+					<span className="lucide-icon-picker__preview">
+						<StatusIcon icon={value} lucideIcon={value} size={18} />
 					</span>
-					<span className="lucide-icon-picker__trigger-label">
+					<span className="lucide-icon-picker__label">
 						{value || placeholder}
 					</span>
-					<ObsidianIcon
-						name={isOpen ? "chevron-up" : "chevron-down"}
-						size={14}
-					/>
 				</button>
-
 				{allowClear && value && (
 					<button
 						type="button"
@@ -154,53 +74,6 @@ export const LucideIconPicker: React.FC<LucideIconPickerProps> = ({
 					</button>
 				)}
 			</div>
-
-			{isOpen && (
-				<div className="lucide-icon-picker__popover">
-					{iconIds.length > 0 ? (
-						<>
-							<Input
-								ref={searchInputRef}
-								variant="search"
-								value={query}
-								onChange={setQuery}
-								placeholder="Search Lucide icons…"
-								className="lucide-icon-picker__search"
-							/>
-							<div className="lucide-icon-picker__count">
-								Showing {filteredIcons.length} of{" "}
-								{iconIds.length} icons
-							</div>
-							<div className="lucide-icon-picker__options">
-								{filteredIcons.map((iconName) => (
-									<button
-										type="button"
-										key={iconName}
-										className={`lucide-icon-picker__option${iconName === value ? " lucide-icon-picker__option--selected" : ""}`}
-										onClick={() => handleSelect(iconName)}
-									>
-										<StatusIcon
-											icon={iconName}
-											lucideIcon={iconName}
-											size={16}
-										/>
-										<span>{iconName}</span>
-									</button>
-								))}
-								{filteredIcons.length === 0 && (
-									<div className="lucide-icon-picker__empty">
-										No icons match “{query.trim()}”.
-									</div>
-								)}
-							</div>
-						</>
-					) : (
-						<div className="lucide-icon-picker__empty">
-							Lucide icons are not available right now.
-						</div>
-					)}
-				</div>
-			)}
 		</div>
 	);
 };
diff --git a/styles/components/lucide-icon-picker.css b/styles/components/lucide-icon-picker.css
new file mode 100644
index 0000000..b84d679
--- /dev/null
+++ b/styles/components/lucide-icon-picker.css
@@ -0,0 +1,157 @@
+.lucide-icon-picker {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	gap: var(--size-2-1);
+}
+
+.lucide-icon-picker__text-input {
+	max-width: 240px;
+}
+
+.lucide-icon-picker__row {
+	display: flex;
+	gap: var(--size-2-1);
+	align-items: center;
+}
+
+.lucide-icon-picker__modal-button {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--size-2-1);
+	border: 1px solid var(--background-modifier-border);
+	border-radius: var(--radius-m);
+	padding: var(--size-2-1) var(--size-4-1);
+	background: var(--background-secondary);
+	cursor: pointer;
+	transition:
+		border var(--anim-duration-fast) ease,
+		background var(--anim-duration-fast) ease;
+	min-width: 220px;
+	justify-content: space-between;
+}
+
+.lucide-icon-picker__modal-button:hover {
+	border-color: var(--interactive-accent);
+}
+
+.lucide-icon-picker__preview {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 20px;
+	height: 20px;
+}
+
+.lucide-icon-picker__label {
+	flex: 1;
+	text-align: left;
+	font-size: var(--font-ui-smaller);
+	color: var(--text-muted);
+}
+
+.lucide-icon-picker__clear-trigger {
+	background: transparent;
+	border: none;
+	color: var(--text-muted);
+	font-size: var(--font-ui-smaller);
+	cursor: pointer;
+	padding: var(--size-2-1) var(--size-2-2);
+}
+
+.lucide-icon-picker__clear-trigger:hover {
+	color: var(--text-normal);
+	text-decoration: underline;
+}
+
+.lucide-icon-modal-wrapper {
+	padding: var(--size-4-2);
+}
+
+.lucide-icon-modal {
+	display: flex;
+	flex-direction: column;
+	gap: var(--size-2-1);
+}
+
+.lucide-icon-modal__header {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: var(--size-2-2);
+}
+
+.lucide-icon-modal__count {
+	margin: 0;
+	font-size: var(--font-ui-smaller);
+	color: var(--text-muted);
+}
+
+.lucide-icon-modal__close {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.lucide-icon-modal__search {
+	width: 100%;
+}
+
+.lucide-icon-modal__toggle {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--size-2-1);
+	font-size: var(--font-ui-smaller);
+	color: var(--text-muted);
+}
+
+.lucide-icon-modal__list {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+	gap: var(--size-2-1);
+	max-height: 360px;
+	overflow-y: auto;
+	padding-right: var(--size-2-1);
+}
+
+.lucide-icon-modal__list--icons-only {
+	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+}
+
+.lucide-icon-modal__option {
+	display: flex;
+	align-items: center;
+	gap: var(--size-2-1);
+	padding: var(--size-2-1);
+	border-radius: var(--radius-s);
+	border: 1px solid var(--background-modifier-border);
+	background: var(--background-secondary);
+	cursor: pointer;
+	font-size: var(--font-ui-smaller);
+	justify-content: flex-start;
+}
+
+.lucide-icon-modal__option:hover {
+	background: var(--background-modifier-hover);
+}
+
+.lucide-icon-modal__option--selected {
+	border-color: var(--interactive-accent);
+	background: var(--background-modifier-success);
+}
+
+.lucide-icon-modal__option--compact {
+	justify-content: center;
+}
+
+.lucide-icon-modal__option--compact span {
+	display: none;
+}
+
+.lucide-icon-modal__empty {
+	grid-column: 1 / -1;
+	text-align: center;
+	font-size: var(--font-ui-smaller);
+	color: var(--text-muted);
+	padding: var(--size-4-2);
+}
diff --git a/styles/components/settings.css b/styles/components/settings.css
index c923332..b69770f 100644
--- a/styles/components/settings.css
+++ b/styles/components/settings.css
@@ -220,134 +220,6 @@
 	border-left: 3px solid var(--text-error);
 }
 
-.lucide-icon-picker {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	gap: var(--size-2-1);
-}
-
-.lucide-icon-picker__text-input {
-	max-width: 220px;
-}
-
-.lucide-icon-picker__actions {
-	display: flex;
-	gap: var(--size-2-1);
-	align-items: center;
-}
-
-.lucide-icon-picker__trigger {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--size-2-1);
-	border: 1px solid var(--background-modifier-border);
-	border-radius: var(--radius-m);
-	padding: var(--size-2-1) var(--size-4-1);
-	background: var(--background-secondary);
-	cursor: pointer;
-	transition:
-		border var(--anim-duration-fast) ease,
-		background var(--anim-duration-fast) ease;
-	min-width: 220px;
-	justify-content: space-between;
-}
-
-.lucide-icon-picker__trigger.is-active {
-	border-color: var(--interactive-accent);
-}
-
-.lucide-icon-picker__trigger-icon {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 20px;
-	height: 20px;
-}
-
-.lucide-icon-picker__trigger-label {
-	flex: 1;
-	text-align: left;
-	font-size: var(--font-ui-smaller);
-	color: var(--text-muted);
-}
-
-.lucide-icon-picker__clear-trigger {
-	background: transparent;
-	border: none;
-	color: var(--text-muted);
-	font-size: var(--font-ui-smaller);
-	cursor: pointer;
-	padding: var(--size-2-1) var(--size-2-2);
-}
-
-.lucide-icon-picker__clear-trigger:hover {
-	color: var(--text-normal);
-	text-decoration: underline;
-}
-
-.lucide-icon-picker__popover {
-	position: absolute;
-	top: calc(100% + 4px);
-	left: 0;
-	width: min(320px, 90vw);
-	background: var(--background-primary);
-	border: 1px solid var(--background-modifier-border);
-	border-radius: var(--radius-m);
-	box-shadow: var(--shadow-l);
-	padding: var(--size-2-2);
-	z-index: var(--layer-popover);
-	display: flex;
-	flex-direction: column;
-	gap: var(--size-2-1);
-}
-
-.lucide-icon-picker__search {
-	width: 100%;
-}
-
-.lucide-icon-picker__count {
-	font-size: var(--font-ui-smaller);
-	color: var(--text-muted);
-}
-
-.lucide-icon-picker__options {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-	gap: var(--size-2-1);
-	max-height: 280px;
-	overflow-y: auto;
-	padding-right: var(--size-2-1);
-}
-
-.lucide-icon-picker__option {
-	display: flex;
-	align-items: center;
-	gap: var(--size-2-1);
-	padding: var(--size-2-1);
-	border-radius: var(--radius-s);
-	border: 1px solid transparent;
-	cursor: pointer;
-	font-size: var(--font-ui-smaller);
-	background: var(--background-secondary);
-}
-
-.lucide-icon-picker__option:hover {
-	background: var(--background-modifier-hover);
-}
-
-.lucide-icon-picker__option--selected {
-	border-color: var(--interactive-accent);
-	background: var(--background-modifier-success);
-}
-
-.lucide-icon-picker__empty {
-	font-size: var(--font-ui-smaller);
-	color: var(--text-muted);
-	padding: var(--size-2-2);
-	text-align: center;
-}
-
 /* Custom Status List - BEM */
 .custom-status-list {
 	/* Container for multiple custom status items */
diff --git a/styles/index.css b/styles/index.css
index 3d95810..59f316e 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -15,6 +15,7 @@
 @import "components/group-label.css";
 @import "components/collapsible-counter.css";
 @import "components/status-display.css";
+@import "components/lucide-icon-picker.css";
 @import "components/status-icon.css";
 @import "components/obsidian-icon.css";
 @import "components/toolbar-button.css";

From e5233f6f0ecf8c0e3841313bc00b81b3642f09fa Mon Sep 17 00:00:00 2001
From: Aleix Soler <aleixsoler64@gmail.com>
Date: Fri, 21 Nov 2025 08:57:08 +0100
Subject: [PATCH 5/8] feat: fuzzy finder for lucide icons

---
 components/SettingsUI/LucideIconModal.tsx | 47 ++++++++++++++++++++---
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/components/SettingsUI/LucideIconModal.tsx b/components/SettingsUI/LucideIconModal.tsx
index f4de2ff..67dc8d8 100644
--- a/components/SettingsUI/LucideIconModal.tsx
+++ b/components/SettingsUI/LucideIconModal.tsx
@@ -42,16 +42,53 @@ const LucideIconModalContent: FC<LucideIconModalProps> = ({
 		}
 	}, []);
 
+	const computeFuzzyScore = useCallback(
+		(needle: string, haystack: string): number | null => {
+			let lastIndex = -1;
+			let score = 0;
+
+			for (let i = 0; i < needle.length; i += 1) {
+				const char = needle[i];
+				const idx = haystack.indexOf(char, lastIndex + 1);
+				if (idx === -1) {
+					return null;
+				}
+				score += idx - lastIndex;
+				lastIndex = idx;
+			}
+
+			return score + (haystack.length - lastIndex);
+		},
+		[],
+	);
+
 	const filteredIcons = useMemo(() => {
 		if (!iconIds.length) {
 			return [];
 		}
 		const normalized = query.trim().toLowerCase();
-		const matches = normalized.length
-			? iconIds.filter((name) => name.toLowerCase().includes(normalized))
-			: iconIds;
-		return matches;
-	}, [iconIds, query]);
+		if (!normalized.length) {
+			return iconIds;
+		}
+
+		const matches = iconIds
+			.map((name) => {
+				const target = name.toLowerCase();
+				const score = computeFuzzyScore(normalized, target);
+				return score === null ? null : { name, score };
+			})
+			.filter(
+				(
+					entry,
+				): entry is {
+					name: string;
+					score: number;
+				} => entry !== null,
+			)
+			.sort((a, b) => a.score - b.score || a.name.localeCompare(b.name));
+
+		return matches.map((entry) => entry.name);
+	}, [iconIds, query, computeFuzzyScore]);
 
 	const visibleIcons = useMemo(
 		() => filteredIcons.slice(0, visibleCount),

From 2e7c3ad66c10b3d54d5d2a9604c2c24032ffc3e0 Mon Sep 17 00:00:00 2001
From: Aleix Soler <aleixsoler64@gmail.com>
Date: Fri, 21 Nov 2025 09:13:22 +0100
Subject: [PATCH 6/8] chore: icon selection field added

---
 components/SettingsUI/CustomStatusItem.tsx   | 57 +++++----------
 components/SettingsUI/IconSelectionField.tsx | 75 ++++++++++++++++++++
 components/SettingsUI/UISettings.tsx         | 22 ++++--
 styles/components/lucide-icon-picker.css     | 29 ++++++++
 4 files changed, 137 insertions(+), 46 deletions(-)
 create mode 100644 components/SettingsUI/IconSelectionField.tsx

diff --git a/components/SettingsUI/CustomStatusItem.tsx b/components/SettingsUI/CustomStatusItem.tsx
index 5198cfd..24b8efa 100644
--- a/components/SettingsUI/CustomStatusItem.tsx
+++ b/components/SettingsUI/CustomStatusItem.tsx
@@ -2,7 +2,7 @@ import { NoteStatus } from "@/types/noteStatus";
 import React from "react";
 import { Input } from "@/components/atoms/Input";
 import { StatusIcon } from "@/components/atoms/StatusIcon";
-import { LucideIconPicker } from "./LucideIconPicker";
+import { IconSelectionField } from "./IconSelectionField";
 
 export type Props = {
 	status: NoteStatus;
@@ -32,44 +32,23 @@ export const CustomStatusItem: React.FC<Props> = ({
 	const isValid = status.name.trim().length > 0;
 	return (
 		<div className="custom-status-item">
-			<div className="custom-status-item__row custom-status-item__row--icons">
-				<div className="custom-status-item__field custom-status-item__field--icon">
-					<label className="custom-status-item__label">
-						Emoji icon
-					</label>
-					<Input
-						variant="text"
-						value={status.icon}
-						onChange={(value) =>
-							onCustomStatusChange(index, "icon", value || "")
-						}
-						placeholder="Example: ✅ or 🚧"
-						className="custom-status-item__input custom-status-item__input--icon"
-					/>
-					<p className="custom-status-item__hint">
-						This fallback icon is shown anywhere Lucide is not
-						available.
-					</p>
-				</div>
-
-				<div className="custom-status-item__field custom-status-item__field--lucide">
-					<label className="custom-status-item__label">
-						Lucide icon (optional)
-					</label>
-					<LucideIconPicker
-						value={status.lucideIcon || ""}
-						onChange={(value) =>
-							onCustomStatusChange(index, "lucideIcon", value)
-						}
-						placeholder="Browse Lucide icons"
-						allowClear
-					/>
-					<p className="custom-status-item__hint">
-						Matches Obsidian&apos;s toolbar icons so your status
-						button blends in.
-					</p>
-				</div>
-			</div>
+			<IconSelectionField
+				className="custom-status-item__icon-fields"
+				emojiValue={status.icon}
+				onEmojiChange={(value) =>
+					onCustomStatusChange(index, "icon", value || "")
+				}
+				emojiLabel="Emoji icon"
+				emojiPlaceholder="Example: ✅ or 🚧"
+				emojiHint="Shown anywhere Lucide is not available."
+				lucideValue={status.lucideIcon || ""}
+				onLucideChange={(value) =>
+					onCustomStatusChange(index, "lucideIcon", value)
+				}
+				lucideLabel="Lucide icon (optional)"
+				lucidePlaceholder="Browse Lucide icons"
+				lucideHint="Matches Obsidian's toolbar icons so your status button blends in."
+			/>
 
 			{/* Simple horizontal layout with remaining inputs */}
 			<div className="custom-status-item__row">
diff --git a/components/SettingsUI/IconSelectionField.tsx b/components/SettingsUI/IconSelectionField.tsx
new file mode 100644
index 0000000..96561e6
--- /dev/null
+++ b/components/SettingsUI/IconSelectionField.tsx
@@ -0,0 +1,75 @@
+import React from "react";
+import { Input } from "@/components/atoms/Input";
+import { LucideIconPicker } from "./LucideIconPicker";
+
+export interface IconSelectionFieldProps {
+	className?: string;
+	emojiValue: string;
+	onEmojiChange: (value: string) => void;
+	emojiLabel?: string;
+	emojiPlaceholder?: string;
+	emojiHint?: string;
+	lucideValue?: string;
+	onLucideChange?: (value: string) => void;
+	lucideLabel?: string;
+	lucidePlaceholder?: string;
+	lucideHint?: string;
+	lucideAllowClear?: boolean;
+}
+
+export const IconSelectionField: React.FC<IconSelectionFieldProps> = ({
+	className = "",
+	emojiValue,
+	onEmojiChange,
+	emojiLabel = "Emoji fallback",
+	emojiPlaceholder = "Example: ✅",
+	emojiHint,
+	lucideValue,
+	onLucideChange,
+	lucideLabel = "Lucide icon",
+	lucidePlaceholder = "Choose Lucide icon",
+	lucideHint,
+	lucideAllowClear = true,
+}) => {
+	const containerClass = ["icon-selection-field", className]
+		.filter(Boolean)
+		.join(" ");
+
+	return (
+		<div className={containerClass}>
+			<div className="icon-selection-field__column">
+				<label className="icon-selection-field__label">
+					{emojiLabel}
+				</label>
+				<Input
+					variant="text"
+					value={emojiValue}
+					onChange={onEmojiChange}
+					placeholder={emojiPlaceholder}
+					className="icon-selection-field__emoji-input"
+				/>
+				{emojiHint && (
+					<p className="icon-selection-field__hint">{emojiHint}</p>
+				)}
+			</div>
+			{onLucideChange && (
+				<div className="icon-selection-field__column">
+					<label className="icon-selection-field__label">
+						{lucideLabel}
+					</label>
+					<LucideIconPicker
+						value={lucideValue}
+						onChange={onLucideChange}
+						placeholder={lucidePlaceholder}
+						allowClear={lucideAllowClear}
+					/>
+					{lucideHint && (
+						<p className="icon-selection-field__hint">
+							{lucideHint}
+						</p>
+					)}
+				</div>
+			)}
+		</div>
+	);
+};
diff --git a/components/SettingsUI/UISettings.tsx b/components/SettingsUI/UISettings.tsx
index 53750d6..c32b708 100644
--- a/components/SettingsUI/UISettings.tsx
+++ b/components/SettingsUI/UISettings.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { Input } from "../atoms/Input";
 import { Select } from "../atoms/Select";
 import { SettingItem } from "./SettingItem";
-import { LucideIconPicker } from "./LucideIconPicker";
+import { IconSelectionField } from "./IconSelectionField";
 
 export type Props = {
 	settings: PluginSettings;
@@ -270,13 +270,21 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 			<SettingItem
 				name="Icon for unknown status"
 				description="Emoji or Lucide icon name displayed whenever a note does not have a status."
+				vertical
 			>
-				<LucideIconPicker
-					value={settings.unknownStatusIcon}
-					onChange={(value) => onChange("unknownStatusIcon", value)}
-					placeholder="Emoji or Lucide icon"
-					allowTextInput
-					allowClear
+				<IconSelectionField
+					emojiValue={settings.unknownStatusIcon}
+					onEmojiChange={(value) =>
+						onChange("unknownStatusIcon", value)
+					}
+					emojiPlaceholder="❓"
+					emojiHint="Type any emoji or text fallback."
+					lucideValue={settings.unknownStatusIcon}
+					onLucideChange={(value) =>
+						onChange("unknownStatusIcon", value)
+					}
+					lucidePlaceholder="Choose Lucide icon"
+					lucideHint="Matches the Obsidian toolbar style."
 				/>
 			</SettingItem>
 
diff --git a/styles/components/lucide-icon-picker.css b/styles/components/lucide-icon-picker.css
index b84d679..ee39771 100644
--- a/styles/components/lucide-icon-picker.css
+++ b/styles/components/lucide-icon-picker.css
@@ -155,3 +155,32 @@
 	color: var(--text-muted);
 	padding: var(--size-4-2);
 }
+
+.icon-selection-field {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--size-4-2);
+}
+
+.icon-selection-field__column {
+	flex: 1;
+	min-width: 220px;
+}
+
+.icon-selection-field__label {
+	display: block;
+	font-size: var(--font-ui-smaller);
+	font-weight: var(--font-medium);
+	color: var(--text-muted);
+	margin-bottom: var(--size-2-1);
+}
+
+.icon-selection-field__emoji-input {
+	max-width: 260px;
+}
+
+.icon-selection-field__hint {
+	margin-top: var(--size-2-1);
+	font-size: var(--font-ui-smaller);
+	color: var(--text-muted);
+}

From ecb24412aae041fbc4d114ff2dc84a364875d29b Mon Sep 17 00:00:00 2001
From: Aleix Soler <aleixsoler64@gmail.com>
Date: Fri, 21 Nov 2025 09:30:10 +0100
Subject: [PATCH 7/8] fix: use either icon or lucideIcon

---
 components/FileExplorer/FileExplorerIcon.tsx  |    2 +
 components/SettingsUI/UISettings.tsx          |    4 +-
 components/StatusBar/StatusBar.tsx            |    2 +
 components/Toolbar/EditorToolbarButton.tsx    |    2 +
 constants/defaultSettings.ts                  |    1 +
 .../file-explorer-integration.tsx             |    2 +
 integrations/status-bar/status-bar.tsx        |    2 +
 .../toolbar/editorToolbarIntegration.tsx      |    2 +
 styles.css                                    | 1463 +----------------
 types/pluginSettings.ts                       |    1 +
 10 files changed, 17 insertions(+), 1464 deletions(-)

diff --git a/components/FileExplorer/FileExplorerIcon.tsx b/components/FileExplorer/FileExplorerIcon.tsx
index 01642df..1d750fe 100644
--- a/components/FileExplorer/FileExplorerIcon.tsx
+++ b/components/FileExplorer/FileExplorerIcon.tsx
@@ -9,6 +9,7 @@ type Props = {
 	hideUnknownStatus?: boolean;
 	unknownStatusConfig?: {
 		icon: string;
+		lucideIcon?: string;
 		color: string;
 	};
 	iconFrameMode?: "always" | "never";
@@ -47,6 +48,7 @@ export const FileExplorerIcon: FC<Props> = memo(
 			return (
 				<StatusIconPreview
 					icon={icon}
+					lucideIcon={unknownStatusConfig?.lucideIcon}
 					color={color}
 					iconColorMode={iconColorMode}
 					iconFrameMode={iconFrameMode}
diff --git a/components/SettingsUI/UISettings.tsx b/components/SettingsUI/UISettings.tsx
index c32b708..b886d9f 100644
--- a/components/SettingsUI/UISettings.tsx
+++ b/components/SettingsUI/UISettings.tsx
@@ -279,9 +279,9 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 					}
 					emojiPlaceholder="❓"
 					emojiHint="Type any emoji or text fallback."
-					lucideValue={settings.unknownStatusIcon}
+					lucideValue={settings.unknownStatusLucideIcon || ""}
 					onLucideChange={(value) =>
-						onChange("unknownStatusIcon", value)
+						onChange("unknownStatusLucideIcon", value)
 					}
 					lucidePlaceholder="Choose Lucide icon"
 					lucideHint="Matches the Obsidian toolbar style."
diff --git a/components/StatusBar/StatusBar.tsx b/components/StatusBar/StatusBar.tsx
index d59e421..2d38f90 100644
--- a/components/StatusBar/StatusBar.tsx
+++ b/components/StatusBar/StatusBar.tsx
@@ -18,6 +18,7 @@ export type Props = {
 		showIcon: boolean;
 		showText: boolean;
 		icon: string;
+		lucideIcon?: string;
 		color: string;
 	};
 };
@@ -54,6 +55,7 @@ export const StatusBar: FC<Props> = ({
 				{noStatusConfig.showIcon && (
 					<StatusIcon
 						icon={noStatusConfig.icon}
+						lucideIcon={noStatusConfig.lucideIcon}
 						size={14}
 						className="status-bar-no-status-icon"
 						style={{
diff --git a/components/Toolbar/EditorToolbarButton.tsx b/components/Toolbar/EditorToolbarButton.tsx
index d5d3a17..cff7cc1 100644
--- a/components/Toolbar/EditorToolbarButton.tsx
+++ b/components/Toolbar/EditorToolbarButton.tsx
@@ -8,6 +8,7 @@ interface EditorToolbarButtonProps {
 	onClick: () => void;
 	unknownStatusConfig: {
 		icon: string;
+		lucideIcon?: string;
 		color: string;
 	};
 }
@@ -43,6 +44,7 @@ export const EditorToolbarButton: FC<EditorToolbarButtonProps> = memo(
 				>
 					<StatusIcon
 						icon={unknownStatusConfig.icon}
+						lucideIcon={unknownStatusConfig.lucideIcon}
 						size={16}
 						className="editor-toolbar-button__icon"
 						style={{ color: unknownStatusConfig.color }}
diff --git a/constants/defaultSettings.ts b/constants/defaultSettings.ts
index 7df2ab2..4be5736 100644
--- a/constants/defaultSettings.ts
+++ b/constants/defaultSettings.ts
@@ -32,6 +32,7 @@ export const DEFAULT_PLUGIN_SETTINGS: PluginSettings = {
 	quickStatusCommands: ["active", "completed"], // Add default quick commands
 	// Unknown status customization
 	unknownStatusIcon: "❓",
+	unknownStatusLucideIcon: "",
 	unknownStatusColor: "#8b949e",
 	statusBarNoStatusText: "No status",
 	statusBarShowNoStatusIcon: false,
diff --git a/integrations/file-explorer/file-explorer-integration.tsx b/integrations/file-explorer/file-explorer-integration.tsx
index 23ff7d3..35e3469 100644
--- a/integrations/file-explorer/file-explorer-integration.tsx
+++ b/integrations/file-explorer/file-explorer-integration.tsx
@@ -59,6 +59,7 @@ export class FileExplorerIntegration implements IElementProcessor {
 					key === "fileExplorerIconFrame" ||
 					key === "fileExplorerIconColorMode" ||
 					key === "unknownStatusIcon" ||
+					key === "unknownStatusLucideIcon" ||
 					key === "unknownStatusColor" ||
 					key === "templates"
 				) {
@@ -117,6 +118,7 @@ export class FileExplorerIntegration implements IElementProcessor {
 		const settings = settingsService.settings;
 		return {
 			icon: settings.unknownStatusIcon || "❓",
+			lucideIcon: settings.unknownStatusLucideIcon || "",
 			color: settings.unknownStatusColor || "#8b949e",
 		};
 	}
diff --git a/integrations/status-bar/status-bar.tsx b/integrations/status-bar/status-bar.tsx
index 280851f..34c105e 100644
--- a/integrations/status-bar/status-bar.tsx
+++ b/integrations/status-bar/status-bar.tsx
@@ -62,6 +62,7 @@ export class StatusBarIntegration {
 				}
 				if (
 					key === "unknownStatusIcon" ||
+					key === "unknownStatusLucideIcon" ||
 					key === "unknownStatusColor" ||
 					key === "statusBarNoStatusText" ||
 					key === "statusBarShowNoStatusIcon" ||
@@ -123,6 +124,7 @@ export class StatusBarIntegration {
 			showIcon: settings.statusBarShowNoStatusIcon || false,
 			showText: settings.statusBarShowNoStatusText ?? true,
 			icon: settings.unknownStatusIcon || "❓",
+			lucideIcon: settings.unknownStatusLucideIcon || "",
 			color: settings.unknownStatusColor || "#8b949e",
 		};
 	}
diff --git a/integrations/toolbar/editorToolbarIntegration.tsx b/integrations/toolbar/editorToolbarIntegration.tsx
index 4e09f0a..ddb00b0 100644
--- a/integrations/toolbar/editorToolbarIntegration.tsx
+++ b/integrations/toolbar/editorToolbarIntegration.tsx
@@ -79,6 +79,7 @@ export class EditorToolbarIntegration {
 				}
 				if (
 					key === "unknownStatusIcon" ||
+					key === "unknownStatusLucideIcon" ||
 					key === "unknownStatusColor"
 				) {
 					this.renderAllButtons();
@@ -378,6 +379,7 @@ export class EditorToolbarIntegration {
 		const settings = settingsService.settings;
 		return {
 			icon: settings.unknownStatusIcon || "❓",
+			lucideIcon: settings.unknownStatusLucideIcon || "",
 			color: settings.unknownStatusColor || "#8b949e",
 		};
 	}
diff --git a/styles.css b/styles.css
index c48af68..1881677 100644
--- a/styles.css
+++ b/styles.css
@@ -1,1462 +1 @@
-/* styles/components/status-bar.css */
-.status-bar-item {
-}
-.status-bar-enable-button {
-  cursor: pointer;
-  opacity: var(--icon-opacity);
-  transition: opacity var(--anim-duration-fast) ease;
-}
-.status-bar-enable-button:hover {
-  opacity: var(--icon-opacity-hover);
-}
-.status-bar-group-row {
-  display: flex;
-  align-items: center;
-  gap: var(--size-4-2);
-}
-.status-bar-group-container {
-  display: flex;
-  gap: var(--size-2-1);
-  flex-wrap: wrap;
-  align-items: center;
-}
-@keyframes status-slide-in {
-  from {
-    opacity: 0;
-    transform: scale(0.8) translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-/* styles/components/settings.css */
-.setting-item-full {
-  width: 100%;
-}
-.setting-item-vertical {
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--size-2-2);
-}
-.custom-status-item {
-  background: var(--background-secondary);
-  border: 1px solid var(--background-modifier-border);
-  border-radius: var(--radius-m);
-  padding: var(--size-4-3);
-  margin-bottom: var(--size-4-2);
-  transition: all var(--anim-duration-fast) ease;
-}
-.custom-status-item:hover {
-  border-color: var(--interactive-hover);
-}
-.custom-status-item__row {
-  display: flex;
-  align-items: end;
-  gap: var(--size-4-2);
-  margin-bottom: var(--size-4-2);
-}
-.custom-status-item__field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--size-2-1);
-}
-.custom-status-item__field--name {
-  flex: 2;
-  min-width: 120px;
-}
-.custom-status-item__field--description {
-  flex: 2;
-  min-width: 120px;
-}
-.custom-status-item__field--color {
-  flex: 0 0 auto;
-}
-.custom-status-item__field--reorder {
-  flex: 0 0 auto;
-  padding-top: var(--size-4-1);
-}
-.custom-status-item__field--actions {
-  flex: 0 0 auto;
-  padding-top: var(--size-4-1);
-}
-.custom-status-item__label {
-  font-size: var(--font-ui-smaller);
-  font-weight: var(--font-medium);
-  color: var(--text-muted);
-  margin-bottom: var(--size-2-1);
-}
-.custom-status-item__label--required {
-  color: var(--text-error);
-}
-.custom-status-item__input {
-}
-.custom-status-item__input--icon {
-  width: 50px !important;
-  text-align: center;
-  font-size: 1.2em;
-}
-.custom-status-item__input--name {
-  font-weight: var(--font-medium);
-}
-.custom-status-item__input--name.custom-status-item__input--invalid {
-  border-color: var(--text-error) !important;
-  background: var(--background-modifier-error) !important;
-}
-.custom-status-item__input--description {
-  color: var(--text-muted);
-}
-.custom-status-item__input--color {
-  width: 40px !important;
-  height: 32px !important;
-  border-radius: var(--radius-s);
-  cursor: pointer;
-  border: 2px solid var(--background-modifier-border) !important;
-}
-.custom-status-item__input--color:hover {
-  border-color: var(--interactive-hover) !important;
-}
-.custom-status-item__remove-btn {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-s);
-  background: var(--background-modifier-error);
-  color: var(--text-on-accent);
-  border: none;
-  cursor: pointer;
-  font-size: 18px;
-  font-weight: bold;
-  transition: all var(--anim-duration-fast) ease;
-}
-.custom-status-item__remove-btn:hover {
-  background: var(--text-error);
-  transform: scale(1.05);
-}
-.custom-status-item__reorder-buttons {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-.custom-status-item__reorder-btn {
-  width: 24px;
-  height: 24px;
-  border-radius: var(--radius-s);
-  background: var(--background-modifier-border);
-  color: var(--text-normal);
-  border: none;
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: bold;
-  transition: all var(--anim-duration-fast) ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-}
-.custom-status-item__reorder-btn:hover:not(:disabled) {
-  background: var(--interactive-hover);
-  transform: scale(1.05);
-}
-.custom-status-item__reorder-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.custom-status-item__preview {
-  display: flex;
-  align-items: center;
-  gap: var(--size-2-2);
-  padding: var(--size-2-3) var(--size-4-2);
-  background: var(--background-primary-alt);
-  border-radius: var(--radius-s);
-  border-left: 3px solid var(--background-modifier-border);
-  font-size: var(--font-ui-small);
-}
-.custom-status-item__preview-icon {
-  font-size: 1.1em;
-  min-width: 20px;
-  text-align: center;
-}
-.custom-status-item__preview-text {
-  font-weight: var(--font-medium);
-}
-.custom-status-item__preview-desc {
-  color: var(--text-muted);
-  font-style: italic;
-}
-.custom-status-item__preview-desc::before {
-  content: "\2014  ";
-}
-.custom-status-item__error {
-  color: var(--text-error);
-  font-size: var(--font-ui-smaller);
-  margin-top: var(--size-2-1);
-  padding: var(--size-2-1) var(--size-2-2);
-  background: var(--background-modifier-error);
-  border-radius: var(--radius-s);
-  border-left: 3px solid var(--text-error);
-}
-.custom-status-list {
-}
-.custom-status-list__empty {
-  text-align: center;
-  padding: var(--size-4-4) var(--size-4-2);
-  color: var(--text-muted);
-  font-style: italic;
-  border: 2px dashed var(--background-modifier-border);
-  border-radius: var(--radius-m);
-  background: var(--background-primary-alt);
-}
-.custom-status-list__empty p {
-  margin: 0;
-}
-.status-group {
-  margin-bottom: var(--size-4-4);
-  padding: var(--size-4-3);
-  background: var(--background-primary-alt);
-  border-radius: var(--radius-m);
-  border: 1px solid var(--background-modifier-border);
-}
-.status-group__header {
-  margin-bottom: var(--size-4-2);
-  padding-bottom: var(--size-2-2);
-  border-bottom: 1px solid var(--background-modifier-border);
-}
-.status-group__title {
-  font-weight: var(--font-semibold);
-  color: var(--text-normal);
-  font-size: var(--font-ui-medium);
-}
-.status-group__description {
-  font-size: var(--font-ui-smaller);
-  color: var(--text-muted);
-  margin-top: var(--size-2-1);
-  line-height: var(--line-height-tight);
-}
-.status-group__items {
-  display: flex;
-  flex-direction: column;
-  gap: var(--size-2-2);
-}
-.status-selector {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--size-2-3) var(--size-4-2);
-  border: 1px solid var(--background-modifier-border);
-  border-radius: var(--radius-m);
-  background: var(--background-primary);
-  cursor: pointer;
-  transition: all var(--anim-duration-fast) ease;
-  position: relative;
-}
-.status-selector:hover {
-  background: var(--background-modifier-hover);
-  border-color: var(--background-modifier-border-hover);
-}
-.status-selector--selected {
-  background: var(--background-modifier-success);
-  border-color: var(--interactive-success);
-}
-.status-selector--selected:hover {
-  background: var(--background-modifier-success-hover);
-}
-.status-selector__content {
-  flex: 1;
-  min-width: 0;
-}
-.status-selector__status {
-  display: flex;
-  align-items: center;
-  gap: var(--size-2-2);
-  margin-bottom: var(--size-2-1);
-}
-.status-selector__icon {
-  font-size: var(--font-ui-medium);
-  width: var(--size-4-3);
-  text-align: center;
-  flex-shrink: 0;
-}
-.status-selector__name {
-  font-weight: var(--font-medium);
-  color: var(--text-normal);
-}
-.status-selector__description {
-  font-size: var(--font-ui-smaller);
-  color: var(--text-muted);
-  line-height: var(--line-height-tight);
-}
-.status-selector__checkbox {
-  margin-left: var(--size-4-2);
-  pointer-events: none;
-  flex-shrink: 0;
-}
-.quick-commands-container {
-  margin-top: var(--size-4-2);
-}
-.note-status-options {
-  max-height: 300px;
-  overflow-y: auto;
-  border: 1px solid var(--background-modifier-border);
-  border-radius: var(--radius-s);
-  background: var(--background-primary);
-}
-.note-status-option {
-  align-items: stretch;
-}
-.note-status-option .selectable-list-item-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.note-status-option__icon-wrapper {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--size-2-1);
-  border-radius: var(--radius-m);
-  border: 1px solid var(--background-modifier-border);
-  background: var(--background-secondary);
-  min-width: 36px;
-  transition: border-color var(--anim-duration-fast) ease, background var(--anim-duration-fast) ease;
-}
-.note-status-option:hover .note-status-option__icon-wrapper,
-.note-status-option.selectable-list-item[data-selected=true] .note-status-option__icon-wrapper {
-  border-color: var(--interactive-accent);
-  background: var(--background-modifier-hover);
-}
-.note-status-option__text {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-.note-status-option__name {
-  font-weight: var(--font-medium);
-  color: var(--text-normal);
-}
-.note-status-option__description {
-  font-size: var(--font-ui-smaller);
-  color: var(--text-muted);
-}
-.note-status-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--size-2-2);
-  min-height: 32px;
-  align-items: center;
-}
-.selectable-list-item {
-  display: flex;
-  align-items: center;
-  gap: var(--size-4-2);
-  padding: var(--size-2-3) var(--size-4-2);
-  cursor: pointer;
-  border-bottom: 1px solid var(--background-modifier-border);
-  transition: background var(--anim-duration-fast) ease;
-}
-.selectable-list-item:hover {
-  background: var(--background-modifier-hover);
-}
-.selectable-list-item[data-focused=true] {
-  outline: 2px solid var(--interactive-accent);
-  outline-offset: -2px;
-}
-.selectable-list-item[data-selected=true] {
-  background: var(--background-modifier-hover);
-}
-.selectable-list-item-icon {
-  font-size: 16px;
-  min-width: 20px;
-}
-.selectable-list-item-content {
-  flex: 1;
-  font-size: var(--font-ui-small);
-}
-.selectable-list-item-check {
-  color: var(--interactive-accent);
-}
-
-/* styles/components/template-settings.css */
-.template-settings-actions {
-  display: flex;
-  justify-content: end;
-  gap: var(--size-4-2);
-  padding-bottom: var(--size-4-2);
-}
-.template-create-btn {
-  display: flex;
-  align-items: center;
-  gap: var(--size-2-2);
-  padding: var(--size-2-3) var(--size-4-3);
-  font-weight: var(--font-medium);
-  font-size: var(--font-ui-medium);
-}
-.template-reset-btn {
-  display: flex;
-  align-items: center;
-  gap: var(--size-2-2);
-  padding: var(--size-2-3) var(--size-4-3);
-  background: var(--interactive-normal);
-  border: 1px solid var(--background-modifier-border);
-  border-radius: var(--radius-s);
-  color: var(--text-normal);
-  cursor: pointer;
-  font-size: var(--font-ui-medium);
-  transition: all var(--anim-duration-fast) ease;
-}
-.template-reset-btn:hover {
-  background: var(--interactive-hover);
-  color: var(--text-normal);
-}
-.template-section {
-  margin-bottom: var(--size-4-6);
-}
-.template-section-title {
-  display: flex;
-  align-items: center;
-  gap: var(--size-2-2);
-  font-size: var(--font-ui-large);
-  font-weight: var(--font-semibold);
-  color: var(--text-normal);
-  margin-bottom: var(--size-4-3);
-  padding-bottom: var(--size-2-2);
-  border-bottom: 2px solid var(--background-modifier-border);
-}
-.template-section-title .lucide {
-  opacity: 0.8;
-  color: var(--text-muted);
-}
-.template-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--size-4-2);
-}
-.template-item {
-  position: relative;
-  display: flex;
-  align-items: stretch;
-  border: 1px solid var(--background-modifier-border);
-  border-radius: var(--radius-m);
-  background: var(--background-primary-alt);
-  transition: all var(--anim-duration-fast) ease;
-  overflow: hidden;
-}
-.template-item:hover {
-  background: var(--background-modifier-hover);
-  border-color: var(--background-modifier-border-hover);
-  box-shadow: 0 2px 8px var(--shadow-color);
-}
-.template-item.enabled {
-  background: var(--background-modifier-hover);
-  border-color: var(--interactive-accent);
-  box-shadow: 0 0 0 1px var(--interactive-accent);
-}
-.template-item.enabled:hover {
-  box-shadow: 0 2px 8px var(--shadow-color), 0 0 0 1px var(--interactive-accent);
-}
-.template-item-content {
-  flex: 1;
-  border: none !important;
-  border-radius: 0 !important;
-  background: transparent !important;
-}
-.template-item-main {
-  flex: 1;
-}
-.template-header {
-  display: flex;
-  align-items: center;
-  gap: var(--size-2-2);
-  margin-bottom: var(--size-2-1);
-}
-.template-custom-badge {
-  display: flex;
-  align-items: center;
-  gap: var(--size-2-1);
-  padding: var(--size-2-1) var(--size-2-2);
-  background: var(--interactive-accent);
-  color: var(--text-on-accent);
-  font-size: var(--font-ui-smaller);
-  font-weight: var(--font-medium);
-  border-radius: var(--radius-s);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-.template-item-actions {
-  display: flex;
-  flex-direction: column;
-  padding: var(--size-4-2);
-  gap: var(--size-2-1);
-  background: var(--background-modifier-border);
-  border-left: 1px solid var(--background-modifier-border-hover);
-  min-width: 44px;
-  align-items: center;
-  justify-content: center;
-}
-.template-editor-modal {
-  background: var(--background-primary);
-  border: 1px solid var(--background-modifier-border);
-  border-radius: var(--radius-l);
-  box-shadow: var(--shadow-l);
-  max-width: 800px;
-  width: 100%;
-}
-.template-editor-modal__header {
-  padding: var(--size-4-4) var(--size-4-6);
-  background: var(--background-secondary);
-  border-bottom: 1px solid var(--background-modifier-border);
-  border-radius: var(--radius-l) var(--radius-l) 0 0;
-}
-.template-editor-modal__header h2 {
-  margin: 0;
-  font-size: var(--font-ui-larger);
-  font-weight: var(--font-bold);
-  color: var(--text-normal);
-}
-.template-editor-modal__content {
-  padding: var(--size-4-6);
-  max-height: 70vh;
-  overflow-y: auto;
-}
-.template-editor-statuses {
-  display: flex;
-  flex-direction: column;
-  gap: var(--size-4-3);
-}
-.template-editor-add-status {
-  display: flex;
-  align-items: center;
-  gap: var(--size-2-2);
-  align-self: flex-start;
-  margin-top: var(--size-4-2);
-}
-.template-editor-add-status .lucide {
-  width: 16px;
-  height: 16px;
-}
-.template-editor-modal__actions {
-  display: flex;
-  gap: var(--size-4-2);
-  justify-content: flex-end;
-  padding: var(--size-4-4) var(--size-4-6);
-  background: var(--background-secondary);
-  border-top: 1px solid var(--background-modifier-border);
-  border-radius: 0 0 var(--radius-l) var(--radius-l);
-}
-.template-editor-modal__actions button {
-  padding: var(--size-2-3) var(--size-4-4);
-  border-radius: var(--radius-m);
-  font-size: var(--font-ui-medium);
-  font-weight: var(--font-medium);
-  cursor: pointer;
-  transition: all var(--anim-duration-fast) ease;
-  border: 1px solid var(--background-modifier-border);
-}
-.template-editor-modal__actions button:not(.mod-cta) {
-  background: var(--interactive-normal);
-  color: var(--text-normal);
-}
-.template-editor-modal__actions button:not(.mod-cta):hover {
-  background: var(--interactive-hover);
-}
-.template-editor-modal__actions .mod-cta:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none;
-}
-.template-editor-modal__actions .mod-cta:disabled:hover {
-  transform: none;
-}
-@media (max-width: 768px) {
-  .template-settings-actions {
-    flex-direction: column;
-  }
-  .template-item {
-    flex-direction: column;
-  }
-  .template-item-actions {
-    flex-direction: row;
-    border-left: none;
-    border-top: 1px solid var(--background-modifier-border-hover);
-    min-width: unset;
-    padding: var(--size-2-3) var(--size-4-2);
-  }
-  .template-editor-modal {
-    margin: var(--size-4-2);
-    max-width: calc(100% - var(--size-4-4));
-  }
-}
-.template-editor-modal__content::-webkit-scrollbar {
-  width: var(--scrollbar-width);
-}
-.template-editor-modal__content::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-thumb-bg);
-  border-radius: var(--radius-s);
-}
-.template-editor-modal__content::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-active-bg);
-}
-
-/* styles/components/dashboard.css */
-.status-dashboard-view-container {
-  height: 100%;
-  overflow: hidden;
-}
-.status-dashboard {
-  background: var(--background-primary);
-}
-.status-dashboard-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--size-4-3) var(--size-4-4);
-  background: var(--background-secondary);
-  border-bottom: 1px solid var(--background-modifier-border);
-}
-.status-dashboard-title {
-  margin: 0;
-  font-size: var(--font-ui-larger);
-  font-weight: var(--font-bold);
-}
-.status-dashboard-refresh {
-  padding: var(--size-2-2) var(--size-2-3);
-  border: 1px solid var(--background-modifier-border);
-  border-radius: var(--radius-s);
-  background: var(--interactive-normal);
-  color: var(--text-normal);
-  cursor: pointer;
-  font-size: var(--font-ui-medium);
-  transition: all var(--anim-duration-fast) ease;
-}
-.status-dashboard-refresh:hover {
-  background: var(--interactive-hover);
-  transform: rotate(90deg);
-}
-.status-dashboard-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--size-4-3);
-  display: flex;
-  flex-direction: column;
-  gap: var(--size-4-4);
-}
-.status-dashboard-section {
-  background: var(--background-secondary);
-  border: 1px solid var(--background-modifier-border);
-  border-radius: var(--radius-m);
-  overflow: hidden;
-}
-.status-dashboard-section-header {
-  padding: var(--size-4-2) var(--size-4-3);
-  background: var(--background-modifier-hover);
-  border-bottom: 1px solid var(--background-modifier-border);
-}
-.status-dashboard-section-header h3 {
-  margin: 0;
-  font-size: var(--font-ui-large);
-  font-weight: var(--font-semibold);
-}
-.status-dashboard-current-note {
-  padding: var(--size-4-3);
-}
-.current-note-info {
-  margin-bottom: var(--size-4-3);
-  padding-bottom: var(--size-4-2);
-  border-bottom: 1px solid var(--background-modifier-border);
-}
-.current-note-name {
-  font-size: var(--font-ui-large);
-  font-weight: var(--font-semibold);
-  margin-bottom: var(--size-2-1);
-}
-.current-note-path {
-  font-size: var(--font-ui-small);
-  color: var(--text-muted);
-  font-family: var(--font-monospace);
-  margin-bottom: var(--size-2-1);
-}
-.current-note-modified {
-  font-size: var(--font-ui-smaller);
-  color: var(--text-faint);
-  font-style: italic;
-}
-.current-note-statuses {
-  display: flex;
-  flex-direction: column;
-  gap: var(--size-4-2);
-}
-.current-note-tag-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--size-2-2);
-}
-.current-note-status-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--size-2-2);
-}
-.current-note-no-status {
-  font-size: var(--font-ui-small);
-  color: var(--text-muted);
-  font-style: italic;
-  padding: var(--size-2-1) var(--size-2-3);
-  background: var(--background-modifier-border);
-  border-radius: var(--radius-s);
-}
-.current-note-empty {
-  text-align: center;
-  color: var(--text-muted);
-  font-style: italic;
-  padding: var(--size-4-4);
-}
-.vault-overview {
-  padding: var(--size-4-3);
-}
-.vault-stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: var(--size-4-2);
-}
-.vault-stat-card {
-  text-align: center;
-  padding: var(--size-4-2);
-  background: var(--background-primary);
-  border: 1px solid var(--background-modifier-border);
-  border-radius: var(--radius-m);
-  transition: all var(--anim-duration-fast) ease;
-}
-.vault-stat-card:hover {
-  background: var(--background-modifier-hover);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-s);
-}
-.vault-stat-number {
-  font-size: var(--font-ui-largest);
-  font-weight: var(--font-bold);
-  color: var(--interactive-accent);
-  margin-bottom: var(--size-2-1);
-}
-.vault-stat-label {
-  font-size: var(--font-ui-small);
-  color: var(--text-muted);
-  font-weight: var(--font-medium);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-.status-distribution {
-  padding: var(--size-4-3);
-}
-.status-chart {
-  display: flex;
-  flex-direction: column;
-  gap: var(--size-4-2);
-}
-.status-chart-item {
-  display: flex;
-  flex-direction: column;
-  gap: var(--size-2-1);
-}
-.status-chart-item--clickable {
-  cursor: pointer;
-  transition: all var(--anim-duration-fast) ease;
-  padding: var(--size-2-2);
-  border-radius: var(--radius-s);
-}
-.status-chart-item--clickable:hover {
-  background: var(--background-modifier-hover);
-  transform: translateY(-1px);
-}
-.status-chart-info {
-  display: flex;
-  align-items: center;
-  gap: var(--size-2-3);
-}
-.status-chart-count {
-  font-size: var(--font-ui-small);
-  color: var(--text-muted);
-  font-weight: var(--font-medium);
-}
-.status-chart-bar {
-  height: 8px;
-  background: var(--background-modifier-border);
-  border-radius: var(--radius-s);
-  overflow: hidden;
-}
-.status-chart-fill {
-  height: 100%;
-  transition: width var(--anim-duration-moderate) ease;
-}
-.status-distribution-empty {
-  text-align: center;
-  color: var(--text-muted);
-  font-style: italic;
-  padding: var(--size-4-4);
-}
-.quick-actions {
-  padding: var(--size-4-3);
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: var(--size-4-3);
-}
-.quick-actions-group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--size-2-2);
-}
-.quick-actions-group-title {
-  font-size: var(--font-ui-small);
-  font-weight: var(--font-semibold);
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  padding-bottom: var(--size-2-1);
-  border-bottom: 1px solid var(--background-modifier-border);
-  margin-bottom: var(--size-2-1);
-}
-.quick-action-btn {
-  width: 100%;
-  padding: var(--size-2-3) var(--size-4-2);
-  border: 1px solid var(--background-modifier-border);
-  border-radius: var(--radius-m);
-  background: var(--interactive-normal);
-  color: var(--text-normal);
-  cursor: pointer;
-  font-size: var(--font-ui-medium);
-  font-weight: var(--font-medium);
-  text-align: left;
-  display: flex;
-  align-items: center;
-  gap: var(--size-2-2);
-  transition: all var(--anim-duration-fast) ease;
-}
-.quick-action-btn:hover:not(:disabled) {
-  background: var(--interactive-hover);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-s);
-}
-.quick-action-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  background: var(--background-modifier-border);
-  color: var(--text-faint);
-}
-@media (max-width: 768px) {
-  .quick-actions {
-    grid-template-columns: 1fr;
-  }
-}
-.status-dashboard-loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  font-size: var(--font-ui-medium);
-  color: var(--text-muted);
-}
-.status-dashboard-disabled {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: var(--size-4-4);
-  text-align: center;
-  font-size: var(--font-ui-medium);
-  color: var(--text-muted);
-  background: var(--background-secondary);
-  border: 2px dashed var(--background-modifier-border);
-  border-radius: var(--radius-m);
-  margin: var(--size-4-4);
-}
-.status-dashboard-content::-webkit-scrollbar {
-  width: var(--scrollbar-width);
-}
-.status-dashboard-content::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-thumb-bg);
-  border-radius: var(--radius-s);
-}
-.status-dashboard-content::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-active-bg);
-}
-
-/* styles/components/grouped-view.css */
-.grouped-status-view-container {
-  height: 100%;
-  overflow: hidden;
-}
-.grouped-status-header {
-  padding: var(--size-4-2) var(--size-4-3);
-  background: var(--background-secondary);
-  border-bottom: 1px solid var(--background-modifier-border);
-}
-.grouped-status-title {
-  margin: 0 0 var(--size-4-2) 0;
-  font-size: var(--font-ui-large);
-  font-weight: var(--font-semibold);
-}
-.grouped-status-filters {
-  display: flex;
-  flex-direction: column;
-  gap: var(--size-4-2);
-}
-.grouped-status-note-input {
-  width: 100%;
-  padding: var(--size-2-2) var(--size-2-3);
-  border: 1px solid var(--background-modifier-border);
-  border-radius: var(--radius-s);
-  background: var(--background-primary);
-  color: var(--text-normal);
-  font-size: var(--font-ui-medium);
-}
-.grouped-status-note-input:focus {
-  outline: none;
-  border-color: var(--interactive-accent);
-  box-shadow: 0 0 0 2px var(--background-modifier-accent);
-}
-.grouped-status-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--size-4-2);
-}
-.grouped-status-tag-section {
-  margin-bottom: var(--size-4-3);
-}
-.grouped-status-tag-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--size-4-2) var(--size-4-3);
-  background: var(--background-secondary);
-  border: 1px solid var(--background-modifier-border);
-  border-radius: var(--radius-m);
-  cursor: pointer;
-  transition: all var(--anim-duration-fast) ease;
-  margin-bottom: var(--size-4-2);
-}
-.grouped-status-tag-header:hover {
-  background: var(--background-modifier-hover);
-}
-.grouped-status-tag-content {
-  padding-left: var(--size-4-2);
-}
-.grouped-status-group {
-  margin-bottom: var(--size-4-2);
-  background: var(--background-primary);
-  border: 1px solid var(--background-modifier-border);
-  border-radius: var(--radius-m);
-  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-  transition: box-shadow var(--anim-duration-fast) ease;
-}
-.grouped-status-group:hover {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-.grouped-status-group__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--size-4-2) var(--size-4-3);
-  cursor: pointer;
-  transition: background var(--anim-duration-fast) ease;
-  position: relative;
-}
-.grouped-status-group__header:hover {
-  background: var(--background-modifier-hover);
-}
-.grouped-status-group__header:focus {
-  outline: 2px solid var(--color-accent);
-  outline-offset: -2px;
-}
-.grouped-status-group__status {
-  display: flex;
-  align-items: center;
-  gap: var(--size-2-2);
-  min-width: 0;
-  flex: 1;
-}
-.grouped-status-group__template-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: var(--size-2-1) var(--size-2-2);
-  background: var(--background-modifier-border);
-  border-radius: var(--radius-s);
-  font-size: var(--font-ui-smaller);
-  color: var(--text-muted);
-  font-weight: var(--font-medium);
-}
-.grouped-status-group__info {
-  display: flex;
-  align-items: center;
-  gap: var(--size-2-2);
-  margin-left: auto;
-}
-.grouped-status-files {
-  background: var(--background-secondary);
-  border-top: 1px solid var(--background-modifier-border);
-}
-.grouped-status-files-list {
-  max-height: 300px;
-  overflow-y: auto;
-}
-.grouped-status-file-item {
-  padding: var(--size-2-3) var(--size-4-3);
-  cursor: pointer;
-  transition: background var(--anim-duration-fast) ease;
-  border-bottom: 1px solid var(--background-modifier-border-hover);
-}
-.grouped-status-file-item:hover {
-  background: var(--background-modifier-hover);
-}
-.grouped-status-file-item:last-child {
-  border-bottom: none;
-}
-.grouped-status-file-name {
-  font-weight: var(--font-medium);
-  color: var(--text-normal);
-  margin-bottom: 2px;
-}
-.grouped-status-file-path {
-  font-size: var(--font-ui-small);
-  color: var(--text-muted);
-  opacity: 0.8;
-}
-.grouped-status-load-more {
-  display: flex;
-  justify-content: center;
-  padding: var(--size-4-2);
-  border-top: 1px solid var(--background-modifier-border);
-}
-.grouped-status-load-btn {
-  padding: var(--size-2-2) var(--size-4-2);
-  border: 1px solid var(--background-modifier-border);
-  border-radius: var(--radius-s);
-  background: var(--interactive-normal);
-  color: var(--text-normal);
-  cursor: pointer;
-  font-size: var(--font-ui-small);
-  font-weight: var(--font-medium);
-  transition: all var(--anim-duration-fast) ease;
-}
-.grouped-status-load-btn:hover {
-  background: var(--interactive-hover);
-  transform: translateY(-1px);
-}
-.grouped-status-loading,
-.grouped-status-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--size-4-6);
-  color: var(--text-muted);
-  font-size: var(--font-ui-medium);
-}
-.grouped-status-view-disabled {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: var(--size-4-4);
-  text-align: center;
-  font-size: var(--font-ui-medium);
-  color: var(--text-muted);
-  background: var(--background-secondary);
-  border: 2px dashed var(--background-modifier-border);
-  border-radius: var(--radius-m);
-  margin: var(--size-4-4);
-}
-.grouped-status-content::-webkit-scrollbar,
-.grouped-status-files-list::-webkit-scrollbar {
-  width: var(--scrollbar-width);
-}
-.grouped-status-content::-webkit-scrollbar-thumb,
-.grouped-status-files-list::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-thumb-bg);
-  border-radius: var(--radius-s);
-}
-.grouped-status-content::-webkit-scrollbar-thumb:hover,
-.grouped-status-files-list::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-active-bg);
-}
-.grouped-status-filters__template {
-  display: flex;
-  flex-direction: column;
-  gap: var(--size-2-1);
-}
-.grouped-status-filters__template-select {
-  width: 100%;
-  padding: var(--size-2-2) var(--size-2-3);
-  border: 1px solid var(--background-modifier-border);
-  border-radius: var(--radius-s);
-  background: var(--background-primary);
-  color: var(--text-normal);
-  font-size: var(--font-ui-small);
-  cursor: pointer;
-}
-.grouped-status-filters__template-select:focus {
-  outline: none;
-  border-color: var(--interactive-accent);
-  box-shadow: 0 0 0 2px var(--background-modifier-accent);
-}
-.grouped-status-filters__note {
-  display: flex;
-  flex-direction: column;
-  gap: var(--size-2-1);
-}
-.grouped-status-filters__note-input {
-  width: 100%;
-  padding: var(--size-2-2) var(--size-2-3);
-  border: 1px solid var(--background-modifier-border);
-  border-radius: var(--radius-s);
-  background: var(--background-primary);
-  color: var(--text-normal);
-  font-size: var(--font-ui-small);
-}
-.grouped-status-filters__note-input:focus {
-  outline: none;
-  border-color: var(--interactive-accent);
-  box-shadow: 0 0 0 2px var(--background-modifier-accent);
-}
-.grouped-status-group__status {
-  display: flex;
-  align-items: center;
-  gap: var(--size-2-2);
-}
-.grouped-status-group__template-badge {
-  background: var(--background-modifier-border);
-  color: var(--text-muted);
-  padding: var(--size-2-1) var(--size-2-2);
-  border-radius: var(--radius-s);
-  font-size: var(--font-ui-smaller);
-  font-weight: var(--font-medium);
-  text-transform: capitalize;
-  white-space: nowrap;
-}
-
-/* styles/components/file-explorer.css */
-.custom-icon {
-  display: inline-flex;
-}
-.custom-icon__absolute-right {
-  position: absolute;
-  right: 0;
-}
-.status-wrapper {
-  position: relative;
-  display: inline-block;
-}
-.status-minimal {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  margin-left: var(--size-2-2);
-  padding: 2px;
-  border-radius: var(--radius-s);
-  cursor: pointer;
-  opacity: 0.7;
-  transition: all var(--anim-duration-fast) ease;
-}
-.status-minimal:hover {
-  opacity: 1;
-  background: var(--background-modifier-hover);
-  transform: scale(1.05);
-}
-.status-minimal--compact {
-  margin-left: 0;
-  padding: 0;
-  background: transparent;
-  gap: var(--size-2-1);
-}
-.status-minimal--compact .status-minimal__icon {
-  font-size: var(--font-ui-medium);
-}
-.status-minimal[data-status-color] .status-minimal__count {
-  background: var(--interactive-accent);
-}
-.status-minimal__icon {
-  font-size: 11px;
-  line-height: 1;
-  filter: grayscale(0.2);
-  transition: filter var(--anim-duration-fast) ease;
-}
-.status-minimal:hover .status-minimal__icon {
-  filter: grayscale(0);
-}
-.status-minimal__count {
-  min-width: 14px;
-  height: 14px;
-  padding: 0 3px;
-  background: var(--interactive-accent);
-  color: var(--text-on-accent);
-  font-size: var(--font-ui-smaller);
-  font-weight: var(--font-semibold);
-  border-radius: var(--radius-m);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.status-info-popup {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: var(--layer-popover);
-  background: var(--background-primary);
-  border: 1px solid var(--background-modifier-border);
-  border-radius: var(--radius-m);
-  box-shadow: var(--shadow-l);
-  min-width: 280px;
-  max-width: 400px;
-  overflow: hidden;
-  pointer-events: none;
-}
-.status-popup-header {
-  display: flex;
-  align-items: center;
-  gap: var(--size-2-2);
-  padding: var(--size-4-2) var(--size-4-3);
-  background: var(--background-secondary);
-  border-bottom: 1px solid var(--background-modifier-border);
-  font-weight: var(--font-semibold);
-  font-size: var(--font-ui-small);
-}
-.status-popup-content {
-  padding: var(--size-4-2);
-}
-.status-popup-empty {
-  padding: var(--size-4-4);
-  text-align: center;
-  color: var(--text-muted);
-  font-style: italic;
-}
-.status-group {
-  margin-bottom: var(--size-4-2);
-}
-.status-group:last-child {
-  margin-bottom: 0;
-}
-.status-group__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--size-2-2) var(--size-2-3);
-  background: var(--background-secondary-alt);
-  border-radius: var(--radius-s);
-  margin-bottom: var(--size-2-2);
-  border: 1px solid var(--background-modifier-border);
-  transition: background var(--anim-duration-fast) ease;
-}
-.status-group__header:hover {
-  background: var(--background-modifier-hover);
-}
-.status-group__name {
-  text-transform: capitalize;
-  font-weight: var(--font-medium);
-  font-size: var(--font-ui-smaller);
-  color: var(--text-normal);
-}
-.status-group__count {
-  display: inline-flex;
-  align-items: center;
-  padding: var(--size-2-1) var(--size-2-2);
-  background: var(--background-modifier-border);
-  border-radius: var(--radius-s);
-  font-size: var(--font-ui-smaller);
-  color: var(--text-muted);
-  font-weight: var(--font-medium);
-  min-width: 20px;
-  justify-content: center;
-}
-.status-group__items {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-  gap: var(--size-2-2);
-  padding: 0 var(--size-2-1);
-}
-.status-item {
-  display: flex;
-  flex-direction: column;
-  gap: var(--size-2-1);
-  padding: var(--size-2-2);
-  background: var(--background-primary-alt);
-  border: 1px solid var(--background-modifier-border);
-  border-radius: var(--radius-s);
-}
-.status-description {
-  font-size: var(--font-ui-smaller);
-  color: var(--text-muted);
-  line-height: 1.4;
-}
-
-/* styles/components/group-label.css */
-.group-label-container {
-  display: flex;
-  align-items: center;
-  gap: var(--size-2-2);
-  font-size: var(--font-ui-small);
-  font-weight: var(--font-semibold);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-muted);
-  transition: color var(--anim-duration-fast) ease;
-}
-.group-label-container--highlighted {
-  color: var(--text-normal);
-}
-.group-label-container svg {
-  width: 16px;
-  height: 16px;
-  opacity: 0.8;
-}
-
-/* styles/components/collapsible-counter.css */
-.collapsible-counter-container {
-  padding: var(--size-2-1) var(--size-2-3);
-  border-radius: var(--radius-s);
-  background: var(--background-modifier-border);
-  border: 1px solid var(--background-modifier-border-hover);
-  color: var(--text-muted);
-  font-weight: var(--font-medium);
-  font-size: var(--font-ui-smaller);
-  cursor: pointer;
-  transition: all var(--anim-duration-fast) ease;
-  min-width: 28px;
-  text-align: center;
-}
-.collapsible-counter-container:hover {
-  background: var(--background-modifier-border-hover);
-  color: var(--text-normal);
-}
-
-/* styles/components/status-display.css */
-.note-status-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--size-2-2);
-  padding: var(--size-2-1) var(--size-2-3);
-  background: var(--interactive-accent);
-  color: var(--text-on-accent);
-  border-radius: var(--radius-s);
-  font-size: var(--font-ui-smaller);
-  cursor: pointer;
-  transition: all var(--anim-duration-fast) ease;
-}
-.note-status-chip:hover {
-  opacity: 0.9;
-  transform: translateY(-1px);
-}
-.note-status-chip--removing {
-  opacity: 0.5;
-  transform: scale(0.95);
-}
-.note-status-chip__icon {
-  font-size: 1em;
-}
-.note-status-chip__text {
-  font-weight: var(--font-medium);
-}
-.note-status-chip__remove {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.2);
-  cursor: pointer;
-  margin-left: var(--size-2-1);
-}
-.note-status-chip__remove:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-.status-badge-container {
-  display: inline-flex;
-  align-items: center;
-  padding: var(--size-2-1) var(--size-2-3);
-  border-radius: var(--radius-s);
-  transition: all var(--anim-duration-fast) ease;
-  cursor: pointer;
-}
-.status-badge-item {
-  display: flex;
-  align-items: center;
-  gap: var(--size-2-1);
-}
-.status-badge-icon {
-  font-size: var(--font-ui-small);
-}
-.status-badge-text {
-  font-weight: var(--font-medium);
-  font-size: var(--font-ui-small);
-}
-.template-status-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--size-2-1);
-  padding: var(--size-2-1) var(--size-2-3);
-  background: var(--background-secondary);
-  border: 1px solid var(--background-modifier-border);
-  border-radius: var(--radius-m);
-  font-size: var(--font-ui-smaller);
-}
-.template-status-color-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: var(--dot-color);
-}
-
-/* styles/components/obsidian-icon.css */
-.obsidian-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.obsidian-icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-/* styles/components/toolbar-button.css */
-.note-status-editor-toolbar-badge {
-  display: inline-flex;
-  align-items: center;
-  margin: 0 var(--size-2-1);
-}
-.note-status-editor-toolbar-badge--hidden {
-  display: none;
-}
-.editor-toolbar-button__icon {
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-muted);
-}
-.editor-toolbar-button__icon--has-status {
-  color: var(--interactive-accent);
-}
-.editor-toolbar-button__icon-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.editor-toolbar-button__counter {
-  position: absolute;
-  top: -4px;
-  right: -6px;
-  min-width: 12px;
-  height: 12px;
-  padding: 0 2px;
-  background: var(--interactive-accent);
-  color: var(--text-on-accent);
-  font-size: 8px;
-  font-weight: var(--font-semibold);
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-  border: 1px solid var(--background-primary);
-}
-
-/* styles/index.css */
+.status-bar-enable-button{cursor:pointer;opacity:var(--icon-opacity);transition:opacity var(--anim-duration-fast) ease}.status-bar-enable-button:hover{opacity:var(--icon-opacity-hover)}.status-bar-group-row{display:flex;align-items:center;gap:var(--size-4-2)}.status-bar-group-container{display:flex;gap:var(--size-2-1);flex-wrap:wrap;align-items:center}@keyframes status-slide-in{0%{opacity:0;transform:scale(.8) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}.setting-item-full{width:100%}.setting-item-vertical{flex-direction:column;align-items:flex-start;gap:var(--size-2-2)}.custom-status-item{background:var(--background-secondary);border:1px solid var(--background-modifier-border);border-radius:var(--radius-m);padding:var(--size-4-3);margin-bottom:var(--size-4-2);transition:all var(--anim-duration-fast) ease}.custom-status-item:hover{border-color:var(--interactive-hover)}.custom-status-item__row{display:flex;align-items:end;gap:var(--size-4-2);margin-bottom:var(--size-4-2)}.custom-status-item__row--icons{align-items:stretch;flex-wrap:wrap}.custom-status-item__field{display:flex;flex-direction:column;gap:var(--size-2-1)}.custom-status-item__field--icon,.custom-status-item__field--lucide{flex:1;min-width:240px}.custom-status-item__field--name,.custom-status-item__field--description{flex:2;min-width:120px}.custom-status-item__field--color{flex:0 0 auto}.custom-status-item__field--reorder,.custom-status-item__field--actions{flex:0 0 auto;padding-top:var(--size-4-1)}.custom-status-item__label{font-size:var(--font-ui-smaller);font-weight:var(--font-medium);color:var(--text-muted);margin-bottom:var(--size-2-1)}.custom-status-item__label--required{color:var(--text-error)}.custom-status-item__input--icon{width:100%!important;text-align:left;font-size:1em}.custom-status-item__hint{margin:0;font-size:var(--font-ui-smaller);color:var(--text-muted)}.custom-status-item__input--name{font-weight:var(--font-medium)}.custom-status-item__input--name.custom-status-item__input--invalid{border-color:var(--text-error)!important;background:var(--background-modifier-error)!important}.custom-status-item__input--description{color:var(--text-muted)}.custom-status-item__input--color{width:40px!important;height:32px!important;border-radius:var(--radius-s);cursor:pointer;border:2px solid var(--background-modifier-border)!important}.custom-status-item__input--color:hover{border-color:var(--interactive-hover)!important}.custom-status-item__remove-btn{width:32px;height:32px;border-radius:var(--radius-s);background:var(--background-modifier-error);color:var(--text-on-accent);border:none;cursor:pointer;font-size:18px;font-weight:700;transition:all var(--anim-duration-fast) ease}.custom-status-item__remove-btn:hover{background:var(--text-error);transform:scale(1.05)}.custom-status-item__reorder-buttons{display:flex;flex-direction:column;gap:2px}.custom-status-item__reorder-btn{width:24px;height:24px;border-radius:var(--radius-s);background:var(--background-modifier-border);color:var(--text-normal);border:none;cursor:pointer;font-size:12px;font-weight:700;transition:all var(--anim-duration-fast) ease;display:flex;align-items:center;justify-content:center;line-height:1}.custom-status-item__reorder-btn:hover:not(:disabled){background:var(--interactive-hover);transform:scale(1.05)}.custom-status-item__reorder-btn:disabled{opacity:.5;cursor:not-allowed}.custom-status-item__preview{display:flex;align-items:center;gap:var(--size-2-2);padding:var(--size-2-3) var(--size-4-2);background:var(--background-primary-alt);border-radius:var(--radius-s);border-left:3px solid var(--background-modifier-border);font-size:var(--font-ui-small)}.custom-status-item__preview-icon{font-size:1.1em;min-width:20px;text-align:center}.custom-status-item__preview-text{font-weight:var(--font-medium)}.custom-status-item__preview-desc{color:var(--text-muted);font-style:italic}.custom-status-item__preview-desc:before{content:"\2014  "}.custom-status-item__error{color:var(--text-error);font-size:var(--font-ui-smaller);margin-top:var(--size-2-1);padding:var(--size-2-1) var(--size-2-2);background:var(--background-modifier-error);border-radius:var(--radius-s);border-left:3px solid var(--text-error)}.custom-status-list__empty{text-align:center;padding:var(--size-4-4) var(--size-4-2);color:var(--text-muted);font-style:italic;border:2px dashed var(--background-modifier-border);border-radius:var(--radius-m);background:var(--background-primary-alt)}.custom-status-list__empty p{margin:0}.status-group{margin-bottom:var(--size-4-4);padding:var(--size-4-3);background:var(--background-primary-alt);border-radius:var(--radius-m);border:1px solid var(--background-modifier-border)}.status-group__header{margin-bottom:var(--size-4-2);padding-bottom:var(--size-2-2);border-bottom:1px solid var(--background-modifier-border)}.status-group__title{font-weight:var(--font-semibold);color:var(--text-normal);font-size:var(--font-ui-medium)}.status-group__description{font-size:var(--font-ui-smaller);color:var(--text-muted);margin-top:var(--size-2-1);line-height:var(--line-height-tight)}.status-group__items{display:flex;flex-direction:column;gap:var(--size-2-2)}.status-selector{display:flex;align-items:center;justify-content:space-between;padding:var(--size-2-3) var(--size-4-2);border:1px solid var(--background-modifier-border);border-radius:var(--radius-m);background:var(--background-primary);cursor:pointer;transition:all var(--anim-duration-fast) ease;position:relative}.status-selector:hover{background:var(--background-modifier-hover);border-color:var(--background-modifier-border-hover)}.status-selector--selected{background:var(--background-modifier-success);border-color:var(--interactive-success)}.status-selector--selected:hover{background:var(--background-modifier-success-hover)}.status-selector__content{flex:1;min-width:0}.status-selector__status{display:flex;align-items:center;gap:var(--size-2-2);margin-bottom:var(--size-2-1)}.status-selector__icon{font-size:var(--font-ui-medium);width:var(--size-4-3);text-align:center;flex-shrink:0}.status-selector__name{font-weight:var(--font-medium);color:var(--text-normal)}.status-selector__description{font-size:var(--font-ui-smaller);color:var(--text-muted);line-height:var(--line-height-tight)}.status-selector__checkbox{margin-left:var(--size-4-2);pointer-events:none;flex-shrink:0}.quick-commands-container{margin-top:var(--size-4-2)}.note-status-options{max-height:300px;overflow-y:auto;border:1px solid var(--background-modifier-border);border-radius:var(--radius-s);background:var(--background-primary)}.note-status-option{align-items:stretch}.note-status-option .selectable-list-item-icon{display:flex;align-items:center;justify-content:center}.note-status-option__icon-wrapper{display:inline-flex;align-items:center;justify-content:center;padding:var(--size-2-1);border-radius:var(--radius-m);border:1px solid var(--background-modifier-border);background:var(--background-secondary);min-width:36px;transition:border-color var(--anim-duration-fast) ease,background var(--anim-duration-fast) ease}.note-status-option:hover .note-status-option__icon-wrapper,.note-status-option.selectable-list-item[data-selected=true] .note-status-option__icon-wrapper{border-color:var(--interactive-accent);background:var(--background-modifier-hover)}.note-status-option__text{display:flex;flex-direction:column;gap:2px}.note-status-option__name{font-weight:var(--font-medium);color:var(--text-normal)}.note-status-option__description{font-size:var(--font-ui-smaller);color:var(--text-muted)}.note-status-chips{display:flex;flex-wrap:wrap;gap:var(--size-2-2);min-height:32px;align-items:center}.selectable-list-item{display:flex;align-items:center;gap:var(--size-4-2);padding:var(--size-2-3) var(--size-4-2);cursor:pointer;border-bottom:1px solid var(--background-modifier-border);transition:background var(--anim-duration-fast) ease}.selectable-list-item:hover{background:var(--background-modifier-hover)}.selectable-list-item[data-focused=true]{outline:2px solid var(--interactive-accent);outline-offset:-2px}.selectable-list-item[data-selected=true]{background:var(--background-modifier-hover)}.selectable-list-item-icon{font-size:16px;min-width:20px}.selectable-list-item-content{flex:1;font-size:var(--font-ui-small)}.selectable-list-item-check{color:var(--interactive-accent)}.template-settings-actions{display:flex;justify-content:end;gap:var(--size-4-2);padding-bottom:var(--size-4-2)}.template-create-btn{display:flex;align-items:center;gap:var(--size-2-2);padding:var(--size-2-3) var(--size-4-3);font-weight:var(--font-medium);font-size:var(--font-ui-medium)}.template-reset-btn{display:flex;align-items:center;gap:var(--size-2-2);padding:var(--size-2-3) var(--size-4-3);background:var(--interactive-normal);border:1px solid var(--background-modifier-border);border-radius:var(--radius-s);color:var(--text-normal);cursor:pointer;font-size:var(--font-ui-medium);transition:all var(--anim-duration-fast) ease}.template-reset-btn:hover{background:var(--interactive-hover);color:var(--text-normal)}.template-section{margin-bottom:var(--size-4-6)}.template-section-title{display:flex;align-items:center;gap:var(--size-2-2);font-size:var(--font-ui-large);font-weight:var(--font-semibold);color:var(--text-normal);margin-bottom:var(--size-4-3);padding-bottom:var(--size-2-2);border-bottom:2px solid var(--background-modifier-border)}.template-section-title .lucide{opacity:.8;color:var(--text-muted)}.template-list{display:flex;flex-direction:column;gap:var(--size-4-2)}.template-item{position:relative;display:flex;align-items:stretch;border:1px solid var(--background-modifier-border);border-radius:var(--radius-m);background:var(--background-primary-alt);transition:all var(--anim-duration-fast) ease;overflow:hidden}.template-item:hover{background:var(--background-modifier-hover);border-color:var(--background-modifier-border-hover);box-shadow:0 2px 8px var(--shadow-color)}.template-item.enabled{background:var(--background-modifier-hover);border-color:var(--interactive-accent);box-shadow:0 0 0 1px var(--interactive-accent)}.template-item.enabled:hover{box-shadow:0 2px 8px var(--shadow-color),0 0 0 1px var(--interactive-accent)}.template-item-content{flex:1;border:none!important;border-radius:0!important;background:transparent!important}.template-item-main{flex:1}.template-header{display:flex;align-items:center;gap:var(--size-2-2);margin-bottom:var(--size-2-1)}.template-custom-badge{display:flex;align-items:center;gap:var(--size-2-1);padding:var(--size-2-1) var(--size-2-2);background:var(--interactive-accent);color:var(--text-on-accent);font-size:var(--font-ui-smaller);font-weight:var(--font-medium);border-radius:var(--radius-s);text-transform:uppercase;letter-spacing:.05em}.template-item-actions{display:flex;flex-direction:column;padding:var(--size-4-2);gap:var(--size-2-1);background:var(--background-modifier-border);border-left:1px solid var(--background-modifier-border-hover);min-width:44px;align-items:center;justify-content:center}.template-editor-modal{background:var(--background-primary);border:1px solid var(--background-modifier-border);border-radius:var(--radius-l);box-shadow:var(--shadow-l);max-width:800px;width:100%}.template-editor-modal__header{padding:var(--size-4-4) var(--size-4-6);background:var(--background-secondary);border-bottom:1px solid var(--background-modifier-border);border-radius:var(--radius-l) var(--radius-l) 0 0}.template-editor-modal__header h2{margin:0;font-size:var(--font-ui-larger);font-weight:var(--font-bold);color:var(--text-normal)}.template-editor-modal__content{padding:var(--size-4-6);max-height:70vh;overflow-y:auto}.template-editor-statuses{display:flex;flex-direction:column;gap:var(--size-4-3)}.template-editor-add-status{display:flex;align-items:center;gap:var(--size-2-2);align-self:flex-start;margin-top:var(--size-4-2)}.template-editor-add-status .lucide{width:16px;height:16px}.template-editor-modal__actions{display:flex;gap:var(--size-4-2);justify-content:flex-end;padding:var(--size-4-4) var(--size-4-6);background:var(--background-secondary);border-top:1px solid var(--background-modifier-border);border-radius:0 0 var(--radius-l) var(--radius-l)}.template-editor-modal__actions button{padding:var(--size-2-3) var(--size-4-4);border-radius:var(--radius-m);font-size:var(--font-ui-medium);font-weight:var(--font-medium);cursor:pointer;transition:all var(--anim-duration-fast) ease;border:1px solid var(--background-modifier-border)}.template-editor-modal__actions button:not(.mod-cta){background:var(--interactive-normal);color:var(--text-normal)}.template-editor-modal__actions button:not(.mod-cta):hover{background:var(--interactive-hover)}.template-editor-modal__actions .mod-cta:disabled{opacity:.5;cursor:not-allowed;transform:none}.template-editor-modal__actions .mod-cta:disabled:hover{transform:none}@media (max-width: 768px){.template-settings-actions,.template-item{flex-direction:column}.template-item-actions{flex-direction:row;border-left:none;border-top:1px solid var(--background-modifier-border-hover);min-width:unset;padding:var(--size-2-3) var(--size-4-2)}.template-editor-modal{margin:var(--size-4-2);max-width:calc(100% - var(--size-4-4))}}.template-editor-modal__content::-webkit-scrollbar{width:var(--scrollbar-width)}.template-editor-modal__content::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-bg);border-radius:var(--radius-s)}.template-editor-modal__content::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-active-bg)}.status-dashboard-view-container{height:100%;overflow:hidden}.status-dashboard{background:var(--background-primary)}.status-dashboard-header{display:flex;justify-content:space-between;align-items:center;padding:var(--size-4-3) var(--size-4-4);background:var(--background-secondary);border-bottom:1px solid var(--background-modifier-border)}.status-dashboard-title{margin:0;font-size:var(--font-ui-larger);font-weight:var(--font-bold)}.status-dashboard-refresh{padding:var(--size-2-2) var(--size-2-3);border:1px solid var(--background-modifier-border);border-radius:var(--radius-s);background:var(--interactive-normal);color:var(--text-normal);cursor:pointer;font-size:var(--font-ui-medium);transition:all var(--anim-duration-fast) ease}.status-dashboard-refresh:hover{background:var(--interactive-hover);transform:rotate(90deg)}.status-dashboard-content{flex:1;overflow-y:auto;padding:var(--size-4-3);display:flex;flex-direction:column;gap:var(--size-4-4)}.status-dashboard-section{background:var(--background-secondary);border:1px solid var(--background-modifier-border);border-radius:var(--radius-m);overflow:hidden}.status-dashboard-section-header{padding:var(--size-4-2) var(--size-4-3);background:var(--background-modifier-hover);border-bottom:1px solid var(--background-modifier-border)}.status-dashboard-section-header h3{margin:0;font-size:var(--font-ui-large);font-weight:var(--font-semibold)}.status-dashboard-current-note{padding:var(--size-4-3)}.current-note-info{margin-bottom:var(--size-4-3);padding-bottom:var(--size-4-2);border-bottom:1px solid var(--background-modifier-border)}.current-note-name{font-size:var(--font-ui-large);font-weight:var(--font-semibold);margin-bottom:var(--size-2-1)}.current-note-path{font-size:var(--font-ui-small);color:var(--text-muted);font-family:var(--font-monospace);margin-bottom:var(--size-2-1)}.current-note-modified{font-size:var(--font-ui-smaller);color:var(--text-faint);font-style:italic}.current-note-statuses{display:flex;flex-direction:column;gap:var(--size-4-2)}.current-note-tag-group{display:flex;flex-direction:column;gap:var(--size-2-2)}.current-note-status-list{display:flex;flex-wrap:wrap;gap:var(--size-2-2)}.current-note-no-status{font-size:var(--font-ui-small);color:var(--text-muted);font-style:italic;padding:var(--size-2-1) var(--size-2-3);background:var(--background-modifier-border);border-radius:var(--radius-s)}.current-note-empty{text-align:center;color:var(--text-muted);font-style:italic;padding:var(--size-4-4)}.vault-overview{padding:var(--size-4-3)}.vault-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--size-4-2)}.vault-stat-card{text-align:center;padding:var(--size-4-2);background:var(--background-primary);border:1px solid var(--background-modifier-border);border-radius:var(--radius-m);transition:all var(--anim-duration-fast) ease}.vault-stat-card:hover{background:var(--background-modifier-hover);transform:translateY(-2px);box-shadow:var(--shadow-s)}.vault-stat-number{font-size:var(--font-ui-largest);font-weight:var(--font-bold);color:var(--interactive-accent);margin-bottom:var(--size-2-1)}.vault-stat-label{font-size:var(--font-ui-small);color:var(--text-muted);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:.05em}.status-distribution{padding:var(--size-4-3)}.status-chart{display:flex;flex-direction:column;gap:var(--size-4-2)}.status-chart-item{display:flex;flex-direction:column;gap:var(--size-2-1)}.status-chart-item--clickable{cursor:pointer;transition:all var(--anim-duration-fast) ease;padding:var(--size-2-2);border-radius:var(--radius-s)}.status-chart-item--clickable:hover{background:var(--background-modifier-hover);transform:translateY(-1px)}.status-chart-info{display:flex;align-items:center;gap:var(--size-2-3)}.status-chart-count{font-size:var(--font-ui-small);color:var(--text-muted);font-weight:var(--font-medium)}.status-chart-bar{height:8px;background:var(--background-modifier-border);border-radius:var(--radius-s);overflow:hidden}.status-chart-fill{height:100%;transition:width var(--anim-duration-moderate) ease}.status-distribution-empty{text-align:center;color:var(--text-muted);font-style:italic;padding:var(--size-4-4)}.quick-actions{padding:var(--size-4-3);display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--size-4-3)}.quick-actions-group{display:flex;flex-direction:column;gap:var(--size-2-2)}.quick-actions-group-title{font-size:var(--font-ui-small);font-weight:var(--font-semibold);color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;padding-bottom:var(--size-2-1);border-bottom:1px solid var(--background-modifier-border);margin-bottom:var(--size-2-1)}.quick-action-btn{width:100%;padding:var(--size-2-3) var(--size-4-2);border:1px solid var(--background-modifier-border);border-radius:var(--radius-m);background:var(--interactive-normal);color:var(--text-normal);cursor:pointer;font-size:var(--font-ui-medium);font-weight:var(--font-medium);text-align:left;display:flex;align-items:center;gap:var(--size-2-2);transition:all var(--anim-duration-fast) ease}.quick-action-btn:hover:not(:disabled){background:var(--interactive-hover);transform:translateY(-1px);box-shadow:var(--shadow-s)}.quick-action-btn:disabled{opacity:.5;cursor:not-allowed;background:var(--background-modifier-border);color:var(--text-faint)}@media (max-width: 768px){.quick-actions{grid-template-columns:1fr}}.status-dashboard-loading{display:flex;align-items:center;justify-content:center;height:100%;font-size:var(--font-ui-medium);color:var(--text-muted)}.status-dashboard-disabled{display:flex;align-items:center;justify-content:center;height:100%;padding:var(--size-4-4);text-align:center;font-size:var(--font-ui-medium);color:var(--text-muted);background:var(--background-secondary);border:2px dashed var(--background-modifier-border);border-radius:var(--radius-m);margin:var(--size-4-4)}.status-dashboard-content::-webkit-scrollbar{width:var(--scrollbar-width)}.status-dashboard-content::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-bg);border-radius:var(--radius-s)}.status-dashboard-content::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-active-bg)}.grouped-status-view-container{height:100%;overflow:hidden}.grouped-status-header{padding:var(--size-4-2) var(--size-4-3);background:var(--background-secondary);border-bottom:1px solid var(--background-modifier-border)}.grouped-status-title{margin:0 0 var(--size-4-2) 0;font-size:var(--font-ui-large);font-weight:var(--font-semibold)}.grouped-status-filters{display:flex;flex-direction:column;gap:var(--size-4-2)}.grouped-status-note-input{width:100%;padding:var(--size-2-2) var(--size-2-3);border:1px solid var(--background-modifier-border);border-radius:var(--radius-s);background:var(--background-primary);color:var(--text-normal);font-size:var(--font-ui-medium)}.grouped-status-note-input:focus{outline:none;border-color:var(--interactive-accent);box-shadow:0 0 0 2px var(--background-modifier-accent)}.grouped-status-content{flex:1;overflow-y:auto;padding:var(--size-4-2)}.grouped-status-tag-section{margin-bottom:var(--size-4-3)}.grouped-status-tag-header{display:flex;justify-content:space-between;align-items:center;padding:var(--size-4-2) var(--size-4-3);background:var(--background-secondary);border:1px solid var(--background-modifier-border);border-radius:var(--radius-m);cursor:pointer;transition:all var(--anim-duration-fast) ease;margin-bottom:var(--size-4-2)}.grouped-status-tag-header:hover{background:var(--background-modifier-hover)}.grouped-status-tag-content{padding-left:var(--size-4-2)}.grouped-status-group{margin-bottom:var(--size-4-2);background:var(--background-primary);border:1px solid var(--background-modifier-border);border-radius:var(--radius-m);overflow:hidden;box-shadow:0 1px 3px #0000001a;transition:box-shadow var(--anim-duration-fast) ease}.grouped-status-group:hover{box-shadow:0 2px 8px #00000026}.grouped-status-group__header{display:flex;justify-content:space-between;align-items:center;padding:var(--size-4-2) var(--size-4-3);cursor:pointer;transition:background var(--anim-duration-fast) ease;position:relative}.grouped-status-group__header:hover{background:var(--background-modifier-hover)}.grouped-status-group__header:focus{outline:2px solid var(--color-accent);outline-offset:-2px}.grouped-status-group__status{display:flex;align-items:center;gap:var(--size-2-2);min-width:0;flex:1}.grouped-status-group__template-badge{display:inline-flex;align-items:center;padding:var(--size-2-1) var(--size-2-2);background:var(--background-modifier-border);border-radius:var(--radius-s);font-size:var(--font-ui-smaller);color:var(--text-muted);font-weight:var(--font-medium)}.grouped-status-group__info{display:flex;align-items:center;gap:var(--size-2-2);margin-left:auto}.grouped-status-files{background:var(--background-secondary);border-top:1px solid var(--background-modifier-border)}.grouped-status-files-list{max-height:300px;overflow-y:auto}.grouped-status-file-item{padding:var(--size-2-3) var(--size-4-3);cursor:pointer;transition:background var(--anim-duration-fast) ease;border-bottom:1px solid var(--background-modifier-border-hover)}.grouped-status-file-item:hover{background:var(--background-modifier-hover)}.grouped-status-file-item:last-child{border-bottom:none}.grouped-status-file-name{font-weight:var(--font-medium);color:var(--text-normal);margin-bottom:2px}.grouped-status-file-path{font-size:var(--font-ui-small);color:var(--text-muted);opacity:.8}.grouped-status-load-more{display:flex;justify-content:center;padding:var(--size-4-2);border-top:1px solid var(--background-modifier-border)}.grouped-status-load-btn{padding:var(--size-2-2) var(--size-4-2);border:1px solid var(--background-modifier-border);border-radius:var(--radius-s);background:var(--interactive-normal);color:var(--text-normal);cursor:pointer;font-size:var(--font-ui-small);font-weight:var(--font-medium);transition:all var(--anim-duration-fast) ease}.grouped-status-load-btn:hover{background:var(--interactive-hover);transform:translateY(-1px)}.grouped-status-loading,.grouped-status-empty{display:flex;align-items:center;justify-content:center;padding:var(--size-4-6);color:var(--text-muted);font-size:var(--font-ui-medium)}.grouped-status-view-disabled{display:flex;align-items:center;justify-content:center;height:100%;padding:var(--size-4-4);text-align:center;font-size:var(--font-ui-medium);color:var(--text-muted);background:var(--background-secondary);border:2px dashed var(--background-modifier-border);border-radius:var(--radius-m);margin:var(--size-4-4)}.grouped-status-content::-webkit-scrollbar,.grouped-status-files-list::-webkit-scrollbar{width:var(--scrollbar-width)}.grouped-status-content::-webkit-scrollbar-thumb,.grouped-status-files-list::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-bg);border-radius:var(--radius-s)}.grouped-status-content::-webkit-scrollbar-thumb:hover,.grouped-status-files-list::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-active-bg)}.grouped-status-filters__template{display:flex;flex-direction:column;gap:var(--size-2-1)}.grouped-status-filters__template-select{width:100%;padding:var(--size-2-2) var(--size-2-3);border:1px solid var(--background-modifier-border);border-radius:var(--radius-s);background:var(--background-primary);color:var(--text-normal);font-size:var(--font-ui-small);cursor:pointer}.grouped-status-filters__template-select:focus{outline:none;border-color:var(--interactive-accent);box-shadow:0 0 0 2px var(--background-modifier-accent)}.grouped-status-filters__note{display:flex;flex-direction:column;gap:var(--size-2-1)}.grouped-status-filters__note-input{width:100%;padding:var(--size-2-2) var(--size-2-3);border:1px solid var(--background-modifier-border);border-radius:var(--radius-s);background:var(--background-primary);color:var(--text-normal);font-size:var(--font-ui-small)}.grouped-status-filters__note-input:focus{outline:none;border-color:var(--interactive-accent);box-shadow:0 0 0 2px var(--background-modifier-accent)}.grouped-status-group__status{display:flex;align-items:center;gap:var(--size-2-2)}.grouped-status-group__template-badge{background:var(--background-modifier-border);color:var(--text-muted);padding:var(--size-2-1) var(--size-2-2);border-radius:var(--radius-s);font-size:var(--font-ui-smaller);font-weight:var(--font-medium);text-transform:capitalize;white-space:nowrap}.custom-icon{display:inline-flex}.custom-icon__absolute-right{position:absolute;right:0}.status-wrapper{position:relative;display:inline-block}.status-minimal{display:inline-flex;align-items:center;gap:2px;margin-left:var(--size-2-2);padding:2px;border-radius:var(--radius-s);cursor:pointer;opacity:.7;transition:all var(--anim-duration-fast) ease}.status-minimal:hover{opacity:1;background:var(--background-modifier-hover);transform:scale(1.05)}.status-minimal--compact{margin-left:0;padding:0;background:transparent;gap:var(--size-2-1)}.status-minimal--compact .status-minimal__icon{font-size:var(--font-ui-medium)}.status-minimal[data-status-color] .status-minimal__count{background:var(--interactive-accent)}.status-minimal__icon{font-size:11px;line-height:1;display:inline-flex;align-items:center;justify-content:center;filter:grayscale(.2);transition:filter var(--anim-duration-fast) ease}.status-minimal:hover .status-minimal__icon{filter:grayscale(0)}.status-minimal__count{min-width:14px;height:14px;padding:0 3px;background:var(--interactive-accent);color:var(--text-on-accent);font-size:var(--font-ui-smaller);font-weight:var(--font-semibold);border-radius:var(--radius-m);display:flex;align-items:center;justify-content:center}.status-info-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:var(--layer-popover);background:var(--background-primary);border:1px solid var(--background-modifier-border);border-radius:var(--radius-m);box-shadow:var(--shadow-l);min-width:280px;max-width:400px;overflow:hidden;pointer-events:none}.status-popup-header{display:flex;align-items:center;gap:var(--size-2-2);padding:var(--size-4-2) var(--size-4-3);background:var(--background-secondary);border-bottom:1px solid var(--background-modifier-border);font-weight:var(--font-semibold);font-size:var(--font-ui-small)}.status-popup-content{padding:var(--size-4-2)}.status-popup-empty{padding:var(--size-4-4);text-align:center;color:var(--text-muted);font-style:italic}.status-group{margin-bottom:var(--size-4-2)}.status-group:last-child{margin-bottom:0}.status-group__header{display:flex;justify-content:space-between;align-items:center;padding:var(--size-2-2) var(--size-2-3);background:var(--background-secondary-alt);border-radius:var(--radius-s);margin-bottom:var(--size-2-2);border:1px solid var(--background-modifier-border);transition:background var(--anim-duration-fast) ease}.status-group__header:hover{background:var(--background-modifier-hover)}.status-group__name{text-transform:capitalize;font-weight:var(--font-medium);font-size:var(--font-ui-smaller);color:var(--text-normal)}.status-group__count{display:inline-flex;align-items:center;padding:var(--size-2-1) var(--size-2-2);background:var(--background-modifier-border);border-radius:var(--radius-s);font-size:var(--font-ui-smaller);color:var(--text-muted);font-weight:var(--font-medium);min-width:20px;justify-content:center}.status-group__items{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--size-2-2);padding:0 var(--size-2-1)}.status-item{display:flex;flex-direction:column;gap:var(--size-2-1);padding:var(--size-2-2);background:var(--background-primary-alt);border:1px solid var(--background-modifier-border);border-radius:var(--radius-s)}.status-description{font-size:var(--font-ui-smaller);color:var(--text-muted);line-height:1.4}.group-label-container{display:flex;align-items:center;gap:var(--size-2-2);font-size:var(--font-ui-small);font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);transition:color var(--anim-duration-fast) ease}.group-label-container--highlighted{color:var(--text-normal)}.group-label-container svg{width:16px;height:16px;opacity:.8}.collapsible-counter-container{padding:var(--size-2-1) var(--size-2-3);border-radius:var(--radius-s);background:var(--background-modifier-border);border:1px solid var(--background-modifier-border-hover);color:var(--text-muted);font-weight:var(--font-medium);font-size:var(--font-ui-smaller);cursor:pointer;transition:all var(--anim-duration-fast) ease;min-width:28px;text-align:center}.collapsible-counter-container:hover{background:var(--background-modifier-border-hover);color:var(--text-normal)}.note-status-chip{display:inline-flex;align-items:center;gap:var(--size-2-2);padding:var(--size-2-1) var(--size-2-3);background:var(--interactive-accent);color:var(--text-on-accent);border-radius:var(--radius-s);font-size:var(--font-ui-smaller);cursor:pointer;transition:all var(--anim-duration-fast) ease}.note-status-chip:hover{opacity:.9;transform:translateY(-1px)}.note-status-chip--removing{opacity:.5;transform:scale(.95)}.note-status-chip__icon{font-size:1em}.note-status-chip__text{font-weight:var(--font-medium)}.note-status-chip__remove{display:flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.2);cursor:pointer;margin-left:var(--size-2-1)}.note-status-chip__remove:hover{background:rgba(255,255,255,.3)}.status-badge-container{display:inline-flex;align-items:center;padding:var(--size-2-1) var(--size-2-3);border-radius:var(--radius-s);transition:all var(--anim-duration-fast) ease;cursor:pointer}.status-badge-item{display:flex;align-items:center;gap:var(--size-2-1)}.status-badge-icon{font-size:var(--font-ui-small)}.status-badge-text{font-weight:var(--font-medium);font-size:var(--font-ui-small)}.template-status-chip{display:inline-flex;align-items:center;gap:var(--size-2-1);padding:var(--size-2-1) var(--size-2-3);background:var(--background-secondary);border:1px solid var(--background-modifier-border);border-radius:var(--radius-m);font-size:var(--font-ui-smaller)}.template-status-color-dot{width:8px;height:8px;border-radius:50%;background-color:var(--dot-color)}.lucide-icon-picker{position:relative;display:flex;flex-direction:column;gap:var(--size-2-1)}.lucide-icon-picker__text-input{max-width:240px}.lucide-icon-picker__row{display:flex;gap:var(--size-2-1);align-items:center}.lucide-icon-picker__modal-button{display:inline-flex;align-items:center;gap:var(--size-2-1);border:1px solid var(--background-modifier-border);border-radius:var(--radius-m);padding:var(--size-2-1) var(--size-4-1);background:var(--background-secondary);cursor:pointer;transition:border var(--anim-duration-fast) ease,background var(--anim-duration-fast) ease;min-width:220px;justify-content:space-between}.lucide-icon-picker__modal-button:hover{border-color:var(--interactive-accent)}.lucide-icon-picker__preview{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}.lucide-icon-picker__label{flex:1;text-align:left;font-size:var(--font-ui-smaller);color:var(--text-muted)}.lucide-icon-picker__clear-trigger{background:transparent;border:none;color:var(--text-muted);font-size:var(--font-ui-smaller);cursor:pointer;padding:var(--size-2-1) var(--size-2-2)}.lucide-icon-picker__clear-trigger:hover{color:var(--text-normal);text-decoration:underline}.lucide-icon-modal-wrapper{padding:var(--size-4-2)}.lucide-icon-modal{display:flex;flex-direction:column;gap:var(--size-2-1)}.lucide-icon-modal__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--size-2-2)}.lucide-icon-modal__count{margin:0;font-size:var(--font-ui-smaller);color:var(--text-muted)}.lucide-icon-modal__close{display:inline-flex;align-items:center;justify-content:center}.lucide-icon-modal__search{width:100%}.lucide-icon-modal__toggle{display:inline-flex;align-items:center;gap:var(--size-2-1);font-size:var(--font-ui-smaller);color:var(--text-muted)}.lucide-icon-modal__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--size-2-1);max-height:360px;overflow-y:auto;padding-right:var(--size-2-1)}.lucide-icon-modal__list--icons-only{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}.lucide-icon-modal__option{display:flex;align-items:center;gap:var(--size-2-1);padding:var(--size-2-1);border-radius:var(--radius-s);border:1px solid var(--background-modifier-border);background:var(--background-secondary);cursor:pointer;font-size:var(--font-ui-smaller);justify-content:flex-start}.lucide-icon-modal__option:hover{background:var(--background-modifier-hover)}.lucide-icon-modal__option--selected{border-color:var(--interactive-accent);background:var(--background-modifier-success)}.lucide-icon-modal__option--compact{justify-content:center}.lucide-icon-modal__option--compact span{display:none}.lucide-icon-modal__empty{grid-column:1 / -1;text-align:center;font-size:var(--font-ui-smaller);color:var(--text-muted);padding:var(--size-4-2)}.icon-selection-field{display:flex;flex-wrap:wrap;gap:var(--size-4-2)}.icon-selection-field__column{flex:1;min-width:220px}.icon-selection-field__label{display:block;font-size:var(--font-ui-smaller);font-weight:var(--font-medium);color:var(--text-muted);margin-bottom:var(--size-2-1)}.icon-selection-field__emoji-input{max-width:260px}.icon-selection-field__hint{margin-top:var(--size-2-1);font-size:var(--font-ui-smaller);color:var(--text-muted)}.status-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}.obsidian-icon{display:inline-flex;align-items:center;justify-content:center}.obsidian-icon svg{width:100%;height:100%}.note-status-editor-toolbar-badge{display:inline-flex;align-items:center;margin:0 var(--size-2-1)}.note-status-editor-toolbar-badge--hidden{display:none}.editor-toolbar-button__icon{font-size:16px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);width:18px;height:18px;line-height:1}.editor-toolbar-button__icon--has-status{color:var(--interactive-accent)}.editor-toolbar-button__icon-container{position:relative;display:flex;align-items:center;justify-content:center}.editor-toolbar-button__counter{position:absolute;top:-4px;right:-6px;min-width:12px;height:12px;padding:0 2px;background:var(--interactive-accent);color:var(--text-on-accent);font-size:8px;font-weight:var(--font-semibold);border-radius:6px;display:flex;align-items:center;justify-content:center;line-height:1;border:1px solid var(--background-primary)}
diff --git a/types/pluginSettings.ts b/types/pluginSettings.ts
index 24285de..4a1e0d7 100644
--- a/types/pluginSettings.ts
+++ b/types/pluginSettings.ts
@@ -32,6 +32,7 @@ export type PluginSettings = {
 	quickStatusCommands: string[];
 	// Unknown status customization
 	unknownStatusIcon: string; // Custom icon for unknown status
+	unknownStatusLucideIcon?: string; // Optional Lucide icon for unknown status
 	unknownStatusColor: string; // Custom hex color for unknown status
 	statusBarNoStatusText: string; // Custom text for status bar when no status
 	statusBarShowNoStatusIcon: boolean; // Whether to show icon in status bar for no status

From 77d2745b39d7c0f2c458c0c6f0672eed5281cdf5 Mon Sep 17 00:00:00 2001
From: Aleix Soler <aleixsoler64@gmail.com>
Date: Fri, 21 Nov 2025 09:45:00 +0100
Subject: [PATCH 8/8] chore: reuse prop

---
 components/FileExplorer/FileExplorerIcon.tsx | 19 +++++++---
 components/atoms/StatusDisplay.tsx           | 38 ++++++++++----------
 components/atoms/StatusIconPreview.tsx       | 16 ++-------
 components/atoms/StatusSelector.tsx          | 10 ++++--
 4 files changed, 45 insertions(+), 38 deletions(-)

diff --git a/components/FileExplorer/FileExplorerIcon.tsx b/components/FileExplorer/FileExplorerIcon.tsx
index 1d750fe..c888467 100644
--- a/components/FileExplorer/FileExplorerIcon.tsx
+++ b/components/FileExplorer/FileExplorerIcon.tsx
@@ -1,6 +1,7 @@
 import { StatusIconPreview } from "@/components/atoms/StatusIconPreview";
 import { GroupedStatuses } from "@/types/noteStatus";
 import React, { FC, memo } from "react";
+import { StatusIcon } from "@/components/atoms/StatusIcon";
 
 type Props = {
 	statuses: GroupedStatuses;
@@ -47,8 +48,13 @@ export const FileExplorerIcon: FC<Props> = memo(
 
 			return (
 				<StatusIconPreview
-					icon={icon}
-					lucideIcon={unknownStatusConfig?.lucideIcon}
+					icon={
+						<StatusIcon
+							icon={icon}
+							lucideIcon={unknownStatusConfig?.lucideIcon}
+							size={16}
+						/>
+					}
 					color={color}
 					iconColorMode={iconColorMode}
 					iconFrameMode={iconFrameMode}
@@ -66,8 +72,13 @@ export const FileExplorerIcon: FC<Props> = memo(
 
 		return (
 			<StatusIconPreview
-				icon={primaryStatus.icon}
-				lucideIcon={primaryStatus.lucideIcon}
+				icon={
+					<StatusIcon
+						icon={primaryStatus.icon}
+						lucideIcon={primaryStatus.lucideIcon}
+						size={16}
+					/>
+				}
 				color={iconColor}
 				count={totalStatuses}
 				iconFrameMode={iconFrameMode}
diff --git a/components/atoms/StatusDisplay.tsx b/components/atoms/StatusDisplay.tsx
index 1c7afe7..90b6051 100644
--- a/components/atoms/StatusDisplay.tsx
+++ b/components/atoms/StatusDisplay.tsx
@@ -1,5 +1,5 @@
 import { NoteStatus } from "@/types/noteStatus";
-import { FC, memo, useState } from "react";
+import { FC, ReactNode, memo, useMemo, useState } from "react";
 import { getStatusTooltip } from "@/utils/statusUtils";
 import { ObsidianIcon } from "./ObsidianIcon";
 import { StatusIcon } from "./StatusIcon";
@@ -12,6 +12,7 @@ interface StatusDisplayProps {
 	removable?: boolean;
 	hasNameConflicts?: boolean;
 	templateNameMode?: "always" | "never" | "auto";
+	icon?: ReactNode;
 	onRemove?: () => void;
 	onClick?: () => void;
 }
@@ -23,6 +24,7 @@ export const StatusDisplay: FC<StatusDisplayProps> = memo(
 		removable = false,
 		hasNameConflicts = false,
 		templateNameMode = "auto",
+		icon,
 		onRemove,
 		onClick,
 	}) => {
@@ -63,6 +65,19 @@ export const StatusDisplay: FC<StatusDisplayProps> = memo(
 			}
 		};
 
+		const defaultIcon = useMemo(() => {
+			const baseSize = variant === "chip" ? 16 : 14;
+			return (
+				<StatusIcon
+					icon={status.icon}
+					lucideIcon={status.lucideIcon}
+					size={baseSize}
+				/>
+			);
+		}, [status.icon, status.lucideIcon, variant]);
+
+		const iconNode = icon ?? defaultIcon;
+
 		if (variant === "chip") {
 			return (
 				<div
@@ -83,12 +98,7 @@ export const StatusDisplay: FC<StatusDisplayProps> = memo(
 					}}
 					onClick={handleClick}
 				>
-					<StatusIcon
-						icon={status.icon}
-						lucideIcon={status.lucideIcon}
-						className="note-status-chip-icon"
-						size={16}
-					/>
+					<span className="note-status-chip-icon">{iconNode}</span>
 					<span className="note-status-chip-text">
 						{getDisplayName()}
 					</span>
@@ -125,12 +135,7 @@ export const StatusDisplay: FC<StatusDisplayProps> = memo(
 					onClick={handleClick}
 				>
 					<div className="status-badge-item">
-						<StatusIcon
-							icon={status.icon}
-							lucideIcon={status.lucideIcon}
-							className="status-badge-icon"
-							size={14}
-						/>
+						<span className="status-badge-icon">{iconNode}</span>
 						<span className="status-badge-text">
 							{getDisplayName()}
 						</span>
@@ -151,12 +156,7 @@ export const StatusDisplay: FC<StatusDisplayProps> = memo(
 						}
 					/>
 					<span>
-						<StatusIcon
-							icon={status.icon}
-							lucideIcon={status.lucideIcon}
-							size={14}
-							style={{ marginRight: "4px" }}
-						/>
+						<span style={{ marginRight: "4px" }}>{iconNode}</span>
 						{getDisplayName()}
 					</span>
 				</div>
diff --git a/components/atoms/StatusIconPreview.tsx b/components/atoms/StatusIconPreview.tsx
index f4d1523..ea0f137 100644
--- a/components/atoms/StatusIconPreview.tsx
+++ b/components/atoms/StatusIconPreview.tsx
@@ -1,12 +1,10 @@
-import React, { CSSProperties, FC, memo } from "react";
-import { StatusIcon } from "./StatusIcon";
+import React, { CSSProperties, FC, ReactNode, memo } from "react";
 
 type IconFrameMode = "always" | "never";
 type IconColorMode = "status" | "theme";
 
 export interface StatusIconPreviewProps {
-	icon?: string;
-	lucideIcon?: string;
+	icon?: ReactNode;
 	color?: string;
 	count?: number;
 	iconFrameMode?: IconFrameMode;
@@ -16,7 +14,6 @@ export interface StatusIconPreviewProps {
 	iconClassName?: string;
 	wrapperClassName?: string;
 	style?: CSSProperties;
-	iconSize?: number;
 	onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>) => void;
 	onMouseLeave?: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
@@ -24,7 +21,6 @@ export interface StatusIconPreviewProps {
 export const StatusIconPreview: FC<StatusIconPreviewProps> = memo(
 	({
 		icon,
-		lucideIcon,
 		color,
 		count,
 		iconFrameMode = "never",
@@ -34,7 +30,6 @@ export const StatusIconPreview: FC<StatusIconPreviewProps> = memo(
 		iconClassName = "",
 		wrapperClassName = "",
 		style,
-		iconSize,
 		onMouseEnter,
 		onMouseLeave,
 	}) => {
@@ -62,12 +57,7 @@ export const StatusIconPreview: FC<StatusIconPreviewProps> = memo(
 				onMouseEnter={onMouseEnter}
 				onMouseLeave={onMouseLeave}
 			>
-				<StatusIcon
-					icon={icon}
-					lucideIcon={lucideIcon}
-					size={iconSize ?? (compact ? 13 : 16)}
-					className="status-minimal__icon"
-				/>
+				<span className="status-minimal__icon">{icon ?? "📝"}</span>
 				{count && count > 1 && (
 					<span
 						className="status-minimal__count"
diff --git a/components/atoms/StatusSelector.tsx b/components/atoms/StatusSelector.tsx
index 8407fcc..ea86e91 100644
--- a/components/atoms/StatusSelector.tsx
+++ b/components/atoms/StatusSelector.tsx
@@ -3,6 +3,7 @@ import { NoteStatus } from "@/types/noteStatus";
 import { SelectableListItem } from "./SelectableListItem";
 import { getStatusTooltip, isStatusSelected } from "@/utils/statusUtils";
 import { StatusIconPreview } from "./StatusIconPreview";
+import { StatusIcon } from "./StatusIcon";
 
 interface StatusOptionProps {
 	status: NoteStatus;
@@ -33,8 +34,13 @@ export const StatusModalOption: React.FC<StatusOptionProps> = memo(
 				icon={
 					<div className="note-status-option__icon-wrapper">
 						<StatusIconPreview
-							icon={status.icon}
-							lucideIcon={status.lucideIcon}
+							icon={
+								<StatusIcon
+									icon={status.icon}
+									lucideIcon={status.lucideIcon}
+									size={13}
+								/>
+							}
 							color={status.color}
 							iconFrameMode={iconFrameMode}
 							iconColorMode={iconColorMode}