improved toolbar,

implemented filter

src/main/resources/static/filter.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="1.29333in" height="1.31in"
+     viewBox="0 0 388 393">
+  <path id="Selection"
+        fill="#222" stroke="#222" stroke-width="1"
+        d="M 13.00,0.53
+           C 13.00,0.53 46.00,0.00 46.00,0.00
+             46.00,0.00 109.00,0.00 109.00,0.00
+             109.00,0.00 303.00,0.00 303.00,0.00
+             303.00,0.00 367.00,0.00 367.00,0.00
+             379.06,0.02 388.86,5.38 387.90,19.00
+             387.38,26.49 382.97,30.02 378.00,35.00
+             378.00,35.00 360.00,53.00 360.00,53.00
+             360.00,53.00 277.00,136.00 277.00,136.00
+             277.00,136.00 257.00,156.00 257.00,156.00
+             249.62,163.38 246.02,164.34 246.00,175.00
+             246.00,175.00 246.00,317.00 246.00,317.00
+             246.00,317.00 246.00,370.00 246.00,370.00
+             245.98,381.68 241.23,394.14 227.00,392.66
+             217.40,391.67 208.57,380.57 202.00,374.00
+             202.00,374.00 164.00,336.00 164.00,336.00
+             152.71,324.71 145.03,320.93 145.00,304.00
+             145.00,304.00 145.00,177.00 145.00,177.00
+             144.99,174.35 145.19,171.43 143.98,169.00
+             142.58,166.21 137.39,161.39 135.00,159.00
+             135.00,159.00 118.00,142.00 118.00,142.00
+             118.00,142.00 35.00,59.00 35.00,59.00
+             35.00,59.00 13.00,37.04 13.00,37.04
+             9.44,33.64 4.50,30.22 2.09,26.00
+             -3.75,15.77 2.41,3.93 13.00,0.53 Z
+           M 328.00,35.00
+           C 328.00,35.00 61.00,35.00 61.00,35.00
+             65.72,41.59 84.13,59.13 91.00,66.00
+             91.00,66.00 149.00,124.00 149.00,124.00
+             149.00,124.00 167.00,142.00 167.00,142.00
+             170.31,145.31 175.43,149.89 177.43,154.00
+             179.72,158.68 179.99,163.91 180.00,169.00
+             180.00,169.00 180.00,295.00 180.00,295.00
+             180.00,297.09 179.88,300.06 180.60,302.00
+             182.02,305.85 190.74,313.74 194.00,317.00
+             199.15,322.15 205.21,328.85 211.00,333.00
+             211.00,333.00 211.00,166.00 211.00,166.00
+             211.01,160.84 211.17,156.76 213.56,152.00
+             215.57,147.97 219.79,144.21 223.00,141.00
+             223.00,141.00 241.00,123.00 241.00,123.00
+             241.00,123.00 298.00,66.00 298.00,66.00
+             304.87,59.13 323.28,41.59 328.00,35.00 Z" />
+</svg>

src/main/resources/static/main.css

@@ -30,12 +30,9 @@ header {
     display: flex;
     flex-direction: row;
     float: right;
-}
+    gap: .5rem;
-
-#search-bar {
     background-color: var(--fg-color, darkgrey);
     padding: .5rem 1rem;
-    width: 100%;
     border-radius: 1.5rem;
 }
 
@@ -44,6 +41,9 @@ header {
     border: none;
     color: var(--text-color);
 }
+#search-entry:focus-visible {
+    outline: none;
+}
 
 .datasets {
     padding-inline: var(--pad-datasets);
@@ -78,7 +78,7 @@ header {
     gap: .5em;
 }
 /* Buttons */
-.upvote-btn, .downvote-btn, .search-btn {
+.upvote-btn, .downvote-btn, .search-btn, .filter-btn {
     background: var(--icon-url) no-repeat;
     background-size: contain;
     border: none;
@@ -103,11 +103,15 @@ header {
     --icon-url: url(looking-glass.svg);
     --icon-size: 1rem;
 }
+.filter-btn{
+    --icon-url: url(filter.svg);
+    --icon-size: 1rem;
+}
 
-:is(.upvote-btn, .downvote-btn, .search-btn):is(:hover, :focus-visible) {
+:is(.upvote-btn, .downvote-btn, .search-btn, .filter-btn):is(:hover, :focus-visible) {
     filter: brightness(1.5);
 }
 
-:is(.upvote-btn, .downvote-btn, .search-btn):active {
+:is(.upvote-btn, .downvote-btn, .search-btn, .filter-btn):active {
     filter: brightness(1.75);
 }

src/main/resources/templates/index.html

@@ -14,10 +14,17 @@
         </header>
 
         <section id="tool-bar">
-            <div id="search-bar">
+                <select class="filter-btn">Filter
+                    <optgroup label="Standard categories">
+                        <option>Option 1</option>
+                        <option>Option 2</option>
+                    </optgroup>
+                    <optgroup label="User categories">
+                        <option>user category</option>
+                    </optgroup>
+                </select>
                 <input type="search" name="query" id="search-entry" placeholder="Search">
                 <button class="search-btn">Search</button>
-            </div>
         </section>
 
         <section id="recents">