@thanhvn14/csvibe 0.1.3 → 0.1.5

package/.github/skills/plans-kanban/assets/dashboard.js

@@ -0,0 +1,596 @@
+/**
+ * Dashboard Controls
+ * Client-side sorting, filtering, and search for plans dashboard
+ */
+(function() {
+  'use strict';
+
+  // State
+  const state = {
+    sort: 'date-desc',
+    filter: 'all',
+    search: '',
+    view: 'kanban' // 'kanban' or 'grid'
+  };
+
+  // Status column config
+  const STATUS_COLUMNS = [
+    { id: 'pending', label: 'Pending', color: 'pending' },
+    { id: 'in-progress', label: 'In Progress', color: 'in-progress' },
+    { id: 'in-review', label: 'In Review', color: 'in-review' },
+    { id: 'completed', label: 'Done', color: 'completed' },
+    { id: 'cancelled', label: 'Cancelled', color: 'cancelled' }
+  ];
+
+  // Elements
+  let allPlans = [];
+  let grid = null;
+  let kanbanBoard = null;
+  let resultCount = null;
+  let emptyState = null;
+  let srAnnounce = null;
+
+  /**
+   * Initialize dashboard
+   */
+  function init() {
+    allPlans = window.__plans || [];
+    grid = document.querySelector('.plans-grid');
+    kanbanBoard = document.querySelector('.kanban-board');
+    resultCount = document.querySelector('.result-count');
+    emptyState = document.querySelector('.empty-state');
+    srAnnounce = document.getElementById('sr-announce');
+
+    // Mark as loaded
+    document.body.classList.add('plans-loaded');
+
+    // Show empty state if no plans
+    if (!allPlans.length) {
+      if (emptyState) emptyState.hidden = false;
+      return;
+    }
+
+    // Parse URL state
+    parseURL();
+
+    // Bind events
+    bindEvents();
+
+    // Initial render
+    applyFiltersAndSort();
+
+    // Setup keyboard navigation
+    setupKeyboardNav();
+
+    // Setup theme toggle
+    setupThemeToggle();
+
+    // Setup view toggle
+    setupViewToggle();
+  }
+
+  /**
+   * Bind event listeners
+   */
+  function bindEvents() {
+    // Search input with debounce
+    const searchInput = document.getElementById('plan-search');
+    if (searchInput) {
+      let debounceTimer;
+      searchInput.addEventListener('input', (e) => {
+        clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => {
+          state.search = e.target.value.toLowerCase().trim();
+          applyFiltersAndSort();
+        }, 300);
+      });
+
+      // Clear search on Escape
+      searchInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+          searchInput.value = '';
+          state.search = '';
+          applyFiltersAndSort();
+        }
+      });
+    }
+
+    // Sort select
+    const sortSelect = document.getElementById('sort-select');
+    if (sortSelect) {
+      sortSelect.addEventListener('change', (e) => {
+        state.sort = e.target.value;
+        applyFiltersAndSort();
+      });
+    }
+
+    // Filter pills
+    document.querySelectorAll('.filter-pill').forEach(pill => {
+      pill.addEventListener('click', () => {
+        // Update active state
+        document.querySelectorAll('.filter-pill').forEach(p => {
+          p.classList.remove('active');
+          p.setAttribute('aria-pressed', 'false');
+        });
+        pill.classList.add('active');
+        pill.setAttribute('aria-pressed', 'true');
+
+        state.filter = pill.dataset.filter;
+        applyFiltersAndSort();
+      });
+    });
+
+    // Card click to navigate
+    grid?.addEventListener('click', (e) => {
+      const card = e.target.closest('.plan-card');
+      if (card && !e.target.closest('.view-btn')) {
+        const link = card.querySelector('.view-btn');
+        if (link) link.click();
+      }
+    });
+  }
+
+  /**
+   * Apply filters and sorting
+   */
+  function applyFiltersAndSort() {
+    let filtered = allPlans.slice();
+
+    // Filter by status
+    if (state.filter !== 'all') {
+      filtered = filtered.filter(p => p.status === state.filter);
+    }
+
+    // Filter by search
+    if (state.search) {
+      filtered = filtered.filter(p =>
+        p.name.toLowerCase().includes(state.search) ||
+        p.id.toLowerCase().includes(state.search)
+      );
+    }
+
+    // Sort
+    filtered.sort((a, b) => {
+      switch (state.sort) {
+        case 'date-desc':
+          return new Date(b.lastModified) - new Date(a.lastModified);
+        case 'date-asc':
+          return new Date(a.lastModified) - new Date(b.lastModified);
+        case 'name-asc':
+          return a.name.localeCompare(b.name);
+        case 'name-desc':
+          return b.name.localeCompare(a.name);
+        case 'progress-desc':
+          return b.progress - a.progress;
+        case 'progress-asc':
+          return a.progress - b.progress;
+        default:
+          return 0;
+      }
+    });
+
+    renderGrid(filtered);
+
+    // Also update kanban if in kanban view
+    if (state.view === 'kanban') {
+      renderKanbanBoard(allPlans); // Kanban uses all plans grouped by status
+    }
+
+    updateURL();
+    announce(`Showing ${filtered.length} plan${filtered.length !== 1 ? 's' : ''}`);
+  }
+
+  /**
+   * Render grid with filtered plans
+   */
+  function renderGrid(plans) {
+    const visibleIds = new Set(plans.map(p => p.id));
+
+    // Hide/show cards and set order
+    document.querySelectorAll('.plan-card').forEach(card => {
+      const id = card.dataset.id;
+      const isVisible = visibleIds.has(id);
+      card.style.display = isVisible ? '' : 'none';
+
+      if (isVisible) {
+        const index = plans.findIndex(p => p.id === id);
+        card.style.order = index;
+      }
+    });
+
+    // Update count
+    if (resultCount) {
+      resultCount.innerHTML = `Showing <strong>${plans.length}</strong> plan${plans.length !== 1 ? 's' : ''}`;
+    }
+
+    // Show/hide empty state
+    if (emptyState) {
+      emptyState.hidden = plans.length > 0;
+    }
+  }
+
+  /**
+   * Parse URL parameters
+   */
+  function parseURL() {
+    const params = new URLSearchParams(window.location.search);
+
+    if (params.has('sort')) {
+      state.sort = params.get('sort');
+    }
+    if (params.has('filter')) {
+      state.filter = params.get('filter');
+    }
+    if (params.has('q')) {
+      state.search = params.get('q');
+    }
+
+    // Update controls to match state
+    const sortSelect = document.getElementById('sort-select');
+    if (sortSelect) sortSelect.value = state.sort;
+
+    const searchInput = document.getElementById('plan-search');
+    if (searchInput) searchInput.value = state.search;
+
+    document.querySelectorAll('.filter-pill').forEach(p => {
+      const isActive = p.dataset.filter === state.filter;
+      p.classList.toggle('active', isActive);
+      p.setAttribute('aria-pressed', String(isActive));
+    });
+  }
+
+  /**
+   * Update URL with current state
+   */
+  function updateURL() {
+    const params = new URLSearchParams();
+
+    if (state.sort !== 'date-desc') params.set('sort', state.sort);
+    if (state.filter !== 'all') params.set('filter', state.filter);
+    if (state.search) params.set('q', state.search);
+
+    const url = params.toString()
+      ? `${window.location.pathname}?${params}`
+      : window.location.pathname;
+
+    history.replaceState(null, '', url);
+  }
+
+  /**
+   * Announce message to screen readers
+   */
+  function announce(message) {
+    if (!srAnnounce) return;
+    srAnnounce.textContent = '';
+    // Force reflow
+    void srAnnounce.offsetHeight;
+    srAnnounce.textContent = message;
+  }
+
+  /**
+   * Setup keyboard navigation for cards
+   */
+  function setupKeyboardNav() {
+    grid?.addEventListener('keydown', (e) => {
+      const cards = [...document.querySelectorAll('.plan-card:not([style*="display: none"])')];
+      const current = document.activeElement;
+      const index = cards.indexOf(current);
+
+      if (index === -1) return;
+
+      let next;
+      switch (e.key) {
+        case 'ArrowRight':
+        case 'ArrowDown':
+          e.preventDefault();
+          next = cards[index + 1] || cards[0];
+          break;
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          e.preventDefault();
+          next = cards[index - 1] || cards[cards.length - 1];
+          break;
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          const link = current.querySelector('.view-btn');
+          if (link) link.click();
+          break;
+        case 'Home':
+          e.preventDefault();
+          next = cards[0];
+          break;
+        case 'End':
+          e.preventDefault();
+          next = cards[cards.length - 1];
+          break;
+      }
+
+      if (next) next.focus();
+    });
+  }
+
+  /**
+   * Setup theme toggle
+   */
+  function setupThemeToggle() {
+    const toggle = document.getElementById('theme-toggle');
+    if (!toggle) return;
+
+    // Check saved preference
+    const savedTheme = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const initialTheme = savedTheme || (prefersDark ? 'dark' : 'light');
+
+    document.documentElement.setAttribute('data-theme', initialTheme);
+
+    toggle.addEventListener('click', () => {
+      const current = document.documentElement.getAttribute('data-theme');
+      const next = current === 'dark' ? 'light' : 'dark';
+      document.documentElement.setAttribute('data-theme', next);
+      localStorage.setItem('theme', next);
+      announce(`Theme changed to ${next} mode`);
+    });
+  }
+
+  /**
+   * Setup view toggle (Kanban/Grid)
+   */
+  function setupViewToggle() {
+    const toggleBtns = document.querySelectorAll('.view-toggle-btn');
+    if (!toggleBtns.length) return;
+
+    // Restore saved view preference
+    const savedView = localStorage.getItem('dashboard-view') || 'kanban';
+    state.view = savedView;
+    updateViewMode();
+
+    toggleBtns.forEach(btn => {
+      btn.addEventListener('click', () => {
+        const view = btn.dataset.view;
+        if (view === state.view) return;
+
+        state.view = view;
+        localStorage.setItem('dashboard-view', view);
+        updateViewMode();
+        announce(`Switched to ${view} view`);
+      });
+    });
+  }
+
+  /**
+   * Update view mode (toggle between kanban and grid)
+   */
+  function updateViewMode() {
+    const body = document.body;
+
+    // Update toggle buttons
+    document.querySelectorAll('.view-toggle-btn').forEach(btn => {
+      const isActive = btn.dataset.view === state.view;
+      btn.classList.toggle('active', isActive);
+      btn.setAttribute('aria-pressed', String(isActive));
+    });
+
+    // Toggle view classes
+    if (state.view === 'grid') {
+      body.classList.add('view-mode-grid');
+    } else {
+      body.classList.remove('view-mode-grid');
+    }
+
+    // Re-render kanban when switching to kanban view
+    if (state.view === 'kanban') {
+      renderKanbanBoard(getFilteredPlans());
+    }
+  }
+
+  /**
+   * Get filtered and sorted plans
+   */
+  function getFilteredPlans() {
+    let filtered = allPlans.slice();
+
+    // Filter by status (only for grid view, kanban shows all columns)
+    if (state.filter !== 'all' && state.view === 'grid') {
+      filtered = filtered.filter(p => p.status === state.filter);
+    }
+
+    // Filter by search
+    if (state.search) {
+      filtered = filtered.filter(p =>
+        p.name.toLowerCase().includes(state.search) ||
+        p.id.toLowerCase().includes(state.search)
+      );
+    }
+
+    // Sort
+    filtered.sort((a, b) => {
+      switch (state.sort) {
+        case 'date-desc':
+          return new Date(b.lastModified) - new Date(a.lastModified);
+        case 'date-asc':
+          return new Date(a.lastModified) - new Date(b.lastModified);
+        case 'name-asc':
+          return a.name.localeCompare(b.name);
+        case 'name-desc':
+          return b.name.localeCompare(a.name);
+        case 'progress-desc':
+          return b.progress - a.progress;
+        case 'progress-asc':
+          return a.progress - b.progress;
+        default:
+          return 0;
+      }
+    });
+
+    return filtered;
+  }
+
+  /**
+   * Render kanban board with plans grouped by status
+   */
+  function renderKanbanBoard(plans) {
+    if (!kanbanBoard) return;
+
+    // Group plans by status
+    const grouped = {};
+    STATUS_COLUMNS.forEach(col => {
+      grouped[col.id] = [];
+    });
+
+    // Apply search filter for kanban
+    let filteredPlans = plans;
+    if (state.search) {
+      filteredPlans = plans.filter(p =>
+        p.name.toLowerCase().includes(state.search) ||
+        p.id.toLowerCase().includes(state.search)
+      );
+    }
+
+    filteredPlans.forEach(plan => {
+      const status = plan.status || 'pending';
+      if (grouped[status]) {
+        grouped[status].push(plan);
+      } else {
+        grouped['pending'].push(plan);
+      }
+    });
+
+    // Generate column HTML
+    const columnsHtml = STATUS_COLUMNS.map(col => {
+      const columnPlans = grouped[col.id];
+      const cardsHtml = columnPlans.length > 0
+        ? columnPlans.map(plan => renderKanbanCard(plan)).join('')
+        : `<div class="kanban-empty">
+            <svg class="kanban-empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <rect x="3" y="3" width="18" height="18" rx="2"/>
+              <path d="M9 9h6M9 13h6M9 17h4"/>
+            </svg>
+            <span>No plans</span>
+          </div>`;
+
+      return `
+        <div class="kanban-column" data-status="${col.id}">
+          <div class="kanban-column-header">
+            <div class="kanban-column-title">
+              <span class="kanban-status-dot ${col.color}"></span>
+              <span>${col.label}</span>
+            </div>
+            <span class="kanban-column-count">${columnPlans.length}</span>
+          </div>
+          <div class="kanban-cards">
+            ${cardsHtml}
+          </div>
+        </div>
+      `;
+    }).join('');
+
+    kanbanBoard.innerHTML = columnsHtml;
+  }
+
+  /**
+   * Render a single kanban card (enhanced with details)
+   */
+  function renderKanbanCard(plan) {
+    const progressPct = Math.round(plan.progress || 0);
+    const dateStr = formatDate(plan.lastModified);
+
+    // Priority badge
+    let priorityHtml = '';
+    if (plan.priority) {
+      const p = String(plan.priority).toUpperCase();
+      let priorityClass = '';
+      if (p === 'P1' || p === 'HIGH' || p === 'CRITICAL') priorityClass = 'priority-high';
+      else if (p === 'P2' || p === 'MEDIUM' || p === 'NORMAL') priorityClass = 'priority-medium';
+      else if (p === 'P3' || p === 'LOW') priorityClass = 'priority-low';
+      if (priorityClass) {
+        priorityHtml = `<span class="kanban-card-priority ${priorityClass}">${escapeHtml(plan.priority)}</span>`;
+      }
+    }
+
+    // Description (truncated)
+    let descriptionHtml = '';
+    if (plan.description) {
+      const desc = plan.description.length > 80 ? plan.description.slice(0, 77) + '...' : plan.description;
+      descriptionHtml = `<p class="kanban-card-description">${escapeHtml(desc)}</p>`;
+    }
+
+    // Tags (max 3 visible)
+    let tagsHtml = '';
+    if (plan.tags && Array.isArray(plan.tags) && plan.tags.length > 0) {
+      const visibleTags = plan.tags.slice(0, 3);
+      const hiddenCount = plan.tags.length - 3;
+      tagsHtml = '<div class="kanban-card-tags">';
+      tagsHtml += visibleTags.map(tag => `<span class="kanban-card-tag">${escapeHtml(tag)}</span>`).join('');
+      if (hiddenCount > 0) {
+        tagsHtml += `<span class="kanban-card-tag tag-more">+${hiddenCount}</span>`;
+      }
+      tagsHtml += '</div>';
+    }
+
+    // Footer with effort and phases
+    let footerHtml = '';
+    const effortHtml = plan.totalEffortFormatted
+      ? `<span class="kanban-card-effort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>${escapeHtml(plan.totalEffortFormatted)}</span>`
+      : '';
+    const phasesHtml = plan.phasesTotal
+      ? `<span class="kanban-card-phases">${plan.phasesTotal} phases</span>`
+      : '';
+    if (effortHtml || phasesHtml) {
+      footerHtml = `<div class="kanban-card-footer">${effortHtml}${phasesHtml}</div>`;
+    }
+
+    return `
+      <a href="/view?file=${encodeURIComponent(plan.path)}" class="kanban-card" data-id="${plan.id}">
+        <div class="kanban-card-header">
+          <h4 class="kanban-card-title">${escapeHtml(plan.name)}</h4>
+          ${priorityHtml}
+        </div>
+        ${descriptionHtml}
+        <div class="kanban-card-meta">
+          <div class="kanban-card-progress">
+            <div class="kanban-card-progress-bar">
+              <div class="kanban-card-progress-fill" style="width: ${progressPct}%"></div>
+            </div>
+            <span>${progressPct}%</span>
+          </div>
+          <span class="kanban-card-date">${dateStr}</span>
+        </div>
+        ${tagsHtml}
+        ${footerHtml}
+      </a>
+    `;
+  }
+
+  /**
+   * Format date for display
+   */
+  function formatDate(dateStr) {
+    if (!dateStr) return '';
+    const date = new Date(dateStr);
+    const now = new Date();
+    const diffDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));
+
+    if (diffDays === 0) return 'Today';
+    if (diffDays === 1) return 'Yesterday';
+    if (diffDays < 7) return `${diffDays}d ago`;
+
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  }
+
+  /**
+   * Escape HTML to prevent XSS
+   */
+  function escapeHtml(str) {
+    const div = document.createElement('div');
+    div.textContent = str;
+    return div.innerHTML;
+  }
+
+  // Initialize on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();