webui: convert sketch diff components to inherit from SketchTailwindElement
Convert SketchDiffEmptyView and SketchDiff2View components from LitElement
to SketchTailwindElement inheritance pattern to enable proper Tailwind CSS
integration across the diff view system.
Components Converted:
- sketch-diff-empty-view: Simple empty state component with help text
- sketch-diff2-view: Complex Monaco editor-based diff viewer with file management
SketchDiffEmptyView Changes:
- Updated imports: removed css, LitElement; added SketchTailwindElement
- Changed class inheritance from LitElement to SketchTailwindElement
- Removed static styles CSS block entirely
- Converted custom CSS to Tailwind classes:
- Container: flex flex-col items-center justify-center h-full w-full box-border
- Content box: m-8 mx-auto max-w-4xl w-11/12 p-8 border-2 border-gray-300 rounded-lg shadow-sm bg-white text-center
- Typography: text-2xl font-semibold mb-6 text-center text-gray-800
- Body text: text-gray-600 leading-relaxed text-base text-left mb-4
- Strong emphasis: font-semibold text-gray-800
SketchDiff2View Changes:
- Updated imports: removed css, LitElement; added SketchTailwindElement
- Changed class inheritance from LitElement to SketchTailwindElement
- Removed extensive static styles CSS block (280+ lines)
- Preserved Monaco editor integration, scrollbar hiding, and dynamic height handling
- Maintained all complex diff view functionality and state management
CSS-to-Tailwind Mapping for SketchDiff2View:
- Host container: flex h-full flex-1 flex-col min-h-0 overflow-hidden relative
- Controls section: px-4 py-2 border-b border-gray-300 bg-gray-100 flex-shrink-0
- File selector: min-w-[200px] px-3 py-2 border border-gray-400 rounded bg-white
- Diff container: flex-1 overflow-auto flex flex-col min-h-0 relative h-full
- File sections: flex flex-col border-b-4 border-gray-300 mb-0 last:border-b-0
- File headers: bg-gray-100 border-b border-gray-300 px-4 py-2 sticky top-0 z-10
- Monaco editors: flex flex-col w-full min-h-[200px] flex-1
File Status Badge System:
- Added: bg-green-100 text-green-800 (green status badge)
- Modified: bg-yellow-100 text-yellow-800 (yellow status badge)
- Deleted: bg-red-100 text-red-800 (red status badge)
- Renamed: bg-cyan-100 text-cyan-800 (cyan status badge)
- Copied: bg-indigo-100 text-indigo-800 (indigo status badge)
- Status badges: inline-block px-1.5 py-0.5 rounded text-xs font-bold mr-2
Interactive Elements:
- Expand/collapse buttons: bg-transparent border border-gray-300 rounded px-2 py-1
- Button hover states: hover:bg-gray-200 with transition-colors duration-200
- File paths: font-mono font-normal text-gray-600 for monospace display
- Loading states: flex items-center justify-center h-full for centered display
- Error states: text-red-600 p-4 for consistent error styling
Methods Updated in SketchDiff2View:
- render(): Main component layout with Tailwind flexbox containers
- renderFileSelector(): File dropdown with focus states and disabled styling
- renderDiffContent(): Content routing with loading/error/empty state styling
- renderFileDiff(): Individual file diff sections with proper Monaco integration
- renderFileHeader(): File header with status badges and expand/collapse controls
- renderSingleFileExpandButton(): Header expand button with consistent styling
- renderSingleFileView(): Full-screen single file view with proper layout
- getFileStatusTailwindClasses(): New method mapping file status to Tailwind classes
Preserved Complex Functionality:
- Monaco editor height change handling and dynamic container sizing
- Comment forwarding from Monaco editor to chat input system
- File save operations with proper success/error notification
- File expansion state management for show/hide unchanged regions
- Range picker integration with commit selection and diff reloading
- Single/multi file view mode switching with proper layout adaptation
- Custom Monaco scrollbar hiding through global style injection
- All git service integration for diff data loading and file content retrieval
- Sticky file headers with proper z-index stacking for navigation
- Dynamic Monaco editor height adjustment with container synchronization
- Responsive file selector and range picker layout with flexible spacing
Both components now integrate properly with the project's Tailwind CSS
styling system by disabling shadow DOM while maintaining complete visual
and functional parity with their original LitElement implementations.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s92d5cf7de96afe2ck
diff --git a/webui/src/web-components/sketch-diff-empty-view.ts b/webui/src/web-components/sketch-diff-empty-view.ts
index 753c926..5881e03 100644
--- a/webui/src/web-components/sketch-diff-empty-view.ts
+++ b/webui/src/web-components/sketch-diff-empty-view.ts
@@ -1,80 +1,40 @@
-import { css, html, LitElement } from "lit";
+import { html } from "lit";
import { customElement } from "lit/decorators.js";
+import { SketchTailwindElement } from "./sketch-tailwind-element.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;
- }
+export class SketchDiffEmptyView extends SketchTailwindElement {
- .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>
+ <div class="flex flex-col items-center justify-center h-full w-full box-border">
+ <div class="m-8 mx-auto max-w-4xl w-11/12 p-8 border-2 border-gray-300 rounded-lg shadow-sm bg-white text-center">
+ <h2 class="text-2xl font-semibold mb-6 text-center text-gray-800">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="text-gray-600 leading-relaxed text-base text-left mb-4">
+ 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="text-gray-600 leading-relaxed text-base text-left mb-4">
+ 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>
+ <p class="text-gray-600 leading-relaxed text-base text-left mb-4">
+ If the range includes <strong class="font-semibold text-gray-800">Uncommitted Changes</strong>, you can
+ <strong class="font-semibold text-gray-800">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>
</div>
`;
}