From bf22f948ca48bc922be1a17e99703b9d6f755659 Mon Sep 17 00:00:00 2001
From: swotex <swotex21@gmail.com>
Date: Sat, 15 Feb 2025 07:28:40 +0100
Subject: [PATCH 01/17] Start rework search page

---
 frontend/src/views/SearchUsersView.vue | 220 +++++++++++++++++++------
 1 file changed, 172 insertions(+), 48 deletions(-)

diff --git a/frontend/src/views/SearchUsersView.vue b/frontend/src/views/SearchUsersView.vue
index 082e2b11..ea704d71 100644
--- a/frontend/src/views/SearchUsersView.vue
+++ b/frontend/src/views/SearchUsersView.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import UserSearchCard from '@/components/UserSearchCard.vue'
 import { Api } from '@/utils/api'
-import { ref, watch } from 'vue'
+import {onBeforeMount, ref, watch} from 'vue'
+import DoubleSlide from "@/components/DoubleSlide.vue";
 
 const search = ref('')
 const users = ref([])
+const seachCretiria = ref([])
 
 const input = () => {
   if (search.value.length >= 2) {
@@ -16,56 +18,178 @@ const input = () => {
     users.value = []
   }
 }
+
+onBeforeMount(() => {
+  seachCretiria.value.age = {t1: 18, t2: 80}
+  seachCretiria.value.fame = {t1: 0, t2: 99}
+})
+
+function testSearch(){
+  console.log(seachCretiria.value)
+}
 </script>
 
 <template>
-  <div class="max-w-3xl h-full m-auto pt-8">
-    <label class="input input-bordered flex items-center gap-2">
-      <input
-        @input="input"
-        v-model="search"
-        type="text"
-        class="grow"
-        placeholder="Search a user"
-      />
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        class="h-4 w-4 opacity-70"
-      >
-        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-        <g
-          id="SVGRepo_tracerCarrier"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        ></g>
-        <g id="SVGRepo_iconCarrier">
-          <path
-            d="M18.5 18.5L22 22"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-          ></path>
-          <path
-            d="M6.75 3.27093C8.14732 2.46262 9.76964 2 11.5 2C16.7467 2 21 6.25329 21 11.5C21 16.7467 16.7467 21 11.5 21C6.25329 21 2 16.7467 2 11.5C2 9.76964 2.46262 8.14732 3.27093 6.75"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-          ></path>
-        </g>
-      </svg>
-    </label>
-    <div
-      class="p-6 flex flex-col gap-5 border-2 rounded-box border-neutral-content mt-2"
-      v-if="users.length"
-    >
-      <UserSearchCard
-        v-for="user in users"
-        :key="user"
-        :username="user.username"
-        :avatar="user.avatar"
-      />
+  <div class="flex flex-col gap-10">
+    <div class="flex">
+      <div class="dropdown">
+        <div tabindex="0" role="button" class="btn m-1">
+          <div>Location</div>
+          <div>click</div>
+        </div>
+        <div
+          tabindex="0"
+          class="dropdown-content card card-compact bg-primary text-primary-content z-[1] w-64 p-2 shadow"
+        >
+          <div class="card-body">
+            <h3 class="card-title">Card title!</h3>
+            <p>you can use any element as a dropdown.</p>
+          </div>
+        </div>
+      </div>
+
+      <div class="divider divider-horizontal mx-0 py-3"></div>
+
+      <div class="dropdown">
+        <div tabindex="0" role="button" class="btn m-1">
+          <div>Age gap</div>
+          <div>{{seachCretiria.age.t1}} - {{seachCretiria.age.t2}}</div>
+        </div>
+        <div
+          tabindex="0"
+          class="dropdown-content card card-compact bg-primary text-primary-content z-[1] w-64 p-2 shadow"
+        >
+          <div class="card-body">
+            <h3 class="card-title">Set age gap</h3>
+              <DoubleSlide
+                class="mt-3"
+                tooltip
+                v-model="seachCretiria.age"
+                :min="18"
+                :max="80"
+                :start="seachCretiria.age.t1"
+                :end="seachCretiria.age.t2"
+              />
+          </div>
+        </div>
+      </div>
+
+      <div class="divider divider-horizontal mx-0 py-3"></div>
+
+      <div class="dropdown">
+        <div tabindex="0" role="button" class="btn m-1">
+          <div>Fame gap</div>
+          <div>{{seachCretiria.fame.t1}} - {{seachCretiria.fame.t2}}</div>
+        </div>
+        <div
+          tabindex="0"
+          class="dropdown-content card card-compact bg-primary text-primary-content z-[1] w-64 p-2 shadow"
+        >
+          <div class="card-body">
+            <h3 class="card-title">Set fame rating gap</h3>
+            <DoubleSlide
+              class="mt-3"
+              tooltip
+              v-model="seachCretiria.fame"
+              :min="0"
+              :max="99"
+              :start="seachCretiria.fame.t1"
+              :end="seachCretiria.fame.t2"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="divider divider-horizontal mx-0 py-3"></div>
+
+      <div class="dropdown">
+        <div tabindex="0" role="button" class="btn m-1">
+          <div>Tags</div>
+          <div>20 Selected</div>
+        </div>
+        <div
+          tabindex="0"
+          class="dropdown-content card card-compact bg-primary text-primary-content z-[1] w-64 p-2 shadow"
+        >
+          <div class="card-body">
+            <h3 class="card-title">Card title!</h3>
+            <p>you can use any element as a dropdown.</p>
+          </div>
+        </div>
+      </div>
+
+      <button class="btn" @click="testSearch">Search</button>
+    </div>
+
+    <div>
+      <div class="flex justify-between w-full py-2 bg-base-300/60">
+        <div></div>
+        <div>
+
+          <div class="mr-3">
+            <svg class="size-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+              <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+              <g id="SVGRepo_iconCarrier">
+                <path d="M20.058 9.72255C21.0065 9.18858 21.4808 8.9216 21.7404 8.49142C22 8.06124 22 7.54232 22 6.50448V5.81466C22 4.48782 22 3.8244 21.5607 3.4122C21.1213 3 20.4142 3 19 3H5C3.58579 3 2.87868 3 2.43934 3.4122C2 3.8244 2 4.48782 2 5.81466V6.50448C2 7.54232 2 8.06124 2.2596 8.49142C2.5192 8.9216 2.99347 9.18858 3.94202 9.72255L6.85504 11.3624C7.49146 11.7206 7.80967 11.8998 8.03751 12.0976C8.51199 12.5095 8.80408 12.9935 8.93644 13.5872C9 13.8722 9 14.2058 9 14.8729L9 17.5424C9 18.452 9 18.9067 9.25192 19.2613C9.50385 19.6158 9.95128 19.7907 10.8462 20.1406C12.7248 20.875 13.6641 21.2422 14.3321 20.8244C15 20.4066 15 19.4519 15 17.5424V14.8729C15 14.2058 15 13.8722 15.0636 13.5872C15.1959 12.9935 15.488 12.5095 15.9625 12.0976" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+              </g>
+            </svg>
+          </div>
+
+        </div>
+      </div>
+      <div>content</div>
     </div>
   </div>
+
+  <!-- ##### Old Code ##### -->
+  <!--  <div class="max-w-3xl h-full m-auto pt-8">-->
+  <!--    <label class="input input-bordered flex items-center gap-2">-->
+  <!--      <input-->
+  <!--        @input="input"-->
+  <!--        v-model="search"-->
+  <!--        type="text"-->
+  <!--        class="grow"-->
+  <!--        placeholder="Search a user"-->
+  <!--      />-->
+  <!--      <svg-->
+  <!--        xmlns="http://www.w3.org/2000/svg"-->
+  <!--        viewBox="0 0 24 24"-->
+  <!--        fill="none"-->
+  <!--        class="h-4 w-4 opacity-70"-->
+  <!--      >-->
+  <!--        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>-->
+  <!--        <g-->
+  <!--          id="SVGRepo_tracerCarrier"-->
+  <!--          stroke-linecap="round"-->
+  <!--          stroke-linejoin="round"-->
+  <!--        ></g>-->
+  <!--        <g id="SVGRepo_iconCarrier">-->
+  <!--          <path-->
+  <!--            d="M18.5 18.5L22 22"-->
+  <!--            stroke="currentColor"-->
+  <!--            stroke-width="1.5"-->
+  <!--            stroke-linecap="round"-->
+  <!--          ></path>-->
+  <!--          <path-->
+  <!--            d="M6.75 3.27093C8.14732 2.46262 9.76964 2 11.5 2C16.7467 2 21 6.25329 21 11.5C21 16.7467 16.7467 21 11.5 21C6.25329 21 2 16.7467 2 11.5C2 9.76964 2.46262 8.14732 3.27093 6.75"-->
+  <!--            stroke="currentColor"-->
+  <!--            stroke-width="1.5"-->
+  <!--            stroke-linecap="round"-->
+  <!--          ></path>-->
+  <!--        </g>-->
+  <!--      </svg>-->
+  <!--    </label>-->
+  <!--    <div-->
+  <!--      class="p-6 flex flex-col gap-5 border-2 rounded-box border-neutral-content mt-2"-->
+  <!--      v-if="users.length"-->
+  <!--    >-->
+  <!--      <UserSearchCard-->
+  <!--        v-for="user in users"-->
+  <!--        :key="user"-->
+  <!--        :username="user.username"-->
+  <!--        :avatar="user.avatar"-->
+  <!--      />-->
+  <!--    </div>-->
+  <!--  </div>-->
 </template>

From 4e09377a604e4bd3ae23fbb235e314bb2eff5913 Mon Sep 17 00:00:00 2001
From: swotex <swotex21@gmail.com>
Date: Fri, 7 Mar 2025 08:58:55 +0100
Subject: [PATCH 02/17] Add dropdown to filter and sort

---
 frontend/src/views/SearchUsersView.vue | 93 ++++++++++++++++++++------
 1 file changed, 72 insertions(+), 21 deletions(-)

diff --git a/frontend/src/views/SearchUsersView.vue b/frontend/src/views/SearchUsersView.vue
index ea704d71..524f0e71 100644
--- a/frontend/src/views/SearchUsersView.vue
+++ b/frontend/src/views/SearchUsersView.vue
@@ -31,15 +31,15 @@ function testSearch(){
 
 <template>
   <div class="flex flex-col gap-10">
-    <div class="flex">
-      <div class="dropdown">
+    <div class="flex mt-3">
+      <div class="dropdown dropdown-start">
         <div tabindex="0" role="button" class="btn m-1">
           <div>Location</div>
-          <div>click</div>
+          <div>No criteria</div>
         </div>
         <div
           tabindex="0"
-          class="dropdown-content card card-compact bg-primary text-primary-content z-[1] w-64 p-2 shadow"
+          class="dropdown-content card card-compact bg-base-100 text-primary-content z-[1] w-64 p-2 shadow"
         >
           <div class="card-body">
             <h3 class="card-title">Card title!</h3>
@@ -57,7 +57,7 @@ function testSearch(){
         </div>
         <div
           tabindex="0"
-          class="dropdown-content card card-compact bg-primary text-primary-content z-[1] w-64 p-2 shadow"
+          class="dropdown-content card card-compact bg-base-100 text-primary-content z-[1] w-64 p-2 shadow"
         >
           <div class="card-body">
             <h3 class="card-title">Set age gap</h3>
@@ -83,7 +83,7 @@ function testSearch(){
         </div>
         <div
           tabindex="0"
-          class="dropdown-content card card-compact bg-primary text-primary-content z-[1] w-64 p-2 shadow"
+          class="dropdown-content card card-compact bg-base-100 text-primary-content z-[1] w-64 p-2 shadow"
         >
           <div class="card-body">
             <h3 class="card-title">Set fame rating gap</h3>
@@ -102,14 +102,14 @@ function testSearch(){
 
       <div class="divider divider-horizontal mx-0 py-3"></div>
 
-      <div class="dropdown">
+      <div class="dropdown dropdown-end">
         <div tabindex="0" role="button" class="btn m-1">
           <div>Tags</div>
-          <div>20 Selected</div>
+          <div>All</div> <!-- Or x selected -->
         </div>
         <div
           tabindex="0"
-          class="dropdown-content card card-compact bg-primary text-primary-content z-[1] w-64 p-2 shadow"
+          class="dropdown-content card card-compact bg-base-100 text-primary-content z-[1] w-64 p-2 shadow"
         >
           <div class="card-body">
             <h3 class="card-title">Card title!</h3>
@@ -123,22 +123,73 @@ function testSearch(){
 
     <div>
       <div class="flex justify-between w-full py-2 bg-base-300/60">
-        <div></div>
-        <div>
-
-          <div class="mr-3">
-            <svg class="size-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-              <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
-              <g id="SVGRepo_iconCarrier">
-                <path d="M20.058 9.72255C21.0065 9.18858 21.4808 8.9216 21.7404 8.49142C22 8.06124 22 7.54232 22 6.50448V5.81466C22 4.48782 22 3.8244 21.5607 3.4122C21.1213 3 20.4142 3 19 3H5C3.58579 3 2.87868 3 2.43934 3.4122C2 3.8244 2 4.48782 2 5.81466V6.50448C2 7.54232 2 8.06124 2.2596 8.49142C2.5192 8.9216 2.99347 9.18858 3.94202 9.72255L6.85504 11.3624C7.49146 11.7206 7.80967 11.8998 8.03751 12.0976C8.51199 12.5095 8.80408 12.9935 8.93644 13.5872C9 13.8722 9 14.2058 9 14.8729L9 17.5424C9 18.452 9 18.9067 9.25192 19.2613C9.50385 19.6158 9.95128 19.7907 10.8462 20.1406C12.7248 20.875 13.6641 21.2422 14.3321 20.8244C15 20.4066 15 19.4519 15 17.5424V14.8729C15 14.2058 15 13.8722 15.0636 13.5872C15.1959 12.9935 15.488 12.5095 15.9625 12.0976" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
-              </g>
-            </svg>
+        <div class="flex items-center">
+
+
+          <div class="dropdown dropdown-start ml-3">
+            <div tabindex="0" role="button" class="size-8">
+              <svg class="w-full" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                <g id="SVGRepo_iconCarrier">
+                  <path d="M4 16L13 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+                  <path d="M6 11H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+                  <path d="M8 6L13 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+                  <path d="M17 4L17 20L20 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                </g>
+              </svg>
+            </div>
+            <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
+              <li class="w-full flex items-center text-base">Sort by</li>
+              <div class="divider my-0"></div>
+              <li>
+                <div class="form-control">
+                  <label class="label cursor-pointer">
+                    <input type="checkbox" class="checkbox" />
+                    <span class="label-text ml-2">Age</span>
+                  </label>
+                </div>
+              </li>
+              <li>
+                <div class="flex flex-col">
+                  <span>Age gap</span>
+                  <double-slide />
+                </div>
+              </li>
+              <li>
+                <button class="btn"> <!-- Useless ? -->
+                  Apply
+                </button>
+              </li>
+            </ul>
+          </div>
+
+
+
+        </div>
+        <div class="flex items-center">
+
+          <div class="dropdown dropdown-end mr-3">
+            <div tabindex="0" role="button" class="size-8">
+              <svg class="w-full" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                <g id="SVGRepo_iconCarrier">
+                  <path d="M20.058 9.72255C21.0065 9.18858 21.4808 8.9216 21.7404 8.49142C22 8.06124 22 7.54232 22 6.50448V5.81466C22 4.48782 22 3.8244 21.5607 3.4122C21.1213 3 20.4142 3 19 3H5C3.58579 3 2.87868 3 2.43934 3.4122C2 3.8244 2 4.48782 2 5.81466V6.50448C2 7.54232 2 8.06124 2.2596 8.49142C2.5192 8.9216 2.99347 9.18858 3.94202 9.72255L6.85504 11.3624C7.49146 11.7206 7.80967 11.8998 8.03751 12.0976C8.51199 12.5095 8.80408 12.9935 8.93644 13.5872C9 13.8722 9 14.2058 9 14.8729L9 17.5424C9 18.452 9 18.9067 9.25192 19.2613C9.50385 19.6158 9.95128 19.7907 10.8462 20.1406C12.7248 20.875 13.6641 21.2422 14.3321 20.8244C15 20.4066 15 19.4519 15 17.5424V14.8729C15 14.2058 15 13.8722 15.0636 13.5872C15.1959 12.9935 15.488 12.5095 15.9625 12.0976" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+                </g>
+              </svg>
+            </div>
+            <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
+              <li class="w-full flex items-center text-base">Filter by</li>
+              <div class="divider my-0"></div>
+              <li><a>Item 1</a></li>
+              <li><a>Item 2</a></li>
+            </ul>
           </div>
 
         </div>
       </div>
-      <div>content</div>
+      <div class="pt-3 px-3">content</div>
     </div>
   </div>
 

From f1fd2d205a613652f26a868e03750d0ddd2a8b55 Mon Sep 17 00:00:00 2001
From: swotex <swotex21@gmail.com>
Date: Sat, 8 Mar 2025 05:38:06 +0100
Subject: [PATCH 03/17] rework button search

---
 frontend/src/views/SearchUsersView.vue | 77 ++++++++++++++++++++------
 1 file changed, 60 insertions(+), 17 deletions(-)

diff --git a/frontend/src/views/SearchUsersView.vue b/frontend/src/views/SearchUsersView.vue
index 524f0e71..d4a3bc5e 100644
--- a/frontend/src/views/SearchUsersView.vue
+++ b/frontend/src/views/SearchUsersView.vue
@@ -32,14 +32,23 @@ function testSearch(){
 <template>
   <div class="flex flex-col gap-10">
     <div class="flex mt-3">
-      <div class="dropdown dropdown-start">
-        <div tabindex="0" role="button" class="btn m-1">
-          <div>Location</div>
+      <div class="dropdown dropdown-start w-full">
+        <div tabindex="0" role="button" class="hover:bg-base-300 rounded-lg font-semibold select-none cursor-pointer w-full text-sm px-3 py-2">
+          <div class="flex text-base">
+            <span>Location</span>
+            <svg class="size-6 ml-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+              <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+              <g id="SVGRepo_iconCarrier">
+                <path d="M19 9L12 15L10.25 13.5M5 9L7.33333 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+              </g>
+            </svg>
+          </div>
           <div>No criteria</div>
         </div>
         <div
           tabindex="0"
-          class="dropdown-content card card-compact bg-base-100 text-primary-content z-[1] w-64 p-2 shadow"
+          class="dropdown-content card card-compact bg-base-100 z-[1] w-64 p-2 shadow"
         >
           <div class="card-body">
             <h3 class="card-title">Card title!</h3>
@@ -50,14 +59,23 @@ function testSearch(){
 
       <div class="divider divider-horizontal mx-0 py-3"></div>
 
-      <div class="dropdown">
-        <div tabindex="0" role="button" class="btn m-1">
-          <div>Age gap</div>
+      <div class="dropdown w-full">
+        <div tabindex="0" role="button" class="hover:bg-base-300 rounded-lg font-semibold select-none cursor-pointer w-full text-sm px-3 py-2 m-1">
+          <div class="flex text-base">
+            <span>Age gap</span>
+            <svg class="size-6 ml-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+              <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+              <g id="SVGRepo_iconCarrier">
+                <path d="M19 9L12 15L10.25 13.5M5 9L7.33333 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+              </g>
+            </svg>
+          </div>
           <div>{{seachCretiria.age.t1}} - {{seachCretiria.age.t2}}</div>
         </div>
         <div
           tabindex="0"
-          class="dropdown-content card card-compact bg-base-100 text-primary-content z-[1] w-64 p-2 shadow"
+          class="dropdown-content card card-compact bg-base-100 z-[1] w-64 p-2 shadow"
         >
           <div class="card-body">
             <h3 class="card-title">Set age gap</h3>
@@ -76,14 +94,23 @@ function testSearch(){
 
       <div class="divider divider-horizontal mx-0 py-3"></div>
 
-      <div class="dropdown">
-        <div tabindex="0" role="button" class="btn m-1">
-          <div>Fame gap</div>
+      <div class="dropdown w-full">
+        <div tabindex="0" role="button" class="hover:bg-base-300 rounded-lg font-semibold select-none cursor-pointer w-full text-sm px-3 py-2 m-1">
+          <div class="flex text-base">
+            <span>Fame gap</span>
+            <svg class="size-6 ml-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+              <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+              <g id="SVGRepo_iconCarrier">
+                <path d="M19 9L12 15L10.25 13.5M5 9L7.33333 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+              </g>
+            </svg>
+          </div>
           <div>{{seachCretiria.fame.t1}} - {{seachCretiria.fame.t2}}</div>
         </div>
         <div
           tabindex="0"
-          class="dropdown-content card card-compact bg-base-100 text-primary-content z-[1] w-64 p-2 shadow"
+          class="dropdown-content card card-compact bg-base-100 z-[1] w-64 p-2 shadow"
         >
           <div class="card-body">
             <h3 class="card-title">Set fame rating gap</h3>
@@ -102,23 +129,39 @@ function testSearch(){
 
       <div class="divider divider-horizontal mx-0 py-3"></div>
 
-      <div class="dropdown dropdown-end">
-        <div tabindex="0" role="button" class="btn m-1">
-          <div>Tags</div>
+      <div class="dropdown dropdown-end w-full">
+        <div tabindex="0" role="button" class="hover:bg-base-300 rounded-lg font-semibold select-none cursor-pointer w-full text-sm px-3 py-2 m-1">
+          <div class="flex text-base">
+            <span>Tags</span>
+            <svg class="size-6 ml-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+              <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+              <g id="SVGRepo_iconCarrier">
+                <path d="M19 9L12 15L10.25 13.5M5 9L7.33333 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+              </g>
+            </svg>
+          </div>
           <div>All</div> <!-- Or x selected -->
         </div>
         <div
           tabindex="0"
-          class="dropdown-content card card-compact bg-base-100 text-primary-content z-[1] w-64 p-2 shadow"
+          class="dropdown-content card card-compact bg-base-100 z-[1] w-64 p-2 shadow"
         >
           <div class="card-body">
             <h3 class="card-title">Card title!</h3>
             <p>you can use any element as a dropdown.</p>
           </div>
         </div>
+
+
+      </div>
+
+      <div class="divider divider-horizontal mx-0 py-3"></div>
+
+      <div class="flex items-center justify-center w-full">
+        <button class="btn btn-neutral" @click="testSearch">Search</button>
       </div>
 
-      <button class="btn" @click="testSearch">Search</button>
     </div>
 
     <div>

From 2fe9704d07e432076b4bb9c09fdb8c6289bdd1af Mon Sep 17 00:00:00 2001
From: swotex <swotex21@gmail.com>
Date: Sat, 8 Mar 2025 06:57:31 +0100
Subject: [PATCH 04/17] Add button in dropdown 'sort'

---
 frontend/src/views/SearchUsersView.vue | 356 ++++++++++++++++++++-----
 1 file changed, 288 insertions(+), 68 deletions(-)

diff --git a/frontend/src/views/SearchUsersView.vue b/frontend/src/views/SearchUsersView.vue
index d4a3bc5e..68488078 100644
--- a/frontend/src/views/SearchUsersView.vue
+++ b/frontend/src/views/SearchUsersView.vue
@@ -1,12 +1,18 @@
 <script setup lang="ts">
 import UserSearchCard from '@/components/UserSearchCard.vue'
 import { Api } from '@/utils/api'
-import {onBeforeMount, ref, watch} from 'vue'
-import DoubleSlide from "@/components/DoubleSlide.vue";
+import { onBeforeMount, ref, watch } from 'vue'
+import DoubleSlide from '@/components/DoubleSlide.vue'
 
 const search = ref('')
 const users = ref([])
 const seachCretiria = ref([])
+const sortStatus = ref({
+  age: 0,
+  location: 0,
+  fameRate: 0,
+  tag: 0,
+})
 
 const input = () => {
   if (search.value.length >= 2) {
@@ -19,12 +25,74 @@ const input = () => {
   }
 }
 
+const getImageOf = value => {
+  switch (value) {
+    case 0:
+      return `<svg class="w-full" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                <g id="SVGRepo_iconCarrier">
+                    <path d="M14.5 9.50002L9.5 14.5M9.49998 9.5L14.5 14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+                    <path d="M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+                </g>
+              </svg>`
+    case 1:
+      return `<svg class="w-full" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                <g id="SVGRepo_iconCarrier">
+                  <path d="M4 16L13 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+                  <path d="M6 11H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+                  <path d="M8 6L13 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+                  <path d="M17 4L17 20L20 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                </g>
+              </svg>`
+    case 2:
+      return `<svg class="w-full" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                <g id="SVGRepo_iconCarrier">
+                    <path d="M4 8H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+                    <path d="M6 13H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+                    <path d="M8 18H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+                    <path d="M17 20V4L20 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                </g>
+              </svg>`
+    default:
+      break
+  }
+}
+
+const changeState = value => {
+  switch (value) {
+    case 'age':
+      if (sortStatus.value.age == 2) sortStatus.value.age = 0
+      else sortStatus.value.age++
+      break
+
+    case 'location':
+      if (sortStatus.value.location == 2) sortStatus.value.location = 0
+      else sortStatus.value.location++
+      break
+
+    case 'fameRate':
+      if (sortStatus.value.fameRate == 2) sortStatus.value.fameRate = 0
+      else sortStatus.value.fameRate++
+      break
+
+    case 'tag':
+      if (sortStatus.value.tag == 2) sortStatus.value.tag = 0
+      else sortStatus.value.tag++
+      break
+  }
+}
+
 onBeforeMount(() => {
-  seachCretiria.value.age = {t1: 18, t2: 80}
-  seachCretiria.value.fame = {t1: 0, t2: 99}
+  seachCretiria.value.age = { t1: 18, t2: 80 }
+  seachCretiria.value.fame = { t1: 0, t2: 99 }
 })
 
-function testSearch(){
+function testSearch() {
   console.log(seachCretiria.value)
 }
 </script>
@@ -33,14 +101,33 @@ function testSearch(){
   <div class="flex flex-col gap-10">
     <div class="flex mt-3">
       <div class="dropdown dropdown-start w-full">
-        <div tabindex="0" role="button" class="hover:bg-base-300 rounded-lg font-semibold select-none cursor-pointer w-full text-sm px-3 py-2">
+        <div
+          tabindex="0"
+          role="button"
+          class="hover:bg-base-300 rounded-lg font-semibold select-none cursor-pointer w-full text-sm px-3 py-2"
+        >
           <div class="flex text-base">
             <span>Location</span>
-            <svg class="size-6 ml-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg
+              class="size-6 ml-1"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-              <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+              <g
+                id="SVGRepo_tracerCarrier"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></g>
               <g id="SVGRepo_iconCarrier">
-                <path d="M19 9L12 15L10.25 13.5M5 9L7.33333 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path
+                  d="M19 9L12 15L10.25 13.5M5 9L7.33333 11"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                ></path>
               </g>
             </svg>
           </div>
@@ -60,18 +147,37 @@ function testSearch(){
       <div class="divider divider-horizontal mx-0 py-3"></div>
 
       <div class="dropdown w-full">
-        <div tabindex="0" role="button" class="hover:bg-base-300 rounded-lg font-semibold select-none cursor-pointer w-full text-sm px-3 py-2 m-1">
+        <div
+          tabindex="0"
+          role="button"
+          class="hover:bg-base-300 rounded-lg font-semibold select-none cursor-pointer w-full text-sm px-3 py-2 m-1"
+        >
           <div class="flex text-base">
             <span>Age gap</span>
-            <svg class="size-6 ml-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg
+              class="size-6 ml-1"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-              <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+              <g
+                id="SVGRepo_tracerCarrier"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></g>
               <g id="SVGRepo_iconCarrier">
-                <path d="M19 9L12 15L10.25 13.5M5 9L7.33333 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path
+                  d="M19 9L12 15L10.25 13.5M5 9L7.33333 11"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                ></path>
               </g>
             </svg>
           </div>
-          <div>{{seachCretiria.age.t1}} - {{seachCretiria.age.t2}}</div>
+          <div>{{ seachCretiria.age.t1 }} - {{ seachCretiria.age.t2 }}</div>
         </div>
         <div
           tabindex="0"
@@ -79,15 +185,15 @@ function testSearch(){
         >
           <div class="card-body">
             <h3 class="card-title">Set age gap</h3>
-              <DoubleSlide
-                class="mt-3"
-                tooltip
-                v-model="seachCretiria.age"
-                :min="18"
-                :max="80"
-                :start="seachCretiria.age.t1"
-                :end="seachCretiria.age.t2"
-              />
+            <DoubleSlide
+              class="mt-3"
+              tooltip
+              v-model="seachCretiria.age"
+              :min="18"
+              :max="80"
+              :start="seachCretiria.age.t1"
+              :end="seachCretiria.age.t2"
+            />
           </div>
         </div>
       </div>
@@ -95,18 +201,37 @@ function testSearch(){
       <div class="divider divider-horizontal mx-0 py-3"></div>
 
       <div class="dropdown w-full">
-        <div tabindex="0" role="button" class="hover:bg-base-300 rounded-lg font-semibold select-none cursor-pointer w-full text-sm px-3 py-2 m-1">
+        <div
+          tabindex="0"
+          role="button"
+          class="hover:bg-base-300 rounded-lg font-semibold select-none cursor-pointer w-full text-sm px-3 py-2 m-1"
+        >
           <div class="flex text-base">
             <span>Fame gap</span>
-            <svg class="size-6 ml-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg
+              class="size-6 ml-1"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-              <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+              <g
+                id="SVGRepo_tracerCarrier"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></g>
               <g id="SVGRepo_iconCarrier">
-                <path d="M19 9L12 15L10.25 13.5M5 9L7.33333 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path
+                  d="M19 9L12 15L10.25 13.5M5 9L7.33333 11"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                ></path>
               </g>
             </svg>
           </div>
-          <div>{{seachCretiria.fame.t1}} - {{seachCretiria.fame.t2}}</div>
+          <div>{{ seachCretiria.fame.t1 }} - {{ seachCretiria.fame.t2 }}</div>
         </div>
         <div
           tabindex="0"
@@ -130,18 +255,38 @@ function testSearch(){
       <div class="divider divider-horizontal mx-0 py-3"></div>
 
       <div class="dropdown dropdown-end w-full">
-        <div tabindex="0" role="button" class="hover:bg-base-300 rounded-lg font-semibold select-none cursor-pointer w-full text-sm px-3 py-2 m-1">
+        <div
+          tabindex="0"
+          role="button"
+          class="hover:bg-base-300 rounded-lg font-semibold select-none cursor-pointer w-full text-sm px-3 py-2 m-1"
+        >
           <div class="flex text-base">
             <span>Tags</span>
-            <svg class="size-6 ml-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <svg
+              class="size-6 ml-1"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
               <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-              <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+              <g
+                id="SVGRepo_tracerCarrier"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></g>
               <g id="SVGRepo_iconCarrier">
-                <path d="M19 9L12 15L10.25 13.5M5 9L7.33333 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                <path
+                  d="M19 9L12 15L10.25 13.5M5 9L7.33333 11"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                ></path>
               </g>
             </svg>
           </div>
-          <div>All</div> <!-- Or x selected -->
+          <div>All</div>
+          <!-- Or x selected -->
         </div>
         <div
           tabindex="0"
@@ -152,8 +297,6 @@ function testSearch(){
             <p>you can use any element as a dropdown.</p>
           </div>
         </div>
-
-
       </div>
 
       <div class="divider divider-horizontal mx-0 py-3"></div>
@@ -161,75 +304,152 @@ function testSearch(){
       <div class="flex items-center justify-center w-full">
         <button class="btn btn-neutral" @click="testSearch">Search</button>
       </div>
-
     </div>
 
     <div>
       <div class="flex justify-between w-full py-2 bg-base-300/60">
         <div class="flex items-center">
-
-
           <div class="dropdown dropdown-start ml-3">
             <div tabindex="0" role="button" class="size-8">
-              <svg class="w-full" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <svg
+                class="w-full"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
                 <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                <g
+                  id="SVGRepo_tracerCarrier"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                ></g>
                 <g id="SVGRepo_iconCarrier">
-                  <path d="M4 16L13 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
-                  <path d="M6 11H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
-                  <path d="M8 6L13 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
-                  <path d="M17 4L17 20L20 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                  <path
+                    d="M4 16L13 16"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                  ></path>
+                  <path
+                    d="M6 11H13"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                  ></path>
+                  <path
+                    d="M8 6L13 6"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                  ></path>
+                  <path
+                    d="M17 4L17 20L20 16"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  ></path>
                 </g>
               </svg>
             </div>
-            <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
+            <ul
+              tabindex="0"
+              class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
+            >
               <li class="w-full flex items-center text-base">Sort by</li>
               <div class="divider my-0"></div>
-              <li>
+              <li @click="changeState('age')">
                 <div class="form-control">
-                  <label class="label cursor-pointer">
-                    <input type="checkbox" class="checkbox" />
+                    <span
+                      class="size-6"
+                      v-html="getImageOf(sortStatus.age)"
+                    ></span>
                     <span class="label-text ml-2">Age</span>
-                  </label>
                 </div>
               </li>
-              <li>
-                <div class="flex flex-col">
-                  <span>Age gap</span>
-                  <double-slide />
+              <li @click="changeState('location')">
+                <div class="form-control">
+                    <span
+                      class="size-6"
+                      v-html="getImageOf(sortStatus.location)"
+                    ></span>
+                    <span class="label-text ml-2">Location</span>
                 </div>
               </li>
-              <li>
-                <button class="btn"> <!-- Useless ? -->
-                  Apply
-                </button>
+              <li @click="changeState('fameRate')">
+                <div class="form-control">
+                    <span
+                      class="size-6"
+                      v-html="getImageOf(sortStatus.fameRate)"
+                    ></span>
+                    <span class="label-text ml-2">Fame rate</span>
+                </div>
+              </li>
+              <li @click="changeState('tag')">
+                <div class="form-control">
+                    <span
+                      class="size-6"
+                      v-html="getImageOf(sortStatus.tag)"
+                    ></span>
+                    <span class="label-text ml-2">Tags</span>
+                </div>
               </li>
             </ul>
           </div>
-
-
-
         </div>
         <div class="flex items-center">
-
           <div class="dropdown dropdown-end mr-3">
             <div tabindex="0" role="button" class="size-8">
-              <svg class="w-full" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <svg
+                class="w-full"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
                 <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                <g
+                  id="SVGRepo_tracerCarrier"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                ></g>
                 <g id="SVGRepo_iconCarrier">
-                  <path d="M20.058 9.72255C21.0065 9.18858 21.4808 8.9216 21.7404 8.49142C22 8.06124 22 7.54232 22 6.50448V5.81466C22 4.48782 22 3.8244 21.5607 3.4122C21.1213 3 20.4142 3 19 3H5C3.58579 3 2.87868 3 2.43934 3.4122C2 3.8244 2 4.48782 2 5.81466V6.50448C2 7.54232 2 8.06124 2.2596 8.49142C2.5192 8.9216 2.99347 9.18858 3.94202 9.72255L6.85504 11.3624C7.49146 11.7206 7.80967 11.8998 8.03751 12.0976C8.51199 12.5095 8.80408 12.9935 8.93644 13.5872C9 13.8722 9 14.2058 9 14.8729L9 17.5424C9 18.452 9 18.9067 9.25192 19.2613C9.50385 19.6158 9.95128 19.7907 10.8462 20.1406C12.7248 20.875 13.6641 21.2422 14.3321 20.8244C15 20.4066 15 19.4519 15 17.5424V14.8729C15 14.2058 15 13.8722 15.0636 13.5872C15.1959 12.9935 15.488 12.5095 15.9625 12.0976" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+                  <path
+                    d="M20.058 9.72255C21.0065 9.18858 21.4808 8.9216 21.7404 8.49142C22 8.06124 22 7.54232 22 6.50448V5.81466C22 4.48782 22 3.8244 21.5607 3.4122C21.1213 3 20.4142 3 19 3H5C3.58579 3 2.87868 3 2.43934 3.4122C2 3.8244 2 4.48782 2 5.81466V6.50448C2 7.54232 2 8.06124 2.2596 8.49142C2.5192 8.9216 2.99347 9.18858 3.94202 9.72255L6.85504 11.3624C7.49146 11.7206 7.80967 11.8998 8.03751 12.0976C8.51199 12.5095 8.80408 12.9935 8.93644 13.5872C9 13.8722 9 14.2058 9 14.8729L9 17.5424C9 18.452 9 18.9067 9.25192 19.2613C9.50385 19.6158 9.95128 19.7907 10.8462 20.1406C12.7248 20.875 13.6641 21.2422 14.3321 20.8244C15 20.4066 15 19.4519 15 17.5424V14.8729C15 14.2058 15 13.8722 15.0636 13.5872C15.1959 12.9935 15.488 12.5095 15.9625 12.0976"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                  ></path>
                 </g>
               </svg>
             </div>
-            <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
+            <ul
+              tabindex="0"
+              class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
+            >
               <li class="w-full flex items-center text-base">Filter by</li>
               <div class="divider my-0"></div>
-              <li><a>Item 1</a></li>
-              <li><a>Item 2</a></li>
+              <li>
+                <div class="form-control">
+                  <span class="label-text ml-2">Age</span>
+                </div>
+              </li>
+              <li>
+                <div class="form-control">
+                  <span class="label-text ml-2">Location</span>
+                </div>
+              </li>
+              <li>
+                <div class="form-control">
+                  <span class="label-text ml-2">Fame rate</span>
+                </div>
+              </li>
+              <li>
+                <div class="form-control">
+                  <span class="label-text ml-2">Tags</span>
+                </div>
+              </li>
             </ul>
           </div>
-
         </div>
       </div>
       <div class="pt-3 px-3">content</div>

From e7e491c9b3e54c132354642d17422c69d1d58317 Mon Sep 17 00:00:00 2001
From: swotex <swotex21@gmail.com>
Date: Sat, 8 Mar 2025 08:01:51 +0100
Subject: [PATCH 05/17] Add 'Age' and 'Lacation' in filter dropdown (2 dropdown
 to compare)

---
 frontend/src/views/SearchUsersView.vue | 222 +++++++++++++++++++++----
 1 file changed, 189 insertions(+), 33 deletions(-)

diff --git a/frontend/src/views/SearchUsersView.vue b/frontend/src/views/SearchUsersView.vue
index 68488078..6c3d7aef 100644
--- a/frontend/src/views/SearchUsersView.vue
+++ b/frontend/src/views/SearchUsersView.vue
@@ -14,6 +14,27 @@ const sortStatus = ref({
   tag: 0,
 })
 
+const filter = ref({
+  age: [
+    {age: 22, selected: false},
+    {age: 24, selected: false},
+    {age: 32, selected: false},
+    {age: 1423, selected: false},
+    {age: 21, selected: false},
+    {age: 76, selected: false},
+    {age: 55, selected: false},
+  ],
+  location: [
+    {name: 'Tours', selected: false},
+    {name: 'Other name', selected: false},
+    {name: 'Random name', selected: false},
+    {name: 'A Random name very too long for the dropdown', selected: false},
+    {name: 'Another name', selected: false},
+    {name: 'etc', selected: false},
+    {name: 'Toulouse', selected: false},
+  ],
+})
+
 const input = () => {
   if (search.value.length >= 2) {
     Api.get(`search/users?q=${search.value}`)
@@ -25,6 +46,12 @@ const input = () => {
   }
 }
 
+// -------------- To debug --------------
+const printInfo = () =>
+{
+  console.log(filter.value.age)
+}
+
 const getImageOf = value => {
   switch (value) {
     case 0:
@@ -354,49 +381,52 @@ function testSearch() {
             </div>
             <ul
               tabindex="0"
-              class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
+              class="dropdown-content menu bg-base-100 rounded-box z-[1] w-48 p-2 shadow"
             >
               <li class="w-full flex items-center text-base">Sort by</li>
               <div class="divider my-0"></div>
               <li @click="changeState('age')">
                 <div class="form-control">
-                    <span
-                      class="size-6"
-                      v-html="getImageOf(sortStatus.age)"
-                    ></span>
-                    <span class="label-text ml-2">Age</span>
+                  <span
+                    class="size-6"
+                    v-html="getImageOf(sortStatus.age)"
+                  ></span>
+                  <span class="text-base ml-2">Age</span>
                 </div>
               </li>
               <li @click="changeState('location')">
                 <div class="form-control">
-                    <span
-                      class="size-6"
-                      v-html="getImageOf(sortStatus.location)"
-                    ></span>
-                    <span class="label-text ml-2">Location</span>
+                  <span
+                    class="size-6"
+                    v-html="getImageOf(sortStatus.location)"
+                  ></span>
+                  <span class="text-base ml-2">Location</span>
                 </div>
               </li>
               <li @click="changeState('fameRate')">
                 <div class="form-control">
-                    <span
-                      class="size-6"
-                      v-html="getImageOf(sortStatus.fameRate)"
-                    ></span>
-                    <span class="label-text ml-2">Fame rate</span>
+                  <span
+                    class="size-6"
+                    v-html="getImageOf(sortStatus.fameRate)"
+                  ></span>
+                  <span class="text-base ml-2">Fame rate</span>
                 </div>
               </li>
               <li @click="changeState('tag')">
                 <div class="form-control">
-                    <span
-                      class="size-6"
-                      v-html="getImageOf(sortStatus.tag)"
-                    ></span>
-                    <span class="label-text ml-2">Tags</span>
+                  <span
+                    class="size-6"
+                    v-html="getImageOf(sortStatus.tag)"
+                  ></span>
+                  <span class="text-base ml-2">Tags</span>
                 </div>
               </li>
             </ul>
           </div>
         </div>
+
+        <!--     ------------------------ Start of V1 filter ------------------------    -->
+
         <div class="flex items-center">
           <div class="dropdown dropdown-end mr-3">
             <div tabindex="0" role="button" class="size-8">
@@ -424,35 +454,161 @@ function testSearch() {
             </div>
             <ul
               tabindex="0"
-              class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
+              class="dropdown-content bg-base-100 rounded-box z-[1] w-48 p-2 shadow"
             >
               <li class="w-full flex items-center text-base">Filter by</li>
               <div class="divider my-0"></div>
               <li>
-                <div class="form-control">
-                  <span class="label-text ml-2">Age</span>
+                <div class="flex flex-col items-center">
+                  <span class="text-base">Age</span>
+                  <div class="divider self-center m-0 opacity-50 w-16"></div>
+                  <div class="flex flex-wrap gap-1 max-h-40 overflow-y-auto">
+                    <label
+                      v-for="(obj, index) in filter.age"
+                      :key="index"
+                      class="flex items-center w-fit cursor-pointer p-1 rounded-lg hover:bg-base-200"
+                    >
+                      <input
+                        v-model="obj.selected"
+                        type="checkbox"
+                        class="checkbox size-5"
+                      />
+                      <span class="label-text ml-2">{{ obj.age }}</span>
+                    </label>
+                  </div>
                 </div>
               </li>
-              <li>
-                <div class="form-control">
-                  <span class="label-text ml-2">Location</span>
+              <li class="mt-3">
+                <div class="flex flex-col items-center">
+                  <span class="text-base">Location</span>
+                  <div class="divider self-center m-0 opacity-50 w-16"></div>
+                  <div class="flex flex-col gap-1 max-h-60 overflow-y-auto">
+                    <label
+                      v-for="(obj, index) in filter.location"
+                      :key="index"
+                      class="flex items-center w-fit cursor-pointer p-1 rounded-lg hover:bg-base-200"
+                    >
+                      <input
+                        v-model="obj.selected"
+                        type="checkbox"
+                        class="checkbox size-5"
+                      />
+                      <span class="label-text ml-2">{{ obj.name }}</span>
+                    </label>
+                  </div>
                 </div>
               </li>
-              <li>
-                <div class="form-control">
-                  <span class="label-text ml-2">Fame rate</span>
+              <li class="mt-3">
+                <div class="form-control flex flex-col items-center">
+                  <span class="text-base">Fame rate</span>
                 </div>
               </li>
+              <li class="mt-3">
+                <div class="form-control flex flex-col items-center">
+                  <span class="text-base">Tags</span>
+                </div>
+              </li>
+            </ul>
+          </div>
+          <!--     ------------------------ End of V1 filter ------------------------    -->
+
+          <!--     ------------------------ Start of V2 filter ------------------------    -->
+
+          <div class="dropdown dropdown-end mr-3">
+            <div tabindex="0" role="button" class="size-8">
+              <svg
+                class="w-full"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                <g
+                  id="SVGRepo_tracerCarrier"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                ></g>
+                <g id="SVGRepo_iconCarrier">
+                  <path
+                    d="M20.058 9.72255C21.0065 9.18858 21.4808 8.9216 21.7404 8.49142C22 8.06124 22 7.54232 22 6.50448V5.81466C22 4.48782 22 3.8244 21.5607 3.4122C21.1213 3 20.4142 3 19 3H5C3.58579 3 2.87868 3 2.43934 3.4122C2 3.8244 2 4.48782 2 5.81466V6.50448C2 7.54232 2 8.06124 2.2596 8.49142C2.5192 8.9216 2.99347 9.18858 3.94202 9.72255L6.85504 11.3624C7.49146 11.7206 7.80967 11.8998 8.03751 12.0976C8.51199 12.5095 8.80408 12.9935 8.93644 13.5872C9 13.8722 9 14.2058 9 14.8729L9 17.5424C9 18.452 9 18.9067 9.25192 19.2613C9.50385 19.6158 9.95128 19.7907 10.8462 20.1406C12.7248 20.875 13.6641 21.2422 14.3321 20.8244C15 20.4066 15 19.4519 15 17.5424V14.8729C15 14.2058 15 13.8722 15.0636 13.5872C15.1959 12.9935 15.488 12.5095 15.9625 12.0976"
+                    stroke="currentColor"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                  ></path>
+                </g>
+              </svg>
+            </div>
+            <ul
+              tabindex="0"
+              class="dropdown-content bg-base-100 rounded-box z-[1] w-48 p-2 shadow"
+            >
+              <li class="w-full flex items-center text-base">Filter by</li>
+              <div class="divider my-0"></div>
               <li>
-                <div class="form-control">
-                  <span class="label-text ml-2">Tags</span>
+                <details tabindex="0" class="collapse collapse-arrow border-base-300 bg-base-200 border">
+                  <summary class="collapse-title text-base">Age</summary>
+                  <div class="collapse-content">
+                    <div class="flex flex-wrap gap-1 max-h-40 overflow-y-auto">
+                      <label
+                        v-for="(obj, index) in filter.age"
+                        :key="index"
+                        class="flex items-center w-fit cursor-pointer p-1 rounded-lg hover:bg-base-200"
+                      >
+                        <input
+                          v-model="obj.selected"
+                          type="checkbox"
+                          class="checkbox size-5"
+                        />
+                        <span class="label-text ml-2">{{ obj.age }}</span>
+                      </label>
+                    </div>
+                  </div>
+                </details>
+              </li>
+              <li class="mt-2">
+                <details tabindex="0" class="collapse collapse-arrow border-base-300 bg-base-200 border">
+                  <summary class="collapse-title text-base select-none">Location</summary>
+                  <div class="collapse-content">
+                    <div class="flex flex-col gap-1 max-h-60 overflow-y-auto">
+                      <label
+                        v-for="(obj, index) in filter.location"
+                        :key="index"
+                        class="flex items-center w-fit cursor-pointer p-1 rounded-lg hover:bg-base-200"
+                      >
+                        <input
+                          v-model="obj.selected"
+                          type="checkbox"
+                          class="checkbox size-5"
+                        />
+                        <span class="label-text ml-2">{{ obj.name }}</span>
+                      </label>
+                    </div>
+                  </div>
+                </details>
+              </li>
+              <li class="mt-3">
+                <div class="form-control flex flex-col items-center">
+                  <span class="text-base">Fame rate</span>
+                </div>
+              </li>
+              <li class="mt-3">
+                <div class="form-control flex flex-col items-center">
+                  <span class="text-base">Tags</span>
                 </div>
               </li>
             </ul>
           </div>
+
+          <!--     ------------------------ End of V2 filter ------------------------    -->
+
+
+
         </div>
       </div>
-      <div class="pt-3 px-3">content</div>
+      <div class="pt-3 px-3">
+        content
+        <button class="btn" @click="printInfo">Debug</button>
+      </div>
     </div>
   </div>
 

From d65458dfe3c0bb48b74a6c6c415cb720c284a2d2 Mon Sep 17 00:00:00 2001
From: ltuffery <123221865+ltuffery@users.noreply.github.com>
Date: Sun, 9 Mar 2025 15:49:12 +0100
Subject: [PATCH 06/17] start new search backend

---
 api/composer.lock                             | 40 ++++++++---------
 .../Profile/SearchProfileController.php       | 45 +++++++++++++++++++
 .../Controllers/SearchProfileController.php   | 35 ---------------
 api/src/routes.php                            |  2 +-
 4 files changed, 66 insertions(+), 56 deletions(-)
 create mode 100644 api/src/Controllers/Profile/SearchProfileController.php
 delete mode 100644 api/src/Controllers/SearchProfileController.php

diff --git a/api/composer.lock b/api/composer.lock
index a112b83c..3edadeec 100644
--- a/api/composer.lock
+++ b/api/composer.lock
@@ -238,16 +238,16 @@
         },
         {
             "name": "flightphp/core",
-            "version": "v3.13.1",
+            "version": "v3.15.1",
             "source": {
                 "type": "git",
                 "url": "https://github.com/flightphp/core.git",
-                "reference": "da6540bbdd3b64a28de0606da7b530d0013f281c"
+                "reference": "4508d887c4b783ed91a4b5b9bf0ba8dcef270350"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/flightphp/core/zipball/da6540bbdd3b64a28de0606da7b530d0013f281c",
-                "reference": "da6540bbdd3b64a28de0606da7b530d0013f281c",
+                "url": "https://api.github.com/repos/flightphp/core/zipball/4508d887c4b783ed91a4b5b9bf0ba8dcef270350",
+                "reference": "4508d887c4b783ed91a4b5b9bf0ba8dcef270350",
                 "shasum": ""
             },
             "require": {
@@ -306,9 +306,9 @@
             "homepage": "http://flightphp.com",
             "support": {
                 "issues": "https://github.com/flightphp/core/issues",
-                "source": "https://github.com/flightphp/core/tree/v3.13.1"
+                "source": "https://github.com/flightphp/core/tree/v3.15.1"
             },
-            "time": "2025-01-14T05:58:50+00:00"
+            "time": "2025-03-09T05:51:18+00:00"
         },
         {
             "name": "phpmailer/phpmailer",
@@ -1043,16 +1043,16 @@
         },
         {
             "name": "friendsofphp/php-cs-fixer",
-            "version": "v3.68.5",
+            "version": "v3.71.0",
             "source": {
                 "type": "git",
                 "url": "https://github.com/PHP-CS-Fixer/PHP-CS-Fixer.git",
-                "reference": "7bedb718b633355272428c60736dc97fb96daf27"
+                "reference": "3825ffdc69501e1c9230291b79f036a0c0d8749d"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/PHP-CS-Fixer/PHP-CS-Fixer/zipball/7bedb718b633355272428c60736dc97fb96daf27",
-                "reference": "7bedb718b633355272428c60736dc97fb96daf27",
+                "url": "https://api.github.com/repos/PHP-CS-Fixer/PHP-CS-Fixer/zipball/3825ffdc69501e1c9230291b79f036a0c0d8749d",
+                "reference": "3825ffdc69501e1c9230291b79f036a0c0d8749d",
                 "shasum": ""
             },
             "require": {
@@ -1069,7 +1069,7 @@
                 "react/promise": "^2.0 || ^3.0",
                 "react/socket": "^1.0",
                 "react/stream": "^1.0",
-                "sebastian/diff": "^4.0 || ^5.1 || ^6.0",
+                "sebastian/diff": "^4.0 || ^5.1 || ^6.0 || ^7.0",
                 "symfony/console": "^5.4 || ^6.4 || ^7.0",
                 "symfony/event-dispatcher": "^5.4 || ^6.4 || ^7.0",
                 "symfony/filesystem": "^5.4 || ^6.4 || ^7.0",
@@ -1082,18 +1082,18 @@
                 "symfony/stopwatch": "^5.4 || ^6.4 || ^7.0"
             },
             "require-dev": {
-                "facile-it/paraunit": "^1.3.1 || ^2.4",
-                "infection/infection": "^0.29.8",
+                "facile-it/paraunit": "^1.3.1 || ^2.5",
+                "infection/infection": "^0.29.10",
                 "justinrainbow/json-schema": "^5.3 || ^6.0",
                 "keradus/cli-executor": "^2.1",
                 "mikey179/vfsstream": "^1.6.12",
                 "php-coveralls/php-coveralls": "^2.7",
                 "php-cs-fixer/accessible-object": "^1.1",
-                "php-cs-fixer/phpunit-constraint-isidenticalstring": "^1.5",
-                "php-cs-fixer/phpunit-constraint-xmlmatchesxsd": "^1.5",
-                "phpunit/phpunit": "^9.6.22 || ^10.5.40 || ^11.5.2",
-                "symfony/var-dumper": "^5.4.48 || ^6.4.15 || ^7.2.0",
-                "symfony/yaml": "^5.4.45 || ^6.4.13 || ^7.2.0"
+                "php-cs-fixer/phpunit-constraint-isidenticalstring": "^1.6",
+                "php-cs-fixer/phpunit-constraint-xmlmatchesxsd": "^1.6",
+                "phpunit/phpunit": "^9.6.22 || ^10.5.45 || ^11.5.7",
+                "symfony/var-dumper": "^5.4.48 || ^6.4.18 || ^7.2.0",
+                "symfony/yaml": "^5.4.45 || ^6.4.18 || ^7.2.0"
             },
             "suggest": {
                 "ext-dom": "For handling output formats in XML",
@@ -1134,7 +1134,7 @@
             ],
             "support": {
                 "issues": "https://github.com/PHP-CS-Fixer/PHP-CS-Fixer/issues",
-                "source": "https://github.com/PHP-CS-Fixer/PHP-CS-Fixer/tree/v3.68.5"
+                "source": "https://github.com/PHP-CS-Fixer/PHP-CS-Fixer/tree/v3.71.0"
             },
             "funding": [
                 {
@@ -1142,7 +1142,7 @@
                     "type": "github"
                 }
             ],
-            "time": "2025-01-30T17:00:50+00:00"
+            "time": "2025-03-07T23:06:56+00:00"
         },
         {
             "name": "myclabs/deep-copy",
diff --git a/api/src/Controllers/Profile/SearchProfileController.php b/api/src/Controllers/Profile/SearchProfileController.php
new file mode 100644
index 00000000..201c2693
--- /dev/null
+++ b/api/src/Controllers/Profile/SearchProfileController.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace Matcha\Api\Controllers\Profile;
+
+use Flight;
+use Matcha\Api\Model\User;
+use Matcha\Api\Resources\SearchableUserResource;
+
+class SearchProfileController
+{
+
+    public function index(): void
+    {
+        /** @var User $me */
+        $me = Flight::user();
+        $data = Flight::request()->query;
+        $where = [];
+
+        if (isset($data->age_gap)) {
+            $age_gap = explode('-', $data->age_gap);
+
+            $where[] = [
+                'birthday',
+                '<=',
+                date('Y-m-d', strtotime('-' . $age_gap[0] . ' year')),
+            ];
+            $where[] = [
+                'birthday',
+                '>=',
+                date('Y-m-d', strtotime('-' . $age_gap[1] . ' year')),
+            ];
+        }
+
+        if (isset($data->fame_gap)) {
+            // Use JOIN in `preferences`
+        }
+
+        $users = User::where($where);
+        $users = array_filter($users, fn ($user) => !$me->isBlocking($user));
+
+        Flight::json(
+            SearchableUserResource::collection($users)
+        );
+    }
+}
diff --git a/api/src/Controllers/SearchProfileController.php b/api/src/Controllers/SearchProfileController.php
deleted file mode 100644
index 3d5dd69c..00000000
--- a/api/src/Controllers/SearchProfileController.php
+++ /dev/null
@@ -1,35 +0,0 @@
-<?php
-
-namespace Matcha\Api\Controllers;
-
-use Flight;
-use Matcha\Api\Model\User;
-use Matcha\Api\Resources\SearchableUserResource;
-
-class SearchProfileController
-{
-    public const NUMBER_USERS_SEARCHABLE = 5;
-
-    public function index(): void
-    {
-        $query = Flight::request()->query;
-
-        if (!isset($query['q']) || strlen($query['q']) < 2) {
-            Flight::json([]);
-
-            return;
-        }
-
-        $users = User::where([
-            ['username', 'LIKE', '%' . $query['q'] . '%']
-        ], self::NUMBER_USERS_SEARCHABLE);
-
-        /** @var User $me */
-        $me = Flight::user();
-        $users = array_filter($users, fn ($user) => !$me->isBlocking($user));
-
-        Flight::json(
-            SearchableUserResource::collection($users)
-        );
-    }
-}
diff --git a/api/src/routes.php b/api/src/routes.php
index be78dbca..d3788a6f 100644
--- a/api/src/routes.php
+++ b/api/src/routes.php
@@ -13,10 +13,10 @@
 use Matcha\Api\Controllers\Profile\ProfileController;
 use Matcha\Api\Controllers\Profile\ProfileSuggestionController;
 use Matcha\Api\Controllers\Profile\ReportController;
+use Matcha\Api\Controllers\Profile\SearchProfileController;
 use Matcha\Api\Controllers\Profile\UserBlockController;
 use Matcha\Api\Controllers\RefreshTokenController;
 use Matcha\Api\Controllers\RegisterController;
-use Matcha\Api\Controllers\SearchProfileController;
 use Matcha\Api\Controllers\TagsController;
 use Matcha\Api\Controllers\ViewController;
 use Matcha\Api\Middleware\AuthMiddleware;

From 6194101d4bd31fea46e672458d601da398ef3ac8 Mon Sep 17 00:00:00 2001
From: swotex <swotex21@gmail.com>
Date: Fri, 14 Mar 2025 17:32:18 +0100
Subject: [PATCH 07/17] start user card view

---
 frontend/src/components/UserPreviewCard.vue |  71 ++++++
 frontend/src/views/SearchUsersView.vue      | 228 +++++++++-----------
 2 files changed, 172 insertions(+), 127 deletions(-)
 create mode 100644 frontend/src/components/UserPreviewCard.vue

diff --git a/frontend/src/components/UserPreviewCard.vue b/frontend/src/components/UserPreviewCard.vue
new file mode 100644
index 00000000..60afa09d
--- /dev/null
+++ b/frontend/src/components/UserPreviewCard.vue
@@ -0,0 +1,71 @@
+<script setup>
+
+</script>
+
+<template>
+  <div class="flip-card">
+    <div class="flip-card-inner">
+      <div class="flip-card-front">
+        <img class="absolute w-full h-full object-cover rounded-box" src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+<!--        <p class="title">FLIP CARD</p>-->
+        <p class="z-10">Hover Me</p>
+      </div>
+      <div class="flip-card-back">
+        ho ui
+<!--        <p class="title">BACK</p>-->
+<!--        <p>Leave Me</p>-->
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.flip-card {
+  //background-color: transparent;
+  width: 190px;
+  height: 254px;
+  perspective: 1000px;
+  //font-family: sans-serif;
+}
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg);
+}
+
+.flip-card-front, .flip-card-back {
+  //box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
+  @apply absolute w-full h-full rounded-box flex flex-col justify-center;
+  //position: absolute;
+  //display: flex;
+  //flex-direction: column;
+  //justify-content: center;
+  //width: 100%;
+  //height: 100%;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  border: 1px solid coral;
+  //border-radius: 1rem;
+}
+
+.flip-card-front {
+  //background: linear-gradient(120deg, bisque 60%, rgb(255, 231, 222) 88%,
+  //rgb(255, 211, 195) 40%, rgba(255, 127, 80, 0.603) 48%);
+  //color: coral;
+}
+
+.flip-card-back {
+  //background: linear-gradient(120deg, rgb(255, 174, 145) 30%, coral 88%,
+  //bisque 40%, rgb(255, 185, 160) 78%);
+  //color: white;
+  transform: rotateY(180deg);
+}
+</style>
diff --git a/frontend/src/views/SearchUsersView.vue b/frontend/src/views/SearchUsersView.vue
index 6c3d7aef..de3609ea 100644
--- a/frontend/src/views/SearchUsersView.vue
+++ b/frontend/src/views/SearchUsersView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import UserSearchCard from '@/components/UserSearchCard.vue'
+import UserPreviewCard from '@/components/UserPreviewCard.vue'
 import { Api } from '@/utils/api'
 import { onBeforeMount, ref, watch } from 'vue'
 import DoubleSlide from '@/components/DoubleSlide.vue'
@@ -16,40 +17,51 @@ const sortStatus = ref({
 
 const filter = ref({
   age: [
-    {age: 22, selected: false},
-    {age: 24, selected: false},
-    {age: 32, selected: false},
-    {age: 1423, selected: false},
-    {age: 21, selected: false},
-    {age: 76, selected: false},
-    {age: 55, selected: false},
+    { age: 22, selected: false },
+    { age: 24, selected: false },
+    { age: 32, selected: false },
+    { age: 1423, selected: false },
+    { age: 21, selected: false },
+    { age: 76, selected: false },
+    { age: 55, selected: false },
   ],
   location: [
-    {name: 'Tours', selected: false},
-    {name: 'Other name', selected: false},
-    {name: 'Random name', selected: false},
-    {name: 'A Random name very too long for the dropdown', selected: false},
-    {name: 'Another name', selected: false},
-    {name: 'etc', selected: false},
-    {name: 'Toulouse', selected: false},
+    { name: 'Tours', selected: false },
+    { name: 'Other name', selected: false },
+    { name: 'Random name', selected: false },
+    { name: 'A Random name very too long for the dropdown', selected: false },
+    { name: 'Another name', selected: false },
+    { name: 'etc', selected: false },
+    { name: 'Toulouse', selected: false },
+  ],
+  fame: [
+    { name: '12', selected: false },
+    { name: '32', selected: false },
+    { name: '23', selected: false },
+    { name: '45', selected: false },
+  ],
+  tags: [
+    { name: 'ouioui', selected: false },
+    { name: 'baguette', selected: false },
+    { name: 'bike', selected: false },
+    { name: 'rando', selected: false },
   ],
 })
 
-const input = () => {
-  if (search.value.length >= 2) {
-    Api.get(`search/users?q=${search.value}`)
-      .send()
-      .then(res => res.json())
-      .then(data => (users.value = data))
-  } else {
-    users.value = []
-  }
-}
+// const input = () => {
+//   if (search.value.length >= 2) {
+//     Api.get(`search/users?q=${search.value}`)
+//       .send()
+//       .then(res => res.json())
+//       .then(data => (users.value = data))
+//   } else {
+//     users.value = []
+//   }
+// }
 
 // -------------- To debug --------------
-const printInfo = () =>
-{
-  console.log(filter.value.age)
+const printInfo = () => {
+  console.log(users.value)
 }
 
 const getImageOf = value => {
@@ -425,94 +437,8 @@ function testSearch() {
           </div>
         </div>
 
-        <!--     ------------------------ Start of V1 filter ------------------------    -->
-
+        <!--     ------------------------ Start of filter dropdown ------------------------    -->
         <div class="flex items-center">
-          <div class="dropdown dropdown-end mr-3">
-            <div tabindex="0" role="button" class="size-8">
-              <svg
-                class="w-full"
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-                <g
-                  id="SVGRepo_tracerCarrier"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                ></g>
-                <g id="SVGRepo_iconCarrier">
-                  <path
-                    d="M20.058 9.72255C21.0065 9.18858 21.4808 8.9216 21.7404 8.49142C22 8.06124 22 7.54232 22 6.50448V5.81466C22 4.48782 22 3.8244 21.5607 3.4122C21.1213 3 20.4142 3 19 3H5C3.58579 3 2.87868 3 2.43934 3.4122C2 3.8244 2 4.48782 2 5.81466V6.50448C2 7.54232 2 8.06124 2.2596 8.49142C2.5192 8.9216 2.99347 9.18858 3.94202 9.72255L6.85504 11.3624C7.49146 11.7206 7.80967 11.8998 8.03751 12.0976C8.51199 12.5095 8.80408 12.9935 8.93644 13.5872C9 13.8722 9 14.2058 9 14.8729L9 17.5424C9 18.452 9 18.9067 9.25192 19.2613C9.50385 19.6158 9.95128 19.7907 10.8462 20.1406C12.7248 20.875 13.6641 21.2422 14.3321 20.8244C15 20.4066 15 19.4519 15 17.5424V14.8729C15 14.2058 15 13.8722 15.0636 13.5872C15.1959 12.9935 15.488 12.5095 15.9625 12.0976"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                    stroke-linecap="round"
-                  ></path>
-                </g>
-              </svg>
-            </div>
-            <ul
-              tabindex="0"
-              class="dropdown-content bg-base-100 rounded-box z-[1] w-48 p-2 shadow"
-            >
-              <li class="w-full flex items-center text-base">Filter by</li>
-              <div class="divider my-0"></div>
-              <li>
-                <div class="flex flex-col items-center">
-                  <span class="text-base">Age</span>
-                  <div class="divider self-center m-0 opacity-50 w-16"></div>
-                  <div class="flex flex-wrap gap-1 max-h-40 overflow-y-auto">
-                    <label
-                      v-for="(obj, index) in filter.age"
-                      :key="index"
-                      class="flex items-center w-fit cursor-pointer p-1 rounded-lg hover:bg-base-200"
-                    >
-                      <input
-                        v-model="obj.selected"
-                        type="checkbox"
-                        class="checkbox size-5"
-                      />
-                      <span class="label-text ml-2">{{ obj.age }}</span>
-                    </label>
-                  </div>
-                </div>
-              </li>
-              <li class="mt-3">
-                <div class="flex flex-col items-center">
-                  <span class="text-base">Location</span>
-                  <div class="divider self-center m-0 opacity-50 w-16"></div>
-                  <div class="flex flex-col gap-1 max-h-60 overflow-y-auto">
-                    <label
-                      v-for="(obj, index) in filter.location"
-                      :key="index"
-                      class="flex items-center w-fit cursor-pointer p-1 rounded-lg hover:bg-base-200"
-                    >
-                      <input
-                        v-model="obj.selected"
-                        type="checkbox"
-                        class="checkbox size-5"
-                      />
-                      <span class="label-text ml-2">{{ obj.name }}</span>
-                    </label>
-                  </div>
-                </div>
-              </li>
-              <li class="mt-3">
-                <div class="form-control flex flex-col items-center">
-                  <span class="text-base">Fame rate</span>
-                </div>
-              </li>
-              <li class="mt-3">
-                <div class="form-control flex flex-col items-center">
-                  <span class="text-base">Tags</span>
-                </div>
-              </li>
-            </ul>
-          </div>
-          <!--     ------------------------ End of V1 filter ------------------------    -->
-
-          <!--     ------------------------ Start of V2 filter ------------------------    -->
 
           <div class="dropdown dropdown-end mr-3">
             <div tabindex="0" role="button" class="size-8">
@@ -545,7 +471,10 @@ function testSearch() {
               <li class="w-full flex items-center text-base">Filter by</li>
               <div class="divider my-0"></div>
               <li>
-                <details tabindex="0" class="collapse collapse-arrow border-base-300 bg-base-200 border">
+                <details
+                  tabindex="0"
+                  class="collapse collapse-arrow border-base-300 bg-base-200 border"
+                >
                   <summary class="collapse-title text-base">Age</summary>
                   <div class="collapse-content">
                     <div class="flex flex-wrap gap-1 max-h-40 overflow-y-auto">
@@ -566,8 +495,13 @@ function testSearch() {
                 </details>
               </li>
               <li class="mt-2">
-                <details tabindex="0" class="collapse collapse-arrow border-base-300 bg-base-200 border">
-                  <summary class="collapse-title text-base select-none">Location</summary>
+                <details
+                  tabindex="0"
+                  class="collapse collapse-arrow border-base-300 bg-base-200 border"
+                >
+                  <summary class="collapse-title text-base select-none">
+                    Location
+                  </summary>
                   <div class="collapse-content">
                     <div class="flex flex-col gap-1 max-h-60 overflow-y-auto">
                       <label
@@ -587,26 +521,66 @@ function testSearch() {
                 </details>
               </li>
               <li class="mt-3">
-                <div class="form-control flex flex-col items-center">
-                  <span class="text-base">Fame rate</span>
-                </div>
+                <details
+                  tabindex="0"
+                  class="collapse collapse-arrow border-base-300 bg-base-200 border"
+                >
+                  <summary class="collapse-title text-base select-none">
+                    Fame rate
+                  </summary>
+                  <div class="collapse-content">
+                    <div class="flex flex-wrap gap-1 max-h-40 overflow-y-auto">
+                      <label
+                        v-for="(obj, index) in filter.fame"
+                        :key="index"
+                        class="flex items-center w-fit cursor-pointer p-1 rounded-lg hover:bg-base-200"
+                      >
+                        <input
+                          v-model="obj.selected"
+                          type="checkbox"
+                          class="checkbox size-5"
+                        />
+                        <span class="label-text ml-2">{{ obj.name }}</span>
+                      </label>
+                    </div>
+                  </div>
+                </details>
               </li>
               <li class="mt-3">
-                <div class="form-control flex flex-col items-center">
-                  <span class="text-base">Tags</span>
-                </div>
+                <details
+                  tabindex="0"
+                  class="collapse collapse-arrow border-base-300 bg-base-200 border"
+                >
+                  <summary class="collapse-title text-base select-none">
+                    Tags
+                  </summary>
+                  <div class="collapse-content">
+                    <div class="flex flex-wrap gap-1 max-h-40 overflow-y-auto">
+                      <label
+                        v-for="(obj, index) in filter.tags"
+                        :key="index"
+                        class="flex items-center w-fit cursor-pointer p-1 rounded-lg hover:bg-base-200"
+                      >
+                        <input
+                          v-model="obj.selected"
+                          type="checkbox"
+                          class="checkbox size-5"
+                        />
+                        <span class="label-text ml-2">{{ obj.name }}</span>
+                      </label>
+                    </div>
+                  </div>
+                </details>
               </li>
             </ul>
           </div>
 
-          <!--     ------------------------ End of V2 filter ------------------------    -->
-
-
-
+          <!--     ------------------------ End of filter dropdown ------------------------    -->
         </div>
       </div>
       <div class="pt-3 px-3">
         content
+        <UserPreviewCard />
         <button class="btn" @click="printInfo">Debug</button>
       </div>
     </div>

From 348d0cf2a99488d383e6bfebff0ec1d8d7b580df Mon Sep 17 00:00:00 2001
From: swotex <swotex21@gmail.com>
Date: Mon, 17 Mar 2025 16:31:47 +0100
Subject: [PATCH 08/17] Continue profile card

---
 frontend/src/components/UserPreviewCard.vue | 54 ++++++++++++++-------
 1 file changed, 36 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/UserPreviewCard.vue b/frontend/src/components/UserPreviewCard.vue
index 60afa09d..6038aafb 100644
--- a/frontend/src/components/UserPreviewCard.vue
+++ b/frontend/src/components/UserPreviewCard.vue
@@ -1,19 +1,33 @@
 <script setup>
-
+const image_tmp =
+  'https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp'
 </script>
 
 <template>
   <div class="flip-card">
     <div class="flip-card-inner">
       <div class="flip-card-front">
-        <img class="absolute w-full h-full object-cover rounded-box" src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
-<!--        <p class="title">FLIP CARD</p>-->
-        <p class="z-10">Hover Me</p>
+        <img
+          class="absolute w-full h-full object-cover rounded-box"
+          :src="image_tmp"
+        />
+        <div class="w-full h-full flex flex-col-reverse z-20">
+          <div class="bg-base-100/40 pl-2 rounded-b-box">Username, 24</div>
+        </div>
       </div>
-      <div class="flip-card-back">
-        ho ui
-<!--        <p class="title">BACK</p>-->
-<!--        <p>Leave Me</p>-->
+      <div class="flip-card-back"
+        :style="`background-image: url(${image_tmp});`">
+        <div class="p-1 w-full h-full flex items-start flex-col gap-1">
+          <div>Username, 24</div>
+          <div class="w-full">
+            <span class="text-sm">Biography :</span>
+            <div class="w-full">Content of Bio</div>
+          </div>
+          <div class="w-full">
+            <span class="text-sm">Tags :</span>
+            <div class="w-full">Content of tags</div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -22,17 +36,19 @@
 <style scoped>
 .flip-card {
   //background-color: transparent;
-  width: 190px;
-  height: 254px;
+  @apply h-64 w-44 cursor-pointer;
+  //width: 190px;
+  //height: 254px;
   perspective: 1000px;
   //font-family: sans-serif;
 }
 
 .flip-card-inner {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  text-align: center;
+  @apply relative w-full h-full;
+  //position: relative;
+  //width: 100%;
+  //height: 100%;
+  //text-align: center;
   transition: transform 0.8s;
   transform-style: preserve-3d;
 }
@@ -41,9 +57,10 @@
   transform: rotateY(180deg);
 }
 
-.flip-card-front, .flip-card-back {
-  //box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
-  @apply absolute w-full h-full rounded-box flex flex-col justify-center;
+.flip-card-front,
+.flip-card-back {
+  //box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.2);
+  @apply absolute flex w-full h-full rounded-box border border-neutral;
   //position: absolute;
   //display: flex;
   //flex-direction: column;
@@ -52,7 +69,7 @@
   //height: 100%;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
-  border: 1px solid coral;
+  //border: 1px solid coral;
   //border-radius: 1rem;
 }
 
@@ -66,6 +83,7 @@
   //background: linear-gradient(120deg, rgb(255, 174, 145) 30%, coral 88%,
   //bisque 40%, rgb(255, 185, 160) 78%);
   //color: white;
+  @apply backdrop-blur-sm;
   transform: rotateY(180deg);
 }
 </style>

From e0d24047819edcf9adf7ac4bc96bb9d19a9c6f21 Mon Sep 17 00:00:00 2001
From: swotex <swotex21@gmail.com>
Date: Fri, 21 Mar 2025 14:34:08 +0100
Subject: [PATCH 09/17] rework user preview card

---
 frontend/src/components/UserPreviewCard.vue | 88 +++++----------------
 1 file changed, 18 insertions(+), 70 deletions(-)

diff --git a/frontend/src/components/UserPreviewCard.vue b/frontend/src/components/UserPreviewCard.vue
index 6038aafb..ad3ff5fe 100644
--- a/frontend/src/components/UserPreviewCard.vue
+++ b/frontend/src/components/UserPreviewCard.vue
@@ -4,86 +4,34 @@ const image_tmp =
 </script>
 
 <template>
-  <div class="flip-card">
-    <div class="flip-card-inner">
-      <div class="flip-card-front">
-        <img
-          class="absolute w-full h-full object-cover rounded-box"
-          :src="image_tmp"
-        />
-        <div class="w-full h-full flex flex-col-reverse z-20">
-          <div class="bg-base-100/40 pl-2 rounded-b-box">Username, 24</div>
-        </div>
-      </div>
-      <div class="flip-card-back"
-        :style="`background-image: url(${image_tmp});`">
-        <div class="p-1 w-full h-full flex items-start flex-col gap-1">
-          <div>Username, 24</div>
-          <div class="w-full">
-            <span class="text-sm">Biography :</span>
-            <div class="w-full">Content of Bio</div>
-          </div>
-          <div class="w-full">
-            <span class="text-sm">Tags :</span>
-            <div class="w-full">Content of tags</div>
-          </div>
-        </div>
-      </div>
+  <div class="card1">
+    <div class="card-face">
+      <div class="absolute top-0 w-full h-full rounded-box bg-black opacity-20"></div>
+      <img :src="image_tmp" class="w-full h-full object-cover rounded-box" />
+      <div class="absolute bottom-3 left-3 text-white">Name, 24</div>
+    </div>
+    <div class="card-back">
+      <button class="btn btn-xs">View profile</button>
     </div>
   </div>
 </template>
 
 <style scoped>
-.flip-card {
-  //background-color: transparent;
-  @apply h-64 w-44 cursor-pointer;
-  //width: 190px;
-  //height: 254px;
-  perspective: 1000px;
-  //font-family: sans-serif;
-}
-
-.flip-card-inner {
-  @apply relative w-full h-full;
-  //position: relative;
-  //width: 100%;
-  //height: 100%;
-  //text-align: center;
-  transition: transform 0.8s;
-  transform-style: preserve-3d;
-}
-
-.flip-card:hover .flip-card-inner {
-  transform: rotateY(180deg);
+.card1 {
+  @apply relative w-48 h-64 bg-white flex justify-center rounded-box transition-all duration-[0.4s];
+  box-shadow: 0 0.625em 0.625em #00000036;
 }
 
-.flip-card-front,
-.flip-card-back {
-  //box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.2);
-  @apply absolute flex w-full h-full rounded-box border border-neutral;
-  //position: absolute;
-  //display: flex;
-  //flex-direction: column;
-  //justify-content: center;
-  //width: 100%;
-  //height: 100%;
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-  //border: 1px solid coral;
-  //border-radius: 1rem;
+.card-face{
+  @apply w-full h-full absolute z-10 rounded-box select-none transition-all duration-[0.4s];
+  box-shadow: 0 0 0.625em #00000036;
 }
 
-.flip-card-front {
-  //background: linear-gradient(120deg, bisque 60%, rgb(255, 231, 222) 88%,
-  //rgb(255, 211, 195) 40%, rgba(255, 127, 80, 0.603) 48%);
-  //color: coral;
+.card-back{
+  @apply w-full h-[2.188em] absolute bottom-0 left-0 flex justify-center items-center;
 }
 
-.flip-card-back {
-  //background: linear-gradient(120deg, rgb(255, 174, 145) 30%, coral 88%,
-  //bisque 40%, rgb(255, 185, 160) 78%);
-  //color: white;
-  @apply backdrop-blur-sm;
-  transform: rotateY(180deg);
+.card1:hover .card-face {
+  transform: translateY(-2.188em);
 }
 </style>

From 2fced06fbe38564dfbd6480e1cee71a5888d5e91 Mon Sep 17 00:00:00 2001
From: swotex <swotex21@gmail.com>
Date: Fri, 21 Mar 2025 16:24:19 +0100
Subject: [PATCH 10/17] create props for user card and add preview (card) debug
 in search page

---
 frontend/src/components/UserPreviewCard.vue | 24 ++++++++++++++++-----
 frontend/src/views/SearchUsersView.vue      | 21 ++++++++++++------
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/UserPreviewCard.vue b/frontend/src/components/UserPreviewCard.vue
index ad3ff5fe..651ae41d 100644
--- a/frontend/src/components/UserPreviewCard.vue
+++ b/frontend/src/components/UserPreviewCard.vue
@@ -1,17 +1,31 @@
 <script setup>
-const image_tmp =
-  'https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp'
+import router from "@/router/index.js";
+
+const props = defineProps({
+  username: {
+    type: String,
+    required: true,
+  },
+  age: {
+    type: String,
+    required: true,
+  },
+  avatar: {
+    type: String,
+    required: true,
+  },
+})
 </script>
 
 <template>
   <div class="card1">
     <div class="card-face">
       <div class="absolute top-0 w-full h-full rounded-box bg-black opacity-20"></div>
-      <img :src="image_tmp" class="w-full h-full object-cover rounded-box" />
-      <div class="absolute bottom-3 left-3 text-white">Name, 24</div>
+      <img :src="props.avatar" class="w-full h-full object-cover rounded-box" />
+      <div class="absolute w-4/5 bottom-3 left-3 text-white flex flex-nowrap gap-1"><span class="truncate">{{ props.username }}</span>, <span class="">{{ props.age }}</span></div>
     </div>
     <div class="card-back">
-      <button class="btn btn-xs">View profile</button>
+      <button class="btn btn-xs" @click="router.push({ name: 'profile', params: {username: props.username} })">View profile</button>
     </div>
   </div>
 </template>
diff --git a/frontend/src/views/SearchUsersView.vue b/frontend/src/views/SearchUsersView.vue
index de3609ea..afef9792 100644
--- a/frontend/src/views/SearchUsersView.vue
+++ b/frontend/src/views/SearchUsersView.vue
@@ -137,7 +137,7 @@ function testSearch() {
 </script>
 
 <template>
-  <div class="flex flex-col gap-10">
+  <div class="flex flex-col h-full">
     <div class="flex mt-3">
       <div class="dropdown dropdown-start w-full">
         <div
@@ -345,7 +345,7 @@ function testSearch() {
       </div>
     </div>
 
-    <div>
+    <div class="pt-8">
       <div class="flex justify-between w-full py-2 bg-base-300/60">
         <div class="flex items-center">
           <div class="dropdown dropdown-start ml-3">
@@ -578,11 +578,18 @@ function testSearch() {
           <!--     ------------------------ End of filter dropdown ------------------------    -->
         </div>
       </div>
-      <div class="pt-3 px-3">
-        content
-        <UserPreviewCard />
-        <button class="btn" @click="printInfo">Debug</button>
-      </div>
+
+<!--      <button class="btn" @click="printInfo">Debug</button>-->
+    </div>
+    <div class="py-8 overflow-y-auto w-full flex flex-wrap justify-center gap-5">
+      <UserPreviewCard username="Leo" age="104" avatar="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+      <UserPreviewCard username="Leo" age="104" avatar="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+      <UserPreviewCard username="Leo" age="104" avatar="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+      <UserPreviewCard username="Leo" age="104" avatar="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+      <UserPreviewCard username="Leo" age="104" avatar="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+      <UserPreviewCard username="Leo" age="104" avatar="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+      <UserPreviewCard username="Leo" age="104" avatar="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+      <UserPreviewCard username="Leo" age="104" avatar="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
     </div>
   </div>
 

From d7432aeb4f371a4b911e502b37e029bc4d84ae0c Mon Sep 17 00:00:00 2001
From: swotex <swotex21@gmail.com>
Date: Mon, 12 May 2025 13:56:27 +0200
Subject: [PATCH 11/17] Fix bug of doobleSlide and Fix z-index of body search

---
 frontend/src/components/DoubleSlide.vue | 9 +++++----
 frontend/src/views/SearchUsersView.vue  | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/DoubleSlide.vue b/frontend/src/components/DoubleSlide.vue
index 2d2999d6..312c54eb 100644
--- a/frontend/src/components/DoubleSlide.vue
+++ b/frontend/src/components/DoubleSlide.vue
@@ -132,10 +132,11 @@ const handleClick = e => {
 }
 
 const handleInput = e => {
-  if (startValue.value.value > endValue.value.value) {
-    if (e.target.id === 'startValue')
-      startValue.value.value = endValue.value.value
-    else endValue.value.value = startValue.value.value
+  const raw = Number(e.target.value)
+  if (e.target.id === 'startValue') {
+    startValue.value.value = Math.min(Math.max(raw, props.min), endValue.value.value)
+  } else {
+    endValue.value.value   = Math.max(Math.min(raw, props.max), startValue.value.value)
   }
   updateValues()
   const temporary = {
diff --git a/frontend/src/views/SearchUsersView.vue b/frontend/src/views/SearchUsersView.vue
index afef9792..10cd7d12 100644
--- a/frontend/src/views/SearchUsersView.vue
+++ b/frontend/src/views/SearchUsersView.vue
@@ -283,7 +283,7 @@ function testSearch() {
               tooltip
               v-model="seachCretiria.fame"
               :min="0"
-              :max="99"
+              :max="100"
               :start="seachCretiria.fame.t1"
               :end="seachCretiria.fame.t2"
             />
@@ -581,7 +581,7 @@ function testSearch() {
 
 <!--      <button class="btn" @click="printInfo">Debug</button>-->
     </div>
-    <div class="py-8 overflow-y-auto w-full flex flex-wrap justify-center gap-5">
+    <div class="py-8 overflow-y-auto w-full flex flex-wrap justify-center gap-5 z-0">
       <UserPreviewCard username="Leo" age="104" avatar="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
       <UserPreviewCard username="Leo" age="104" avatar="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
       <UserPreviewCard username="Leo" age="104" avatar="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />

From 4a1c54ce48e0414715af6b252de3dbaa192b0d9d Mon Sep 17 00:00:00 2001
From: swotex <swotex21@gmail.com>
Date: Mon, 12 May 2025 17:16:59 +0200
Subject: [PATCH 12/17] change slide 0->99 to 0->100

---
 frontend/src/views/SearchUsersView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/SearchUsersView.vue b/frontend/src/views/SearchUsersView.vue
index 10cd7d12..76dd0d9d 100644
--- a/frontend/src/views/SearchUsersView.vue
+++ b/frontend/src/views/SearchUsersView.vue
@@ -128,7 +128,7 @@ const changeState = value => {
 
 onBeforeMount(() => {
   seachCretiria.value.age = { t1: 18, t2: 80 }
-  seachCretiria.value.fame = { t1: 0, t2: 99 }
+  seachCretiria.value.fame = { t1: 0, t2: 100 }
 })
 
 function testSearch() {

From fab2ab42c115ccb903219e3bb835866cc1508990 Mon Sep 17 00:00:00 2001
From: swotex <swotex21@gmail.com>
Date: Tue, 13 May 2025 13:22:54 +0200
Subject: [PATCH 13/17] Start to create locations search

---
 frontend/src/views/SearchUsersView.vue | 30 ++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/SearchUsersView.vue b/frontend/src/views/SearchUsersView.vue
index 76dd0d9d..e4b2411d 100644
--- a/frontend/src/views/SearchUsersView.vue
+++ b/frontend/src/views/SearchUsersView.vue
@@ -177,8 +177,34 @@ function testSearch() {
           class="dropdown-content card card-compact bg-base-100 z-[1] w-64 p-2 shadow"
         >
           <div class="card-body">
-            <h3 class="card-title">Card title!</h3>
-            <p>you can use any element as a dropdown.</p>
+            <h3 class="card-title">Location</h3>
+            <div class="flex items-center gap-1">
+              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-6 text-error opacity-60 hover:opacity-100" >
+                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                <g id="SVGRepo_iconCarrier">
+                  <path d="M9 10H15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+                  <path d="M5 15.2161C4.35254 13.5622 4 11.8013 4 10.1433C4 5.64588 7.58172 2 12 2C16.4183 2 20 5.64588 20 10.1433C20 14.6055 17.4467 19.8124 13.4629 21.6744C12.5343 22.1085 11.4657 22.1085 10.5371 21.6744C9.26474 21.0797 8.13831 20.1439 7.19438 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+                </g>
+              </svg>
+              <span>Toulouse</span>
+            </div>
+            <!-- <p>Toulouse</p> -->
+            <label class="input input-bordered flex items-center gap-2">
+              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-4 text-error opacity-70">
+                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                <g id="SVGRepo_iconCarrier">
+                  <path d="M12.5 7.04148C12.3374 7.0142 12.1704 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13C13.6569 13 15 11.6569 15 10C15 9.82964 14.9858 9.6626 14.9585 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+                  <path d="M5 15.2161C4.35254 13.5622 4 11.8013 4 10.1433C4 5.64588 7.58172 2 12 2C16.4183 2 20 5.64588 20 10.1433C20 14.6055 17.4467 19.8124 13.4629 21.6744C12.5343 22.1085 11.4657 22.1085 10.5371 21.6744C9.26474 21.0797 8.13831 20.1439 7.19438 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
+                </g>
+              </svg>
+              <input type="text" class="grow" placeholder="Toulouse" />
+            </label>
+            <div>
+              <p>within a 4km radius</p>
+              <input type="range" min="10" max="100" value="20" class="range" />
+            </div>
           </div>
         </div>
       </div>

From 4780247e92507532ab21c01c92c8b71c78e15b6e Mon Sep 17 00:00:00 2001
From: swotex <swotex21@gmail.com>
Date: Tue, 13 May 2025 14:12:52 +0200
Subject: [PATCH 14/17] The second dropdown has been modifyed to fix a bug
 (pointer focus inside dropdown even if it's closed)

---
 frontend/src/views/SearchUsersView.vue | 73 ++++++++++----------------
 1 file changed, 28 insertions(+), 45 deletions(-)

diff --git a/frontend/src/views/SearchUsersView.vue b/frontend/src/views/SearchUsersView.vue
index e4b2411d..bd3a87bb 100644
--- a/frontend/src/views/SearchUsersView.vue
+++ b/frontend/src/views/SearchUsersView.vue
@@ -466,10 +466,14 @@ function testSearch() {
         <!--     ------------------------ Start of filter dropdown ------------------------    -->
         <div class="flex items-center">
 
+
+
+
+
           <div class="dropdown dropdown-end mr-3">
-            <div tabindex="0" role="button" class="size-8">
+            <label tabindex=0 class="size-8 cursor-pointer">
               <svg
-                class="w-full"
+                class="size-8"
                 viewBox="0 0 24 24"
                 fill="none"
                 xmlns="http://www.w3.org/2000/svg"
@@ -489,20 +493,14 @@ function testSearch() {
                   ></path>
                 </g>
               </svg>
-            </div>
-            <ul
-              tabindex="0"
-              class="dropdown-content bg-base-100 rounded-box z-[1] w-48 p-2 shadow"
-            >
+            </label>
+            <ul tabIndex=0 class="menu bg-base-200 w-56 rounded-box dropdown-content z-[1]">
               <li class="w-full flex items-center text-base">Filter by</li>
               <div class="divider my-0"></div>
               <li>
-                <details
-                  tabindex="0"
-                  class="collapse collapse-arrow border-base-300 bg-base-200 border"
-                >
-                  <summary class="collapse-title text-base">Age</summary>
-                  <div class="collapse-content">
+                <details>
+                  <summary>Age</summary>
+                  <ul class="max-w-48">
                     <div class="flex flex-wrap gap-1 max-h-40 overflow-y-auto">
                       <label
                         v-for="(obj, index) in filter.age"
@@ -517,18 +515,13 @@ function testSearch() {
                         <span class="label-text ml-2">{{ obj.age }}</span>
                       </label>
                     </div>
-                  </div>
+                  </ul>
                 </details>
               </li>
-              <li class="mt-2">
-                <details
-                  tabindex="0"
-                  class="collapse collapse-arrow border-base-300 bg-base-200 border"
-                >
-                  <summary class="collapse-title text-base select-none">
-                    Location
-                  </summary>
-                  <div class="collapse-content">
+              <li>
+                <details>
+                  <summary>Location</summary>
+                  <ul class="max-w-48">
                     <div class="flex flex-col gap-1 max-h-60 overflow-y-auto">
                       <label
                         v-for="(obj, index) in filter.location"
@@ -543,18 +536,13 @@ function testSearch() {
                         <span class="label-text ml-2">{{ obj.name }}</span>
                       </label>
                     </div>
-                  </div>
+                  </ul>
                 </details>
               </li>
-              <li class="mt-3">
-                <details
-                  tabindex="0"
-                  class="collapse collapse-arrow border-base-300 bg-base-200 border"
-                >
-                  <summary class="collapse-title text-base select-none">
-                    Fame rate
-                  </summary>
-                  <div class="collapse-content">
+              <li>
+                <details>
+                  <summary>Fame rate</summary>
+                  <ul class="max-w-48">
                     <div class="flex flex-wrap gap-1 max-h-40 overflow-y-auto">
                       <label
                         v-for="(obj, index) in filter.fame"
@@ -569,18 +557,13 @@ function testSearch() {
                         <span class="label-text ml-2">{{ obj.name }}</span>
                       </label>
                     </div>
-                  </div>
+                  </ul>
                 </details>
               </li>
-              <li class="mt-3">
-                <details
-                  tabindex="0"
-                  class="collapse collapse-arrow border-base-300 bg-base-200 border"
-                >
-                  <summary class="collapse-title text-base select-none">
-                    Tags
-                  </summary>
-                  <div class="collapse-content">
+              <li>
+                <details>
+                  <summary>Tags</summary>
+                  <ul class="max-w-48">
                     <div class="flex flex-wrap gap-1 max-h-40 overflow-y-auto">
                       <label
                         v-for="(obj, index) in filter.tags"
@@ -595,9 +578,9 @@ function testSearch() {
                         <span class="label-text ml-2">{{ obj.name }}</span>
                       </label>
                     </div>
-                  </div>
+                  </ul>
                 </details>
-              </li>
+              </li>              
             </ul>
           </div>
 

From 363ecd19c29a8ffb9c4677a4b5fb0362f02e4155 Mon Sep 17 00:00:00 2001
From: swotex <swotex21@gmail.com>
Date: Tue, 13 May 2025 14:48:46 +0200
Subject: [PATCH 15/17] Uncomment seeders

---
 api/database/seeders/DatabaseSeeder.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/api/database/seeders/DatabaseSeeder.php b/api/database/seeders/DatabaseSeeder.php
index 0706717b..12a9615a 100644
--- a/api/database/seeders/DatabaseSeeder.php
+++ b/api/database/seeders/DatabaseSeeder.php
@@ -10,9 +10,9 @@ public function run(int $n = 1): void
     {
         $this->call([
             UserSeeder::class,
-//            MatchesSeeder::class,
-//            MessageSeeder::class,
-//            TagSeeder::class,
+           MatchesSeeder::class,
+           MessageSeeder::class,
+           TagSeeder::class,
         ], $n);
     }
 

From 1b4f1b0a42cbf7d23a8ab97f91c21135e2f8008e Mon Sep 17 00:00:00 2001
From: swotex <swotex21@gmail.com>
Date: Tue, 13 May 2025 15:10:55 +0200
Subject: [PATCH 16/17] create content of tags dropdown (research api)

---
 frontend/src/views/SearchUsersView.vue | 33 +++++++++++++-------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/frontend/src/views/SearchUsersView.vue b/frontend/src/views/SearchUsersView.vue
index bd3a87bb..9b5f430b 100644
--- a/frontend/src/views/SearchUsersView.vue
+++ b/frontend/src/views/SearchUsersView.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import UserSearchCard from '@/components/UserSearchCard.vue'
 import UserPreviewCard from '@/components/UserPreviewCard.vue'
+import TagSelector from '@/components/TagSelector.vue'
 import { Api } from '@/utils/api'
 import { onBeforeMount, ref, watch } from 'vue'
 import DoubleSlide from '@/components/DoubleSlide.vue'
 
 const search = ref('')
 const users = ref([])
-const seachCretiria = ref([])
+const searchCretiria = ref([])
 const sortStatus = ref({
   age: 0,
   location: 0,
@@ -127,12 +128,12 @@ const changeState = value => {
 }
 
 onBeforeMount(() => {
-  seachCretiria.value.age = { t1: 18, t2: 80 }
-  seachCretiria.value.fame = { t1: 0, t2: 100 }
+  searchCretiria.value.age = { t1: 18, t2: 80 }
+  searchCretiria.value.fame = { t1: 0, t2: 100 }
 })
 
 function testSearch() {
-  console.log(seachCretiria.value)
+  console.log(searchCretiria.value)
 }
 </script>
 
@@ -242,7 +243,7 @@ function testSearch() {
               </g>
             </svg>
           </div>
-          <div>{{ seachCretiria.age.t1 }} - {{ seachCretiria.age.t2 }}</div>
+          <div>{{ searchCretiria.age.t1 }} - {{ searchCretiria.age.t2 }}</div>
         </div>
         <div
           tabindex="0"
@@ -253,11 +254,11 @@ function testSearch() {
             <DoubleSlide
               class="mt-3"
               tooltip
-              v-model="seachCretiria.age"
+              v-model="searchCretiria.age"
               :min="18"
               :max="80"
-              :start="seachCretiria.age.t1"
-              :end="seachCretiria.age.t2"
+              :start="searchCretiria.age.t1"
+              :end="searchCretiria.age.t2"
             />
           </div>
         </div>
@@ -296,7 +297,7 @@ function testSearch() {
               </g>
             </svg>
           </div>
-          <div>{{ seachCretiria.fame.t1 }} - {{ seachCretiria.fame.t2 }}</div>
+          <div>{{ searchCretiria.fame.t1 }} - {{ searchCretiria.fame.t2 }}</div>
         </div>
         <div
           tabindex="0"
@@ -307,11 +308,11 @@ function testSearch() {
             <DoubleSlide
               class="mt-3"
               tooltip
-              v-model="seachCretiria.fame"
+              v-model="searchCretiria.fame"
               :min="0"
               :max="100"
-              :start="seachCretiria.fame.t1"
-              :end="seachCretiria.fame.t2"
+              :start="searchCretiria.fame.t1"
+              :end="searchCretiria.fame.t2"
             />
           </div>
         </div>
@@ -350,16 +351,16 @@ function testSearch() {
               </g>
             </svg>
           </div>
-          <div>All</div>
+          <div>{{ searchCretiria.tags && searchCretiria.tags.length > 0 ? searchCretiria.tags.length + ' Selected' : 'All' }}</div>
           <!-- Or x selected -->
         </div>
         <div
           tabindex="0"
           class="dropdown-content card card-compact bg-base-100 z-[1] w-64 p-2 shadow"
         >
-          <div class="card-body">
-            <h3 class="card-title">Card title!</h3>
-            <p>you can use any element as a dropdown.</p>
+          <div class="card-body max-h-96 overflow-y-auto">
+            <h3 class="card-title">Select tags</h3>
+            <TagSelector v-model="searchCretiria.tags" />
           </div>
         </div>
       </div>

From d1711d364b9009bc2ab2b05eacee825c08d80da7 Mon Sep 17 00:00:00 2001
From: swotex <swotex21@gmail.com>
Date: Tue, 13 May 2025 17:50:22 +0200
Subject: [PATCH 17/17] create locasation filter search and start to create
 backend response

---
 .../Profile/SearchProfileController.php       |  22 ++++
 api/src/routes.php                            |   1 +
 frontend/src/views/SearchUsersView.vue        | 107 ++++++++++++------
 3 files changed, 96 insertions(+), 34 deletions(-)

diff --git a/api/src/Controllers/Profile/SearchProfileController.php b/api/src/Controllers/Profile/SearchProfileController.php
index 201c2693..b77d831c 100644
--- a/api/src/Controllers/Profile/SearchProfileController.php
+++ b/api/src/Controllers/Profile/SearchProfileController.php
@@ -9,6 +9,28 @@
 class SearchProfileController
 {
 
+    public function search(): void
+    {
+        $me = Flight::user();
+        $data = Flight::request()->data;
+        $where = [];
+
+        if (isset($data->age))
+        {
+            $where[] = [
+                'birthday',
+                'BETWEEN',
+                'DATE_SUB(CURDATE(), INTERVAL '.$data->age[1].' YEAR)',
+                'AND',
+                'DATE_SUB(CURDATE(), INTERVAL '.$data->age[0].' YEAR);'
+            ];
+        }
+
+        $users = User::where($where)->limit(25)->get();
+        Flight::json(
+            SearchableUserResource::collection($users)
+        );
+    }
     public function index(): void
     {
         /** @var User $me */
diff --git a/api/src/routes.php b/api/src/routes.php
index d3788a6f..b2146a76 100644
--- a/api/src/routes.php
+++ b/api/src/routes.php
@@ -98,6 +98,7 @@
 Flight::route('GET /tags', [TagsController::class, 'index']);
 
 Flight::group('/search', function () {
+    Flight::route('POST /users', [SearchProfileController::class, 'search']);
     Flight::route('GET /users', [SearchProfileController::class, 'index']);
 }, [AuthMiddleware::class]);
 
diff --git a/frontend/src/views/SearchUsersView.vue b/frontend/src/views/SearchUsersView.vue
index 9b5f430b..f81f9cd8 100644
--- a/frontend/src/views/SearchUsersView.vue
+++ b/frontend/src/views/SearchUsersView.vue
@@ -5,10 +5,11 @@ import TagSelector from '@/components/TagSelector.vue'
 import { Api } from '@/utils/api'
 import { onBeforeMount, ref, watch } from 'vue'
 import DoubleSlide from '@/components/DoubleSlide.vue'
+import { Tracking } from '@/services/tracking.js'
 
 const search = ref('')
 const users = ref([])
-const searchCretiria = ref([])
+const searchCriteria = ref([])
 const sortStatus = ref({
   age: 0,
   location: 0,
@@ -16,6 +17,11 @@ const sortStatus = ref({
   tag: 0,
 })
 
+const locationParam = ref({
+  cityList: '',
+  countryCode: 'FR',
+})
+
 const filter = ref({
   age: [
     { age: 22, selected: false },
@@ -127,13 +133,38 @@ const changeState = value => {
   }
 }
 
+const addLocation = e => {
+  searchCriteria.value.loc.push({
+    'name': e.currentTarget.getAttribute('name'),
+    'lat': e.currentTarget.getAttribute('lat'),
+    'lon': e.currentTarget.getAttribute('lon'),
+  })
+}
+
+const removeLocation = e => {
+  searchCriteria.value.loc.splice(e.currentTarget.getAttribute('index'), 1);
+}
+
+const refreshCityList = async e => {
+  locationParam.value.cityList = await Tracking.getCityListByName(
+    e.target.value,
+    locationParam.value.countryCode
+  )
+}
+
 onBeforeMount(() => {
-  searchCretiria.value.age = { t1: 18, t2: 80 }
-  searchCretiria.value.fame = { t1: 0, t2: 100 }
+  searchCriteria.value.age = { t1: 18, t2: 80 }
+  searchCriteria.value.fame = { t1: 0, t2: 100 }
+  searchCriteria.value.loc = []
 })
 
-function testSearch() {
-  console.log(searchCretiria.value)
+async function testSearch() {
+  searchCriteria.value.age = Object.values(searchCriteria.value.age);
+  searchCriteria.value.fame = Object.values(searchCriteria.value.fame);
+  console.log(searchCriteria.value)
+  let response = await Api.post('/search/users').send(searchCriteria.value);
+  response = await response.json()
+  console.log(response)
 }
 </script>
 
@@ -179,8 +210,12 @@ function testSearch() {
         >
           <div class="card-body">
             <h3 class="card-title">Location</h3>
-            <div class="flex items-center gap-1">
-              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-6 text-error opacity-60 hover:opacity-100" >
+            <div
+              class="flex items-center gap-1"
+              v-for="(city, index) in searchCriteria.loc"
+              :key="index"
+              :name="city.name">
+              <svg @click="removeLocation" :index="index" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-6 text-error opacity-60 hover:opacity-100" >
                 <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                 <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                 <g id="SVGRepo_iconCarrier">
@@ -188,24 +223,27 @@ function testSearch() {
                   <path d="M5 15.2161C4.35254 13.5622 4 11.8013 4 10.1433C4 5.64588 7.58172 2 12 2C16.4183 2 20 5.64588 20 10.1433C20 14.6055 17.4467 19.8124 13.4629 21.6744C12.5343 22.1085 11.4657 22.1085 10.5371 21.6744C9.26474 21.0797 8.13831 20.1439 7.19438 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
                 </g>
               </svg>
-              <span>Toulouse</span>
+              <span>{{ city.name }}</span>
             </div>
+
+
             <!-- <p>Toulouse</p> -->
-            <label class="input input-bordered flex items-center gap-2">
-              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="size-4 text-error opacity-70">
-                <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
-                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
-                <g id="SVGRepo_iconCarrier">
-                  <path d="M12.5 7.04148C12.3374 7.0142 12.1704 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13C13.6569 13 15 11.6569 15 10C15 9.82964 14.9858 9.6626 14.9585 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
-                  <path d="M5 15.2161C4.35254 13.5622 4 11.8013 4 10.1433C4 5.64588 7.58172 2 12 2C16.4183 2 20 5.64588 20 10.1433C20 14.6055 17.4467 19.8124 13.4629 21.6744C12.5343 22.1085 11.4657 22.1085 10.5371 21.6744C9.26474 21.0797 8.13831 20.1439 7.19438 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
-                </g>
-              </svg>
-              <input type="text" class="grow" placeholder="Toulouse" />
-            </label>
-            <div>
-              <p>within a 4km radius</p>
-              <input type="range" min="10" max="100" value="20" class="range" />
+            <input type="text" class="grow input input-bordered" placeholder="Toulouse" @input="refreshCityList" />
+            <div class="w-full max-h-48">
+              <div
+                v-for="(city, index) in locationParam.cityList"
+                @click="addLocation"
+                :key="index"
+                :lat="city.lat"
+                :lon="city.lng"
+                :name="city.toponymName"
+                class="hover:bg-base-300 cursor-pointer"
+              >
+                {{ city.toponymName }}
+              </div>
             </div>
+
+
           </div>
         </div>
       </div>
@@ -243,7 +281,7 @@ function testSearch() {
               </g>
             </svg>
           </div>
-          <div>{{ searchCretiria.age.t1 }} - {{ searchCretiria.age.t2 }}</div>
+          <div>{{ searchCriteria.age.t1 }} - {{ searchCriteria.age.t2 }}</div>
         </div>
         <div
           tabindex="0"
@@ -254,11 +292,11 @@ function testSearch() {
             <DoubleSlide
               class="mt-3"
               tooltip
-              v-model="searchCretiria.age"
+              v-model="searchCriteria.age"
               :min="18"
               :max="80"
-              :start="searchCretiria.age.t1"
-              :end="searchCretiria.age.t2"
+              :start="searchCriteria.age.t1"
+              :end="searchCriteria.age.t2"
             />
           </div>
         </div>
@@ -297,7 +335,7 @@ function testSearch() {
               </g>
             </svg>
           </div>
-          <div>{{ searchCretiria.fame.t1 }} - {{ searchCretiria.fame.t2 }}</div>
+          <div>{{ searchCriteria.fame.t1 }} - {{ searchCriteria.fame.t2 }}</div>
         </div>
         <div
           tabindex="0"
@@ -308,11 +346,11 @@ function testSearch() {
             <DoubleSlide
               class="mt-3"
               tooltip
-              v-model="searchCretiria.fame"
+              v-model="searchCriteria.fame"
               :min="0"
               :max="100"
-              :start="searchCretiria.fame.t1"
-              :end="searchCretiria.fame.t2"
+              :start="searchCriteria.fame.t1"
+              :end="searchCriteria.fame.t2"
             />
           </div>
         </div>
@@ -351,8 +389,7 @@ function testSearch() {
               </g>
             </svg>
           </div>
-          <div>{{ searchCretiria.tags && searchCretiria.tags.length > 0 ? searchCretiria.tags.length + ' Selected' : 'All' }}</div>
-          <!-- Or x selected -->
+          <div>{{ searchCriteria.tags && searchCriteria.tags.length > 0 ? searchCriteria.tags.length + ' Selected' : 'All' }}</div>
         </div>
         <div
           tabindex="0"
@@ -360,7 +397,7 @@ function testSearch() {
         >
           <div class="card-body max-h-96 overflow-y-auto">
             <h3 class="card-title">Select tags</h3>
-            <TagSelector v-model="searchCretiria.tags" />
+            <TagSelector v-model="searchCriteria.tags" />
           </div>
         </div>
       </div>
@@ -581,7 +618,7 @@ function testSearch() {
                     </div>
                   </ul>
                 </details>
-              </li>              
+              </li>
             </ul>
           </div>
 
@@ -600,6 +637,8 @@ function testSearch() {
       <UserPreviewCard username="Leo" age="104" avatar="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
       <UserPreviewCard username="Leo" age="104" avatar="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
       <UserPreviewCard username="Leo" age="104" avatar="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+
+      <span>By security, the search is limited by 25 users only</span>
     </div>
   </div>