Add a dropdown picker for custom task states (#1900)

* Add a dropdown picker for custom task states

Add a dropdown picker for custom task states that appears as a small
triangle next to the `[state]` allowing to quickly switch between
defined states with autocomplete.

States marked as done receive strikethrough styling on the task text.

Each state can be styled individually using the `data-task-state`
attribute, for example:

```space-style
[data-task-state=PLANNED] .sb-task-state {
  color: black;
  background-color: orange;
}
```

Signed-off-by: Matouš Jan Fialka <mjf@mjf.cz>

* Keep the current task state visible while the dropdown picker is open

Keep the current task state visible while the dropdown picker is open by
disabling built-in filtering and handling it manually — when the state
text exactly matches a known state all options are shown, otherwise
results are filtered by what the user has typed so far.

Signed-off-by: Matouš Jan Fialka <mjf@mjf.cz>

* Added on-hover completion styling

* Fix: Show all defined task states in the dropdown when clicking the picker on an unrecognized state instead of showing an empty menu

Signed-off-by: Matouš Jan Fialka <mjf@mjf.cz>

---------

Signed-off-by: Matouš Jan Fialka <mjf@mjf.cz>
Co-authored-by: Zef Hemel <zef@zef.me>

Author: mjf

client/codemirror/clean.ts

@@ -56,6 +56,17 @@ export function cleanModePlugins(client: Client) {
         void client.dispatchClickEvent(clickEvent);
       },
       getView: () => client.editorView,
+      doneStates: (() => {
+        const taskStates = client.config.get("taskStates", {});
+        const done = new Set<string>();
+        for (const [name, spec] of Object.entries(taskStates) as [
+          string,
+          any,
+        ][]) {
+          if (spec.done) done.add(name);
+        }
+        return done;
+      })(),
     }),
     listBulletPlugin(),
     tablePlugin(client),

client/codemirror/task.ts

@@ -1,4 +1,5 @@
 import { syntaxTree } from "@codemirror/language";
+import { startCompletion, completionStatus } from "@codemirror/autocomplete";
 import { Decoration, type EditorView, WidgetType } from "@codemirror/view";
 import type { NodeType } from "@lezer/common";
 import { decoratorStateField, isCursorInRange } from "./util.ts";
@@ -73,12 +74,56 @@ class CheckboxWidget extends WidgetType {
   }
 }
 
+/**
+ * Tiny widget placed right after an extended task's `]`.
+ * Click places cursor inside `[...]` and triggers autocomplete.
+ */
+class TaskDropdownWidget extends WidgetType {
+  constructor(
+    // Absolute position of the `[` (start of state content inside brackets)
+    readonly stateFrom: number,
+    // Absolute position of the `]` (end of TaskState node)
+    readonly stateTo: number,
+    readonly getView: () => EditorView | null,
+  ) {
+    super();
+  }
+
+  toDOM(): HTMLElement {
+    const span = document.createElement("span");
+    span.className = "sb-task-dropdown";
+    span.textContent = "\u25BE"; // Black Down-Pointing Small Triangle
+    span.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    });
+    span.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const view = this.getView();
+      if (!view) return;
+      const cursorPos = this.stateTo - 1;
+      view.dispatch({
+        selection: { anchor: cursorPos },
+      });
+      view.focus();
+      startCompletion(view);
+    });
+    return span;
+  }
+
+  eq(other: TaskDropdownWidget): boolean {
+    return this.stateFrom === other.stateFrom && this.stateTo === other.stateTo;
+  }
+}
+
 export function taskListPlugin({
   onCheckboxClick,
   getView,
+  doneStates,
 }: {
   onCheckboxClick: (pos: number) => void;
   getView: () => EditorView | null;
+  doneStates?: Set<string>;
 }) {
   return decoratorStateField((state) => {
     const widgets: any[] = [];
@@ -87,33 +132,62 @@ export function taskListPlugin({
         if (type.name !== "Task") return;
         // true/false if this is a checkbox, undefined when it's a custom-status task
         let checkboxStatus: boolean | undefined;
-        // Iterate inside the task node to find the checkbox
+        // Track TaskState end position for strikethrough start
+        let taskStateEnd = -1;
+
         node.toTree().iterate({
           enter: (ref) => iterateInner(ref.type, ref.from, ref.to),
         });
+
         if (checkboxStatus === true) {
-          widgets.push(
-            Decoration.mark({
-              tagName: "span",
-              class: "cm-task-checked",
-            }).range(from, to),
-          );
+          // Skip whitespace after TaskState
+          let strikeFrom = taskStateEnd !== -1 ? taskStateEnd : from;
+          while (
+            strikeFrom < to &&
+            " \t".includes(state.sliceDoc(strikeFrom, strikeFrom + 1))
+          ) {
+            strikeFrom++;
+          }
+          if (strikeFrom < to) {
+            widgets.push(
+              Decoration.mark({
+                tagName: "span",
+                class: "cm-task-checked",
+              }).range(strikeFrom, to),
+            );
+          }
         }
 
         function iterateInner(type: NodeType, nfrom: number, nto: number) {
           if (type.name !== "TaskState") return;
-          if (isCursorInRange(state, [from + nfrom, from + nto])) return;
+          taskStateEnd = from + nto;
           const checkbox = state.sliceDoc(from + nfrom, from + nto);
-          // Checkbox is checked if it has a 'x' in between the []
           if (checkbox === "[x]" || checkbox === "[X]") {
             checkboxStatus = true;
           } else if (checkbox === "[ ]") {
             checkboxStatus = false;
           }
           if (checkboxStatus === undefined) {
-            // Not replacing it with a widget
+            const stateText = checkbox.slice(1, -1);
+            if (doneStates?.has(stateText)) {
+              checkboxStatus = true;
+            }
+            // Mark the full TaskState node
+            widgets.push(
+              Decoration.mark({
+                attributes: { "data-task-state": stateText },
+              }).range(from + nfrom, from + nto),
+            );
+            // Always show dropdown
+            const absTo = from + nto;
+            const dec = Decoration.widget({
+              widget: new TaskDropdownWidget(from + nfrom, absTo, getView),
+              side: 1,
+            });
+            widgets.push(dec.range(absTo));
             return;
           }
+          if (isCursorInRange(state, [from + nfrom, from + nto])) return;
           const dec = Decoration.replace({
             widget: new CheckboxWidget(
               checkboxStatus,

client/styles/colors.scss

@@ -225,9 +225,21 @@
       color: var(--editor-completion-detail-color);
     }
 
-    li[aria-selected] .cm-completionDetail {
+    li[aria-selected] .cm-completionDetail,
+    li:hover .cm-completionDetail {
       color: var(--editor-completion-detail-selected-color);
     }
+
+    ul:hover li[aria-selected] {
+      background: transparent;
+      color: var(--modal-color);
+    }
+
+    ul li:hover,
+    ul li[aria-selected]:hover {
+      background: #17c;
+      color: white;
+    }
   }
 
   .cm-list-bullet::after {

client/styles/editor.scss

@@ -349,6 +349,16 @@
     font-size: 91%;
   }
 
+  .sb-task-dropdown {
+    cursor: pointer;
+    opacity: 0.4;
+    user-select: none;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
   .sb-task-deadline {
     background-color: rgba(22, 22, 22, 0.07);
   }

plugs/index/complete.ts

@@ -50,15 +50,32 @@ function humanReadableSchemaType(type: any): string {
  * Task state completion
  */
 export async function completeTaskState(completeEvent: CompleteEvent) {
-  const taskMatch = /([-*]\s+\[)([^[\]]+)$/.exec(completeEvent.linePrefix);
+  const taskMatch = /([-*]\s+\[)([^[\]]*)$/.exec(completeEvent.linePrefix);
   if (!taskMatch) {
     return null;
   }
   const allStates = Object.keys(await config.get("taskStates", {}));
+  const typed = taskMatch[2];
+
+  let options: string[];
+  if (!typed) {
+    // Nothing typed — show all
+    options = allStates;
+  } else if (allStates.includes(typed)) {
+    // Exact match (dropdown click on existing state) — show all
+    options = allStates;
+  } else {
+    // Partial typing — filter by prefix, fall back to all if nothing matches
+    const filtered = allStates.filter((s) =>
+      s.toLowerCase().startsWith(typed.toLowerCase()),
+    );
+    options = filtered.length > 0 ? filtered : allStates;
+  }
 
   return {
-    from: completeEvent.pos - taskMatch[2].length,
-    options: allStates.map((state) => ({
+    from: completeEvent.pos - typed.length,
+    filter: false,
+    options: options.map((state) => ({
       label: state,
     })),
   };