webui/src/web-components/sketch-diff-empty-view.ts

import { css, html, LitElement } from "lit";
import { customElement } from "lit/decorators.js";

/**
 * A component that displays helpful information when the diff view is empty
 */
@customElement("sketch-diff-empty-view")
export class SketchDiffEmptyView extends LitElement {
  static styles = css`
    :host {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
    }

    .empty-diff-box {
      margin: 2rem auto;
      max-width: 1200px;
      width: 90%;
      padding: 2rem;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      background-color: #ffffff;
      text-align: center;
    }

    .empty-diff-title {
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 1.5rem;
      text-align: center;
      color: #333;
    }

    .empty-diff-content {
      color: #666;
      line-height: 1.6;
      font-size: 1rem;
      text-align: left;
      margin-bottom: 1rem;
    }

    strong {
      font-weight: 600;
      color: #333;
    }
  `;

  render() {
    return html`
      <div class="empty-diff-box">
        <h2 class="empty-diff-title">How to use the Diff View</h2>
        
        <p class="empty-diff-content">
          By default, the diff view shows differences between when you started Sketch (the "sketch-base" tag) and the current state. Choose a commit to look at, or, a range of commits, and navigate across files.
        </p>

        <p class="empty-diff-content">
          You can select text to leave comments on the code. These will be added to your chat window, and you can click Send to send them along to the agent, which will respond in the chat window.
        </p>

        <p class="empty-diff-content">
          If the range includes <strong>Uncommitted Changes</strong>, you can <strong>edit</strong> the text as well, and it auto-saves. If you want to clear up a comment or write your own text, just go ahead and do it! Once you're done, though, be sure to commit your changes, either by asking the agent to do so or in the Terminal view.
        </p>
      </div>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "sketch-diff-empty-view": SketchDiffEmptyView;
  }
}