From 9b07ba6efe53d55257eb20414122159c9162dc1e Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sun, 8 Dec 2024 15:21:48 +0100
Subject: [PATCH 01/25] added working playlist view

---
 components/playlists/PlaylistBox.vue  | 37 +++++++++++++++++
 components/playlists/PlaylistView.vue | 60 +++++++++++++++++++++++++++
 components/profile/Friendlist.vue     |  8 ++--
 pages/playlists.vue                   | 25 +++++++++++
 types/api/playlists.ts                | 10 +++++
 5 files changed, 136 insertions(+), 4 deletions(-)
 create mode 100644 components/playlists/PlaylistBox.vue
 create mode 100644 components/playlists/PlaylistView.vue
 create mode 100644 pages/playlists.vue
 create mode 100644 types/api/playlists.ts

diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
new file mode 100644
index 0000000..593043e
--- /dev/null
+++ b/components/playlists/PlaylistBox.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+
+    const props = defineProps({
+    cover: {
+        type: Object as () => URL,
+        default: new URL('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eb777e7a-7d3c-487e-865a-fc83920564a1/d7kpm65-437b2b46-06cd-4a86-9041-cc8c3737c6f0.jpg/v1/fit/w_800,h_800,q_70,strp/no_album_art__no_cover___placeholder_picture_by_cmdrobot_d7kpm65-414w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODAwIiwicGF0aCI6IlwvZlwvZWI3NzdlN2EtN2QzYy00ODdlLTg2NWEtZmM4MzkyMDU2NGExXC9kN2twbTY1LTQzN2IyYjQ2LTA2Y2QtNGE4Ni05MDQxLWNjOGMzNzM3YzZmMC5qcGciLCJ3aWR0aCI6Ijw9ODAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.8yjX5CrFjxVH06LB59TpJLu6doZb0wz8fGQq4tM64mg')
+    },
+    name: {
+        type: String,
+        default: 'Playlist'
+    }
+    });
+</script>
+
+<template>
+    <div
+      :class="[
+        'bg-blue-600 rounded-3xl p-3 mr-3 mb-3 inline-block'
+      ]"
+    >
+      <!-- Playlist Cover -->
+      <NuxtImg
+        :class="[ 
+          'w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 rounded-2xl'
+        ]"
+        :src="props.cover.toString()"
+        :alt="name"
+      />
+      
+      <!-- Playlist Name -->
+      <p class="text-white text-sm sm:text-base md:text-lg text-center">
+        {{ props.name }}
+      </p>
+    </div>
+  </template>
+  
+  
\ No newline at end of file
diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
new file mode 100644
index 0000000..ebeddc3
--- /dev/null
+++ b/components/playlists/PlaylistView.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { type GetPlaylistResponse } from "@/types/api/playlists"
+
+const cover = ref(new URL('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eb777e7a-7d3c-487e-865a-fc83920564a1/d7kpm65-437b2b46-06cd-4a86-9041-cc8c3737c6f0.jpg/v1/fit/w_800,h_800,q_70,strp/no_album_art__no_cover___placeholder_picture_by_cmdrobot_d7kpm65-414w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODAwIiwicGF0aCI6IlwvZlwvZWI3NzdlN2EtN2QzYy00ODdlLTg2NWEtZmM4MzkyMDU2NGExXC9kN2twbTY1LTQzN2IyYjQ2LTA2Y2QtNGE4Ni05MDQxLWNjOGMzNzM3YzZmMC5qcGciLCJ3aWR0aCI6Ijw9ODAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.8yjX5CrFjxVH06LB59TpJLu6doZb0wz8fGQq4tM64mg'));
+const playlists = ref()
+
+
+const session = useSupabaseSession()
+
+onMounted(async () => {
+    if (session.value) {
+        await getProfileInformation()
+    }
+})
+
+async function getProfileInformation() {
+    $fetch<GetPlaylistResponse[]>('http://localhost:3000/api/v1/playlist')
+      .then((data) => {
+        playlists.value = [...data]
+        console.log(playlists.value[1])
+      });
+}
+
+// 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 `${baseClasses}`;
+});
+
+/*const userBoxContainerClasses = computed(() =>
+   props.viewType === UserViewType.USERTURN
+        ? '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'
+);*/
+
+</script>
+
+<template>
+    <div :class="[
+                    containerClasses,
+                    //((viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) && users.length > 3) ? 'pr-0' : ''
+                ]"
+    >
+        <!-- Fixed Header -->
+        <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2">
+            <p> Genre</p>
+        </div>
+
+        <!-- Scrollable User Boxes -->
+        <div>
+            <PlaylistsPlaylistBox 
+                v-for="item in playlists" 
+                :key="item.id"
+                :name="item.name"
+                v-bind="item.cover ? { cover: item.cover } : {}"/>
+        </div>
+    </div>
+</template>
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 491f1a7..25bf86e 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -22,18 +22,18 @@ async function getFriendships() {
       });
 }
 
-function addFriend() {
+/*function addFriend() {
   const newFriend = {
     friend_username: "sfsdf",
   }
   friends.value.push(newFriend)
-}
+}*/
 </script>
 
 <template>
   <UsersView :view-type="UserViewType.FRIENDS" :users="friends"/>
 
-  <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
diff --git a/pages/playlists.vue b/pages/playlists.vue
new file mode 100644
index 0000000..0621356
--- /dev/null
+++ b/pages/playlists.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+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>
+        <PlaylistsPlaylistView/>
+      </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>
+        <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
diff --git a/types/api/playlists.ts b/types/api/playlists.ts
new file mode 100644
index 0000000..cac3d37
--- /dev/null
+++ b/types/api/playlists.ts
@@ -0,0 +1,10 @@
+import type * as url from "node:url";
+
+export interface GetPlaylistResponse {
+    id: number,
+    spotifyId: string,
+    name: string,
+    cover: url.URL | null,
+    enabled: boolean,
+    categories: string[]
+}
\ No newline at end of file

From e1769180011f05b6ecd62f9311d9c4c2949de643 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sun, 8 Dec 2024 16:11:11 +0100
Subject: [PATCH 02/25] added scroll effect for long names

---
 components/playlists/PlaylistBox.vue  | 77 ++++++++++++++++++++-------
 components/playlists/PlaylistView.vue |  3 --
 2 files changed, 59 insertions(+), 21 deletions(-)

diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
index 593043e..07360f2 100644
--- a/components/playlists/PlaylistBox.vue
+++ b/components/playlists/PlaylistBox.vue
@@ -13,25 +13,66 @@
 </script>
 
 <template>
-    <div
-      :class="[
-        'bg-blue-600 rounded-3xl p-3 mr-3 mb-3 inline-block'
+  <div
+    :class="[
+      'bg-blue-600 rounded-3xl p-3 mr-3 mb-3 inline-block overflow-hidden'
+    ]"
+  >
+    <!-- Playlist Cover -->
+    <NuxtImg
+      :class="[ 
+        'w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 rounded-2xl cover-image'
       ]"
-    >
-      <!-- Playlist Cover -->
-      <NuxtImg
-        :class="[ 
-          'w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 rounded-2xl'
-        ]"
-        :src="props.cover.toString()"
-        :alt="name"
-      />
-      
-      <!-- Playlist Name -->
-      <p class="text-white text-sm sm:text-base md:text-lg text-center">
-        {{ props.name }}
-      </p>
+      :src="props.cover.toString()"
+      :alt="props.name"
+    />
+    
+    <!-- Horizontally Scrolling Text -->
+    <div class="text-container">
+      <p :class="['text-center', props.name.length > 5 ? 'scrolling-text' : '']">{{ props.name }}</p>
     </div>
-  </template>
+  </div>
+</template>
+
+<style scoped>
+.playlist-container {
+  max-width: 150px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+}
+
+.cover-image {
+  max-width: 100%;
+  display: block;
+}
+
+.text-container {
+  overflow: hidden;
+  white-space: nowrap; 
+  position: relative;
+  width: 100%;
+}
+
+.scrolling-text {
+  display: inline-block;
+  animation: scrollText 10s linear infinite; /* Adjust speed with '10s' */
+  white-space: nowrap;
+}
+
+/* Scroll animation keyframe */
+@keyframes scrollText {
+  0% {
+    transform: translateX(0%); /* Start outside the box */
+  }
+  100% {
+    transform: translateX(-100%); /* Scroll completely to the left */
+  }
+}
+</style>
+
   
   
\ No newline at end of file
diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index ebeddc3..2a64d3e 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import { type GetPlaylistResponse } from "@/types/api/playlists"
 
-const cover = ref(new URL('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eb777e7a-7d3c-487e-865a-fc83920564a1/d7kpm65-437b2b46-06cd-4a86-9041-cc8c3737c6f0.jpg/v1/fit/w_800,h_800,q_70,strp/no_album_art__no_cover___placeholder_picture_by_cmdrobot_d7kpm65-414w-2x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9ODAwIiwicGF0aCI6IlwvZlwvZWI3NzdlN2EtN2QzYy00ODdlLTg2NWEtZmM4MzkyMDU2NGExXC9kN2twbTY1LTQzN2IyYjQ2LTA2Y2QtNGE4Ni05MDQxLWNjOGMzNzM3YzZmMC5qcGciLCJ3aWR0aCI6Ijw9ODAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.8yjX5CrFjxVH06LB59TpJLu6doZb0wz8fGQq4tM64mg'));
 const playlists = ref()
 
-
 const session = useSupabaseSession()
 
 onMounted(async () => {
@@ -40,7 +38,6 @@ const containerClasses = computed(() => {
 <template>
     <div :class="[
                     containerClasses,
-                    //((viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) && users.length > 3) ? 'pr-0' : ''
                 ]"
     >
         <!-- Fixed Header -->

From dd07a8967397a4ede4bf117f5342ce8dd0914f4f Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Mon, 9 Dec 2024 14:48:32 +0100
Subject: [PATCH 03/25] fixed sizing for long text

---
 components/playlists/PlaylistBox.vue  |  6 +--
 components/playlists/PlaylistView.vue | 60 +++++++++++++++++----------
 layouts/FooterView.vue                |  2 +-
 3 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
index 07360f2..cd9923e 100644
--- a/components/playlists/PlaylistBox.vue
+++ b/components/playlists/PlaylistBox.vue
@@ -15,7 +15,7 @@
 <template>
   <div
     :class="[
-      'bg-blue-600 rounded-3xl p-3 mr-3 mb-3 inline-block overflow-hidden'
+      'bg-blue-600 rounded-3xl p-3 mr-3 mb-3 inline-block w-20 md:w-24'
     ]"
   >
     <!-- Playlist Cover -->
@@ -29,7 +29,7 @@
     
     <!-- Horizontally Scrolling Text -->
     <div class="text-container">
-      <p :class="['text-center', props.name.length > 5 ? 'scrolling-text' : '']">{{ props.name }}</p>
+      <p :class="['text-center', props.name.length > 8 ? 'scrolling-text' : '']">{{ props.name }}</p>
     </div>
   </div>
 </template>
@@ -59,7 +59,7 @@
 
 .scrolling-text {
   display: inline-block;
-  animation: scrollText 10s linear infinite; /* Adjust speed with '10s' */
+  animation: scrollText 5s linear infinite; /* Adjust speed with '10s' */
   white-space: nowrap;
 }
 
diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index 2a64d3e..5bc991e 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -13,10 +13,10 @@ onMounted(async () => {
 
 async function getProfileInformation() {
     $fetch<GetPlaylistResponse[]>('http://localhost:3000/api/v1/playlist')
-      .then((data) => {
-        playlists.value = [...data]
-        console.log(playlists.value[1])
-      });
+        .then((data) => {
+            playlists.value = [...data]
+            console.log(playlists.value[1])
+        });
 }
 
 // Computed Classes
@@ -33,25 +33,41 @@ const containerClasses = computed(() => {
         : 'flex gap-1 md:gap-3 mt-6 md:mt-9'
 );*/
 
+function addPlaylist() {
+    const newFriend = {
+        friend_username: "sfsdf",
+    }
+    playlists.value.push(newFriend)
+}
+
 </script>
 
 <template>
-    <div :class="[
-                    containerClasses,
-                ]"
-    >
-        <!-- Fixed Header -->
-        <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2">
-            <p> Genre</p>
-        </div>
-
-        <!-- Scrollable User Boxes -->
-        <div>
-            <PlaylistsPlaylistBox 
-                v-for="item in playlists" 
-                :key="item.id"
-                :name="item.name"
-                v-bind="item.cover ? { cover: item.cover } : {}"/>
-        </div>
+    <div :class="[containerClasses]">
+      <!-- Fixed Header -->
+      <div class="mb-1 text-xs md:text-base mt-2 pt-2">
+        <p>Genre</p>
+      </div>
+  
+      <!-- Scrollable Playlist Boxes with constrained height -->
+      <div class="overflow-y-auto h-[calc(100%-5rem)]"> <!-- Adjust height based on parent header -->
+        <PlaylistsPlaylistBox
+          v-for="item in playlists"
+          :key="item.id"
+          :name="item.name"
+          v-bind="item.cover ? { cover: item.cover } : {}"
+        />
+      </div>
+  
+      <!-- Add Playlist Button -->
+      <div class="mt-3">
+        <button
+          class="p-2 bg-blue-500 text-white rounded ml-2"
+          @click="addPlaylist"
+        >
+          Add Playlist
+        </button>
+      </div>
     </div>
-</template>
+  </template>
+  
diff --git a/layouts/FooterView.vue b/layouts/FooterView.vue
index 6381c9d..18f46f4 100644
--- a/layouts/FooterView.vue
+++ b/layouts/FooterView.vue
@@ -7,7 +7,7 @@
     <!-- Wrapper div für die Breiten-Kontrolle -->
     <div class="w-full xl:w-1/2 2xl:w-1/4 flex flex-col h-full">
       <!-- Content -->
-      <div class="flex-1 border rounded-3xl">
+      <div class="flex-1 border rounded-3xl p-3">
           <slot name="content"/>
       </div>
 

From 4f9a03b23a0ac4e2490d8f9edb573d54eced293d Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Tue, 10 Dec 2024 08:45:48 +0100
Subject: [PATCH 04/25] resized PlaylistsBoxes and added 'Add Playlists' button

---
 components/playlists/PlaylistBox.vue  | 50 +++++++++++----------------
 components/playlists/PlaylistView.vue | 22 +++---------
 2 files changed, 25 insertions(+), 47 deletions(-)

diff --git a/components/playlists/PlaylistBox.vue b/components/playlists/PlaylistBox.vue
index cd9923e..21b836c 100644
--- a/components/playlists/PlaylistBox.vue
+++ b/components/playlists/PlaylistBox.vue
@@ -7,7 +7,12 @@
     },
     name: {
         type: String,
-        default: 'Playlist'
+        default: 'Playlist',
+        required: true
+    },
+    controlElement: {
+      type: String,
+      default: null
     }
     });
 </script>
@@ -15,58 +20,43 @@
 <template>
   <div
     :class="[
-      'bg-blue-600 rounded-3xl p-3 mr-3 mb-3 inline-block w-20 md:w-24'
+      'bg-blue-600 rounded-3xl p-3 mr-3 mb-3 inline-block w-24 md:w-28'
     ]"
   >
     <!-- Playlist Cover -->
-    <NuxtImg
+    <div class="flex flex-col items-center justify-center">
+    <Icon
+      v-if="controlElement"  :name="props.controlElement" :class="[ 
+        'w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 rounded-2xl text-white'
+      ]"/>
+    <NuxtImg 
+      v-else
       :class="[ 
-        'w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 rounded-2xl cover-image'
+        'w-16 h-16 sm:w-18 sm:h-18 md:w-20 md:h-20 rounded-2xl'
       ]"
       :src="props.cover.toString()"
       :alt="props.name"
     />
+  </div>
     
     <!-- Horizontally Scrolling Text -->
-    <div class="text-container">
-      <p :class="['text-center', props.name.length > 8 ? 'scrolling-text' : '']">{{ props.name }}</p>
+    <div class="overflow-hidden">
+      <p :class="['text-center text-sm md:text-base', props.name.length > 12 ? 'scrolling-text' : '']">{{ props.name }}</p>
     </div>
   </div>
 </template>
 
 <style scoped>
-.playlist-container {
-  max-width: 150px;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  position: relative;
-}
-
-.cover-image {
-  max-width: 100%;
-  display: block;
-}
-
-.text-container {
-  overflow: hidden;
-  white-space: nowrap; 
-  position: relative;
-  width: 100%;
-}
-
 .scrolling-text {
   display: inline-block;
-  animation: scrollText 5s linear infinite; /* Adjust speed with '10s' */
+  animation: scrollText 5s linear infinite;
   white-space: nowrap;
 }
 
 /* Scroll animation keyframe */
 @keyframes scrollText {
   0% {
-    transform: translateX(0%); /* Start outside the box */
+    transform: translateX(0%); /* Start at beginning */
   }
   100% {
     transform: translateX(-100%); /* Scroll completely to the left */
diff --git a/components/playlists/PlaylistView.vue b/components/playlists/PlaylistView.vue
index 5bc991e..a9d2ea1 100644
--- a/components/playlists/PlaylistView.vue
+++ b/components/playlists/PlaylistView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type GetPlaylistResponse } from "@/types/api/playlists"
+import type { GetPlaylistResponse } from "@/types/api/playlists"
 
 const playlists = ref()
 
@@ -7,31 +7,23 @@ const session = useSupabaseSession()
 
 onMounted(async () => {
     if (session.value) {
-        await getProfileInformation()
+        await getPlaylists()
     }
 })
 
-async function getProfileInformation() {
+async function getPlaylists() {
     $fetch<GetPlaylistResponse[]>('http://localhost:3000/api/v1/playlist')
         .then((data) => {
             playlists.value = [...data]
-            console.log(playlists.value[1])
         });
 }
 
 // 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 `${baseClasses}`;
 });
 
-/*const userBoxContainerClasses = computed(() =>
-   props.viewType === UserViewType.USERTURN
-        ? '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'
-);*/
 
 function addPlaylist() {
     const newFriend = {
@@ -57,17 +49,13 @@ function addPlaylist() {
           :name="item.name"
           v-bind="item.cover ? { cover: item.cover } : {}"
         />
-      </div>
-  
-      <!-- Add Playlist Button -->
-      <div class="mt-3">
         <button
-          class="p-2 bg-blue-500 text-white rounded ml-2"
           @click="addPlaylist"
         >
-          Add Playlist
+          <PlaylistsPlaylistBox name="Add Playlist" control-element="mdi:plus"/>
         </button>
       </div>
+
     </div>
   </template>
   

From f2f713c337b6f6a58da722645e7e0b712c764180 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Tue, 10 Dec 2024 13:53:49 +0100
Subject: [PATCH 05/25] added value for friend requests

---
 types/components/users.view.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/types/components/users.view.ts b/types/components/users.view.ts
index 525dc9b..9bc96a7 100644
--- a/types/components/users.view.ts
+++ b/types/components/users.view.ts
@@ -1,5 +1,6 @@
 export enum UserViewType {
     FRIENDS = 0,
     OPPONENTTURN = 1,
-    USERTURN = 2 
+    USERTURN = 2, 
+    REQUESTS = 3
 }
\ No newline at end of file

From d03570df3e90059e8fb82e1b8dd20072a327ca32 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Tue, 10 Dec 2024 13:54:09 +0100
Subject: [PATCH 06/25] added box for incoming friend requests

---
 components/UsersView.vue          | 12 ++--
 components/home/Users/UserBox.vue | 94 +++++++++++++++----------------
 components/profile/Friendlist.vue | 36 ++++++++++--
 3 files changed, 85 insertions(+), 57 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index 2e268fe..482aae8 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -21,7 +21,7 @@ const default_avatar = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970
 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`;
+  if (props.viewType === UserViewType.OPPONENTTURN || props.viewType === UserViewType.FRIENDS || props.viewType === UserViewType.REQUESTS) return `${baseClasses} overflow-y-hidden`;
   return '';
 });
 
@@ -59,7 +59,7 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
   <div
       :class="[
                     containerClasses,
-                    ((viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) && users.length > 3) ? 'pr-0' : ''
+                    ((viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN || viewType === UserViewType.REQUESTS) && users.length > 3) ? 'pr-0' : ''
                 ]"
   >
     <!-- Fixed Conditional Header -->
@@ -73,6 +73,9 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
       <p v-else-if="viewType === UserViewType.FRIENDS" class="fixed">
         Friends
       </p>
+      <p v-else-if="viewType === UserViewType.REQUESTS" class="fixed">
+        Friend Requests
+      </p>
     </div>
 
     <!-- Scrollable User Boxes -->
@@ -87,17 +90,18 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
           :name="user.username"
           :user-turn="viewType === UserViewType.USERTURN"
           :class="[
-                    (viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN) 
+                    (viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN || viewType === UserViewType.REQUESTS) 
                         ? 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 || viewType === UserViewType.REQUESTS)
                     ? users.length > 3 
                         ? { width: 'calc(33.33% - .98rem)', flexShrink: 0 } 
                         : {} 
                     : {}"
+          :friend-request="viewType === UserViewType.REQUESTS"
       />
       <!-- Placeholder for scrolling -->
       <div v-if="users.length > 3" class="px-1 py-4"/>
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index c9ed55a..7f34cb9 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -1,52 +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'
-    },
-    name: {
-        type: String,
-        default: 'User'
-    },
-    userTurn: {
-        type: Boolean,
-        default: false
-    }
-    });
+const props = defineProps({
+  profilePicture: {
+    type: String,
+    default: 'https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg'
+  },
+  name: {
+    type: String,
+    default: 'User'
+  },
+  userTurn: {
+    type: Boolean,
+    default: false
+  },
+  friendRequest: {
+    type: Boolean,
+    default: false
+  }
+});
 </script>
 
 <template>
-    <div
-      :class="[
-        'bg-blue-600 rounded-3xl px-3 w-full', 
-        props.userTurn
-          ? 'flex items-center'
-          : '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',
-          props.userTurn ? 'mr-3' : 'mb-0'
-        ]"
-        :src="props.profilePicture.toString()"
-        :alt="props.name"
-      />
-      
-      <!-- User Name -->
-      <p class="text-white text-sm sm:text-base md:text-lg" v-text="props.name"/>
-      
-      <!-- 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)"
-      >
-      <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>
-  
\ No newline at end of file
+  <div 
+  :class="[
+    'bg-blue-600 rounded-3xl px-3 w-full',
+    props.userTurn
+      ? 'flex items-center'
+      : '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',
+      props.userTurn ? 'mr-3' : 'mb-0'
+    ]" :src="props.profilePicture.toString()" :alt="props.name" />
+
+    <!-- User Name -->
+    <p class="text-white text-sm sm:text-base md:text-lg" v-text="props.name" />
+
+    <!-- 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)">
+      <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>
+
+    <!-- Accept Button -->
+    <!--button v-if="props.friendRequest" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="console.log(props.name)">
+      <Icon name="mdi:check" 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>
\ No newline at end of file
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 491f1a7..90ff79a 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -7,6 +7,8 @@ const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () =
 
 const session = useSupabaseSession()
 
+const newFriend = ref('')
+
 onMounted(async () => {
   if (session.value) {
     await getFriendships()
@@ -22,18 +24,40 @@ async function getFriendships() {
       });
 }
 
-function addFriend() {
-  const newFriend = {
-    friend_username: "sfsdf",
+const addFriend = async () => {
+  console.log(newFriend.value)
+  try {
+    await useFetch('/api/v1/user/', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+  } catch (err) {
+    console.error('Unexpected error:', err);
   }
-  friends.value.push(newFriend)
-}
+
+
+  try {
+    await useFetch('/api/v1/user/friends', {
+      method: 'POST',
+      body: JSON.stringify({ receiver_id: newFriend.value }),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+  } catch (err) {
+    console.error('Unexpected error:', err);
+  }
+};
 </script>
 
 <template>
-  <UsersView :view-type="UserViewType.FRIENDS" :users="friends"/>
+  <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends"/>
+  <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests"/>
 
   <div class="mt-3">
       <button class="p-2 bg-blue-500 text-white rounded ml-2" @click="addFriend">Add Friend</button>
+      <input v-model="newFriend">
   </div>
 </template>
\ No newline at end of file

From 15220ac89cf3aa908ad026cfdb34f437287b6062 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Tue, 10 Dec 2024 14:31:47 +0100
Subject: [PATCH 07/25] added working friend request by name

---
 components/profile/Friendlist.vue        | 15 +--------------
 server/api/v1/user/friends/index.post.ts |  8 ++++----
 types/api/user.friends.ts                |  5 +++++
 3 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 90ff79a..a4f3b76 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -25,23 +25,10 @@ async function getFriendships() {
 }
 
 const addFriend = async () => {
-  console.log(newFriend.value)
-  try {
-    await useFetch('/api/v1/user/', {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    });
-  } catch (err) {
-    console.error('Unexpected error:', err);
-  }
-
-
   try {
     await useFetch('/api/v1/user/friends', {
       method: 'POST',
-      body: JSON.stringify({ receiver_id: newFriend.value }),
+      body: JSON.stringify({ receiver_name: newFriend.value }),
       headers: {
         'Content-Type': 'application/json'
       }
diff --git a/server/api/v1/user/friends/index.post.ts b/server/api/v1/user/friends/index.post.ts
index 5c373bc..9f018ad 100644
--- a/server/api/v1/user/friends/index.post.ts
+++ b/server/api/v1/user/friends/index.post.ts
@@ -1,10 +1,10 @@
 // send friend invite
 import {z} from 'zod'
 import {serverSupabaseServiceRole, serverSupabaseUser} from "#supabase/server";
-import type {SendFriendRequestParam} from "~/types/api/user.friends";
+import type {SendFriendRequestNameParam} from "~/types/api/user.friends";
 
 const userSchema = z.object({
-    receiver_id: z.string().uuid()
+    receiver_name: z.string()
 }).readonly()
 
 export default defineEventHandler(async (event) => {
@@ -24,8 +24,8 @@ export default defineEventHandler(async (event) => {
 
     // Send request
     const client = serverSupabaseServiceRole(event);
-    const param: SendFriendRequestParam = {sender_id: user.id, receiver_id: result.data.receiver_id};
-    const {error} = await client.rpc('send_friend_request', param as never);
+    const param: SendFriendRequestNameParam = {sender_id: user.id, receiver_name: result.data.receiver_name};
+    const {error} = await client.rpc('send_friend_request_by_name', param as never);
 
     // Handle errors
     if (error) {
diff --git a/types/api/user.friends.ts b/types/api/user.friends.ts
index d64cfda..7a75062 100644
--- a/types/api/user.friends.ts
+++ b/types/api/user.friends.ts
@@ -14,6 +14,11 @@ export interface SendFriendRequestParam {
     receiver_id: string
 }
 
+export interface SendFriendRequestNameParam {
+    sender_id: string,
+    receiver_name: string
+}
+
 export interface FriendActionParam {
     friendship_id_param: number,
 }

From 105ee8840f734d4071a4868720f4050e89748e24 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Tue, 10 Dec 2024 15:10:21 +0100
Subject: [PATCH 08/25] added error field

---
 components/profile/Friendlist.vue | 44 ++++++++++++++++++++++---------
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index a4f3b76..fe08485 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -1,5 +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";
 import { UserViewType } from "@/types/components/users.view";
 
 const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", () => [])
@@ -8,6 +8,7 @@ const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () =
 const session = useSupabaseSession()
 
 const newFriend = ref('')
+const newFriendError = ref('')
 
 onMounted(async () => {
   if (session.value) {
@@ -18,33 +19,52 @@ onMounted(async () => {
 
 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)
-      });
+    .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)
+    });
 }
 
 const addFriend = async () => {
   try {
-    await useFetch('/api/v1/user/friends', {
+    const data = await $fetch('/api/v1/user/friends', {
       method: 'POST',
       body: JSON.stringify({ receiver_name: newFriend.value }),
       headers: {
         'Content-Type': 'application/json'
       }
     });
+    console.log('Friend request sent successfully:', data);
+    newFriendError.value = ''; 
   } catch (err) {
-    console.error('Unexpected error:', err);
+    if (err.response) {
+      newFriendError.value = "Please check your input."
+      console.error('Error response:', err.response);
+      console.error('Error data:', err.response.data);
+    } else {
+      // Something else happened while setting up the request
+      console.error('Error message:', err.message);
+    }
   }
 };
 </script>
 
 <template>
-  <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends"/>
-  <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests"/>
+  <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends" />
+  <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests" />
 
   <div class="mt-3">
-      <button class="p-2 bg-blue-500 text-white rounded ml-2" @click="addFriend">Add Friend</button>
-      <input v-model="newFriend">
+    <input v-model="newFriend" class="rounded-3xl pl-2">
+    <button class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="addFriend">Add Friend</button>
+
+    <p v-if="newFriendError" class="error-message">{{ newFriendError }}</p>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+.error-message {
+  color: red;
+  margin-top: 5px;
+  background-color: white;
+}
+</style>
\ No newline at end of file

From b9c61240442702a4ed02f19ebc502136ce4ed79a Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 11 Dec 2024 12:21:59 +0100
Subject: [PATCH 09/25] added modal for accepting friend requests

---
 components/UsersView.vue          |  23 ++++--
 components/home/Users/UserBox.vue |  26 ++++--
 components/profile/Friendlist.vue |   8 +-
 components/profile/UserModal.vue  | 132 ++++++++++++++++++++++++++++++
 types/components/users.view.ts    |   3 +-
 5 files changed, 176 insertions(+), 16 deletions(-)
 create mode 100644 components/profile/UserModal.vue

diff --git a/components/UsersView.vue b/components/UsersView.vue
index 482aae8..0193f57 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type {GetFriendsResponse} from "@/types/api/user.friends";
+import {type GetFriendsResponse, FriendshipStatus} from "@/types/api/user.friends";
 import {UserViewType} from "@/types/components/users.view";
 import type {GetUserResponse} from "@/types/api/users";
 
@@ -15,14 +15,16 @@ const props = defineProps({
   }
 });
 
+const friendshipId = ref(0);
+const friendshipStatus = ref(FriendshipStatus.ACCEPTED);
+
 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';
   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 || props.viewType === UserViewType.REQUESTS) return `${baseClasses} overflow-y-hidden`;
-  return '';
+  else return `${baseClasses} overflow-y-hidden`;
 });
 
 const userBoxContainerClasses = computed(() =>
@@ -33,6 +35,9 @@ const userBoxContainerClasses = computed(() =>
 
 
 function isGetFriendsResponse(user: GetFriendsResponse | GetUserResponse): user is GetFriendsResponse {
+  friendshipId.value = user.friendship_id;
+  friendshipStatus.value = user.status;
+  console.log("userView:" + friendshipId.value)
   return 'friend_id' in user;
 }
 
@@ -59,7 +64,7 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
   <div
       :class="[
                     containerClasses,
-                    ((viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN || viewType === UserViewType.REQUESTS) && users.length > 3) ? 'pr-0' : ''
+                    ((viewType != UserViewType.USERTURN) && users.length > 3) ? 'pr-0' : ''
                 ]"
   >
     <!-- Fixed Conditional Header -->
@@ -76,6 +81,9 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
       <p v-else-if="viewType === UserViewType.REQUESTS" class="fixed">
         Friend Requests
       </p>
+      <p v-else-if="viewType === UserViewType.SENTREQUESTS" class="fixed">
+        Sent Friend Requests
+      </p>
     </div>
 
     <!-- Scrollable User Boxes -->
@@ -90,18 +98,21 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
           :name="user.username"
           :user-turn="viewType === UserViewType.USERTURN"
           :class="[
-                    (viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN || viewType === UserViewType.REQUESTS) 
+                    (viewType != UserViewType.USERTURN) 
                         ? users.length === 3 ? 'w-1/3' 
                         : users.length === 2 ? 'w-1/2' 
                         : 'w-full'
                         : ''
                 ]"
-          :style="(viewType === UserViewType.FRIENDS || viewType === UserViewType.OPPONENTTURN || viewType === UserViewType.REQUESTS)
+          :style="(viewType != UserViewType.USERTURN)
                     ? users.length > 3 
                         ? { width: 'calc(33.33% - .98rem)', flexShrink: 0 } 
                         : {} 
                     : {}"
           :friend-request="viewType === UserViewType.REQUESTS"
+          :friendship-id="friendshipId"
+          :friends-status="friendshipStatus"
+          :friend-id="user.id"
       />
       <!-- Placeholder for scrolling -->
       <div v-if="users.length > 3" class="px-1 py-4"/>
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 7f34cb9..9d0430b 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+import { FriendshipStatus } from '@/types/api/user.friends';
 
 const props = defineProps({
   profilePicture: {
@@ -16,18 +18,32 @@ const props = defineProps({
   friendRequest: {
     type: Boolean,
     default: false
+  },
+  friendshipId: {
+    type: Number,
+    default: 0
+  },
+  friendsStatus: {
+    type: FriendshipStatus,
+    default: FriendshipStatus.PENDING
+  },
+  friendId: {
+    type: Number,
+    required: true
   }
 });
+
+const showModal = ref(false);
 </script>
 
 <template>
   <div 
   :class="[
-    'bg-blue-600 rounded-3xl px-3 w-full',
+    'bg-blue-600 rounded-3xl px-3 w-full hover:bg-sky-700',
     props.userTurn
       ? 'flex items-center'
       : 'flex flex-col items-center justify-center mb-3 py-2'
-  ]">
+  ]" @click="showModal = true">
     <!-- Profile Picture -->
     <NuxtImg 
     :class="[
@@ -43,10 +59,6 @@ const props = defineProps({
     <button v-if="props.userTurn" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="console.log(props.name)">
       <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>
-
-    <!-- Accept Button -->
-    <!--button v-if="props.friendRequest" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="console.log(props.name)">
-      <Icon name="mdi:check" 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>
+  <ProfileUserModal v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId" :friends-status="props.friendsStatus" :friend-id="props.friendId" @close-modal="showModal = false"/>
 </template>
\ No newline at end of file
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index fe08485..dcd4287 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -4,6 +4,7 @@ import { UserViewType } from "@/types/components/users.view";
 
 const requests: Ref<GetFriendsResponse[]> = useState("incoming_friendships", () => [])
 const friends: Ref<GetFriendsResponse[]> = useState("accepted_friendships", () => [])
+const sentRequests: Ref<GetFriendsResponse[]> = useState("outgoing_friendships", () => [])
 
 const session = useSupabaseSession()
 
@@ -22,6 +23,7 @@ async function getFriendships() {
     .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)
+      sentRequests.value = data.filter((item) => item.request_type == FriendshipType.OUTGOING && item.status === FriendshipStatus.PENDING)
     });
 }
 
@@ -35,7 +37,8 @@ const addFriend = async () => {
       }
     });
     console.log('Friend request sent successfully:', data);
-    newFriendError.value = ''; 
+    newFriendError.value = '';
+    await getFriendships();
   } catch (err) {
     if (err.response) {
       newFriendError.value = "Please check your input."
@@ -51,7 +54,8 @@ const addFriend = async () => {
 
 <template>
   <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends" />
-  <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests" />
+  <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests"/>
+  <UsersView v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests" />
 
   <div class="mt-3">
     <input v-model="newFriend" class="rounded-3xl pl-2">
diff --git a/components/profile/UserModal.vue b/components/profile/UserModal.vue
new file mode 100644
index 0000000..a2e8a46
--- /dev/null
+++ b/components/profile/UserModal.vue
@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { FriendshipAction, FriendshipStatus } from '@/types/api/user.friends';
+import type { GetUserResponse } from '@/types/api/users';
+
+const props = defineProps({
+    profilePicture: {
+        type: String,
+        default: 'https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970_bRCkYfk0P6PP5fKbMhZMIb07mCJ6esXL.jpg'
+    },
+    name: {
+        type: String,
+        default: 'User'
+    },
+    friendshipId: {
+        type: Number,
+        required: true
+    },
+    friendsStatus: {
+        type: FriendshipStatus,
+        default: FriendshipStatus.ACCEPTED
+    },
+    friendId: {
+        type: Number,
+        required: true
+    }
+});
+
+const friend = ref()
+
+onMounted(async () => {
+    friend.value = await getFriendInformation()
+    console.log(friend.value.daily_streak);
+})
+
+const emit = defineEmits(['close-modal']);
+
+const icon_wrapper = 'bg-yellow-500 flex items-center rounded-full justify-center p-1 hover:cursor-pointer hover:bg-yellow-600'
+
+async function handleFriendship(action: FriendshipAction) {
+    console.log(props.friendsStatus)
+    emit('close-modal');
+    try {
+        const data = await $fetch('/api/v1/user/friends/action', {
+            method: 'POST',
+            body: JSON.stringify({ friendship_id: props.friendshipId, action: action }),
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+        console.log('Friend request accepted successfully:', data);
+    } catch (err) {
+        if (err.response) {
+            console.error('Error response:', err.response);
+            console.error('Error data:', err.response.data);
+        } else {
+            // Something else happened while setting up the request
+            console.error('Error message:', err.message);
+        }
+    }
+    if (action === FriendshipAction.ACCEPT) {
+        console.log()
+    }
+    else {
+        console.log("Decline")
+    }
+};
+
+async function getFriendInformation() {
+    return await $fetch<GetUserResponse>('http://localhost:3000/api/v1/user/' + props.friendId)
+}
+
+</script>
+
+<template>
+    <div class="modal-overlay">
+        <div class="modal">
+            <NuxtImg :src="profilePicture" class="rounded-full h-32 w-32 mb-3" />
+            <p v-if="props.friendsStatus === FriendshipStatus.PENDING">Do you want to accept {{ name }}'s friend request?'</p>
+            <p v-else>Streak: {{  }}</p>
+            <div v-if="props.friendsStatus === FriendshipStatus.PENDING" class="flex mt-5 gap-10">
+                <div :class="icon_wrapper" @click="handleFriendship(FriendshipAction.DECLINE)">
+                    <Icon name="mdi:close" class="text-5xl text-red-600" />
+                </div>
+                <div :class="icon_wrapper" @click="handleFriendship(FriendshipAction.ACCEPT)">
+                    <Icon name="mdi:check" class="text-5xl text-red-600" />
+                </div>
+            </div>
+            <button class="bg-indigo-600 hover:bg-indigo-800" @click="$emit('close-modal')">Close</button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    background-color: #000000da;
+}
+
+.modal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-color: white;
+    height: 500px;
+    width: 500px;
+    margin-top: 10%;
+    padding: 60px 0;
+    border-radius: 20px;
+}
+
+.icon-wrapper {
+    aspect-ratio: 1;
+    border-radius: 50%;
+}
+
+button {
+    width: 150px;
+    height: 40px;
+    color: white;
+    font-size: 14px;
+    border-radius: 16px;
+    margin-top: 50px;
+}
+</style>
diff --git a/types/components/users.view.ts b/types/components/users.view.ts
index 9bc96a7..1a134ae 100644
--- a/types/components/users.view.ts
+++ b/types/components/users.view.ts
@@ -2,5 +2,6 @@ export enum UserViewType {
     FRIENDS = 0,
     OPPONENTTURN = 1,
     USERTURN = 2, 
-    REQUESTS = 3
+    REQUESTS = 3,
+    SENTREQUESTS = 4
 }
\ No newline at end of file

From e6d9c4368bd45fe050fe192862d3768faa53c1cc Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 11 Dec 2024 12:51:46 +0100
Subject: [PATCH 10/25] added friend removal functionality

---
 components/UsersView.vue          |  1 +
 components/home/Users/UserBox.vue | 12 ++++++++----
 components/profile/UserModal.vue  | 25 ++++++++++++++++---------
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index 0193f57..e57068f 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -113,6 +113,7 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
           :friendship-id="friendshipId"
           :friends-status="friendshipStatus"
           :friend-id="user.id"
+          :view-type="props.viewType"
       />
       <!-- Placeholder for scrolling -->
       <div v-if="users.length > 3" class="px-1 py-4"/>
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 9d0430b..ed78456 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -24,13 +24,17 @@ const props = defineProps({
     default: 0
   },
   friendsStatus: {
-    type: FriendshipStatus,
+    type: String,
     default: FriendshipStatus.PENDING
   },
   friendId: {
-    type: Number,
+    type: String,
     required: true
-  }
+  },
+  viewType: {
+    type: Number,
+    required: true,
+  },
 });
 
 const showModal = ref(false);
@@ -60,5 +64,5 @@ const showModal = ref(false);
       <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>
-  <ProfileUserModal v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId" :friends-status="props.friendsStatus" :friend-id="props.friendId" @close-modal="showModal = false"/>
+  <ProfileUserModal v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId" :friends-status="props.friendsStatus" :friend-id="props.friendId" :view-type="props.viewType" @close-modal="showModal = false"/>
 </template>
\ No newline at end of file
diff --git a/components/profile/UserModal.vue b/components/profile/UserModal.vue
index a2e8a46..e0de945 100644
--- a/components/profile/UserModal.vue
+++ b/components/profile/UserModal.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { FriendshipAction, FriendshipStatus } from '@/types/api/user.friends';
 import type { GetUserResponse } from '@/types/api/users';
+import { UserViewType } from '@/types/components/users.view';
+
 
 const props = defineProps({
     profilePicture: {
@@ -16,20 +18,24 @@ const props = defineProps({
         required: true
     },
     friendsStatus: {
-        type: FriendshipStatus,
+        type: String,
         default: FriendshipStatus.ACCEPTED
     },
     friendId: {
         type: Number,
         required: true
-    }
+    },
+    viewType: {
+    type: Number,
+    required: true
+  },
 });
 
 const friend = ref()
 
 onMounted(async () => {
     friend.value = await getFriendInformation()
-    console.log(friend.value.daily_streak);
+    console.log(props.viewType);
 })
 
 const emit = defineEmits(['close-modal']);
@@ -75,17 +81,20 @@ async function getFriendInformation() {
     <div class="modal-overlay">
         <div class="modal">
             <NuxtImg :src="profilePicture" class="rounded-full h-32 w-32 mb-3" />
-            <p v-if="props.friendsStatus === FriendshipStatus.PENDING">Do you want to accept {{ name }}'s friend request?'</p>
+            <p v-if="props.viewType === UserViewType.SENTREQUESTS">Do you want to accept {{ name }}'s friend request?'</p>
             <p v-else>Streak: {{  }}</p>
-            <div v-if="props.friendsStatus === FriendshipStatus.PENDING" class="flex mt-5 gap-10">
+            <div v-if="props.viewType === UserViewType.SENTREQUESTS" class="flex mt-5 gap-10">
                 <div :class="icon_wrapper" @click="handleFriendship(FriendshipAction.DECLINE)">
-                    <Icon name="mdi:close" class="text-5xl text-red-600" />
+                    <Icon name="mdi:close" class="text-5xl text-red-600"  />
                 </div>
                 <div :class="icon_wrapper" @click="handleFriendship(FriendshipAction.ACCEPT)">
                     <Icon name="mdi:check" class="text-5xl text-red-600" />
                 </div>
             </div>
-            <button class="bg-indigo-600 hover:bg-indigo-800" @click="$emit('close-modal')">Close</button>
+            <div v-else-if="props.viewType === UserViewType.FRIENDS" class="flex mt-5 gap-10">
+                <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-2" @click="handleFriendship(FriendshipAction.REMOVE)">Remove Friend</button>
+            </div>
+            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="$emit('close-modal')">Close</button>
         </div>
     </div>
 </template>
@@ -124,9 +133,7 @@ async function getFriendInformation() {
 button {
     width: 150px;
     height: 40px;
-    color: white;
     font-size: 14px;
     border-radius: 16px;
-    margin-top: 50px;
 }
 </style>

From 45fce371d017fc0f567b5eade1bb6bf797ca756d Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 11 Dec 2024 13:01:42 +0100
Subject: [PATCH 11/25] fixed condition for opening modal

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

diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index ed78456..a7ef88e 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { FriendshipStatus } from '@/types/api/user.friends';
+import { UserViewType } from '@/types/components/users.view';
 
 const props = defineProps({
   profilePicture: {
@@ -64,5 +65,5 @@ const showModal = ref(false);
       <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>
-  <ProfileUserModal v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId" :friends-status="props.friendsStatus" :friend-id="props.friendId" :view-type="props.viewType" @close-modal="showModal = false"/>
+  <ProfileUserModal v-if="viewType === UserViewType.FRIENDS || viewType === UserViewType.REQUESTS" v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId" :friends-status="props.friendsStatus" :friend-id="props.friendId" :view-type="props.viewType" @close-modal="showModal = false"/>
 </template>
\ No newline at end of file
diff --git a/components/profile/UserModal.vue b/components/profile/UserModal.vue
index e0de945..9e9bf79 100644
--- a/components/profile/UserModal.vue
+++ b/components/profile/UserModal.vue
@@ -22,7 +22,7 @@ const props = defineProps({
         default: FriendshipStatus.ACCEPTED
     },
     friendId: {
-        type: Number,
+        type: String,
         required: true
     },
     viewType: {
@@ -81,9 +81,9 @@ async function getFriendInformation() {
     <div class="modal-overlay">
         <div class="modal">
             <NuxtImg :src="profilePicture" class="rounded-full h-32 w-32 mb-3" />
-            <p v-if="props.viewType === UserViewType.SENTREQUESTS">Do you want to accept {{ name }}'s friend request?'</p>
+            <p v-if="props.viewType === UserViewType.REQUESTS">Do you want to accept {{ name }}'s friend request?'</p>
             <p v-else>Streak: {{  }}</p>
-            <div v-if="props.viewType === UserViewType.SENTREQUESTS" class="flex mt-5 gap-10">
+            <div v-if="props.viewType === UserViewType.REQUESTS" class="flex mt-5 gap-10">
                 <div :class="icon_wrapper" @click="handleFriendship(FriendshipAction.DECLINE)">
                     <Icon name="mdi:close" class="text-5xl text-red-600"  />
                 </div>

From dc3d0b07dfcff7ec139a9825444a117c2dfcf34c Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 11 Dec 2024 21:45:06 +0100
Subject: [PATCH 12/25] fixed size of content

---
 layouts/HeaderFooterView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/HeaderFooterView.vue b/layouts/HeaderFooterView.vue
index e064306..eb20070 100644
--- a/layouts/HeaderFooterView.vue
+++ b/layouts/HeaderFooterView.vue
@@ -15,7 +15,7 @@
       </div>
 
       <!-- Content -->
-      <div class="h-5/6 border rounded-3xl">
+      <div class="h-full border rounded-3xl">
         <slot name="content" />
       </div>
 

From 6f57df342e5c6fd3f825441c664338e3e46bcf28 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 11 Dec 2024 22:21:34 +0100
Subject: [PATCH 13/25] added automatic refresh on action

---
 components/UsersView.vue          | 4 +++-
 components/home/Users/UserBox.vue | 5 ++++-
 components/profile/Friendlist.vue | 6 +++---
 components/profile/UserModal.vue  | 9 +++++----
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index e57068f..ddc13e6 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -15,6 +15,8 @@ const props = defineProps({
   }
 });
 
+const emit = defineEmits(['refresh']);
+
 const friendshipId = ref(0);
 const friendshipStatus = ref(FriendshipStatus.ACCEPTED);
 
@@ -37,7 +39,6 @@ const userBoxContainerClasses = computed(() =>
 function isGetFriendsResponse(user: GetFriendsResponse | GetUserResponse): user is GetFriendsResponse {
   friendshipId.value = user.friendship_id;
   friendshipStatus.value = user.status;
-  console.log("userView:" + friendshipId.value)
   return 'friend_id' in user;
 }
 
@@ -114,6 +115,7 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
           :friends-status="friendshipStatus"
           :friend-id="user.id"
           :view-type="props.viewType"
+          @refresh="emit('refresh');"
       />
       <!-- Placeholder for scrolling -->
       <div v-if="users.length > 3" class="px-1 py-4"/>
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index a7ef88e..3598457 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -38,7 +38,10 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['refresh']);
+
 const showModal = ref(false);
+
 </script>
 
 <template>
@@ -65,5 +68,5 @@ const showModal = ref(false);
       <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>
-  <ProfileUserModal v-if="viewType === UserViewType.FRIENDS || viewType === UserViewType.REQUESTS" v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId" :friends-status="props.friendsStatus" :friend-id="props.friendId" :view-type="props.viewType" @close-modal="showModal = false"/>
+  <ProfileUserModal v-if="viewType === UserViewType.FRIENDS || viewType === UserViewType.REQUESTS" v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId" :friends-status="props.friendsStatus" :friend-id="props.friendId" :view-type="props.viewType" @close-modal="showModal = false" @refresh="emit('refresh')"/>
 </template>
\ No newline at end of file
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index dcd4287..da5daa2 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -53,9 +53,9 @@ const addFriend = async () => {
 </script>
 
 <template>
-  <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends" />
-  <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests"/>
-  <UsersView v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests" />
+  <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends" @refresh="getFriendships"/>
+  <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests" @refresh="getFriendships"/>
+  <UsersView v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests" @refresh="getFriendships"/>
 
   <div class="mt-3">
     <input v-model="newFriend" class="rounded-3xl pl-2">
diff --git a/components/profile/UserModal.vue b/components/profile/UserModal.vue
index 9e9bf79..386b405 100644
--- a/components/profile/UserModal.vue
+++ b/components/profile/UserModal.vue
@@ -31,15 +31,14 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['close-modal', 'refresh']);
+
 const friend = ref()
 
 onMounted(async () => {
     friend.value = await getFriendInformation()
-    console.log(props.viewType);
 })
 
-const emit = defineEmits(['close-modal']);
-
 const icon_wrapper = 'bg-yellow-500 flex items-center rounded-full justify-center p-1 hover:cursor-pointer hover:bg-yellow-600'
 
 async function handleFriendship(action: FriendshipAction) {
@@ -63,6 +62,8 @@ async function handleFriendship(action: FriendshipAction) {
             console.error('Error message:', err.message);
         }
     }
+    console.log('emit: user-modal')
+    emit('refresh')
     if (action === FriendshipAction.ACCEPT) {
         console.log()
     }
@@ -82,7 +83,7 @@ async function getFriendInformation() {
         <div class="modal">
             <NuxtImg :src="profilePicture" class="rounded-full h-32 w-32 mb-3" />
             <p v-if="props.viewType === UserViewType.REQUESTS">Do you want to accept {{ name }}'s friend request?'</p>
-            <p v-else>Streak: {{  }}</p>
+            <p v-else>{{ name }}</p>
             <div v-if="props.viewType === UserViewType.REQUESTS" class="flex mt-5 gap-10">
                 <div :class="icon_wrapper" @click="handleFriendship(FriendshipAction.DECLINE)">
                     <Icon name="mdi:close" class="text-5xl text-red-600"  />

From aba96c8b58958208ff8a1b576ffc0223a2342dd0 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 11 Dec 2024 22:35:23 +0100
Subject: [PATCH 14/25] added cancel of sent request

---
 components/home/Users/UserBox.vue | 2 +-
 components/profile/Friendlist.vue | 1 +
 components/profile/UserModal.vue  | 9 +++------
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 3598457..9add244 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -68,5 +68,5 @@ const showModal = ref(false);
       <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>
-  <ProfileUserModal v-if="viewType === UserViewType.FRIENDS || viewType === UserViewType.REQUESTS" v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId" :friends-status="props.friendsStatus" :friend-id="props.friendId" :view-type="props.viewType" @close-modal="showModal = false" @refresh="emit('refresh')"/>
+  <ProfileUserModal v-if="viewType === UserViewType.FRIENDS || viewType === UserViewType.REQUESTS || viewType === UserViewType.SENTREQUESTS" v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId" :friends-status="props.friendsStatus" :friend-id="props.friendId" :view-type="props.viewType" @close-modal="showModal = false" @refresh="emit('refresh')"/>
 </template>
\ No newline at end of file
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index da5daa2..7835034 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -38,6 +38,7 @@ const addFriend = async () => {
     });
     console.log('Friend request sent successfully:', data);
     newFriendError.value = '';
+    newFriend.value = ''
     await getFriendships();
   } catch (err) {
     if (err.response) {
diff --git a/components/profile/UserModal.vue b/components/profile/UserModal.vue
index 386b405..cb96b0b 100644
--- a/components/profile/UserModal.vue
+++ b/components/profile/UserModal.vue
@@ -64,12 +64,6 @@ async function handleFriendship(action: FriendshipAction) {
     }
     console.log('emit: user-modal')
     emit('refresh')
-    if (action === FriendshipAction.ACCEPT) {
-        console.log()
-    }
-    else {
-        console.log("Decline")
-    }
 };
 
 async function getFriendInformation() {
@@ -95,6 +89,9 @@ async function getFriendInformation() {
             <div v-else-if="props.viewType === UserViewType.FRIENDS" class="flex mt-5 gap-10">
                 <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-2" @click="handleFriendship(FriendshipAction.REMOVE)">Remove Friend</button>
             </div>
+            <div v-else-if="props.viewType === UserViewType.SENTREQUESTS" class="flex mt-5 gap-10">
+                <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-2" @click="handleFriendship(FriendshipAction.DECLINE)">Cancel Request</button>
+            </div>
             <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="$emit('close-modal')">Close</button>
         </div>
     </div>

From 9050e6f26b6bd6bff74d773db31c28df2041ac08 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 11 Dec 2024 22:38:59 +0100
Subject: [PATCH 15/25] fixed vue warning

---
 components/home/Users/UserBox.vue | 46 +++++++++++++++++--------------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 9add244..8905ef2 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -45,28 +45,32 @@ const showModal = ref(false);
 </script>
 
 <template>
-  <div 
-  :class="[
-    'bg-blue-600 rounded-3xl px-3 w-full hover:bg-sky-700',
-    props.userTurn
-      ? 'flex items-center'
-      : 'flex flex-col items-center justify-center mb-3 py-2'
-  ]" @click="showModal = true">
-    <!-- Profile Picture -->
-    <NuxtImg 
-    :class="[
-      'rounded-full',
-      '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="props.name" />
+  <div>
+    <div :class="[
+      'bg-blue-600 rounded-3xl px-3 w-full hover:bg-sky-700',
+      props.userTurn
+        ? 'flex items-center'
+        : 'flex flex-col items-center justify-center mb-3 py-2'
+    ]" @click="showModal = true">
+      <!-- Profile Picture -->
+      <NuxtImg :class="[
+        'rounded-full',
+        '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="props.name" />
 
-    <!-- User Name -->
-    <p class="text-white text-sm sm:text-base md:text-lg" v-text="props.name" />
+      <!-- User Name -->
+      <p class="text-white text-sm sm:text-base md:text-lg" v-text="props.name" />
 
-    <!-- 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)">
-      <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>
+      <!-- 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)">
+        <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>
+    <ProfileUserModal
+      v-if="viewType === UserViewType.FRIENDS || viewType === UserViewType.REQUESTS || viewType === UserViewType.SENTREQUESTS"
+      v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId"
+      :friends-status="props.friendsStatus" :friend-id="props.friendId" :view-type="props.viewType"
+      @close-modal="showModal = false" @refresh="emit('refresh')" />
   </div>
-  <ProfileUserModal v-if="viewType === UserViewType.FRIENDS || viewType === UserViewType.REQUESTS || viewType === UserViewType.SENTREQUESTS" v-show="showModal" :profile-picture="props.profilePicture" :name="props.name" :friendship-id="props.friendshipId" :friends-status="props.friendsStatus" :friend-id="props.friendId" :view-type="props.viewType" @close-modal="showModal = false" @refresh="emit('refresh')"/>
 </template>
\ No newline at end of file

From 93cec65b84806aa49959882560475bcc76b61fd2 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 11 Dec 2024 22:57:03 +0100
Subject: [PATCH 16/25] fixed ESLint warnings

---
 components/home/Users/UserBox.vue | 6 ++++--
 pages/index.vue                   | 2 --
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 8905ef2..23bc568 100644
--- a/components/home/Users/UserBox.vue
+++ b/components/home/Users/UserBox.vue
@@ -46,12 +46,14 @@ const showModal = ref(false);
 
 <template>
   <div>
-    <div :class="[
+    <div 
+      :class="[
       'bg-blue-600 rounded-3xl px-3 w-full hover:bg-sky-700',
       props.userTurn
         ? 'flex items-center'
         : 'flex flex-col items-center justify-center mb-3 py-2'
-    ]" @click="showModal = true">
+      ]" 
+      @click="showModal = true">
       <!-- Profile Picture -->
       <NuxtImg :class="[
         'rounded-full',
diff --git a/pages/index.vue b/pages/index.vue
index 149ff46..4895739 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -18,8 +18,6 @@ function setLevelbar(newValue: number) {
     levelbar.style.width = newValue + "%"
   }
 }
-
-
 </script>
 
 <template>

From e6ff093c8168e8e7ce8184c5cd411958b452793e Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 12 Dec 2024 12:36:37 +0100
Subject: [PATCH 17/25] added modal for sending friend requests

---
 components/profile/FriendRequestModal.vue | 88 +++++++++++++++++++++++
 1 file changed, 88 insertions(+)
 create mode 100644 components/profile/FriendRequestModal.vue

diff --git a/components/profile/FriendRequestModal.vue b/components/profile/FriendRequestModal.vue
new file mode 100644
index 0000000..0874a3a
--- /dev/null
+++ b/components/profile/FriendRequestModal.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { FriendshipAction, FriendshipStatus } from '@/types/api/user.friends';
+import type { GetUserResponse } from '@/types/api/users';
+import { UserViewType } from '@/types/components/users.view';
+
+
+const props = defineProps({
+    name: {
+        type: String,
+        default: 'User'
+    },
+});
+
+const emit = defineEmits(['close-modal', 'refresh']);
+
+const newFriend = ref('')
+const newFriendError = ref('')
+
+const addFriend = async () => {
+  try {
+    await $fetch('/api/v1/user/friends', {
+      method: 'POST',
+      body: JSON.stringify({ receiver_name: newFriend.value }),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+    emit('refresh');
+    emit('close-modal');
+    newFriendError.value = '';
+    newFriend.value = ''
+  } catch {
+    newFriendError.value = "Please check your input."
+  }
+};
+
+</script>
+
+<template>
+    <div class="modal-overlay">
+        <div class="modal">
+            <!--NuxtImg :src="profilePicture" class="rounded-full h-32 w-32 mb-3" /-->
+            <input v-model="newFriend" class="rounded-3xl pl-2 border border-black">
+            <p v-if="newFriendError" class="error-message">{{ newFriendError }}</p>
+            <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-2" @click="addFriend">Add Friend</button>
+            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="$emit('close-modal')">Close</button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    background-color: #000000da;
+}
+
+.modal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-color: white;
+    height: 500px;
+    width: 500px;
+    margin-top: 10%;
+    padding: 60px 0;
+    border-radius: 20px;
+}
+
+.icon-wrapper {
+    aspect-ratio: 1;
+    border-radius: 50%;
+}
+
+button {
+    width: 150px;
+    height: 40px;
+    font-size: 14px;
+    border-radius: 16px;
+}
+</style>

From d75798ce36023e6a2f15d94d5d88e999f75d3c39 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 12 Dec 2024 13:10:42 +0100
Subject: [PATCH 18/25] fixed text moving with the user boxes

---
 components/UsersView.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/UsersView.vue b/components/UsersView.vue
index ddc13e6..ddf3051 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -25,14 +25,14 @@ const default_avatar = ref('https://t4.ftcdn.net/jpg/05/49/98/39/360_F_549983970
 // 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.USERTURN) return `${baseClasses} h-full overflow-y-hidden overflow-x-hidden flex-grow-0`;
   else return `${baseClasses} overflow-y-hidden`;
 });
 
 const userBoxContainerClasses = computed(() =>
     props.viewType === UserViewType.USERTURN
         ? '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'
+        : 'flex gap-1 md:gap-3 md:mt-9 overflow-x-auto'
 );
 
 
@@ -73,16 +73,16 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
       <p v-if="viewType === UserViewType.USERTURN">
         Your Turn
       </p>
-      <p v-else-if="viewType === UserViewType.OPPONENTTURN" class="fixed">
+      <p v-else-if="viewType === UserViewType.OPPONENTTURN">
         Opponent's Turn
       </p>
-      <p v-else-if="viewType === UserViewType.FRIENDS" class="fixed">
+      <p v-else-if="viewType === UserViewType.FRIENDS">
         Friends
       </p>
-      <p v-else-if="viewType === UserViewType.REQUESTS" class="fixed">
+      <p v-else-if="viewType === UserViewType.REQUESTS">
         Friend Requests
       </p>
-      <p v-else-if="viewType === UserViewType.SENTREQUESTS" class="fixed">
+      <p v-else-if="viewType === UserViewType.SENTREQUESTS">
         Sent Friend Requests
       </p>
     </div>

From 833e4238e0c0e15945922ca9a5cb4809436a9402 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Thu, 12 Dec 2024 13:10:57 +0100
Subject: [PATCH 19/25] removed unnessacary code

---
 components/profile/FriendRequestModal.vue | 17 ++-----
 components/profile/Friendlist.vue         | 56 ++++++++---------------
 components/profile/ProfileOverview.vue    |  2 +-
 3 files changed, 23 insertions(+), 52 deletions(-)

diff --git a/components/profile/FriendRequestModal.vue b/components/profile/FriendRequestModal.vue
index 0874a3a..ec79a2a 100644
--- a/components/profile/FriendRequestModal.vue
+++ b/components/profile/FriendRequestModal.vue
@@ -1,15 +1,4 @@
 <script setup lang="ts">
-import { FriendshipAction, FriendshipStatus } from '@/types/api/user.friends';
-import type { GetUserResponse } from '@/types/api/users';
-import { UserViewType } from '@/types/components/users.view';
-
-
-const props = defineProps({
-    name: {
-        type: String,
-        default: 'User'
-    },
-});
 
 const emit = defineEmits(['close-modal', 'refresh']);
 
@@ -39,10 +28,11 @@ const addFriend = async () => {
 <template>
     <div class="modal-overlay">
         <div class="modal">
-            <!--NuxtImg :src="profilePicture" class="rounded-full h-32 w-32 mb-3" /-->
+            <p class="text-3xl font-bold">New friend</p>
+            <p class="mb-3">Enter your friends name:</p>
             <input v-model="newFriend" class="rounded-3xl pl-2 border border-black">
             <p v-if="newFriendError" class="error-message">{{ newFriendError }}</p>
-            <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-2" @click="addFriend">Add Friend</button>
+            <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-4" @click="addFriend">Add Friend</button>
             <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="$emit('close-modal')">Close</button>
         </div>
     </div>
@@ -70,7 +60,6 @@ const addFriend = async () => {
     height: 500px;
     width: 500px;
     margin-top: 10%;
-    padding: 60px 0;
     border-radius: 20px;
 }
 
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 7835034..3273810 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -8,13 +8,12 @@ const sentRequests: Ref<GetFriendsResponse[]> = useState("outgoing_friendships",
 
 const session = useSupabaseSession()
 
-const newFriend = ref('')
-const newFriendError = ref('')
+const showModal = ref(false);
 
 onMounted(async () => {
   if (session.value) {
     await getFriendships()
-    //friends.value.push(friends.value[0]) unexpected behavior on initial page load
+    //  friends.value.push() // unexpected behavior on initial page load
   }
 })
 
@@ -26,46 +25,29 @@ async function getFriendships() {
       sentRequests.value = data.filter((item) => item.request_type == FriendshipType.OUTGOING && item.status === FriendshipStatus.PENDING)
     });
 }
-
-const addFriend = async () => {
-  try {
-    const data = await $fetch('/api/v1/user/friends', {
-      method: 'POST',
-      body: JSON.stringify({ receiver_name: newFriend.value }),
-      headers: {
-        'Content-Type': 'application/json'
-      }
-    });
-    console.log('Friend request sent successfully:', data);
-    newFriendError.value = '';
-    newFriend.value = ''
-    await getFriendships();
-  } catch (err) {
-    if (err.response) {
-      newFriendError.value = "Please check your input."
-      console.error('Error response:', err.response);
-      console.error('Error data:', err.response.data);
-    } else {
-      // Something else happened while setting up the request
-      console.error('Error message:', err.message);
-    }
-  }
-};
 </script>
 
 <template>
-  <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends" @refresh="getFriendships"/>
-  <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests" @refresh="getFriendships"/>
-  <UsersView v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests" @refresh="getFriendships"/>
-
-  <div class="mt-3">
-    <input v-model="newFriend" class="rounded-3xl pl-2">
-    <button class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="addFriend">Add Friend</button>
-
-    <p v-if="newFriendError" class="error-message">{{ newFriendError }}</p>
+  <div class="flex flex-col">
+    <!-- Buttons Section -->
+    <div class="flex justify-center mb-3">
+      <button class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="showModal = true">Add new Friends</button>
+      <ProfileFriendRequestModal v-show="showModal" @close-modal="showModal = false" @refresh="getFriendships" />
+    </div>
+
+    <!-- Responsive Size Content Section -->
+    <div class="overflow-y-auto" style="max-height: 43vh;">
+      <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends"
+        @refresh="getFriendships" />
+      <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests"
+        @refresh="getFriendships" />
+      <UsersView v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests"
+        @refresh="getFriendships" />
+    </div>
   </div>
 </template>
 
+
 <style scoped>
 .error-message {
   color: red;
diff --git a/components/profile/ProfileOverview.vue b/components/profile/ProfileOverview.vue
index f8e09f9..4d881aa 100644
--- a/components/profile/ProfileOverview.vue
+++ b/components/profile/ProfileOverview.vue
@@ -7,7 +7,7 @@ import Friendlist from './Friendlist.vue';
 <template>
     <div>
         <div class="p-3">
-            <ProfileInformation class="py-8"/>
+            <ProfileInformation class="py-5"/>
             <Friendlist/>
         </div>
     </div>

From 6ab6fc628dea989699e471529ec16a780f15b3e3 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Fri, 13 Dec 2024 16:14:24 +0100
Subject: [PATCH 20/25] fixed userbox margin

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

diff --git a/components/UsersView.vue b/components/UsersView.vue
index ddf3051..07c5343 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -32,7 +32,7 @@ const containerClasses = computed(() => {
 const userBoxContainerClasses = computed(() =>
     props.viewType === UserViewType.USERTURN
         ? 'flex flex-col space-y-1 md:space-y-3 h-full overflow-y-auto'
-        : 'flex gap-1 md:gap-3 md:mt-9 overflow-x-auto'
+        : 'flex gap-1 md:gap-3 overflow-x-auto'
 );
 
 

From 8ff3496f5a74d06de2806778848ab8b1c66fba82 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Fri, 13 Dec 2024 16:25:20 +0100
Subject: [PATCH 21/25] changed styling of modal

---
 components/profile/FriendRequestModal.vue | 2 +-
 components/profile/Friendlist.vue         | 2 +-
 components/profile/UserModal.vue          | 9 ++++-----
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/components/profile/FriendRequestModal.vue b/components/profile/FriendRequestModal.vue
index ec79a2a..1e6a8c0 100644
--- a/components/profile/FriendRequestModal.vue
+++ b/components/profile/FriendRequestModal.vue
@@ -58,7 +58,7 @@ const addFriend = async () => {
     text-align: center;
     background-color: white;
     height: 500px;
-    width: 500px;
+    width: 40vb;
     margin-top: 10%;
     border-radius: 20px;
 }
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 3273810..5c13584 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -31,7 +31,7 @@ async function getFriendships() {
   <div class="flex flex-col">
     <!-- Buttons Section -->
     <div class="flex justify-center mb-3">
-      <button class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="showModal = true">Add new Friends</button>
+      <button class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="showModal = true">Add new friend</button>
       <ProfileFriendRequestModal v-show="showModal" @close-modal="showModal = false" @refresh="getFriendships" />
     </div>
 
diff --git a/components/profile/UserModal.vue b/components/profile/UserModal.vue
index cb96b0b..ef919cf 100644
--- a/components/profile/UserModal.vue
+++ b/components/profile/UserModal.vue
@@ -86,13 +86,13 @@ async function getFriendInformation() {
                     <Icon name="mdi:check" class="text-5xl text-red-600" />
                 </div>
             </div>
-            <div v-else-if="props.viewType === UserViewType.FRIENDS" class="flex mt-5 gap-10">
+            <div v-else-if="props.viewType === UserViewType.FRIENDS" class="flex mt-16 gap-10">
                 <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-2" @click="handleFriendship(FriendshipAction.REMOVE)">Remove Friend</button>
             </div>
-            <div v-else-if="props.viewType === UserViewType.SENTREQUESTS" class="flex mt-5 gap-10">
+            <div v-else-if="props.viewType === UserViewType.SENTREQUESTS" class="flex mt-16 gap-10">
                 <button class="bg-yellow-500 hover:bg-yellow-600 text-red-600 my-2" @click="handleFriendship(FriendshipAction.DECLINE)">Cancel Request</button>
             </div>
-            <button class="bg-indigo-600 hover:bg-indigo-800 my-5 text-white" @click="$emit('close-modal')">Close</button>
+            <button class="bg-indigo-600 hover:bg-indigo-800 my-3 text-white" @click="$emit('close-modal')">Close</button>
         </div>
     </div>
 </template>
@@ -117,9 +117,8 @@ async function getFriendInformation() {
     text-align: center;
     background-color: white;
     height: 500px;
-    width: 500px;
+    width: 40vb;
     margin-top: 10%;
-    padding: 60px 0;
     border-radius: 20px;
 }
 

From e24bae8bf522127b80b78290c9c1b9f61fcaec5c Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 13 Dec 2024 18:14:48 +0100
Subject: [PATCH 22/25] add small Add additional add friend button

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

diff --git a/components/UsersView.vue b/components/UsersView.vue
index 07c5343..db677e0 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {type GetFriendsResponse, FriendshipStatus} from "@/types/api/user.friends";
+import {FriendshipStatus, type GetFriendsResponse} from "@/types/api/user.friends";
 import {UserViewType} from "@/types/components/users.view";
 import type {GetUserResponse} from "@/types/api/users";
 
@@ -12,6 +12,14 @@ const props = defineProps({
   users: {
     type: Array as PropType<GetFriendsResponse[] | GetUserResponse[]>,
     required: true,
+  },
+  onAction: {
+    type: Function as PropType<() => void>,
+    required: false
+  },
+  actionLabel: {
+    type: String,
+    required: false
   }
 });
 
@@ -48,7 +56,7 @@ function isUserInformation(user: GetFriendsResponse | GetUserResponse): user is
 
 // Map users conditionally depending on their type
 const mappedUsers: Array<GetUserResponse> = computed(() => {
-  if(!props.users || props.users.length < 1) return [];
+  if (!props.users || props.users.length < 1) return [];
 
   return props.users.map(user => {
     if (isGetFriendsResponse(user)) {
@@ -69,7 +77,7 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
                 ]"
   >
     <!-- Fixed Conditional Header -->
-    <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2">
+    <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2 flex justify-between">
       <p v-if="viewType === UserViewType.USERTURN">
         Your Turn
       </p>
@@ -85,6 +93,10 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
       <p v-else-if="viewType === UserViewType.SENTREQUESTS">
         Sent Friend Requests
       </p>
+      <button v-if="props.onAction && props.actionLabel" class="flex items-center text-gray-700" @click="props.onAction()">
+        <Icon name="mdi:plus"/>
+        {{ props.actionLabel }}
+      </button>
     </div>
 
     <!-- Scrollable User Boxes -->
diff --git a/components/profile/FriendRequestModal.vue b/components/profile/FriendRequestModal.vue
index 1e6a8c0..f2068a2 100644
--- a/components/profile/FriendRequestModal.vue
+++ b/components/profile/FriendRequestModal.vue
@@ -26,7 +26,7 @@ const addFriend = async () => {
 </script>
 
 <template>
-    <div class="modal-overlay">
+    <div class="modal-overlay z-50">
         <div class="modal">
             <p class="text-3xl font-bold">New friend</p>
             <p class="mb-3">Enter your friends name:</p>
diff --git a/components/profile/Friendlist.vue b/components/profile/Friendlist.vue
index 5c13584..4776391 100644
--- a/components/profile/Friendlist.vue
+++ b/components/profile/Friendlist.vue
@@ -31,14 +31,14 @@ async function getFriendships() {
   <div class="flex flex-col">
     <!-- Buttons Section -->
     <div class="flex justify-center mb-3">
-      <button class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="showModal = true">Add new friend</button>
+      <button v-if="friends.length < 1" class="p-2 bg-blue-500 text-white rounded-3xl ml-2" @click="showModal = true">Add new friend</button>
       <ProfileFriendRequestModal v-show="showModal" @close-modal="showModal = false" @refresh="getFriendships" />
     </div>
 
     <!-- Responsive Size Content Section -->
     <div class="overflow-y-auto" style="max-height: 43vh;">
       <UsersView v-if="friends.length > 0" :view-type="UserViewType.FRIENDS" :users="friends"
-        @refresh="getFriendships" />
+        action-label="Add Friend" :on-action="() => {showModal = true}" @refresh="getFriendships" />
       <UsersView v-if="requests.length > 0" :view-type="UserViewType.REQUESTS" :users="requests"
         @refresh="getFriendships" />
       <UsersView v-if="sentRequests.length > 0" :view-type="UserViewType.SENTREQUESTS" :users="sentRequests"

From ac75051e15583b2867c9df763828c4a3652e8592 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Sun, 15 Dec 2024 19:08:50 +0100
Subject: [PATCH 23/25] fixed non-plural naming in UsersView

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

diff --git a/components/UsersView.vue b/components/UsersView.vue
index db677e0..ca6ca07 100644
--- a/components/UsersView.vue
+++ b/components/UsersView.vue
@@ -79,10 +79,10 @@ const mappedUsers: Array<GetUserResponse> = computed(() => {
     <!-- Fixed Conditional Header -->
     <div class="mb-1 text-xs md:text-base bg-gray-200 mt-2 flex justify-between">
       <p v-if="viewType === UserViewType.USERTURN">
-        Your Turn
+        Your Turn(s)
       </p>
       <p v-else-if="viewType === UserViewType.OPPONENTTURN">
-        Opponent's Turn
+        Opponent's Turn(s)
       </p>
       <p v-else-if="viewType === UserViewType.FRIENDS">
         Friends

From cdc6b35107486926ade9bea41c6b42573ea22de7 Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Sun, 15 Dec 2024 19:11:49 +0100
Subject: [PATCH 24/25] fix(layout): removed white borders of content

---
 layouts/FooterView.vue       | 2 +-
 layouts/HeaderFooterView.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/layouts/FooterView.vue b/layouts/FooterView.vue
index 77c5841..5e959b0 100644
--- a/layouts/FooterView.vue
+++ b/layouts/FooterView.vue
@@ -7,7 +7,7 @@
     <!-- Wrapper div für die Breiten-Kontrolle -->
     <div class="w-full xl:w-1/2 2xl:w-1/4 flex flex-col h-full">
       <!-- Content -->
-      <div class="flex-1 border rounded-3xl p-3">
+      <div class="flex-1 p-3">
           <slot name="content"/>
       </div>
 
diff --git a/layouts/HeaderFooterView.vue b/layouts/HeaderFooterView.vue
index eb20070..f87986a 100644
--- a/layouts/HeaderFooterView.vue
+++ b/layouts/HeaderFooterView.vue
@@ -15,7 +15,7 @@
       </div>
 
       <!-- Content -->
-      <div class="h-full border rounded-3xl">
+      <div class="h-full">
         <slot name="content" />
       </div>
 

From 390ebce42fd08483780c41047262f595f83e4d83 Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Sun, 15 Dec 2024 19:32:16 +0100
Subject: [PATCH 25/25] fixed z-index for usermodal

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

diff --git a/components/profile/UserModal.vue b/components/profile/UserModal.vue
index ef919cf..f314364 100644
--- a/components/profile/UserModal.vue
+++ b/components/profile/UserModal.vue
@@ -73,7 +73,7 @@ async function getFriendInformation() {
 </script>
 
 <template>
-    <div class="modal-overlay">
+    <div class="modal-overlay z-50">
         <div class="modal">
             <NuxtImg :src="profilePicture" class="rounded-full h-32 w-32 mb-3" />
             <p v-if="props.viewType === UserViewType.REQUESTS">Do you want to accept {{ name }}'s friend request?'</p>