From c8093acef64e28c63eb092a1050276b7d68c645f Mon Sep 17 00:00:00 2001
From: TrojanerHD <github@trojaner.dev>
Date: Thu, 1 Aug 2024 00:25:04 +0200
Subject: [PATCH] fix(client): split user name pasting and @ input into the
 correct fields

---
 .../src/components/MkUserSelectDialog.vue     | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/MkUserSelectDialog.vue b/packages/client/src/components/MkUserSelectDialog.vue
index 5cc9cf0a21..c25d5f92f3 100644
--- a/packages/client/src/components/MkUserSelectDialog.vue
+++ b/packages/client/src/components/MkUserSelectDialog.vue
@@ -20,7 +20,11 @@
 						<template #label>{{ i18n.ts.username }}</template>
 						<template #prefix>@</template>
 					</MkInput>
-					<MkInput v-model="host" @update:modelValue="search">
+					<MkInput
+						ref="hostEl"
+						v-model="host"
+						@update:modelValue="search"
+					>
 						<template #label>{{ i18n.ts.host }}</template>
 						<template #prefix>@</template>
 					</MkInput>
@@ -88,7 +92,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch, nextTick } from "vue";
 import type { entities } from "firefish-js";
 import MkInput from "@/components/form/input.vue";
 import FormSplit from "@/components/form/split.vue";
@@ -109,6 +113,7 @@ const users = ref<entities.UserDetailed[]>([]);
 const recentUsers = ref<entities.UserDetailed[]>([]);
 const selected = ref<entities.UserDetailed | null>(null);
 const dialogEl = ref();
+const hostEl = ref();
 
 const search = () => {
 	if (username.value === "" && host.value === "") {
@@ -149,6 +154,21 @@ onMounted(() => {
 		recentUsers.value = users;
 	});
 });
+
+watch(username, (newValue) => {
+	if (newValue.includes("@")) {
+		if (newValue.length !== 1) {
+			hostEl.value.focus();
+		}
+		nextTick(() => {
+			const newUser = username.value.startsWith("@")
+				? username.value.substring(1)
+				: username.value;
+			username.value = newUser.substring(0, newUser.indexOf("@"));
+			host.value = newUser.substring(newUser.indexOf("@") + 1);
+		});
+	}
+});
 </script>
 
 <style lang="scss" scoped>