Add Vim-style shortcuts (Shift+H / J / K / L) to move cards between and within columns

[koresent]

Feature description

KanBased already provides excellent Vim-inspired navigation (HJKL for movement, I for edit, etc.).
However, it currently lacks a way to reorder or move cards using only the keyboard.

Adding Shift-modified Vim keys would let users move focused cards both within the same column and between columns, maintaining the fast, keyboard-driven workflow the app is built around.

---

Proposed solution

Introduce the following keybindings when a task card is focused:

Shortcut	Action
Shift + K	Move the focused card up within its column
Shift + J	Move the focused card down within its column
Shift + H	Move the focused card to the previous column
Shift + L	Move the focused card to the next column

Expected behavior:

• The card moves instantly without losing focus
• The viewport scrolls if needed to keep the card visible
• If movement isn’t possible (e.g. top of column or first column), nothing happens
• Works consistently with existing Vim-style navigation (HJKL)

---

Motivation

• Keeps the workflow entirely keyboard-driven
• Perfectly fits the existing Vim-like design of KanBased
• Greatly improves speed and efficiency for power users
• Increases accessibility and usability without needing drag-and-drop

[koresent]

This userscript provides a temporary way to move KanBased cards using keyboard shortcuts while the official feature is not yet implemented.

// ==UserScript==
// @name        ⚙ [Kanbased] Task movement hotkeys
// @namespace   t.me/koresent
// @version     1.0.0
// @description Add Vim-like hotkeys for moving tasks both within and between columns in Kanbased.
// @author      Koresent
// @icon        data:image/png;base64,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
// @match       https://app.kanbased.com/*
// @run-at      document-idle
// @grant       none
// ==/UserScript==

(function() {
    'use strict';

    let initialized = false;
    let retryCount = 0;
    const maxRetries = 30;
    const moveDelay = 100;

    function waitForApp() {
        if (!window.location.pathname.includes('/boards/')) return;

        if (retryCount >= maxRetries) return;

        const dragContext = document.querySelector('[data-rfd-droppable-context-id]');
        const taskElements = document.querySelectorAll('[data-kb-focus][id^="task-"]');

        if (!dragContext || taskElements.length === 0) {
            retryCount++;
            setTimeout(waitForApp, 300);
            return;
        }

        if (initialized) return;

        initializeHotkeys();
        initialized = true;
    }

    function initializeHotkeys() {
        let isProcessing = false;

        function isInInputField(event) {
            const target = event.target;
            if (!target) return false;
            const tagName = target.tagName?.toLowerCase() || '';
            return ['input', 'textarea', 'select'].includes(tagName) ||
                   target.contentEditable === 'true' ||
                   target.closest('[contenteditable="true"]') ||
                   target.closest('[role="textbox"]');
        }

        function getCurrentTask() {
            const activeElement = document.activeElement;
            if (!activeElement?.hasAttribute('data-kb-focus')) return null;

            const taskId = activeElement.id.replace('task-', '');
            if (!taskId || taskId === activeElement.id) return null;

            return { element: activeElement, id: taskId };
        }

        function getColumns() {
            return Array.from(document.querySelectorAll('[data-column-index]'))
                .map(col => ({
                    element: col,
                    index: parseInt(col.getAttribute('data-column-index')),
                    id: col.id.replace('col-', ''),
                    tasks: Array.from(col.querySelectorAll('[data-kb-focus][id^="task-"]'))
                }))
                .sort((a, b) => a.index - b.index);
        }

        function getCurrentTaskPosition() {
            const currentTask = getCurrentTask();
            if (!currentTask) return null;

            const columns = getColumns();
            for (let colIndex = 0; colIndex < columns.length; colIndex++) {
                const column = columns[colIndex];
                const taskIndex = column.tasks.findIndex(task => task.id === `task-${currentTask.id}`);
                if (taskIndex !== -1) {
                    return { task: currentTask, columnIndex: colIndex, taskIndex, column, columns };
                }
            }
            return null;
        }

        function findDragHandler() {
            const dragContext = document.querySelector('[data-rfd-droppable-context-id]');
            if (!dragContext) return null;

            const possibleFiberKeys = Object.keys(dragContext).filter(key =>
                key.startsWith('__reactInternalFiber') ||
                key.startsWith('_reactInternalFiber') ||
                key.startsWith('__reactInternalInstance') ||
                key.startsWith('_reactInternalInstance') ||
                key.startsWith('_reactInternals') ||
                key.startsWith('__reactFiber')
            );

            let fiber = possibleFiberKeys.reduce((acc, key) => acc || dragContext[key], null);
            if (!fiber) return null;

            let currentFiber = fiber;
            let searchDepth = 0;
            const maxDepth = 50;

            while (currentFiber && searchDepth < maxDepth) {
                if (currentFiber.memoizedProps?.onDragEnd) return currentFiber.memoizedProps.onDragEnd;
                if (currentFiber.pendingProps?.onDragEnd) return currentFiber.pendingProps.onDragEnd;
                if (currentFiber.props?.onDragEnd) return currentFiber.props.onDragEnd;

                currentFiber = currentFiber.return || currentFiber.child || currentFiber.sibling;
                searchDepth++;
            }
            return null;
        }

        function moveTaskToColumn(taskId, sourceColumnId, targetColumnId, targetIndex = 0) {
            const dragEndHandler = findDragHandler();
            if (!dragEndHandler) return false;

            const sourceColumn = document.querySelector(`#col-${sourceColumnId}`);
            const sourceTasks = sourceColumn ? Array.from(sourceColumn.querySelectorAll('[data-kb-focus][id^="task-"]')) : [];
            const sourceIndex = sourceTasks.findIndex(task => task.id === `task-${taskId}`);

            const dragEndEvent = {
                draggableId: taskId,
                type: 'TASK',
                source: { droppableId: sourceColumnId, index: sourceIndex >= 0 ? sourceIndex : 0 },
                destination: { droppableId: targetColumnId, index: targetIndex },
                reason: 'DROP',
                mode: 'FLUID',
                combine: null
            };

            dragEndHandler(dragEndEvent);
            return true;
        }

        function moveTaskLeft() {
            if (isProcessing) return;
            isProcessing = true;

            try {
                const position = getCurrentTaskPosition();
                if (!position || position.columnIndex === 0) return;

                const targetColumn = position.columns[position.columnIndex - 1];
                const success = moveTaskToColumn(
                    position.task.id,
                    position.column.id,
                    targetColumn.id,
                    targetColumn.tasks.length
                );

                if (success) {
                    setTimeout(() => {
                        const movedTask = document.getElementById(`task-${position.task.id}`);
                        if (movedTask) {
                            movedTask.focus();
                            movedTask.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                        }
                    }, 100);
                }
            } finally {
                setTimeout(() => { isProcessing = false; }, moveDelay);
            }
        }

        function moveTaskRight() {
            if (isProcessing) return;
            isProcessing = true;

            try {
                const position = getCurrentTaskPosition();
                if (!position || position.columnIndex >= position.columns.length - 1) return;

                const targetColumn = position.columns[position.columnIndex + 1];
                const success = moveTaskToColumn(
                    position.task.id,
                    position.column.id,
                    targetColumn.id,
                    targetColumn.tasks.length
                );

                if (success) {
                    setTimeout(() => {
                        const movedTask = document.getElementById(`task-${position.task.id}`);
                        if (movedTask) {
                            movedTask.focus();
                            movedTask.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                        }
                    }, 100);
                }
            } finally {
                setTimeout(() => { isProcessing = false; }, moveDelay);
            }
        }

        function moveTaskUp() {
            if (isProcessing) return;
            isProcessing = true;

            try {
                const position = getCurrentTaskPosition();
                if (!position || position.taskIndex === 0) return;

                const success = moveTaskToColumn(
                    position.task.id,
                    position.column.id,
                    position.column.id,
                    position.taskIndex - 1
                );

                if (success) {
                    setTimeout(() => {
                        const movedTask = document.getElementById(`task-${position.task.id}`);
                        if (movedTask) {
                            movedTask.focus();
                            movedTask.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                        }
                    }, 100);
                }
            } finally {
                setTimeout(() => { isProcessing = false; }, moveDelay);
            }
        }

        function moveTaskDown() {
            if (isProcessing) return;
            isProcessing = true;

            try {
                const position = getCurrentTaskPosition();
                if (!position || position.taskIndex >= position.column.tasks.length - 1) return;

                const success = moveTaskToColumn(
                    position.task.id,
                    position.column.id,
                    position.column.id,
                    position.taskIndex + 1
                );

                if (success) {
                    setTimeout(() => {
                        const movedTask = document.getElementById(`task-${position.task.id}`);
                        if (movedTask) {
                            movedTask.focus();
                            movedTask.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                        }
                    }, 100);
                }
            } finally {
                setTimeout(() => { isProcessing = false; }, moveDelay);
            }
        }

        function handleKeyDown(event) {
            if (isInInputField(event) || !getCurrentTask()) return;

            if (event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) {
                switch (event.key.toLowerCase()) {
                    case 'h':
                        event.preventDefault();
                        event.stopPropagation();
                        moveTaskLeft();
                        break;
                    case 'l':
                        event.preventDefault();
                        event.stopPropagation();
                        moveTaskRight();
                        break;
                    case 'j':
                        event.preventDefault();
                        event.stopPropagation();
                        moveTaskDown();
                        break;
                    case 'k':
                        event.preventDefault();
                        event.stopPropagation();
                        moveTaskUp();
                        break;
                }
            }
        }

        document.addEventListener('keydown', handleKeyDown, { capture: true, passive: false });
    }

    function setupNavigationObserver() {
        if (!document.body) {
            setTimeout(setupNavigationObserver, 100);
            return;
        }

        let currentPath = window.location.pathname;
        const observer = new MutationObserver(() => {
            if (window.location.pathname !== currentPath) {
                currentPath = window.location.pathname;
                if (currentPath.includes('/boards/')) {
                    initialized = false;
                    retryCount = 0;
                    setTimeout(waitForApp, 1000);
                }
            }
        });

        observer.observe(document.body, { childList: true, subtree: true });
    }

    function initialize() {
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', waitForApp);
        } else {
            waitForApp();
        }
        setupNavigationObserver();
        window.addEventListener('popstate', () => {
            if (window.location.pathname.includes('/boards/')) {
                initialized = false;
                retryCount = 0;
                setTimeout(waitForApp, 1000);
            }
        });
    }

    initialize();
})();

[irshathcodes]

Hey, when I started this project, I wanted the whole app to be keyboard navigable. This is definitely on my to-do list, currently focusing on some other stuff, hopefully soon!