add: (wip) new filtering layout

DropDown component, ToggleButton component,

app/components/Pp/Form/DropDown.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="DropDown"
+    :class="{ active }"
+    ref="dropdown"
+  >
+    <button @click="active = !active">
+      <span>{{ current.label }}</span>
+      <Icon class="icon" name="uil:angle-down" mode="svg" />
+    </button>
+    <ul>
+      <li
+        v-for="element in elements"
+        @click="click(element)"
+        :class="{ selected : element.value === current.value }"
+      >
+        {{ element.label }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { DropDownElement } from '../../../../shared/DropDown'
+
+type Props = {
+  elements : DropDownElement[]
+  current : DropDownElement
+}
+
+const { elements = [] } = defineProps<Props>()
+const emit = defineEmits(['click'])
+
+const active = ref(false)
+const dropdown = useTemplateRef<HTMLDivElement>('dropdown')
+
+const click = (element : DropDownElement) => {
+  emit('click', element)
+  active.value = false
+}
+
+onMounted(() => {
+  onClickOutside(dropdown, () => active.value = false)
+})
+</script>

app/components/Pp/Form/ToggleButton.vue

@@ -0,0 +1,21 @@
+<template>
+  <button class="ToggleButton" @click="click">
+    <Icon class="icon" :name="icons[current]!" mode="svg" />
+  </button>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  icons : string[]
+  current: number
+}
+
+defineProps<Props>()
+const emit = defineEmits(['click'])
+
+const click = () => emit('click')
+</script>
+
+<style scoped>
+
+</style>