From cb05ac5b8c243206cb3226eb86538d12c6e13b64 Mon Sep 17 00:00:00 2001 From: ashisgreat22 Date: Sun, 22 Mar 2026 13:12:06 +0100 Subject: [PATCH] docs: update Brave Search frontend redesign spec with clarifications - Clarify localStorage-only preferences (no server persistence) - Expand category tiles including future ones (weather, sports, crypto) - Define filter UI options with query params (time range, result type) - Add mobile breakpoints and collapse behavior - Reduce quick popover to theme + engines only - Rename Preferences Sidebar to Preferences Nav - Add results count format specification - Add sticky positioning CSS for left sidebar Co-Authored-By: Claude Opus 4.6 --- ...26-03-22-brave-search-frontend-redesign.md | 186 +++++++++++++----- 1 file changed, 139 insertions(+), 47 deletions(-) diff --git a/docs/superpowers/specs/2026-03-22-brave-search-frontend-redesign.md b/docs/superpowers/specs/2026-03-22-brave-search-frontend-redesign.md index dcbc862..d30ab99 100644 --- a/docs/superpowers/specs/2026-03-22-brave-search-frontend-redesign.md +++ b/docs/superpowers/specs/2026-03-22-brave-search-frontend-redesign.md @@ -9,8 +9,9 @@ Redesign the kafka frontend to match Brave Search's clean, functional aesthetic 1. **Brave-like layout** — Three-column results, full-page preferences, homepage tiles 2. **Preserve existing design tokens** — Keep current CSS variables (colors, spacing, radii) 3. **CSS Grid for layout** — Three-column grid for results, flexible layouts elsewhere -4. **Hybrid preferences** — Quick popover for common settings, full `/preferences` page for all options +4. **Hybrid preferences** — Quick popover for common settings (theme + engines), full `/preferences` page for all options 5. **Minimal HTML changes** — Restructure templates where needed for layout, reuse existing partials +6. **localStorage-only preferences** — No server-side persistence; all preferences stored in browser localStorage --- @@ -41,9 +42,24 @@ Redesign the kafka frontend to match Brave Search's clean, functional aesthetic - **File:** `internal/views/templates/index.html` - **Structure:** Search hero + category tiles grid - **Tiles:** Static links to `/search?q=...` with category parameter (e.g., `&category=images`) -- **Categories:** News, Images, Videos, Maps, Shopping, Music (or configurable) - **Styling:** Grid of icon+label cards below search box, subtle hover effects +### Category Tiles +| Category | Icon | Notes | +|----------|------|-------| +| All | 🌐 | Default, no category param | +| News | 📰 | | +| Images | 🖼️ | | +| Videos | 🎬 | | +| Maps | 🗺️ | | +| Shopping | 🛒 | Future: connect to shopping engine | +| Music | 🎵 | Future: connect to music engine | +| Weather | 🌤️ | Future: connect to weather API | +| Sports | ⚽ | Future | +| Cryptocurrency | ₿ | Future | + +Categories marked "Future" are included in the UI but may not have backend support yet. Category tiles that lack backend support display grayed out with a "Coming soon" tooltip. + --- ## 2. Results Page — Three-Column Layout @@ -59,36 +75,71 @@ Redesign the kafka frontend to match Brave Search's clean, functional aesthetic │ ┌─────────┐ ┌────────────────────────────┐ ┌──────────┐│ │ │ Nav │ │ 🔍 [ Search Input ] │ │ Related ││ │ │ ─────── │ └────────────────────────────┘ │ Searches ││ -│ │ All │ │ │ ││ +│ │ All │ About 1,240 results (0.42s) │ ││ │ │ Images │ ┌──────────────────────────┐ │ │ ─────── ││ │ │ Videos │ │ Result Card │ │ │ Suggestions│ │ │ News │ │ Title, URL, Description │ │ │ ││ -│ │ Maps │ └──────────────────────────┘ │ │ ││ -│ │ ... │ ┌──────────────────────────┐ │ └──────────┘│ -│ │ │ │ Result Card │ │ │ -│ │ ─────── │ │ ... │ │ │ -│ │ Filters │ └──────────────────────────┘ │ │ -│ │ Time │ ... │ │ -│ │ Type │ │ │ -│ └─────────┘ [Pagination] │ │ +│ │ Maps │ └──────────────────────────┘ │ └──────────┘│ +│ │ Shopping│ ┌──────────────────────────┐ │ │ +│ │ ... │ │ Result Card │ │ │ +│ │ │ │ ... │ │ │ +│ │ ─────── │ └──────────────────────────┘ │ │ +│ │ Filters │ ... │ │ +│ │ Time │ │ │ +│ │ Type │ [Pagination] │ │ +│ └─────────┘ │ │ └─────────────────────────────────────────────────────────────┘ ``` ### Implementation - **Files:** `internal/views/templates/results.html`, `internal/views/templates/base.html` -- **Left Sidebar (desktop):** - - Category navigation links (All, Images, Videos, News, Maps, Shopping) +- **Left Sidebar (desktop, sticky):** + - Category navigation links (All, Images, Videos, News, Maps, Shopping, Music, Weather) - Filters section (Time range, Result type) — collapsible - - Hidden on mobile + - Hidden on mobile (< 768px) + - **Center Column:** - Compact search bar - - Results count meta - - Result cards (unchanged markup, restyled if needed) + - Results count meta: "About {n} results ({time}s)" + - Result cards (unchanged markup) - Pagination + - **Right Sidebar:** - Related searches (existing suggestions) - Additional panels as needed -- **CSS:** Use `display: grid` with three columns on desktop, collapse to single column on mobile + +### Filters +**Time Range Options:** +| Label | Query Param | +|-------|-------------| +| Any time | (none) | +| Past hour | `&time=h` | +| Past 24 hours | `&time=d` | +| Past week | `&time=w` | +| Past month | `&time=m` | +| Past year | `&time=y` | + +**Result Type Options:** +| Label | Query Param | +|-------|-------------| +| All results | (none) | +| News | `&type=news` | +| Videos | `&type=video` | +| Images | `&type=image` | + +Filter state persists in URL query params and is preserved across HTMX navigation via `hx-include`. + +### Mobile Behavior +| Breakpoint | Layout | +|------------|--------| +| < 768px | Single column, no left sidebar | +| 768px - 1024px | Two columns (center + right sidebar), no left nav | +| > 1024px | Full three columns | + +On mobile (< 768px): +- Category filters accessible via a horizontal scrollable chip row above results +- Both sidebars hidden +- Search bar full-width --- @@ -105,7 +156,7 @@ Redesign the kafka frontend to match Brave Search's clean, functional aesthetic │ [Logo] [⚙ Preferences]│ ├─────────────────────────────────────────────────────────────┤ │ ┌────────────────┐ ┌─────────────────────────────────────┐│ -│ │ Sidebar │ │ Content ││ +│ │ Nav │ │ Content ││ │ │ ───────────── │ │ ││ │ │ Search │ │ [Section Content] ││ │ │ Privacy │ │ ││ @@ -132,10 +183,14 @@ Redesign the kafka frontend to match Brave Search's clean, functional aesthetic ### Implementation - **Route:** Add `GET /preferences` and `POST /preferences` to `internal/httpapi/` - **Template:** `internal/views/templates/preferences.html` -- **Quick Settings Popover:** Keep existing popover for theme toggle and engine toggles only (lightweight, localStorage) -- **Full Preferences Page:** Server-rendered, form POST saves to localStorage, reads on load +- **Storage:** localStorage-only. GET handler renders page shell, JavaScript populates form values from localStorage. POST handler receives form data, writes to localStorage, re-renders page. +- **Quick Settings Popover:** Keep existing popover for **theme toggle and engine toggles only** (lightweight, localStorage). SafeSearch and Format settings move exclusively to full preferences page. - **Styling:** Match existing design tokens, section headers, form controls +### Preferences Nav (Mobile) +- Horizontal scrollable nav on mobile (< 768px) +- Active section highlighted + --- ## 4. Component Changes @@ -157,14 +212,14 @@ Redesign the kafka frontend to match Brave Search's clean, functional aesthetic - Hover: slight scale + shadow ### Left Sidebar (Results Page) -- Sticky positioning +- Sticky positioning (`position: sticky; top: calc(var(--header-height) + 1rem)`) - Category links with active state indicator - Collapsible filter sections -### Preferences Sidebar +### Preferences Nav - Vertical nav with section icons - Active state indicator -- Mobile: horizontal scroll or accordion +- Mobile: horizontal scroll --- @@ -176,30 +231,66 @@ Redesign the kafka frontend to match Brave Search's clean, functional aesthetic - Dark mode via `[data-theme="dark"]` ### New -- Layout Grid for three-column results: - ```css + +**Layout Grid for three-column results:** +```css +.results-layout { + display: grid; + grid-template-columns: 200px 1fr 240px; + gap: 2rem; + align-items: start; +} +``` + +**Sticky Left Sidebar:** +```css +.results-layout .left-sidebar { + position: sticky; + top: calc(var(--header-height) + 1.5rem); + max-height: calc(100vh - var(--header-height) - 3rem); + overflow-y: auto; +} +``` + +**Preferences page layout:** +```css +.preferences-layout { + display: grid; + grid-template-columns: 200px 1fr; + gap: 2rem; +} +``` + +**Category tiles grid:** +```css +.category-tiles { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + gap: 1rem; +} +``` + +**Mobile breakpoints:** +```css +@media (max-width: 768px) { .results-layout { - display: grid; - grid-template-columns: 200px 1fr 240px; - gap: 2rem; + grid-template-columns: 1fr; } - ``` -- Preferences page layout: - ```css - .preferences-layout { - display: grid; - grid-template-columns: 200px 1fr; - gap: 2rem; + .results-layout .left-sidebar, + .results-layout .right-sidebar { + display: none; } - ``` -- Category tiles grid: - ```css - .category-tiles { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); - gap: 1rem; +} + +@media (min-width: 769px) and (max-width: 1024px) { + .results-layout { + grid-template-columns: 1fr 220px; } - ``` + .results-layout .left-sidebar { + display: none; + } +} +``` --- @@ -211,8 +302,8 @@ Redesign the kafka frontend to match Brave Search's clean, functional aesthetic | `internal/views/templates/results.html` | Add left sidebar, restructure for three columns | | `internal/views/templates/base.html` | Minimal changes (no structural changes needed) | | `internal/views/templates/preferences.html` | **New** — full preferences page | -| `internal/views/static/css/kafka.css` | Add layout grids, category tiles, sidebar styles | -| `internal/views/static/js/settings.js` | Keep popover for quick settings, update for preferences page | +| `internal/views/static/css/kafka.css` | Add layout grids, category tiles, sidebar styles, sticky positioning, mobile breakpoints | +| `internal/views/static/js/settings.js` | Reduce popover to theme + engines; add preferences page JS | | `internal/httpapi/httpapi.go` | Add `/preferences` route (GET + POST) | | `internal/views/views.go` | Add preferences template rendering | @@ -220,7 +311,7 @@ Redesign the kafka frontend to match Brave Search's clean, functional aesthetic ## 7. Priority Order -1. **Phase 1:** CSS layout framework (three-column grid, new variables) +1. **Phase 1:** CSS layout framework (three-column grid, new variables, breakpoints) 2. **Phase 2:** Results page three-column layout 3. **Phase 3:** Homepage category tiles 4. **Phase 4:** Preferences page (quick popover first, then full page) @@ -231,6 +322,7 @@ Redesign the kafka frontend to match Brave Search's clean, functional aesthetic ## Out of Scope - Backend search logic changes -- New engine implementations +- New engine implementations (category tiles for future engines are UI placeholders only) - Caching or performance improvements - User authentication/account system +- Server-side preference storage