loop/webui: add prettier
diff --git a/loop/webui/src/web-components/sketch-view-mode-select.ts b/loop/webui/src/web-components/sketch-view-mode-select.ts
index b55282a..d67da0b 100644
--- a/loop/webui/src/web-components/sketch-view-mode-select.ts
+++ b/loop/webui/src/web-components/sketch-view-mode-select.ts
@@ -1,10 +1,10 @@
-import {css, html, LitElement} from 'lit';
-import {customElement, property, state} from 'lit/decorators.js';
-import {DataManager, ConnectionStatus} from '../data';
-import {State, TimelineMessage} from '../types';
-import './sketch-container-status';
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { DataManager, ConnectionStatus } from "../data";
+import { State, TimelineMessage } from "../types";
+import "./sketch-container-status";
-@customElement('sketch-view-mode-select')
+@customElement("sketch-view-mode-select")
export class SketchViewModeSelect extends LitElement {
// Current active mode
@property()
@@ -17,45 +17,45 @@
// other components or the containing web page (...unless you want it to do that).
static styles = css`
-/* View Mode Button Styles */
-.view-mode-buttons {
- display: flex;
- gap: 8px;
- margin-right: 10px;
-}
+ /* View Mode Button Styles */
+ .view-mode-buttons {
+ display: flex;
+ gap: 8px;
+ margin-right: 10px;
+ }
-.emoji-button {
- font-size: 18px;
- width: 32px;
- height: 32px;
- display: flex;
- align-items: center;
- justify-content: center;
- background: white;
- border: 1px solid #ddd;
- border-radius: 4px;
- cursor: pointer;
- transition: all 0.2s ease;
- padding: 0;
- line-height: 1;
-}
+ .emoji-button {
+ font-size: 18px;
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: white;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ padding: 0;
+ line-height: 1;
+ }
-.emoji-button:hover {
- background-color: #f0f0f0;
- transform: translateY(-2px);
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
+ .emoji-button:hover {
+ background-color: #f0f0f0;
+ transform: translateY(-2px);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ }
-.emoji-button.active {
- background-color: #e6f7ff;
- border-color: #1890ff;
- color: #1890ff;
-}
-`;
-
+ .emoji-button.active {
+ background-color: #e6f7ff;
+ border-color: #1890ff;
+ color: #1890ff;
+ }
+ `;
+
constructor() {
super();
-
+
// Binding methods
this._handleViewModeClick = this._handleViewModeClick.bind(this);
this._handleUpdateActiveMode = this._handleUpdateActiveMode.bind(this);
@@ -64,24 +64,27 @@
// See https://lit.dev/docs/components/lifecycle/
connectedCallback() {
super.connectedCallback();
-
+
// Listen for update-active-mode events
- this.addEventListener('update-active-mode', this._handleUpdateActiveMode as EventListener);
+ this.addEventListener(
+ "update-active-mode",
+ this._handleUpdateActiveMode as EventListener,
+ );
}
-
+
/**
* Handle view mode button clicks
*/
private _handleViewModeClick(mode: "chat" | "diff" | "charts" | "terminal") {
// Dispatch a custom event to notify the app shell to change the view
- const event = new CustomEvent('view-mode-select', {
+ const event = new CustomEvent("view-mode-select", {
detail: { mode },
bubbles: true,
- composed: true
+ composed: true,
});
this.dispatchEvent(event);
}
-
+
/**
* Handle updates to the active mode
*/
@@ -95,9 +98,12 @@
// See https://lit.dev/docs/components/lifecycle/
disconnectedCallback() {
super.disconnectedCallback();
-
+
// Remove event listeners
- this.removeEventListener('update-active-mode', this._handleUpdateActiveMode as EventListener);
+ this.removeEventListener(
+ "update-active-mode",
+ this._handleUpdateActiveMode as EventListener,
+ );
}
render() {
@@ -105,33 +111,33 @@
<div class="view-mode-buttons">
<button
id="showConversationButton"
- class="emoji-button ${this.activeMode === 'chat' ? 'active' : ''}"
+ class="emoji-button ${this.activeMode === "chat" ? "active" : ""}"
title="Conversation View"
- @click=${() => this._handleViewModeClick('chat')}
+ @click=${() => this._handleViewModeClick("chat")}
>
💬
</button>
<button
id="showDiffButton"
- class="emoji-button ${this.activeMode === 'diff' ? 'active' : ''}"
+ class="emoji-button ${this.activeMode === "diff" ? "active" : ""}"
title="Diff View"
- @click=${() => this._handleViewModeClick('diff')}
+ @click=${() => this._handleViewModeClick("diff")}
>
±
</button>
<button
id="showChartsButton"
- class="emoji-button ${this.activeMode === 'charts' ? 'active' : ''}"
+ class="emoji-button ${this.activeMode === "charts" ? "active" : ""}"
title="Charts View"
- @click=${() => this._handleViewModeClick('charts')}
+ @click=${() => this._handleViewModeClick("charts")}
>
📈
</button>
<button
id="showTerminalButton"
- class="emoji-button ${this.activeMode === 'terminal' ? 'active' : ''}"
+ class="emoji-button ${this.activeMode === "terminal" ? "active" : ""}"
title="Terminal View"
- @click=${() => this._handleViewModeClick('terminal')}
+ @click=${() => this._handleViewModeClick("terminal")}
>
💻
</button>
@@ -144,4 +150,4 @@
interface HTMLElementTagNameMap {
"sketch-view-mode-select": SketchViewModeSelect;
}
-}
\ No newline at end of file
+}