chore: bootstrap independent git workflow

Co-Authored-By: Paperclip <noreply@paperclip.ing>

gui/prototype/app.js

@@ -0,0 +1,53 @@
+const connectionCards = document.querySelectorAll(".connection-card");
+const activeConnection = document.getElementById("active-connection");
+const detailTarget = document.getElementById("detail-target");
+const runQueryButton = document.getElementById("run-query");
+const executionBanner = document.getElementById("execution-banner");
+const executionTitle = document.getElementById("execution-title");
+const executionCopy = document.getElementById("execution-copy");
+const durationValue = document.getElementById("duration-value");
+const rowCount = document.getElementById("row-count");
+const bottomTabs = document.querySelectorAll(".bottom-tab");
+const tabContents = document.querySelectorAll(".tab-content");
+
+connectionCards.forEach((card) => {
+  card.addEventListener("click", () => {
+    connectionCards.forEach((item) => item.classList.remove("is-active"));
+    card.classList.add("is-active");
+
+    const target = card.dataset.connection;
+    activeConnection.textContent = target;
+    detailTarget.textContent = target;
+  });
+});
+
+runQueryButton.addEventListener("click", () => {
+  const isError = executionBanner.classList.contains("is-error");
+
+  if (isError) {
+    executionBanner.classList.remove("is-error");
+    executionTitle.textContent = "Last run succeeded";
+    executionCopy.textContent = "50 rows returned in 182 ms. Export is available.";
+    durationValue.textContent = "182 ms";
+    rowCount.textContent = "50";
+    return;
+  }
+
+  executionBanner.classList.add("is-error");
+  executionTitle.textContent = "Last run failed";
+  executionCopy.textContent = "Syntax error near `form`. The error summary should stay visible in the workspace.";
+  durationValue.textContent = "21 ms";
+  rowCount.textContent = "0";
+});
+
+bottomTabs.forEach((tab) => {
+  tab.addEventListener("click", () => {
+    bottomTabs.forEach((item) => item.classList.remove("is-active"));
+    tabContents.forEach((item) => item.classList.remove("is-active"));
+
+    tab.classList.add("is-active");
+    document
+      .querySelector(`[data-content="${tab.dataset.tab}"]`)
+      .classList.add("is-active");
+  });
+});