added decline action for friend requests and room invites

src/api/client.ts

@@ -25,10 +25,22 @@ export async function apiFetch<T>(
     throw new Error("Session expired")
   }
 
+  // Handle error responses
   if (!res.ok) {
     const text = await res.text()
     throw new Error(text || res.statusText)
   }
 
-  return res.json() as Promise<T>
+  // Get the response as text first
+  const responseText = await res.text()
+
+  if (!responseText) {
+    return {} as T
+  }
+
+  try {
+    return JSON.parse(responseText) as T
+  } catch (e) {
+    return responseText as unknown as T
+  }
 }

src/api/friends.ts

@@ -22,3 +22,10 @@ export function acceptFriendRequest(senderUuid: string) {
     body: JSON.stringify({ sender_uuid: senderUuid }),
   })
 }
+
+export function declineFriendRequest(senderUuid: string) {
+  return apiFetch<void>('/friends/decline', {
+    method: 'POST',
+    body: JSON.stringify({ sender_uuid: senderUuid }),
+  })
+}

src/api/rooms.ts

@@ -33,3 +33,10 @@ export function acceptRoomInvite(senderUuid: string, roomUuid: string) {
     body: JSON.stringify({ sender_uuid: senderUuid, room_uuid: roomUuid }),
   })
 }
+
+export function declineRoomInvite(senderUuid: string, roomUuid: string) {
+  return apiFetch<void>('/rooms/decline', {
+    method: 'POST',
+    body: JSON.stringify({ sender_uuid: senderUuid, room_uuid: roomUuid }),
+  })
+}

src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/ChatWindow.vue

@@ -9,6 +9,8 @@
   </div>
 
   <div v-else class="chat-container">
+    <!-- <h2 class="room-name">{{ currentRoom?.name }}</h2> -->
+
     <div class="messages-container" ref="messageListRef" @scroll="handleScroll">
       <MessageList :messages="messages" />
     </div>
@@ -218,6 +220,11 @@ onUnmounted(async () => {
   flex: 1;
 }
 
+/* .room-name { */
+/*   margin: 15px 0; */
+/*   text-align: center; */
+/* } */
+
 .loading-more {
   text-align: center;
   padding: 10px;

src/locales/en.ftl

@@ -53,10 +53,13 @@ notifications-room-invites = Room Invites
 notifications-no-requests = No pending requests
 notifications-no-invites = No pending invites
 notifications-accept = Accept
+notifications-decline = Decline
 notifications-join = Join
 notifications-invite-from = from: {$user}
-notifications-error-friend = An error occurred while accepting the request.
+notifications-error-friend-accept = An error occurred while accepting the request.
-notifications-error-room = An error occurred while accepting the invite.
+notifications-error-friend-decline = An error occurred while declining the request.
+notifications-error-room-accept = An error occurred while accepting the invite.
+notifications-error-room-decline = An error occurred while declining the invite.
 
 ## Settings page
 settings-title = Settings

src/locales/fr.ftl

@@ -53,10 +53,13 @@ notifications-room-invites = Invitations
 notifications-no-requests = Aucune demande en attente
 notifications-no-invites = Aucune invitation en attente
 notifications-accept = Accepter
+notifications-decline = Refuser
 notifications-join = Rejoindre
 notifications-invite-from = de : {$user}
-notifications-error-friend = Erreur lors de l'acceptation de la demande.
+notifications-error-friend-accept = Erreur lors de l'acceptation de la demande.
-notifications-error-room = Erreur lors de l'acceptation de l'invitation.
+notifications-error-friend-decline = Erreur lors du refus de la demande.
+notifications-error-room-accept = Erreur lors de l'acceptation de l'invitation.
+notifications-error-room-decline = Erreur lors du refus de l'invitation.
 
 ## Settings page
 settings-title = Paramètres

src/pages/NotificationsPage.vue

@@ -9,7 +9,11 @@
       <ul v-if="requests.length">
         <li v-for="req in requests" :key="req.sender_uuid">
           <span>{{ req.sender_username }}</span>
+          <div class="actions">
             <button @click="acceptFriend(req.sender_uuid)">{{ $t('notifications-accept') }}</button>
+            <button class="decline-btn" @click="declineFriend(req.sender_uuid)">{{ $t('notifications-decline')
+            }}</button>
+          </div>
         </li>
       </ul>
       <p v-else>{{ $t('notifications-no-requests') }}</p>
@@ -22,7 +26,11 @@
         <li v-for="inv in invites" :key="inv.sender_uuid">
           <span>{{ inv.room_name }}</span>
           <span>{{ $t('notifications-invite-from', { user: inv.sender_username }) }}</span>
+          <div class="actions">
             <button @click="acceptRoom(inv.sender_uuid, inv.room_uuid)">{{ $t('notifications-join') }}</button>
+            <button class="decline-btn" @click="declineRoom(inv.sender_uuid, inv.room_uuid)">{{
+              $t('notifications-decline') }}</button>
+          </div>
         </li>
       </ul>
       <p v-else>{{ $t('notifications-no-invites') }}</p>
@@ -32,8 +40,8 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-import { fetchFriendRequests, acceptFriendRequest } from '../api/friends'
+import { fetchFriendRequests, acceptFriendRequest, declineFriendRequest } from '../api/friends'
-import { fetchRoomInvites, acceptRoomInvite } from '../api/rooms.ts'
+import { fetchRoomInvites, acceptRoomInvite, declineRoomInvite } from '../api/rooms.ts'
 import { useNotifications } from '../store'
 import { useFluent } from 'fluent-vue';
 
@@ -54,7 +62,17 @@ async function acceptFriend(senderUuid: string) {
     requests.value = requests.value.filter(r => r.sender_uuid !== senderUuid)
     // fetchFriends().then(f => (friends.value = f))
   } catch (err) {
-    errorMessage.value = $t('notifications-error-friend') // TODO: handle this case
+    errorMessage.value = $t('notifications-error-friend-accept')
+  }
+}
+
+async function declineFriend(senderUuid: string) {
+  try {
+    await declineFriendRequest(senderUuid)
+    requests.value = requests.value.filter(r => r.sender_uuid !== senderUuid)
+    // fetchFriends().then(f => (friends.value = f))
+  } catch (err) {
+    errorMessage.value = $t('notifications-error-friend-decline')
   }
 }
 
@@ -62,9 +80,18 @@ async function acceptRoom(senderUuid: string, roomUuid: string) {
   try {
     await acceptRoomInvite(senderUuid, roomUuid)
     invites.value = invites.value.filter(r => r.room_uuid !== roomUuid)
-    // fetchFriends().then(f => (friends.value = f))
   } catch (err) {
-    errorMessage.value = $t('notifications-error-room') // TODO: handle this case
+    errorMessage.value = $t('notifications-error-room-accept')
+    throw err
+  }
+}
+
+async function declineRoom(senderUuid: string, roomUuid: string) {
+  try {
+    await declineRoomInvite(senderUuid, roomUuid)
+    invites.value = invites.value.filter(r => r.room_uuid !== roomUuid)
+  } catch (err) {
+    errorMessage.value = $t('notifications-error-room-decline')
     throw err
   }
 }
@@ -144,6 +171,17 @@ async function acceptRoom(senderUuid: string, roomUuid: string) {
   margin-bottom: 1rem;
 }
 
+.decline-btn {
+  color: var(--text);
+  background-color: transparent;
+  border: 1px solid var(--accent);
+  border-radius: var(--radius);
+}
+
+.decline-btn:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
 @media (max-width: 720px) {
   .friend-requests-container {
     flex-direction: column;

src/pages/SettingsPage.vue

@@ -2,7 +2,8 @@
     <div class="settings-page">
         <h1>{{ $t('settings-title') }}</h1>
 
-    <UpdateAccountModal v-if="showUpdateModal" :user="user" @close="showUpdateModal = false" @updated="fetchUserData" />
+        <UpdateAccountModal v-if="showUpdateModal" :user="user" @close="showUpdateModal = false"
+            @updated="fetchUserData" />
 
         <h2>{{ $t('settings-account') }}</h2>
         <div v-if="user" class="info-card">
@@ -136,8 +137,8 @@ h2 {
     padding: 10px 20px;
     color: var(--text);
     background-color: transparent;
-  border: 1px solid #ff5050;
+    border: 1px solid var(--error);
-  border-radius: 8px;
+    border-radius: var(--radius);
     width: fit-content;
     transition: all 0.2s ease;
 }