From 560020632f4e468afbe75243c59f59342b44f25f Mon Sep 17 00:00:00 2001
From: Caleb Braaten <git@cbraaten.dev>
Date: Wed, 14 Jan 2026 15:03:23 -0800
Subject: [PATCH] Add multi-tag selection support to tag-picker without client
 side JS

---
 src/frontend/components/tag-picker.tsx | 21 ++++++++++++++++++---
 src/frontend/pages/home.tsx            | 16 +++++++++++-----
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/frontend/components/tag-picker.tsx b/src/frontend/components/tag-picker.tsx
index 79fbf02..bd90ad0 100644
--- a/src/frontend/components/tag-picker.tsx
+++ b/src/frontend/components/tag-picker.tsx
@@ -19,15 +19,30 @@ export function TagPicker({ searchParams }: { searchParams?: URLSearchParams })
             <h3>Tags</h3>
             <ul className="tag-pills">
               {tags.map(tag => {
-                const active = selectedTags.includes(tag.urlNormalized)
+                let active = selectedTags.includes(tag.urlNormalized)
+                let hyperlink = `/?tag=${tag.urlNormalized}`;
+
+                for (const existingTag of selectedTags) {
+                  hyperlink += `&tag=${existingTag}`
+                }
+
+                // Remove the currently selected tag from the tag link url if applicable
+                if (active) {
+                  hyperlink = hyperlink.split(`?tag=${tag.urlNormalized}`).join('')
+                  hyperlink = hyperlink.split(`&tag=${tag.urlNormalized}`).join('')
+                }
+
+                // Make sure the hyperlink starts with a ? and not a & (or the root webpage)
+                hyperlink = '/?' + hyperlink.substring(2)
+                if(hyperlink.length == 2) hyperlink = '/'
 
                 return (
                   < li key={tag.name} >
                     <a
-                      title={`${tag.post_count} post${tag.post_count !== 1 ? 's' : ''} (click to view)`}
+                      title={active ? `Remove ${tag.name} from filter` : `Add ${tag.name} to filter`}
                       data-tag
                       className={`tag-pill ${active ? 'active' : ''}`}
-                      href={`?tag=${tag.urlNormalized}`}
+                      href={hyperlink}
                     >
                       {tag.name}
                     </a>
diff --git a/src/frontend/pages/home.tsx b/src/frontend/pages/home.tsx
index cfcd015..3dce94c 100644
--- a/src/frontend/pages/home.tsx
+++ b/src/frontend/pages/home.tsx
@@ -39,7 +39,7 @@ export function Home({ searchParams }: { searchParams: URLSearchParams }) {
           </div>
         )}
       </div>
-      <Pagination currentPage={currentPage} totalPages={totalPages} />
+      <Pagination searchParams={searchParams} currentPage={currentPage} totalPages={totalPages} />
     </main>
   );
 }
@@ -85,7 +85,7 @@ function PostCard({ post }: { post: Post }) {
   );
 }
 
-function Pagination({ currentPage, totalPages }: { currentPage: number; totalPages: number }) {
+function Pagination({ currentPage, totalPages, searchParams }:{ currentPage: number; totalPages: number, searchParams: URLSearchParams }) {
   // Calculate the range of page numbers to show
   let startPage: number;
   let endPage: number;
@@ -113,11 +113,17 @@ function Pagination({ currentPage, totalPages }: { currentPage: number; totalPag
 
   const pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);
 
+  let passThroughParams = ''
+  searchParams.forEach((val, key) => {
+    if(key != 'page')
+    passThroughParams += `&${key}=${val}`
+  })
+
   return (
     <nav className="pagination">
       {/* Previous button - always visible, disabled on first page */}
       <a
-        href={`/?page=${currentPage - 1}`}
+        href={`/?page=${currentPage - 1}${passThroughParams}`}
         className={`pagination-link ${currentPage === 1 ? 'disabled' : ''}`}
         style={{
           opacity: currentPage === 1 ? 0.5 : 1,
@@ -132,7 +138,7 @@ function Pagination({ currentPage, totalPages }: { currentPage: number; totalPag
       {pages.map((page) => (
         <a
           key={page}
-          href={`/?page=${page}`}
+          href={`/?page=${page}${passThroughParams}`}
           className={`pagination-link ${page === currentPage ? 'active' : ''}`}
         >
           {page}
@@ -141,7 +147,7 @@ function Pagination({ currentPage, totalPages }: { currentPage: number; totalPag
 
       {/* Next button - always visible, disabled on last page */}
       <a
-        href={`/?page=${currentPage + 1}`}
+        href={`/?page=${currentPage + 1}${passThroughParams}`}
         className={`pagination-link ${currentPage === totalPages ? 'disabled' : ''}`}
         style={{
           opacity: currentPage === totalPages ? 0.5 : 1,