ClickUp Enhancements

clickup.js

// ==UserScript==
// @name         ClickUp Enhancements
// @namespace    plugfox
// @version      2024-04-11
// @description  ClickUp Enhancements
// @author       plugfox
// @run-at       document-idle
// @homepage     https://gist.github.com/PlugFox/608ef9f5caecf87c820d8ffd9468cc72
// @homepageURL  https://gist.github.com/PlugFox/608ef9f5caecf87c820d8ffd9468cc72
// @match        *://app.clickup.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=clickup.com
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // Add branch icon button
    function addBranchIconButton(taskId) {
        const id = 'branch-icon';
        if (document.getElementById(id)) return;
        const header = document.querySelector(panelSelector);
        if (!header) return;

        // Icon
        const icon = document.createElement('div');
        icon.id = id;
        icon.title = 'Copy branch name';
        icon.classList.add(extensionClass);
        //icon.style.position = 'fixed';
        //icon.style.bottom = '16px';
        //icon.style.right = '16px';
        //icon.style.zIndex = '1000';
        icon.style.cursor = 'pointer';
        icon.style.width = '24px';
        icon.style.height = '24px';
        icon.style.backgroundColor = 'lightblue';
        icon.style.borderRadius = '50%';
        icon.style.display = 'flex';
        icon.style.alignItems = 'center';
        icon.style.justifyContent = 'center';
        icon.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
        icon.style.fontSize = '16px';
        icon.textContent = '🪵';

        // Handle click
        icon.addEventListener('click', function () {
            //console.log('hello');
            //alert('hello');
            //const currentUrl = window.location.href;
            //window.open(`${currentUrl}`, '_blank');
            const title = document.querySelector('.cu-task-title__overlay')?.textContent?.trim().replace(/\s/g, '-').toLowerCase();
            navigator.clipboard.writeText(`${taskId}-${title}`);
        });

        // Append icon to icons row
        header?.appendChild(icon);
    }

    const loaderSelector = 'loading-placeholder-body';
    const panelSelector = 'cu-task-view-relationships-right-bar > div.cu-task-view-right-bar-relationship > div';
    const extensionClass = 'extension';

    function setUpTimer() {
        function checkUrl() {
            const url = window.location.href;
            const regex = /\/t\/[^\/]+\/(?<task>\w+-\d+)/;
            const match = url.match(regex);
            if (match && match.groups && match.groups.task) {
                addBranchIconButton(match.groups.task);
            }
        }
        setInterval(checkUrl, 1000);
    }

    window.addEventListener('load', function () {
        const observer = new MutationObserver((mutations) => {
            if (document.querySelector(loaderSelector)) return;
            observer.disconnect();
            setUpTimer();
        });
        observer.observe(document.body, {
            childList: true,
            subtree: true,
        });
    });
})();