[Todoist] Adds labels for in-focus tasks (#13444)

* feat(todoist): Focus labels for tasks

closes #12730

* refactor(todoist): changed the preference name

closes #12730

* Update CHANGELOG.md and optimise images

---------

Co-authored-by: raycastbot <bot@raycast.com>

extensions/todoist/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Todoist Changelog
 
+## [Focus Label] - 2024-07-12
+
+Adds a preference to set a specified label for the task in focus. The label will be removed when the task is not in focus.
+This helps filter in-focus tasks on Todoist UI. The label will only be applied if the preference textfield is not empty.
+
 ## [Todoist Quicklinks] - 2024-07-09
 
 - Added a new action to create quicklinks for various views in Todoist (e.g., Today, specific projects, etc.).

extensions/todoist/package.json

@@ -236,6 +236,14 @@
       "title": "Todoist Token",
       "description": "Your Todoist Token. Find it in Todoist integration settings view.",
       "placeholder": "Enter your Todoist token"
+    },
+    {
+      "name": "focusLabelName",
+      "type": "textfield",
+      "required": false,
+      "title": "Focus Label",
+      "description": "Shared label name to apply to your focused task. No label will be applied if left empty.",
+      "placeholder": "raycast-focus"
     }
   ],
   "dependencies": {

extensions/todoist/src/hooks/useFocusedTask.ts

@@ -2,27 +2,52 @@ import { getPreferenceValues, Toast, environment, showToast } from "@raycast/api
 import { useCachedState } from "@raycast/utils";
 import { useEffect } from "react";
 
-import { Task } from "../api";
+import { initialSync, SyncData, Task, updateTask } from "../api";
 import { truncateMiddle } from "../helpers/menu-bar";
 
+import useCachedData from "./useCachedData";
+
 export const useFocusedTask = () => {
   const { taskWidth } = getPreferenceValues<Preferences.MenuBar>();
+  const { focusLabelName } = getPreferenceValues<Preferences>();
 
   const { commandMode } = environment;
 
   const [focusedTask, setFocusedTask] = useCachedState("todoist.focusedTask", { id: "", content: "" });
+  const [data, setData] = useCachedData();
 
   async function unfocusTask() {
+    if (focusLabelName && focusLabelName.trim().length > 0) {
+      if (commandMode === "view") {
+        await showToast({ style: Toast.Style.Animated, title: "Removing focus label" });
+      }
+
+      // Need to sync the task before removing the label to avoid race condition.
+      const data = (await initialSync()) as SyncData;
+      const labels = data.items
+        .find((task: Task) => task.id === focusedTask.id)
+        ?.labels.filter((label) => label !== focusLabelName.trim());
+      await updateTask({ id: focusedTask.id, labels }, { data, setData });
+    }
+
     setFocusedTask({ id: "", content: "" });
 
     if (commandMode === "view") {
       await showToast({ style: Toast.Style.Success, title: "No more focus" });
     }
   }
 
-  async function focusTask({ id, content }: Task) {
+  async function focusTask({ id, content, labels }: Task) {
     setFocusedTask({ id, content });
 
+    if (focusLabelName && focusLabelName.trim().length > 0) {
+      if (commandMode === "view") {
+        await showToast({ style: Toast.Style.Animated, title: "Adding focus label" });
+      }
+
+      await updateTask({ id, labels: [...labels, focusLabelName.trim()] }, { data, setData });
+    }
+
     if (commandMode === "view") {
       await showToast({ style: Toast.Style.Success, title: `Focus on "${content}" 🎯` });
     }