add: search bar

Add new header and search bar

app/pages/index.vue

@@ -1,51 +1,59 @@
 <template>
-  <ClientOnly>
-    <PpDeleteDialog
-      ref="deleteModal"
-      :current-card-index="currentCardIndex"
-      @delete="removeCard(currentCardIndex)"
-    />
-    <PpPriceCardDialog
-      ref="modal"
-      :current-card="currentCard"
-      :current-card-index="currentCardIndex"
-      @update="updateCard()"
-    />
-    <section class="content flex-col">
-      <aside class="filter-bar">
-        <PpButtonGroup
-          :buttons="filterButtons"
-          @click="sort"
+  <div>
+    <ClientOnly>
+      <PpDeleteDialog
+        ref="deleteModal"
+        :current-card-index="currentCardIndex"
+        @delete="removeCard(currentCardIndex)"
+      />
+      <PpPriceCardDialog
+          ref="modal"
+          :current-card="currentCard"
+          :current-card-index="currentCardIndex"
+          @update="updateCard()"
+      />
+      <div class="search-bar">
+        <PpFormSearch
+          v-model="search"
+          label="Suche nach Klopapier!"
+          id="search_field"
         />
-      </aside>
-      <div class="flex-col" role="list">
-          <PpPriceCard
-            ref="priceCard"
-            v-for="(card, index) in cards"
-            :key="card.uuid"
-            :deletable="cards.length > 1"
-            :card="card"
-            @update="openModal(false, index)"
-            @remove="openDeleteModal()"
-          />
       </div>
-    </section>
-    <PpToolbar>
-      <PpButton class="mini-button text-white transparent" @click="sort(currentSort)">
-        <Icon class="icon" name="uil:refresh" mode="svg" />
-        <span>Neu sortieren</span>
-        <span
-          class="dot"
-          :class="{ visible : isDirty}"
-          aria-hidden="true"
-        />
-      </PpButton>
-      <PpButton class="mini-button text-white transparent" @click="openModal(true, -1)">
-        <Icon class="icon" name="uil:plus" mode="svg" />
-        <span>Hinzufügen</span>
-      </PpButton>
-    </PpToolbar>
-  </ClientOnly>
+      <section class="content flex-col">
+        <aside class="filter-bar">
+          <button v-for="(button, index) in filterButtons" @click="() => sort(index)" :class="{ 'active': button.active }">
+            {{ button.label }}
+          </button>
+        </aside>
+        <div class="flex-col" role="list">
+          <PpPriceCard
+              ref="priceCard"
+              v-for="(card, index) in cards"
+              :key="card.uuid"
+              :deletable="cards.length > 1"
+              :card="card"
+              @update="openModal(false, index)"
+              @remove="openDeleteModal()"
+          />
+        </div>
+      </section>
+      <PpToolbar>
+        <PpButton class="mini-button text-white transparent" @click="sort(currentSort)">
+          <Icon class="icon" name="uil:refresh" mode="svg" />
+          <span>Neu sortieren</span>
+          <span
+              class="dot"
+              :class="{ visible : isDirty}"
+              aria-hidden="true"
+          />
+        </PpButton>
+        <PpButton class="mini-button text-white transparent" @click="openModal(true, -1)">
+          <Icon class="icon" name="uil:plus" mode="svg" />
+          <span>Hinzufügen</span>
+        </PpButton>
+      </PpToolbar>
+    </ClientOnly>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -62,6 +70,8 @@ const modal = useTemplateRef<typeof PpPriceCardDialog>('modal')
 const deleteModal = useTemplateRef<typeof PpDeleteDialog>('deleteModal')
 const priceCards = useTemplateRef<(typeof PpPriceCard)[]>('priceCard')
 
+const search = ref('')
+
 const createCard = (uuid : string) : Card => ({
   uuid,
   name: '',