webui/src/web-components/sketch-todo-panel.ts

import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { unsafeHTML } from "lit/directives/unsafe-html.js";
import { TodoList, TodoItem } from "../types.js";

@customElement("sketch-todo-panel")
export class SketchTodoPanel extends LitElement {
  @property()
  visible: boolean = false;

  @state()
  private todoList: TodoList | null = null;

  @state()
  private loading: boolean = false;

  @state()
  private error: string = "";

  static styles = css`
    :host {
      display: flex;
      flex-direction: column;
      height: 100%;
      background-color: transparent; /* Let parent handle background */
      overflow: hidden; /* Ensure proper clipping */
    }

    .todo-header {
      padding: 8px 12px;
      border-bottom: 1px solid #e0e0e0;
      background-color: #f5f5f5;
      font-weight: 600;
      font-size: 13px;
      color: #333;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .todo-icon {
      width: 14px;
      height: 14px;
      color: #666;
    }

    .todo-content {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
      padding-bottom: 20px; /* Extra bottom padding for better scrolling */
      font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
      font-size: 12px;
      line-height: 1.4;
      /* Ensure scrollbar is always accessible */
      min-height: 0;
    }

    .todo-content.loading {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
    }

    .todo-content.error {
      color: #d32f2f;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .todo-content.empty {
      color: #999;
      font-style: italic;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Todo item styling */
    .todo-item {
      display: flex;
      align-items: flex-start;
      padding: 8px;
      margin-bottom: 6px;
      border-radius: 4px;
      background-color: #fff;
      border: 1px solid #e0e0e0;
      gap: 8px;
    }

    .todo-item.queued {
      border-left: 3px solid #e0e0e0;
    }

    .todo-item.in-progress {
      border-left: 3px solid #e0e0e0;
    }

    .todo-item.completed {
      border-left: 3px solid #e0e0e0;
    }

    .todo-status-icon {
      font-size: 14px;
      margin-top: 1px;
      flex-shrink: 0;
    }

    .todo-main {
      flex: 1;
      min-width: 0;
    }

    .todo-content-text {
      font-size: 12px;
      line-height: 1.3;
      color: #333;
      word-wrap: break-word;
    }

    .todo-header-text {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .todo-count {
      background-color: #e0e0e0;
      color: #666;
      padding: 2px 6px;
      border-radius: 10px;
      font-size: 10px;
      font-weight: normal;
    }

    /* Loading spinner */
    .spinner {
      width: 20px;
      height: 20px;
      border: 2px solid #f3f3f3;
      border-top: 2px solid #3498db;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-right: 8px;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  `;

  updateTodoContent(content: string) {
    try {
      if (!content.trim()) {
        this.todoList = null;
      } else {
        this.todoList = JSON.parse(content) as TodoList;
      }
      this.loading = false;
      this.error = "";
    } catch (error) {
      console.error("Failed to parse todo content:", error);
      this.error = "Failed to parse todo data";
      this.todoList = null;
      this.loading = false;
    }
  }

  private renderTodoItem(item: TodoItem) {
    const statusIcon =
      {
        queued: "⚪",
        "in-progress": "🦉",
        completed: "✅",
      }[item.status] || "?";

    return html`
      <div class="todo-item ${item.status}">
        <div class="todo-status-icon">${statusIcon}</div>
        <div class="todo-main">
          <div class="todo-content-text">${item.task}</div>
        </div>
      </div>
    `;
  }

  render() {
    if (!this.visible) {
      return html``;
    }

    const todoIcon = html`
      <svg
        class="todo-icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M9 11l3 3L22 4"></path>
        <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"></path>
      </svg>
    `;

    let contentElement;
    if (this.loading) {
      contentElement = html`
        <div class="todo-content loading">
          <div class="spinner"></div>
          Loading todos...
        </div>
      `;
    } else if (this.error) {
      contentElement = html`
        <div class="todo-content error">Error: ${this.error}</div>
      `;
    } else if (
      !this.todoList ||
      !this.todoList.items ||
      this.todoList.items.length === 0
    ) {
      contentElement = html`
        <div class="todo-content empty">No todos available</div>
      `;
    } else {
      const totalCount = this.todoList.items.length;
      const completedCount = this.todoList.items.filter(
        (item) => item.status === "completed",
      ).length;
      const inProgressCount = this.todoList.items.filter(
        (item) => item.status === "in-progress",
      ).length;

      contentElement = html`
        <div class="todo-header">
          <div class="todo-header-text">
            ${todoIcon}
            <span>Sketching...</span>
            <span class="todo-count">${completedCount}/${totalCount}</span>
          </div>
        </div>
        <div class="todo-content">
          ${this.todoList.items.map((item) => this.renderTodoItem(item))}
        </div>
      `;
    }

    return html` ${contentElement} `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "sketch-todo-panel": SketchTodoPanel;
  }
}