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

feat(frontend): add three-column results layout with left sidebar navigation

Browse source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ashisgreat22 2026-03-22 13:36:09 +01:00
parent 2e7075adf1
commit 0e79b729fe
3 changed files with 122 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

85
internal/views/templates/results.html
View file

@ -1,32 +1,75 @@
{{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}}
</nav>
<!-- Results -->
<div class="results-column" id="results">
<div class="sidebar-filters">
<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>
</div>
</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 +86,4 @@
{{end}}
</aside>
</div>
{{end}}
{{end}}