diff --git a/components/FileExplorer/FileExplorerIcon.tsx b/components/FileExplorer/FileExplorerIcon.tsx index c888467..d8908a7 100644 --- a/components/FileExplorer/FileExplorerIcon.tsx +++ b/components/FileExplorer/FileExplorerIcon.tsx @@ -2,6 +2,11 @@ import { StatusIconPreview } from "@/components/atoms/StatusIconPreview"; import { GroupedStatuses } from "@/types/noteStatus"; import React, { FC, memo } from "react"; import { StatusIcon } from "@/components/atoms/StatusIcon"; +import { + getPrimaryStatus, + getUnknownStatusColor, + resolveStatusColor, +} from "@/utils/statusColor"; type Props = { statuses: GroupedStatuses; @@ -35,15 +40,12 @@ export const FileExplorerIcon: FC = memo( const useStatusColors = iconColorMode === "status"; - const getStatusColor = (color?: string) => - (color && color.trim()) || "var(--text-accent)"; - if (totalStatuses === 0) { if (hideUnknownStatus) return null; const icon = unknownStatusConfig?.icon || "❓"; const color = useStatusColors - ? unknownStatusConfig?.color?.trim() || "#8b949e" + ? unknownStatusConfig?.color?.trim() || getUnknownStatusColor() : undefined; return ( @@ -64,10 +66,10 @@ export const FileExplorerIcon: FC = memo( ); } - const primaryStatus = statusEntries[0]?.[1]?.[0]; + const primaryStatus = getPrimaryStatus(statuses); if (!primaryStatus) return null; const iconColor = useStatusColors - ? getStatusColor(primaryStatus.color) + ? resolveStatusColor(primaryStatus) : undefined; return ( diff --git a/components/SettingsUI/UISettings.tsx b/components/SettingsUI/UISettings.tsx index b886d9f..1a2ac0d 100644 --- a/components/SettingsUI/UISettings.tsx +++ b/components/SettingsUI/UISettings.tsx @@ -225,6 +225,63 @@ export const UISettings: React.FC = ({ settings, onChange }) => { /> + + + + + + + + +

Additional status visualization in file explorer

+ + + + + + + + + + + + +