plugin infrastruktur

public/plugins/tests/buckets.test.js

@@ -1,5 +1,5 @@
 import { describe, it, afterEach, expect, $, $$, click, sleep, closeAll, csrf } from './runner.js';
-import { state } from '../modules/state.js';
+import { state } from '../../js/modules/state.js';
 
 describe('Bucket Bar', () => {
     afterEach(() => closeAll());

public/plugins/tests/canvas.test.js

@@ -0,0 +1,377 @@
+import { describe, it, beforeEach, afterEach, expect, $, click, sleep, closeAll } from './runner.js';
+
+// ── Helpers ──
+
+async function openEditor() {
+    click('#add-btn');
+    await sleep(200);
+}
+
+async function openCanvas() {
+    await openEditor();
+    const btn = document.querySelector('[data-md="asciiart"]');
+    if (!btn) throw new Error('canvas toolbar button not found');
+    btn.click();
+    // openCanvas does layout in rAF
+    await sleep(100);
+}
+
+function closeCanvasIfOpen() {
+    const overlay = $('#ascii-canvas-overlay');
+    if (overlay?.classList.contains('open')) {
+        const cancel = $('#ascii-canvas-cancel');
+        cancel?.click();
+    }
+}
+
+function getGridText() {
+    return $('#ascii-canvas-grid')?.textContent || '';
+}
+
+function getGridLines() {
+    return getGridText().split('\n');
+}
+
+// Dispatch a mousedown at a logical (col, row) cell on the grid
+function clickCell(col, row) {
+    const grid = $('#ascii-canvas-grid');
+    const rect = grid.getBoundingClientRect();
+    const cols = parseInt($('#ascii-canvas-width').value);
+    const rows = parseInt($('#ascii-canvas-height').value);
+    const cellW = rect.width / cols;
+    const cellH = rect.height / rows;
+    const x = rect.left + cellW * col + cellW / 2;
+    const y = rect.top + cellH * row + cellH / 2;
+    grid.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, button: 0, clientX: x, clientY: y }));
+    window.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, button: 0, clientX: x, clientY: y }));
+}
+
+// ── Plugin Registration ──
+
+describe('Canvas Plugin: Registration', () => {
+    it('plugin is registered with hyprcrd', () => {
+        expect(window.hyprcrd).toExist();
+        const meta = window.hyprcrd.plugins.find(p => p.name === 'canvas');
+        expect(meta).toExist();
+    });
+
+    it('asciiart editor command is registered', () => {
+        expect(window.hyprcrd.editor.getCommand('asciiart')).toExist();
+    });
+
+    it('ascii fenced block handler is registered', () => {
+        const handlers = window.hyprcrd.markdown.getFencedBlocks();
+        const ascii = handlers.find(h => h.lang === 'ascii');
+        expect(ascii).toExist();
+    });
+
+    it('toolbar button is injected into md-toolbar', () => {
+        const btn = document.querySelector('#md-toolbar [data-md="asciiart"]');
+        expect(btn).toExist();
+    });
+});
+
+// ── Overlay Structure ──
+
+describe('Canvas Plugin: Overlay Structure', () => {
+    it('overlay element exists in DOM', () => {
+        expect($('#ascii-canvas-overlay')).toExist();
+    });
+
+    it('grid, toolbar, and inputs exist', () => {
+        expect($('#ascii-canvas-grid')).toExist();
+        expect($('#ascii-canvas-toolbar')).toExist();
+        expect($('#ascii-char-input')).toExist();
+        expect($('#ascii-canvas-width')).toExist();
+        expect($('#ascii-canvas-height')).toExist();
+    });
+
+    it('all 7 tool buttons exist', () => {
+        const tools = ['brush', 'eraser', 'line', 'rect', 'circle', 'fill', 'text'];
+        for (const t of tools) {
+            const btn = document.querySelector(`[data-tool="${t}"]`);
+            expect(btn).toExist();
+        }
+    });
+
+    it('action buttons exist (ok, cancel, clear, resize)', () => {
+        expect($('#ascii-canvas-ok')).toExist();
+        expect($('#ascii-canvas-cancel')).toExist();
+        expect($('#ascii-canvas-clear')).toExist();
+        expect($('#ascii-canvas-resize')).toExist();
+    });
+});
+
+// ── Open / Close ──
+
+describe('Canvas Plugin: Open & Close', () => {
+    afterEach(async () => {
+        closeCanvasIfOpen();
+        await closeAll();
+    });
+
+    it('overlay is hidden initially', () => {
+        const overlay = $('#ascii-canvas-overlay');
+        expect(overlay.classList.contains('open')).toBe(false);
+    });
+
+    it('opens via toolbar button', async () => {
+        await openCanvas();
+        expect($('#ascii-canvas-overlay').classList.contains('open')).toBe(true);
+    });
+
+    it('cancel button closes overlay', async () => {
+        await openCanvas();
+        click('#ascii-canvas-cancel');
+        await sleep(50);
+        expect($('#ascii-canvas-overlay').classList.contains('open')).toBe(false);
+    });
+
+    it('overlay is filled with character grid on open', async () => {
+        await openCanvas();
+        const lines = getGridLines();
+        const cols = parseInt($('#ascii-canvas-width').value);
+        const rows = parseInt($('#ascii-canvas-height').value);
+        expect(lines.length).toBe(rows);
+        expect(lines[0].length).toBe(cols);
+    });
+
+    it('palette is populated with character buttons', async () => {
+        await openCanvas();
+        const buttons = document.querySelectorAll('#ascii-char-palette .ascii-char-btn');
+        expect(buttons.length).toBeGreaterThan(10);
+    });
+});
+
+// ── Tool Selection ──
+
+describe('Canvas Plugin: Tool Selection', () => {
+    afterEach(async () => {
+        closeCanvasIfOpen();
+        await closeAll();
+    });
+
+    it('brush is the default active tool', async () => {
+        await openCanvas();
+        const brushBtn = document.querySelector('[data-tool="brush"]');
+        expect(brushBtn.classList.contains('active')).toBe(true);
+    });
+
+    it('clicking a tool button activates it and deactivates others', async () => {
+        await openCanvas();
+        click(document.querySelector('[data-tool="line"]'));
+        await sleep(20);
+        expect(document.querySelector('[data-tool="line"]').classList.contains('active')).toBe(true);
+        expect(document.querySelector('[data-tool="brush"]').classList.contains('active')).toBe(false);
+    });
+
+    it('keyboard shortcut switches tool', async () => {
+        await openCanvas();
+        const overlay = $('#ascii-canvas-overlay');
+        overlay.dispatchEvent(new KeyboardEvent('keydown', { key: 'r', bubbles: true }));
+        await sleep(20);
+        expect(document.querySelector('[data-tool="rect"]').classList.contains('active')).toBe(true);
+    });
+});
+
+// ── Drawing ──
+
+describe('Canvas Plugin: Drawing', () => {
+    afterEach(async () => {
+        closeCanvasIfOpen();
+        await closeAll();
+    });
+
+    it('brush click sets a character at the clicked cell', async () => {
+        await openCanvas();
+        // Use a known character
+        const charInput = $('#ascii-char-input');
+        charInput.value = 'X';
+        charInput.dispatchEvent(new Event('input', { bubbles: true }));
+        await sleep(20);
+
+        clickCell(5, 3);
+        await sleep(20);
+
+        const lines = getGridLines();
+        expect(lines[3][5]).toBe('X');
+    });
+
+    it('eraser replaces character with space', async () => {
+        await openCanvas();
+        // Draw first
+        const charInput = $('#ascii-char-input');
+        charInput.value = '#';
+        charInput.dispatchEvent(new Event('input', { bubbles: true }));
+        await sleep(20);
+        clickCell(2, 2);
+        await sleep(20);
+        expect(getGridLines()[2][2]).toBe('#');
+
+        // Switch to eraser and click same cell
+        click(document.querySelector('[data-tool="eraser"]'));
+        await sleep(20);
+        clickCell(2, 2);
+        await sleep(20);
+        expect(getGridLines()[2][2]).toBe(' ');
+    });
+
+    it('clear button empties the grid', async () => {
+        await openCanvas();
+        const charInput = $('#ascii-char-input');
+        charInput.value = '#';
+        charInput.dispatchEvent(new Event('input', { bubbles: true }));
+        await sleep(20);
+        clickCell(1, 1);
+        clickCell(2, 2);
+        clickCell(3, 3);
+        await sleep(20);
+
+        click('#ascii-canvas-clear');
+        await sleep(20);
+
+        const lines = getGridLines();
+        // All chars should be space
+        const allSpace = lines.every(l => /^ *$/.test(l));
+        expect(allSpace).toBe(true);
+    });
+});
+
+// ── Character Selection ──
+
+describe('Canvas Plugin: Character Selection', () => {
+    afterEach(async () => {
+        closeCanvasIfOpen();
+        await closeAll();
+    });
+
+    it('clicking palette button updates active char', async () => {
+        await openCanvas();
+        const targetBtn = document.querySelector('#ascii-char-palette .ascii-char-btn');
+        const ch = targetBtn.textContent;
+        click(targetBtn);
+        await sleep(20);
+
+        // Draw with that char
+        clickCell(0, 0);
+        await sleep(20);
+
+        const lines = getGridLines();
+        expect(lines[0][0]).toBe(ch);
+    });
+
+    it('typing in char input changes active character', async () => {
+        await openCanvas();
+        const charInput = $('#ascii-char-input');
+        charInput.value = '@';
+        charInput.dispatchEvent(new Event('input', { bubbles: true }));
+        await sleep(20);
+
+        clickCell(4, 4);
+        await sleep(20);
+
+        const lines = getGridLines();
+        expect(lines[4][4]).toBe('@');
+    });
+});
+
+// ── Insert into Editor ──
+
+describe('Canvas Plugin: Insert', () => {
+    afterEach(async () => {
+        closeCanvasIfOpen();
+        await closeAll();
+    });
+
+    it('OK button inserts ```ascii block into editor body', async () => {
+        await openCanvas();
+        const charInput = $('#ascii-char-input');
+        charInput.value = 'Z';
+        charInput.dispatchEvent(new Event('input', { bubbles: true }));
+        await sleep(20);
+
+        clickCell(0, 0);
+        clickCell(1, 0);
+        clickCell(2, 0);
+        await sleep(20);
+
+        click('#ascii-canvas-ok');
+        await sleep(50);
+
+        const body = $('#editor-body');
+        expect(body.value).toContain('```ascii');
+        expect(body.value).toContain('ZZZ');
+        expect(body.value).toContain('```\n');
+    });
+
+    it('cancel does NOT insert anything', async () => {
+        await openEditor();
+        const body = $('#editor-body');
+        const beforeLen = body.value.length;
+
+        const btn = document.querySelector('[data-md="asciiart"]');
+        btn.click();
+        await sleep(100);
+
+        const charInput = $('#ascii-char-input');
+        charInput.value = 'Q';
+        charInput.dispatchEvent(new Event('input', { bubbles: true }));
+        await sleep(20);
+        clickCell(0, 0);
+        await sleep(20);
+
+        click('#ascii-canvas-cancel');
+        await sleep(50);
+
+        expect(body.value.length).toBe(beforeLen);
+    });
+});
+
+// ── Edit existing block ──
+
+describe('Canvas Plugin: Edit Existing Block', () => {
+    afterEach(async () => {
+        closeCanvasIfOpen();
+        await closeAll();
+    });
+
+    it('cursor inside ```ascii block loads existing content', async () => {
+        await openEditor();
+        const body = $('#editor-body');
+        body.value = '```ascii\n###\n###\n```';
+        body.dispatchEvent(new Event('input', { bubbles: true }));
+        // Place cursor inside the block content
+        const insidePos = body.value.indexOf('###') + 1;
+        body.selectionStart = body.selectionEnd = insidePos;
+
+        const btn = document.querySelector('[data-md="asciiart"]');
+        btn.click();
+        await sleep(150);
+
+        const lines = getGridLines();
+        // First two lines should contain the existing # chars
+        expect(lines[0].startsWith('###')).toBe(true);
+        expect(lines[1].startsWith('###')).toBe(true);
+    });
+});
+
+// ── Markdown Rendering ──
+
+describe('Canvas Plugin: Markdown Rendering', () => {
+    it('```ascii fenced block renders as <pre class="ascii-art">', async () => {
+        // Use the registered handler directly via the registry
+        const handlers = window.hyprcrd.markdown.getFencedBlocks();
+        const ascii = handlers.find(h => h.lang === 'ascii');
+        expect(ascii).toExist();
+        const html = ascii.handler('###\n###\n###', { esc: window.hyprcrd.util.esc });
+        expect(html).toContain('<pre class="ascii-art">');
+        expect(html).toContain('###');
+    });
+
+    it('renderMd produces ascii-art pre when given an ```ascii block', async () => {
+        const { renderMd } = await import('../../js/modules/markdown.js');
+        const html = renderMd('```ascii\n***\n***\n```');
+        expect(html).toContain('ascii-art');
+        expect(html).toContain('***');
+    });
+});

public/plugins/tests/card-interactions.test.js

@@ -1,5 +1,5 @@
 import { describe, it, afterEach, expect, $, $$, click, rightClick, sleep, closeAll, csrf } from './runner.js';
-import { state } from '../modules/state.js';
+import { state } from '../../js/modules/state.js';
 
 describe('Card: Tag Operations', () => {
     afterEach(() => closeAll());

public/plugins/tests/datepicker.test.js

@@ -1,5 +1,5 @@
 import { describe, it, afterEach, expect, $, $$, click, sleep, closeAll } from './runner.js';
-import { showDialog } from '../modules/dialog.js';
+import { showDialog } from '../../js/modules/dialog.js';
 
 describe('Datepicker: Rendering', () => {
     afterEach(async () => {

public/plugins/tests/favorites.test.js

@@ -1,5 +1,5 @@
 import { describe, it, afterEach, expect, $, $$, click, sleep, closeAll, csrf } from './runner.js';
-import { state } from '../modules/state.js';
+import { state } from '../../js/modules/state.js';
 
 describe('Favorites Bucket', () => {
     afterEach(() => closeAll());

public/plugins/tests/filtering.test.js

@@ -1,5 +1,5 @@
 import { describe, it, afterEach, expect, $, $$, click, sleep, closeAll, csrf } from './runner.js';
-import { state, parseTags, sortedCards } from '../modules/state.js';
+import { state, parseTags, sortedCards } from '../../js/modules/state.js';
 
 describe('Filtering: Tag AND Logic', () => {
     afterEach(async () => {

public/plugins/tests/image-fullscreen.test.js

@@ -30,7 +30,7 @@ describe('Image Fullscreen Viewer', () => {
 
         // Check that images in detail would get fullscreen handler
         // The overlay is created lazily, verify the create function structure
-        const { bindDetailImageFullscreen } = await import('../modules/detail.js');
+        const { bindDetailImageFullscreen } = await import('../../js/modules/detail.js');
         expect(typeof bindDetailImageFullscreen).toBe('function');
     });
 

public/plugins/tests/loader.js

@@ -0,0 +1,31 @@
+// ── Tests Plugin: conditional loader ──
+//
+// The test runner is heavy (40+ test files), so we only load it when:
+//   - URL contains ?test query param  → auto-run
+//   - Ctrl+Shift+T pressed            → manual open
+//
+// Tests are completely optional — without this plugin the app has no
+// test runner code loaded at all.
+
+const hyprcrd = window.hyprcrd;
+
+// Auto-load if ?test in query string
+if (new URLSearchParams(location.search).has('test')) {
+    import('./tests.js');
+}
+
+// Keyboard shortcut: Ctrl+Shift+T → open runner
+document.addEventListener('keydown', e => {
+    if (e.ctrlKey && e.shiftKey && e.key === 'T') {
+        e.preventDefault();
+        import('./tests.js').then(() =>
+            import('./runner.js').then(m => m.open?.())
+        );
+    }
+});
+
+hyprcrd?.registerPlugin?.({
+    name: 'tests',
+    version: '1.0.0',
+    description: 'UI + state test runner',
+});

public/plugins/tests/markdown-edge.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from './runner.js';
-import { renderMd } from '../modules/markdown.js';
+import { renderMd } from '../../js/modules/markdown.js';
 
 describe('Markdown: Blank Lines', () => {
     it('image after blank lines renders', () => {

public/plugins/tests/markdown.test.js

@@ -1,6 +1,6 @@
 import { describe, it, expect } from './runner.js';
-import { renderMd, formatTodoItems, stripMd } from '../modules/markdown.js';
-import { state } from '../modules/state.js';
+import { renderMd, formatTodoItems, stripMd } from '../../js/modules/markdown.js';
+import { state } from '../../js/modules/state.js';
 
 describe('Markdown: Basic Rendering', () => {
     it('renders paragraph', () => {

public/plugins/tests/multiselect.test.js

@@ -1,5 +1,5 @@
 import { describe, it, afterEach, expect, $, sleep, closeAll } from './runner.js';
-import { state } from '../modules/state.js';
+import { state } from '../../js/modules/state.js';
 
 describe('Multi-Select', () => {
     afterEach(() => closeAll());

public/plugins/tests/plugin.json

@@ -0,0 +1,10 @@
+{
+    "name": "tests",
+    "version": "1.0.0",
+    "description": "UI + state test runner. Loads only when ?test query param is present or Ctrl+Shift+T is pressed.",
+    "frontend": {
+        "js":   ["loader.js"],
+        "css":  [],
+        "html": []
+    }
+}

public/plugins/tests/rrule.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from './runner.js';
-import { state } from '../modules/state.js';
+import { state } from '../../js/modules/state.js';
 
 // RRULE is set by CalDAV sync, not via PATCH. Test the data model and existing cards.
 

public/plugins/tests/runner.js

@@ -4,8 +4,8 @@
 // Panel is hidden during test run so interactions are visible.
 // Backup is created before and auto-restored after every run.
 
-import { getCsrf } from '../modules/util.js';
-import { stopBackgroundSync, startBackgroundSync } from '../modules/caldav.js';
+import { getCsrf } from '../../js/modules/util.js';
+import { stopBackgroundSync, startBackgroundSync } from '../../js/modules/caldav.js';
 
 const suites = [];
 let currentSuite = null;

public/plugins/tests/settings.test.js

@@ -9,12 +9,12 @@ describe('Settings: Open/Close', () => {
         expect($('#settings-overlay')).toBeVisible();
     });
 
-    it('has all 7 tabs', async () => {
+    it('has all 8 tabs', async () => {
         click('#settings-btn');
         await sleep(100);
         const names = $$('.settings-tab').map(t => t.dataset.tab);
-        expect(names.length).toBe(7);
-        for (const tab of ['branding', 'account', 'theme', 'caldav', 'relay', 'behavior', 'notifications']) {
+        expect(names.length).toBe(8);
+        for (const tab of ['branding', 'account', 'theme', 'caldav', 'relay', 'behavior', 'notifications', 'plugins']) {
             expect(names).toContain(tab);
         }
     });

public/plugins/tests/sorting.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect, csrf } from './runner.js';
-import { state, sortedCards } from '../modules/state.js';
+import { state, sortedCards } from '../../js/modules/state.js';
 
 describe('Sorting: All Modes', () => {
     it('manual sort by position', () => {

public/plugins/tests/state-functions.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from './runner.js';
-import { state, parseTags, sortedCards, getChildren, getGroupCards, getRecent, markRecent, getFavorites, toggleFavorite, isFavorite } from '../modules/state.js';
+import { state, parseTags, sortedCards, getChildren, getGroupCards, getRecent, markRecent, getFavorites, toggleFavorite, isFavorite } from '../../js/modules/state.js';
 
 describe('State: parseTags', () => {
     it('splits comma-separated tags', () => {

public/plugins/tests/tests.js

@@ -29,6 +29,7 @@ import './editor-features.test.js';
 import './editor-save.test.js';
 import './editor-toolbar.test.js';
 import './line-numbers.test.js';
+import './canvas.test.js';
 import './snippets.test.js';
 import './image-fullscreen.test.js';
 import './markdown.test.js';

public/plugins/tests/toolbar.test.js

@@ -1,5 +1,5 @@
 import { describe, it, afterEach, expect, $, click, sleep, closeAll } from './runner.js';
-import { state } from '../modules/state.js';
+import { state } from '../../js/modules/state.js';
 
 describe('Toolbar: Filter Toggles', () => {
     afterEach(() => closeAll());

public/plugins/tests/undo.test.js

@@ -204,7 +204,7 @@ describe('Undo: Card Delete', () => {
         // The child might be inside a group view — let's just test via the undo module directly
 
         // Import undo and test directly
-        const { pushCardDelete, snapshotCard, undo, canUndo } = await import('../modules/undo.js');
+        const { pushCardDelete, snapshotCard, undo, canUndo } = await import('../../js/modules/undo.js');
         const snap = { ...child, parent_id: parent.id };
         pushCardDelete('test-del', snap);
         await fetch(`api/cards/${child.id}`, { method: 'DELETE', headers: { 'X-CSRF-Token': csrf() } });
@@ -317,7 +317,7 @@ describe('Undo: Multiple Undos', () => {
 
 describe('Undo: No-Op When Empty', () => {
     it('Ctrl+Z with empty stack does nothing', async () => {
-        const { canUndo } = await import('../modules/undo.js');
+        const { canUndo } = await import('../../js/modules/undo.js');
         // Clear stack by undoing everything
         while (canUndo()) {
             ctrlZ();