Weekly Planner - a drag-and-drop task board built with Render Notes

[ricolandia]

I wanted a lightweight weekly planner that lives inside TriliumNext - no external app, no switching context. The result is a Render Note that reads all open to-do items across your vault and displays them as a drag-and-drop board, with a Backlog column and one column per day (Mon–Sun).

Note: It is based on the discussion: https://github.com/orgs/TriliumNext/discussions/9226 . The original code inspiration was made by https://github.com/ZangXincz

What it does

• Aggregates all open tasks from every note that contains a to-do list, grouped by source note
• Weekly board with Backlog + Mon through Sun columns
• Week navigation — ‹ / › arrows to move between weeks, plus a "today" button to snap back
• Today's column highlighted with a distinct border
• Drag-and-drop on desktop; tap → day picker sheet on mobile
• Sync - with web version( on server ), and with Mobile app( tested with Pocket Trilium - by @Nriver )
• "Clear week" button removes only the current week's assignments, leaving other weeks untouched
• Click any task (desktop) to jump directly to its source note
• Respects your theme via CSS variables — works on any TriliumNext theme out of the box

Screenshots

Setup

1. Create a note of type JS Frontend and paste the code below into it.
2. Create a note of type Render anywhere in your tree (I keep mine under a Panels or Tools section).
3. Create a note of type Code - JSON, with the labels #plannerdata #data
4. On the Render note, add the relation: ~renderNote → the JS Frontend note.
5. Open the Render note. Press F5 to refresh if it appears blank on first load.

That's it

Download the version 1.0 in the first comment below

Happy to hear feedback — especially on the mobile sync issue, which depends on when TriliumNext hydrates blobs after a sync.

[ricolandia]

Hotfix:

• Sync and Save state.

Note: To work correctly, we need 3 files: render note, JS code and a note for data storage( json).

planner_1.0_fix.zip

Import the zip and click on the render note

Screenshot

[ricolandia]

Planner unified with Open tasks panel(searcher):

What changed compared to the two original scripts:

Shared architecture

• Unified fetchTasks — called once, feeds both panels. It now also tracks checkboxIndex (necessary for mark-done), something the original planner didn't do.
• plannerData and allTasks act as global state: any action in one panel re-renders the other.

Synchronization between panels

• Dragging in the planner → renderTasks() updates the day badges in the right panel.
• Marking as done in the right panel → renderPlanner() removes the task from the Backlog (or the column it was in).
• "Clear week" in the planner → badges disappear from the right panel.

Planned day badge

• Tasks that already have an allocated day in the planner display a discreet badge (e.g., Wed 14/5) in the tasks panel — so you can see the context without leaving the column.

Events delegated only once

• The planner recreates its DOM on every renderPlanner(), so its handlers are rebound normally. The task panel uses permanent delegation on $tk via bindTaskEvents() called a single time during init — preventing handler accumulation on every re-render.

Important Note: The Open Tasks panel scans every note across the entire database to locate all pending tasks. It presents an organized list of the notes containing these open tasks, allowing you to check off individual tasks directly from the panel, or entering that note, if you prefer.

Screenshot

The code for the JS Frontend note (below).

Note: Remenber that you need a note to store data:

1. Create a note with the name "Planner Data" of type Code - JSON, with the labels #plannerdata #data
2. You need a render note to show the planner and the tasks. On the Render note, add the relation: ~renderNote → the JS Frontend note.

Details

/**
 * ╔══════════════════════════════════════════════════════════════╗
 * ║          Workspace de Tarefas — TriliumNext                 ║
 * ║                                                             ║
 * ║  ┌──────────────────────────┬──────────────┐               ║
 * ║  │   Planejador Semanal     │ Tarefas       │               ║
 * ║  │        (2/3)             │ Abertas (1/3) │               ║
 * ║  └──────────────────────────┴──────────────┘               ║
 * ╚══════════════════════════════════════════════════════════════╝
 *
 * INTERAÇÕES:
 *   Planner  →  arrastar tarefa entre colunas (desktop)
 *               tap → sheet picker (mobile)
 *   Tarefas  →  ☐ clicar no quadradinho  →  marca como concluída na nota
 *               clicar no texto          →  abre a nota de origem
 *               badge [Qua 14/5]         →  indica dia já planejado
 *
 * SETUP:
 *   1. Nota "JS Frontend" → cole este código
 *   2. Nota "Render"      → ~renderNote → JS acima
 *   3. Crie uma nota de texto qualquer com a label  #plannerdata
 *      (corpo vazio — ela armazena o JSON do planejador)
 *   4. Abra a nota Render (F5 para recarregar)
 */

(async function () {

    /* ═══════════════════════════════════════════════════════════
       0. ROOT — layout de duas colunas
    ═══════════════════════════════════════════════════════════ */

    const $root = $container;

    $root.css({
        display:    'flex',
        height:     '100%',
        overflow:   'hidden',
        fontFamily: 'var(--detail-font-family,"Segoe UI",sans-serif)',
        fontSize:   '14px',
        color:      'var(--main-text-color)',
        boxSizing:  'border-box',
    });

    // painel esquerdo — Planejador (2/3)
    const $pl = $('<div>').css({
        flex:          '2',
        minWidth:      0,
        overflow:      'hidden',
        display:       'flex',
        flexDirection: 'column',
        borderRight:   '1px solid var(--main-border-color,#313244)',
    }).appendTo($root);

    // painel direito — Tarefas Abertas (1/3)
    const $tk = $('<div>').css({
        flex:          '1',
        minWidth:      '200px',
        maxWidth:      '320px',
        overflow:      'hidden',
        display:       'flex',
        flexDirection: 'column',
    }).appendTo($root);

    const loadingHtml = `
        <div style="display:flex;align-items:center;gap:10px;padding:24px;color:var(--muted-text-color)">
            <style>@keyframes spin{to{transform:rotate(360deg)}}</style>
            <svg width="13" height="13" viewBox="0 0 16 16" fill="none"
                 style="animation:spin 1s linear infinite;flex-shrink:0">
                <circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="2"
                        stroke-dasharray="28" stroke-dashoffset="10"/>
            </svg>
            Carregando…
        </div>`;

    $pl.html(loadingHtml);
    $tk.html(loadingHtml);


    /* ═══════════════════════════════════════════════════════════
       1. ESTADO COMPARTILHADO
    ═══════════════════════════════════════════════════════════ */

    let weekOffset  = 0;
    let allTasks    = [];    // { id, text, checkboxIndex, noteId, noteTitle }
    let plannerData = {};    // { taskId: 'YYYY-MM-DD' }


    /* ═══════════════════════════════════════════════════════════
       2. PERSISTÊNCIA (nota #plannerdata)
    ═══════════════════════════════════════════════════════════ */

    async function loadPlannerData() {
        return await api.runOnBackend(() => {
            const note = api.getNoteWithLabel('plannerdata');
            if (!note) return {};
            try {
                const raw = note.getContent();
                return raw ? JSON.parse(raw) : {};
            } catch (_) { return {}; }
        });
    }

    async function save() {
        try {
            const data = JSON.stringify(plannerData, null, 2);
            await api.runAsyncOnBackendWithManualTransactionHandling(
                async (jsonData) => {
                    const note = api.getNoteWithLabel('plannerdata');
                    if (!note) throw new Error('Nota #plannerdata não encontrada');
                    note.setContent(jsonData);
                    await note.save();
                },
                [data]
            );
        } catch (err) { console.error('save error:', err); }
    }


    /* ═══════════════════════════════════════════════════════════
       3. BUSCA DE TAREFAS (rastreia checkboxIndex por nota)
    ═══════════════════════════════════════════════════════════ */

    async function fetchTasks() {

        const groups = await api.runOnBackend(() => {

            const rows = api.sql.getRows(`
                SELECT noteId, title
                FROM notes
                WHERE isDeleted = 0 AND type = 'text'
                ORDER BY title COLLATE NOCASE
            `);

            const result = [];

            for (const row of rows) {
                const note = api.getNote(row.noteId);
                if (!note) continue;
                const content = note.getContent();
                if (!content || !content.includes('checkbox')) continue;

                const tasks = [];
                const re = /<input\s[^>]*type=["']checkbox["'][^>]*>/gi;
                let m;
                let cbIndex = 0; // conta TODOS os checkboxes da nota (incl. marcados)

                while ((m = re.exec(content)) !== null) {

                    const isChecked = /checked/i.test(m[0]);

                    if (!isChecked) {
                        const ss = content.indexOf('<span', m.index);
                        const se = content.indexOf('</span>', ss);
                        if (ss !== -1 && se !== -1) {
                            const raw = content.substring(
                                content.indexOf('>', ss) + 1, se
                            );
                            const text = raw
                                .replace(/<[^>]+>/g, '')
                                .replace(/&nbsp;/g,  ' ')
                                .replace(/&amp;/g,   '&')
                                .replace(/&lt;/g,    '<')
                                .replace(/&gt;/g,    '>')
                                .replace(/&quot;/g,  '"')
                                .replace(/&#39;/g,   "'")
                                .replace(/\s+/g,     ' ')
                                .trim();
                            if (text) tasks.push({ text, cbIndex });
                        }
                    }

                    cbIndex++; // incrementa sempre, mesmo para marcados
                }

                if (tasks.length) {
                    result.push({
                        noteId: row.noteId,
                        title:  row.title || '(sem título)',
                        tasks,
                    });
                }
            }

            return result;
        });

        allTasks = [];

        for (const g of groups) {
            for (const task of g.tasks) {
                const id = `${g.noteId}::` +
                           task.text.replace(/\s+/g, '_').substring(0, 48);
                allTasks.push({
                    id,
                    text:           task.text,
                    checkboxIndex:  task.cbIndex,
                    noteId:         g.noteId,
                    noteTitle:      g.title,
                });
            }
        }
    }


    /* ═══════════════════════════════════════════════════════════
       4. MARCAR COMO CONCLUÍDA
    ═══════════════════════════════════════════════════════════ */

    async function markDone(task) {

        await api.runOnBackend((noteId, cbIndex) => {
            const note = api.getNote(noteId);
            let content = note.getContent();
            let count = 0;
            content = content.replace(
                /<input\s+type="checkbox"([^>]*?)>/gi,
                (match, attrs) => {
                    if (count++ === cbIndex) {
                        if (/\bchecked\b/i.test(attrs)) return match;
                        return `<input type="checkbox"${attrs} checked>`;
                    }
                    return match;
                }
            );
            note.setContent(content);
        }, [task.noteId, task.checkboxIndex]);

        // remove do estado compartilhado
        allTasks = allTasks.filter(t => t.id !== task.id);
        delete plannerData[task.id];
    }


    /* ═══════════════════════════════════════════════════════════
       5. HELPERS DE CALENDÁRIO
    ═══════════════════════════════════════════════════════════ */

    const todayBase = new Date();
    todayBase.setHours(0, 0, 0, 0);

    function getWeekCols(offset) {
        const ref = new Date(todayBase);
        ref.setDate(todayBase.getDate() + offset * 7);
        const dow = ref.getDay();
        const mon = new Date(ref);
        mon.setDate(ref.getDate() + (dow === 0 ? -6 : 1 - dow));
        const labels = ['Seg','Ter','Qua','Qui','Sex','Sáb','Dom'];
        return labels.map((label, i) => {
            const d = new Date(mon);
            d.setDate(mon.getDate() + i);
            const iso = d.toISOString().slice(0, 10);
            return {
                key:     iso,
                label,
                dateStr: `${d.getDate()}/${d.getMonth() + 1}`,
                isToday: d.getTime() === todayBase.getTime(),
            };
        });
    }

    function weekLabel(cols) {
        const months = ['jan','fev','mar','abr','mai','jun',
                        'jul','ago','set','out','nov','dez'];
        const d0 = new Date(cols[0].key + 'T12:00:00');
        const d1 = new Date(cols[6].key + 'T12:00:00');
        if (d0.getMonth() === d1.getMonth())
            return `${d0.getDate()}–${d1.getDate()} ${months[d0.getMonth()]} ${d0.getFullYear()}`;
        return `${d0.getDate()} ${months[d0.getMonth()]} – ${d1.getDate()} ${months[d1.getMonth()]} ${d1.getFullYear()}`;
    }

    function dayBadge(isoDate) {
        const d = new Date(isoDate + 'T12:00:00');
        const days = ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'];
        return `${days[d.getDay()]} ${d.getDate()}/${d.getMonth() + 1}`;
    }


    /* ═══════════════════════════════════════════════════════════
       6. HELPERS GERAIS
    ═══════════════════════════════════════════════════════════ */

    const esc = s => String(s)
        .replace(/&/g,'&amp;').replace(/</g,'&lt;')
        .replace(/>/g,'&gt;').replace(/"/g,'&quot;');

    const isMobile     = () => window.innerWidth < 700;
    const getBacklog   = () => allTasks.filter(t => !plannerData[t.id]);
    const getDayTasks  = iso => allTasks.filter(t => plannerData[t.id] === iso);


    /* ═══════════════════════════════════════════════════════════
       7. RENDER — PLANEJADOR ($pl)
    ═══════════════════════════════════════════════════════════ */

    function renderPlanner() {

        const weekCols      = getWeekCols(weekOffset);
        const label         = weekLabel(weekCols);
        const mobile        = isMobile();
        const isCurrentWeek = weekOffset === 0;
        const total         = allTasks.length;
        const weekKeys      = new Set(weekCols.map(c => c.key));
        const planned       = allTasks.filter(t => weekKeys.has(plannerData[t.id])).length;

        const allCols = [
            { key: 'backlog', label: 'Backlog', dateStr: 'sem data', isToday: false, isBacklog: true },
            ...weekCols.map(c => ({ ...c, isBacklog: false })),
        ];

        let html = `
        <style>
            .pl-board { display:flex;gap:10px;overflow-x:auto;padding:0 16px 20px;flex:1;
                        align-items:flex-start;-webkit-overflow-scrolling:touch; }
            .pl-col   { flex-shrink:0;display:flex;flex-direction:column;border-radius:8px;
                        border:1px solid var(--main-border-color,#313244);
                        background:var(--accented-background-color,#1e1e2e);
                        max-height:calc(100vh - 190px); }
            .pl-col.today { border-color:var(--main-active-border-color,#89b4fa); }
            .pl-col-head  { padding:10px 12px 8px;border-bottom:1px solid var(--main-border-color,#313244);flex-shrink:0; }
            .pl-col-label { font-size:11px;font-weight:700;text-transform:uppercase;
                            letter-spacing:.08em;color:var(--muted-text-color,#888); }
            .pl-col.today .pl-col-label { color:var(--main-active-border-color,#89b4fa); }
            .pl-col-sub   { font-size:11px;color:var(--muted-text-color,#888);margin-top:2px; }
            .pl-tasks { padding:8px;display:flex;flex-direction:column;gap:6px;
                        overflow-y:auto;flex:1;min-height:64px; }
            .pl-task  { background:var(--more-accented-background-color,#313244);border-radius:5px;
                        padding:7px 10px;font-size:13px;line-height:1.4;cursor:grab;
                        border:1.5px solid transparent;transition:border-color .1s,opacity .15s;
                        user-select:none; }
            .pl-task:hover   { border-color:var(--main-border-color,#45475a); }
            .pl-task.dragging { opacity:.35;cursor:grabbing; }
            .pl-task-note { font-size:10px;color:var(--muted-text-color,#888);margin-top:3px;
                            overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
            .pl-drop { display:none;height:40px;border:2px dashed var(--main-border-color,#45475a);
                       border-radius:5px;opacity:.4; }
            .pl-tasks.drag-over { background:rgba(137,180,250,.06); }
            .pl-tasks.drag-over .pl-drop { display:block; }
            .pl-nav-btn { background:none;border:1px solid var(--main-border-color);border-radius:5px;
                          color:var(--main-text-color);font-size:16px;width:28px;height:26px;
                          cursor:pointer;line-height:1;padding:0; }
            .pl-nav-btn:hover { background:var(--accented-background-color); }
            .pl-today-btn { font-size:11px;padding:2px 8px;background:none;
                            border:1px solid var(--main-border-color);border-radius:4px;
                            cursor:pointer;color:var(--muted-text-color); }
            .pl-today-btn:hover { color:var(--main-text-color); }
            .pl-icon-btn { background:none;border:1px solid var(--main-border-color);
                           border-radius:4px;color:var(--muted-text-color);font-size:12px;
                           padding:2px 8px;cursor:pointer; }
            .pl-icon-btn:hover { color:var(--main-text-color); }
            /* mobile picker */
            .pl-day-picker { position:fixed;inset:0;background:rgba(0,0,0,.6);
                             display:flex;align-items:flex-end;z-index:9999; }
            .pl-day-sheet  { background:var(--main-background-color,#1e1e2e);
                             border-radius:16px 16px 0 0;padding:20px 16px 32px;
                             width:100%;max-height:80vh;overflow-y:auto; }
            .pl-day-sheet h4 { margin:0 0 14px;font-size:15px;font-weight:600;
                               overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
            .pl-day-btn { display:block;width:100%;padding:11px 14px;margin-bottom:6px;
                          background:var(--accented-background-color,#313244);border:none;
                          border-radius:7px;color:var(--main-text-color);font-size:14px;
                          text-align:left;cursor:pointer; }
            .pl-day-btn:hover  { background:var(--more-accented-background-color); }
            .pl-day-btn.active { color:var(--main-active-border-color,#89b4fa);font-weight:600; }
            .pl-cancel-btn { display:block;width:100%;padding:11px;background:none;
                             border:1px solid var(--main-border-color);border-radius:7px;
                             color:var(--muted-text-color);font-size:14px;cursor:pointer;margin-top:4px; }
        </style>

        <div style="display:flex;flex-direction:column;height:100%;overflow:hidden;">

            <!-- CABEÇALHO PLANNER -->
            <div style="display:flex;align-items:center;gap:7px;padding:10px 16px;
                        flex-shrink:0;border-bottom:1px solid var(--main-border-color,#313244);
                        flex-wrap:wrap;">
                <span style="font-size:15px;font-weight:700;">Planejador</span>
                <button class="pl-nav-btn" id="pl-prev" title="Semana anterior">‹</button>
                <span style="font-size:13px;color:var(--muted-text-color);white-space:nowrap;">
                    ${esc(label)}
                </span>
                <button class="pl-nav-btn" id="pl-next" title="Próxima semana">›</button>
                ${!isCurrentWeek ? `<button class="pl-today-btn" id="pl-now">hoje</button>` : ''}
                <span style="font-size:11px;color:var(--muted-text-color);margin-left:auto;">
                    ${planned}/${total}
                </span>
                <button class="pl-icon-btn" id="pl-clear"  title="Limpar esta semana">↺</button>
                <button class="pl-icon-btn" id="pl-reload" title="Recarregar tarefas">⟳</button>
            </div>

            <!-- BOARD -->
            <div class="pl-board">
        `;

        for (const col of allCols) {

            const tasks = col.isBacklog ? getBacklog() : getDayTasks(col.key);
            const width = col.isBacklog
                ? (mobile ? '150px' : '180px')
                : (mobile ? '130px' : '145px');

            html += `
            <div class="pl-col${col.isToday ? ' today' : ''}" style="width:${width};">
                <div class="pl-col-head">
                    <div class="pl-col-label">${esc(col.label)}</div>
                    <div class="pl-col-sub">
                        ${esc(col.dateStr)}${tasks.length ? ' · ' + tasks.length : ''}
                    </div>
                </div>
                <div class="pl-tasks" data-col="${esc(col.key)}">
                    ${tasks.map(t => `
                    <div class="pl-task"
                         draggable="${!mobile}"
                         data-task-id="${esc(t.id)}"
                         data-note-id="${esc(t.noteId)}">
                        <div>${esc(t.text)}</div>
                        ${!col.isBacklog
                            ? `<div class="pl-task-note">${esc(t.noteTitle)}</div>`
                            : ''}
                    </div>`).join('')}
                    <div class="pl-drop"></div>
                </div>
            </div>`;
        }

        html += `</div></div>`;

        $pl.html(html);
        bindPlannerEvents(weekCols, allCols);
    }


    /* ═══════════════════════════════════════════════════════════
       8. EVENTOS DO PLANEJADOR
    ═══════════════════════════════════════════════════════════ */

    function bindPlannerEvents(weekCols, allCols) {

        $pl.find('#pl-prev').on('click', () => { weekOffset--; renderPlanner(); });
        $pl.find('#pl-next').on('click', () => { weekOffset++; renderPlanner(); });
        $pl.find('#pl-now').on('click',  () => { weekOffset = 0; renderPlanner(); });

        $pl.find('#pl-reload').on('click', async function () {
            $(this).text('…');
            try { await fetchTasks(); } catch (_) {}
            renderPlanner();
            renderTasks();
        });

        $pl.find('#pl-clear').on('click', () => {
            if (!confirm(`Limpar planejamento de ${weekLabel(weekCols)}?`)) return;
            const weekKeys = new Set(weekCols.map(c => c.key));
            for (const t of allTasks) {
                if (weekKeys.has(plannerData[t.id])) delete plannerData[t.id];
            }
            save();
            renderPlanner();
            renderTasks(); // badges do painel direito também atualizam
        });

        /* ── Desktop: drag-and-drop ─────────────────────────── */
        if (!isMobile()) {

            let draggingId = null;

            $pl.find('.pl-task').each(function () {

                this.addEventListener('dragstart', function (e) {
                    draggingId = this.dataset.taskId;
                    e.dataTransfer.effectAllowed = 'move';
                    setTimeout(() => this.classList.add('dragging'), 0);
                });

                this.addEventListener('dragend', function () {
                    this.classList.remove('dragging');
                    $pl.find('.pl-tasks').removeClass('drag-over');
                });

                this.addEventListener('click', function () {
                    if (!this.classList.contains('was-dragged'))
                        api.activateNote(this.dataset.noteId);
                    this.classList.remove('was-dragged');
                });
            });

            $pl.find('.pl-tasks').each(function () {
                const zone = this;
                zone.addEventListener('dragover', e => {
                    e.preventDefault();
                    zone.classList.add('drag-over');
                });
                zone.addEventListener('dragleave', e => {
                    if (!zone.contains(e.relatedTarget))
                        zone.classList.remove('drag-over');
                });
                zone.addEventListener('drop', async e => {
                    e.preventDefault();
                    if (!draggingId) return;
                    const col = zone.dataset.col;
                    if (col === 'backlog') delete plannerData[draggingId];
                    else plannerData[draggingId] = col;
                    await save();
                    renderPlanner();
                    renderTasks(); // atualiza badge no painel direito
                });
            });
        }

        /* ── Mobile: tap → sheet picker ─────────────────────── */
        if (isMobile()) {

            $pl.find('.pl-task').on('click', function () {

                const taskId   = $(this).data('taskId');
                const noteId   = $(this).data('noteId');
                const taskText = $(this).find('div').first().text();
                const current  = plannerData[taskId] || 'backlog';

                $pl.append(`
                <div class="pl-day-picker" id="pl-picker">
                    <div class="pl-day-sheet">
                        <h4>${esc(taskText)}</h4>
                        ${allCols.map(col => `
                        <button class="pl-day-btn${current === col.key ? ' active' : ''}"
                                data-col="${esc(col.key)}">
                            ${col.isBacklog
                                ? '↩ Backlog'
                                : `${esc(col.label)} <span style="opacity:.5;font-size:12px;">${esc(col.dateStr)}</span>`}
                        </button>`).join('')}
                        <button class="pl-cancel-btn" id="pl-picker-cancel">Cancelar</button>
                        <button class="pl-cancel-btn" style="margin-top:6px;" id="pl-picker-open">
                            ↗ Abrir nota
                        </button>
                    </div>
                </div>`);

                $pl.find('#pl-picker').on('click', function (e) {
                    if (e.target === this) $(this).remove();
                });
                $pl.find('#pl-picker-cancel').on('click', () =>
                    $pl.find('#pl-picker').remove()
                );
                $pl.find('#pl-picker-open').on('click', () => {
                    $pl.find('#pl-picker').remove();
                    api.activateNote(noteId);
                });

                $pl.find('.pl-day-btn').on('click', async function () {
                    const col = $(this).data('col');
                    if (col === 'backlog') delete plannerData[taskId];
                    else plannerData[taskId] = col;
                    await save();
                    $pl.find('#pl-picker').remove();
                    renderPlanner();
                    renderTasks();
                });
            });
        }
    }


    /* ═══════════════════════════════════════════════════════════
       9. RENDER — TAREFAS ABERTAS ($tk)
    ═══════════════════════════════════════════════════════════ */

    function renderTasks() {

        const total = allTasks.length;

        // agrupa por nota
        const grouped = new Map();
        for (const t of allTasks) {
            if (!grouped.has(t.noteId))
                grouped.set(t.noteId, { noteTitle: t.noteTitle, noteId: t.noteId, tasks: [] });
            grouped.get(t.noteId).tasks.push(t);
        }

        let html = `
            <!-- CABEÇALHO TAREFAS -->
            <div style="display:flex;align-items:center;gap:8px;padding:10px 14px;
                        flex-shrink:0;border-bottom:1px solid var(--main-border-color,#313244);">
                <span style="font-size:15px;font-weight:700;">Tarefas</span>
                <span class="tk-total" style="font-size:12px;color:var(--muted-text-color);">
                    ${total}
                </span>
            </div>

            <!-- LISTA -->
            <div style="overflow-y:auto;flex:1;padding:12px 14px;">
        `;

        if (total === 0) {
            html += `
                <p style="color:var(--muted-text-color);font-size:13px;margin-top:4px;">
                    ✓ Nenhuma tarefa aberta.
                </p>`;
        } else {
            for (const [, group] of grouped) {
                html += `
                <div class="tk-group" style="margin-bottom:18px;">

                    <!-- título da nota -->
                    <div class="tk-note-link"
                         data-note-id="${esc(group.noteId)}"
                         style="display:inline-flex;align-items:center;gap:5px;
                                margin-bottom:5px;cursor:pointer;
                                font-size:11px;font-weight:700;text-transform:uppercase;
                                letter-spacing:.06em;color:var(--muted-text-color,#888);
                                transition:color .15s;">
                        ${esc(group.noteTitle)}
                        <span style="font-size:11px;background:var(--accented-background-color);
                                     padding:0 5px;border-radius:8px;">
                            ${group.tasks.length}
                        </span>
                    </div>

                    <div style="border-left:2px solid var(--main-border-color,#313244);
                                padding-left:10px;">
                        ${group.tasks.map(t => {

                            // badge de dia se já planejado
                            const day = plannerData[t.id];
                            const badge = day
                                ? `<span style="
                                        display:inline-block;font-size:9px;
                                        padding:1px 5px;border-radius:3px;margin-left:5px;
                                        background:var(--accented-background-color);
                                        color:var(--muted-text-color);white-space:nowrap;
                                        vertical-align:middle;">
                                        ${dayBadge(day)}
                                   </span>`
                                : '';

                            return `
                            <div class="tk-task-row"
                                 data-task-id="${esc(t.id)}"
                                 data-note-id="${esc(t.noteId)}"
                                 data-cb-index="${t.checkboxIndex}"
                                 style="display:flex;align-items:flex-start;gap:6px;
                                        padding:2px 0;line-height:1.4;">

                                <span class="tk-check"
                                      title="Marcar como concluída"
                                      style="
                                          flex-shrink:0;width:13px;height:13px;margin-top:3px;
                                          border:1.5px solid var(--main-border-color,#45475a);
                                          border-radius:3px;display:inline-flex;
                                          align-items:center;justify-content:center;
                                          cursor:pointer;font-size:9px;color:transparent;
                                          transition:border-color .15s,background .15s,color .15s;
                                          user-select:none;">✓</span>

                                <span class="tk-task-text"
                                      data-note-id="${esc(t.noteId)}"
                                      style="cursor:pointer;font-size:13px;
                                             transition:color .15s;">
                                    ${esc(t.text)}${badge}
                                </span>

                            </div>`;
                        }).join('')}
                    </div>

                </div>`;
            }
        }

        html += `</div>`;
        $tk.html(html);
    }


    /* ═══════════════════════════════════════════════════════════
       10. EVENTOS DO PAINEL DE TAREFAS
           (delegados em $tk — chamados uma única vez)
    ═══════════════════════════════════════════════════════════ */

    function bindTaskEvents() {

        // hover: título da nota
        $tk.on('mouseenter', '.tk-note-link', function () {
            $(this).css('color', 'var(--main-text-color)');
        }).on('mouseleave', '.tk-note-link', function () {
            $(this).css('color', 'var(--muted-text-color)');
        });

        // click: título → abre nota
        $tk.on('click', '.tk-note-link', function () {
            api.activateNote($(this).data('noteId'));
        });

        // hover: texto da tarefa
        $tk.on('mouseenter', '.tk-task-text', function () {
            $(this).css('text-decoration', 'underline');
        }).on('mouseleave', '.tk-task-text', function () {
            $(this).css('text-decoration', 'none');
        });

        // click: texto → abre nota
        $tk.on('click', '.tk-task-text', function () {
            api.activateNote($(this).data('noteId'));
        });

        // hover: checkbox
        $tk.on('mouseenter', '.tk-check', function () {
            $(this).css({
                borderColor: 'var(--main-text-color)',
                background:  'var(--accented-background-color,#313244)',
                color:       'var(--muted-text-color,#888)',
            });
        }).on('mouseleave', '.tk-check', function () {
            if (!$(this).hasClass('completing')) {
                $(this).css({
                    borderColor: 'var(--main-border-color,#45475a)',
                    background:  'transparent',
                    color:       'transparent',
                });
            }
        });

        // click: quadradinho → marca como concluída
        $tk.on('click', '.tk-check', async function () {

            const $check = $(this);
            if ($check.hasClass('completing')) return;

            const $row    = $check.closest('.tk-task-row');
            const taskId  = String($row.data('taskId'));
            const noteId  = String($row.data('noteId'));
            const cbIndex = parseInt($row.data('cbIndex'), 10);

            // feedback visual imediato
            $check.addClass('completing').css({
                borderColor: 'var(--active-item-background-color,#a6e3a1)',
                background:  'rgba(166,227,161,.15)',
                color:       'var(--active-item-background-color,#a6e3a1)',
                pointerEvents: 'none',
            });

            try {
                await markDone({ id: taskId, noteId, checkboxIndex: cbIndex });
                // re-renderiza os dois painéis com o estado atualizado
                renderPlanner();
                renderTasks();
            } catch (err) {
                console.error('markDone error:', err);
                $check.removeClass('completing').css({
                    borderColor: 'var(--main-border-color,#45475a)',
                    background:  'transparent',
                    color:       'transparent',
                    pointerEvents: '',
                });
            }
        });
    }


    /* ═══════════════════════════════════════════════════════════
       11. INICIAR
    ═══════════════════════════════════════════════════════════ */

    try {
        plannerData = await loadPlannerData();
        await fetchTasks();
    } catch (err) {
        const msg = String(err.message || err);
        $pl.html(`<div style="padding:24px;color:#f38ba8;font-size:14px">
            ✗ Erro ao inicializar: ${msg}
        </div>`);
        $tk.html('');
        return;
    }

    renderPlanner();
    renderTasks();
    bindTaskEvents(); // delegação permanente em $tk — chamado uma única vez

})();

[ricolandia]

Planer - New update

• New feature: Drag and drop to reorder tasks in the daily view.

The zip( Plugin ):
Task_Planner_.zip