feat(ui): dark theme redesign, fix image search and defaults

- Inline CSS in base.html (Inter, dark mode, sticky search, tabs, results) - Remove HTMX/JS from templates; pagination via GET links - Atmospheric side gradients + grid; wider column on large viewports - Parse ?category= for HTML tabs (fixes Images category routing) - Include bing_images, ddg_images, qwant_images in local_ported defaults - Default listen port 5355; update Docker, compose, flake, README - Favicon img uses /favicon/ proxy; preferences without inline JS Made-with: Cursor
2026-03-23 22:49:41 +01:00 · 2026-03-23 22:49:41 +01:00 · 518215f62e
commit 518215f62e
parent bdc3dae4f5
16 changed files with 1107 additions and 106 deletions
--- a/2
+++ b/2
@ -21,7 +21,7 @@ RUN apk add --no-cache ca-certificates tzdata
 COPY --from=builder /kafka /usr/local/bin/kafka
 COPY config.example.toml /etc/kafka/config.example.toml

-EXPOSE 8080
+EXPOSE 5355

 ENTRYPOINT ["kafka"]
 CMD ["-config", "/etc/kafka/config.toml"]
--- a/README.md
+++ b/README.md
@ -110,7 +110,7 @@ go run ./cmd/samsa -config config.toml
 ### Example

 ```bash
-curl "http://localhost:8080/search?q=golang&format=json&engines=github,duckduckgo"
+curl "http://localhost:5355/search?q=golang&format=json&engines=github,duckduckgo"
 ```

 ### Response (JSON)
@ -155,7 +155,7 @@ Copy `config.example.toml` to `config.toml` and edit. All settings can also be o

 | Variable | Description |
 |---|---|
-| `PORT` | Listen port (default: 8080) |
+| `PORT` | Listen port (default: 5355) |
 | `BASE_URL` | Public URL for OpenSearch XML |
 | `UPSTREAM_SEARXNG_URL` | Upstream instance URL |
 | `LOCAL_PORTED_ENGINES` | Comma-separated local engine list |
--- a/config.example.toml
+++ b/config.example.toml
@ -4,7 +4,7 @@

 [server]
 # Listen port (env: PORT)
-port = 8080
+port = 5355

 # HTTP timeout for engine and upstream calls (env: HTTP_TIMEOUT)
 http_timeout = "10s"
@ -27,7 +27,8 @@ url = ""
 [engines]
 # Comma-separated list of engines to execute locally in Go (env: LOCAL_PORTED_ENGINES)
 # Engines not listed here will be proxied to the upstream instance.
-local_ported = ["wikipedia", "arxiv", "crossref", "braveapi", "qwant", "duckduckgo", "github", "reddit", "bing", "google", "youtube"]
+# Include bing_images, ddg_images, qwant_images for image search when [upstream].url is empty.
+local_ported = ["wikipedia", "arxiv", "crossref", "braveapi", "qwant", "duckduckgo", "github", "reddit", "bing", "google", "youtube", "bing_images", "ddg_images", "qwant_images"]

 [engines.brave]
 # Brave Search API key (env: BRAVE_API_KEY)
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -8,7 +8,7 @@ services:
  kafka:
    build: .
    ports:
-      - "8080:8080"
+      - "5355:5355"
    volumes:
      - ./config.toml:/etc/kafka/config.toml:ro
    depends_on:
--- a/flake.nix
+++ b/flake.nix
@ -61,7 +61,7 @@

            port = lib.mkOption {
              type = lib.types.port;
-              default = 8080;
+              default = 5355;
              description = "Port to listen on.";
            };

--- a/internal/config/config.go
+++ b/internal/config/config.go
@ -160,12 +160,12 @@ func validateConfig(cfg *Config) error {
 func defaultConfig() *Config {
 	return &Config{
 		Server: ServerConfig{
-			Port:        8080,
+			Port:        5355,
 			HTTPTimeout: "10s",
 		},
 		Upstream: UpstreamConfig{},
 		Engines: EnginesConfig{
-			LocalPorted: []string{"wikipedia", "arxiv", "crossref", "braveapi", "qwant", "duckduckgo", "github", "reddit", "bing", "google", "youtube"},
+			LocalPorted: []string{"wikipedia", "arxiv", "crossref", "braveapi", "qwant", "duckduckgo", "github", "reddit", "bing", "google", "youtube", "bing_images", "ddg_images", "qwant_images"},
 			Qwant: QwantConfig{
 				Category:       "web-lite",
 				ResultsPerPage: 10,
--- a/internal/config/config_test.go
+++ b/internal/config/config_test.go
@ -11,11 +11,11 @@ func TestLoadDefaults(t *testing.T) {
 	if err != nil {
 		t.Fatalf("Load with missing file should return defaults: %v", err)
 	}
-	if cfg.Server.Port != 8080 {
-		t.Errorf("expected default port 8080, got %d", cfg.Server.Port)
+	if cfg.Server.Port != 5355 {
+		t.Errorf("expected default port 5355, got %d", cfg.Server.Port)
 	}
-	if len(cfg.Engines.LocalPorted) != 11 {
-		t.Errorf("expected 11 default engines, got %d", len(cfg.Engines.LocalPorted))
+	if len(cfg.Engines.LocalPorted) != 14 {
+		t.Errorf("expected 14 default engines, got %d", len(cfg.Engines.LocalPorted))
 	}
 }

--- a/internal/search/request_params.go
+++ b/internal/search/request_params.go
@ -161,6 +161,10 @@ func ParseSearchRequest(r *http.Request) (SearchRequest, error) {
 			delete(catSet, category)
 		}
 	}
+	// HTML UI uses a single ?category=images (etc.) query param; honor it here.
+	if single := strings.TrimSpace(r.FormValue("category")); single != "" {
+		catSet[single] = true
+	}
 	categories := make([]string, 0, len(catSet))
 	for c := range catSet {
 		categories = append(categories, c)
@ -250,4 +254,3 @@ func parseAccessToken(r *http.Request) string {

 	return ""
 }
-
--- a/internal/search/request_params_test.go
+++ b/internal/search/request_params_test.go
@ -72,3 +72,21 @@ func TestParseSearchRequest_CategoriesAndEngineData(t *testing.T) {
 	}
 }

+func TestParseSearchRequest_SingularCategoryParam(t *testing.T) {
+	r := httptest.NewRequest(http.MethodGet, "/search?q=cats&category=images", nil)
+	req, err := ParseSearchRequest(r)
+	if err != nil {
+		t.Fatalf("unexpected error: %v", err)
+	}
+	found := false
+	for _, c := range req.Categories {
+		if c == "images" {
+			found = true
+			break
+		}
+	}
+	if !found {
+		t.Fatalf("expected category images from ?category=images, got %v", req.Categories)
+	}
+}
+
--- a/internal/views/templates/base.html
+++ b/internal/views/templates/base.html
--- a/internal/views/templates/image_item.html
+++ b/internal/views/templates/image_item.html
@ -2,9 +2,9 @@
 <a class="image-result" href="{{.URL}}" target="_blank" rel="noopener noreferrer">
  <div class="image-thumb">
    {{if .Thumbnail}}
-    <img src="{{.Thumbnail}}" alt="{{.Title}}" loading="lazy" onerror="this.parentElement.classList.add('image-error')">
+    <img src="{{.Thumbnail}}" alt="{{.Title}}" loading="lazy">
    {{else}}
-    <div class="image-placeholder">🖼️</div>
+    <div class="image-placeholder" aria-hidden="true">🖼️</div>
    {{end}}
  </div>
  <div class="image-meta">
--- a/internal/views/templates/preferences.html
+++ b/internal/views/templates/preferences.html
@ -9,7 +9,7 @@
      <h2 class="pref-section-title">Appearance</h2>
      <div class="pref-row">
        <label for="theme-select">Theme</label>
-        <select name="theme" id="theme-select" onchange="this.form.submit()">
+        <select name="theme" id="theme-select">
          <option value="light" {{if eq .Theme "light"}}selected{{end}}>Light</option>
          <option value="dark" {{if eq .Theme "dark"}}selected{{end}}>Dark</option>
        </select>
@ -70,7 +70,7 @@
      </div>
      <div class="pref-row">
        <div class="pref-row-info">
-          <label>Favicon Service</label>
+          <label for="pref-favicon">Favicon Service</label>
          <p class="pref-desc">Fetch favicons for result URLs. "None" is most private.</p>
        </div>
        <select name="favicon" id="pref-favicon">
@ -105,26 +105,4 @@
    </div>
  </form>
 </div>
-
-<script>
-(function() {
-  // Load saved engine preferences
-  var savedEngines = JSON.parse(localStorage.getItem('samsa-engines') || 'null');
-  if (savedEngines) {
-    savedEngines.forEach(function(engine) {
-      var checkbox = document.querySelector('input[name="engine"][value="' + engine.id + '"]');
-      if (checkbox) checkbox.checked = engine.enabled;
-    });
-  }
-
-  // Save on submit
-  document.querySelector('.preferences-form').addEventListener('submit', function() {
-    var engines = [];
-    document.querySelectorAll('input[name="engine"]').forEach(function(cb) {
-      engines.push({ id: cb.value, enabled: cb.checked });
-    });
-    localStorage.setItem('samsa-engines', JSON.stringify(engines));
-  });
-})();
-</script>
 {{end}}
--- a/internal/views/templates/result_item.html
+++ b/internal/views/templates/result_item.html
@ -4,7 +4,9 @@
    <a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.SafeTitle}}</a>
  </div>
  <div class="result_url">
-    <img class="result-favicon" data-domain="{{.Domain}}" src="" alt="" loading="lazy" style="display:none">
+    {{if .Domain}}
+    <img class="result-favicon" src="/favicon/{{.Domain}}" alt="" loading="lazy" width="14" height="14">
+    {{end}}
    <a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.URL}}</a>
    <span class="engine-badge" data-engine="{{.Engine}}">{{.Engine}}</span>
  </div>
--- a/internal/views/templates/results.html
+++ b/internal/views/templates/results.html
@ -2,6 +2,7 @@
 {{define "content"}}
 <div class="results-container">
  <div class="results-header">
+    <div class="results-header-inner">
      <a href="/" class="results-logo">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <circle cx="11" cy="11" r="8"/>
@ -10,7 +11,10 @@
        <span>samsa</span>
      </a>

-    <form class="header-search" method="GET" action="/search" role="search" hx-get="/search" hx-target="#urls" hx-swap="innerHTML" hx-select="#urls">
+      <form class="header-search" method="GET" action="/search" role="search">
+        {{if and .ActiveCategory (ne .ActiveCategory "all")}}
+        <input type="hidden" name="category" value="{{.ActiveCategory}}">
+        {{end}}
        <div class="search-box">
          <input type="text" name="q" value="{{.Query}}" placeholder="Search…" autocomplete="off">
          <button type="submit" class="search-btn" aria-label="Search">
@ -22,13 +26,14 @@
        </div>
      </form>
    </div>
+  </div>

  <div class="category-tabs" role="tablist">
-    <a href="/search?q={{.Query | urlquery}}&category=" class="category-tab {{if eq .ActiveCategory ""}}active{{end}}">All</a>
-    <a href="/search?q={{.Query | urlquery}}&category=general" class="category-tab {{if eq .ActiveCategory "general"}}active{{end}}">General</a>
-    <a href="/search?q={{.Query | urlquery}}&category=it" class="category-tab {{if eq .ActiveCategory "it"}}active{{end}}">IT</a>
-    <a href="/search?q={{.Query | urlquery}}&category=news" class="category-tab {{if eq .ActiveCategory "news"}}active{{end}}">News</a>
-    <a href="/search?q={{.Query | urlquery}}&category=images" class="category-tab {{if eq .ActiveCategory "images"}}active{{end}}">Images</a>
+    <a href="/search?q={{.Query | urlquery}}&amp;category=" class="category-tab {{if or (eq .ActiveCategory "") (eq .ActiveCategory "all")}}active{{end}}">All</a>
+    <a href="/search?q={{.Query | urlquery}}&amp;category=general" class="category-tab {{if eq .ActiveCategory "general"}}active{{end}}">General</a>
+    <a href="/search?q={{.Query | urlquery}}&amp;category=it" class="category-tab {{if eq .ActiveCategory "it"}}active{{end}}">IT</a>
+    <a href="/search?q={{.Query | urlquery}}&amp;category=news" class="category-tab {{if eq .ActiveCategory "news"}}active{{end}}">News</a>
+    <a href="/search?q={{.Query | urlquery}}&amp;category=images" class="category-tab {{if eq .ActiveCategory "images"}}active{{end}}">Images</a>
  </div>

  <div class="results-content">
--- a/internal/views/templates/results_inner.html
+++ b/internal/views/templates/results_inner.html
@ -1,6 +1,6 @@
 {{define "results_inner"}}
 {{if .Corrections}}
-<div id="corrections" class="correction" hx-swap-oob="true">{{range .Corrections}}{{.}} {{end}}</div>
+<div id="corrections" class="correction">{{range .Corrections}}{{.}} {{end}}</div>
 {{end}}

 {{if or .Answers .Infoboxes}}
@ -11,13 +11,13 @@
 </div>
 {{end}}

-<div class="results-meta" id="results-meta" hx-swap-oob="true">
+<div class="results-meta" id="results-meta">
  {{if .NumberOfResults}}
  <span>{{.NumberOfResults}} results</span>
  {{end}}
 </div>

-<div id="urls" role="main" hx-select="#urls" hx-swap="innerHTML" hx-target="#urls">
+<div id="urls" role="main">
  {{if .Results}}
  {{if .IsImageSearch}}
  <div class="image-grid">
@ -40,7 +40,7 @@
  {{end}}
  {{else if not .Answers}}
  <div class="no-results">
-    <div class="no-results-icon">🔍</div>
+    <div class="no-results-icon" aria-hidden="true">🔍</div>
    <h2>No results found</h2>
    <p>Try different keywords or check your spelling.</p>
  </div>
@ -48,42 +48,26 @@
 </div>

 {{if .Pageno}}
-<nav class="pagination" role="navigation">
+<nav class="pagination" role="navigation" aria-label="Pagination">
  {{if gt .Pageno 1}}
-  <button type="button" class="paginate-btn" data-q="{{.Query}}" data-page="{{.PrevPage}}">← Prev</button>
+  <a class="pag-link" href="/search?q={{.Query | urlquery}}&amp;pageno={{.PrevPage}}{{if and .ActiveCategory (ne .ActiveCategory "all")}}&amp;category={{.ActiveCategory | urlquery}}{{end}}">← Prev</a>
  {{end}}

  {{range .PageNumbers}}
  {{if .IsCurrent}}
-  <span class="page-current">{{.Num}}</span>
+  <span class="page-current" aria-current="page">{{.Num}}</span>
  {{else}}
-  <button type="button" class="paginate-btn" data-q="{{$.Query}}" data-page="{{.Num}}">{{.Num}}</button>
+  <a class="pag-link" href="/search?q={{$.Query | urlquery}}&amp;pageno={{.Num}}{{if and $.ActiveCategory (ne $.ActiveCategory "all")}}&amp;category={{$.ActiveCategory | urlquery}}{{end}}">{{.Num}}</a>
  {{end}}
  {{end}}

  {{if .HasNext}}
-  <button type="button" class="paginate-btn" data-q="{{.Query}}" data-page="{{.NextPage}}">Next →</button>
+  <a class="pag-link" href="/search?q={{.Query | urlquery}}&amp;pageno={{.NextPage}}{{if and .ActiveCategory (ne .ActiveCategory "all")}}&amp;category={{.ActiveCategory | urlquery}}{{end}}">Next →</a>
  {{end}}
 </nav>
 {{end}}

-<div class="back-to-top" id="backToTop">
-  <a href="#">↑ Back to top</a>
+<div class="back-to-top">
+  <a href="#top">↑ Back to top</a>
 </div>
-
-<div class="htmx-indicator">Searching…</div>
-
-<script>
-(function() {
-  document.body.addEventListener('click', function(e) {
-    var btn = e.target.closest('.paginate-btn');
-    if (!btn) return;
-    var q = btn.getAttribute('data-q');
-    var page = btn.getAttribute('data-page');
-    if (!q || !page) return;
-    var url = '/search?q=' + encodeURIComponent(q) + '&pageno=' + encodeURIComponent(page);
-    htmx.ajax(url, {target: '#urls', swap: 'innerHTML', select: '#urls'});
-  });
-})();
-</script>
 {{end}}
--- a/internal/views/templates/video_item.html
+++ b/internal/views/templates/video_item.html
@ -1,5 +1,5 @@
 {{define "video_item"}}
-<article class="result video-result">
+<article class="result video-result" data-engine="{{.Engine}}">
  {{if .Thumbnail}}
  <div class="result_thumbnail">
    <a href="{{.URL}}" target="_blank" rel="noopener noreferrer">
@ -9,13 +9,16 @@
  {{end}}
  <div class="result_content_wrapper">
    <div class="result_header">
-      <a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.Title}}</a>
+      <a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.SafeTitle}}</a>
    </div>
    <div class="result_url">
-      <span class="engine-badge">youtube</span>
+      {{if .URL}}
+      <a href="{{.URL}}" target="_blank" rel="noopener noreferrer">{{.URL}}</a>
+      {{end}}
+      <span class="engine-badge" data-engine="{{.Engine}}">{{.Engine}}</span>
    </div>
    {{if .Content}}
-    <p class="result_content">{{.Content}}</p>
+    <p class="result_content">{{.SafeContent}}</p>
    {{end}}
  </div>
 </article>