From 2d8d28f47fe3a29fb5c42ecc397df0444bcf506e Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 13:55:57 +0100
Subject: [PATCH 01/31] added functional profile view

---
 components/home/Users/UserBox.vue         |  2 +-
 components/profile/Friendlist.vue         |  4 +-
 components/profile/ProfileInformation.vue | 45 ++++++++++++++++++++---
 3 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index c42b901..5a6ff43 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -2,7 +2,7 @@
     const props = defineProps({
     profilePicture: {
         type: String,
-        default: 'https://i.scdn.co/image/ab6775700000ee855d4c281804e8773208248312'
+        default: 'https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg'
     },
     name: {
         type: String,
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index dac4093..baa2742 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -32,10 +32,8 @@ async function getFriendships() {
         <p class="my-1 ">Friends</p>
         <div class="flex space-x-3 overflow-x-auto">
             <HomeUsersUserBox 
-            v-for="item in friends" :key="item.friend_id" :name="item.friend_id" :user-turn="false"
+            v-for="item in friends" :key="item.friend_id" :profile-picture="item.friend_avatar" :name="item.friend_id" :user-turn="false"
                 class="shrink-0 w-[calc(33.33%-1rem)]" />
         </div>
-
-
     </div>
 </template>
diff --git a/components/profile/ProfileInformation.vue b/components/profile/ProfileInformation.vue
index e07e6bd..5237013 100644
--- a/components/profile/ProfileInformation.vue
+++ b/components/profile/ProfileInformation.vue
@@ -1,17 +1,52 @@
 <script setup lang="ts">
 
+/*const props = defineProps({
+    profilePicture: {
+        type: String,
+        default: 'https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg'
+    },
+    username: {
+        type: String,
+        default: 'Username'
+    },
+});*/
+
+const username = ref('Username');
+const profilePicture = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg');
+
+
+const session = useSupabaseSession()
+
+onMounted(async () => {
+    if (session.value) {
+        await getProfileInformation(session.value.user.id)
+    }
+})
+
+// write type for user data
+async function getProfileInformation(userId: string) {
+    try {
+        const data = await $fetch('http://localhost:3000/api/v1/user/' + userId);
+        if (data.username) {
+            username.value = data.username;
+        }
+        if (data.avatar_url) {
+            profilePicture.value = data.avatar_url;
+        }
+    } catch (error) {
+        console.error('Error fetching profile information:', error);
+    }
+}
 </script>
 
 <template>
     <div class="flex flex-col">
         <div class="flex flex-col items-center justify-center mb-3">
-            <img 
-            src="https://i.scdn.co/image/ab6775700000ee855d4c281804e8773208248312"
-                class="w-16 h-16 rounded-full" >
-            <p>Nickname</p>
+            <NuxtImg :src="profilePicture" class="w-16 h-16 rounded-full" />
+            <p>{{ username }}</p>
         </div>
 
-        <div  class="grid grid-cols-2 gap-4">
+        <div class="grid grid-cols-2 gap-4">
             <div class="bg-gray-200 h-8 rounded-3xl px-3">Streak</div>
             <div class="bg-gray-200 h-8 rounded-3xl px-3">Games played</div>
             <div class="bg-gray-200 h-8 rounded-3xl px-3">Placeholder</div>

From 8398ef3b7c9f1bac6d531fc04bd70721b027b628 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 19:19:57 +0100
Subject: [PATCH 02/31] added working user information friend list does not
 work correct if it overflows

---
 DB/users.sql                              | 22 +++++++-
 components/home/Users/UserBox.vue         |  2 +-
 components/profile/Friendlist.vue         | 61 ++++++++++++++++++++++-
 components/profile/ProfileInformation.vue | 36 ++++---------
 server/api/v1/user/[uid].get.ts           | 53 ++++++++++++++++++--
 types/api/user.ts                         | 15 ++++++
 6 files changed, 156 insertions(+), 33 deletions(-)
 create mode 100644 types/api/user.ts

diff --git a/DB/users.sql b/DB/users.sql
index ef78b16..981dd87 100644
--- a/DB/users.sql
+++ b/DB/users.sql
@@ -12,4 +12,24 @@ ALTER TABLE users
     ADD CONSTRAINT unique_username UNIQUE (username),
     ADD CONSTRAINT valid_username check (username <> '' AND length(trim(username)) >= 4 AND username ~ '^[a-zA-Z0-9_]+$');
 
-CREATE INDEX idx_username ON users(username);
\ No newline at end of file
+CREATE INDEX idx_username ON users(username);
+
+CREATE OR REPLACE FUNCTION get_profile_information(userId UUID)
+    RETURNS RECORD
+AS
+$$
+DECLARE
+    result RECORD;
+BEGIN
+    SELECT u.id                 AS user_id,
+           u.avatar_url         AS user_avatar,
+           u.username           AS username,
+           u.spotify_id         AS user_spotify_id,
+           u.spotify_visibility AS spotify_visibility
+    INTO result
+    FROM users u
+    WHERE u.id = userId;
+
+    RETURN result;
+END;
+$$ LANGUAGE plpgsql;
\ No newline at end of file
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 5a6ff43..d49e502 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -6,7 +6,7 @@
     },
     name: {
         type: String,
-        default: 'Opponent'
+        default: 'User'
     },
     userTurn: {
         type: Boolean,
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index baa2742..e1dc425 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<!--script setup lang="ts">
 import {
     FriendshipStatus,
     FriendshipType,
@@ -36,4 +36,61 @@ async function getFriendships() {
                 class="shrink-0 w-[calc(33.33%-1rem)]" />
         </div>
     </div>
-</template>
+</template-->
+
+
+<script setup lang="ts">
+import {
+    FriendshipStatus,
+    FriendshipType,
+    type GetFriendsResponse
+} from "@/types/api/user.friends";
+import { freemem } from "os";
+import { ref } from 'vue';
+
+const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", () => [])
+const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
+const newFriendId = ref('')
+const newFriendAvatar = ref('')
+
+const session = useSupabaseSession()
+
+onMounted(async () => {
+    if (session.value) {
+        await getFriendships()
+        friends.value.push(friends.value[0])
+    }
+})
+
+async function getFriendships() {
+    $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends')
+        .then((data) => {
+            requests.value = data.filter((item) => item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
+            friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
+        });
+}
+
+function addFriend() {
+    const newFriend = {
+        friend_id: "123123",
+    }
+    friends.value.push(newFriend)
+    newFriendId.value = ''
+    newFriendAvatar.value = ''
+}
+</script>
+
+<template>
+    <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3">
+        <p class="my-1">Friends</p>
+        <div :class="['flex space-x-3', friends.length > 3 ? 'overflow-x-auto' : '']">
+            <HomeUsersUserBox 
+                v-for="item in friends" :key="item.friend_id" :profile-picture="item.friend_avatar" :name="item.friend_username" :user-turn="false"
+                :class="friends.length > 3 ? 'shrink-0' : ''"
+                />
+        </div>
+        <div class="mt-3">
+            <button @click="addFriend" class="p-2 bg-blue-500 text-white rounded ml-2">Add Friend</button>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/profile/ProfileInformation.vue b/components/profile/ProfileInformation.vue
index 5237013..5ff4b3d 100644
--- a/components/profile/ProfileInformation.vue
+++ b/components/profile/ProfileInformation.vue
@@ -1,41 +1,27 @@
 <script setup lang="ts">
-
-/*const props = defineProps({
-    profilePicture: {
-        type: String,
-        default: 'https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg'
-    },
-    username: {
-        type: String,
-        default: 'Username'
-    },
-});*/
+import type {
+    GetProfileResponse
+} from "@/types/api/user";
 
 const username = ref('Username');
 const profilePicture = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg');
 
-
 const session = useSupabaseSession()
 
 onMounted(async () => {
     if (session.value) {
-        await getProfileInformation(session.value.user.id)
+        await getProfileInformation()
     }
 })
 
-// write type for user data
-async function getProfileInformation(userId: string) {
-    try {
-        const data = await $fetch('http://localhost:3000/api/v1/user/' + userId);
-        if (data.username) {
-            username.value = data.username;
+async function getProfileInformation() {
+    $fetch<GetProfileResponse>('http://localhost:3000/api/v1/user/' + session.value?.user.id)
+      .then((data) => {
+        username.value = data.username
+        if (data.user_avatar) {
+            profilePicture.value = data.user_avatar;
         }
-        if (data.avatar_url) {
-            profilePicture.value = data.avatar_url;
-        }
-    } catch (error) {
-        console.error('Error fetching profile information:', error);
-    }
+      });
 }
 </script>
 
diff --git a/server/api/v1/user/[uid].get.ts b/server/api/v1/user/[uid].get.ts
index f42c743..236e9bb 100644
--- a/server/api/v1/user/[uid].get.ts
+++ b/server/api/v1/user/[uid].get.ts
@@ -1,5 +1,50 @@
-export default defineEventHandler((event) => {
-    const userId = getRouterParam(event, 'uid')
+import {
+  serverSupabaseServiceRole,
+  serverSupabaseUser,
+} from "#supabase/server";
 
-    return;
-})
\ No newline at end of file
+import type {
+  ProfileError,
+  GetProfileParam,
+  GetProfileResponse,
+} from "~/types/api/user";
+
+/**
+ * Endpoint to get a user by id
+ * @returns {Object} - User object
+ * @throws {400} - Invalid userId
+ * @throws {401} - Unauthenticated
+ * @throws {500} - Internal Server Error
+ */
+
+// check regex userId
+/*if (!userId || !isValidSpotifyID(userId!)) {
+        setResponseStatus(event, 400);
+        return {error: 'invalid userId'};
+    }*/
+export default defineEventHandler(async (event) => {
+  const user = await serverSupabaseUser(event);
+  if (!user?.id) {
+    setResponseStatus(event, 401);
+    return { error: "unauthenticated" };
+  }
+
+  const client = serverSupabaseServiceRole(event);
+  const param: GetProfileParam = { userid: user.id };
+
+  const {
+    data,
+    error,
+  }: {
+    data: GetProfileResponse | null;
+    error: ProfileError | null;
+  } = await client.rpc("get_profile_information", param as never);
+
+  if (error) {
+    setResponseStatus(event, 500);
+    return { error: error.message };
+  }
+
+  console.log(data)
+  return data;
+});
diff --git a/types/api/user.ts b/types/api/user.ts
new file mode 100644
index 0000000..d45dacd
--- /dev/null
+++ b/types/api/user.ts
@@ -0,0 +1,15 @@
+export interface ProfileError {
+    message: string
+}
+
+export interface GetProfileParam {
+    userid: string
+}
+
+export interface GetProfileResponse {
+    user_id: number,
+    user_avatar: string | null,
+    username: string,
+    user_spotify_id: string,
+    spotify_visibility: boolean,
+}
\ No newline at end of file

From e4eee092630213bf2a5d944c11a9a18f0e6de21b Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 19:26:56 +0100
Subject: [PATCH 03/31] fiexed url error

---
 components/home/Users/UserBox.vue | 3 ++-
 components/profile/Friendlist.vue | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index d49e502..ddbd106 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+
     const props = defineProps({
     profilePicture: {
         type: String,
@@ -17,7 +18,7 @@
 
 <template>
     <div :class="['bg-blue-600', props.userTurn ? 'flex items-center h-30 w-full rounded-3xl p-3' : 'flex flex-col items-center justify-center h-30 w-full rounded-3xl p-3']">
-        <img :class="['rounded-full w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16', props.userTurn ? 'mr-3' : 'mb-2']" :src="props.profilePicture" :alt="name">
+        <NuxtImg :class="['rounded-full w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16', props.userTurn ? 'mr-3' : 'mb-2']" :src="props.profilePicture.toString()" :alt="name"/>
         <p class="text-white">{{ props.name }}</p>
         <button v-if="props.userTurn" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="console.log(props.name)">
             <NuxtImg src="icons/playButton.svg" alt="Play" class="w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16 hover:bg-black"/>
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index e1dc425..da414d5 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -72,7 +72,7 @@ async function getFriendships() {
 
 function addFriend() {
     const newFriend = {
-        friend_id: "123123",
+        friend_username: "sfsdf",
     }
     friends.value.push(newFriend)
     newFriendId.value = ''
@@ -85,12 +85,12 @@ function addFriend() {
         <p class="my-1">Friends</p>
         <div :class="['flex space-x-3', friends.length > 3 ? 'overflow-x-auto' : '']">
             <HomeUsersUserBox 
-                v-for="item in friends" :key="item.friend_id" :profile-picture="item.friend_avatar" :name="item.friend_username" :user-turn="false"
+                v-for="item in friends" :key="item.friend_id" :profile-picture="item.friend_avatar?.toString()" :name="item.friend_username" :user-turn="false"
                 :class="friends.length > 3 ? 'shrink-0' : ''"
                 />
         </div>
         <div class="mt-3">
-            <button @click="addFriend" class="p-2 bg-blue-500 text-white rounded ml-2">Add Friend</button>
+            <button  class="p-2 bg-blue-500 text-white rounded ml-2" @click="addFriend">Add Friend</button>
         </div>
     </div>
 </template>
\ No newline at end of file

From 2ec89e35b9f50093007021e50d41dee77bb9e50a Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 19:29:40 +0100
Subject: [PATCH 04/31] removed import, which were added by accident

---
 components/profile/Friendlist.vue | 47 -------------------------------
 1 file changed, 47 deletions(-)

diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index da414d5..3e59cca 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -1,57 +1,12 @@
-<!--script setup lang="ts">
-import {
-    FriendshipStatus,
-    FriendshipType,
-    type GetFriendsResponse
-} from "@/types/api/user.friends";
-
-const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", () => [])
-const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
-
-const session = useSupabaseSession()
-
-onMounted(async () => {
-    if (session.value) {
-        await getFriendships()
-        friends.value.push(friends.value[0])
-    }
-})
-
-async function getFriendships() {
-    $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends')
-        .then((data) => {
-            requests.value = data.filter((item) => item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
-            friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
-        });
-}
-
-</script>
-
-<template>
-    <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3">
-        <p class="my-1 ">Friends</p>
-        <div class="flex space-x-3 overflow-x-auto">
-            <HomeUsersUserBox 
-            v-for="item in friends" :key="item.friend_id" :profile-picture="item.friend_avatar" :name="item.friend_id" :user-turn="false"
-                class="shrink-0 w-[calc(33.33%-1rem)]" />
-        </div>
-    </div>
-</template-->
-
-
 <script setup lang="ts">
 import {
     FriendshipStatus,
     FriendshipType,
     type GetFriendsResponse
 } from "@/types/api/user.friends";
-import { freemem } from "os";
-import { ref } from 'vue';
 
 const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", () => [])
 const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
-const newFriendId = ref('')
-const newFriendAvatar = ref('')
 
 const session = useSupabaseSession()
 
@@ -75,8 +30,6 @@ function addFriend() {
         friend_username: "sfsdf",
     }
     friends.value.push(newFriend)
-    newFriendId.value = ''
-    newFriendAvatar.value = ''
 }
 </script>
 

From 95d73d535c6bf9f1a4d58ca5787d29104fe1bd5c Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 21:18:11 +0100
Subject: [PATCH 05/31] changed size of header/content/footer

---
 layouts/HeaderFooterView.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/layouts/HeaderFooterView.vue b/layouts/HeaderFooterView.vue
index 11cadc7..2ebdc02 100644
--- a/layouts/HeaderFooterView.vue
+++ b/layouts/HeaderFooterView.vue
@@ -3,26 +3,26 @@
 </script>
 
 <template>
-  <div class="flex flex-col h-screen max-h-screen items-center">
-    <!-- Wrapper div für die Breiten-Kontrolle -->
+  <div class="flex flex-col h-screen items-center">
+    <!-- Wrapper div for width control -->
     <div class="w-full xl:w-1/2 2xl:w-1/4 flex flex-col h-full">
 
       <!-- Header -->
-      <div class="basis-24 border rounded-b-3xl">
+      <div class="h-1/6 border rounded-b-3xl">
         <div class="flex justify-around items-center h-full">
-          <slot name="header"/>
+          <slot name="header" />
         </div>
       </div>
 
       <!-- Content -->
-      <div class="flex-1 border rounded-3xl">
-          <slot name="content"/>
+      <div class="h-5/6 border rounded-3xl">
+        <slot name="content" />
       </div>
 
       <!-- Footer -->
-      <div class="basis-24 border rounded-t-3xl">
+      <div class="h-1/6 border rounded-t-3xl">
         <div class="flex justify-around items-center h-full">
-          <slot name="footer"/>
+          <slot name="footer" />
         </div>
       </div>
 
@@ -32,4 +32,4 @@
 
 <style scoped>
 
-</style>
\ No newline at end of file
+</style>

From 53c05a14eb07b0b0c2141bab11ce19f93a942b93 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 21:23:59 +0100
Subject: [PATCH 06/31] removed hover effect from play button on user turn

---
 components/home/Users/UserBox.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index ddbd106..a687115 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -21,7 +21,7 @@
         <NuxtImg :class="['rounded-full w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16', props.userTurn ? 'mr-3' : 'mb-2']" :src="props.profilePicture.toString()" :alt="name"/>
         <p class="text-white">{{ props.name }}</p>
         <button v-if="props.userTurn" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="console.log(props.name)">
-            <NuxtImg src="icons/playButton.svg" alt="Play" class="w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16 hover:bg-black"/>
+            <NuxtImg src="icons/playButton.svg" alt="Play" class="w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16"/>
         </button>
     </div>
 </template>
\ No newline at end of file

From 4b0a1e7ec61dd631c15c66f5d6fa166e450b9f67 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 21:25:22 +0100
Subject: [PATCH 07/31] removed testfriend page

---
 pages/testfriends.vue | 116 ------------------------------------------
 1 file changed, 116 deletions(-)
 delete mode 100644 pages/testfriends.vue

diff --git a/pages/testfriends.vue b/pages/testfriends.vue
deleted file mode 100644
index aa615e0..0000000
--- a/pages/testfriends.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<script setup lang="ts">
-import {
-  type FriendActionRequest,
-  FriendshipAction,
-  FriendshipStatus,
-  FriendshipType,
-  type GetFriendsResponse
-} from "@/types/api/user.friends";
-
-const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", ()=> [])
-const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
-
-const session = useSupabaseSession()
-
-onMounted(async () => {
-  if (session.value) {
-    await getFriendships()
-  }
-})
-
-async function getFriendships() {
-  $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends')
-      .then((data) => {
-        requests.value = data.filter((item) =>item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
-        friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
-      });
-}
-
-function handleFriendRequestAction(action: FriendshipAction, friendship_id: number) {
-  console.log(action, friendship_id)
-  if (action === FriendshipAction.ACCEPT) {
-    // optimistically update the UI instantly
-    friends.value = friends.value.concat(requests.value.filter((item) => item.friendship_id === friendship_id))
-    requests.value = requests.value.filter((item) => item.friendship_id !== friendship_id)
-    getFriendships() // lazily refresh the list
-  } else if (action === FriendshipAction.DECLINE) {
-    // optimistically update the UI instantly
-    requests.value = requests.value.filter((item) => item.friendship_id !== friendship_id)
-   getFriendships() // lazily refresh the list
-  } else if (action === FriendshipAction.REMOVE) {
-    // optimistically update the UI instantly
-    friends.value = friends.value.filter((item) => item.friendship_id !== friendship_id)
-    getFriendships() // lazily refresh the list
-  }
-}
-
-function accept(friendship_id: number) {
-
-  const actionRequest: FriendActionRequest = {
-    friendship_id: friendship_id,
-    action: FriendshipAction.ACCEPT
-  }
-
-  $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends/action', {
-    method: 'POST',
-    body: JSON.stringify(actionRequest)
-  }).then(() => {
-    handleFriendRequestAction(FriendshipAction.ACCEPT, friendship_id)
-  })
-}
-
-function decline(friendship_id: number) {
-  const actionRequest: FriendActionRequest = {
-    friendship_id: friendship_id,
-    action: FriendshipAction.DECLINE
-  }
-
-  $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends/action', {
-    method: 'POST',
-    body: JSON.stringify(actionRequest)
-  }).then(() => {
-    handleFriendRequestAction(FriendshipAction.DECLINE, friendship_id)
-  })
-}
-
-function remove(friendship_id: number) {
-  const actionRequest: FriendActionRequest = {
-    friendship_id: friendship_id,
-    action: FriendshipAction.REMOVE
-  }
-
-  $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends/action', {
-    method: 'POST',
-    body: JSON.stringify(actionRequest)
-  }).then(() => {
-    handleFriendRequestAction(FriendshipAction.REMOVE, friendship_id)
-  })
-}
-
-</script>
-
-<template>
-  <div class="h-screen bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
-    <h1 class="py-4 mx-4 text-2xl">Friend Requests:</h1>
-    <div v-for="item in requests" :key="item.friend_id" class="grid grid-cols-3">
-      <div class="bg-white p-4 m-4 text-center rounded-lg">{{ item.friend_id }}</div>
-      <button class="bg-white text-black p-4 m-4 hover:bg-gray-200 rounded-lg" @click="accept(item.friendship_id)">
-        Accept
-      </button>
-      <button class="bg-white text-black p-4 m-4 hover:bg-gray-200 rounded-lg" @click="decline(item.friendship_id)">
-        Decline
-      </button>
-    </div>
-    <br>
-    <div class="flex flex-auto flex-row items-center">
-      <h1 class="py-4 mx-4 text-2xl">Friends:</h1>
-      <div v-for="item in friends" :key="item.friend_id"  class="bg-white p-4 m-4 text-center rounded-lg">
-        {{ item.friend_id }}
-        <button class="pl-4 hover:text-red-500" @click="remove(item.friendship_id)">
-          Remove
-        </button>
-      </div>
-    </div>
-    <br><br>
-  </div>
-</template>
\ No newline at end of file

From f00170e9f30d30b6b80fed2648f779512baa5922 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 22:21:08 +0100
Subject: [PATCH 08/31] made opponents turn and users turn into one component

---
 components/MultipleUsersView.vue   | 48 ++++++++++++++++++++++++++++++
 components/home/Turns/Opponent.vue | 14 ---------
 components/home/Turns/User.vue     | 14 ---------
 3 files changed, 48 insertions(+), 28 deletions(-)
 create mode 100644 components/MultipleUsersView.vue
 delete mode 100644 components/home/Turns/Opponent.vue
 delete mode 100644 components/home/Turns/User.vue

diff --git a/components/MultipleUsersView.vue b/components/MultipleUsersView.vue
new file mode 100644
index 0000000..fc78557
--- /dev/null
+++ b/components/MultipleUsersView.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { UserViewType } from "@/types/components/users.view";
+
+// Props
+const props = defineProps({
+    viewType: {
+        type: Number, // Matches UserViewType enum
+        required: true,
+    },
+});
+
+// Computed Classes
+const containerClasses = computed(() => {
+    const baseClasses = 'w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3';
+    if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-auto`;
+    if (props.viewType === UserViewType.OPPONENTTURN) return `${baseClasses}`;
+    return '';
+});
+
+const userBoxContainerClasses = computed(() =>
+    props.viewType === UserViewType.USERTURN
+        ? 'flex flex-col space-y-3'
+        : 'flex space-x-3'
+);
+
+// Example Users
+const users = [
+    { name: 'test1' },
+    { name: 'test2' },
+    { name: 'test3' },
+    { name: 'test3' },
+];
+</script>
+
+<template>
+    <div :class="containerClasses">
+        <!-- Conditional Header -->
+        <p v-if="viewType === UserViewType.USERTURN" class="my-1">Your Turn</p>
+        <p v-else-if="viewType === UserViewType.OPPONENTTURN" class="my-1">Opponent's Turn</p>
+        <p v-else-if="viewType === UserViewType.FRIENDS" class="my-1">Friends</p>
+
+        <!-- User Boxes -->
+        <div :class="userBoxContainerClasses">
+            <HomeUsersUserBox v-for="user in users" :key="user.name" :name="user.name"
+                :user-turn="viewType === UserViewType.USERTURN" />
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/components/home/Turns/Opponent.vue b/components/home/Turns/Opponent.vue
deleted file mode 100644
index c8b5acb..0000000
--- a/components/home/Turns/Opponent.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-    <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3">
-        <p class="my-1 ">Opponentes Turn</p>
-        <div class="flex space-x-3">
-            <HomeUsersUserBox name="test1" :user-turn="false"/>
-            <HomeUsersUserBox name="test2" :user-turn="false"/>
-            <HomeUsersUserBox name="test3" :user-turn="false"/>
-        </div>
-    </div>
-</template>
\ No newline at end of file
diff --git a/components/home/Turns/User.vue b/components/home/Turns/User.vue
deleted file mode 100644
index 824cbb5..0000000
--- a/components/home/Turns/User.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-    <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3 h-full">
-        <p class="my-1">Your Turn</p>
-        <div class="flex-col space-y-3">
-            <HomeUsersUserBox name="test1" :user-turn="true"/>
-            <HomeUsersUserBox name="test2" :user-turn="true"/>
-            <HomeUsersUserBox name="test3" :user-turn="true"/>
-        </div>
-    </div>
-</template>

From c35ffdf4ad6905d548762320dfb584c6d49b6270 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 22:21:25 +0100
Subject: [PATCH 09/31] made game buttons responsive

---
 components/home/Controls/GameButtons.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/home/Controls/GameButtons.vue b/components/home/Controls/GameButtons.vue
index 36344c6..7bb8d9d 100644
--- a/components/home/Controls/GameButtons.vue
+++ b/components/home/Controls/GameButtons.vue
@@ -4,10 +4,10 @@
 
 <template>
     <div class="flex space-x-3 w-full">
-        <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold py-20 rounded-3xl text-lg w-full">
+        <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold h-full rounded-3xl text-lg w-full">
             Start Game
         </button>
-        <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold py-20 rounded-3xl text-lg w-full">
+        <button class="bg-[#22a9fb] hover:bg-blue-700 text-white font-bold h-full rounded-3xl text-lg w-full">
             Start Round
         </button>
     </div>

From c62b699c29d06bc9450999515f0c39500572daff Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 22:21:41 +0100
Subject: [PATCH 10/31] added types for userview

---
 types/components/users.view.ts | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 types/components/users.view.ts

diff --git a/types/components/users.view.ts b/types/components/users.view.ts
new file mode 100644
index 0000000..525dc9b
--- /dev/null
+++ b/types/components/users.view.ts
@@ -0,0 +1,5 @@
+export enum UserViewType {
+    FRIENDS = 0,
+    OPPONENTTURN = 1,
+    USERTURN = 2 
+}
\ No newline at end of file

From 09fbb03505f3839eb4569673e7251ebec27a84f3 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 22:21:59 +0100
Subject: [PATCH 11/31] made home view more responsive

---
 components/home/Users/UserBox.vue | 45 ++++++++++++++++++++++++++-----
 pages/index.vue                   |  9 ++++---
 2 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index a687115..638f738 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -17,11 +17,42 @@
 </script>
 
 <template>
-    <div :class="['bg-blue-600', props.userTurn ? 'flex items-center h-30 w-full rounded-3xl p-3' : 'flex flex-col items-center justify-center h-30 w-full rounded-3xl p-3']">
-        <NuxtImg :class="['rounded-full w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16', props.userTurn ? 'mr-3' : 'mb-2']" :src="props.profilePicture.toString()" :alt="name"/>
-        <p class="text-white">{{ props.name }}</p>
-        <button v-if="props.userTurn" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="console.log(props.name)">
-            <NuxtImg src="icons/playButton.svg" alt="Play" class="w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16"/>
-        </button>
+    <div
+      :class="[
+        'bg-blue-600 rounded-3xl p-3 w-full', 
+        props.userTurn
+          ? 'flex items-center'
+          : 'flex flex-col items-center justify-center h-full'
+      ]"
+    >
+      <!-- Profile Picture -->
+      <NuxtImg
+        :class="[
+          'rounded-full', 
+          'w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14 lg:w-16 lg:h-16',
+          props.userTurn ? 'mr-3' : 'mb-2'
+        ]"
+        :src="props.profilePicture.toString()"
+        :alt="name"
+      />
+      
+      <!-- User Name -->
+      <p class="text-white text-sm sm:text-base md:text-lg lg:text-xl">
+        {{ props.name }}
+      </p>
+      
+      <!-- Play Button -->
+      <button
+        v-if="props.userTurn"
+        class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5"
+        @click="console.log(props.name)"
+      >
+        <NuxtImg
+          src="icons/playButton.svg"
+          alt="Play"
+          class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14"
+        />
+      </button>
     </div>
-</template>
\ No newline at end of file
+  </template>
+  
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 0f8d7a4..e330d39 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
+import { UserViewType } from "@/types/components/users.view"
 
 </script>
 
@@ -19,9 +20,11 @@ import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
       </template>
       <template #content>
         <div class="flex flex-col h-full p-3">
-          <HomeTurnsUser/>
-          <HomeTurnsOpponent/>
-          <HomeControlsGameButtons/>
+          <MultipleUsersView :view-type="UserViewType.USERTURN" class="h-3/6"/>
+          <MultipleUsersView :view-type="UserViewType.OPPONENTTURN"class="h-2/6"/>
+          <!--HomeTurnsUser/>
+          <HomeTurnsOpponent/-->
+          <HomeControlsGameButtons class="h-1/6"/>
         </div>
       </template>
       <template #footer>

From 0c2c624445286796707056b190fe162c60218f6b Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 5 Dec 2024 22:21:59 +0100
Subject: [PATCH 12/31] Fixed ESLint error

---
 components/MultipleUsersView.vue  |  3 ++-
 components/home/Users/UserBox.vue | 45 ++++++++++++++++++++++++++-----
 pages/index.vue                   |  9 ++++---
 3 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/components/MultipleUsersView.vue b/components/MultipleUsersView.vue
index fc78557..fddc6c8 100644
--- a/components/MultipleUsersView.vue
+++ b/components/MultipleUsersView.vue
@@ -41,7 +41,8 @@ const users = [
 
         <!-- User Boxes -->
         <div :class="userBoxContainerClasses">
-            <HomeUsersUserBox v-for="user in users" :key="user.name" :name="user.name"
+            <HomeUsersUserBox 
+            v-for="user in users" :key="user.name" :name="user.name"
                 :user-turn="viewType === UserViewType.USERTURN" />
         </div>
     </div>
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index a687115..638f738 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -17,11 +17,42 @@
 </script>
 
 <template>
-    <div :class="['bg-blue-600', props.userTurn ? 'flex items-center h-30 w-full rounded-3xl p-3' : 'flex flex-col items-center justify-center h-30 w-full rounded-3xl p-3']">
-        <NuxtImg :class="['rounded-full w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16', props.userTurn ? 'mr-3' : 'mb-2']" :src="props.profilePicture.toString()" :alt="name"/>
-        <p class="text-white">{{ props.name }}</p>
-        <button v-if="props.userTurn" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="console.log(props.name)">
-            <NuxtImg src="icons/playButton.svg" alt="Play" class="w-12 h-12 sm:w-16 sm:h-16 md:w-16 md:h-16 lg:w-16 lg:h-16"/>
-        </button>
+    <div
+      :class="[
+        'bg-blue-600 rounded-3xl p-3 w-full', 
+        props.userTurn
+          ? 'flex items-center'
+          : 'flex flex-col items-center justify-center h-full'
+      ]"
+    >
+      <!-- Profile Picture -->
+      <NuxtImg
+        :class="[
+          'rounded-full', 
+          'w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14 lg:w-16 lg:h-16',
+          props.userTurn ? 'mr-3' : 'mb-2'
+        ]"
+        :src="props.profilePicture.toString()"
+        :alt="name"
+      />
+      
+      <!-- User Name -->
+      <p class="text-white text-sm sm:text-base md:text-lg lg:text-xl">
+        {{ props.name }}
+      </p>
+      
+      <!-- Play Button -->
+      <button
+        v-if="props.userTurn"
+        class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5"
+        @click="console.log(props.name)"
+      >
+        <NuxtImg
+          src="icons/playButton.svg"
+          alt="Play"
+          class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14"
+        />
+      </button>
     </div>
-</template>
\ No newline at end of file
+  </template>
+  
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 0f8d7a4..04afcc2 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
+import { UserViewType } from "@/types/components/users.view"
 
 </script>
 
@@ -19,9 +20,11 @@ import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
       </template>
       <template #content>
         <div class="flex flex-col h-full p-3">
-          <HomeTurnsUser/>
-          <HomeTurnsOpponent/>
-          <HomeControlsGameButtons/>
+          <MultipleUsersView :view-type="UserViewType.USERTURN" class="h-3/6"/>
+          <MultipleUsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6"/>
+          <!--HomeTurnsUser/>
+          <HomeTurnsOpponent/-->
+          <HomeControlsGameButtons class="h-1/6"/>
         </div>
       </template>
       <template #footer>

From e7397605c8a06d0f0127222a186e2f53b0b7a3ef Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 6 Dec 2024 07:32:50 +0100
Subject: [PATCH 13/31] fix(friends): corrected friend list scrolling behavior

---
 components/profile/Friendlist.vue | 65 +++++++++++++++++--------------
 1 file changed, 36 insertions(+), 29 deletions(-)

diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 3e59cca..c958df3 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import {
-    FriendshipStatus,
-    FriendshipType,
-    type GetFriendsResponse
-} from "@/types/api/user.friends";
+import {FriendshipStatus, FriendshipType, type GetFriendsResponse} from "@/types/api/user.friends";
 
 const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", () => [])
 const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
@@ -11,39 +7,50 @@ const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () =
 const session = useSupabaseSession()
 
 onMounted(async () => {
-    if (session.value) {
-        await getFriendships()
-        friends.value.push(friends.value[0])
-    }
+  if (session.value) {
+    await getFriendships()
+    friends.value.push(friends.value[0])
+  }
 })
 
 async function getFriendships() {
-    $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends')
-        .then((data) => {
-            requests.value = data.filter((item) => item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
-            friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
-        });
+  $fetch<GetFriendsResponse[]>('http://localhost:3000/api/v1/user/friends')
+      .then((data) => {
+        requests.value = data.filter((item) => item.request_type == FriendshipType.INCOMING && item.status === FriendshipStatus.PENDING)
+        friends.value = data.filter((item) => item.status === FriendshipStatus.ACCEPTED)
+      });
 }
 
 function addFriend() {
-    const newFriend = {
-        friend_username: "sfsdf",
-    }
-    friends.value.push(newFriend)
+  const newFriend = {
+    friend_username: "sfsdf",
+  }
+  friends.value.push(newFriend)
 }
 </script>
 
 <template>
-    <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3">
-        <p class="my-1">Friends</p>
-        <div :class="['flex space-x-3', friends.length > 3 ? 'overflow-x-auto' : '']">
-            <HomeUsersUserBox 
-                v-for="item in friends" :key="item.friend_id" :profile-picture="item.friend_avatar?.toString()" :name="item.friend_username" :user-turn="false"
-                :class="friends.length > 3 ? 'shrink-0' : ''"
-                />
-        </div>
-        <div class="mt-3">
-            <button  class="p-2 bg-blue-500 text-white rounded ml-2" @click="addFriend">Add Friend</button>
-        </div>
+  <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3">
+    <p class="my-1">Friends</p>
+    <div class="relative">
+      <div
+          :class="['flex gap-3', friends.length > 3 ? 'overflow-x-auto pb-2' : '']">
+        <HomeUsersUserBox
+            v-for="item in friends"
+            :key="item.friend_id"
+            :profile-picture="item.friend_avatar?.toString()"
+            :name="item.friend_username"
+            :user-turn="false"
+            :class="[
+                        friends.length > 3 ? 'w-[calc(33.33%-0.67rem)] flex-shrink-0' :
+                        friends.length === 3 ? 'w-1/3' :
+                        friends.length === 2 ? 'w-1/2' : 'w-full'
+                    ]"
+        />
+      </div>
     </div>
+    <div class="mt-3">
+      <button class="p-2 bg-blue-500 text-white rounded ml-2" @click="addFriend">Add Friend</button>
+    </div>
+  </div>
 </template>
\ No newline at end of file

From a1fc5f20e42113e4b5274b6833aac1dfe38412cb Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 6 Dec 2024 08:17:37 +0100
Subject: [PATCH 14/31] update footer

---
 components/profile/Friendlist.vue |  2 +-
 nuxt.config.ts                    |  2 +-
 package.json                      |  2 ++
 pages/index.vue                   | 13 +++++++++----
 pages/profile.vue                 | 32 ++++++++++++++++++-------------
 5 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index c958df3..0fa5e1f 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -9,7 +9,7 @@ const session = useSupabaseSession()
 onMounted(async () => {
   if (session.value) {
     await getFriendships()
-    friends.value.push(friends.value[0])
+    //friends.value.push(friends.value[0]) unexpected behavior on initial page load
   }
 })
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 9a5de5a..50c0cb9 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -2,7 +2,7 @@
 export default defineNuxtConfig({
     compatibilityDate: '2024-04-03',
     devtools: {enabled: true},
-    modules: ['@nuxtjs/tailwindcss', '@nuxt/eslint', '@nuxtjs/supabase', '@nuxt/image'],
+    modules: ['@nuxtjs/tailwindcss', '@nuxt/eslint', '@nuxtjs/supabase', '@nuxt/image', '@nuxt/icon'],
     supabase: {
         redirectOptions: {
             login: '/login',
diff --git a/package.json b/package.json
index ffd3bf5..d71c4d5 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@hebilicious/authjs-nuxt": "^0.3.5",
+    "@nuxt/icon": "^1.9.0",
     "@nuxt/image": "^1.8.1",
     "@nuxtjs/supabase": "v1.2.2",
     "@nuxtjs/tailwindcss": "^6.12.1",
@@ -22,6 +23,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@iconify-json/mdi": "^1.2.1",
     "@nuxt/eslint": "^0.5.7",
     "@types/node": "^22.8.5",
     "eslint": "^9.11.1",
diff --git a/pages/index.vue b/pages/index.vue
index 0f8d7a4..fae7360 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
-
 </script>
 
 <template>
@@ -25,9 +24,15 @@ import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
         </div>
       </template>
       <template #footer>
-        <div class="text-4xl">A</div>
-        <div class="text-4xl">B</div>
-        <div class="text-4xl">C</div>
+        <NuxtLink to="/playlists" class="inline-flex items-center text-5xl rounded-xl py-5">
+          <Icon name="mdi:album" class="text-white"/>
+        </NuxtLink>
+        <NuxtLink to="/" class="inline-flex items-center bg-blue-500 text-6xl rounded-full p-1.5">
+          <Icon name="mdi:home" class="text-white"/>
+        </NuxtLink>
+        <NuxtLink to="/profile" class="inline-flex items-center text-5xl rounded-xl py-5">
+          <Icon name="mdi:account-details" class="text-white"/>
+        </NuxtLink>
       </template>
     </HeaderFooterView>
   </div>
diff --git a/pages/profile.vue b/pages/profile.vue
index 48e8a39..492e694 100644
--- a/pages/profile.vue
+++ b/pages/profile.vue
@@ -1,19 +1,25 @@
 <script setup lang="ts">
-    import HeaderFooterView from "~/layouts/FooterView.vue";
+import HeaderFooterView from "~/layouts/FooterView.vue";
 </script>
 
 <template>
-    <div class="bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
-        <HeaderFooterView>
-            <template #content>
-                <ProfileOverview/>
-            </template>
+  <div class="bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
+    <HeaderFooterView>
+      <template #content>
+        <ProfileOverview/>
+      </template>
 
-            <template #footer>
-                <div class="text-4xl">A</div>
-                <div class="text-4xl">B</div>
-                <div class="text-4xl">C</div>
-            </template>
-        </HeaderFooterView>
-    </div>
+      <template #footer>
+        <NuxtLink to="/playlists" class="inline-flex items-center text-5xl rounded-xl py-5">
+          <Icon name="mdi:album" class="text-white"/>
+        </NuxtLink>
+        <NuxtLink to="/" class="inline-flex items-center bg-blue-500 text-6xl rounded-full p-1.5">
+          <Icon name="mdi:home" class="text-white"/>
+        </NuxtLink>
+        <NuxtLink to="/profile" class="inline-flex items-center text-5xl rounded-xl py-5">
+          <Icon name="mdi:account-details" class="text-white"/>
+        </NuxtLink>
+      </template>
+    </HeaderFooterView>
+  </div>
 </template>
\ No newline at end of file

From ec95723f7abab7a5a1d77156a9e595157cbbd801 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 6 Dec 2024 08:18:05 +0100
Subject: [PATCH 15/31] update footer

---
 package-lock.json | 841 ++++++++++++++++++++++++++++++----------------
 1 file changed, 542 insertions(+), 299 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index decf1e8..4a8d988 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@hebilicious/authjs-nuxt": "^0.3.5",
+        "@nuxt/icon": "^1.9.0",
         "@nuxt/image": "^1.8.1",
         "@nuxtjs/supabase": "v1.2.2",
         "@nuxtjs/tailwindcss": "^6.12.1",
@@ -17,6 +18,7 @@
         "zod": "^3.23.8"
       },
       "devDependencies": {
+        "@iconify-json/mdi": "^1.2.1",
         "@nuxt/eslint": "^0.5.7",
         "@types/node": "^22.8.5",
         "eslint": "^9.11.1",
@@ -48,6 +50,19 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@antfu/install-pkg": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-0.4.1.tgz",
+      "integrity": "sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==",
+      "license": "MIT",
+      "dependencies": {
+        "package-manager-detector": "^0.2.0",
+        "tinyexec": "^0.3.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@antfu/utils": {
       "version": "0.7.10",
       "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.7.10.tgz",
@@ -98,12 +113,13 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
-      "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
+      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/highlight": "^7.24.7",
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "js-tokens": "^4.0.0",
         "picocolors": "^1.0.0"
       },
       "engines": {
@@ -111,30 +127,30 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.25.4",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.4.tgz",
-      "integrity": "sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.3.tgz",
+      "integrity": "sha512-nHIxvKPniQXpmQLb0vhY3VaFb3S0YrTAwpOWJZh1wn3oJPjJk9Asva204PsBdmAE8vpzfHudT8DB0scYvy9q0g==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.2.tgz",
-      "integrity": "sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==",
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.0.tgz",
+      "integrity": "sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==",
       "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.24.7",
-        "@babel/generator": "^7.25.0",
-        "@babel/helper-compilation-targets": "^7.25.2",
-        "@babel/helper-module-transforms": "^7.25.2",
-        "@babel/helpers": "^7.25.0",
-        "@babel/parser": "^7.25.0",
-        "@babel/template": "^7.25.0",
-        "@babel/traverse": "^7.25.2",
-        "@babel/types": "^7.25.2",
+        "@babel/code-frame": "^7.26.0",
+        "@babel/generator": "^7.26.0",
+        "@babel/helper-compilation-targets": "^7.25.9",
+        "@babel/helper-module-transforms": "^7.26.0",
+        "@babel/helpers": "^7.26.0",
+        "@babel/parser": "^7.26.0",
+        "@babel/template": "^7.25.9",
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.26.0",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -159,15 +175,16 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.25.6",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.6.tgz",
-      "integrity": "sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.3.tgz",
+      "integrity": "sha512-6FF/urZvD0sTeO7k6/B15pMLC4CHUv1426lzr3N01aHJTl046uCAh9LXW/fzeXXjPNCJ6iABW5XaWOsIZB93aQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.25.6",
+        "@babel/parser": "^7.26.3",
+        "@babel/types": "^7.26.3",
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25",
-        "jsesc": "^2.5.1"
+        "jsesc": "^3.0.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -186,14 +203,14 @@
       }
     },
     "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz",
-      "integrity": "sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz",
+      "integrity": "sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==",
       "license": "MIT",
       "dependencies": {
-        "@babel/compat-data": "^7.25.2",
-        "@babel/helper-validator-option": "^7.24.8",
-        "browserslist": "^4.23.1",
+        "@babel/compat-data": "^7.25.9",
+        "@babel/helper-validator-option": "^7.25.9",
+        "browserslist": "^4.24.0",
         "lru-cache": "^5.1.1",
         "semver": "^6.3.1"
       },
@@ -254,28 +271,27 @@
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz",
-      "integrity": "sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
+      "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/traverse": "^7.24.7",
-        "@babel/types": "^7.24.7"
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.25.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.25.2.tgz",
-      "integrity": "sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==",
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz",
+      "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.24.7",
-        "@babel/helper-simple-access": "^7.24.7",
-        "@babel/helper-validator-identifier": "^7.24.7",
-        "@babel/traverse": "^7.25.2"
+        "@babel/helper-module-imports": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "@babel/traverse": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -322,19 +338,6 @@
         "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/helper-simple-access": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz",
-      "integrity": "sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/traverse": "^7.24.7",
-        "@babel/types": "^7.24.7"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.24.7.tgz",
@@ -349,67 +352,52 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
-      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
-      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.24.8",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz",
-      "integrity": "sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
+      "integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.25.6",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.6.tgz",
-      "integrity": "sha512-Xg0tn4HcfTijTwfDwYlvVCl43V6h4KyVVX2aEm4qdO/PC6L2YvzLHFdmxhoeSA3eslcE6+ZVXHgWwopXYLNq4Q==",
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.0.tgz",
+      "integrity": "sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/template": "^7.25.0",
-        "@babel/types": "^7.25.6"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/highlight": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz",
-      "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.24.7",
-        "chalk": "^2.4.2",
-        "js-tokens": "^4.0.0",
-        "picocolors": "^1.0.0"
+        "@babel/template": "^7.25.9",
+        "@babel/types": "^7.26.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.25.6",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.6.tgz",
-      "integrity": "sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz",
+      "integrity": "sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.25.6"
+        "@babel/types": "^7.26.3"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -527,39 +515,39 @@
       }
     },
     "node_modules/@babel/standalone": {
-      "version": "7.25.6",
-      "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.25.6.tgz",
-      "integrity": "sha512-Kf2ZcZVqsKbtYhlA7sP0z5A3q5hmCVYMKMWRWNK/5OVwHIve3JY1djVRmIVAx8FMueLIfZGKQDIILK2w8zO4mg==",
+      "version": "7.26.4",
+      "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.26.4.tgz",
+      "integrity": "sha512-SF+g7S2mhTT1b7CHyfNjDkPU1corxg4LPYsyP0x5KuCl+EbtBQHRLqr9N3q7e7+x7NQ5LYxQf8mJ2PmzebLr0A==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.25.0",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.0.tgz",
-      "integrity": "sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
+      "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.24.7",
-        "@babel/parser": "^7.25.0",
-        "@babel/types": "^7.25.0"
+        "@babel/code-frame": "^7.25.9",
+        "@babel/parser": "^7.25.9",
+        "@babel/types": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.25.6",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.6.tgz",
-      "integrity": "sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==",
+      "version": "7.26.4",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.4.tgz",
+      "integrity": "sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==",
       "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.24.7",
-        "@babel/generator": "^7.25.6",
-        "@babel/parser": "^7.25.6",
-        "@babel/template": "^7.25.0",
-        "@babel/types": "^7.25.6",
+        "@babel/code-frame": "^7.26.2",
+        "@babel/generator": "^7.26.3",
+        "@babel/parser": "^7.26.3",
+        "@babel/template": "^7.25.9",
+        "@babel/types": "^7.26.3",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
@@ -568,14 +556,13 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.25.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz",
-      "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz",
+      "integrity": "sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.24.8",
-        "@babel/helper-validator-identifier": "^7.24.7",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1947,6 +1934,61 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@iconify-json/mdi": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@iconify-json/mdi/-/mdi-1.2.1.tgz",
+      "integrity": "sha512-dSkQU78gsZV6Yxnq78+LuX7jzeFC/5NAmz7O3rh558GimGFcwMVY/OtqRowIzjqJBmMmWZft7wkFV4TrwRXjlg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/collections": {
+      "version": "1.0.490",
+      "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.490.tgz",
+      "integrity": "sha512-Ovq4xC2gXl2o3P8me4VNuG9ow+tU1d6u+7YHR6rU9+xTrpXKvew76gyls+SqsOgGcQZYl/NuzraKBW1ON3/7jA==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "2.1.33",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-2.1.33.tgz",
+      "integrity": "sha512-jP9h6v/g0BIZx0p7XGJJVtkVnydtbgTgt9mVNcGDYwaa7UhdHdI9dvoq+gKj9sijMSJKxUPEG2JyjsgXjxL7Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^0.4.0",
+        "@antfu/utils": "^0.7.10",
+        "@iconify/types": "^2.0.0",
+        "debug": "^4.3.6",
+        "kolorist": "^1.8.0",
+        "local-pkg": "^0.5.0",
+        "mlly": "^1.7.1"
+      }
+    },
+    "node_modules/@iconify/vue": {
+      "version": "4.2.0-dev.2",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.2.0-dev.2.tgz",
+      "integrity": "sha512-fHsLaBaegrXyshUR2j9sV4TXkTgRQ9FhQ9PIqWgW/dFTPcMe2uEtUr1H9XQaDTpN8F9chnVqhLH8FT9asTDaSQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
     "node_modules/@ioredis/commands": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
@@ -2505,6 +2547,209 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@nuxt/icon": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/icon/-/icon-1.9.0.tgz",
+      "integrity": "sha512-UDPrYwDVq7FvU9ENG8dDsI3RmqMmncmKyFQMD3BPJvh4DFGgmBVRCno8dtAyXYms6Vymz4kXQY7edpM93LZiMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/collections": "^1.0.484",
+        "@iconify/types": "^2.0.0",
+        "@iconify/utils": "^2.1.33",
+        "@iconify/vue": "^4.2.0-dev.2",
+        "@nuxt/devtools-kit": "^1.6.0",
+        "@nuxt/kit": "^3.14.159",
+        "consola": "^3.2.3",
+        "local-pkg": "^0.5.1",
+        "mlly": "^1.7.3",
+        "ohash": "^1.1.4",
+        "pathe": "^1.1.2",
+        "std-env": "^3.8.0",
+        "tinyglobby": "^0.2.10"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/@nuxt/devtools-kit": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@nuxt/devtools-kit/-/devtools-kit-1.6.3.tgz",
+      "integrity": "sha512-rcWpsGUnaDyGtmA667A4FDrVWdjuAturHV+Lkt3Xmedu5G4wC4sOzoA0+/Yco3/kWZ6fLVUTKwI2mvfzaQIugA==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.14.1592",
+        "@nuxt/schema": "^3.14.1592",
+        "execa": "^7.2.0"
+      },
+      "peerDependencies": {
+        "vite": "*"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/@nuxt/kit": {
+      "version": "3.14.1592",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.14.1592.tgz",
+      "integrity": "sha512-r9r8bISBBisvfcNgNL3dSIQHSBe0v5YkX5zwNblIC2T0CIEgxEVoM5rq9O5wqgb5OEydsHTtT2hL57vdv6VT2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/schema": "3.14.1592",
+        "c12": "^2.0.1",
+        "consola": "^3.2.3",
+        "defu": "^6.1.4",
+        "destr": "^2.0.3",
+        "globby": "^14.0.2",
+        "hash-sum": "^2.0.0",
+        "ignore": "^6.0.2",
+        "jiti": "^2.4.0",
+        "klona": "^2.0.6",
+        "knitwork": "^1.1.0",
+        "mlly": "^1.7.3",
+        "pathe": "^1.1.2",
+        "pkg-types": "^1.2.1",
+        "scule": "^1.3.0",
+        "semver": "^7.6.3",
+        "ufo": "^1.5.4",
+        "unctx": "^2.3.1",
+        "unimport": "^3.13.2",
+        "untyped": "^1.5.1"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/@nuxt/schema": {
+      "version": "3.14.1592",
+      "resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.14.1592.tgz",
+      "integrity": "sha512-A1d/08ueX8stTXNkvGqnr1eEXZgvKn+vj6s7jXhZNWApUSqMgItU4VK28vrrdpKbjIPwq2SwhnGOHUYvN9HwCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^2.0.1",
+        "compatx": "^0.1.8",
+        "consola": "^3.2.3",
+        "defu": "^6.1.4",
+        "hookable": "^5.5.3",
+        "pathe": "^1.1.2",
+        "pkg-types": "^1.2.1",
+        "scule": "^1.3.0",
+        "std-env": "^3.8.0",
+        "ufo": "^1.5.4",
+        "uncrypto": "^0.1.3",
+        "unimport": "^3.13.2",
+        "untyped": "^1.5.1"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.10.0"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/c12": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/c12/-/c12-2.0.1.tgz",
+      "integrity": "sha512-Z4JgsKXHG37C6PYUtIxCfLJZvo6FyhHJoClwwb9ftUkLpPSkuYqn6Tr+vnaN8hymm0kIbcg6Ey3kv/Q71k5w/A==",
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.1",
+        "confbox": "^0.1.7",
+        "defu": "^6.1.4",
+        "dotenv": "^16.4.5",
+        "giget": "^1.2.3",
+        "jiti": "^2.3.0",
+        "mlly": "^1.7.1",
+        "ohash": "^1.1.4",
+        "pathe": "^1.1.2",
+        "perfect-debounce": "^1.0.0",
+        "pkg-types": "^1.2.0",
+        "rc9": "^2.1.2"
+      },
+      "peerDependencies": {
+        "magicast": "^0.3.5"
+      },
+      "peerDependenciesMeta": {
+        "magicast": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/chokidar": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
+      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/fdir": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.2.tgz",
+      "integrity": "sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/ignore": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-6.0.2.tgz",
+      "integrity": "sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/jiti": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.1.tgz",
+      "integrity": "sha512-yPBThwecp1wS9DmoA4x4KR2h3QoslacnDR8ypuFM962kI4/456Iy1oHx2RAgh4jfZNdn0bctsdadceiBUgpU1g==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/readdirp": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
+      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/tinyglobby": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.10.tgz",
+      "integrity": "sha512-Zc+8eJlFMvgatPZTl6A9L/yht8QqdmUNtURHaKZLmKBE12hNPSrqNkUp2cs3M/UKmNVVAMFQYSjYIVHDjW5zew==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/@nuxt/image": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@nuxt/image/-/image-1.8.1.tgz",
@@ -3202,14 +3447,14 @@
       }
     },
     "node_modules/@rollup/pluginutils": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.2.tgz",
-      "integrity": "sha512-/FIdS3PyZ39bjZlwqFnWqCOVnW7o963LtKMwQOD0NhQqw22gSr2YY1afu3FxRip4ZCZNsD5jq6Aaz6QV3D/Njw==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.3.tgz",
+      "integrity": "sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==",
       "license": "MIT",
       "dependencies": {
         "@types/estree": "^1.0.0",
         "estree-walker": "^2.0.2",
-        "picomatch": "^2.3.1"
+        "picomatch": "^4.0.2"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -3229,6 +3474,18 @@
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
       "license": "MIT"
     },
+    "node_modules/@rollup/pluginutils/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.22.4",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz",
@@ -4553,18 +4810,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/ansi-styles": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
@@ -5005,9 +5250,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.23.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz",
-      "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==",
+      "version": "4.24.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz",
+      "integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==",
       "funding": [
         {
           "type": "opencollective",
@@ -5024,10 +5269,10 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001646",
-        "electron-to-chromium": "^1.5.4",
+        "caniuse-lite": "^1.0.30001669",
+        "electron-to-chromium": "^1.5.41",
         "node-releases": "^2.0.18",
-        "update-browserslist-db": "^1.1.0"
+        "update-browserslist-db": "^1.1.1"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -5201,9 +5446,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001663",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001663.tgz",
-      "integrity": "sha512-o9C3X27GLKbLeTYZ6HBOLU1tsAcBZsLis28wrVzddShCS16RujjHp9GDHKZqrB3meE0YjhawvMFsGb/igqiPzA==",
+      "version": "1.0.30001686",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001686.tgz",
+      "integrity": "sha512-Y7deg0Aergpa24M3qLC5xjNklnKnhsmSyR/V89dLZ1n0ucJIFNs7PgR2Yfa/Zf6W79SbBicgtGxZr2juHkEUIA==",
       "funding": [
         {
           "type": "opencollective",
@@ -5231,29 +5476,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/chalk/node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/character-entities-html4": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
@@ -5484,20 +5706,12 @@
         "node": ">=12.5.0"
       }
     },
-    "node_modules/color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "license": "MIT",
-      "dependencies": {
-        "color-name": "1.1.3"
-      }
-    },
     "node_modules/color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true
     },
     "node_modules/color-string": {
       "version": "1.9.1",
@@ -5622,9 +5836,9 @@
       "license": "MIT"
     },
     "node_modules/confbox": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.7.tgz",
-      "integrity": "sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA==",
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.8.tgz",
+      "integrity": "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==",
       "license": "MIT"
     },
     "node_modules/consola": {
@@ -6354,9 +6568,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.28",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.28.tgz",
-      "integrity": "sha512-VufdJl+rzaKZoYVUijN13QcXVF5dWPZANeFTLNy+OSpHdDL5ynXTF35+60RSBbaQYB1ae723lQXHCrf4pyLsMw==",
+      "version": "1.5.71",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.71.tgz",
+      "integrity": "sha512-dB68l59BI75W1BUGVTAEJy45CEVuEGy9qPVVQ8pnHyHMn36PLPPoE1mjLH+lo9rKulO3HC2OhbACI/8tCqJBcA==",
       "license": "ISC"
     },
     "node_modules/emoji-regex": {
@@ -6771,19 +6985,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint-plugin-unicorn/node_modules/jsesc": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
-      "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/eslint-plugin-vue": {
       "version": "9.28.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.28.0.tgz",
@@ -7682,15 +7883,6 @@
         "unenv": "^1.9.0"
       }
     },
-    "node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
@@ -8424,15 +8616,15 @@
       }
     },
     "node_modules/jsesc": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
+      "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
       "license": "MIT",
       "bin": {
         "jsesc": "bin/jsesc"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=6"
       }
     },
     "node_modules/json-buffer": {
@@ -8851,13 +9043,13 @@
       }
     },
     "node_modules/local-pkg": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz",
-      "integrity": "sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==",
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.1.tgz",
+      "integrity": "sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==",
       "license": "MIT",
       "dependencies": {
-        "mlly": "^1.4.2",
-        "pkg-types": "^1.0.3"
+        "mlly": "^1.7.3",
+        "pkg-types": "^1.2.1"
       },
       "engines": {
         "node": ">=14"
@@ -8936,9 +9128,9 @@
       "license": "MIT"
     },
     "node_modules/magic-string": {
-      "version": "0.30.11",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
-      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
+      "version": "0.30.14",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.14.tgz",
+      "integrity": "sha512-5c99P1WKTed11ZC0HMJOj6CDIue6F8ySu+bJL+85q1zBEIY8IklrJ1eiKC2NDRh3Ct3FcvmJPyQHb9erXMTJNw==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0"
@@ -9342,15 +9534,27 @@
       "optional": true
     },
     "node_modules/mlly": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.1.tgz",
-      "integrity": "sha512-rrVRZRELyQzrIUAVMHxP97kv+G786pHmOKzuFII8zDYahFBS7qnHh2AlYSl1GAHhaMPCz6/oHjVMcfFYgFYHgA==",
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.3.tgz",
+      "integrity": "sha512-xUsx5n/mN0uQf4V548PKQ+YShA4/IW0KI1dZhrNrPCLG+xizETbHTkOa1f8/xut9JRPp8kQuMnz0oqwkTiLo/A==",
       "license": "MIT",
       "dependencies": {
-        "acorn": "^8.11.3",
+        "acorn": "^8.14.0",
         "pathe": "^1.1.2",
-        "pkg-types": "^1.1.1",
-        "ufo": "^1.5.3"
+        "pkg-types": "^1.2.1",
+        "ufo": "^1.5.4"
+      }
+    },
+    "node_modules/mlly/node_modules/acorn": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
       }
     },
     "node_modules/mri": {
@@ -10764,13 +10968,13 @@
       }
     },
     "node_modules/pkg-types": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.2.0.tgz",
-      "integrity": "sha512-+ifYuSSqOQ8CqP4MbZA5hDpb97n3E8SVWdJe+Wms9kj745lmd3b7EZJiqvmLwAlmRfjrI7Hi5z3kdBJ93lFNPA==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.2.1.tgz",
+      "integrity": "sha512-sQoqa8alT3nHjGuTjuKgOnvjo4cljkufdtLMnO2LBP/wRwuDlo1tkaEdMxCRhyGRPacv/ztlZgDPm2b7FAmEvw==",
       "license": "MIT",
       "dependencies": {
-        "confbox": "^0.1.7",
-        "mlly": "^1.7.1",
+        "confbox": "^0.1.8",
+        "mlly": "^1.7.2",
         "pathe": "^1.1.2"
       }
     },
@@ -12869,9 +13073,9 @@
       }
     },
     "node_modules/std-env": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.7.0.tgz",
-      "integrity": "sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==",
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.8.0.tgz",
+      "integrity": "sha512-Bc3YwwCB+OzldMxOXJIIvC6cPRWr/LxOp48CdQTOkPyk/t4JWWJbrilwBd7RJzKV8QW7tJkcgAmeuLLJugl5/w==",
       "license": "MIT"
     },
     "node_modules/streamx": {
@@ -13005,21 +13209,21 @@
       }
     },
     "node_modules/strip-literal": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-2.1.0.tgz",
-      "integrity": "sha512-Op+UycaUt/8FbN/Z2TWPBLge3jWrP3xj10f3fnYxf052bKuS3EKs1ZQcVGjnEMdsNVAM+plXRdmjrZ/KgG3Skw==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-2.1.1.tgz",
+      "integrity": "sha512-631UJ6O00eNGfMiWG78ck80dfBab8X6IVFB51jZK5Icd7XAs60Z5y7QdSd/wGIklnWvRbUNloVzhOKKmutxQ6Q==",
       "license": "MIT",
       "dependencies": {
-        "js-tokens": "^9.0.0"
+        "js-tokens": "^9.0.1"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/strip-literal/node_modules/js-tokens": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.0.tgz",
-      "integrity": "sha512-WriZw1luRMlmV3LGJaR6QOJjWwgLUTf89OwT2lUOyjX2dJGBwgmIkbcz+7WFZjrZM635JOIR517++e/67CP9dQ==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
+      "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
       "license": "MIT"
     },
     "node_modules/stylehacks": {
@@ -13125,18 +13329,6 @@
         "node": ">=16"
       }
     },
-    "node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "license": "MIT",
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -13484,6 +13676,12 @@
       "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
       "license": "MIT"
     },
+    "node_modules/tinyexec": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.1.tgz",
+      "integrity": "sha512-WiCJLEECkO18gwqIp6+hJg0//p23HXp4S+gGtAKu3mI2F2/sXC4FvHvXvB0zJVVaTPhx1/tOwdbRsa1sOBIKqQ==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.6",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.6.tgz",
@@ -13523,15 +13721,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -13827,24 +14016,76 @@
       }
     },
     "node_modules/unimport": {
-      "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.12.0.tgz",
-      "integrity": "sha512-5y8dSvNvyevsnw4TBQkIQR1Rjdbb+XjVSwQwxltpnVZrStBvvPkMPcZrh1kg5kY77kpx6+D4Ztd3W6FOBH/y2Q==",
+      "version": "3.14.4",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.14.4.tgz",
+      "integrity": "sha512-90jQsiS2D0vIrWg4U58do7B5Hr4q0qt9o/rS0TrDMzrvNuAQ7XF1sQ47Pe2zjVlvFWNkoPBb/2l2GJFy5XjqDg==",
       "license": "MIT",
       "dependencies": {
-        "@rollup/pluginutils": "^5.1.0",
-        "acorn": "^8.12.1",
+        "@rollup/pluginutils": "^5.1.3",
+        "acorn": "^8.14.0",
         "escape-string-regexp": "^5.0.0",
         "estree-walker": "^3.0.3",
-        "fast-glob": "^3.3.2",
-        "local-pkg": "^0.5.0",
-        "magic-string": "^0.30.11",
-        "mlly": "^1.7.1",
+        "local-pkg": "^0.5.1",
+        "magic-string": "^0.30.14",
+        "mlly": "^1.7.3",
         "pathe": "^1.1.2",
-        "pkg-types": "^1.2.0",
+        "picomatch": "^4.0.2",
+        "pkg-types": "^1.2.1",
         "scule": "^1.3.0",
-        "strip-literal": "^2.1.0",
-        "unplugin": "^1.14.1"
+        "strip-literal": "^2.1.1",
+        "tinyglobby": "^0.2.10",
+        "unplugin": "^1.16.0"
+      }
+    },
+    "node_modules/unimport/node_modules/acorn": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/unimport/node_modules/fdir": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.2.tgz",
+      "integrity": "sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unimport/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/unimport/node_modules/tinyglobby": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.10.tgz",
+      "integrity": "sha512-Zc+8eJlFMvgatPZTl6A9L/yht8QqdmUNtURHaKZLmKBE12hNPSrqNkUp2cs3M/UKmNVVAMFQYSjYIVHDjW5zew==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
       }
     },
     "node_modules/unist-util-is": {
@@ -13930,24 +14171,16 @@
       }
     },
     "node_modules/unplugin": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.14.1.tgz",
-      "integrity": "sha512-lBlHbfSFPToDYp9pjXlUEFVxYLaue9f9T1HC+4OHlmj+HnMDdz9oZY+erXfoCe/5V/7gKUSY2jpXPb9S7f0f/w==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.16.0.tgz",
+      "integrity": "sha512-5liCNPuJW8dqh3+DM6uNM2EI3MLLpCKp/KY+9pB5M2S2SR2qvvDHhKgBOaTWEbZTAws3CXfB0rKTIolWKL05VQ==",
       "license": "MIT",
       "dependencies": {
-        "acorn": "^8.12.1",
+        "acorn": "^8.14.0",
         "webpack-virtual-modules": "^0.6.2"
       },
       "engines": {
         "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "webpack-sources": "^3"
-      },
-      "peerDependenciesMeta": {
-        "webpack-sources": {
-          "optional": true
-        }
       }
     },
     "node_modules/unplugin-vue-router": {
@@ -13980,6 +14213,18 @@
         }
       }
     },
+    "node_modules/unplugin/node_modules/acorn": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/unstorage": {
       "version": "1.12.0",
       "resolved": "https://registry.npmjs.org/unstorage/-/unstorage-1.12.0.tgz",
@@ -14075,23 +14320,32 @@
       }
     },
     "node_modules/untyped": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/untyped/-/untyped-1.4.2.tgz",
-      "integrity": "sha512-nC5q0DnPEPVURPhfPQLahhSTnemVtPzdx7ofiRxXpOB2SYnb3MfdU3DVGyJdS8Lx+tBWeAePO8BfU/3EgksM7Q==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/untyped/-/untyped-1.5.1.tgz",
+      "integrity": "sha512-reBOnkJBFfBZ8pCKaeHgfZLcehXtM6UTxc+vqs1JvCps0c4amLNp3fhdGBZwYp+VLyoY9n3X5KOP7lCyWBUX9A==",
       "license": "MIT",
       "dependencies": {
-        "@babel/core": "^7.23.7",
-        "@babel/standalone": "^7.23.8",
-        "@babel/types": "^7.23.6",
+        "@babel/core": "^7.25.7",
+        "@babel/standalone": "^7.25.7",
+        "@babel/types": "^7.25.7",
         "defu": "^6.1.4",
-        "jiti": "^1.21.0",
+        "jiti": "^2.3.1",
         "mri": "^1.2.0",
-        "scule": "^1.2.0"
+        "scule": "^1.3.0"
       },
       "bin": {
         "untyped": "dist/cli.mjs"
       }
     },
+    "node_modules/untyped/node_modules/jiti": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.1.tgz",
+      "integrity": "sha512-yPBThwecp1wS9DmoA4x4KR2h3QoslacnDR8ypuFM962kI4/456Iy1oHx2RAgh4jfZNdn0bctsdadceiBUgpU1g==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/unwasm": {
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/unwasm/-/unwasm-0.3.9.tgz",
@@ -14107,9 +14361,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
-      "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
+      "integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==",
       "funding": [
         {
           "type": "opencollective",
@@ -14126,8 +14380,8 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "escalade": "^3.1.2",
-        "picocolors": "^1.0.1"
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.0"
       },
       "bin": {
         "update-browserslist-db": "cli.js"
@@ -15176,17 +15430,6 @@
       "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
       "license": "BSD-2-Clause"
     },
-    "node_modules/webpack-sources": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
-      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/webpack-virtual-modules": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",

From bb33da5e78ca7a05acf343ef9b3c0b847daadaf6 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 6 Dec 2024 08:29:26 +0100
Subject: [PATCH 16/31] add todo

---
 components/profile/ProfileInformation.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/profile/ProfileInformation.vue b/components/profile/ProfileInformation.vue
index 5ff4b3d..0ba0a5e 100644
--- a/components/profile/ProfileInformation.vue
+++ b/components/profile/ProfileInformation.vue
@@ -15,7 +15,7 @@ onMounted(async () => {
 })
 
 async function getProfileInformation() {
-    $fetch<GetProfileResponse>('http://localhost:3000/api/v1/user/' + session.value?.user.id)
+    $fetch<GetProfileResponse>('http://localhost:3000/api/v1/user/' + session.value?.user.id) //TODO: change after implementing diffrent user endpoint. also add as global state wit useState named 'user'
       .then((data) => {
         username.value = data.username
         if (data.user_avatar) {

From dc9b50935a508a25fb3ef9989c8781c96ba4d5c8 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Fri, 6 Dec 2024 20:49:14 +0100
Subject: [PATCH 17/31] fixed correct overflow for friendlist

---
 components/profile/Friendlist.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 0fa5e1f..2e0d2ad 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -27,6 +27,9 @@ function addFriend() {
   }
   friends.value.push(newFriend)
 }
+
+
+// :class="['flex gap-3', friends.length > 3 ? 'overflow-x-auto pb-2' : '']"
 </script>
 
 <template>
@@ -34,7 +37,7 @@ function addFriend() {
     <p class="my-1">Friends</p>
     <div class="relative">
       <div
-          :class="['flex gap-3', friends.length > 3 ? 'overflow-x-auto pb-2' : '']">
+          :class="['flex gap-3 overflow-x-auto pb-2']">
         <HomeUsersUserBox
             v-for="item in friends"
             :key="item.friend_id"
@@ -42,7 +45,7 @@ function addFriend() {
             :name="item.friend_username"
             :user-turn="false"
             :class="[
-                        friends.length > 3 ? 'w-[calc(33.33%-0.67rem)] flex-shrink-0' :
+                        friends.length > 3 ? 'w-[calc(33.33%-1rem)] flex-shrink-0' :
                         friends.length === 3 ? 'w-1/3' :
                         friends.length === 2 ? 'w-1/2' : 'w-full'
                     ]"

From 2355f5ab3e4b527417714d96504ecedb1da28a37 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Fri, 6 Dec 2024 21:34:42 +0100
Subject: [PATCH 18/31] renamed MultipleUsersView and updated scrolling for
 friends and opponents

---
 components/{MultipleUsersView.vue => UsersView.vue} | 13 +++++++++++--
 pages/index.vue                                     |  6 ++----
 2 files changed, 13 insertions(+), 6 deletions(-)
 rename components/{MultipleUsersView.vue => UsersView.vue} (69%)

diff --git a/components/MultipleUsersView.vue b/components/UsersView.vue
similarity index 69%
rename from components/MultipleUsersView.vue
rename to components/UsersView.vue
index fddc6c8..85f5e59 100644
--- a/components/MultipleUsersView.vue
+++ b/components/UsersView.vue
@@ -14,13 +14,14 @@ const containerClasses = computed(() => {
     const baseClasses = 'w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3';
     if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-auto`;
     if (props.viewType === UserViewType.OPPONENTTURN) return `${baseClasses}`;
+    if (props.viewType === UserViewType.FRIENDS) return `${baseClasses}`;
     return '';
 });
 
 const userBoxContainerClasses = computed(() =>
     props.viewType === UserViewType.USERTURN
         ? 'flex flex-col space-y-3'
-        : 'flex space-x-3'
+        : 'flex gap-3 overflow-x-auto pb-2'
 );
 
 // Example Users
@@ -43,7 +44,15 @@ const users = [
         <div :class="userBoxContainerClasses">
             <HomeUsersUserBox 
             v-for="user in users" :key="user.name" :name="user.name"
-                :user-turn="viewType === UserViewType.USERTURN" />
+                :user-turn="viewType === UserViewType.USERTURN"
+                :class="[
+                            ( viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN ) ?
+                                users.length > 3 ? 'w-[calc(33.33%-.99rem)] flex-shrink-0' :
+                                users.length === 3 ? 'w-1/3' :
+                                users.length === 2 ? 'w-1/2' : 'w-full'
+                            : ''
+                        ]"
+            />
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 4e56173..a8808e0 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -20,10 +20,8 @@ import { UserViewType } from "@/types/components/users.view"
       </template>
       <template #content>
         <div class="flex flex-col h-full p-3">
-          <MultipleUsersView :view-type="UserViewType.USERTURN" class="h-3/6"/>
-          <MultipleUsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6"/>
-          <!--HomeTurnsUser/>
-          <HomeTurnsOpponent/-->
+          <UsersView :view-type="UserViewType.USERTURN" class="h-3/6"/>
+          <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6"/>
           <HomeControlsGameButtons class="h-1/6"/>
         </div>
       </template>

From 0c1ca8238d448db983f5bab301a38df057b63738 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Fri, 6 Dec 2024 21:49:25 +0100
Subject: [PATCH 19/31] removed unnecessary comment

---
 components/UsersView.vue          | 2 +-
 components/profile/Friendlist.vue | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index 85f5e59..a7336d1 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -47,7 +47,7 @@ const users = [
                 :user-turn="viewType === UserViewType.USERTURN"
                 :class="[
                             ( viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN ) ?
-                                users.length > 3 ? 'w-[calc(33.33%-.99rem)] flex-shrink-0' :
+                                users.length > 3 ? 'w-[calc(33.33%-.98rem)] flex-shrink-0' :
                                 users.length === 3 ? 'w-1/3' :
                                 users.length === 2 ? 'w-1/2' : 'w-full'
                             : ''
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 2e0d2ad..44ea6e1 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {FriendshipStatus, FriendshipType, type GetFriendsResponse} from "@/types/api/user.friends";
+import { UserViewType } from "@/types/components/users.view";
 
 const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", () => [])
 const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
@@ -27,12 +28,11 @@ function addFriend() {
   }
   friends.value.push(newFriend)
 }
-
-
-// :class="['flex gap-3', friends.length > 3 ? 'overflow-x-auto pb-2' : '']"
 </script>
 
 <template>
+  <UsersView :view-type="UserViewType.FRIENDS"/>
+
   <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3">
     <p class="my-1">Friends</p>
     <div class="relative">

From 1ee4fc48e51e3a9f763f7b89d982741423faf928 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Fri, 6 Dec 2024 22:00:50 +0100
Subject: [PATCH 20/31] moved friendlist into UserView component with working
 friends

---
 components/UsersView.vue          | 19 +++++++++----------
 components/profile/Friendlist.vue | 24 ++----------------------
 2 files changed, 11 insertions(+), 32 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index a7336d1..b3f45f3 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -1,12 +1,17 @@
 <script setup lang="ts">
+import { type GetFriendsResponse } from "@/types/api/user.friends";
 import { UserViewType } from "@/types/components/users.view";
 
 // Props
 const props = defineProps({
     viewType: {
-        type: Number, // Matches UserViewType enum
+        type: Number,
         required: true,
     },
+    users: {
+        type: Array as PropType<GetFriendsResponse[]>,
+        required: true,
+    }
 });
 
 // Computed Classes
@@ -23,14 +28,6 @@ const userBoxContainerClasses = computed(() =>
         ? 'flex flex-col space-y-3'
         : 'flex gap-3 overflow-x-auto pb-2'
 );
-
-// Example Users
-const users = [
-    { name: 'test1' },
-    { name: 'test2' },
-    { name: 'test3' },
-    { name: 'test3' },
-];
 </script>
 
 <template>
@@ -43,7 +40,9 @@ const users = [
         <!-- User Boxes -->
         <div :class="userBoxContainerClasses">
             <HomeUsersUserBox 
-            v-for="user in users" :key="user.name" :name="user.name"
+            v-for="user in props.users" :key="user.friend_id"
+                :profile-picture="user.friend_avatar?.toString()" 
+                :name="user.friend_username"
                 :user-turn="viewType === UserViewType.USERTURN"
                 :class="[
                             ( viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN ) ?
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 44ea6e1..491f1a7 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -31,29 +31,9 @@ function addFriend() {
 </script>
 
 <template>
-  <UsersView :view-type="UserViewType.FRIENDS"/>
+  <UsersView :view-type="UserViewType.FRIENDS" :users="friends"/>
 
-  <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3">
-    <p class="my-1">Friends</p>
-    <div class="relative">
-      <div
-          :class="['flex gap-3 overflow-x-auto pb-2']">
-        <HomeUsersUserBox
-            v-for="item in friends"
-            :key="item.friend_id"
-            :profile-picture="item.friend_avatar?.toString()"
-            :name="item.friend_username"
-            :user-turn="false"
-            :class="[
-                        friends.length > 3 ? 'w-[calc(33.33%-1rem)] flex-shrink-0' :
-                        friends.length === 3 ? 'w-1/3' :
-                        friends.length === 2 ? 'w-1/2' : 'w-full'
-                    ]"
-        />
-      </div>
-    </div>
-    <div class="mt-3">
+  <div class="mt-3">
       <button class="p-2 bg-blue-500 text-white rounded ml-2" @click="addFriend">Add Friend</button>
-    </div>
   </div>
 </template>
\ No newline at end of file

From 588bf37d21acf4ee296c430906b636407e46223e Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Fri, 6 Dec 2024 22:52:00 +0100
Subject: [PATCH 21/31] Updated UsersView to display all users, no matter the
 type

---
 components/UsersView.vue | 48 +++++++++++++++++++++++++++++++++++-----
 pages/index.vue          | 42 +++++++++++++++++++++++++++++++++--
 types/api/user.ts        |  6 +++++
 3 files changed, 88 insertions(+), 8 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index b3f45f3..d16f738 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { type GetFriendsResponse } from "@/types/api/user.friends";
 import { UserViewType } from "@/types/components/users.view";
+import { type UserInformation } from "@/types/api/user"
 
 // Props
 const props = defineProps({
@@ -9,7 +10,7 @@ const props = defineProps({
         required: true,
     },
     users: {
-        type: Array as PropType<GetFriendsResponse[]>,
+        type: Array as PropType<GetFriendsResponse[] | UserInformation[]>,
         required: true,
     }
 });
@@ -17,7 +18,7 @@ const props = defineProps({
 // Computed Classes
 const containerClasses = computed(() => {
     const baseClasses = 'w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3';
-    if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-auto`;
+    if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-auto flex-grow-0`;
     if (props.viewType === UserViewType.OPPONENTTURN) return `${baseClasses}`;
     if (props.viewType === UserViewType.FRIENDS) return `${baseClasses}`;
     return '';
@@ -26,8 +27,43 @@ const containerClasses = computed(() => {
 const userBoxContainerClasses = computed(() =>
     props.viewType === UserViewType.USERTURN
         ? 'flex flex-col space-y-3'
-        : 'flex gap-3 overflow-x-auto pb-2'
+        : 'flex gap-3 overflow-x-auto'
 );
+
+
+function isGetFriendsResponse(user: any): user is GetFriendsResponse {
+    return 'friend_id' in user && 'friend_username' in user && 'friend_spotify_id' in user;
+}
+
+function isUserInformation(user: any): user is UserInformation {
+    return 'user_id' in user && 'username' in user;
+}
+
+// Map users conditionally depending on their type
+const mappedUsers = computed(() => {
+    return props.users.map(user => {
+        console.log()
+        if (isGetFriendsResponse(user)) {
+            return {
+                userId: user.friend_id,
+                userName: user.friend_username,
+                userAvatar: user.friend_avatar,
+                spotifyId: user.friend_spotify_id,
+                status: user.status,
+                requestType: user.request_type,
+                createdAt: user.created_at,
+                updatedAt: user.updated_at,
+            };
+        } else if (isUserInformation(user)) {
+            return {
+                userId: user.user_id,
+                userName: user.username,
+                userAvatar: user.user_avatar,
+            };
+        }
+        return {};
+    });
+});
 </script>
 
 <template>
@@ -40,9 +76,9 @@ const userBoxContainerClasses = computed(() =>
         <!-- User Boxes -->
         <div :class="userBoxContainerClasses">
             <HomeUsersUserBox 
-            v-for="user in props.users" :key="user.friend_id"
-                :profile-picture="user.friend_avatar?.toString()" 
-                :name="user.friend_username"
+            v-for="user in mappedUsers" :key="user.userId"
+                :profile-picture="user.userAvatar?.toString()" 
+                :name="user.userName"
                 :user-turn="viewType === UserViewType.USERTURN"
                 :class="[
                             ( viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN ) ?
diff --git a/pages/index.vue b/pages/index.vue
index a8808e0..3d82672 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -20,8 +20,46 @@ import { UserViewType } from "@/types/components/users.view"
       </template>
       <template #content>
         <div class="flex flex-col h-full p-3">
-          <UsersView :view-type="UserViewType.USERTURN" class="h-3/6"/>
-          <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6"/>
+          <UsersView :view-type="UserViewType.USERTURN" class="h-3/6" :users="[
+            { user_id: 1,
+              user_avatar: null,
+              username: 'Test1'
+            },
+            { user_id: 1,
+              user_avatar: null,
+              username: 'Test1'
+            },
+            { user_id: 1,
+              user_avatar: null,
+              username: 'Test1'
+            },
+            { user_id: 1,
+              user_avatar: null,
+              username: 'Test1'
+            },
+            { user_id: 1,
+              user_avatar: null,
+              username: 'Test1'
+            },            
+          ]"/>
+          <UsersView :view-type="UserViewType.OPPONENTTURN" class="h-2/6" :users="[
+            { user_id: 1,
+              user_avatar: null,
+              username: 'Test1'
+            },
+            { user_id: 2,
+              user_avatar: null,
+              username: 'Test2'
+            },
+            { user_id: 3,
+              user_avatar: null,
+              username: 'Test3'
+            },
+            { user_id: 4,
+              user_avatar: null,
+              username: 'Test4'
+            },
+          ]"/>
           <HomeControlsGameButtons class="h-1/6"/>
         </div>
       </template>
diff --git a/types/api/user.ts b/types/api/user.ts
index d45dacd..7528a15 100644
--- a/types/api/user.ts
+++ b/types/api/user.ts
@@ -12,4 +12,10 @@ export interface GetProfileResponse {
     username: string,
     user_spotify_id: string,
     spotify_visibility: boolean,
+}
+
+export interface UserInformation {
+    user_id: number,
+    user_avatar: string | null,
+    username: string, 
 }
\ No newline at end of file

From 52f39942959ada2a38e1c71d1406038ad0d3f2fb Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Sat, 7 Dec 2024 09:04:25 +0100
Subject: [PATCH 22/31] fix UsersView Component List

---
 components/UsersView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index d16f738..d4c45ed 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -82,11 +82,11 @@ const mappedUsers = computed(() => {
                 :user-turn="viewType === UserViewType.USERTURN"
                 :class="[
                             ( viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN ) ?
-                                users.length > 3 ? 'w-[calc(33.33%-.98rem)] flex-shrink-0' :
                                 users.length === 3 ? 'w-1/3' :
                                 users.length === 2 ? 'w-1/2' : 'w-full'
                             : ''
                         ]"
+                :style="users.length > 3 ? { width: 'calc(33.33% - .98rem)', flexShrink: 0 } : {}"
             />
         </div>
     </div>

From 8dee5c2fe8cf5d9ebddaa636e035c7edcce03405 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sat, 7 Dec 2024 14:09:17 +0100
Subject: [PATCH 23/31] Updated home view to hopefully function as intended

---
 components/UsersView.vue          | 77 +++++++++++++++++++++----------
 components/home/Users/UserBox.vue | 10 ++--
 2 files changed, 57 insertions(+), 30 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index d4c45ed..ae1965c 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -17,17 +17,16 @@ const props = defineProps({
 
 // Computed Classes
 const containerClasses = computed(() => {
-    const baseClasses = 'w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3';
-    if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-auto flex-grow-0`;
-    if (props.viewType === UserViewType.OPPONENTTURN) return `${baseClasses}`;
-    if (props.viewType === UserViewType.FRIENDS) return `${baseClasses}`;
+    const baseClasses = 'w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3';
+    if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-hidden overflow-x-auto flex-grow-0`;
+    if (props.viewType === UserViewType.OPPONENTTURN || props.viewType === UserViewType.FRIENDS) return `${baseClasses} overflow-y-hidden`;
     return '';
 });
 
 const userBoxContainerClasses = computed(() =>
     props.viewType === UserViewType.USERTURN
-        ? 'flex flex-col space-y-3'
-        : 'flex gap-3 overflow-x-auto'
+        ? 'flex flex-col space-y-1 md:space-y-3 h-full overflow-y-auto'
+        : 'flex gap-1 md:gap-3 mt-6 md:mt-9'
 );
 
 
@@ -42,11 +41,10 @@ function isUserInformation(user: any): user is UserInformation {
 // Map users conditionally depending on their type
 const mappedUsers = computed(() => {
     return props.users.map(user => {
-        console.log()
         if (isGetFriendsResponse(user)) {
             return {
                 userId: user.friend_id,
-                userName: user.friend_username,
+                username: user.friend_username,
                 userAvatar: user.friend_avatar,
                 spotifyId: user.friend_spotify_id,
                 status: user.status,
@@ -57,7 +55,7 @@ const mappedUsers = computed(() => {
         } else if (isUserInformation(user)) {
             return {
                 userId: user.user_id,
-                userName: user.username,
+                username: user.username,
                 userAvatar: user.user_avatar,
             };
         }
@@ -67,27 +65,56 @@ const mappedUsers = computed(() => {
 </script>
 
 <template>
-    <div :class="containerClasses">
-        <!-- Conditional Header -->
-        <p v-if="viewType === UserViewType.USERTURN" class="my-1">Your Turn</p>
-        <p v-else-if="viewType === UserViewType.OPPONENTTURN" class="my-1">Opponent's Turn</p>
-        <p v-else-if="viewType === UserViewType.FRIENDS" class="my-1">Friends</p>
+    <div :class="[
+                    containerClasses,
+                    ((viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) && users.length > 3) ? 'pr-0' : ''
+                ]"
+    >
+        <!-- Fixed Conditional Header -->
+        <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2">
+            <p v-if="viewType === UserViewType.USERTURN">
+                Your Turn
+            </p>
+            <p v-else-if="viewType === UserViewType.OPPONENTTURN" class="fixed">
+                Opponent's Turn
+            </p>
+            <p v-else-if="viewType === UserViewType.FRIENDS" class="fixed">
+                Friends
+            </p>
+        </div>
 
-        <!-- User Boxes -->
-        <div :class="userBoxContainerClasses">
+        <!-- Scrollable User Boxes -->
+        <div 
+            :class="userBoxContainerClasses"
+        >
             <HomeUsersUserBox 
-            v-for="user in mappedUsers" :key="user.userId"
+                v-for="user in mappedUsers" 
+                :key="user.userId"
                 :profile-picture="user.userAvatar?.toString()" 
-                :name="user.userName"
+                :name="user.username"
                 :user-turn="viewType === UserViewType.USERTURN"
                 :class="[
-                            ( viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN ) ?
-                                users.length === 3 ? 'w-1/3' :
-                                users.length === 2 ? 'w-1/2' : 'w-full'
-                            : ''
-                        ]"
-                :style="users.length > 3 ? { width: 'calc(33.33% - .98rem)', flexShrink: 0 } : {}"
+                    (viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) 
+                        ? users.length === 3 ? 'w-1/3' 
+                        : users.length === 2 ? 'w-1/2' 
+                        : 'w-full'
+                        : ''
+                ]"
+                :style="(viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) 
+                    ? users.length > 3 
+                        ? { width: 'calc(33.33% - .98rem)', flexShrink: 0 } 
+                        : {} 
+                    : {}"
             />
+            <HomeUsersUserBox v-if="users.length > 3" :class="['invisible', viewType === UserViewType.USERTURN ? 'h-1' : 'w-1']"/>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<style>
+.fixed-header {
+  position: sticky;
+  top: 0;
+  background-color: black;
+}
+</style>
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 638f738..e6e8a63 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -19,25 +19,25 @@
 <template>
     <div
       :class="[
-        'bg-blue-600 rounded-3xl p-3 w-full', 
+        'bg-blue-600 rounded-3xl px-3 w-full', 
         props.userTurn
           ? 'flex items-center'
-          : 'flex flex-col items-center justify-center h-full'
+          : 'flex flex-col items-center justify-center mb-3 py-2'
       ]"
     >
       <!-- Profile Picture -->
       <NuxtImg
         :class="[
           'rounded-full', 
-          'w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14 lg:w-16 lg:h-16',
-          props.userTurn ? 'mr-3' : 'mb-2'
+          'w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14',
+          props.userTurn ? 'mr-3' : 'mb-0'
         ]"
         :src="props.profilePicture.toString()"
         :alt="name"
       />
       
       <!-- User Name -->
-      <p class="text-white text-sm sm:text-base md:text-lg lg:text-xl">
+      <p class="text-white text-sm sm:text-base md:text-lg">
         {{ props.name }}
       </p>
       

From 1e4bbb2c444054a13bfb079adf40e660ed8b5ed5 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sun, 8 Dec 2024 15:23:07 +0100
Subject: [PATCH 24/31] removed unnecessary style

---
 components/UsersView.vue | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index ae1965c..7b1ca4b 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -110,11 +110,3 @@ const mappedUsers = computed(() => {
         </div>
     </div>
 </template>
-
-<style>
-.fixed-header {
-  position: sticky;
-  top: 0;
-  background-color: black;
-}
-</style>

From 33d7fe904680a4efc558b43dff5911a386b8f81d Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Mon, 9 Dec 2024 00:15:12 +0100
Subject: [PATCH 25/31] update footers to minimalize height and display active
 page

---
 layouts/FooterView.vue       |  2 +-
 layouts/HeaderFooterView.vue |  2 +-
 pages/index.vue              | 12 ++++++------
 pages/profile.vue            | 10 +++++-----
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/layouts/FooterView.vue b/layouts/FooterView.vue
index 6381c9d..bcadbec 100644
--- a/layouts/FooterView.vue
+++ b/layouts/FooterView.vue
@@ -12,7 +12,7 @@
       </div>
 
       <!-- Footer -->
-      <div class="basis-24 border rounded-t-3xl">
+      <div class="bg-yellow-500 text-red-600 rounded-t-3xl">
         <div class="flex justify-around items-center h-full">
           <slot name="footer"/>
         </div>
diff --git a/layouts/HeaderFooterView.vue b/layouts/HeaderFooterView.vue
index 2ebdc02..9137d55 100644
--- a/layouts/HeaderFooterView.vue
+++ b/layouts/HeaderFooterView.vue
@@ -20,7 +20,7 @@
       </div>
 
       <!-- Footer -->
-      <div class="h-1/6 border rounded-t-3xl">
+      <div class="bg-yellow-500 text-red-600 rounded-t-3xl">
         <div class="flex justify-around items-center h-full">
           <slot name="footer" />
         </div>
diff --git a/pages/index.vue b/pages/index.vue
index 3d82672..54b798f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -5,7 +5,7 @@ import { UserViewType } from "@/types/components/users.view"
 </script>
 
 <template>
-  <div class="bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
+  <div class="bg-gradient-to-b from-indigo-500 to-purple-500">
     <HeaderFooterView>
       <template #header>
         <div>
@@ -64,14 +64,14 @@ import { UserViewType } from "@/types/components/users.view"
         </div>
       </template>
       <template #footer>
-        <NuxtLink to="/playlists" class="inline-flex items-center text-5xl rounded-xl py-5">
-          <Icon name="mdi:album" class="text-white"/>
+        <NuxtLink to="/playlists" class="inline-flex items-center text-5xl rounded-xl">
+          <Icon name="mdi:album" class=""/>
         </NuxtLink>
-        <NuxtLink to="/" class="inline-flex items-center bg-blue-500 text-6xl rounded-full p-1.5">
+        <NuxtLink to="/" class="inline-flex items-center text-6xl rounded-full p-1.5">
           <Icon name="mdi:home" class="text-white"/>
         </NuxtLink>
-        <NuxtLink to="/profile" class="inline-flex items-center text-5xl rounded-xl py-5">
-          <Icon name="mdi:account-details" class="text-white"/>
+        <NuxtLink to="/profile" class="inline-flex items-center text-5xl rounded-xl">
+          <Icon name="mdi:account-details" class=""/>
         </NuxtLink>
       </template>
     </HeaderFooterView>
diff --git a/pages/profile.vue b/pages/profile.vue
index 492e694..219c49c 100644
--- a/pages/profile.vue
+++ b/pages/profile.vue
@@ -10,13 +10,13 @@ import HeaderFooterView from "~/layouts/FooterView.vue";
       </template>
 
       <template #footer>
-        <NuxtLink to="/playlists" class="inline-flex items-center text-5xl rounded-xl py-5">
-          <Icon name="mdi:album" class="text-white"/>
+        <NuxtLink to="/playlists" class="inline-flex items-center text-5xl rounded-xl">
+          <Icon name="mdi:album" class=""/>
         </NuxtLink>
-        <NuxtLink to="/" class="inline-flex items-center bg-blue-500 text-6xl rounded-full p-1.5">
-          <Icon name="mdi:home" class="text-white"/>
+        <NuxtLink to="/" class="inline-flex items-center text-6xl rounded-full p-1.5">
+          <Icon name="mdi:home" class=""/>
         </NuxtLink>
-        <NuxtLink to="/profile" class="inline-flex items-center text-5xl rounded-xl py-5">
+        <NuxtLink to="/profile" class="inline-flex items-center text-5xl rounded-xl">
           <Icon name="mdi:account-details" class="text-white"/>
         </NuxtLink>
       </template>

From e48df284b0fea0977a3f9512d93a8f41408761b9 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Mon, 9 Dec 2024 00:50:00 +0100
Subject: [PATCH 26/31] enhanced ProfileInformation Component and introduces
 user state

---
 components/profile/ProfileInformation.vue | 47 +++++++++--------------
 composables/useUser.ts                    | 34 ++++++++++++++++
 server/api/v1/user/index.get.ts           | 34 ++++++++++++++++
 types/api/users.ts                        |  4 +-
 4 files changed, 88 insertions(+), 31 deletions(-)
 create mode 100644 composables/useUser.ts
 create mode 100644 server/api/v1/user/index.get.ts

diff --git a/components/profile/ProfileInformation.vue b/components/profile/ProfileInformation.vue
index 0ba0a5e..9254ce8 100644
--- a/components/profile/ProfileInformation.vue
+++ b/components/profile/ProfileInformation.vue
@@ -1,42 +1,33 @@
 <script setup lang="ts">
-import type {
-    GetProfileResponse
-} from "@/types/api/user";
-
-const username = ref('Username');
-const profilePicture = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg');
 
 const session = useSupabaseSession()
+const {user, loading, error, fetchUser} = useUser()
 
 onMounted(async () => {
-    if (session.value) {
-        await getProfileInformation()
-    }
+  if (session.value) {
+    await fetchUser()
+    console.log(user.value)
+  }
 })
 
-async function getProfileInformation() {
-    $fetch<GetProfileResponse>('http://localhost:3000/api/v1/user/' + session.value?.user.id) //TODO: change after implementing diffrent user endpoint. also add as global state wit useState named 'user'
-      .then((data) => {
-        username.value = data.username
-        if (data.user_avatar) {
-            profilePicture.value = data.user_avatar;
-        }
-      });
-}
+const default_avatar = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg');
 </script>
 
 <template>
+  <div>
+    <div v-if="error" class="text-red-500">Error occurred: {{error}}</div>
     <div class="flex flex-col">
-        <div class="flex flex-col items-center justify-center mb-3">
-            <NuxtImg :src="profilePicture" class="w-16 h-16 rounded-full" />
-            <p>{{ username }}</p>
-        </div>
+      <div class="flex flex-col items-center justify-center mb-3">
+        <NuxtImg :src="loading || !user?.avatar_url ? default_avatar : user!.avatar_url" class="w-16 h-16 rounded-full"/>
+        <p>{{ loading ? 'Loading.' : user?.username }}</p>
+      </div>
 
-        <div class="grid grid-cols-2 gap-4">
-            <div class="bg-gray-200 h-8 rounded-3xl px-3">Streak</div>
-            <div class="bg-gray-200 h-8 rounded-3xl px-3">Games played</div>
-            <div class="bg-gray-200 h-8 rounded-3xl px-3">Placeholder</div>
-            <div class="bg-gray-200 h-8 rounded-3xl px-3">Date joined</div>
-        </div>
+      <div class="grid grid-cols-2 gap-4">
+        <div class="bg-gray-200 h-8 rounded-3xl px-3">Games played</div>
+        <div class="bg-gray-200 h-8 rounded-3xl px-3">Streak: {{ user?.daily_streak }}</div>
+        <div class="bg-gray-200 h-8 rounded-3xl px-3">Spotify {{user?.spotify_visibility ? 'public' : 'private'}}</div>
+        <div class="bg-gray-200 h-8 rounded-3xl px-3">Joined {{ new Date(session?.user.created_at).toDateString() }}</div>
+      </div>
     </div>
+  </div>
 </template>
diff --git a/composables/useUser.ts b/composables/useUser.ts
new file mode 100644
index 0000000..7f997cb
--- /dev/null
+++ b/composables/useUser.ts
@@ -0,0 +1,34 @@
+import type {GetUserResponse} from "@/types/api/users";
+
+export const useUser = () => {
+    const user = useState<GetUserResponse|null>('user', () => null)
+    const loading = useState<boolean>('userLoading', () => false)
+    const error = useState<string|null>('userError', () => null)
+
+    const fetchUser = async () => {
+        // Only fetch if we don't have user data
+        if (!user.value) {
+            loading.value = true
+            error.value = null
+            try {
+                user.value = await useProfileInformation()
+            } catch (err) {
+                error.value = 'Failed to fetch user'
+                console.error(err)
+            } finally {
+                loading.value = false
+            }
+        }
+    }
+
+    return {
+        user,
+        loading,
+        error,
+        fetchUser
+    }
+}
+
+async function useProfileInformation() {
+    return await $fetch<GetUserResponse>('http://localhost:3000/api/v1/user/')
+}
\ No newline at end of file
diff --git a/server/api/v1/user/index.get.ts b/server/api/v1/user/index.get.ts
new file mode 100644
index 0000000..9a52add
--- /dev/null
+++ b/server/api/v1/user/index.get.ts
@@ -0,0 +1,34 @@
+import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
+import type {GetUserResponse} from "~/types/api/users";
+
+export default defineEventHandler(async (event) => {
+
+    // Require user to be authenticated
+    const user = await serverSupabaseUser(event);
+    if (!user?.id) {
+        setResponseStatus(event, 401);
+        return {error: 'unauthenticated'};
+    }
+
+    // Send request
+    const client = serverSupabaseServiceRole(event);
+    const {data, error}:{ data: GetUserResponse|null, error: any} = await client.from('users').select('*').eq('id', user.id).maybeSingle();
+
+    if (!data) {
+        setResponseStatus(event, 404);
+        return {error: 'User not found'};
+    }
+
+    // Handle errors
+    if (error) {
+        setResponseStatus(event, 500);
+        return {error: error.message};
+    }
+
+    // Hide spotify id if not visible
+    if (!data.spotify_visibility) {
+        delete data.spotify_id;
+    }
+
+    return data;
+})
\ No newline at end of file
diff --git a/types/api/users.ts b/types/api/users.ts
index 44f7eda..abffbcb 100644
--- a/types/api/users.ts
+++ b/types/api/users.ts
@@ -1,8 +1,6 @@
-import type url from "node:url";
-
 export interface GetUserResponse {
     id: string,
-    avatar_url?: url.URL | null,
+    avatar_url?: string,
     username: string,
     spotify_id?: string,
     spotify_visibility: boolean,

From 4a50299f4864e9e8effdcc4a66f72c0b9e97840f Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Mon, 9 Dec 2024 01:00:17 +0100
Subject: [PATCH 27/31] fix types of UsersView

---
 components/UsersView.vue | 141 ++++++++++++++++++++-------------------
 types/api/user.ts        |  21 ------
 2 files changed, 72 insertions(+), 90 deletions(-)
 delete mode 100644 types/api/user.ts

diff --git a/components/UsersView.vue b/components/UsersView.vue
index 7b1ca4b..88898bf 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -1,26 +1,26 @@
 <script setup lang="ts">
-import { type GetFriendsResponse } from "@/types/api/user.friends";
-import { UserViewType } from "@/types/components/users.view";
-import { type UserInformation } from "@/types/api/user"
+import type {GetFriendsResponse} from "@/types/api/user.friends";
+import {UserViewType} from "@/types/components/users.view";
+import type {GetUserResponse} from "@/types/api/users";
 
 // Props
 const props = defineProps({
-    viewType: {
-        type: Number,
-        required: true,
-    },
-    users: {
-        type: Array as PropType<GetFriendsResponse[] | UserInformation[]>,
-        required: true,
-    }
+  viewType: {
+    type: Number,
+    required: true,
+  },
+  users: {
+    type: Array as PropType<GetFriendsResponse[] | GetUserResponse[]>,
+    required: true,
+  }
 });
 
 // Computed Classes
 const containerClasses = computed(() => {
-    const baseClasses = 'w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3';
-    if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-hidden overflow-x-auto flex-grow-0`;
-    if (props.viewType === UserViewType.OPPONENTTURN || props.viewType === UserViewType.FRIENDS) return `${baseClasses} overflow-y-hidden`;
-    return '';
+  const baseClasses = 'w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3';
+  if (props.viewType === UserViewType.USERTURN) return `${baseClasses} h-full overflow-y-hidden overflow-x-auto flex-grow-0`;
+  if (props.viewType === UserViewType.OPPONENTTURN || props.viewType === UserViewType.FRIENDS) return `${baseClasses} overflow-y-hidden`;
+  return '';
 });
 
 const userBoxContainerClasses = computed(() =>
@@ -30,83 +30,86 @@ const userBoxContainerClasses = computed(() =>
 );
 
 
-function isGetFriendsResponse(user: any): user is GetFriendsResponse {
-    return 'friend_id' in user && 'friend_username' in user && 'friend_spotify_id' in user;
+function isGetFriendsResponse(user: GetFriendsResponse | GetUserResponse): user is GetFriendsResponse {
+  return 'friend_id' in user && 'friend_username' in user && 'friend_spotify_id' in user;
 }
 
-function isUserInformation(user: any): user is UserInformation {
-    return 'user_id' in user && 'username' in user;
+function isUserInformation(user: GetFriendsResponse | GetUserResponse): user is GetUserResponse {
+  return 'id' in user && 'username' in user;
 }
 
 // Map users conditionally depending on their type
 const mappedUsers = computed(() => {
-    return props.users.map(user => {
-        if (isGetFriendsResponse(user)) {
-            return {
-                userId: user.friend_id,
-                username: user.friend_username,
-                userAvatar: user.friend_avatar,
-                spotifyId: user.friend_spotify_id,
-                status: user.status,
-                requestType: user.request_type,
-                createdAt: user.created_at,
-                updatedAt: user.updated_at,
-            };
-        } else if (isUserInformation(user)) {
-            return {
-                userId: user.user_id,
-                username: user.username,
-                userAvatar: user.user_avatar,
-            };
-        }
-        return {};
-    });
+  return props.users.map(user => {
+    if (isGetFriendsResponse(user)) {
+      return {
+        userId: user.friend_id,
+        username: user.friend_username,
+        userAvatar: user.friend_avatar,
+        spotifyId: user.friend_spotify_id,
+        status: user.status,
+        requestType: user.request_type,
+        createdAt: user.created_at,
+        updatedAt: user.updated_at,
+      };
+    } else if (isUserInformation(user)) {
+      return {
+        userId: user.id,
+        username: user.username,
+        userAvatar: user.avatar_url,
+      };
+    }
+    return {};
+  });
 });
 </script>
 
 <template>
-    <div :class="[
+  <div
+      :class="[
                     containerClasses,
                     ((viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) && users.length > 3) ? 'pr-0' : ''
                 ]"
-    >
-        <!-- Fixed Conditional Header -->
-        <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2">
-            <p v-if="viewType === UserViewType.USERTURN">
-                Your Turn
-            </p>
-            <p v-else-if="viewType === UserViewType.OPPONENTTURN" class="fixed">
-                Opponent's Turn
-            </p>
-            <p v-else-if="viewType === UserViewType.FRIENDS" class="fixed">
-                Friends
-            </p>
-        </div>
+  >
+    <!-- Fixed Conditional Header -->
+    <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2">
+      <p v-if="viewType === UserViewType.USERTURN">
+        Your Turn
+      </p>
+      <p v-else-if="viewType === UserViewType.OPPONENTTURN" class="fixed">
+        Opponent's Turn
+      </p>
+      <p v-else-if="viewType === UserViewType.FRIENDS" class="fixed">
+        Friends
+      </p>
+    </div>
 
-        <!-- Scrollable User Boxes -->
-        <div 
-            :class="userBoxContainerClasses"
-        >
-            <HomeUsersUserBox 
-                v-for="user in mappedUsers" 
-                :key="user.userId"
-                :profile-picture="user.userAvatar?.toString()" 
-                :name="user.username"
-                :user-turn="viewType === UserViewType.USERTURN"
-                :class="[
+    <!-- Scrollable User Boxes -->
+    <div
+        :class="userBoxContainerClasses"
+    >
+      <HomeUsersUserBox
+          v-for="user in mappedUsers"
+          :key="user.userId"
+          :profile-picture="user.userAvatar?.toString()"
+          :name="user.username"
+          :user-turn="viewType === UserViewType.USERTURN"
+          :class="[
                     (viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) 
                         ? users.length === 3 ? 'w-1/3' 
                         : users.length === 2 ? 'w-1/2' 
                         : 'w-full'
                         : ''
                 ]"
-                :style="(viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) 
+          :style="(viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN)
                     ? users.length > 3 
                         ? { width: 'calc(33.33% - .98rem)', flexShrink: 0 } 
                         : {} 
                     : {}"
-            />
-            <HomeUsersUserBox v-if="users.length > 3" :class="['invisible', viewType === UserViewType.USERTURN ? 'h-1' : 'w-1']"/>
-        </div>
+      />
+      <HomeUsersUserBox
+          v-if="users.length > 3"
+          :class="['invisible', viewType === UserViewType.USERTURN ? 'h-1' : 'w-1']"/>
     </div>
+  </div>
 </template>
diff --git a/types/api/user.ts b/types/api/user.ts
deleted file mode 100644
index 7528a15..0000000
--- a/types/api/user.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface ProfileError {
-    message: string
-}
-
-export interface GetProfileParam {
-    userid: string
-}
-
-export interface GetProfileResponse {
-    user_id: number,
-    user_avatar: string | null,
-    username: string,
-    user_spotify_id: string,
-    spotify_visibility: boolean,
-}
-
-export interface UserInformation {
-    user_id: number,
-    user_avatar: string | null,
-    username: string, 
-}
\ No newline at end of file

From e6b8fb772bb25bcbe52a2c4a5b14eac12b374e06 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Mon, 9 Dec 2024 01:07:08 +0100
Subject: [PATCH 28/31] fix useUser always in loading state

---
 components/profile/ProfileInformation.vue |  1 -
 composables/useUser.ts                    | 26 +++++++++++------------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/components/profile/ProfileInformation.vue b/components/profile/ProfileInformation.vue
index 9254ce8..20f0386 100644
--- a/components/profile/ProfileInformation.vue
+++ b/components/profile/ProfileInformation.vue
@@ -6,7 +6,6 @@ const {user, loading, error, fetchUser} = useUser()
 onMounted(async () => {
   if (session.value) {
     await fetchUser()
-    console.log(user.value)
   }
 })
 
diff --git a/composables/useUser.ts b/composables/useUser.ts
index 7f997cb..d068454 100644
--- a/composables/useUser.ts
+++ b/composables/useUser.ts
@@ -1,23 +1,23 @@
 import type {GetUserResponse} from "@/types/api/users";
 
 export const useUser = () => {
-    const user = useState<GetUserResponse|null>('user', () => null)
+    const user = useState<GetUserResponse | null>('user', () => null)
     const loading = useState<boolean>('userLoading', () => false)
-    const error = useState<string|null>('userError', () => null)
+    const error = useState<string | null>('userError', () => null)
 
     const fetchUser = async () => {
-        // Only fetch if we don't have user data
-        if (!user.value) {
-            loading.value = true
-            error.value = null
-            try {
-                user.value = await useProfileInformation()
-            } catch (err) {
-                error.value = 'Failed to fetch user'
-                console.error(err)
-            } finally {
-                loading.value = false
+        try {
+            // Only set loading on initial fetch
+            if (!user.value) {
+                loading.value = true
             }
+
+            user.value = await useProfileInformation()
+        } catch (err) {
+            error.value = 'Failed to fetch user'
+            console.error(err)
+        } finally {
+            loading.value = false
         }
     }
 

From e48408df0e1ffae26b1c8c58f764c22a46efb611 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Mon, 9 Dec 2024 18:47:33 +0100
Subject: [PATCH 29/31] minor changes. reduced complexity of UserView

---
 DB/users.sql                            | 22 +----------------
 components/UsersView.vue                | 33 +++++++++----------------
 components/home/Users/UserBox.vue       |  6 ++---
 pages/index.vue                         |  2 ++
 server/api/v1/user/friends/index.get.ts | 24 ++++++++++++++++--
 types/api/user.friends.ts               |  8 +++---
 types/api/users.ts                      |  4 +--
 7 files changed, 43 insertions(+), 56 deletions(-)

diff --git a/DB/users.sql b/DB/users.sql
index 12ee040..725f49b 100644
--- a/DB/users.sql
+++ b/DB/users.sql
@@ -16,24 +16,4 @@ ALTER TABLE users
     ADD CONSTRAINT valid_username check (username <> '' AND length(trim(username)) >= 4 AND
                                          username ~ '^[a-zA-Z0-9_]+$');
                                          
-CREATE INDEX idx_username ON users(username);
-
-CREATE OR REPLACE FUNCTION get_profile_information(userId UUID)
-    RETURNS RECORD
-AS
-$$
-DECLARE
-    result RECORD;
-BEGIN
-    SELECT u.id                 AS user_id,
-           u.avatar_url         AS user_avatar,
-           u.username           AS username,
-           u.spotify_id         AS user_spotify_id,
-           u.spotify_visibility AS spotify_visibility
-    INTO result
-    FROM users u
-    WHERE u.id = userId;
-
-    RETURN result;
-END;
-$$ LANGUAGE plpgsql;
\ No newline at end of file
+CREATE INDEX idx_username ON users(username);
\ No newline at end of file
diff --git a/components/UsersView.vue b/components/UsersView.vue
index 88898bf..d2ab1e3 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -15,6 +15,8 @@ const props = defineProps({
   }
 });
 
+const default_avatar = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg');
+
 // Computed Classes
 const containerClasses = computed(() => {
   const baseClasses = 'w-full bg-gray-200 px-3 pb-1 mt-auto rounded-3xl mb-3';
@@ -31,7 +33,7 @@ const userBoxContainerClasses = computed(() =>
 
 
 function isGetFriendsResponse(user: GetFriendsResponse | GetUserResponse): user is GetFriendsResponse {
-  return 'friend_id' in user && 'friend_username' in user && 'friend_spotify_id' in user;
+  return 'friend_id' in user;
 }
 
 function isUserInformation(user: GetFriendsResponse | GetUserResponse): user is GetUserResponse {
@@ -39,25 +41,12 @@ function isUserInformation(user: GetFriendsResponse | GetUserResponse): user is
 }
 
 // Map users conditionally depending on their type
-const mappedUsers = computed(() => {
+const mappedUsers: Array<GetUserResponse> = computed(() => {
   return props.users.map(user => {
     if (isGetFriendsResponse(user)) {
-      return {
-        userId: user.friend_id,
-        username: user.friend_username,
-        userAvatar: user.friend_avatar,
-        spotifyId: user.friend_spotify_id,
-        status: user.status,
-        requestType: user.request_type,
-        createdAt: user.created_at,
-        updatedAt: user.updated_at,
-      };
+      return user.user;
     } else if (isUserInformation(user)) {
-      return {
-        userId: user.id,
-        username: user.username,
-        userAvatar: user.avatar_url,
-      };
+      return user;
     }
     return {};
   });
@@ -86,12 +75,13 @@ const mappedUsers = computed(() => {
 
     <!-- Scrollable User Boxes -->
     <div
+        v-if="users.length != 0"
         :class="userBoxContainerClasses"
     >
       <HomeUsersUserBox
           v-for="user in mappedUsers"
-          :key="user.userId"
-          :profile-picture="user.userAvatar?.toString()"
+          :key="user.id"
+          :profile-picture="user?.avatar_url ? user.avatar_url : default_avatar"
           :name="user.username"
           :user-turn="viewType === UserViewType.USERTURN"
           :class="[
@@ -107,9 +97,8 @@ const mappedUsers = computed(() => {
                         : {} 
                     : {}"
       />
-      <HomeUsersUserBox
-          v-if="users.length > 3"
-          :class="['invisible', viewType === UserViewType.USERTURN ? 'h-1' : 'w-1']"/>
+      <!-- Placeholder for scrolling -->
+      <div v-if="users.length > 3" class="px-1 py-4"/>
     </div>
   </div>
 </template>
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index e6e8a63..2c8438d 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -33,13 +33,11 @@
           props.userTurn ? 'mr-3' : 'mb-0'
         ]"
         :src="props.profilePicture.toString()"
-        :alt="name"
+        :alt="props.name"
       />
       
       <!-- User Name -->
-      <p class="text-white text-sm sm:text-base md:text-lg">
-        {{ props.name }}
-      </p>
+      <p class="text-white text-sm sm:text-base md:text-lg" v-text="props.name"/>
       
       <!-- Play Button -->
       <button
diff --git a/pages/index.vue b/pages/index.vue
index 54b798f..99296ea 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,6 +2,8 @@
 import HeaderFooterView from "~/layouts/HeaderFooterView.vue";
 import { UserViewType } from "@/types/components/users.view"
 
+useUser().fetchUser(); // loading user state just in case
+
 </script>
 
 <template>
diff --git a/server/api/v1/user/friends/index.get.ts b/server/api/v1/user/friends/index.get.ts
index 3e884ed..4a9adbb 100644
--- a/server/api/v1/user/friends/index.get.ts
+++ b/server/api/v1/user/friends/index.get.ts
@@ -27,7 +27,7 @@ export default defineEventHandler(async (event) => {
         return {error: error.message};
     }
 
-    if(data === null) return [];
+    if (data === null) return [];
 
     // Hide spotify id if not visible
     // Yes this works even when the IDE marks it as an error
@@ -37,5 +37,25 @@ export default defineEventHandler(async (event) => {
         }
     });
 
-    return data;
+    const friends = data.map((friendship: GetFriendsResponse) => {
+        return {
+            friendship_id: friendship.friendship_id,
+            friend_id: friendship.friend_id,
+            created_at: friendship.created_at,
+            updated_at: friendship.updated_at,
+            status: friendship.status,
+            request_type: friendship.request_type,
+            user: {
+                id: friendship.friend_id,
+                avatar_url: friendship.friend_avatar,
+                username: friendship.friend_username,
+                spotify_id: friendship.friend_spotify_visibility ? friendship.friend_spotify_id : undefined,
+                spotify_visibility: friendship.friend_spotify_visibility,
+                daily_streak: undefined,
+                daily_streak_updated_at: undefined
+            }
+        }
+    });
+
+    return friends;
 });
\ No newline at end of file
diff --git a/types/api/user.friends.ts b/types/api/user.friends.ts
index 06c54da..d64cfda 100644
--- a/types/api/user.friends.ts
+++ b/types/api/user.friends.ts
@@ -1,5 +1,6 @@
 // ----- Internal Types -----
 import type * as url from "node:url";
+import type {GetUserResponse} from "@/types/api/users";
 export interface FriendError {
     message: string
 }
@@ -21,14 +22,11 @@ export interface FriendActionParam {
 export interface GetFriendsResponse {
     friendship_id: number,
     friend_id: string,
-    friend_username: string,
-    friend_avatar: url.URL | null,
-    friend_spotify_id?: string,
-    friend_spotify_visibility: boolean,
     created_at: string
     updated_at: string
     status: FriendshipStatus,
-    request_type: FriendshipType
+    request_type: FriendshipType,
+    user: GetUserResponse
 }
 
 export enum FriendshipAction {
diff --git a/types/api/users.ts b/types/api/users.ts
index abffbcb..00f0041 100644
--- a/types/api/users.ts
+++ b/types/api/users.ts
@@ -4,6 +4,6 @@ export interface GetUserResponse {
     username: string,
     spotify_id?: string,
     spotify_visibility: boolean,
-    daily_streak: number,
-    daily_streak_updated_at: string
+    daily_streak?: number,
+    daily_streak_updated_at?: string
 }
\ No newline at end of file

From 1f80eb5eab09006b571a08d04b943b21d99124e9 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Tue, 10 Dec 2024 09:17:59 +0100
Subject: [PATCH 30/31] replaced svg with mdi

---
 components/home/Users/UserBox.vue | 6 +-----
 public/icons/playButton.svg       | 7 -------
 2 files changed, 1 insertion(+), 12 deletions(-)
 delete mode 100644 public/icons/playButton.svg

diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 2c8438d..c9ed55a 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -45,11 +45,7 @@
         class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5"
         @click="console.log(props.name)"
       >
-        <NuxtImg
-          src="icons/playButton.svg"
-          alt="Play"
-          class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14"
-        />
+      <Icon name="mdi:play" class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 text-white"/>
       </button>
     </div>
   </template>
diff --git a/public/icons/playButton.svg b/public/icons/playButton.svg
deleted file mode 100644
index 2763488..0000000
--- a/public/icons/playButton.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
-<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-19.24 -19.24 519.48 519.48" xml:space="preserve" stroke="#000000" stroke-width="12.025">
-
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
-
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
-
<g id="SVGRepo_iconCarrier"> <g> <g> <path d="M410.6,70.4C365.1,25,304.7,0,240.5,0S115.9,25,70.4,70.4C25,115.9,0,176.3,0,240.5s25,124.6,70.4,170.1 C115.8,456,176.2,481,240.5,481s124.6-25,170.1-70.4C456,365.2,481,304.8,481,240.5S456,115.9,410.6,70.4z M240.5,454 C122.8,454,27,358.2,27,240.5S122.8,27,240.5,27S454,122.8,454,240.5S358.2,454,240.5,454z"/> <path d="M349.2,229.1l-152.6-97.9c-4.2-2.7-9.4-2.9-13.8-0.5c-4.3,2.4-7,6.9-7,11.8v195.7c0,4.9,2.7,9.5,7,11.8 c2,1.1,4.3,1.7,6.5,1.7c2.5,0,5.1-0.7,7.3-2.1l152.6-97.9c3.9-2.5,6.2-6.8,6.2-11.4S353,231.6,349.2,229.1z M202.8,313.7V167.3 l114.1,73.2L202.8,313.7z"/> </g> </g> </g>
-
</svg>
\ No newline at end of file

From 949c17be061e843c399aec7c8ffe4cc2c74c939d Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Tue, 10 Dec 2024 09:18:34 +0100
Subject: [PATCH 31/31] formatted time string, fits into smaller div when using
 iPhone SE

---
 components/profile/ProfileInformation.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/profile/ProfileInformation.vue b/components/profile/ProfileInformation.vue
index 20f0386..bbab124 100644
--- a/components/profile/ProfileInformation.vue
+++ b/components/profile/ProfileInformation.vue
@@ -10,6 +10,12 @@ onMounted(async () => {
 })
 
 const default_avatar = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg');
+
+const formatDate = (dateString : string) => {
+  const options = { year: "numeric", month: "short", day: "numeric" };
+  const formattedDate = new Intl.DateTimeFormat('en-US', options).format(new Date(dateString));
+  return formattedDate.replace(',', '');
+};
 </script>
 
 <template>
@@ -22,10 +28,10 @@ const default_avatar = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970
       </div>
 
       <div class="grid grid-cols-2 gap-4">
-        <div class="bg-gray-200 h-8 rounded-3xl px-3">Games played</div>
-        <div class="bg-gray-200 h-8 rounded-3xl px-3">Streak: {{ user?.daily_streak }}</div>
-        <div class="bg-gray-200 h-8 rounded-3xl px-3">Spotify {{user?.spotify_visibility ? 'public' : 'private'}}</div>
-        <div class="bg-gray-200 h-8 rounded-3xl px-3">Joined {{ new Date(session?.user.created_at).toDateString() }}</div>
+        <div class="bg-gray-200 h-8 rounded-3xl px-3 flex items-center justify-center">Games played</div>
+        <div class="bg-gray-200 h-8 rounded-3xl px-3 flex items-center justify-center">Streak: {{ user?.daily_streak }}</div>
+        <div class="bg-gray-200 h-8 rounded-3xl px-3 flex items-center justify-center">Spotify: {{user?.spotify_visibility ? 'public' : 'private'}}</div>
+        <div class="bg-gray-200 h-8 rounded-3xl px-3 flex items-center justify-center">Joined: {{ formatDate(session?.user.created_at) }}</div>
       </div>
     </div>
   </div>