loop/webui: add prettier
diff --git a/loop/webui/src/web-components/demo/sketch-diff-view.demo.html b/loop/webui/src/web-components/demo/sketch-diff-view.demo.html
index 63b5395..3a6cb35 100644
--- a/loop/webui/src/web-components/demo/sketch-diff-view.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-diff-view.demo.html
@@ -1,61 +1,69 @@
-<!DOCTYPE html>
+<!doctype html>
<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Sketch Diff Viewer Demo</title>
- <link rel="stylesheet" href="../../../node_modules/diff2html/bundles/css/diff2html.min.css">
- <script type="module" src="/dist/web-components/sketch-diff-view.js"></script>
- <style>
- body {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
- max-width: 1200px;
- margin: 0 auto;
- padding: 2rem;
- }
-
- h1 {
- color: #333;
- margin-bottom: 2rem;
- }
-
- .control-panel {
- margin-bottom: 2rem;
- padding: 1rem;
- background-color: #f0f0f0;
- border-radius: 4px;
- }
-
- input {
- padding: 0.5rem;
- border-radius: 4px;
- border: 1px solid #ccc;
- width: 300px;
- }
-
- button {
- padding: 0.5rem 1rem;
- background-color: #2196f3;
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- margin-left: 1rem;
- }
-
- button:hover {
- background-color: #0d8bf2;
- }
- </style>
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Sketch Diff Viewer Demo</title>
+ <link
+ rel="stylesheet"
+ href="../../../node_modules/diff2html/bundles/css/diff2html.min.css"
+ />
+ <script
+ type="module"
+ src="/dist/web-components/sketch-diff-view.js"
+ ></script>
+ <style>
+ body {
+ font-family:
+ -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+ Arial, sans-serif;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+ }
-<script>
- document.addEventListener('DOMContentLoaded', () => {
- const diffViewer = document.getElementById('diffViewer');
- const commitHashInput = document.getElementById('commitHash');
- const viewDiffButton = document.getElementById('viewDiff');
- let commit = false;
- viewDiffButton.addEventListener('click', () => {
- let diffContent = `diff --git a/sample.txt b/sample.txt
+ h1 {
+ color: #333;
+ margin-bottom: 2rem;
+ }
+
+ .control-panel {
+ margin-bottom: 2rem;
+ padding: 1rem;
+ background-color: #f0f0f0;
+ border-radius: 4px;
+ }
+
+ input {
+ padding: 0.5rem;
+ border-radius: 4px;
+ border: 1px solid #ccc;
+ width: 300px;
+ }
+
+ button {
+ padding: 0.5rem 1rem;
+ background-color: #2196f3;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ margin-left: 1rem;
+ }
+
+ button:hover {
+ background-color: #0d8bf2;
+ }
+ </style>
+
+ <script>
+ document.addEventListener("DOMContentLoaded", () => {
+ const diffViewer = document.getElementById("diffViewer");
+ const commitHashInput = document.getElementById("commitHash");
+ const viewDiffButton = document.getElementById("viewDiff");
+ let commit = false;
+ viewDiffButton.addEventListener("click", () => {
+ let diffContent = `diff --git a/sample.txt b/sample.txt
index 1111111..2222222 100644
--- a/sample.txt
+++ b/sample.txt
@@ -67,12 +75,12 @@
-Another line to remove
+A completely new line
The last line is unchanged`;
- if (commit) {
+ if (commit) {
// For demo purposes, generate fake diff based on commit hash
- diffContent = `diff --git a/file-${commit.substring(0,5)}.txt b/file-${commit.substring(0,5)}.txt
+ diffContent = `diff --git a/file-${commit.substring(0, 5)}.txt b/file-${commit.substring(0, 5)}.txt
index 3333333..4444444 100644
---- a/file-${commit.substring(0,5)}.txt
-+++ b/file-${commit.substring(0,5)}.txt
+--- a/file-${commit.substring(0, 5)}.txt
++++ b/file-${commit.substring(0, 5)}.txt
@@ -1,4 +1,6 @@
File with commit: ${commit}
+This line was added in commit ${commit}
@@ -82,23 +90,23 @@
+Another new line added in this commit
Last line of the file`;
}
- diffViewer.diffText = diffContent;
- diffViewer.commitHash = commitHashInput.value.trim();
- });
- });
-</script>
+ diffViewer.diffText = diffContent;
+ diffViewer.commitHash = commitHashInput.value.trim();
+ });
+ });
+ </script>
+ </head>
+ <body>
+ <h1>Sketch Diff Viewer Demo</h1>
-</head>
-<body>
- <h1>Sketch Diff Viewer Demo</h1>
-
- <div class="control-panel">
- <label for="commitHash">Commit Hash (leave empty for unstaged changes):</label>
- <input type="text" id="commitHash" placeholder="Enter commit hash">
- <button id="viewDiff">View Diff</button>
- </div>
-
- <sketch-diff-view id="diffViewer"></sketch-diff-view>
-
-</body>
-</html>
\ No newline at end of file
+ <div class="control-panel">
+ <label for="commitHash"
+ >Commit Hash (leave empty for unstaged changes):</label
+ >
+ <input type="text" id="commitHash" placeholder="Enter commit hash" />
+ <button id="viewDiff">View Diff</button>
+ </div>
+
+ <sketch-diff-view id="diffViewer"></sketch-diff-view>
+ </body>
+</html>