Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add avatar display to user selector

Browse source
This commit is contained in:
Eli Ribble 2026-04-02 15:39:52 +00:00
parent ea231fb0cc
commit 51811132a4
No known key found for this signature in database
2 changed files with 33 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

31
ts/components/Avatar.vue Normal file
View file

@ -0,0 +1,31 @@
<style scoped>
.avatar {
width: 48px;
height: 48px;
object-fit: cover;
}
.bi-avatar {
height: 48px;
width: 48px;
}
</style>
<template>
<img
v-if="user.avatar"
:src="user.avatar"
:alt="user.display_name"
class="rounded-circle me-2 avatar"
width="32"
height="32"
/>
<i v-else class="bi bi-avatar"></i>
</template>
<script setup lang="ts">
import { User } from "@/types";
interface Props {
user: User;
}
const props = defineProps<Props>();
</script>

11
ts/components/UserSelector.vue
View file

@ -23,15 +23,7 @@
class="dropdown-item d-flex align-items-center"
@mousedown.prevent="selectUser(user)"
>
<img
v-if="user.avatar"
:src="user.avatar"
:alt="user.display_name"
class="rounded-circle me-2"
width="32"
height="32"
/>
<span v-else class="badge bg-secondary me-2">{{ user.initials }}</span>
<Avatar :user="user" />
<div class="flex-grow-1">
<div v-html="highlightMatch(user.display_name)"></div>
@ -58,6 +50,7 @@
<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import Avatar from "@/components/Avatar.vue";
import { useUserStore } from "@/store/user";
import type { User } from "@/types";