penal-colony/kafka
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs: update Brave Search frontend redesign spec with clarifications

Browse source 
- 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 <noreply@anthropic.com>
This commit is contained in:
ashisgreat22 2026-03-22 13:12:06 +01:00
parent 6bbde20f23
commit cb05ac5b8c
1 changed files with 139 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

186
docs/superpowers/specs/2026-03-22-brave-search-frontend-redesign.md
View file

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