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 = memo( return ( { 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 = ({
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 = ({ canMoveDown = false, }) => { const isValid = status.name.trim().length > 0; - const displayIcon = status.icon.trim() || "📝"; - return (
- {/* Simple horizontal layout with all inputs in a row */} -
- {/* Icon field - simple text input */} -
- +
+
+ onCustomStatusChange(index, "icon", value || "") } - placeholder="📝" + placeholder="Example: ✅ or 🚧" className="custom-status-item__input custom-status-item__input--icon" /> +

+ This fallback icon is shown anywhere Lucide is not + available. +

+
+ + + onCustomStatusChange(index, "lucideIcon", value) + } + /> +

+ Matches Obsidian's toolbar icons so your status + button blends in. +

+
+
+ + {/* Simple horizontal layout with remaining inputs */} +
{/* Name field */}