GeneralBots/botui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Add draggable splitter between panels, uniform scrollbar styles (primary color)

Browse source
This commit is contained in:
Rodrigo Rodriguez (Pragmatismo) 2026-01-02 15:25:42 -03:00
parent e514b302d3
commit 580c9072d4
3 changed files with 136 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
ui/suite/tasks/taskmd.css
View file

@ -266,29 +266,26 @@
overflow-y: scroll !important;
overflow-x: hidden !important;
scroll-behavior: smooth;
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-color: var(--primary, #c5f82a) var(--surface, #1a1a1a);
}
.taskmd-progress-content::-webkit-scrollbar {
width: 14px;
width: 8px;
}
.taskmd-progress-content::-webkit-scrollbar-track {
background: var(--surface, #1a1a1a);
border-radius: 7px;
margin: 4px 0;
}
.taskmd-progress-content::-webkit-scrollbar-thumb {
background: var(--border-light, #3a3a3a);
border-radius: 7px;
border: 3px solid var(--surface, #1a1a1a);
min-height: 40px;
background: var(--primary, #c5f82a);
border-radius: 4px;
border: 2px solid var(--surface, #1a1a1a);
}
.taskmd-progress-content::-webkit-scrollbar-thumb:hover {
background: var(--primary, #c5f82a);
background: var(--primary-hover, #d4ff4a);
}
.taskmd-tree {
@ -684,7 +681,25 @@
overflow-x: hidden;
min-height: 0;
scrollbar-width: thin;
scrollbar-color: var(--border, #2a2a2a) transparent;
scrollbar-color: var(--primary, #c5f82a) var(--surface, #1a1a1a);
}
.taskmd-terminal-output::-webkit-scrollbar {
width: 8px;
}
.taskmd-terminal-output::-webkit-scrollbar-track {
background: var(--surface, #1a1a1a);
}
.taskmd-terminal-output::-webkit-scrollbar-thumb {
background: var(--primary, #c5f82a);
border-radius: 4px;
border: 2px solid var(--surface, #1a1a1a);
}
.taskmd-terminal-output::-webkit-scrollbar-thumb:hover {
background: var(--primary-hover, #d4ff4a);
}
/* Markdown content in terminal */

83
ui/suite/tasks/tasks.css
View file

@ -295,7 +295,7 @@ body:has(.tasks-app) {
.tasks-main {
display: grid;
grid-template-columns: 320px 1fr;
grid-template-columns: 320px 6px 1fr;
flex: 1;
overflow: hidden !important;
height: 100%;
@ -303,6 +303,35 @@ body:has(.tasks-app) {
min-height: 0;
}
/* Splitter between panels */
.tasks-splitter {
width: 6px;
background: var(--border, #2a2a2a);
cursor: col-resize;
transition: background 0.2s;
position: relative;
}
.tasks-splitter:hover {
background: var(--primary, #c5f82a);
}
.tasks-splitter::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 2px;
height: 40px;
background: var(--text-tertiary, #666);
border-radius: 1px;
}
.tasks-splitter:hover::after {
background: var(--bg, #0a0a0a);
}
/* =============================================================================
LEFT PANEL - TASK CARDS LIST
============================================================================= */
@ -322,31 +351,59 @@ body:has(.tasks-app) {
overflow-y: scroll;
overflow-x: hidden;
padding: 16px;
padding-right: 8px;
padding-right: 4px;
display: flex;
flex-direction: column;
gap: 12px;
scrollbar-width: auto;
scrollbar-color: var(--border-light, #3a3a3a) var(--surface, #1a1a1a);
}
.tasks-list-scroll::-webkit-scrollbar {
width: 10px;
/* ============================================ */
/* UNIFORM SCROLLBAR STYLES - ALL SCROLLBARS */
/* ============================================ */
/* Firefox scrollbar */
.tasks-list-scroll,
.taskmd-progress-content,
.taskmd-terminal-output,
.task-detail-panel,
#task-detail-content {
scrollbar-width: thin;
scrollbar-color: var(--primary, #c5f82a) var(--surface, #1a1a1a);
}
.tasks-list-scroll::-webkit-scrollbar-track {
/* Webkit scrollbar - uniform style */
.tasks-list-scroll::-webkit-scrollbar,
.taskmd-progress-content::-webkit-scrollbar,
.taskmd-terminal-output::-webkit-scrollbar,
.task-detail-panel::-webkit-scrollbar,
#task-detail-content::-webkit-scrollbar {
width: 8px;
}
.tasks-list-scroll::-webkit-scrollbar-track,
.taskmd-progress-content::-webkit-scrollbar-track,
.taskmd-terminal-output::-webkit-scrollbar-track,
.task-detail-panel::-webkit-scrollbar-track,
#task-detail-content::-webkit-scrollbar-track {
background: var(--surface, #1a1a1a);
border-radius: 5px;
}
.tasks-list-scroll::-webkit-scrollbar-thumb {
background: var(--border-light, #3a3a3a);
border-radius: 5px;
.tasks-list-scroll::-webkit-scrollbar-thumb,
.taskmd-progress-content::-webkit-scrollbar-thumb,
.taskmd-terminal-output::-webkit-scrollbar-thumb,
.task-detail-panel::-webkit-scrollbar-thumb,
#task-detail-content::-webkit-scrollbar-thumb {
background: var(--primary, #c5f82a);
border-radius: 4px;
border: 2px solid var(--surface, #1a1a1a);
}
.tasks-list-scroll::-webkit-scrollbar-thumb:hover {
background: var(--primary, #c5f82a);
.tasks-list-scroll::-webkit-scrollbar-thumb:hover,
.taskmd-progress-content::-webkit-scrollbar-thumb:hover,
.taskmd-terminal-output::-webkit-scrollbar-thumb:hover,
.task-detail-panel::-webkit-scrollbar-thumb:hover,
#task-detail-content::-webkit-scrollbar-thumb:hover {
background: var(--primary-hover, #d4ff4a);
}
/* =============================================================================

42
ui/suite/tasks/tasks.html
View file

@ -116,7 +116,7 @@
<div id="intent-result-hidden" style="display: none"></div>
</div>
<!-- Main Two-Column Layout -->
<!-- Main Two-Column Layout with Splitter -->
<main class="tasks-main">
<!-- Left Panel: Task Cards List -->
<section class="tasks-list-panel">
@ -135,6 +135,9 @@
</div>
</section>
<!-- Splitter -->
<div class="tasks-splitter" id="tasks-splitter"></div>
<!-- Right Panel: Task Detail -->
<aside class="task-detail-panel" id="task-detail-panel">
<!-- Detail content loaded dynamically -->
@ -558,6 +561,43 @@
if (dot) dot.classList.remove("completed", "error");
}
// Splitter drag functionality
(function initSplitter() {
const splitter = document.getElementById("tasks-splitter");
const main = document.querySelector(".tasks-main");
const leftPanel = document.querySelector(".tasks-list-panel");
if (!splitter || !main || !leftPanel) return;
let isDragging = false;
let startX, startWidth;
splitter.addEventListener("mousedown", function (e) {
isDragging = true;
startX = e.clientX;
startWidth = leftPanel.offsetWidth;
document.body.style.cursor = "col-resize";
document.body.style.userSelect = "none";
e.preventDefault();
});
document.addEventListener("mousemove", function (e) {
if (!isDragging) return;
const diff = e.clientX - startX;
const newWidth = Math.max(200, Math.min(600, startWidth + diff));
main.style.gridTemplateColumns = `${newWidth}px 6px 1fr`;
});
document.addEventListener("mouseup", function () {
if (isDragging) {
isDragging = false;
document.body.style.cursor = "";
document.body.style.userSelect = "";
}
});
})();
// Listen for HTMX events to refresh stats
document.body.addEventListener("htmx:afterSwap", function (e) {
if (e.detail.target.id === "task-list") {