(function () { try { document.body.setAttribute('data-clarity-mask', 'True'); var host = document.getElementById('instant-board'); if (!host) return; var raw = localStorage.getItem('kanban_data'); var data = raw ? JSON.parse(raw) : {"folders":[{"id":"nIVMepAZ9E0xY1cMIWXrb","name":"Projects","emoji":"📁","boards":[{"id":"iftX7YUf1cr9jBWhDMYDj","name":"Tasks","folderId":"nIVMepAZ9E0xY1cMIWXrb","columns":[{"id":"LnKyOQH4NWK6e4gccaB3C","name":"To do","position":0,"cards":[{"id":"LEdo9jEnc6HPKthbXeh_t","name":"Add your first task","description":"Click '+' to create a card","tags":[],"assignedTo":"","status":"LnKyOQH4NWK6e4gccaB3C","position":0,"createdAt":"2026-11-06T13:15:14.718Z","updatedAt":"2026-11-06T13:15:14.718Z","columnId":"LnKyOQH4NWK6e4gccaB3C"},{"id":"kWzwFs20ncMhP3HImySmH","name":"Organize tasks into columns","description":"Drag and drop cards to reorder or move between columns","tags":[],"assignedTo":"","status":"LnKyOQH4NWK6e4gccaB3C","position":1,"createdAt":"2026-11-06T13:15:14.718Z","updatedAt":"2026-11-06T13:15:14.718Z","columnId":"LnKyOQH4NWK6e4gccaB3C"}],"color":"#dc2626","boardId":"iftX7YUf1cr9jBWhDMYDj"},{"id":"DzVQGbLitbC4AFsHp6Psl","name":"In progress","position":1,"cards":[{"id":"nEg61sgmGt3wCnQddtSoP","name":"Explore editing a card","description":"Click a card to edit details like description and priority","tags":[],"assignedTo":"","status":"DzVQGbLitbC4AFsHp6Psl","position":0,"createdAt":"2026-11-06T13:15:14.718Z","updatedAt":"2026-11-06T13:15:14.718Z","columnId":"DzVQGbLitbC4AFsHp6Psl"}],"color":"#d97706","boardId":"iftX7YUf1cr9jBWhDMYDj"},{"id":"7oMpqoKBEfTACnctmKj8a","name":"Done","position":2,"cards":[{"id":"xY1pinWsnI66HO6UfSU4t","name":"Welcome to your board","description":"This is a sample completed task. You can archive or edit it.","tags":[],"assignedTo":"","status":"7oMpqoKBEfTACnctmKj8a","position":0,"createdAt":"2026-11-06T13:15:14.718Z","updatedAt":"2026-11-06T13:15:14.718Z","columnId":"7oMpqoKBEfTACnctmKj8a"}],"color":"#16a34a","boardId":"iftX7YUf1cr9jBWhDMYDj"}],"createdAt":"2026-11-06T13:15:14.718Z","updatedAt":"2026-11-06T13:15:14.718Z","position":0}],"isExpanded":true,"createdAt":"2026-11-06T13:15:14.718Z","updatedAt":"2026-11-06T13:15:14.718Z","position":0}],"activeBoard":"iftX7YUf1cr9jBWhDMYDj","theme":"light","lastModified":"2026-11-06T13:15:14.718Z","version":1}; var folders = data.folders || []; var board = null; folders.forEach(function (folder) { folder.boards.forEach(function (candidate) { if (candidate.id === data.activeBoard) board = candidate; }); }); if (!board) return; var byPosition = function (a, b) { return a.position - b.position; }; function el(tag, className, children) { var node = document.createElement(tag); if (className) node.className = className; (children || []).forEach(function (child) { if (child === null || child === undefined) return; node.append(child); }); return node; } function replay(node, key) { node.setAttribute('data-replay', key); return node; } // Fixed icon shapes from the app's icon set. No user data passes through here. var ICONS = { plus: '', more: '', user: '', calendar: '', left: '', right: '', down: '', search: '' }; function icon(name, className) { var wrapper = document.createElement('div'); wrapper.innerHTML = ''; return wrapper.firstChild; } var BUTTON_BASE = 'inline-flex items-center whitespace-nowrap rounded-md text-sm font-medium '; var BUTTON = BUTTON_BASE + 'justify-center '; var BADGE = 'inline-flex items-center border text-xs py-0.5 font-medium rounded-md '; function card(item) { var tags = item.tags || []; var footerLeft = []; if (item.priority) { var variant = item.priority === 'high' ? 'border-transparent bg-destructive text-destructive-foreground' : item.priority === 'medium' ? 'border-transparent bg-secondary text-secondary-foreground' : 'text-foreground'; footerLeft.push(el('div', BADGE + 'px-2 ' + variant, [item.priority])); } if (item.assignedTo) { footerLeft.push(el('div', 'flex items-center gap-1.5 text-xs text-muted-foreground', [ icon('user', 'h-3 w-3'), el('span', 'truncate max-w-20 font-medium', [item.assignedTo]) ])); } var due = null; if (item.dueDate) { var date = new Date(item.dueDate); due = el('div', 'flex items-center gap-1.5 text-xs font-medium ' + (date < new Date() ? 'text-red-500' : 'text-muted-foreground'), [ icon('calendar', 'h-3 w-3'), el('span', '', [date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })]) ]); } var tagRow = null; if (tags.length) { var badges = tags.slice(0, 3).map(function (tag) { var badge = el('div', BADGE + 'px-2.5 border-transparent', [tag.name]); badge.style.backgroundColor = tag.color + '15'; badge.style.color = tag.color; badge.style.borderColor = tag.color + '30'; return badge; }); if (tags.length > 3) badges.push(el('div', BADGE + 'px-2.5 text-foreground', ['+' + (tags.length - 3)])); tagRow = el('div', 'flex flex-wrap gap-1.5 mb-4', badges); } return replay(el('div', 'notion-card p-4 group kanban-card cursor-grab', [ el('div', 'flex items-start justify-between mb-3', [ el('h3', 'font-medium text-sm leading-snug flex-1 pr-2 text-foreground', [item.name]), el('div', BUTTON + 'h-6 w-6 opacity-0', [icon('more', 'h-3 w-3')]) ]), item.description ? el('p', 'text-xs text-muted-foreground mb-4 line-clamp-3 leading-relaxed', [item.description]) : null, tagRow, el('div', 'flex items-center justify-between', [el('div', 'flex items-center gap-2', footerLeft), due]) ]), 'card:' + item.id); } function column(item) { var cards = item.cards.slice().sort(byPosition); var dot = null; if (item.color) { dot = el('div', 'w-3 h-3 rounded-full flex-shrink-0 notion-shadow'); dot.style.backgroundColor = item.color; } var addLabel = function () { return [icon('plus', 'h-4 w-4 mr-2'), 'Add a card']; }; return el('div', 'w-72 md:w-80 min-w-72 md:min-w-80 notion-card flex flex-col max-h-[calc(100vh-200px)] relative', [ el('div', 'p-5 border-b border-border/20', [ el('div', 'flex items-center justify-between', [ el('div', 'flex items-center gap-3 flex-1', [ dot, el('div', 'font-semibold text-sm flex-1 rounded-md px-2 py-1 select-none', [item.name]), el('span', 'text-xs text-muted-foreground bg-notion-gray-light rounded-full px-2.5 py-1 flex-shrink-0 font-medium', [String(item.cards.length)]) ]), el('div', BUTTON + 'h-7 w-7', [icon('more', 'h-4 w-4 text-muted-foreground')]) ]) ]), el('div', 'flex-1 p-4 space-y-3 overflow-y-auto mobile-scrollbar', cards.length ? cards.map(card) : [el('div', 'text-center py-8 text-muted-foreground', [ el('p', 'text-sm mb-3', ['No cards yet']), el('div', BUTTON + 'h-9 px-3', addLabel()) ])]), el('div', 'p-4 border-t border-border/20', [ replay(el('div', BUTTON_BASE + 'w-full justify-start text-muted-foreground h-9 px-4 py-2', addLabel()), 'add:' + item.id) ]) ]); } function main() { var columns = board.columns.slice().sort(byPosition); var cardCount = columns.reduce(function (total, item) { return total + item.cards.length; }, 0); var addColumn = columns.length < 10 ? el('div', 'w-80 min-w-80 flex items-start', [ el('div', BUTTON + 'w-full h-auto p-6 border-2 border-dashed border-border/30', [ el('div', 'flex items-center justify-center text-muted-foreground', [ icon('plus', 'h-5 w-5 mr-2'), el('span', 'font-medium', ['Add another column']) ]) ]) ]) : el('div', 'w-80 min-w-80 flex items-center justify-center text-muted-foreground', [ el('p', 'text-sm', ['Maximum 10 columns reached']) ]); return el('div', 'flex-1 overflow-x-auto', [ el('div', 'flex-1 p-4 md:p-8', [ el('div', 'mb-4 md:mb-8', [ el('h1', 'text-2xl md:text-4xl font-bold tracking-tight text-foreground mb-2 rounded-md px-2 -mx-2', [board.name]), el('p', 'text-muted-foreground text-base', [columns.length + ' columns \u2022 ' + cardCount + ' cards']) ]), el('div', 'flex gap-4 md:gap-6 pb-8 min-w-max overflow-x-auto -mx-4 md:-mx-0 px-4 md:px-0', columns.map(column).concat([addColumn])) ]) ]); } function expandedSidebar() { var tree = folders.map(function (folder) { var hasActive = folder.boards.some(function (item) { return item.id === data.activeBoard; }); var boards = null; if (folder.isExpanded) { boards = el('div', 'ml-6 space-y-0.5', folder.boards.length ? folder.boards.map(function (item) { var active = item.id === data.activeBoard; return replay(el('div', 'flex items-center group rounded-lg p-2 mx-2 cursor-pointer' + (active ? ' bg-gray-100 dark:bg-gray-800/60' : ''), [ el('div', 'flex items-center flex-1 min-w-0', [ el('div', 'mr-3 text-base flex-shrink-0', [item.emoji || '\uD83D\uDCDD']), el('span', 'truncate text-sm ' + (active ? 'font-medium text-foreground' : 'text-muted-foreground'), [item.name]) ]), el('div', BUTTON + 'h-6 w-6 ' + (active ? '' : 'opacity-0'), [icon('more', 'h-3 w-3')]) ]), 'board:' + item.id); }) : [el('div', 'text-sm text-muted-foreground italic p-2 mx-2', ['No boards yet'])]); } return el('div', 'mb-2', [ el('div', 'flex items-center group rounded-lg p-2 mx-2', [ el('div', BUTTON + 'h-auto p-0 mr-1', [icon(folder.isExpanded ? 'down' : 'right', 'h-3.5 w-3.5 text-muted-foreground')]), el('div', 'flex items-center flex-1 min-w-0', [ el('span', 'mr-2 text-base leading-none', [folder.emoji || '\uD83D\uDCC1']), el('span', 'font-medium text-sm truncate', [folder.name]) ]), el('div', 'flex items-center ' + (hasActive ? '' : 'opacity-0'), [ el('div', BUTTON + 'h-6 w-6', [icon('plus', 'h-3 w-3')]), el('div', BUTTON + 'h-6 w-6', [icon('more', 'h-3 w-3')]) ]) ]), boards ]); }); return [ el('div', 'p-4 pb-3', [ el('div', 'flex items-center gap-2', [ el('div', 'relative flex-1', [ icon('search', 'absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground'), el('div', 'flex items-center h-9 w-full rounded-md border-0 bg-background pl-10 text-base md:text-sm text-muted-foreground', ['Search boards...']) ]), el('div', BUTTON + 'h-9 w-9', [icon('left', 'h-4 w-4 text-muted-foreground')]) ]) ]), el('div', 'px-4 pb-3', [ replay(el('div', BUTTON_BASE + 'w-full justify-start h-8 px-4 py-2 text-muted-foreground', [icon('plus', 'h-4 w-4 mr-2'), 'Add Folder']), 'add-folder') ]), el('div', 'flex-1 overflow-y-auto', [el('div', 'p-2', tree)]), el('div', 'border-b border-border/20 p-4', [ el('div', BUTTON + 'w-full justify-center text-xs text-muted-foreground h-9 px-3', ['\uD83D\uDC51 Pro Early Access']) ]) ]; } function collapsedSidebar() { return [ el('div', 'flex items-center justify-between p-4 border-b border-border/20', [ el('div', BUTTON + 'h-7 w-7 mx-auto', [icon('right', 'h-3.5 w-3.5 text-muted-foreground')]) ]), el('div', 'flex-1 overflow-y-auto', [ el('div', 'p-2 space-y-2', folders.map(function (folder) { return el('div', 'flex flex-col items-center', [ el('div', BUTTON + 'h-8 w-8', [el('span', 'text-base', [folder.emoji || '\uD83D\uDCC1'])]) ].concat(folder.boards.map(function (item) { return replay(el('div', BUTTON + 'h-6 w-6 mt-1' + (item.id === data.activeBoard ? ' bg-gray-100 dark:bg-gray-800/60' : ''), [ el('span', 'text-sm', [item.emoji || '\uD83D\uDCDD']) ]), 'board:' + item.id); }))); })) ]) ]; } var collapsed = localStorage.getItem('kanban_sidebar_collapsed') === 'true'; var aside = el('aside', (collapsed ? 'w-16' : 'w-80') + ' h-full glassmorphism border-r border-border/30 flex flex-col', collapsed ? collapsedSidebar() : expandedSidebar()); aside.style.background = 'hsl(var(--notion-sidebar))'; var content = main(); host.append(el('div', 'hidden md:block', [aside]), content); document.documentElement.classList.add('has-instant-board'); // A tap or scroll before React is ready shouldn't be lost, so it's noted here // and applied to the real board when it takes over. var pending = { tap: null, scrollLeft: 0 }; var noteTap = function (event) { var target = event.target.closest && event.target.closest('[data-replay]'); if (!target) return; // New users get different ids in the real board, so also note its position. var key = target.getAttribute('data-replay'); var prefix = key.split(':')[0]; pending.tap = key; pending.tapGroup = prefix; pending.tapIndex = Array.prototype.indexOf.call(host.querySelectorAll('[data-replay^="' + prefix + ':"]'), target); }; document.addEventListener('click', noteTap, true); content.addEventListener('scroll', function () { pending.scrollLeft = content.scrollLeft; }, { passive: true }); pending.stop = function () { document.removeEventListener('click', noteTap, true); }; window.__instantBoard = pending; } catch (error) { // Anything unexpected just leaves the normal loading placeholder in place. document.documentElement.classList.remove('has-instant-board'); var partial = document.getElementById('instant-board'); if (partial) partial.textContent = ''; } })();