strawberries/frangipane-client
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added ownership transfer

Browse Source
This commit is contained in:
eiiko6
2026-01-17 08:41:51 +01:00
parent d325511d0e
commit a4c6e0661b
7 changed files with 280 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ChatWindow.vue
View File

@@ -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">

2
src/components/CreateRoomModal.vue
View File

@@ -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">

99
src/components/RoomDetailsModal.vue
View File

@@ -5,7 +5,11 @@
<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">
<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>
@@ -17,15 +21,20 @@
</p>
<div class="buttons">
<button v-if="!isGlobal && !isOwner" class="btn" @click="requestLeave" :disabled="isLoading">
<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">
<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> -->
<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">
@@ -45,7 +54,7 @@
<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,14 +62,17 @@ 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,
@@ -89,15 +101,37 @@ const requestDelete = () => {
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;
targetTransferUser.value = null;
};
const handleConfirmAction = async () => {
const actionType = modalState.type;
const userToTransfer = targetTransferUser.value;
closeConfirmModal();
isTransferringOwnership.value = false;
isLoading.value = true;
@@ -110,6 +144,11 @@ const handleConfirmAction = async () => {
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);
@@ -119,7 +158,7 @@ const handleConfirmAction = async () => {
};
const isOwner = computed(() => {
return true; // Logic placeholder
return currentUserUuid.value === props.ownerUuid;
});
onMounted(async () => {
@@ -191,11 +230,17 @@ const handleAvatarError = (event: Event) => {
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;
border-radius: 50%;
object-fit: cover;
border: 2px solid transparent;
}
.member-name {
@@ -206,6 +251,36 @@ const handleAvatarError = (event: Event) => {
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;
@@ -270,11 +345,13 @@ const handleAvatarError = (event: Event) => {
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>

27
src/components/UploadAvatarModal.vue
View File

@@ -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') {
// uiLog('[pickFile] dialog returned: ' + JSON.stringify(selected));
if (!selected) {
uiLog('No file selected (null)');
return;
}
if (typeof selected !== 'string') {
uiLog('Unexpected return type');
return;
}
await setFile(selected);
}
} catch (err) {
console.error(err);
} catch (err: any) {
uiLog('Error: ' + (err?.message ?? String(err)));
}
}
// Async function to read file and create blob URL
async function setFile(path: string) {
try {

2
src/locales/en.ftl
View File

@@ -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

2
src/locales/fr.ftl
View File

@@ -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