From a4c6e0661b8946ed2795e0b638c64dd602c4ac59 Mon Sep 17 00:00:00 2001
From: eiiko6 <myeiiko6@gmail.com>
Date: Sat, 17 Jan 2026 08:41:51 +0100
Subject: [PATCH] added ownership transfer

---
 src/components/ChatWindow.vue        |   2 +-
 src/components/CreateRoomModal.vue   |   2 +
 src/components/RoomDetailsModal.vue  | 399 ++++++++++++++++-----------
 src/components/UploadAvatarModal.vue |  27 +-
 src/locales/en.ftl                   |   2 +
 src/locales/fr.ftl                   |   2 +
 src/main.ts                          |  24 +-
 7 files changed, 280 insertions(+), 178 deletions(-)

diff --git a/src/components/ChatWindow.vue b/src/components/ChatWindow.vue
index be95d1f..d78c8fe 100644
--- a/src/components/ChatWindow.vue
+++ b/src/components/ChatWindow.vue
@@ -3,7 +3,7 @@
         @close="showInviteModal = false" @room-changed="handleRoomChanged" />
 
     <RoomDetailsModal v-if="showDetailsModal && isSocketConnected" :roomUuid="props.uuid"
-        :roomName="currentRoom?.name || 'Unknown room'" :isGlobal="currentRoom?.global || false"
+        :roomName="currentRoom?.name || 'Unknown room'" :isGlobal="currentRoom?.global || false" :ownerUuid="currentRoom?.owner_uuid || ''"
         @close="showDetailsModal = false" @room-changed="handleRoomChanged" />
 
     <div v-if="uuid === 'none'" class="no-room">
diff --git a/src/components/CreateRoomModal.vue b/src/components/CreateRoomModal.vue
index ac806cb..4f79115 100644
--- a/src/components/CreateRoomModal.vue
+++ b/src/components/CreateRoomModal.vue
@@ -8,10 +8,12 @@
         <input v-model="name" :placeholder="$t('chat-create-name-placeholder')" autofocus />
       </div>
 
+      <!--
       <label class="checkbox">
         <input type="checkbox" v-model="global" />
         <span>{{ $t('chat-create-global') }}</span>
       </label>
+      -->
 
       <div class="actions">
         <button type="button" @click="emit('close')" class="secondary">
diff --git a/src/components/RoomDetailsModal.vue b/src/components/RoomDetailsModal.vue
index c34f717..82db27b 100644
--- a/src/components/RoomDetailsModal.vue
+++ b/src/components/RoomDetailsModal.vue
@@ -1,51 +1,60 @@
 <template>
-    <div class="backdrop" @click.self="emit('close')">
-        <div class="modal">
-            <h2>{{ roomName }}</h2>
-            <h3 v-if="!isGlobal">Members:</h3>
+  <div class="backdrop" @click.self="emit('close')">
+    <div class="modal">
+      <h2>{{ roomName }}</h2>
+      <h3 v-if="!isGlobal">Members:</h3>
 
-            <ul v-if="!isGlobal" class="member-list">
-                <li v-for="user in users" :key="user.uuid || user.username" class="member-item">
-                    <img :src="getAvatarUrl(user.uuid)" @error="handleAvatarError" class="avatar" alt="avatar" />
-                    <span class="member-name">{{ user.username }}</span>
-                </li>
-            </ul>
+      <ul v-if="!isGlobal" class="member-list">
+        <li v-for="user in users" :key="user.uuid || user.username" class="member-item" :class="{
+          'is-owner': user.uuid === ownerUuid,
+          'selectable': isTransferringOwnership && user.uuid !== ownerUuid,
+          'dimmed': isTransferringOwnership && user.uuid === currentUserUuid
+        }" @click="handleUserClick(user)">
+          <img :src="getAvatarUrl(user.uuid)" @error="handleAvatarError" class="avatar" alt="avatar" />
+          <span class="member-name">{{ user.username }}</span>
+        </li>
+      </ul>
 
-            <p v-else class="global-tag">
-                <i class="fa-solid fa-earth"></i>
-                {{ $t('chat-room-global') }}
-            </p>
+      <p v-else class="global-tag">
+        <i class="fa-solid fa-earth"></i>
+        {{ $t('chat-room-global') }}
+      </p>
 
-            <div class="buttons">
-                <button v-if="!isGlobal && !isOwner" class="btn" @click="requestLeave" :disabled="isLoading">
-                    {{ $t('chat-room-actions-leave') }}
-                </button>
+      <div class="buttons">
+        <button v-if="!isGlobal && !isOwner && !isTransferringOwnership" class="btn" @click="requestLeave"
+          :disabled="isLoading">
+          {{ $t('chat-room-actions-leave') }}
+        </button>
 
-                <button v-if="isOwner" class="btn delete-btn" @click="requestDelete" :disabled="isLoading">
-                    {{ $t('chat-room-actions-delete') }}
-                </button>
+        <button v-if="isOwner && !isTransferringOwnership" class="btn delete-btn" @click="requestDelete"
+          :disabled="isLoading || isTransferringOwnership">
+          {{ $t('chat-room-actions-delete') }}
+        </button>
 
-                <!-- <button class="btn ownership-btn">{{ $t('chat-room-actions-ownership') }}</button> -->
-            </div>
+        <button v-if="!isGlobal && isOwner" class="btn ownership-btn" :class="{ 'active': isTransferringOwnership }"
+          @click="toggleTransferMode" :disabled="isLoading">
+          {{ isTransferringOwnership ? $t('shared-cancel') : $t('chat-room-actions-ownership') }}
+        </button>
+      </div>
 
-            <div class="actions">
-                <button @click="emit('close')" class="secondary">
-                    {{ $t('shared-close') }}
-                </button>
-            </div>
-        </div>
+      <div class="actions">
+        <button @click="emit('close')" class="secondary">
+          {{ $t('shared-close') }}
+        </button>
+      </div>
     </div>
+  </div>
 
-    <ConfirmModal v-if="modalState.visible" :title="modalState.title" :message="modalState.message"
-        :confirm-label="modalState.confirmLabel" :confirm-button-class="modalState.isDanger ? 'btn-danger' : ''"
-        @yes="handleConfirmAction" @no="closeConfirmModal" />
+  <ConfirmModal v-if="modalState.visible" :title="modalState.title" :message="modalState.message"
+    :confirm-label="modalState.confirmLabel" :confirm-button-class="modalState.isDanger ? 'btn-danger' : ''"
+    @yes="handleConfirmAction" @no="closeConfirmModal" />
 
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref, reactive } from 'vue';
 import { UserProfile } from '../types';
-import { deleteRoom, leaveRoom, listMembers } from '../api/rooms';
+import { deleteRoom, leaveRoom, listMembers, transferOwnership } from '../api/rooms';
 import { getAuthData, getAvatarUrl } from '../store.ts';
 import defaultAvatar from '../assets/default-avatar.png';
 import ConfirmModal from './ConfirmModal.vue';
@@ -53,228 +62,296 @@ import { useFluent } from 'fluent-vue';
 
 const { $t } = useFluent()
 
-const props = defineProps<{ roomUuid: string, roomName: string, isGlobal: boolean }>()
+const props = defineProps<{ roomUuid: string, roomName: string, isGlobal: boolean, ownerUuid: string }>()
 const emit = defineEmits(['close', 'room-changed']);
 
 const users = ref<UserProfile[]>([]);
 const isLoading = ref(false);
 const currentUserUuid = ref<string>('');
 
-type ActionType = 'leave' | 'delete' | null;
+const isTransferringOwnership = ref(false);
+const targetTransferUser = ref<UserProfile | null>(null);
+
+type ActionType = 'leave' | 'delete' | 'transfer' | null;
 
 const modalState = reactive({
-    visible: false,
-    type: null as ActionType,
-    title: '',
-    message: '',
-    confirmLabel: '',
-    isDanger: false
+  visible: false,
+  type: null as ActionType,
+  title: '',
+  message: '',
+  confirmLabel: '',
+  isDanger: false
 });
 
 const requestLeave = () => {
-    modalState.type = 'leave';
-    modalState.title = $t('chat-room-actions-leave');
-    modalState.message = $t('chat-room-actions-leave-confirm');
-    modalState.confirmLabel = $t('shared-leave');
-    modalState.isDanger = false;
-    modalState.visible = true;
+  modalState.type = 'leave';
+  modalState.title = $t('chat-room-actions-leave');
+  modalState.message = $t('chat-room-actions-leave-confirm');
+  modalState.confirmLabel = $t('shared-leave');
+  modalState.isDanger = false;
+  modalState.visible = true;
 };
 
 const requestDelete = () => {
-    modalState.type = 'delete';
-    modalState.title = $t('chat-room-actions-delete');
-    modalState.message = $t('chat-room-actions-delete-confirm');
-    modalState.confirmLabel = $t('shared-delete');
-    modalState.isDanger = true;
-    modalState.visible = true;
+  modalState.type = 'delete';
+  modalState.title = $t('chat-room-actions-delete');
+  modalState.message = $t('chat-room-actions-delete-confirm');
+  modalState.confirmLabel = $t('shared-delete');
+  modalState.isDanger = true;
+  modalState.visible = true;
+};
+
+const toggleTransferMode = () => {
+  isTransferringOwnership.value = !isTransferringOwnership.value;
+};
+
+const handleUserClick = (user: UserProfile) => {
+  if (!isTransferringOwnership.value || user.uuid === currentUserUuid.value) {
+    return;
+  }
+
+  targetTransferUser.value = user;
+
+  modalState.type = 'transfer';
+  modalState.title = $t('chat-room-actions-ownership');
+  modalState.message = $t('chat-room-actions-ownership-confirm', { user: user.username });
+  modalState.confirmLabel = $t('shared-confirm');
+  modalState.isDanger = true;
+  modalState.visible = true;
 };
 
 const closeConfirmModal = () => {
-    modalState.visible = false;
-    modalState.type = null;
+  modalState.visible = false;
+  modalState.type = null;
+  targetTransferUser.value = null;
 };
 
 const handleConfirmAction = async () => {
-    const actionType = modalState.type;
+  const actionType = modalState.type;
+  const userToTransfer = targetTransferUser.value;
 
-    closeConfirmModal();
+  closeConfirmModal();
+  isTransferringOwnership.value = false;
 
-    isLoading.value = true;
+  isLoading.value = true;
 
-    try {
-        if (actionType === 'leave') {
-            await leaveRoom(props.roomUuid);
-            emit('room-changed');
-            emit('close');
-        } else if (actionType === 'delete') {
-            await deleteRoom(props.roomUuid);
-            emit('room-changed');
-            emit('close');
-        }
-    } catch (error) {
-        console.error(`Failed to ${actionType} room:`, error);
-    } finally {
-        isLoading.value = false;
+  try {
+    if (actionType === 'leave') {
+      await leaveRoom(props.roomUuid);
+      emit('room-changed');
+      emit('close');
+    } else if (actionType === 'delete') {
+      await deleteRoom(props.roomUuid);
+      emit('room-changed');
+      emit('close');
+    } else if (actionType === 'transfer' && userToTransfer) {
+      console.log("ownership")
+      await transferOwnership(props.roomUuid, userToTransfer.uuid);
+      emit('room-changed');
+      emit('close');
     }
+  } catch (error) {
+    console.error(`Failed to ${actionType} room:`, error);
+  } finally {
+    isLoading.value = false;
+  }
 };
 
 const isOwner = computed(() => {
-    return true; // Logic placeholder
+  return currentUserUuid.value === props.ownerUuid;
 });
 
 onMounted(async () => {
-    const auth = await getAuthData();
-    currentUserUuid.value = auth.user?.uuid || 'undefined';
+  const auth = await getAuthData();
+  currentUserUuid.value = auth.user?.uuid || 'undefined';
 
-    if (!props.isGlobal) {
-        users.value = await listMembers(props.roomUuid);
-    }
+  if (!props.isGlobal) {
+    users.value = await listMembers(props.roomUuid);
+  }
 });
 
 const handleAvatarError = (event: Event) => {
-    const img = event.target as HTMLImageElement;
-    img.src = defaultAvatar;
+  const img = event.target as HTMLImageElement;
+  img.src = defaultAvatar;
 };
 </script>
 
 <style scoped>
 .backdrop {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 500;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 500;
 }
 
 .modal {
-    background: var(--panel);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 1.5rem;
-    width: 100%;
-    max-width: 400px;
-    display: flex;
-    flex-direction: column;
-    gap: 1.2rem;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.5rem;
+  width: 100%;
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
 }
 
 .actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.5rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
 }
 
 .secondary {
-    background: transparent;
-    color: var(--text);
-    border: 1px solid var(--border);
-    padding: 8px 16px;
-    border-radius: var(--radius);
-    cursor: pointer;
+  background: transparent;
+  color: var(--text);
+  border: 1px solid var(--border);
+  padding: 8px 16px;
+  border-radius: var(--radius);
+  cursor: pointer;
 }
 
 .member-list {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-    gap: 1rem;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    overflow-y: auto;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  gap: 1rem;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  overflow-y: auto;
 }
 
 .member-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    gap: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 0.5rem;
+  padding: 5px;
+  border-radius: var(--radius);
+  transition: all 0.2s ease;
 }
 
 .avatar {
-    width: 48px;
-    height: 48px;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid transparent;
 }
 
 .member-name {
-    font-size: 0.85rem;
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  font-size: 0.85rem;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.member-item.is-owner .avatar {
+  border: 2px solid var(--accent);
+}
+
+.member-item.is-owner .member-name {
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.member-item.dimmed {
+  opacity: 0.4;
+  cursor: not-allowed;
+  filter: grayscale(1);
+}
+
+.member-item.selectable {
+  cursor: pointer;
+  background-color: rgba(var(--accent-rgb, 100, 100, 255), 0.1);
+  border: 1px solid var(--border);
+}
+
+.member-item.selectable:hover {
+  background-color: var(--accent);
+  color: var(--bg);
+}
+
+.member-item.selectable:hover .member-name {
+  color: var(--bg);
 }
 
 .global-tag {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: 0.6rem;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6rem;
 }
 
 .buttons {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: 0.6rem;
-    margin-top: 22px;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0.6rem;
+  margin-top: 22px;
 }
 
 .btn {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 8px 16px;
-    font-size: 0.9rem;
-    color: var(--text);
-    background-color: transparent;
-    border-radius: var(--radius);
-    width: fit-content;
-    border: 1px solid var(--accent);
-    transition: all 0.2s ease;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 16px;
+  font-size: 0.9rem;
+  color: var(--text);
+  background-color: transparent;
+  border-radius: var(--radius);
+  width: fit-content;
+  border: 1px solid var(--accent);
+  transition: all 0.2s ease;
 }
 
 .btn:hover {
-    color: var(--accent)
+  color: var(--accent)
 }
 
 .btn:hover i {
-    color: var(--accent)
+  color: var(--accent)
 }
 
 .btn i {
-    font-size: 1.25rem;
+  font-size: 1.25rem;
 }
 
 .delete-btn {
-    border: 1px solid var(--error);
+  border: 1px solid var(--error);
 }
 
 .delete-btn:hover {
-    color: var(--error)
+  color: var(--error)
 }
 
 .delete-btn:hover i {
-    color: var(--error)
+  color: var(--error)
 }
 
 .ownership-btn {
-    border: 1px solid var(--accent-second);
+  border: 1px solid var(--accent-second);
 }
 
-.ownership-btn:hover {
-    color: var(--accent-second)
+.ownership-btn:hover,
+.ownership-btn.active {
+  background-color: var(--accent-second);
+  color: white;
 }
 
 .ownership-btn:hover i {
-    color: var(--accent-second)
+  color: white;
 }
 </style>
diff --git a/src/components/UploadAvatarModal.vue b/src/components/UploadAvatarModal.vue
index d4f863f..17a2840 100644
--- a/src/components/UploadAvatarModal.vue
+++ b/src/components/UploadAvatarModal.vue
@@ -64,6 +64,10 @@ let unlistenDrag: UnlistenFn;
 let unlistenHover: UnlistenFn;
 let unlistenLeave: UnlistenFn;
 
+function uiLog(message: string) {
+  errorMessage.value += (errorMessage.value ? '\n' : '') + message;
+}
+
 onMounted(async () => {
   unlistenHover = await listen('tauri://drag-enter', () => isDragging.value = true);
   unlistenLeave = await listen('tauri://drag-leave', () => isDragging.value = false);
@@ -83,21 +87,36 @@ onUnmounted(() => {
   if (previewUrl.value) URL.revokeObjectURL(previewUrl.value);
 });
 
+
 async function pickFile() {
+  errorMessage.value = '';
+  // uiLog('[pickFile] called');
+
   try {
     const selected = await open({
       multiple: false,
       filters: [{ name: 'Image', extensions: ['png', 'jpeg', 'jpg', 'webp'] }]
     });
 
-    if (selected && typeof selected === 'string') {
-      await setFile(selected);
+    // uiLog('[pickFile] dialog returned: ' + JSON.stringify(selected));
+
+    if (!selected) {
+      uiLog('No file selected (null)');
+      return;
     }
-  } catch (err) {
-    console.error(err);
+
+    if (typeof selected !== 'string') {
+      uiLog('Unexpected return type');
+      return;
+    }
+
+    await setFile(selected);
+  } catch (err: any) {
+    uiLog('Error: ' + (err?.message ?? String(err)));
   }
 }
 
+
 // Async function to read file and create blob URL
 async function setFile(path: string) {
   try {
diff --git a/src/locales/en.ftl b/src/locales/en.ftl
index 3a62b8d..159529f 100644
--- a/src/locales/en.ftl
+++ b/src/locales/en.ftl
@@ -43,6 +43,7 @@ chat-room-actions-leave-confirm = Are you sure you want to leave this room?
 chat-room-actions-delete = Delete Room
 chat-room-actions-delete-confirm = Are you sure you want to delete this room? This cannot be undone.
 chat-room-actions-ownership = Transfer Ownership
+chat-room-actions-ownership-confirm = Do you really wish to transfer this room's ownership to {$user}? You might never get it back.
 chat-create-title = Create room
 chat-create-name = Room name
 chat-create-name-placeholder = room name
@@ -110,3 +111,4 @@ shared-save = Save
 shared-updating = Updating
 shared-delete = Delete
 shared-leave = Leave
+shared-confirm = Confirm
diff --git a/src/locales/fr.ftl b/src/locales/fr.ftl
index 3f4a204..bcbc253 100644
--- a/src/locales/fr.ftl
+++ b/src/locales/fr.ftl
@@ -43,6 +43,7 @@ chat-room-actions-leave-confirm = Voulez-vous vraiment quitter ce salon?
 chat-room-actions-delete = Supprimer le Salon
 chat-room-actions-delete-confirm = Voulez-vous vraiment supprimer ce salon? C'est irréversible.
 chat-room-actions-ownership = Transférer la Propriété
+chat-room-actions-ownership-confirm = Voulez-vous vraiment transférer la propriété du salon à {$user}? Vous pourriez ne jamais la récupérer.
 chat-create-title = Créer un salon
 chat-create-name = Nom du salon
 chat-create-name-placeholder = nom du salon
@@ -108,3 +109,4 @@ shared-save = Enregistrer
 shared-updating = Mise à jour...
 shared-delete = Supprimer
 shared-leave = Quitter
+shared-confirm = Confirmer
diff --git a/src/main.ts b/src/main.ts
index 1d2a342..7749ca1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -8,22 +8,22 @@ import './base.css'
 import { getLocalePreference } from './store.ts'
 
 async function init() {
-  await validateToken()
+    await validateToken()
 
-  const app = createApp(App)
-  app.use(router)
-  app.use(fluent)
+    const app = createApp(App)
+    app.use(router)
+    app.use(fluent)
 
-  const savedLocale = await getLocalePreference();
-  const osLocale = navigator.language;
+    const savedLocale = await getLocalePreference();
+    const osLocale = navigator.language;
 
-  if (savedLocale) {
-    setLanguage(savedLocale);
-  } else {
-    setLanguage(osLocale);
-  }
+    if (savedLocale) {
+        setLanguage(savedLocale);
+    } else {
+        setLanguage(osLocale);
+    }
 
-  app.mount('#app')
+    app.mount('#app')
 }
 
 init()