fix(linear): make board view to resolve projects and tags again

src/content/linear.js

@@ -1,62 +1,80 @@
-'use strict';
 /**
  * @name Linear
  * @urlAlias linear.app
  * @urlRegex *://linear.app/*
  */
 
+'use strict'
+
 // Add linear integration in table view only
 togglbutton.render(
   'a[data-dnd-dragging]:not(.toggl)',
   { observe: true },
   function (elem) {
-    const idElem = elem.querySelector('span[data-column-id="issueId"]');
-    const id = idElem ? idElem.textContent : '';
-    const titleElem = idElem.parentElement.nextSibling;
-    const title = titleElem ? titleElem.textContent : '';
+    const idElem = elem.querySelector('span[data-column-id="issueId"]')
+    const id = idElem ? idElem.textContent : ''
+    const titleElem = idElem.parentElement.nextSibling
+    const title = titleElem ? titleElem.textContent : ''
 
     const link = togglbutton.createTimerLink({
       description: title,
       className: 'linear-table',
       buttonType: 'minimal', // button type, if skipped will render full size
-    });
-    const existingTogglButton = elem.querySelector('.toggl-button');
+    })
+    const existingTogglButton = elem.querySelector('.toggl-button')
     if (existingTogglButton) {
       // we need to remove any existing toggl buttons
-      existingTogglButton.replaceChildren(link);
+      existingTogglButton.replaceChildren(link)
 
-      return;
+      return
     }
-    titleElem.parentElement.insertBefore(link, titleElem.nextSibling);
-  }
-);
-
+    titleElem.parentElement.insertBefore(link, titleElem.nextSibling)
+  },
+)
 
 // Add linear integration in board view only
 togglbutton.render(
   'a[data-board-item]:not(.toggl)',
   { observe: true },
   function (elem) {
-    const id = elem.querySelector('div:first-child>div:first-child>div:first-child>span:first-child')?.textContent?.split('›')[0];
-    const title = elem.querySelector('div:first-child>div:first-child>div:first-child>span:first-child+div')?.textContent;
+    // Get the first contextual menu which contains ID and title
+    const mainContainer = elem.querySelector('div[data-contextual-menu="true"]')
+
+    // ID is in the first span, title is in the next sibling container's span
+    const id = mainContainer?.querySelector('span > span')?.textContent
+    const title = mainContainer
+      ?.querySelector('div > span:last-child')
+      ?.textContent?.trim()
 
-    // Project selection only works if an existing Toggl project matches the name of the project from the linear card
-    const project = elem.querySelector(':scope>div:first-child>div:nth-child(2)>div:not(:first-child):not([role="button"])>span:only-child>div:only-child[role="button"]>div+span[type="micro"]')?.textContent;
+    // Find project by looking for the span after the Project svg icon
+    const project = elem
+      .querySelector('svg[aria-label="Project"]')
+      ?.closest('div')
+      ?.nextElementSibling?.textContent?.trim()
 
-    // Gets the labels on the card as a string array.
-    const labels = [...elem.querySelectorAll(':scope>div:first-child>div:nth-child(2)>div:not([role="button"])>div[role="button"]')].map((n)=>n.textContent)
+    // Get labels from elements that have a color indicator div
+    const labels = [...elem.querySelectorAll('.sc-gHYhXS')] // Elements with color indicators
+      .map((colorDiv) =>
+        colorDiv
+          .closest('div[data-contextual-menu="true"]')
+          ?.querySelector('span:last-child')
+          ?.textContent?.trim(),
+      )
+      .filter(Boolean)
 
     const link = togglbutton.createTimerLink({
       description: title,
       buttonType: 'minimal', // button type, if skipped will render full size
       projectName: project,
       // For some reason, tag selection isn't working even if the like-named tags have already been created in Toggl
       tags: [id, ...labels],
-    });
-    elem.style.position = 'relative';
-    link.style.bottom = '13px';
-    link.style.right = '13px';
-    link.style.position = 'absolute';
-    elem.appendChild(link);
-  }
-);
+    })
+
+    elem.style.position = 'relative'
+    link.style.bottom = '13px'
+    link.style.right = '13px'
+    link.style.position = 'absolute'
+
+    elem.appendChild(link)
+  },
+)