add: (wip) new filtering layout

DropDown component, ToggleButton component,

app/assets/styles/form/dropdown.css

@@ -0,0 +1,64 @@
+.DropDown {
+    --border-color: var(--color-light);
+    --label-color: var(--color-darkest);
+    --background-color: var(--color-lightest);
+    --arrow-color: var(--color-main-dark);
+
+    position: relative;
+
+    &.active {
+        --background-color: var(--color-main-dark);
+        --label-color: var(--color-lightest);
+        --arrow-color: var(--color-lightest);
+        --border-color: var(--color-main-dark);
+
+        & ul {
+            scale: 1 1;
+        }
+    }
+
+    & button {
+        all: unset;
+        cursor: pointer;
+        color: var(--label-color);
+        border: 1px solid var(--border-color);
+        border-radius: var(--radius-default);
+        background: var(--background-color);
+        padding: .5rem 1rem;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: .5rem;
+        transition: var(--transition-default);
+        width: 70px;
+
+        & .icon {
+            color: var(--arrow-color);
+        }
+    }
+
+    & ul {
+        position: absolute;
+        list-style: none;
+        transform-origin: top;
+        scale: 1 0;
+        transition: var(--transition-default);
+        color: var(--color-darkest);
+        border: 1px solid var(--color-main-dark);
+        border-radius: var(--radius-default);
+        background: var(--color-lightest);
+        box-shadow: var(--box-shadow-z2);
+        width: 100%;
+        z-index: 2000;
+        top: 0;
+
+        & li {
+            padding: .5rem 1rem;
+
+            &.selected {
+                background: var(--color-main-dark);
+                color: var(--color-lightest);
+            }
+        }
+    }
+}

app/assets/styles/form/togglebutton.css

@@ -0,0 +1,14 @@
+.ToggleButton {
+    all: unset;
+    color: var(--color-lightest);
+    background: var(--color-main-dark);
+    padding: .5rem .8rem;
+    border-radius: var(--radius-default);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & .icon {
+        font-size: 1.2rem;
+    }
+}

app/assets/styles/page.css

@@ -16,24 +16,9 @@
 .filter-bar {
     background: var(--color-lightest);
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-end;
+    gap: 1rem;
     padding: var(--padding-default);
-
-    & > button {
-        all: unset;
-        cursor: pointer;
-        color: var(--color-main-darkest);
-        font-weight: bolder;
-        font-family: 'Roboto', sans-serif;
-
-        &.active {
-            color: var(--color-main-darkest);
-        }
-
-        &:not(.active) {
-            opacity: .5;
-        }
-    }
 }
 
 .search-bar {

app/assets/styles/priceCard.css

@@ -2,7 +2,7 @@
     position: relative;
     width: 100%;
     color: var(--color-darkest);
-    border-bottom: 1px solid var(--color-light);
+    border-bottom: 1px dashed var(--color-light);
 
     .bottom {
         position: absolute;