all: fix formatting
diff --git a/webui/src/web-components/sketch-diff-empty-view.ts b/webui/src/web-components/sketch-diff-empty-view.ts
index 5881e03..28829b3 100644
--- a/webui/src/web-components/sketch-diff-empty-view.ts
+++ b/webui/src/web-components/sketch-diff-empty-view.ts
@@ -7,32 +7,41 @@
*/
@customElement("sketch-diff-empty-view")
export class SketchDiffEmptyView extends SketchTailwindElement {
-
-
render() {
return html`
- <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>
+ <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="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.
+ 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">
- 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.
+ 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">
- 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.
+ 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>
diff --git a/webui/src/web-components/sketch-diff2-view.ts b/webui/src/web-components/sketch-diff2-view.ts
index c963e6d..927f2ac 100644
--- a/webui/src/web-components/sketch-diff2-view.ts
+++ b/webui/src/web-components/sketch-diff2-view.ts
@@ -161,8 +161,6 @@
@state()
private viewMode: "all" | "single" = "all";
-
-
@property({ attribute: false, type: Object })
gitService!: GitDataService;
@@ -285,7 +283,9 @@
render() {
return html`
<div class="flex h-full flex-1 flex-col min-h-0 overflow-hidden relative">
- <div class="px-4 py-2 border-b border-gray-300 bg-gray-100 flex-shrink-0">
+ <div
+ class="px-4 py-2 border-b border-gray-300 bg-gray-100 flex-shrink-0"
+ >
<div class="flex flex-col gap-3">
<div class="w-full flex items-center gap-3">
<sketch-diff-range-picker
@@ -300,7 +300,11 @@
</div>
<div class="flex-1 overflow-auto flex flex-col min-h-0 relative h-full">
- <div class="flex-1 overflow-auto min-h-0 flex flex-col relative h-full">${this.renderDiffContent()}</div>
+ <div
+ class="flex-1 overflow-auto min-h-0 flex flex-col relative h-full"
+ >
+ ${this.renderDiffContent()}
+ </div>
</div>
</div>
`;
@@ -333,7 +337,9 @@
renderDiffContent() {
if (this.loading) {
- return html`<div class="flex items-center justify-center h-full">Loading diff...</div>`;
+ return html`<div class="flex items-center justify-center h-full">
+ Loading diff...
+ </div>`;
}
if (this.error) {
@@ -531,16 +537,30 @@
const content = this.fileContents.get(file.path);
if (!content) {
return html`
- <div class="flex flex-col border-b-4 border-gray-300 mb-0 last:border-b-0">
- <div class="bg-gray-100 border-b border-gray-300 px-4 py-2 font-medium text-sm text-gray-800 sticky top-0 z-10 shadow-sm flex justify-between items-center">${this.renderFileHeader(file)}</div>
- <div class="flex items-center justify-center h-full">Loading ${file.path}...</div>
+ <div
+ class="flex flex-col border-b-4 border-gray-300 mb-0 last:border-b-0"
+ >
+ <div
+ class="bg-gray-100 border-b border-gray-300 px-4 py-2 font-medium text-sm text-gray-800 sticky top-0 z-10 shadow-sm flex justify-between items-center"
+ >
+ ${this.renderFileHeader(file)}
+ </div>
+ <div class="flex items-center justify-center h-full">
+ Loading ${file.path}...
+ </div>
</div>
`;
}
return html`
- <div class="flex flex-col border-b-4 border-gray-300 mb-0 last:border-b-0">
- <div class="bg-gray-100 border-b border-gray-300 px-4 py-2 font-medium text-sm text-gray-800 sticky top-0 z-10 shadow-sm flex justify-between items-center">${this.renderFileHeader(file)}</div>
+ <div
+ class="flex flex-col border-b-4 border-gray-300 mb-0 last:border-b-0"
+ >
+ <div
+ class="bg-gray-100 border-b border-gray-300 px-4 py-2 font-medium text-sm text-gray-800 sticky top-0 z-10 shadow-sm flex justify-between items-center"
+ >
+ ${this.renderFileHeader(file)}
+ </div>
<div class="flex flex-col min-h-[200px] overflow-visible">
<sketch-monaco-view
class="flex flex-col w-full min-h-[200px] flex-1"
@@ -574,7 +594,10 @@
return html`
<div class="flex items-center gap-2">
- <span class="inline-block px-1.5 py-0.5 rounded text-xs font-bold mr-2 ${statusClasses}">${statusText}</span>
+ <span
+ class="inline-block px-1.5 py-0.5 rounded text-xs font-bold mr-2 ${statusClasses}"
+ >${statusText}</span
+ >
<span class="font-mono font-normal text-gray-600">${pathInfo}</span>
${changesInfo
? html`<span class="ml-2 text-xs text-gray-600">${changesInfo}</span>`
@@ -781,7 +804,9 @@
const content = this.fileContents.get(this.selectedFile);
if (!content) {
- return html`<div class="flex items-center justify-center h-full">Loading ${this.selectedFile}...</div>`;
+ return html`<div class="flex items-center justify-center h-full">
+ Loading ${this.selectedFile}...
+ </div>`;
}
return html`