tree 9eb466e6188a6b3279eadd1a924cad9069ee803c
parent 9556fcf116434d39a351e5bebe4e7f772ea440d8
author banksean <banksean@gmail.com> 1751501924 +0000
committer Sean McCullough <banksean@gmail.com> 1751502278 -0700

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