Merge branch 'worktree-brave-search-redesign'

2026-03-22 14:09:29 +01:00 · 2026-03-22 14:09:29 +01:00 · cdfdb16c26
commit cdfdb16c26
parent 0402d249b8 e18a54a41a
9 changed files with 832 additions and 68 deletions
--- a/cmd/kafka/main.go
+++ b/cmd/kafka/main.go
@ -84,6 +84,7 @@ func main() {
 	mux.HandleFunc("/healthz", h.Healthz)
 	mux.HandleFunc("/search", h.Search)
 	mux.HandleFunc("/autocompleter", h.Autocompleter)
+	mux.HandleFunc("/preferences", h.Preferences)
 	mux.HandleFunc("/opensearch.xml", h.OpenSearch(cfg.Server.BaseURL))

 	// Serve embedded static files (CSS, JS, images).
--- a/internal/httpapi/handlers.go
+++ b/internal/httpapi/handlers.go
@ -112,7 +112,8 @@ func (h *Handler) Search(w http.ResponseWriter, r *http.Request) {
 	}

 	if req.Format == contracts.FormatHTML {
-		pd := views.FromResponse(resp, req.Query, req.Pageno)
+		pd := views.FromResponse(resp, req.Query, req.Pageno,
+		r.FormValue("category"), r.FormValue("time"), r.FormValue("type"))
 		if err := views.RenderSearchAuto(w, r, pd); err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 		}
@ -141,3 +142,20 @@ func (h *Handler) Autocompleter(w http.ResponseWriter, r *http.Request) {
 	w.Header().Set("Content-Type", "application/json; charset=utf-8")
 	_ = json.NewEncoder(w).Encode(suggestions)
 }
+
+// Preferences handles GET and POST for the preferences page.
+func (h *Handler) Preferences(w http.ResponseWriter, r *http.Request) {
+	if r.URL.Path != "/preferences" {
+		http.NotFound(w, r)
+		return
+	}
+	if r.Method == "POST" {
+		// Preferences are stored in localStorage on the client via JavaScript.
+		// This handler exists only for form submission completeness.
+		http.Redirect(w, r, "/preferences", http.StatusFound)
+		return
+	}
+	if err := views.RenderPreferences(w, h.sourceURL); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+	}
+}
--- a/internal/views/static/css/kafka.css
+++ b/internal/views/static/css/kafka.css
@ -975,6 +975,383 @@ a:focus-visible {
  background: var(--border-focus);
 }

+/* ============================================================
+   Three-Column Results Layout
+   ============================================================ */
+
+.results-layout {
+  display: grid;
+  grid-template-columns: 200px 1fr 240px;
+  gap: 2rem;
+  align-items: start;
+}
+
+.results-layout .left-sidebar,
+.results-layout .right-sidebar {
+  position: sticky;
+  top: calc(var(--header-height) + 1.5rem);
+  max-height: calc(100vh - var(--header-height) - 3rem);
+  overflow-y: auto;
+}
+
+.results-layout .results-column {
+  min-width: 0;
+}
+
+/* Tablet: hide left sidebar, two columns */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .results-layout {
+    grid-template-columns: 1fr 220px;
+  }
+  .results-layout .left-sidebar {
+    display: none;
+  }
+}
+
+/* Mobile: single column, no sidebars */
+@media (max-width: 768px) {
+  .results-layout {
+    grid-template-columns: 1fr;
+  }
+  .results-layout .left-sidebar,
+  .results-layout .right-sidebar {
+    display: none;
+  }
+}
+
+/* ============================================================
+   Preferences Page Layout
+   ============================================================ */
+
+.preferences-layout {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  gap: 2rem;
+  align-items: start;
+  padding: 2rem 0;
+}
+
+.preferences-nav {
+  position: sticky;
+  top: calc(var(--header-height) + 1.5rem);
+}
+
+.preferences-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.6rem 0.75rem;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 0.9rem;
+  transition: background 0.15s, color 0.15s;
+  cursor: pointer;
+}
+
+.preferences-nav-item:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.preferences-nav-item.active {
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-weight: 500;
+}
+
+.preferences-content {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+}
+
+@media (max-width: 768px) {
+  .preferences-layout {
+    grid-template-columns: 1fr;
+  }
+  .preferences-nav {
+    position: static;
+    display: flex;
+    overflow-x: auto;
+    gap: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+  .preferences-nav-item {
+    white-space: nowrap;
+  }
+}
+
+/* ============================================================
+   Category Tiles
+   ============================================================ */
+
+.category-tiles {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.category-tile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem 0.5rem;
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  color: var(--text-secondary);
+  font-size: 0.85rem;
+  transition: background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
+}
+
+.category-tile:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-sm);
+}
+
+.category-tile-icon {
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.category-tile.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+@media (max-width: 768px) {
+  .category-tiles {
+    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+    gap: 0.75rem;
+  }
+  .category-tile {
+    padding: 0.75rem 0.25rem;
+    font-size: 0.75rem;
+  }
+  .category-tile-icon {
+    font-size: 1.25rem;
+  }
+}
+
+/* ============================================================
+   Left Sidebar (Results Page)
+   ============================================================ */
+
+.left-sidebar {
+  padding: 0;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.sidebar-nav-title {
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+  padding: 0.5rem 0.75rem;
+  margin-top: 0.5rem;
+}
+
+.sidebar-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 0.875rem;
+  transition: background 0.15s, color 0.15s;
+}
+
+.sidebar-nav-item:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.sidebar-nav-item.active {
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-weight: 500;
+}
+
+.sidebar-nav-item-icon {
+  font-size: 1rem;
+  width: 20px;
+  text-align: center;
+}
+
+.sidebar-filters {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border);
+}
+
+.sidebar-filter-group {
+  margin-bottom: 0.75rem;
+}
+
+.sidebar-filter-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  padding: 0 0.75rem;
+  margin-bottom: 0.25rem;
+}
+
+.sidebar-filter-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.35rem 0.75rem;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: background 0.15s;
+}
+
+.sidebar-filter-option:hover {
+  background: var(--bg-tertiary);
+}
+
+.sidebar-filter-option input[type="radio"] {
+  accent-color: var(--accent);
+}
+
+/* Mobile filter chips */
+.mobile-filter-chips {
+  display: none;
+  overflow-x: auto;
+  gap: 0.5rem;
+  padding: 0.75rem 0;
+  -webkit-overflow-scrolling: touch;
+}
+
+.mobile-filter-chips::-webkit-scrollbar {
+  display: none;
+}
+
+.mobile-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.4rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-full);
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  text-decoration: none;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.mobile-filter-chip:hover,
+.mobile-filter-chip.active {
+  background: var(--accent-soft);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+@media (max-width: 768px) {
+  .mobile-filter-chips {
+    display: flex;
+  }
+}
+
+/* ============================================================
+   Preferences Page Styles
+   ============================================================ */
+
+.pref-section {
+  margin-bottom: 2rem;
+}
+
+.pref-section:last-child {
+  margin-bottom: 0;
+}
+
+.pref-section-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 1rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.pref-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.pref-row:last-child {
+  border-bottom: none;
+}
+
+.pref-row label {
+  font-size: 0.9rem;
+  color: var(--text-primary);
+}
+
+.pref-row-info {
+  flex: 1;
+}
+
+.pref-row-info label {
+  font-weight: 500;
+}
+
+.pref-desc {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  margin-top: 0.25rem;
+}
+
+.pref-row select {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.85rem;
+  font-family: inherit;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--bg);
+  color: var(--text-primary);
+  cursor: pointer;
+  min-width: 150px;
+}
+
+.pref-row select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.pref-row input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--accent);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.pref-row input[type="checkbox"]:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 /* ============================================================
   Print
   ============================================================ */
--- a/internal/views/static/js/settings.js
+++ b/internal/views/static/js/settings.js
@ -103,28 +103,7 @@ function renderPanel(prefs) {
    engineToggles += '<label class="engine-toggle"><input type="checkbox" value="' + escapeHtml(name) + '"' + checked + '><span>' + escapeHtml(name) + '</span></label>';
  });

-  var ssOptions = [
-    { val: 'moderate', label: 'Moderate' },
-    { val: 'strict',   label: 'Strict' },
-    { val: 'off',      label: 'Off' }
-  ];
-  var fmtOptions = [
-    { val: 'html', label: 'HTML' },
-    { val: 'json', label: 'JSON' },
-    { val: 'csv',  label: 'CSV' },
-    { val: 'rss',  label: 'RSS' }
-  ];
-  var ssOptionsHtml = '';
-  var fmtOptionsHtml = '';
-  ssOptions.forEach(function(o) {
-    var sel = prefs.safeSearch === o.val ? ' selected' : '';
-    ssOptionsHtml += '<option value="' + o.val + '"' + sel + '>' + o.label + '</option>';
-  });
-  fmtOptions.forEach(function(o) {
-    var sel = prefs.format === o.val ? ' selected' : '';
-    fmtOptionsHtml += '<option value="' + o.val + '"' + sel + '>' + o.label + '</option>';
-  });
-
+  
  body.innerHTML =
    '<div class="settings-section">' +
      '<div class="settings-section-title">Appearance</div>' +
@ -175,24 +154,6 @@ function renderPanel(prefs) {
    })(checkboxes[j]));
  }

-  // Safe search
-  var ssEl = panel.querySelector('#pref-safesearch');
-  if (ssEl) {
-    ssEl.addEventListener('change', function() {
-      prefs.safeSearch = ssEl.value;
-      savePrefs(prefs);
-    });
-  }
-
-  // Format
-  var fmtEl = panel.querySelector('#pref-format');
-  if (fmtEl) {
-    fmtEl.addEventListener('change', function() {
-      prefs.format = fmtEl.value;
-      savePrefs(prefs);
-    });
-  }
-
  // Close button
  var closeBtn = panel.querySelector('.settings-popover-close');
  if (closeBtn) closeBtn.addEventListener('click', closePanel);
@ -269,3 +230,66 @@ if (document.readyState === 'loading') {
 } else {
  initSettings();
 }
+
+// Preferences page navigation
+function initPreferences() {
+  var nav = document.getElementById('preferences-nav');
+  if (!nav) return;
+
+  var sections = document.querySelectorAll('.pref-section');
+  var navItems = nav.querySelectorAll('.preferences-nav-item');
+
+  function showSection(id) {
+    sections.forEach(function(sec) {
+      sec.style.display = sec.id === 'section-' + id ? 'block' : 'none';
+    });
+    navItems.forEach(function(item) {
+      item.classList.toggle('active', item.getAttribute('data-section') === id);
+    });
+  }
+
+  navItems.forEach(function(item) {
+    item.addEventListener('click', function() {
+      showSection(item.getAttribute('data-section'));
+    });
+  });
+
+  // Load saved preferences
+  var prefs = loadPrefs();
+
+  // Theme
+  var themeEl = document.getElementById('pref-theme');
+  if (themeEl) {
+    themeEl.value = prefs.theme || 'system';
+    themeEl.addEventListener('change', function() {
+      prefs.theme = themeEl.value;
+      savePrefs(prefs);
+      applyTheme(prefs.theme);
+    });
+  }
+
+  // Safe search
+  var ssEl = document.getElementById('pref-safesearch');
+  if (ssEl) {
+    ssEl.value = prefs.safeSearch || 'moderate';
+    ssEl.addEventListener('change', function() {
+      prefs.safeSearch = ssEl.value;
+      savePrefs(prefs);
+    });
+  }
+
+  // Format (if exists on page)
+  var fmtEl = document.getElementById('pref-format');
+  if (fmtEl) {
+    fmtEl.value = prefs.format || 'html';
+    fmtEl.addEventListener('change', function() {
+      prefs.format = fmtEl.value;
+      savePrefs(prefs);
+    });
+  }
+
+  // Show first section by default
+  showSection('search');
+}
+
+document.addEventListener('DOMContentLoaded', initPreferences);
--- a/internal/views/templates/index.html
+++ b/internal/views/templates/index.html
@ -19,6 +19,42 @@
      </button>
    </form>
  </div>
+
+  <!-- Category Tiles -->
+  <div class="category-tiles">
+    <a href="/search" class="category-tile">
+      <span class="category-tile-icon">🌐</span>
+      <span>All</span>
+    </a>
+    <a href="/search?category=images" class="category-tile">
+      <span class="category-tile-icon">🖼️</span>
+      <span>Images</span>
+    </a>
+    <a href="/search?category=news" class="category-tile">
+      <span class="category-tile-icon">📰</span>
+      <span>News</span>
+    </a>
+    <a href="/search?category=videos" class="category-tile">
+      <span class="category-tile-icon">🎬</span>
+      <span>Videos</span>
+    </a>
+    <a href="/search?category=maps" class="category-tile">
+      <span class="category-tile-icon">🗺️</span>
+      <span>Maps</span>
+    </a>
+    <a href="/search?category=shopping" class="category-tile disabled" title="Coming soon">
+      <span class="category-tile-icon">🛒</span>
+      <span>Shopping</span>
+    </a>
+    <a href="/search?category=music" class="category-tile disabled" title="Coming soon">
+      <span class="category-tile-icon">🎵</span>
+      <span>Music</span>
+    </a>
+    <a href="/search?category=weather" class="category-tile disabled" title="Coming soon">
+      <span class="category-tile-icon">🌤️</span>
+      <span>Weather</span>
+    </a>
+  </div>
 </div>
 <div id="results"></div>
-{{end}}
+{{end}}
--- a/internal/views/templates/preferences.html
+++ b/internal/views/templates/preferences.html
@ -0,0 +1,191 @@
+{{define "title"}}Preferences{{end}}
+{{define "content"}}
+<div class="preferences-layout">
+  <!-- Preferences Navigation -->
+  <nav class="preferences-nav" id="preferences-nav">
+    <div class="preferences-nav-title">Settings</div>
+    <button class="preferences-nav-item active" data-section="search">🔍 Search</button>
+    <button class="preferences-nav-item" data-section="privacy">🔒 Privacy</button>
+    <button class="preferences-nav-item" data-section="tabs">📑 Tabs</button>
+    <button class="preferences-nav-item" data-section="appearance">🎨 Appearance</button>
+    <button class="preferences-nav-item" data-section="sidebar">📐 Sidebar</button>
+    <button class="preferences-nav-item" data-section="content">📄 Content</button>
+    <button class="preferences-nav-item" data-section="languages">🌍 Languages</button>
+    <button class="preferences-nav-item" data-section="regional">📍 Regional</button>
+  </nav>
+
+  <!-- Preferences Content -->
+  <div class="preferences-content">
+    <!-- Search Section -->
+    <section class="pref-section" id="section-search">
+      <h2 class="pref-section-title">Search</h2>
+      <div class="pref-row">
+        <label for="pref-default-engine">Default engine</label>
+        <select id="pref-default-engine">
+          <option value="">All engines</option>
+          <option value="wikipedia">Wikipedia</option>
+          <option value="arxiv">arXiv</option>
+          <option value="braveapi">Brave API</option>
+          <option value="duckduckgo">DuckDuckGo</option>
+          <option value="github">GitHub</option>
+          <option value="reddit">Reddit</option>
+          <option value="bing">Bing</option>
+        </select>
+      </div>
+      <div class="pref-row">
+        <label for="pref-safesearch">Safe search</label>
+        <select id="pref-safesearch">
+          <option value="moderate">Moderate</option>
+          <option value="strict">Strict</option>
+          <option value="off">Off</option>
+        </select>
+      </div>
+      <div class="pref-row">
+        <label for="pref-search-lang">Search language</label>
+        <select id="pref-search-lang">
+          <option value="">All languages</option>
+          <option value="en">English</option>
+          <option value="de">Deutsch</option>
+          <option value="fr">Français</option>
+          <option value="es">Español</option>
+          <option value="zh">中文</option>
+        </select>
+      </div>
+    </section>
+
+    <!-- Privacy Section -->
+    <section class="pref-section" id="section-privacy" style="display:none;">
+      <h2 class="pref-section-title">Privacy</h2>
+      <div class="pref-row">
+        <div class="pref-row-info">
+          <label>Tracking protection</label>
+          <p class="pref-desc">Block trackers and scripts that follow you across the web.</p>
+        </div>
+        <input type="checkbox" id="pref-tracking" checked disabled>
+      </div>
+      <div class="pref-row">
+        <div class="pref-row-info">
+          <label>Send Do Not Track header</label>
+          <p class="pref-desc">Ask websites not to track you.</p>
+        </div>
+        <input type="checkbox" id="pref-dnt">
+      </div>
+    </section>
+
+    <!-- Tabs Section -->
+    <section class="pref-section" id="section-tabs" style="display:none;">
+      <h2 class="pref-section-title">Tabs</h2>
+      <div class="pref-row">
+        <div class="pref-row-info">
+          <label>New tab behavior</label>
+          <p class="pref-desc">Choose what happens when you open a new tab.</p>
+        </div>
+        <select id="pref-newtab">
+          <option value="blank">Blank page</option>
+          <option value="home">Homepage</option>
+        </select>
+      </div>
+    </section>
+
+    <!-- Appearance Section -->
+    <section class="pref-section" id="section-appearance" style="display:none;">
+      <h2 class="pref-section-title">Appearance</h2>
+      <div class="pref-row">
+        <label for="pref-theme">Theme</label>
+        <select id="pref-theme">
+          <option value="system">System</option>
+          <option value="light">Light</option>
+          <option value="dark">Dark</option>
+        </select>
+      </div>
+      <div class="pref-row">
+        <label for="pref-fontsize">Results font size</label>
+        <select id="pref-fontsize">
+          <option value="small">Small</option>
+          <option value="medium" selected>Medium</option>
+          <option value="large">Large</option>
+        </select>
+      </div>
+    </section>
+
+    <!-- Sidebar Section -->
+    <section class="pref-section" id="section-sidebar" style="display:none;">
+      <h2 class="pref-section-title">Sidebar</h2>
+      <div class="pref-row">
+        <div class="pref-row-info">
+          <label>Show sidebar on results page</label>
+          <p class="pref-desc">Display the left navigation sidebar on search results.</p>
+        </div>
+        <input type="checkbox" id="pref-show-sidebar" checked>
+      </div>
+    </section>
+
+    <!-- Content Section -->
+    <section class="pref-section" id="section-content" style="display:none;">
+      <h2 class="pref-section-title">Content</h2>
+      <div class="pref-row">
+        <div class="pref-row-info">
+          <label>Filter explicit results</label>
+          <p class="pref-desc">Hide explicit content from search results (SafeSearch).</p>
+        </div>
+        <input type="checkbox" id="pref-explicit-filter" checked>
+      </div>
+      <div class="pref-row">
+        <div class="pref-row-info">
+          <label>Auto-play media</label>
+          <p class="pref-desc">Automatically play video content when visible.</p>
+        </div>
+        <input type="checkbox" id="pref-autoplay">
+      </div>
+    </section>
+
+    <!-- Languages Section -->
+    <section class="pref-section" id="section-languages" style="display:none;">
+      <h2 class="pref-section-title">Languages</h2>
+      <div class="pref-row">
+        <label for="pref-ui-lang">Interface language</label>
+        <select id="pref-ui-lang">
+          <option value="en" selected>English</option>
+        </select>
+      </div>
+      <div class="pref-row">
+        <label for="pref-search-lang-full">Search language</label>
+        <select id="pref-search-lang-full">
+          <option value="">All languages</option>
+          <option value="en">English</option>
+          <option value="de">Deutsch</option>
+          <option value="fr">Français</option>
+          <option value="es">Español</option>
+          <option value="zh">中文</option>
+        </select>
+      </div>
+    </section>
+
+    <!-- Regional Section -->
+    <section class="pref-section" id="section-regional" style="display:none;">
+      <h2 class="pref-section-title">Regional</h2>
+      <div class="pref-row">
+        <label for="pref-region">Country/Region</label>
+        <select id="pref-region">
+          <option value="">All regions</option>
+          <option value="us">United States</option>
+          <option value="uk">United Kingdom</option>
+          <option value="de">Germany</option>
+          <option value="fr">France</option>
+          <option value="cn">China</option>
+        </select>
+      </div>
+      <div class="pref-row">
+        <label for="pref-timezone">Timezone</label>
+        <select id="pref-timezone">
+          <option value="">Auto-detect</option>
+          <option value="utc">UTC</option>
+          <option value="us-eastern">US/Eastern</option>
+          <option value="us-pacific">US/Pacific</option>
+          <option value="europe">Europe</option>
+        </select>
+      </div>
+    </section>
+  </div>
+</div>
+{{end}}
--- a/internal/views/templates/results.html
+++ b/internal/views/templates/results.html
@ -1,32 +1,85 @@
 {{define "title"}}{{if .Query}}{{.Query}} — {{end}}{{end}}
 {{define "content"}}
 <div class="results-layout">
-  <!-- Compact search bar -->
-  <div class="search-compact">
-    <div class="search-box">
-      <form method="GET" action="/search" role="search" id="search-form">
-        <input type="text" name="q" id="q" value="{{.Query}}" autocomplete="off" autofocus
-          hx-get="/search" hx-target="#results" hx-trigger="keyup changed delay:500ms" hx-include="this">
-        <button type="submit" class="search-box-submit" aria-label="Search">
-          <svg width="18" height="18" 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>
-      </form>
-    </div>
-  </div>
+  <!-- Left Sidebar -->
+  <aside class="left-sidebar" id="left-sidebar">
+    <nav class="sidebar-nav">
+      <div class="sidebar-nav-title">Categories</div>
+      {{range .Categories}}
+      <a href="/search?q={{$.Query | urlquery}}&category={{.}}" class="sidebar-nav-item {{if eq $.ActiveCategory .}}active{{end}}">
+        <span class="sidebar-nav-item-icon">{{index $.CategoryIcons .}}</span>
+        <span>{{.}}</span>
+      </a>
+      {{end}}
+      <!-- Disabled categories with no links -->
+      {{range .DisabledCategories}}
+      <span class="sidebar-nav-item disabled">
+        <span class="sidebar-nav-item-icon">{{index $.CategoryIcons .}}</span>
+        <span>{{.}}</span>
+      </span>
+      {{end}}
+    </nav>

-  <!-- Results -->
-  <div class="results-column" id="results">
+    <form method="GET" action="/search" class="sidebar-filters"
+      hx-get="/search" hx-target="#results" hx-trigger="change" hx-swap="innerHTML">
+      <input type="hidden" name="q" value="{{.Query | urlquery}}">
+      <input type="hidden" name="category" value="{{.ActiveCategory}}">
+      <div class="sidebar-filter-group">
+        <div class="sidebar-filter-label">Time</div>
+        {{range .TimeFilters}}
+        <label class="sidebar-filter-option">
+          <input type="radio" name="time" value="{{.Value}}" {{if eq $.ActiveTime .Value}}checked{{end}}>
+          <span>{{.Label}}</span>
+        </label>
+        {{end}}
+      </div>
+      <div class="sidebar-filter-group">
+        <div class="sidebar-filter-label">Type</div>
+        {{range .TypeFilters}}
+        <label class="sidebar-filter-option">
+          <input type="radio" name="type" value="{{.Value}}" {{if eq $.ActiveType .Value}}checked{{end}}>
+          <span>{{.Label}}</span>
+        </label>
+        {{end}}
+      </div>
+    </form>
+  </aside>
+
+  <!-- Center Column -->
+  <div class="results-column">
+    <!-- Compact search bar -->
+    <div class="search-compact">
+      <div class="search-box">
+        <form method="GET" action="/search" role="search" id="search-form">
+          <input type="text" name="q" id="q" value="{{.Query}}" autocomplete="off" autofocus
+            hx-get="/search" hx-target="#results" hx-trigger="keyup changed delay:500ms" hx-include="this">
+          <button type="submit" class="search-box-submit" aria-label="Search">
+            <svg width="18" height="18" 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>
+        </form>
+      </div>
+    </div>
+
+    <!-- Mobile filter chips -->
+    <div class="mobile-filter-chips">
+      <a href="/search?q={{.Query | urlquery}}" class="mobile-filter-chip {{if not .ActiveCategory}}active{{end}}">All</a>
+      {{range .Categories}}
+      <a href="/search?q={{$.Query | urlquery}}&category={{.}}" class="mobile-filter-chip {{if eq $.ActiveCategory .}}active{{end}}">{{.}}</a>
+      {{end}}
+    </div>
+
+    <!-- Results inner -->
    {{template "results_inner" .}}
  </div>

-  <!-- Sidebar -->
-  <aside class="sidebar" id="sidebar">
+  <!-- Right Sidebar -->
+  <aside class="right-sidebar" id="sidebar">
    {{if .Suggestions}}
    <div class="sidebar-card">
-      <div class="sidebar-title">Suggestions</div>
+      <div class="sidebar-title">Related Searches</div>
      <div class="suggestion-list">
        {{range .Suggestions}}<span class="suggestion"><a href="/search?q={{. | urlquery}}">{{.}}</a></span>{{end}}
      </div>
@ -43,4 +96,4 @@
    {{end}}
  </aside>
 </div>
-{{end}}
+{{end}}
--- a/internal/views/views.go
+++ b/internal/views/views.go
@ -50,6 +50,15 @@ type PageData struct {
 	UnresponsiveEngines [][2]string
 	PageNumbers         []PageNumber
 	ShowHeader          bool
+	// New fields for three-column layout
+	Categories         []string
+	CategoryIcons     map[string]string
+	DisabledCategories []string
+	ActiveCategory    string
+	TimeFilters       []FilterOption
+	TypeFilters       []FilterOption
+	ActiveTime        string
+	ActiveType        string
 }

 // ResultView is a template-friendly wrapper around a MainResult.
@ -73,10 +82,17 @@ type InfoboxView struct {
 	ImgSrc  string
 }

+// FilterOption represents a filter radio option for the sidebar.
+type FilterOption struct {
+	Label string
+	Value string
+}
+
 var (
 	tmplFull    *template.Template
 	tmplIndex   *template.Template
 	tmplFragment *template.Template
+	tmplPreferences *template.Template
 )

 func init() {
@ -96,6 +112,9 @@ func init() {
 	tmplFragment = template.Must(template.New("").Funcs(funcMap).ParseFS(tmplFS,
 		"results_inner.html", "result_item.html", "video_item.html",
 	))
+	tmplPreferences = template.Must(template.New("").Funcs(funcMap).ParseFS(tmplFS,
+		"base.html", "preferences.html",
+	))
 }

 // StaticFS returns the embedded static file system for serving CSS/JS/images.
@ -116,12 +135,52 @@ func OpenSearchXML(baseURL string) ([]byte, error) {
 }

 // FromResponse builds PageData from a search response and request params.
-func FromResponse(resp contracts.SearchResponse, query string, pageno int) PageData {
+func FromResponse(resp contracts.SearchResponse, query string, pageno int, activeCategory, activeTime, activeType string) PageData {
+	// Set defaults
+	if activeCategory == "" {
+		activeCategory = "all"
+	}
+
 	pd := PageData{
 		Query:               query,
 		Pageno:              pageno,
 		NumberOfResults:     resp.NumberOfResults,
 		UnresponsiveEngines: resp.UnresponsiveEngines,
+
+		// New: categories with icons
+		Categories: []string{"all", "news", "images", "videos", "maps"},
+		DisabledCategories: []string{"shopping", "music", "weather"},
+		CategoryIcons: map[string]string{
+			"all":      "🌐",
+			"news":     "📰",
+			"images":   "🖼️",
+			"videos":   "🎬",
+			"maps":     "🗺️",
+			"shopping": "🛒",
+			"music":    "🎵",
+			"weather":  "🌤️",
+		},
+		ActiveCategory: activeCategory,
+
+		// Time filters
+		TimeFilters: []FilterOption{
+			{Label: "Any time", Value: ""},
+			{Label: "Past hour", Value: "h"},
+			{Label: "Past 24 hours", Value: "d"},
+			{Label: "Past week", Value: "w"},
+			{Label: "Past month", Value: "m"},
+			{Label: "Past year", Value: "y"},
+		},
+		ActiveTime: activeTime,
+
+		// Type filters
+		TypeFilters: []FilterOption{
+			{Label: "All results", Value: ""},
+			{Label: "News", Value: "news"},
+			{Label: "Videos", Value: "video"},
+			{Label: "Images", Value: "image"},
+		},
+		ActiveType: activeType,
 	}

 	// Convert results.
@ -233,4 +292,9 @@ func RenderSearchAuto(w http.ResponseWriter, r *http.Request, data PageData) err
 	return RenderSearch(w, data)
 }

-var _ = strconv.Itoa
+// RenderPreferences renders the full preferences page.
+func RenderPreferences(w http.ResponseWriter, sourceURL string) error {
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	return tmplPreferences.ExecuteTemplate(w, "base", PageData{ShowHeader: true, SourceURL: sourceURL})
+}
+
--- a/internal/views/views_test.go
+++ b/internal/views/views_test.go
@ -37,7 +37,7 @@ func mockEmptyResponse() contracts.SearchResponse {

 func TestFromResponse_Basic(t *testing.T) {
 	resp := mockSearchResponse("kafka trial", 42)
-	data := FromResponse(resp, "kafka trial", 1)
+	data := FromResponse(resp, "kafka trial", 1, "", "", "")

 	if data.Query != "kafka trial" {
 		t.Errorf("expected query 'kafka trial', got %q", data.Query)
@ -55,7 +55,7 @@ func TestFromResponse_Basic(t *testing.T) {

 func TestFromResponse_Pagination(t *testing.T) {
 	resp := mockSearchResponse("test", 100)
-	data := FromResponse(resp, "test", 3)
+	data := FromResponse(resp, "test", 3, "", "", "")

 	if data.PrevPage != 2 {
 		t.Errorf("expected PrevPage 2, got %d", data.PrevPage)
@ -80,7 +80,7 @@ func TestFromResponse_Pagination(t *testing.T) {
 }

 func TestFromResponse_Empty(t *testing.T) {
-	data := FromResponse(mockEmptyResponse(), "", 1)
+	data := FromResponse(mockEmptyResponse(), "", 1, "", "", "")

 	if data.NumberOfResults != 0 {
 		t.Errorf("expected 0 results, got %d", data.NumberOfResults)