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

Dockerfile

@@ -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"]

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 |

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)

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:

flake.nix

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

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,

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))
 	}
 }
 

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)
@@ -196,16 +200,16 @@ func ParseSearchRequest(r *http.Request) (SearchRequest, error) {
 
 	return SearchRequest{
 		Format:       OutputFormat(format),
-		Query:       q,
-		Pageno:      pageno,
-		Safesearch:  safesearch,
-		TimeRange:   timeRange,
+		Query:        q,
+		Pageno:       pageno,
+		Safesearch:   safesearch,
+		TimeRange:    timeRange,
 		TimeoutLimit: timeoutLimit,
-		Language:    language,
-		Engines:     engines,
-		Categories:  categories,
-		EngineData:  engineData,
-		AccessToken: accessToken,
+		Language:     language,
+		Engines:      engines,
+		Categories:   categories,
+		EngineData:   engineData,
+		AccessToken:  accessToken,
 	}, nil
 }
 
@@ -250,4 +254,3 @@ func parseAccessToken(r *http.Request) string {
 
 	return ""
 }
-

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)
+	}
+}
+

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">

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}}

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>

internal/views/templates/results.html

@@ -2,33 +2,38 @@
 {{define "content"}}
 <div class="results-container">
   <div class="results-header">
-    <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"/>
-        <path d="m21 21-4.35-4.35"/>
-      </svg>
-      <span>samsa</span>
-    </a>
+    <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"/>
+          <path d="m21 21-4.35-4.35"/>
+        </svg>
+        <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">
-      <div class="search-box">
-        <input type="text" name="q" value="{{.Query}}" placeholder="Search…" autocomplete="off">
-        <button type="submit" class="search-btn" aria-label="Search">
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-            <circle cx="11" cy="11" r="8"/>
-            <path d="m21 21-4.35-4.35"/>
-          </svg>
-        </button>
-      </div>
-    </form>
+      <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">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="11" cy="11" r="8"/>
+              <path d="m21 21-4.35-4.35"/>
+            </svg>
+          </button>
+        </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">

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}}

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>