webui: remove unused diff2html-based diff view
Remove the old diff view implementation that used diff2html library
in favor of the Monaco-based diff2 view. This cleanup removes:
- sketch-diff-view.ts component that used diff2html library
- diff2html static CSS files (diff2html.min.css, diff2.css)
- diff2html npm package dependency from package.json
- Old diff view mode references throughout the codebase
- Demo files for the old diff view component
Changes include:
1. Removed Files:
- webui/src/web-components/sketch-diff-view.ts
- webui/src/diff2html.min.css
- webui/src/diff2.css
- webui/src/web-components/demo/sketch-diff-view.demo.html
2. Updated Components:
- sketch-app-shell.ts: Remove old diff view import, ViewMode type,
CSS selectors, and view switching logic
- sketch-view-mode-select.ts: Update type definitions to remove 'diff' mode
- sketch-terminal.ts: Fix view mode type and correct CSS loading comments
3. Package Management:
- Removed diff2html 3.4.51 dependency from package.json
- Updated package-lock.json to reflect removed dependency
4. Demo Cleanup:
- Removed reference to old diff view demo from index.html
- Updated timeline demo to remove diff2html from dependencies list
The Monaco-based diff2 view (sketch-diff2-view.ts) remains fully
functional and is now the only diff view implementation. All file
picker, range picker, and empty view components continue to work
with the new diff view.
Testing confirms the diff functionality works correctly after cleanup.
Co-Authored-By: sketch <hello@sketch.dev>
Change-ID: s22dd1dc722d02125k
diff --git a/webui/src/web-components/sketch-app-shell.ts b/webui/src/web-components/sketch-app-shell.ts
index 81d2fad..bdab955 100644
--- a/webui/src/web-components/sketch-app-shell.ts
+++ b/webui/src/web-components/sketch-app-shell.ts
@@ -6,8 +6,7 @@
import "./sketch-chat-input";
import "./sketch-container-status";
-import "./sketch-diff-view";
-import { SketchDiffView } from "./sketch-diff-view";
+
import "./sketch-diff2-view";
import { SketchDiff2View } from "./sketch-diff2-view";
import { DefaultGitDataService } from "./git-data-service";
@@ -22,7 +21,7 @@
import { createRef, ref } from "lit/directives/ref.js";
import { SketchChatInput } from "./sketch-chat-input";
-type ViewMode = "chat" | "diff" | "diff2" | "terminal";
+type ViewMode = "chat" | "diff2" | "terminal";
@customElement("sketch-app-shell")
export class SketchAppShell extends LitElement {
@@ -178,7 +177,6 @@
}
/* Allow the container to expand to full width and height in diff mode */
- #view-container-inner.diff-active,
#view-container-inner.diff2-active {
max-width: 100%;
width: 100%;
@@ -192,7 +190,6 @@
/* Individual view styles */
.chat-view,
- .diff-view,
.diff2-view,
.terminal-view {
display: none; /* Hidden by default */
@@ -630,13 +627,13 @@
// Only add view parameter if not in default chat view
if (mode !== "chat") {
url.searchParams.set("view", mode);
- const diffView = this.shadowRoot?.querySelector(
- ".diff-view",
- ) as SketchDiffView;
+ const diff2View = this.shadowRoot?.querySelector(
+ "sketch-diff2-view",
+ ) as SketchDiff2View;
- // If in diff view and there's a commit hash, include that too
- if (mode === "diff" && diffView.commitHash) {
- url.searchParams.set("commit", diffView.commitHash);
+ // If in diff2 view and there's a commit hash, include that too
+ if (mode === "diff2" && diff2View?.commit) {
+ url.searchParams.set("commit", diff2View.commit);
}
}
@@ -656,7 +653,7 @@
* Handle view mode selection event
*/
private _handleViewModeSelect(event: CustomEvent) {
- const mode = event.detail.mode as "chat" | "diff" | "diff2" | "terminal";
+ const mode = event.detail.mode as "chat" | "diff2" | "terminal";
this.toggleViewMode(mode, true);
}
@@ -698,7 +695,7 @@
}
/**
- * Toggle between different view modes: chat, diff, terminal
+ * Toggle between different view modes: chat, diff2, terminal
*/
private toggleViewMode(mode: ViewMode, updateHistory: boolean): void {
// Don't do anything if the mode is already active
@@ -719,25 +716,18 @@
"#view-container-inner",
);
const chatView = this.shadowRoot?.querySelector(".chat-view");
- const diffView = this.shadowRoot?.querySelector(".diff-view");
const diff2View = this.shadowRoot?.querySelector(".diff2-view");
const terminalView = this.shadowRoot?.querySelector(".terminal-view");
// Remove active class from all views
chatView?.classList.remove("view-active");
- diffView?.classList.remove("view-active");
diff2View?.classList.remove("view-active");
terminalView?.classList.remove("view-active");
- // Add/remove diff-active class on view container
- if (mode === "diff") {
- viewContainerInner?.classList.add("diff-active");
- viewContainerInner?.classList.remove("diff2-active");
- } else if (mode === "diff2") {
+ // Add/remove diff2-active class on view container
+ if (mode === "diff2") {
viewContainerInner?.classList.add("diff2-active");
- viewContainerInner?.classList.remove("diff-active");
} else {
- viewContainerInner?.classList.remove("diff-active");
viewContainerInner?.classList.remove("diff2-active");
}
@@ -746,17 +736,6 @@
case "chat":
chatView?.classList.add("view-active");
break;
- case "diff":
- diffView?.classList.add("view-active");
- // Load diff content if we have a diff view
- const diffViewComp =
- this.shadowRoot?.querySelector("sketch-diff-view");
- if (diffViewComp && this.currentCommitHash) {
- (diffViewComp as any).showCommitDiff(this.currentCommitHash);
- } else if (diffViewComp) {
- (diffViewComp as any).loadDiffContent();
- }
- break;
case "diff2":
diff2View?.classList.add("view-active");
@@ -1312,14 +1291,6 @@
></sketch-todo-panel>
</div>
<div
- class="diff-view ${this.viewMode === "diff" ? "view-active" : ""}"
- >
- <sketch-diff-view
- .commitHash=${this.currentCommitHash}
- ></sketch-diff-view>
- </div>
-
- <div
class="diff2-view ${this.viewMode === "diff2" ? "view-active" : ""}"
>
<sketch-diff2-view