botserver/ui/suite/tasks/tasks.html

<div class="tasks-container">
    <!-- Header -->
    <div class="tasks-header">
        <div class="header-content">
            <h1 class="tasks-title">
                <span class="tasks-icon">✓</span>
                Tasks
            </h1>
            <div class="header-stats" id="task-stats">
                <span class="stat-item">
                    <span class="stat-value">0</span>
                    <span class="stat-label">Total</span>
                </span>
                <span class="stat-item">
                    <span class="stat-value">0</span>
                    <span class="stat-label">Active</span>
                </span>
                <span class="stat-item">
                    <span class="stat-value">0</span>
                    <span class="stat-label">Completed</span>
                </span>
            </div>
        </div>
    </div>

    <!-- Add Task Form -->
    <div class="add-task-section">
        <form
            class="add-task-form"
            hx-post="/api/tasks"
            hx-target="#task-list"
            hx-swap="afterbegin"
            hx-on::after-request="this.reset()"
        >
            <input
                type="text"
                name="text"
                class="task-input"
                placeholder="What needs to be done?"
                required
                autofocus
            />
            <select name="category" class="task-category-select">
                <option value="">No Category</option>
                <option value="work">Work</option>
                <option value="personal">Personal</option>
                <option value="shopping">Shopping</option>
                <option value="health">Health</option>
            </select>
            <input
                type="date"
                name="dueDate"
                class="task-date-input"
                placeholder="Due date"
            />
            <button type="submit" class="button-primary add-task-btn">
                <span class="plus-icon">+</span>
                Add Task
            </button>
        </form>
    </div>

    <!-- Filter Tabs -->
    <div class="filter-tabs">
        <button
            class="filter-tab active"
            hx-get="/api/tasks?filter=all"
            hx-target="#task-list"
            hx-swap="innerHTML"
            onclick="setActiveTab(this)"
        >
            <span class="tab-icon">📋</span>
            <span>All</span>
            <span class="tab-count" id="count-all">0</span>
        </button>
        <button
            class="filter-tab"
            hx-get="/api/tasks?filter=active"
            hx-target="#task-list"
            hx-swap="innerHTML"
            onclick="setActiveTab(this)"
        >
            <span class="tab-icon">⏳</span>
            <span>Active</span>
            <span class="tab-count" id="count-active">0</span>
        </button>
        <button
            class="filter-tab"
            hx-get="/api/tasks?filter=completed"
            hx-target="#task-list"
            hx-swap="innerHTML"
            onclick="setActiveTab(this)"
        >
            <span class="tab-icon">✓</span>
            <span>Completed</span>
            <span class="tab-count" id="count-completed">0</span>
        </button>
        <button
            class="filter-tab priority-tab"
            hx-get="/api/tasks?filter=priority"
            hx-target="#task-list"
            hx-swap="innerHTML"
            onclick="setActiveTab(this)"
        >
            <span class="tab-icon">⭐</span>
            <span>Priority</span>
            <span class="tab-count" id="count-priority">0</span>
        </button>
    </div>

    <!-- Task List Container -->
    <div class="task-list-container">
        <div
            class="task-list"
            id="task-list"
            hx-get="/api/tasks"
            hx-trigger="load"
            hx-swap="innerHTML"
        >
            <!-- Loading state -->
            <div class="loading-state">
                <div class="spinner"></div>
                <p>Loading tasks...</p>
            </div>
        </div>
    </div>

    <!-- Footer Actions -->
    <div class="tasks-footer" id="task-footer">
        <div class="footer-info">
            <span class="info-text" id="footer-text">
                <strong>0</strong> tasks remaining
            </span>
        </div>
        <div class="footer-actions">
            <button
                class="button-secondary"
                hx-delete="/api/tasks/completed"
                hx-target="#task-list"
                hx-swap="innerHTML"
                hx-confirm="Are you sure you want to clear all completed tasks?"
            >
                Clear Completed
            </button>
            <button
                class="button-secondary"
                onclick="exportTasks()"
                title="Export as JSON"
            >
                <svg
                    width="16"
                    height="16"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="7 10 12 15 17 10"></polyline>
                    <line x1="12" y1="15" x2="12" y2="3"></line>
                </svg>
                Export
            </button>
        </div>
    </div>
</div>

<style>
    /* Container */
    .tasks-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 2rem;
        min-height: 100vh;
    }

    /* Header */
    .tasks-header {
        margin-bottom: 2rem;
    }

    .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .tasks-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 2rem;
        color: #f1f5f9;
    }

    .tasks-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px;
        font-size: 1.5rem;
    }

    .header-stats {
        display: flex;
        gap: 2rem;
    }

    .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .stat-value {
        font-size: 1.5rem;
        font-weight: 700;
        color: #f1f5f9;
    }

    .stat-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        color: #64748b;
        margin-top: 0.25rem;
    }

    /* Add Task Section */
    .add-task-section {
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        border-radius: 16px;
        padding: 1.5rem;
        margin-bottom: 2rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .add-task-form {
        display: flex;
        gap: 0.75rem;
        align-items: center;
        flex-wrap: wrap;
    }

    .task-input {
        flex: 1;
        min-width: 200px;
        padding: 0.75rem 1rem;
        background: rgba(15, 23, 42, 0.5);
        border: 1px solid #475569;
        border-radius: 8px;
        color: #f1f5f9;
        font-size: 1rem;
        transition: all 0.2s;
    }

    .task-input:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .task-category-select,
    .task-date-input {
        padding: 0.75rem;
        background: rgba(15, 23, 42, 0.5);
        border: 1px solid #475569;
        border-radius: 8px;
        color: #f1f5f9;
        transition: all 0.2s;
    }

    .task-category-select:focus,
    .task-date-input:focus {
        outline: none;
        border-color: #667eea;
    }

    .button-primary {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .button-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
    }

    .button-primary:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

    .plus-icon {
        font-size: 1.25rem;
    }

    /* Filter Tabs */
    .filter-tabs {
        display: flex;
        gap: 0.5rem;
        padding: 0.5rem;
        background: #1e293b;
        border-radius: 12px;
        margin-bottom: 1.5rem;
    }

    .filter-tab {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.75rem;
        background: transparent;
        border: none;
        border-radius: 8px;
        color: #94a3b8;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }

    .filter-tab:hover {
        background: rgba(100, 116, 139, 0.1);
        color: #cbd5e1;
    }

    .filter-tab.active {
        background: #334155;
        color: #f1f5f9;
    }

    .priority-tab.active {
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
        color: #0f172a;
    }

    .tab-icon {
        font-size: 1.125rem;
    }

    .tab-count {
        padding: 0.125rem 0.5rem;
        background: rgba(100, 116, 139, 0.2);
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .filter-tab.active .tab-count {
        background: rgba(241, 245, 249, 0.2);
    }

    /* Task List */
    .task-list-container {
        min-height: 300px;
        margin-bottom: 2rem;
    }

    .task-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .task-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 1rem 1.25rem;
        background: #1e293b;
        border-radius: 12px;
        transition: all 0.2s;
        animation: slideIn 0.3s ease;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .task-item:hover {
        background: #334155;
        transform: translateX(4px);
    }

    .task-item.completed {
        opacity: 0.6;
    }

    .task-item.completed .task-text {
        text-decoration: line-through;
        color: #64748b;
    }

    .task-checkbox {
        width: 24px;
        height: 24px;
        border-radius: 6px;
        border: 2px solid #475569;
        cursor: pointer;
        transition: all 0.2s;
    }

    .task-checkbox:checked {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-color: transparent;
    }

    .task-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .task-text-wrapper {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .task-text {
        color: #f1f5f9;
        font-size: 1rem;
    }

    .task-meta {
        display: flex;
        gap: 0.75rem;
        align-items: center;
    }

    .task-category {
        padding: 0.25rem 0.75rem;
        background: rgba(100, 116, 139, 0.2);
        border-radius: 999px;
        font-size: 0.75rem;
        color: #94a3b8;
    }

    .task-due-date {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.75rem;
        color: #94a3b8;
    }

    .task-due-date.overdue {
        color: #ef4444;
    }

    .task-actions {
        display: flex;
        gap: 0.5rem;
    }

    .action-btn {
        padding: 0.5rem;
        background: transparent;
        border: none;
        border-radius: 6px;
        color: #64748b;
        cursor: pointer;
        transition: all 0.2s;
    }

    .action-btn:hover {
        background: rgba(100, 116, 139, 0.1);
        color: #cbd5e1;
    }

    .priority-btn.active {
        color: #fbbf24;
    }

    .edit-btn:hover {
        color: #3b82f6;
    }

    .delete-btn:hover {
        color: #ef4444;
    }

    /* Task input for editing */
    .task-edit-input {
        flex: 1;
        padding: 0.5rem;
        background: rgba(15, 23, 42, 0.5);
        border: 1px solid #475569;
        border-radius: 6px;
        color: #f1f5f9;
        font-size: 1rem;
    }

    /* Empty state */
    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4rem 2rem;
        text-align: center;
    }

    .empty-state svg {
        color: #475569;
        margin-bottom: 1rem;
    }

    .empty-state h3 {
        font-size: 1.25rem;
        color: #94a3b8;
        margin-bottom: 0.5rem;
    }

    .empty-state p {
        color: #64748b;
    }

    /* Loading state */
    .loading-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4rem;
        color: #64748b;
    }

    /* Footer */
    .tasks-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.5rem;
        background: #1e293b;
        border-radius: 12px;
    }

    .footer-info {
        color: #94a3b8;
    }

    .footer-actions {
        display: flex;
        gap: 0.75rem;
    }

    .button-secondary {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: transparent;
        border: 1px solid #475569;
        border-radius: 8px;
        color: #94a3b8;
        cursor: pointer;
        transition: all 0.2s;
    }

    .button-secondary:hover {
        background: #334155;
        color: #f1f5f9;
        border-color: #475569;
    }

    /* Spinner */
    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    .spinner {
        width: 2rem;
        height: 2rem;
        border: 3px solid #334155;
        border-top-color: #667eea;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        margin-bottom: 1rem;
    }

    /* HTMX loading states */
    .htmx-request .task-item {
        opacity: 0.6;
    }

    .htmx-request.filter-tab {
        pointer-events: none;
        opacity: 0.7;
    }

    /* Responsive */
    @media (max-width: 640px) {
        .tasks-container {
            padding: 1rem;
        }

        .header-content {
            flex-direction: column;
            gap: 1rem;
            text-align: center;
        }

        .header-stats {
            width: 100%;
            justify-content: space-around;
        }

        .add-task-form {
            flex-direction: column;
        }

        .task-input {
            width: 100%;
        }

        .filter-tabs {
            flex-wrap: wrap;
        }

        .tasks-footer {
            flex-direction: column;
            gap: 1rem;
            text-align: center;
        }
    }
</style>

<script>
    // Set active tab
    function setActiveTab(button) {
        document.querySelectorAll(".filter-tab").forEach((tab) => {
            tab.classList.remove("active");
        });
        button.classList.add("active");
    }

    // Export tasks as JSON
    function exportTasks() {
        fetch("/api/tasks?format=json")
            .then((response) => response.json())
            .then((tasks) => {
                const dataStr = JSON.stringify(tasks, null, 2);
                const dataUri =
                    "data:application/json;charset=utf-8," +
                    encodeURIComponent(dataStr);

                const exportFileDefaultName = `tasks-${new Date().toISOString().split("T")[0]}.json`;

                const linkElement = document.createElement("a");
                linkElement.setAttribute("href", dataUri);
                linkElement.setAttribute("download", exportFileDefaultName);
                linkElement.click();
            });
    }

    // Update task statistics
    function updateStats() {
        fetch("/api/tasks/stats")
            .then((response) => response.json())
            .then((stats) => {
                // Update header stats
                document.querySelector(
                    ".stat-item:nth-child(1) .stat-value",
                ).textContent = stats.total || 0;
                document.querySelector(
                    ".stat-item:nth-child(2) .stat-value",
                ).textContent = stats.active || 0;
                document.querySelector(
                    ".stat-item:nth-child(3) .stat-value",
                ).textContent = stats.completed || 0;

                // Update tab counts
                document.getElementById("count-all").textContent =
                    stats.total || 0;
                document.getElementById("count-active").textContent =
                    stats.active || 0;
                document.getElementById("count-completed").textContent =
                    stats.completed || 0;
                document.getElementById("count-priority").textContent =
                    stats.priority || 0;

                // Update footer text
                const footerText = document.getElementById("footer-text");
                if (stats.active === 0) {
                    footerText.innerHTML = "All tasks completed! 🎉";
                } else {
                    footerText.innerHTML = `<strong>${stats.active}</strong> ${stats.active === 1 ? "task" : "tasks"} remaining`;
                }

                // Show/hide footer
                const footer = document.getElementById("task-footer");
                footer.style.display = stats.total > 0 ? "flex" : "none";
            });
    }

    // Handle checkbox changes
    document.addEventListener("change", function (e) {
        if (e.target.classList.contains("task-checkbox")) {
            const taskId = e.target.dataset.taskId;
            const completed = e.target.checked;

            fetch(`/api/tasks/${taskId}/status`, {
                method: "PATCH",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ completed }),
            }).then(() => {
                const taskItem = e.target.closest(".task-item");
                if (completed) {
                    taskItem.classList.add("completed");
                } else {
                    taskItem.classList.remove("completed");
                }
                updateStats();
            });
        }
    });

    // Handle task actions
    document.addEventListener("click", function (e) {
        // Priority toggle
        if (e.target.closest('[data-action="priority"]')) {
            const btn = e.target.closest('[data-action="priority"]');
            const taskId = btn.dataset.taskId;
            const priority = !btn.classList.contains("active");

            fetch(`/api/tasks/${taskId}/priority`, {
                method: "PATCH",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ priority }),
            }).then(() => {
                btn.classList.toggle("active");
                updateStats();
            });
        }

        // Edit task
        if (e.target.closest('[data-action="edit"]')) {
            const btn = e.target.closest('[data-action="edit"]');
            const taskId = btn.dataset.taskId;
            const taskItem = btn.closest(".task-item");
            const taskText = taskItem.querySelector(".task-text");
            const currentText = taskText.textContent;

            const input = document.createElement("input");
            input.type = "text";
            input.className = "task-edit-input";
            input.value = currentText;

            taskText.replaceWith(input);
            input.focus();
            input.select();

            input.addEventListener("blur", function () {
                saveEdit();
            });

            input.addEventListener("keydown", function (e) {
                if (e.key === "Enter") {
                    saveEdit();
                } else if (e.key === "Escape") {
                    cancelEdit();
                }
            });

            function saveEdit() {
                const newText = input.value.trim();
                if (newText && newText !== currentText) {
                    fetch(`/api/tasks/${taskId}`, {
                        method: "PATCH",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({ text: newText }),
                    }).then(() => {
                        const span = document.createElement("span");
                        span.className = "task-text";
                        span.textContent = newText;
                        input.replaceWith(span);
                    });
                } else {
                    cancelEdit();
                }
            }

            function cancelEdit() {
                const span = document.createElement("span");
                span.className = "task-text";
                span.textContent = currentText;
                input.replaceWith(span);
            }
        }

        // Delete task
        if (e.target.closest('[data-action="delete"]')) {
            const btn = e.target.closest('[data-action="delete"]');
            const taskId = btn.dataset.taskId;

            if (confirm("Delete this task?")) {
                fetch(`/api/tasks/${taskId}`, {
                    method: "DELETE",
                }).then(() => {
                    const taskItem = btn.closest(".task-item");
                    taskItem.style.animation = "slideOut 0.3s ease";
                    setTimeout(() => {
                        taskItem.remove();
                        updateStats();
                    }, 300);
                });
            }
        }
    });

    // Animation for removing tasks
    const style = document.createElement("style");
    style.textContent = `
    @keyframes slideOut {
        to {
            opacity: 0;
            transform: translateX(-100%);
        }
    }
`;
    document.head.appendChild(style);

    // Update stats after any HTMX request
    document.body.addEventListener("htmx:afterSwap", function (evt) {
        if (evt.detail.target.id === "task-list") {
            updateStats();
        }
    });

    // Initial stats load
    document.addEventListener("DOMContentLoaded", function () {
        updateStats();
    });

    // Keyboard shortcuts
    document.addEventListener("keydown", function (e) {
        // Alt + N for new task
        if (e.altKey && e.key === "n") {
            e.preventDefault();
            document.querySelector(".task-input").focus();
        }

        // Alt + 1-4 for filter tabs
        if (e.altKey && e.key >= "1" && e.key <= "4") {
            e.preventDefault();
            const tabs = document.querySelectorAll(".filter-tab");
            const index = parseInt(e.key) - 1;
            if (tabs[index]) {
                tabs[index].click();
            }
        }
    });
</script>