filter and sort moved

VIBE/CHAT_LOG.md

@@ -310,6 +310,30 @@ Decrease the space between LinkLog items.
 ### Assistant outcome
 Reduced the feed grid gap from 14px to 8px so link-log items sit closer together while preserving the existing item padding and responsive layout.
 
+### User
+Move the sort and filter toolbar underneath the theme and menu, in the header, on the home page and user pages.
+
+### Assistant outcome
+Moved the feed sort, user filter, and tag filter toolbar into the header beneath the theme picker and hamburger menu. The same header toolbar is used on both the home feed and `/<user>/` pages, with responsive styling preserved.
+
+### User
+Run frontend and style checks.
+
+### Assistant outcome
+Ran syntax checks for all frontend JavaScript files, editor diagnostics for the stylesheet and key frontend scripts, HTML parsing for all templates, and frontend whitespace validation. All checks passed.
+
+### User
+Keep the sort and filter bar left of the logo and pack it snug against the menu and theme selector.
+
+### Assistant outcome
+Reworked the feed header into a compact row with the sort and filter bar on the left, the LinkLog branding beside it, and the theme/menu controls on the right. The toolbar stacks cleanly on mobile.
+
+### User
+Correction: the feed header should have the sort and filter bar to the right of the LinkLog logo, compact and underneath the theme selector and menu.
+
+### Assistant outcome
+Corrected the feed header so the logo remains on the left and the theme selector/menu sit above the sort and filter bar in a right-side control column. The control column remains responsive on mobile.
+
 ### User
 Perform the next items on the todo list.
 

VIBE/PROMPTS.md

@@ -138,6 +138,10 @@
 129. Do not show 'no comment provided' but leave empty when no comment has been provided.
 130. Decrease the space between link-log items.
 131. Perform the next items on the todo list.
+132. Correct: move the sort and filter toolbar underneath the theme and menu, in the header, on the home page and on the <user> pages.
+133. Run frontend and style checks.
+134. Keep the sort and filter bar left of the logo and pack it snug against the menu and theme selector.
+135. Correction: the feed header should have the sort and filter bar to the right of the LinkLog logo, compact and underneath the theme selector and menu.
 
 ## Future entries
 

backend/tests/test_api.py

@@ -459,6 +459,7 @@ def test_public_and_admin_pages_render_html():
     assert 'id="auth-profile-link" class="hidden"' in root_page.text
     assert 'id="auth-admin-link" class="hidden"' in root_page.text
     assert '<select id="tag-filter">' in root_page.text
+    assert root_page.text.index('class="site-logo"') < root_page.text.index('<section class="toolbar">')
     assert 'logout.js?v=3' in root_page.text
     assert client.get('/alice').status_code == 200
     assert client.get('/alice/').status_code == 200

frontend/static/style.css

@@ -185,7 +185,34 @@ body::selection {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 24px;
+  gap: 18px;
+}
+
+.header-tools {
+  display: grid;
+  flex: 1 1 auto;
+  justify-items: end;
+  gap: 8px;
+}
+
+.header-tools .toolbar {
+  width: min(100%, 560px);
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.header-tools .toolbar label {
+  min-width: 0;
+  flex: 1 1 110px;
+  font-size: 0.68rem;
+}
+
+.header-tools .toolbar select {
+  min-width: 0;
+  padding: 6px 8px;
 }
 
 .header-actions {
@@ -325,6 +352,11 @@ main.container {
   border-radius: 12px;
 }
 
+.site-header .toolbar {
+  margin-top: 18px;
+  margin-bottom: 0;
+}
+
 .toolbar label,
 .settings-panel label {
   display: grid;
@@ -735,9 +767,20 @@ button:disabled {
 
   .header-row {
     align-items: center;
+    flex-wrap: wrap;
     gap: 12px;
   }
 
+  .header-tools {
+    order: 3;
+    flex-basis: 100%;
+    justify-items: stretch;
+  }
+
+  .header-tools .header-actions {
+    justify-content: flex-end;
+  }
+
   .header-actions {
     align-items: flex-end;
   }

frontend/templates/feed.html

@@ -16,9 +16,10 @@
             <img class="site-logo" src="/static/logo.svg" alt="LinkLog" />
             <p>Public link feed</p>
           </div>
-          <div class="header-actions">
+          <div class="header-tools">
-            <button class="menu-toggle" type="button" aria-expanded="false" aria-controls="auth-menu">Menu</button>
+            <div class="header-actions">
-            <nav id="auth-menu" class="auth-menu hidden" aria-label="Account menu">
+              <button class="menu-toggle" type="button" aria-expanded="false" aria-controls="auth-menu">Menu</button>
+              <nav id="auth-menu" class="auth-menu hidden" aria-label="Account menu">
               <a id="auth-home-link" href="/">Home</a>
               <a id="auth-about-link" href="/about">About</a>
               <a id="auth-login-button" href="/login">Sign in</a>
@@ -29,7 +30,29 @@
                 <a id="auth-username" class="user-name" href="/"></a>
               </div>
               <button id="logout-button" class="logout-button hidden" type="button">Sign out</button>
-            </nav>
+              </nav>
+            </div>
+            <section class="toolbar">
+              <label>
+                Sort
+                <select id="sort-select">
+                  <option value="newest">Newest first</option>
+                  <option value="oldest">Oldest first</option>
+                </select>
+              </label>
+              <label>
+                User filter
+                <select id="user-filter">
+                  <option value="">All users</option>
+                </select>
+              </label>
+              <label>
+                Tag filter
+                <select id="tag-filter">
+                  <option value="">All tags</option>
+                </select>
+              </label>
+            </section>
           </div>
         </div>
       </div>
@@ -51,28 +74,6 @@
         <p>{{ profile.bio or 'No profile information provided.' }}</p>
       </section>
       {% endif %}
-      <section class="toolbar">
-        <label>
-          Sort
-          <select id="sort-select">
-            <option value="newest">Newest first</option>
-            <option value="oldest">Oldest first</option>
-          </select>
-        </label>
-        <label>
-          User filter
-          <select id="user-filter">
-            <option value="">All users</option>
-          </select>
-        </label>
-        <label>
-          Tag filter
-          <select id="tag-filter">
-            <option value="">All tags</option>
-          </select>
-        </label>
-      </section>
-
       <section id="feed" class="feed" aria-live="polite"></section>
     </main>
     <footer class="site-footer">Copyright © 2026 Olaf Kolkman  · <a href="https://git.kolkman.org/olaf/Link-Log">git.kolkman.org/LinkLog</a></footer>