v0.26.6 cli, doc, and web viewer updates

internal/config/loader.go

@@ -41,7 +41,9 @@ func Settings() map[string]bool {
 	}
 	settings := map[string]bool{}
 	for path, value := range c.GetRegisteredPathsWithDefaults() {
-		_, settings[path] = value.(bool)
+		if _, tables := value.([]PipelineConfig); !tables { // the pipeline flags set those
+			_, settings[path] = value.(bool)
+		}
 	}
 	return settings
 }

internal/sink/http/web/style.css

@@ -104,6 +104,59 @@ progress {
   border-bottom: 1px solid var(--line);
 }
 
+/* The search field and its match-case toggle read as one input */
+.search {
+  display: flex;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: var(--bg);
+  overflow: hidden;
+}
+
+/* The field's ring is the input's own focus; the toggle draws its own */
+.search:has(#search:focus) {
+  outline: 2px solid var(--accent);
+  outline-offset: -1px;
+}
+
+.search input {
+  width: 11rem;
+  border: 0;
+  outline: none;
+}
+
+.search button {
+  padding: 0 0.6rem;
+  border-left: 1px solid var(--line);
+  border-radius: 0;
+  background: none;
+  color: var(--muted);
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.search button:hover {
+  color: var(--fg);
+}
+
+.search button[aria-pressed="true"] {
+  background: var(--accent);
+  color: var(--panel);
+}
+
+@media (forced-colors: active) {
+  .search button[aria-pressed="true"] {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+  }
+}
+
+.search button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -4px;
+}
+
 #state {
   flex: 1;
   color: var(--muted);

internal/sink/http/web/view.html

@@ -14,7 +14,10 @@
 <body class="viewer">
 <header>
   <h1>LogWisp</h1>
-  <input id="search" type="search" placeholder="Search" aria-label="Show lines containing">
+  <span class="search">
+    <input id="search" type="search" placeholder="Search" aria-label="Show lines containing">
+    <button id="case" type="button" aria-pressed="false" aria-label="Match case" title="Match case">Aa</button>
+  </span>
   <select id="level" aria-label="Lowest level shown"><option value="">All lines</option></select>
   <span id="state" role="status">connecting…</span>
   <button id="logout" type="button">Sign out</button>

internal/sink/http/web/view.js

@@ -14,6 +14,7 @@ const form = document.getElementById("login");
 const progress = document.getElementById("progress");
 const status = document.getElementById("status");
 const search = document.getElementById("search");
+const matchCase = document.getElementById("case");
 const lowest = document.getElementById("level");
 // The server's levels by rising severity, each with the words naming it
 const levels = JSON.parse(meta("levels"));
@@ -43,13 +44,15 @@ function levelOf(text) {
   return "";
 }
 
-// A line shows when it contains the search, in any case, and its entry's level
-// reaches the lowest chosen; with none chosen, lines without a level show too
+// A line shows when it contains the search, in any case unless matchCase is
+// pressed, and its entry's level reaches the lowest chosen; with none chosen,
+// lines without a level show too
 function shown(row) {
   const floor = rank.get(lowest.value);
   if (floor !== undefined && !(rank.get(row.dataset.level) >= floor)) return false;
-  const text = search.value.trim().toLowerCase();
-  return !text || row.textContent.toLowerCase().includes(text);
+  const fold = matchCase.getAttribute("aria-pressed") === "true" ? (s) => s : (s) => s.toLowerCase();
+  const text = fold(search.value.trim());
+  return !text || fold(row.textContent).includes(text);
 }
 
 function refilter() {
@@ -165,6 +168,10 @@ function retry(reason) {
 }
 
 search.addEventListener("input", refilter);
+matchCase.addEventListener("click", () => {
+  matchCase.setAttribute("aria-pressed", String(matchCase.getAttribute("aria-pressed") !== "true"));
+  refilter();
+});
 lowest.addEventListener("change", refilter);
 
 form.addEventListener("submit", async (event) => {