feat: improve user assignments via quick add magic (#3348)

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/3348

src/components/misc/user.vue

@@ -48,7 +48,6 @@ const displayName = computed(() => getDisplayName(props.user))
 
 <style lang="scss" scoped>
 .user {
-	margin: .5rem;
 	display: flex;
 	justify-items: center;
 

src/components/notifications/notifications.vue

@@ -20,7 +20,8 @@
 						:user="n.notification.doer"
 						:show-username="false"
 						:avatar-size="16"
-						v-if="n.notification.doer"/>
+						v-if="n.notification.doer"
+					/>
 					<div class="detail">
 						<div>
 							<span class="has-text-weight-bold mr-1" v-if="n.notification.doer">

src/components/tasks/partials/editAssignees.vue

@@ -12,12 +12,15 @@
 	>
 		<template #tag="{item: user}">
 			<span class="assignee">
-				<user :avatar-size="32" :show-username="false" :user="user"/>
+				<user :avatar-size="32" :show-username="false" :user="user" class="m-2"/>
 				<BaseButton @click="removeAssignee(user)" class="remove-assignee" v-if="!disabled">
 					<icon icon="times"/>
 				</BaseButton>
 			</span>
 		</template>
+		<template #searchResult="{option: user}">
+			<user :avatar-size="24" :show-username="true" :user="user"/>
+		</template>
 	</Multiselect>
 </template>
 
@@ -104,11 +107,6 @@ async function removeAssignee(user: IUser) {
 }
 
 async function findUser(query: string) {
-	if (query === '') {
-		foundUsers.value = []
-		return
-	}
-
 	const response = await projectUserService.getAll({projectId: props.projectId}, {s: query}) as IUser[]
 
 	// Filter the results to not include users who are already assigned

src/components/tasks/partials/singleTaskInProject.vue

@@ -56,6 +56,7 @@
 				:key="task.id + 'assignee' + a.id + i"
 				:show-username="false"
 				:user="a"
+				class="m-2"
 			/>
 
 			<!-- FIXME: use popup -->