feat: add custom icon support for task statuses (#1245, #793)

Add optional Lucide icon configuration for task statuses, allowing
shape-based status differentiation alongside color coding.

- Add icon field to StatusConfig type
- Render Lucide icons via setIcon() when icon is configured
- Add CSS for icon-based status indicators with theme color support
- Add icon input field to status settings UI
- Add translations for all 8 locales (en, de, es, fr, ja, pt, ru, zh)

Users can configure icons per status in Settings → Task Properties by
entering a Lucide icon name (e.g., check, circle, clock). Icons inherit
the status color and improve accessibility for colorblind users.
This commit is contained in:
callumalpass 2025-11-30 17:43:16 +11:00
parent 4ef3fc482c
commit 2af2bcdad1
15 changed files with 186 additions and 1 deletions

View file

@ -26,6 +26,13 @@ Example:
## Added
- (#1245), (#793) Added custom icon support for task statuses
- Configure a Lucide icon name (e.g., `check`, `circle`, `clock`) per status in Settings → Task Properties → Task Statuses
- Icons display instead of the colored dot, inheriting the status color
- Browse available icons at [lucide.dev](https://lucide.dev)
- Improves accessibility by allowing shape-based status differentiation
- Thanks to @3Fish for the feature request and @Raonmir2, @aubreyz, @prayidae, and @anareaty for the discussion on accessibility and icon-based indicators
- (#1259) Added [Property Types Reference](../settings/property-types-reference.md) documentation
- Documents expected data types (text, list, date, number) for all frontmatter properties
- Includes format specifications, examples, and a complete YAML reference

View file

@ -500,6 +500,7 @@
"settings.taskProperties.taskStatuses.howTheyWork.value": "1ba12788a51dfd44045f43f2bc8c6d6eb2eb161f",
"settings.taskProperties.taskStatuses.howTheyWork.label": "c601b207de14ad4111101e2639e1ddb4d2c58d73",
"settings.taskProperties.taskStatuses.howTheyWork.color": "b3a4e0aed552d59293608963c489a5ab0e627c33",
"settings.taskProperties.taskStatuses.howTheyWork.icon": "990a304e39a65c9cab8405d690b593f3b01008f0",
"settings.taskProperties.taskStatuses.howTheyWork.completed": "e6bd6dc7043b1d939ae805d795e5f3b6c2d4470b",
"settings.taskProperties.taskStatuses.howTheyWork.autoArchive": "bd84a52c7f3268c53cbd87f48ca89f2224a7ac31",
"settings.taskProperties.taskStatuses.howTheyWork.orderNote": "622251b5df80b62ec75e854fb074594cf7cee6cb",
@ -512,11 +513,13 @@
"settings.taskProperties.taskStatuses.fields.value": "2139d78e43cf42b8c7904885f78e1c7edc3cb901",
"settings.taskProperties.taskStatuses.fields.label": "f70a9228e736a5c3a698e6037eed2dda9de1b40f",
"settings.taskProperties.taskStatuses.fields.color": "511a000614ad52294121be47cb86170db16ba777",
"settings.taskProperties.taskStatuses.fields.icon": "b6d7019b1817040a55577652ed26649af8ca0183",
"settings.taskProperties.taskStatuses.fields.completed": "208409ffed559a03204711e8976b06e3710deca5",
"settings.taskProperties.taskStatuses.fields.autoArchive": "ebba9937a4826ac159c5c5fd87a98562f3aff675",
"settings.taskProperties.taskStatuses.fields.delayMinutes": "94df948e06196590ea5f583699ab5b28d181981e",
"settings.taskProperties.taskStatuses.placeholders.value": "23766ca6dac0b9ef9b1f220c3305262d21be9c21",
"settings.taskProperties.taskStatuses.placeholders.label": "f61eadaf153a7ccf995f48d19a000c62df62384c",
"settings.taskProperties.taskStatuses.placeholders.icon": "6c7a4a074ff62754681360bda7c3994c8029742b",
"settings.taskProperties.taskStatuses.badges.completed": "1798b3ba42ee08ea09d9720b2d9c0181abbfe3e4",
"settings.taskProperties.taskStatuses.deleteConfirm": "179626d7a4d216da031ac7ca2ec87e0ed97bc5fc",
"settings.taskProperties.taskPriorities.header": "cb119295548f2c621a748a78de081e9a143bc44b",

View file

@ -2004,6 +2004,10 @@
"source": "b3a4e0aed552d59293608963c489a5ab0e627c33",
"translation": "92d19ea2fc27cbe86907af0a5a913a9fdf24305f"
},
"settings.taskProperties.taskStatuses.howTheyWork.icon": {
"source": "990a304e39a65c9cab8405d690b593f3b01008f0",
"translation": "4cf9f51cb08699e219d05c3b783ff75ccd270ce3"
},
"settings.taskProperties.taskStatuses.howTheyWork.completed": {
"source": "e6bd6dc7043b1d939ae805d795e5f3b6c2d4470b",
"translation": "cb9ab4cdcceb9e2aeb360e177c24b02d93f30ac8"
@ -2052,6 +2056,10 @@
"source": "511a000614ad52294121be47cb86170db16ba777",
"translation": "b66b4521b45b74c9be12b059a3c4819c0653ff06"
},
"settings.taskProperties.taskStatuses.fields.icon": {
"source": "b6d7019b1817040a55577652ed26649af8ca0183",
"translation": "b2af9436849ecfbfd8e9d4c69a1537ed842d7515"
},
"settings.taskProperties.taskStatuses.fields.completed": {
"source": "208409ffed559a03204711e8976b06e3710deca5",
"translation": "a138e2592f8e86664bee5d2261abd967cb1e1024"
@ -2072,6 +2080,10 @@
"source": "f61eadaf153a7ccf995f48d19a000c62df62384c",
"translation": "a9ee3a5b1ea16e1f3278efc261850ad08e8bedcc"
},
"settings.taskProperties.taskStatuses.placeholders.icon": {
"source": "6c7a4a074ff62754681360bda7c3994c8029742b",
"translation": "6c7a4a074ff62754681360bda7c3994c8029742b"
},
"settings.taskProperties.taskStatuses.badges.completed": {
"source": "1798b3ba42ee08ea09d9720b2d9c0181abbfe3e4",
"translation": "be274c6e71f4a5837b1f8124da980ac92a56ac7e"
@ -9166,6 +9178,10 @@
"source": "b3a4e0aed552d59293608963c489a5ab0e627c33",
"translation": "138cdc4ca32699c157cfbec43d4710c8df71c694"
},
"settings.taskProperties.taskStatuses.howTheyWork.icon": {
"source": "990a304e39a65c9cab8405d690b593f3b01008f0",
"translation": "7f42ef4d037747fa4be95ea81f78ca3ab7886400"
},
"settings.taskProperties.taskStatuses.howTheyWork.completed": {
"source": "e6bd6dc7043b1d939ae805d795e5f3b6c2d4470b",
"translation": "ef5bc07ca67951bfd0227f7cde1f9d628e93da09"
@ -9214,6 +9230,10 @@
"source": "511a000614ad52294121be47cb86170db16ba777",
"translation": "511a000614ad52294121be47cb86170db16ba777"
},
"settings.taskProperties.taskStatuses.fields.icon": {
"source": "b6d7019b1817040a55577652ed26649af8ca0183",
"translation": "4ff6bb16bf847f710ce6ab1f5ab96cfa19a56abb"
},
"settings.taskProperties.taskStatuses.fields.completed": {
"source": "208409ffed559a03204711e8976b06e3710deca5",
"translation": "49bcf96e290b8b04ab476892243e71fa2f3c486a"
@ -9234,6 +9254,10 @@
"source": "f61eadaf153a7ccf995f48d19a000c62df62384c",
"translation": "1e37ee44fa7ca8dce3333efc50ca712432afd3bb"
},
"settings.taskProperties.taskStatuses.placeholders.icon": {
"source": "6c7a4a074ff62754681360bda7c3994c8029742b",
"translation": "6c7a4a074ff62754681360bda7c3994c8029742b"
},
"settings.taskProperties.taskStatuses.badges.completed": {
"source": "1798b3ba42ee08ea09d9720b2d9c0181abbfe3e4",
"translation": "76a3d55ad062a9d4590170afbe43b600933f564d"
@ -16328,6 +16352,10 @@
"source": "b3a4e0aed552d59293608963c489a5ab0e627c33",
"translation": "f7577710f3b3ac13a2d790ea8394a30479b798f5"
},
"settings.taskProperties.taskStatuses.howTheyWork.icon": {
"source": "990a304e39a65c9cab8405d690b593f3b01008f0",
"translation": "8ca91686f38ce234088d76cefff944259783bd51"
},
"settings.taskProperties.taskStatuses.howTheyWork.completed": {
"source": "e6bd6dc7043b1d939ae805d795e5f3b6c2d4470b",
"translation": "8df3b29da68c74050b5af7233aa7f88b32cba2cc"
@ -16376,6 +16404,10 @@
"source": "511a000614ad52294121be47cb86170db16ba777",
"translation": "0b508cfc5192c0b8bf5c896421fcd9fc62620937"
},
"settings.taskProperties.taskStatuses.fields.icon": {
"source": "b6d7019b1817040a55577652ed26649af8ca0183",
"translation": "848ae1f94e4e70aa81a6de9f6da98d95f8b23207"
},
"settings.taskProperties.taskStatuses.fields.completed": {
"source": "208409ffed559a03204711e8976b06e3710deca5",
"translation": "6edcf9c3483f8a2577d3a8175dac1e55219a8241"
@ -16396,6 +16428,10 @@
"source": "f61eadaf153a7ccf995f48d19a000c62df62384c",
"translation": "bc9b533a43530fae096586b5a26fe0ef548c60ed"
},
"settings.taskProperties.taskStatuses.placeholders.icon": {
"source": "6c7a4a074ff62754681360bda7c3994c8029742b",
"translation": "6c7a4a074ff62754681360bda7c3994c8029742b"
},
"settings.taskProperties.taskStatuses.badges.completed": {
"source": "1798b3ba42ee08ea09d9720b2d9c0181abbfe3e4",
"translation": "3bc5972000ab5d6e76d30edba6b124eaf7f3bc15"
@ -23490,6 +23526,10 @@
"source": "b3a4e0aed552d59293608963c489a5ab0e627c33",
"translation": "46e206b05e0f18767b26b38dc3d9748d1f93c29e"
},
"settings.taskProperties.taskStatuses.howTheyWork.icon": {
"source": "990a304e39a65c9cab8405d690b593f3b01008f0",
"translation": "dfd006f3bbf958682d3af7295f764fbfb49a21ab"
},
"settings.taskProperties.taskStatuses.howTheyWork.completed": {
"source": "e6bd6dc7043b1d939ae805d795e5f3b6c2d4470b",
"translation": "9e0eaf71298108654fd791ac948dd6c8dd1b439e"
@ -23538,6 +23578,10 @@
"source": "511a000614ad52294121be47cb86170db16ba777",
"translation": "7b880dada157a01d35d31a451c67a21c85457195"
},
"settings.taskProperties.taskStatuses.fields.icon": {
"source": "b6d7019b1817040a55577652ed26649af8ca0183",
"translation": "11ff66a9cdcd7973941b40ec95b667f437eba6f1"
},
"settings.taskProperties.taskStatuses.fields.completed": {
"source": "208409ffed559a03204711e8976b06e3710deca5",
"translation": "886556b844ad628bf72491209c1e20304e58c722"
@ -23558,6 +23602,10 @@
"source": "f61eadaf153a7ccf995f48d19a000c62df62384c",
"translation": "c573867b5fca81967f6487423d702786c72051b9"
},
"settings.taskProperties.taskStatuses.placeholders.icon": {
"source": "6c7a4a074ff62754681360bda7c3994c8029742b",
"translation": "6c7a4a074ff62754681360bda7c3994c8029742b"
},
"settings.taskProperties.taskStatuses.badges.completed": {
"source": "1798b3ba42ee08ea09d9720b2d9c0181abbfe3e4",
"translation": "1cae18a9a401bd5c4ec499d517e0c653ad6a5a1b"
@ -30652,6 +30700,10 @@
"source": "b3a4e0aed552d59293608963c489a5ab0e627c33",
"translation": "d0ea30b78de68f7787852413748711c258feb08e"
},
"settings.taskProperties.taskStatuses.howTheyWork.icon": {
"source": "990a304e39a65c9cab8405d690b593f3b01008f0",
"translation": "60185cdd22543271b14737b1015b3c913815edd2"
},
"settings.taskProperties.taskStatuses.howTheyWork.completed": {
"source": "e6bd6dc7043b1d939ae805d795e5f3b6c2d4470b",
"translation": "c041d0942c21612e1c4fd36563380da2781424bc"
@ -30700,6 +30752,10 @@
"source": "511a000614ad52294121be47cb86170db16ba777",
"translation": "7549057dab520dc1cf645ad0c3c0b883f3f36a71"
},
"settings.taskProperties.taskStatuses.fields.icon": {
"source": "b6d7019b1817040a55577652ed26649af8ca0183",
"translation": "26c09f738712062bd96e16115eb7050b1b7cb3d6"
},
"settings.taskProperties.taskStatuses.fields.completed": {
"source": "208409ffed559a03204711e8976b06e3710deca5",
"translation": "8fbc8d895e59321d9d909fd12d9322147afddc98"
@ -30720,6 +30776,10 @@
"source": "f61eadaf153a7ccf995f48d19a000c62df62384c",
"translation": "67ba1cbf4fcd3af0cdcf1bad1da85b345ebf2d0f"
},
"settings.taskProperties.taskStatuses.placeholders.icon": {
"source": "6c7a4a074ff62754681360bda7c3994c8029742b",
"translation": "6c7a4a074ff62754681360bda7c3994c8029742b"
},
"settings.taskProperties.taskStatuses.badges.completed": {
"source": "1798b3ba42ee08ea09d9720b2d9c0181abbfe3e4",
"translation": "dbeb4db1889042371ea9e0acdbed584b61f923dc"
@ -37814,6 +37874,10 @@
"source": "b3a4e0aed552d59293608963c489a5ab0e627c33",
"translation": "b64823c383d1e92f13030ee1e0db88f02f16ef1b"
},
"settings.taskProperties.taskStatuses.howTheyWork.icon": {
"source": "990a304e39a65c9cab8405d690b593f3b01008f0",
"translation": "a210f602680dd0cc28750ae339048bdaabc28dba"
},
"settings.taskProperties.taskStatuses.howTheyWork.completed": {
"source": "e6bd6dc7043b1d939ae805d795e5f3b6c2d4470b",
"translation": "652c5354d61a3dd8ee6f00b351a77d0d86d34a79"
@ -37862,6 +37926,10 @@
"source": "511a000614ad52294121be47cb86170db16ba777",
"translation": "f524ed912df3f4726cc19d6bde3b85e36af9b976"
},
"settings.taskProperties.taskStatuses.fields.icon": {
"source": "b6d7019b1817040a55577652ed26649af8ca0183",
"translation": "1966ea773542e948e433623c2d98e6a1b02d5a11"
},
"settings.taskProperties.taskStatuses.fields.completed": {
"source": "208409ffed559a03204711e8976b06e3710deca5",
"translation": "bb155f6460bf0b86f81e40d4cb310624c008ea76"
@ -37882,6 +37950,10 @@
"source": "f61eadaf153a7ccf995f48d19a000c62df62384c",
"translation": "9767a40cca49a067ed55ae582acae8f531b6b80a"
},
"settings.taskProperties.taskStatuses.placeholders.icon": {
"source": "6c7a4a074ff62754681360bda7c3994c8029742b",
"translation": "6c7a4a074ff62754681360bda7c3994c8029742b"
},
"settings.taskProperties.taskStatuses.badges.completed": {
"source": "1798b3ba42ee08ea09d9720b2d9c0181abbfe3e4",
"translation": "016bc923f7ff6c70ac895a10fe7d5205b7fb35f0"
@ -44976,6 +45048,10 @@
"source": "b3a4e0aed552d59293608963c489a5ab0e627c33",
"translation": "2fa2a3fc8971c190c41f3f2da4c579004c82a29a"
},
"settings.taskProperties.taskStatuses.howTheyWork.icon": {
"source": "990a304e39a65c9cab8405d690b593f3b01008f0",
"translation": "23ed20934d4de5998eef43686591068ca4589039"
},
"settings.taskProperties.taskStatuses.howTheyWork.completed": {
"source": "e6bd6dc7043b1d939ae805d795e5f3b6c2d4470b",
"translation": "2b7120e8e1d1fdc14d8013fb0f784020d4179f3e"
@ -45024,6 +45100,10 @@
"source": "511a000614ad52294121be47cb86170db16ba777",
"translation": "c82460401cb079eaada54ef1fc4aead0350f1aef"
},
"settings.taskProperties.taskStatuses.fields.icon": {
"source": "b6d7019b1817040a55577652ed26649af8ca0183",
"translation": "1071d6484b29d87d739bd13f00729bfcb6c302ad"
},
"settings.taskProperties.taskStatuses.fields.completed": {
"source": "208409ffed559a03204711e8976b06e3710deca5",
"translation": "4fc47c7b6e532be9bca0e26fb998757773d99999"
@ -45044,6 +45124,10 @@
"source": "f61eadaf153a7ccf995f48d19a000c62df62384c",
"translation": "6f1972e48ec8556645dee4ff7f555e4b76101ef7"
},
"settings.taskProperties.taskStatuses.placeholders.icon": {
"source": "6c7a4a074ff62754681360bda7c3994c8029742b",
"translation": "6c7a4a074ff62754681360bda7c3994c8029742b"
},
"settings.taskProperties.taskStatuses.badges.completed": {
"source": "1798b3ba42ee08ea09d9720b2d9c0181abbfe3e4",
"translation": "e99b48a29bdfdc828623c75b4e5f41367c3c076c"

View file

@ -804,6 +804,7 @@ export const de: TranslationTree = {
value: "Wert: Der interne Bezeichner, der in deinen Aufgabendateien gespeichert wird (z.B. \"in-progress\")",
label: "Label: Der Anzeigename in der Benutzeroberfläche (z.B. \"In Bearbeitung\")",
color: "Farbe: Visuelle Indikatorfarbe für Statuspunkt und Abzeichen",
icon: "Symbol: Optionaler Lucide-Symbolname zur Anzeige anstelle des farbigen Punktes (z.B. \"check\", \"circle\", \"clock\"). Symbole unter lucide.dev durchsuchen",
completed: "Abgeschlossen: Wenn angehakt, werden Aufgaben mit diesem Status als fertig betrachtet und können anders gefiltert werden",
autoArchive: "Auto-Archivierung: Wenn aktiviert, werden Aufgaben nach der angegebenen Verzögerung automatisch archiviert (1-1440 Minuten)",
orderNote: "Die Reihenfolge unten bestimmt die Sequenz beim Durchschalten der Status durch Klicken auf Aufgabenstatus-Abzeichen.",
@ -820,6 +821,7 @@ export const de: TranslationTree = {
value: "Wert:",
label: "Label:",
color: "Farbe:",
icon: "Symbol:",
completed: "Abgeschlossen:",
autoArchive: "Auto-Archivierung:",
delayMinutes: "Verzögerung (Minuten):",
@ -827,6 +829,7 @@ export const de: TranslationTree = {
placeholders: {
value: "in-bearbeitung",
label: "In Bearbeitung",
icon: "check, circle, clock",
},
badges: {
completed: "Abgeschlossen",

View file

@ -827,6 +827,7 @@ export const en: TranslationTree = {
value: 'Value: The internal identifier stored in your task files (e.g., "in-progress")',
label: 'Label: The display name shown in the interface (e.g., "In Progress")',
color: "Color: Visual indicator color for the status dot and badges",
icon: 'Icon: Optional Lucide icon name to display instead of colored dot (e.g., "check", "circle", "clock"). Browse icons at lucide.dev',
completed:
"Completed: When checked, tasks with this status are considered finished and may be filtered differently",
autoArchive:
@ -847,6 +848,7 @@ export const en: TranslationTree = {
value: "Value:",
label: "Label:",
color: "Color:",
icon: "Icon:",
completed: "Completed:",
autoArchive: "Auto-archive:",
delayMinutes: "Delay (minutes):",
@ -854,6 +856,7 @@ export const en: TranslationTree = {
placeholders: {
value: "in-progress",
label: "In Progress",
icon: "check, circle, clock",
},
badges: {
completed: "Completed",

View file

@ -804,6 +804,7 @@ export const es: TranslationTree = {
value: "Valor: El identificador interno almacenado en tus archivos de tarea (ej. \"en-progreso\")",
label: "Etiqueta: El nombre mostrado en la interfaz (ej. \"En progreso\")",
color: "Color: Color indicador visual para el punto de estado y distintivos",
icon: "Icono: Nombre de icono Lucide opcional para mostrar en lugar del punto de color (ej. \"check\", \"circle\", \"clock\"). Explora iconos en lucide.dev",
completed: "Completado: Cuando se marca, las tareas con este estado se consideran terminadas y pueden filtrarse de manera diferente",
autoArchive: "Auto-archivar: Cuando está habilitado, las tareas se archivarán automáticamente después del retraso especificado (1-1440 minutos)",
orderNote: "El orden de abajo determina la secuencia al alternar entre estados haciendo clic en distintivos de estado de tarea.",
@ -820,6 +821,7 @@ export const es: TranslationTree = {
value: "Valor:",
label: "Etiqueta:",
color: "Color:",
icon: "Icono:",
completed: "Completado:",
autoArchive: "Auto-archivar:",
delayMinutes: "Retraso (minutos):",
@ -827,6 +829,7 @@ export const es: TranslationTree = {
placeholders: {
value: "en-progreso",
label: "En progreso",
icon: "check, circle, clock",
},
badges: {
completed: "Completado",

View file

@ -804,6 +804,7 @@ export const fr: TranslationTree = {
value: "Valeur : L'identifiant interne stocké dans vos fichiers de tâches (ex. \"in-progress\")",
label: "Label : Le nom affiché dans l'interface (ex. \"En cours\")",
color: "Couleur : Couleur d'indicateur visuel pour les points et badges de statut",
icon: "Icône : Nom d'icône Lucide optionnel à afficher à la place du point coloré (ex. \"check\", \"circle\", \"clock\"). Parcourir les icônes sur lucide.dev",
completed: "Terminé : Quand coché, les tâches avec ce statut sont considérées comme finies et peuvent être filtrées différemment",
autoArchive: "Archivage auto : Quand activé, les tâches seront automatiquement archivées après le délai spécifié (1-1440 minutes)",
orderNote: "L'ordre ci-dessous détermine la séquence lors du passage d'un statut à l'autre en cliquant sur les badges de statut des tâches.",
@ -820,6 +821,7 @@ export const fr: TranslationTree = {
value: "Valeur :",
label: "Label :",
color: "Couleur :",
icon: "Icône :",
completed: "Terminé :",
autoArchive: "Archivage auto :",
delayMinutes: "Délai (minutes) :",
@ -827,6 +829,7 @@ export const fr: TranslationTree = {
placeholders: {
value: "en-cours",
label: "En cours",
icon: "check, circle, clock",
},
badges: {
completed: "Terminé",

View file

@ -804,6 +804,7 @@ export const ja: TranslationTree = {
value: "値:タスクファイルに保存される内部識別子(例:\"in-progress\"",
label: "ラベル:インターフェースに表示される表示名(例:\"進行中\"",
color: "色:ステータスドットとバッジの視覚的インジケーター色",
icon: "アイコンカラードットの代わりに表示するオプションのLucideアイコン名\"check\"、\"circle\"、\"clock\"。lucide.devでアイコンを閲覧",
completed: "完了:チェックすると、このステータスのタスクは完了と見なされ、異なってフィルタリングされる場合があります",
autoArchive: "自動アーカイブ有効にすると、指定された遅延後にタスクが自動的にアーカイブされます1-1440分",
orderNote: "以下の順序は、タスクステータスバッジをクリックしてステータスを切り替える際のシーケンスを決定します。",
@ -820,6 +821,7 @@ export const ja: TranslationTree = {
value: "値:",
label: "ラベル:",
color: "色:",
icon: "アイコン:",
completed: "完了:",
autoArchive: "自動アーカイブ:",
delayMinutes: "遅延(分):",
@ -827,6 +829,7 @@ export const ja: TranslationTree = {
placeholders: {
value: "in-progress",
label: "進行中",
icon: "check, circle, clock",
},
badges: {
completed: "完了",

View file

@ -807,6 +807,7 @@ export const pt: TranslationTree = {
value: 'Valor: O identificador interno armazenado em seus arquivos de tarefa (ex: "em-progresso")',
label: 'Rótulo: O nome de exibição mostrado na interface (ex: "Em Progresso")',
color: "Cor: Cor do indicador visual para o ponto de status e emblemas",
icon: 'Ícone: Nome de ícone Lucide opcional para exibir em vez do ponto colorido (ex: "check", "circle", "clock"). Navegue pelos ícones em lucide.dev',
completed: "Concluído: Quando marcado, tarefas com este status são consideradas finalizadas e podem ser filtradas de forma diferente",
autoArchive: "Arquivar automaticamente: Quando ativado, as tarefas serão automaticamente arquivadas após o atraso especificado (1-1440 minutos)",
orderNote: "A ordem abaixo determina a sequência ao alternar entre os status clicando nos emblemas de status da tarefa."
@ -823,13 +824,15 @@ export const pt: TranslationTree = {
value: "Valor:",
label: "Rótulo:",
color: "Cor:",
icon: "Ícone:",
completed: "Concluído:",
autoArchive: "Arquivar auto.:",
delayMinutes: "Atraso (minutos):"
},
placeholders: {
value: "em-progresso",
label: "Em Progresso"
label: "Em Progresso",
icon: "check, circle, clock"
},
badges: {
completed: "Concluído"

View file

@ -804,6 +804,7 @@ export const ru: TranslationTree = {
value: "Значение: Внутренний идентификатор, хранящийся в файлах задач (например, \"в-процессе\")",
label: "Метка: Отображаемое имя в интерфейсе (например, \"В процессе\")",
color: "Цвет: Цвет визуального индикатора для точки статуса и значков",
icon: "Иконка: Опциональное имя Lucide-иконки для отображения вместо цветной точки (например, \"check\", \"circle\", \"clock\"). Просмотрите иконки на lucide.dev",
completed: "Завершено: При отметке задачи с этим статусом считаются завершенными и могут фильтроваться по-разному",
autoArchive: "Автоархивирование: При включении задачи будут автоматически архивироваться после указанной задержки (1-1440 минут)",
orderNote: "Порядок ниже определяет последовательность при переключении между статусами нажатием на значки статуса задач.",
@ -820,6 +821,7 @@ export const ru: TranslationTree = {
value: "Значение:",
label: "Метка:",
color: "Цвет:",
icon: "Иконка:",
completed: "Завершено:",
autoArchive: "Автоархивирование:",
delayMinutes: "Задержка (минуты):",
@ -827,6 +829,7 @@ export const ru: TranslationTree = {
placeholders: {
value: "в-процессе",
label: "В процессе",
icon: "check, circle, clock",
},
badges: {
completed: "Завершено",

View file

@ -804,6 +804,7 @@ export const zh: TranslationTree = {
value: "值:存储在任务文件中的内部标识符(例如,\"进行中\"",
label: "标签:在界面中显示的显示名称(例如,\"进行中\"",
color: "颜色:状态点和徽章的视觉指示器颜色",
icon: "图标:可选的 Lucide 图标名称,用于替代彩色圆点显示(例如,\"check\"、\"circle\"、\"clock\")。在 lucide.dev 浏览图标",
completed: "已完成:选中时,具有此状态的任务被视为已完成,可能以不同方式过滤",
autoArchive: "自动归档启用时任务将在指定延迟后自动归档1-1440分钟",
orderNote: "下面的顺序确定点击任务状态徽章时循环状态的顺序。",
@ -820,6 +821,7 @@ export const zh: TranslationTree = {
value: "值:",
label: "标签:",
color: "颜色:",
icon: "图标:",
completed: "已完成:",
autoArchive: "自动归档:",
delayMinutes: "延迟(分钟):",
@ -827,6 +829,7 @@ export const zh: TranslationTree = {
placeholders: {
value: "进行中",
label: "进行中",
icon: "check, circle, clock",
},
badges: {
completed: "已完成",

View file

@ -60,6 +60,9 @@ export function renderTaskPropertiesTab(
statusHelpList.createEl("li", {
text: translate("settings.taskProperties.taskStatuses.howTheyWork.color"),
});
statusHelpList.createEl("li", {
text: translate("settings.taskProperties.taskStatuses.howTheyWork.icon"),
});
statusHelpList.createEl("li", {
text: translate("settings.taskProperties.taskStatuses.howTheyWork.completed"),
});
@ -283,6 +286,11 @@ function renderStatusList(container: HTMLElement, plugin: TaskNotesPlugin, save:
status.label
);
const colorInput = createCardInput("color", "", status.color);
const iconInput = createCardInput(
"text",
translate("settings.taskProperties.taskStatuses.placeholders.icon"),
status.icon || ""
);
const completedToggle = createCardToggle(status.isCompleted || false, (value) => {
status.isCompleted = value;
@ -393,6 +401,12 @@ function renderStatusList(container: HTMLElement, plugin: TaskNotesPlugin, save:
),
input: colorInput,
},
{
label: translate(
"settings.taskProperties.taskStatuses.fields.icon"
),
input: iconInput,
},
{
label: translate(
"settings.taskProperties.taskStatuses.fields.completed"
@ -447,6 +461,11 @@ function renderStatusList(container: HTMLElement, plugin: TaskNotesPlugin, save:
save();
});
iconInput.addEventListener("change", () => {
status.icon = iconInput.value.trim() || undefined;
save();
});
autoArchiveDelayInput.addEventListener("change", () => {
const value = parseInt(autoArchiveDelayInput.value);
if (!isNaN(value) && value >= 1 && value <= 1440) {

View file

@ -682,6 +682,7 @@ export interface StatusConfig {
value: string; // What gets written to YAML
label: string; // What displays in UI
color: string; // Hex color for UI elements
icon?: string; // Optional Lucide icon name (e.g., "circle", "check", "clock")
isCompleted: boolean; // Whether this counts as "done"
order: number; // Sort order (for cycling)
autoArchive: boolean; // Whether to auto-archive tasks with this status

View file

@ -146,6 +146,15 @@ function createStatusCycleHandler(
if (newStatusConfig) {
statusDot.style.borderColor = newStatusConfig.color;
// Update icon if configured
if (newStatusConfig.icon) {
statusDot.addClass("task-card__status-dot--icon");
statusDot.empty();
setIcon(statusDot, newStatusConfig.icon);
} else {
statusDot.removeClass("task-card__status-dot--icon");
statusDot.empty();
}
}
// Update card classes
@ -1366,6 +1375,11 @@ export function createTaskCard(
statusDot = mainRow.createEl("span", { cls: "task-card__status-dot" });
if (statusConfig) {
statusDot.style.borderColor = statusConfig.color;
// If status has an icon configured, render it instead of colored dot
if (statusConfig.icon) {
statusDot.addClass("task-card__status-dot--icon");
setIcon(statusDot, statusConfig.icon);
}
}
}

View file

@ -294,6 +294,39 @@
animation: status-complete 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Status dot with icon mode - uses Lucide icons from theme */
.tasknotes-plugin .task-card__status-dot--icon {
border: none;
background-color: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
}
.tasknotes-plugin .task-card__status-dot--icon svg {
width: 18px;
height: 18px;
color: var(--current-status-color, var(--tn-text-muted));
stroke-width: 2;
}
.tasknotes-plugin .task-card__status-dot--icon:hover svg {
color: var(--next-status-color, var(--tn-interactive-accent));
}
/* Completed state for icon mode */
.tasknotes-plugin .task-card--completed > .task-card__main-row .task-card__status-dot--icon {
background-color: transparent;
}
.tasknotes-plugin .task-card--completed > .task-card__main-row .task-card__status-dot--icon svg {
color: var(--current-status-color, var(--tn-color-success));
}
.tasknotes-plugin .task-card--completed > .task-card__main-row .task-card__status-dot--icon:hover svg {
color: var(--next-status-color, var(--tn-interactive-accent));
}
/* =================================================================
BADGE AREA - Groups secondary indicators (recurring, reminder, project)
================================================================= */