added some filter stuff

web/router.go

@@ -3,6 +3,7 @@ package web
 import (
 	"html/template"
 	"net/http"
+	"strconv"
 
 	"bytes"
 	"context"
@@ -87,8 +88,12 @@ func getDashboard(w http.ResponseWriter, req *http.Request) {
 }
 
 func getTransactionsPage(w http.ResponseWriter, req *http.Request) {
-    component := transactions_page(1);
+    accounts := make([]string, 10);
+    for i := 0; i < 10; i++ {
+        accounts[i] = strconv.Itoa(i) + " Account";
+    }
 
+    component := transactions_page(1, &accounts);
     _, ok := req.Header["Hx-Request"]
     if ok {
         err := component.Render(context.Background(), w);

web/sass/utility-classes.scss

@@ -190,6 +190,21 @@ table.table-striped {
     background-color: var(--#{$prefix}-overlay2);
     color: var(--#{$prefix}-bg);
     border-radius: 0px 0px $border-radius $border-radius;
-    transition: all 0.2s linear;
+    border-style: solid;
-    overflow: hidden;
+    border-color: var(--#{$prefix}-overlay2);
+    border-width: thin;
+    transition: max-height 0.2s linear;
 }
+
+.popup-menu select {
+    font-size: 1em;
+    border: none;
+    border-radius: $border-radius;
+}
+.popup-menu input {
+    width: 5em;
+    font-size: 1em;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+

web/static/dropdowns.js

@@ -23,39 +23,31 @@ function update_position(button, dropdown_div) {
 function setup_dropdown(button) {
     const dropdown_div = document.querySelector("#" + button.dataset.dropdownTarget);
     update_position(button, dropdown_div);
+    dropdown_div.style.display = "none";
+    dropdown_div.style.maxHeight = "0px";
     return function () {
         if (dropdown_div.style.display == "none") {
-
-            dropdown_div.style.removeProperty("display");
-            if (button.dataset.dropdownMotion == "expand-down") {
-                dropdown_div.style.display = "block";
-                dropdown_div.style.maxHeight = "0px";
-
-                button.style.borderBottomLeftRadius = "0px";
-                button.style.borderBottomRightRadius = "0px";
-            } 
-
             update_position(button, dropdown_div);
+            button.style.borderBottomLeftRadius = "0px";
+            button.style.borderBottomRightRadius = "0px";
+
+            dropdown_div.style.overflow = "hidden";
+            dropdown_div.style.display = "block";
+            dropdown_div.style.maxHeight = "0px";
+
 
             setTimeout(function () {
-                if (button.dataset.dropdownMotion == "expand-down") {
+                dropdown_div.style.maxHeight = "150px";
-                    dropdown_div.style.maxHeight = "100px";
+                dropdown_div.style.removeProperty("overflow");
-                } else {
+            }, 200);
-                    dropdown_div.style.opacity = 1;
-                }
-            }, 110);
         } else {
-            if (button.dataset.dropdownMotion == "expand-down") {
+            dropdown_div.style.overflow = "hidden";
-                dropdown_div.style.maxHeight = "0px";
+            dropdown_div.style.maxHeight = "0px";
-            } else {
-                dropdown_div.style.opacity = 0;
-            }
             setTimeout(function () {
-                if (button.dataset.dropdownMotion == "expand-down") {
+                button.style.removeProperty("border-bottom-left-radius");
-                    button.style.removeProperty("border-bottom-left-radius");
+                button.style.removeProperty("border-bottom-right-radius");
-                    button.style.removeProperty("border-bottom-right-radius");
-                }
                 dropdown_div.style.display = "none";
+                dropdown_div.style.removeProperty("overflow");
             }, 200);
         }
     };

web/templates/index.html

@@ -60,7 +60,6 @@
         </div>
     </div>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js" integrity="sha512-CQBWl4fJHWbryGE+Pc7UAxWMUMNMWzWxF4SQo9CgkJIN1kx6djDQZjh3Y8SZ1d+6I+1zze6Z7kHXO7q3UyZAWw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <script type="module" src="/static/index.js"></script>
         <script type="module">
             import {trigger_reset_handlers, trigger_table_animation} from "/static/index.js";
             feather.replace();

web/transactions.templ

@@ -1,6 +1,6 @@
 package web
 
-templ transactions_page(userID int) {
+templ transactions_page(userID int, accounts *[]string) {
     <title>Transactions</title>
     <div class="d-flex-col mx-4 h-100">
         <div class="c-crust row cr-all p-5" style="height: fit-content">
@@ -14,8 +14,36 @@ templ transactions_page(userID int) {
                 <i class="" data-feather="filter"></i>
                 <span class="ms-3 my-auto">Add Filter</span>
             </button>
-            <div class="popup-menu" id="filter-popup" role="tooltip" style="display: none; max-height: 0px;">
+            <div class="popup-menu" id="filter-popup" role="tooltip" style="display:none;">
-                <p>Hey there</p>
+                <div class="d-flex p-3">
+                    <select>
+                        <option>Account</option>
+                        <option>Amount</option>
+                        <option>Date</option>
+                        <option>Desc. Contains</option>
+                        <option>ID</option>
+                    </select>
+                    <div id="filter-two-inputs" style="display: none;">
+                        <input type="text"></input>
+                        <select>
+                            <option>></option>
+                            <option>=</option>
+                            <option>{"<"}</option>
+                        </select>
+                        <input type="text"></input>
+                    </div>
+                    <div id="filter-accounts">
+                        <select class="ms-3">
+                            <option>=</option>
+                        </select>
+                        <select>
+                        for _, value := range *accounts {
+                            <option>{value}</option>
+                        }
+                        </select>
+                    </div>
+                </div>
+
             </div>
 
             <button class="ms-5 borderless-btn">