Add multi-tag selection support to tag-picker without client side JS

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>