Add initial VibeGuard browser extension

src/options/main.ts

@@ -0,0 +1,37 @@
+import { loadSettings, saveSettings } from "../shared/settings";
+import type { FilterMode, Settings } from "../shared/types";
+import "./style.css";
+
+const form = document.querySelector<HTMLFormElement>("#settings");
+const threshold = document.querySelector<HTMLInputElement>("#threshold");
+const thresholdValue = document.querySelector<HTMLElement>("#threshold-value");
+const mode = document.querySelector<HTMLSelectElement>("#filter-mode");
+const showScore = document.querySelector<HTMLInputElement>("#show-score");
+const status = document.querySelector<HTMLElement>("#status");
+
+void loadSettings().then((settings) => {
+  threshold!.value = String(settings.threshold);
+  mode!.value = settings.filterMode;
+  showScore!.checked = settings.showScore;
+  for (const site of ["reddit", "twitter", "facebook"] as const) document.querySelector<HTMLInputElement>(`#site-${site}`)!.checked = settings.enabledSites[site];
+  updateThresholdLabel();
+});
+
+threshold?.addEventListener("input", updateThresholdLabel);
+form?.addEventListener("submit", async (event) => {
+  event.preventDefault();
+  const settings: Partial<Settings> = {
+    threshold: Number(threshold?.value), filterMode: mode?.value as FilterMode, showScore: showScore?.checked,
+    enabledSites: {
+      reddit: document.querySelector<HTMLInputElement>("#site-reddit")!.checked,
+      twitter: document.querySelector<HTMLInputElement>("#site-twitter")!.checked,
+      facebook: document.querySelector<HTMLInputElement>("#site-facebook")!.checked
+    }
+  };
+  await saveSettings(settings);
+  if (status) { status.textContent = "Saved"; setTimeout(() => { status.textContent = ""; }, 1500); }
+});
+
+function updateThresholdLabel(): void {
+  if (thresholdValue && threshold) thresholdValue.textContent = `${Math.round(Number(threshold.value) * 100)}%`;
+}