all: fix formatting
diff --git a/webui/src/web-components/sketch-diff-file-picker.ts b/webui/src/web-components/sketch-diff-file-picker.ts
index c7978ee..c834f12 100644
--- a/webui/src/web-components/sketch-diff-file-picker.ts
+++ b/webui/src/web-components/sketch-diff-file-picker.ts
@@ -41,7 +41,9 @@
.file-select {
flex: 1;
min-width: 200px;
- max-width: calc(100% - 230px); /* Leave space for the navigation buttons and file info */
+ max-width: calc(
+ 100% - 230px
+ ); /* Leave space for the navigation buttons and file info */
overflow: hidden;
}
@@ -110,7 +112,7 @@
width: 100%;
justify-content: space-between;
}
-
+
.file-info {
margin-left: 0;
margin-top: 8px;
@@ -121,22 +123,22 @@
updated(changedProperties: Map<string, any>) {
// If files changed, reset the selection
- if (changedProperties.has('files')) {
+ if (changedProperties.has("files")) {
this.updateSelectedIndex();
}
// If selectedPath changed externally, update the index
- if (changedProperties.has('selectedPath')) {
+ if (changedProperties.has("selectedPath")) {
this.updateSelectedIndex();
}
}
-
+
connectedCallback() {
super.connectedCallback();
// Initialize the selection when the component is connected, but only if files exist
if (this.files && this.files.length > 0) {
this.updateSelectedIndex();
-
+
// Explicitly trigger file selection event for the first file when there's only one file
// This ensures the diff view is updated even when navigation buttons aren't clicked
if (this.files.length === 1) {
@@ -156,33 +158,33 @@
<select @change=${this.handleSelect}>
${this.files.map(
(file, index) => html`
- <option
- value=${index}
+ <option
+ value=${index}
?selected=${index === this.selectedIndex}
>
${this.formatFileOption(file)}
</option>
- `
+ `,
)}
</select>
</div>
-
+
<div class="navigation-buttons">
- <button
- @click=${this.handlePrevious}
+ <button
+ @click=${this.handlePrevious}
?disabled=${this.selectedIndex <= 0}
>
Previous
</button>
- <button
- @click=${this.handleNext}
+ <button
+ @click=${this.handleNext}
?disabled=${this.selectedIndex >= this.files.length - 1}
>
Next
</button>
</div>
- ${this.selectedIndex >= 0 ? this.renderFileInfo() : ''}
+ ${this.selectedIndex >= 0 ? this.renderFileInfo() : ""}
</div>
`;
}
@@ -191,8 +193,8 @@
const file = this.files[this.selectedIndex];
return html`
<div class="file-info">
- ${this.getFileStatusName(file.status)} |
- ${this.selectedIndex + 1} of ${this.files.length}
+ ${this.getFileStatusName(file.status)} | ${this.selectedIndex + 1} of
+ ${this.files.length}
</div>
`;
}
@@ -210,11 +212,16 @@
*/
getFileStatusSymbol(status: string): string {
switch (status.toUpperCase()) {
- case 'A': return '+';
- case 'M': return 'M';
- case 'D': return '-';
- case 'R': return 'R';
- default: return '?';
+ case "A":
+ return "+";
+ case "M":
+ return "M";
+ case "D":
+ return "-";
+ case "R":
+ return "R";
+ default:
+ return "?";
}
}
@@ -223,11 +230,16 @@
*/
getFileStatusName(status: string): string {
switch (status.toUpperCase()) {
- case 'A': return 'Added';
- case 'M': return 'Modified';
- case 'D': return 'Deleted';
- case 'R': return 'Renamed';
- default: return 'Unknown';
+ case "A":
+ return "Added";
+ case "M":
+ return "Modified";
+ case "D":
+ return "Deleted";
+ case "R":
+ return "Renamed";
+ default:
+ return "Unknown";
}
}
@@ -265,13 +277,13 @@
if (index >= 0 && index < this.files.length) {
this.selectedIndex = index;
this.selectedPath = this.files[index].path;
-
- const event = new CustomEvent('file-selected', {
+
+ const event = new CustomEvent("file-selected", {
detail: { file: this.files[index] },
bubbles: true,
- composed: true
+ composed: true,
});
-
+
this.dispatchEvent(event);
}
}
@@ -288,7 +300,9 @@
if (this.selectedPath) {
// Find the file with the matching path
- const index = this.files.findIndex(file => file.path === this.selectedPath);
+ const index = this.files.findIndex(
+ (file) => file.path === this.selectedPath,
+ );
if (index >= 0) {
this.selectedIndex = index;
return;
@@ -298,18 +312,22 @@
// Default to first file if no match or no path
this.selectedIndex = 0;
const newSelectedPath = this.files[0].path;
-
+
// Only dispatch event if the path has actually changed and files exist
- if (this.selectedPath !== newSelectedPath && this.files && this.files.length > 0) {
+ if (
+ this.selectedPath !== newSelectedPath &&
+ this.files &&
+ this.files.length > 0
+ ) {
this.selectedPath = newSelectedPath;
-
+
// Dispatch the event directly - we've already checked the files array
- const event = new CustomEvent('file-selected', {
+ const event = new CustomEvent("file-selected", {
detail: { file: this.files[0] },
bubbles: true,
- composed: true
+ composed: true,
});
-
+
this.dispatchEvent(event);
}
}