implemented sort-by,

implemented divider,
fixed class/id in css

src/main/resources/static/main.css

@@ -87,7 +87,7 @@ header {
     gap: .5em;
 }
 /* Buttons */
-.upvote-btn, .downvote-btn, .search-btn, .filter-btn {
+.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn {
     background: var(--icon-url) no-repeat;
     background-size: contain;
     border: none;
@@ -108,19 +108,29 @@ header {
     transform: rotate(180deg);
 }
 
-.search-btn {
+#search-btn {
     --icon-url: url(looking-glass.svg);
     --icon-size: 1rem;
 }
-.filter-btn{
+#filter-btn {
     --icon-url: url(filter.svg);
     --icon-size: 1rem;
 }
 
-:is(.upvote-btn, .downvote-btn, .search-btn, .filter-btn):is(:hover, :focus-visible) {
+#sort-btn {
+    --icon-url: url(sort.svg);
+    --icon-size: 1rem;
+}
+
+.divider {
+    width: .05rem;
+    background-color: #222;
+}
+
+:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn):is(:hover, :focus-visible) {
     filter: brightness(1.5);
 }
 
-:is(.upvote-btn, .downvote-btn, .search-btn, .filter-btn):active {
+:is(.upvote-btn, .downvote-btn, #search-btn, #filter-btn, #sort-btn):active {
     filter: brightness(1.75);
 }

src/main/resources/static/sort.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="1.2in" height="1.05333in"
+     viewBox="0 0 360 316">
+  <path id="Selection"
+        fill="#222" stroke="#222" stroke-width="1"
+        d="M 64.00,85.00
+           C 64.00,85.00 43.62,121.00 43.62,121.00
+             40.24,127.21 33.18,140.58 27.99,144.58
+             16.02,153.82 -0.96,144.07 0.10,129.00
+             0.58,122.10 5.78,114.81 9.25,109.00
+             9.25,109.00 17.50,94.00 17.50,94.00
+             17.50,94.00 27.91,76.00 27.91,76.00
+             27.91,76.00 34.83,65.00 34.83,65.00
+             34.83,65.00 62.26,17.00 62.26,17.00
+             67.57,7.75 71.45,-0.78 84.00,0.10
+             94.23,0.81 97.72,8.22 102.17,16.00
+             102.17,16.00 108.62,27.00 108.62,27.00
+             108.62,27.00 125.76,57.00 125.76,57.00
+             125.76,57.00 130.48,64.00 130.48,64.00
+             130.48,64.00 150.17,99.00 150.17,99.00
+             155.14,107.71 165.61,121.95 164.90,132.00
+             164.00,144.90 148.83,152.55 138.00,145.30
+             131.19,140.74 124.40,125.60 119.70,118.00
+             119.70,118.00 100.00,84.00 100.00,84.00
+             100.00,84.00 100.00,263.00 100.00,263.00
+             100.00,263.00 100.00,289.00 100.00,289.00
+             100.00,293.06 100.34,300.37 99.20,304.00
+             96.71,311.96 89.10,316.47 81.00,315.90
+             68.82,315.05 65.02,305.63 65.00,295.00
+             65.00,295.00 65.00,152.00 65.00,152.00
+             65.00,152.00 65.00,108.00 65.00,108.00
+             65.00,101.39 65.72,91.06 64.00,85.00 Z
+           M 260.00,232.00
+           C 260.00,232.00 260.00,53.00 260.00,53.00
+             260.00,53.00 260.00,27.00 260.00,27.00
+             260.00,22.94 259.66,15.63 260.80,12.00
+             263.29,4.04 270.90,-0.47 279.00,0.10
+             291.18,0.95 294.98,10.37 295.00,21.00
+             295.00,21.00 295.00,164.00 295.00,164.00
+             295.00,164.00 295.00,208.00 295.00,208.00
+             295.00,214.61 294.28,224.94 296.00,231.00
+             296.00,231.00 316.38,195.00 316.38,195.00
+             319.76,188.79 326.82,175.42 332.01,171.42
+             343.98,162.18 360.96,171.93 359.90,187.00
+             359.42,193.90 354.22,201.19 350.75,207.00
+             350.75,207.00 342.50,222.00 342.50,222.00
+             342.50,222.00 332.09,240.00 332.09,240.00
+             332.09,240.00 325.17,251.00 325.17,251.00
+             325.17,251.00 297.74,299.00 297.74,299.00
+             292.43,308.25 288.55,316.78 276.00,315.90
+             265.77,315.19 262.28,307.78 257.83,300.00
+             257.83,300.00 251.38,289.00 251.38,289.00
+             251.38,289.00 234.24,259.00 234.24,259.00
+             234.24,259.00 229.52,252.00 229.52,252.00
+             229.52,252.00 209.83,217.00 209.83,217.00
+             204.86,208.29 194.39,194.05 195.10,184.00
+             196.00,171.10 211.17,163.45 222.00,170.70
+             228.81,175.26 235.60,190.40 240.30,198.00
+             240.30,198.00 260.00,232.00 260.00,232.00 Z" />
+</svg>

src/main/resources/templates/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DataDash</title>
-    <link rel="stylesheet" href="main.css">
+    <link rel="stylesheet" href="../static/main.css">
 </head>
 <body>
     <svg  id="add-btn" width="100" height="100">
@@ -18,17 +18,22 @@
         </header>
 
         <section id="tool-bar">
-                <select class="filter-btn">Filter
+            <select id="sort-btn">Sort by
-                    <optgroup label="Standard categories">
+                <option>Option 1</option>
-                        <option>Option 1</option>
+                <option>Option 2</option>
-                        <option>Option 2</option>
+            </select>
-                    </optgroup>
+            <div class="divider"></div>
-                    <optgroup label="User categories">
+            <select id="filter-btn">Filter
-                        <option>user category</option>
+                <optgroup label="Standard categories">
-                    </optgroup>
+                    <option>Option 1</option>
-                </select>
+                    <option>Option 2</option>
-                <input type="search" name="query" id="search-entry" placeholder="Search">
+                </optgroup>
-                <button class="search-btn">Search</button>
+                <optgroup label="User categories">
+                    <option>user category</option>
+                </optgroup>
+            </select>
+            <input type="search" name="query" id="search-entry" placeholder="Search">
+            <button id="search-btn">Search</button>
         </section>
 
         <section id="recents">