From 29f9b86aee30f6edcb09ceb3ddf67ebed8569bf0 Mon Sep 17 00:00:00 2001
From: Alexey Yarmosh <yarmoshalexey@gmail.com>
Date: Tue, 20 Aug 2024 13:58:23 +0200
Subject: [PATCH 01/12] fix: autocomplete padding

---
 components/TokenDetails.vue        | 2 +-
 presets/aura/autocomplete/index.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/TokenDetails.vue b/components/TokenDetails.vue
index 9f36beef..6e7a52ec 100644
--- a/components/TokenDetails.vue
+++ b/components/TokenDetails.vue
@@ -66,7 +66,7 @@
 		</div>
 		<div class="text-xs">{{ expire ? `Token will expire ${formatDate(expire)}.` : 'Token will never expire.' }}</div>
 		<label for="origins" class="mt-6 block">Origins</label>
-		<!-- TODO: P1: finish migrating this: storing doesn't seem to work at all, the separator param would be nice to bring back, input needs padding -->
+		<!-- TODO: P1: finish migrating this: storing doesn't seem to work at all, the separator param would be nice to bring back -->
 		<AutoComplete
 			id="origins"
 			v-model="origins"
diff --git a/presets/aura/autocomplete/index.js b/presets/aura/autocomplete/index.js
index 52d98fba..db8765ba 100644
--- a/presets/aura/autocomplete/index.js
+++ b/presets/aura/autocomplete/index.js
@@ -32,7 +32,7 @@ export default {
 
 			// Spacing
 			'm-0 list-none',
-			'py-1 px-1',
+			'py-1 px-3',
 
 			// Size
 			'w-full',

From ff0995058bdd12bb9ea31bd9ad0b1315eaea6479 Mon Sep 17 00:00:00 2001
From: Alexey Yarmosh <yarmoshalexey@gmail.com>
Date: Tue, 20 Aug 2024 13:58:48 +0200
Subject: [PATCH 02/12] fix: codeblock min height

---
 components/CodeBlock.vue  | 2 +-
 components/StartProbe.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/CodeBlock.vue b/components/CodeBlock.vue
index afa7da1e..dfdedc7f 100644
--- a/components/CodeBlock.vue
+++ b/components/CodeBlock.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="relative rounded-xl border bg-surface-0 p-4 pr-0 dark:bg-dark-900">
 		<div class="no-scrollbar overflow-scroll">
-			<pre v-for="line in commands" :key="line.toString()"><code>{{ line[0] }}</code><code class="mr-16 text-bluegray-300">{{ line[1] }}</code></pre>
+			<pre v-for="line in commands" :key="line.toString()" class="flex min-h-[22px] items-center"><code>{{ line[0] }}</code><code class="mr-16 text-bluegray-300">{{ line[1] }}</code></pre>
 		</div>
 		<div class="!absolute right-2 top-2">
 			<Button
diff --git a/components/StartProbe.vue b/components/StartProbe.vue
index 9a41f10e..f4f544ad 100644
--- a/components/StartProbe.vue
+++ b/components/StartProbe.vue
@@ -17,7 +17,7 @@
 
 		<!-- TODO: P3: collapse/expand thing could be a component -->
 		<div ref="codeElem">
-			<pre v-if="(size === 'compact')" class="no-scrollbar overflow-scroll"><code class="mr-16">{{ commands[platform][size] }}</code></pre>
+			<pre v-if="size === 'compact'" class="no-scrollbar flex min-h-[22px] items-center overflow-scroll"><code class="mr-16">{{ commands[platform][size] }}</code></pre>
 			<div v-if="size === 'expanded'" class="no-scrollbar overflow-scroll">
 				<pre v-for="line in commands[platform][size]" :key="line.toString()"><code>{{ line[0] }}</code><code class="mr-16 text-bluegray-300">{{ line[1] }}</code></pre>
 			</div>

From 865afa28d2700e53f8b3e630abcb2bc45b0de23c Mon Sep 17 00:00:00 2001
From: Alexey Yarmosh <yarmoshalexey@gmail.com>
Date: Tue, 20 Aug 2024 16:45:45 +0200
Subject: [PATCH 03/12] fix: hidden copy tooltip

---
 components/AdoptProbe.vue |  8 ++++----
 components/StartProbe.vue | 41 +++++++++++++++++++++------------------
 2 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/components/AdoptProbe.vue b/components/AdoptProbe.vue
index 51b83173..264ff40e 100644
--- a/components/AdoptProbe.vue
+++ b/components/AdoptProbe.vue
@@ -37,13 +37,13 @@
 						<Tab value="1" :class="{ grow: true }"><i class="pi pi-times mr-2"/>I'm not running a probe yet</Tab>
 					</TabList>
 					<TabPanels ref="tabPanels" class="box-content overflow-hidden transition-[height] duration-500">
-						<TabPanel value="0" class="overflow-auto">
-							<p class="mb-4 mt-2 text-lg font-bold">Set up your probe</p>
+						<TabPanel value="0">
+							<p class="mb-4 text-lg font-bold">Set up your probe</p>
 							<p>First, update your container by running the following commands:</p>
 							<CodeBlock :commands="setUpCommands" class="mt-4"/>
 						</TabPanel>
-						<TabPanel value="1" class="overflow-auto">
-							<p class="mb-4 mt-2 text-lg font-bold">Join the network</p>
+						<TabPanel value="1">
+							<p class="mb-4 text-lg font-bold">Join the network</p>
 							<StartProbe/>
 						</TabPanel>
 					</TabPanels>
diff --git a/components/StartProbe.vue b/components/StartProbe.vue
index f4f544ad..75e8940c 100644
--- a/components/StartProbe.vue
+++ b/components/StartProbe.vue
@@ -12,27 +12,30 @@
 			@update:model-value="onChangePlatform"
 		/>
 	</div>
-	<div ref="codeWrapperElem" class="relative mt-4 box-content overflow-hidden rounded-xl border p-4 pr-0 transition-[height] duration-500 dark:bg-dark-900">
-		<!-- TODO: P1: related ^ all the modals may work better if they are closer to the top, not fully vertically centered -->
+	<!-- "relative" block should wrap "overflow-hidden" block so "Copied!" tooltip is not hiding. -->
+	<div class="relative">
+		<div ref="codeWrapperElem" class="mt-4 box-content overflow-hidden rounded-xl border p-4 pr-0 transition-[height] duration-500 dark:bg-dark-900">
+			<!-- TODO: P1: related ^ all the modals may work better if they are closer to the top, not fully vertically centered -->
 
-		<!-- TODO: P3: collapse/expand thing could be a component -->
-		<div ref="codeElem">
-			<pre v-if="size === 'compact'" class="no-scrollbar flex min-h-[22px] items-center overflow-scroll"><code class="mr-16">{{ commands[platform][size] }}</code></pre>
-			<div v-if="size === 'expanded'" class="no-scrollbar overflow-scroll">
-				<pre v-for="line in commands[platform][size]" :key="line.toString()"><code>{{ line[0] }}</code><code class="mr-16 text-bluegray-300">{{ line[1] }}</code></pre>
+			<!-- TODO: P3: collapse/expand thing could be a component -->
+			<div ref="codeElem">
+				<pre v-if="size === 'compact'" class="no-scrollbar flex min-h-[22px] items-center overflow-scroll"><code class="mr-16">{{ commands[platform][size] }}</code></pre>
+				<div v-if="size === 'expanded'" class="no-scrollbar overflow-scroll">
+					<pre v-for="line in commands[platform][size]" :key="line.toString()"><code>{{ line[0] }}</code><code class="mr-16 text-bluegray-300">{{ line[1] }}</code></pre>
+				</div>
 			</div>
-		</div>
-		<div class="!absolute right-2 top-2">
-			<!-- TODO: P3: copy button could be a component -->
-			<Button
-				icon="pi pi-copy"
-				severity="secondary"
-				aria-label="Copy"
-				outlined
-				@click="copyCommand"
-			/>
-			<div v-if="copyTooltip" class="absolute -top-10 left-1/2 -translate-x-1/2 rounded-md bg-bluegray-700 p-2 text-surface-0">
-				Copied!
+			<div class="!absolute right-2 top-2">
+				<!-- TODO: P3: copy button could be a component -->
+				<Button
+					icon="pi pi-copy"
+					severity="secondary"
+					aria-label="Copy"
+					outlined
+					@click="copyCommand"
+				/>
+				<div v-if="copyTooltip" class="absolute -top-10 left-1/2 -translate-x-1/2 rounded-md bg-bluegray-700 p-2 text-surface-0">
+					Copied!
+				</div>
 			</div>
 		</div>
 	</div>

From bf0afebce33afb2c1ef4f29d8e8be69b9e26d2d5 Mon Sep 17 00:00:00 2001
From: Alexey Yarmosh <yarmoshalexey@gmail.com>
Date: Tue, 20 Aug 2024 19:14:38 +0200
Subject: [PATCH 04/12] feat: add separator and blur handlers

---
 components/TokenDetails.vue | 36 +++++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/components/TokenDetails.vue b/components/TokenDetails.vue
index 6e7a52ec..a7f68dec 100644
--- a/components/TokenDetails.vue
+++ b/components/TokenDetails.vue
@@ -66,7 +66,6 @@
 		</div>
 		<div class="text-xs">{{ expire ? `Token will expire ${formatDate(expire)}.` : 'Token will never expire.' }}</div>
 		<label for="origins" class="mt-6 block">Origins</label>
-		<!-- TODO: P1: finish migrating this: storing doesn't seem to work at all, the separator param would be nice to bring back -->
 		<AutoComplete
 			id="origins"
 			v-model="origins"
@@ -75,7 +74,9 @@
 			remove-token-icon="pi pi-times"
 			multiple
 			:typeahead="false"
+			:pt="{ inputChip: { id: 'token-details-origins-input-wrapper'} }"
 			@update:model-value="updateOrigins"
+			@blur="onAutoCompleteBlur"
 		/>
 		<p class="mt-1 text-xs">
 			A list of origins which are allowed to use the token. If empty, any origin is valid.
@@ -175,6 +176,39 @@
 		origins.value = value.filter(v => !!v);
 	};
 
+	const onAutoCompleteBlur = (event: Event) => {
+		const input = event?.target as HTMLInputElement | null;
+
+		if (input?.value) {
+			origins.value.push(input.value);
+			input.value = '';
+		}
+	};
+
+	let inputElem: HTMLInputElement | null;
+	const inputChangeValueHandler = () => {
+		if (!inputElem || !inputElem.value) {
+			return;
+		} else if (inputElem.value === ',') {
+			inputElem.value = '';
+			return;
+		}
+
+		if (inputElem.value.endsWith(',') && inputElem.value.replaceAll(',', '')) {
+			origins.value.push(inputElem.value.replaceAll(',', ''));
+			inputElem.value = '';
+		}
+	};
+
+	onMounted(() => {
+		inputElem = document.querySelector<HTMLInputElement>('#token-details-origins-input-wrapper input');
+		inputElem && inputElem.addEventListener('input', inputChangeValueHandler);
+	});
+
+	onUnmounted(() => {
+		inputElem && inputElem.removeEventListener('input', inputChangeValueHandler);
+	});
+
 	// ACTIONS
 
 	const generateTokenLoading = ref(false);

From 3f84d7849fe79b1c2b0699514156c6ed16c32b74 Mon Sep 17 00:00:00 2001
From: Alexey Yarmosh <yarmoshalexey@gmail.com>
Date: Tue, 20 Aug 2024 19:38:00 +0200
Subject: [PATCH 05/12] feat: initially move modals to the top

---
 pages/index.vue    | 3 ++-
 pages/probes.vue   | 6 ++++--
 pages/settings.vue | 3 ++-
 pages/tokens.vue   | 9 ++++++---
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index 0757cab2..042fa2c6 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -122,7 +122,8 @@
 		</div>
 		<Dialog
 			v-model:visible="adoptProbeDialog"
-			class="min-w-[700px] max-md:min-w-[95%]"
+			position="top"
+			class="mt-12 min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
diff --git a/pages/probes.vue b/pages/probes.vue
index 86f1a380..5113de91 100644
--- a/pages/probes.vue
+++ b/pages/probes.vue
@@ -288,7 +288,8 @@
 		</div>
 		<Dialog
 			v-model:visible="startProbeDialog"
-			class="min-w-[700px] max-md:min-w-[95%]"
+			position="top"
+			class="mt-12 min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
@@ -298,7 +299,8 @@
 		</Dialog>
 		<Dialog
 			v-model:visible="adoptProbeDialog"
-			class="max-h-[95vh] min-w-[700px] max-md:min-w-[95%]"
+			position="top"
+			class="mt-12 max-h-[95vh] min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
diff --git a/pages/settings.vue b/pages/settings.vue
index 2cff65d7..72942b7c 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -96,7 +96,8 @@
 		<!-- TODO: P3: we have many of these in the same style, might be worth to wrap in our own component (possibly same applies to other components). -->
 		<Dialog
 			v-model:visible="deleteDialog"
-			class="min-w-[700px] max-md:min-w-[95%]"
+			position="top"
+			class="mt-12 min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
diff --git a/pages/tokens.vue b/pages/tokens.vue
index feac8c27..3476ec6f 100644
--- a/pages/tokens.vue
+++ b/pages/tokens.vue
@@ -88,7 +88,8 @@
 		</div>
 		<Dialog
 			v-model:visible="tokenDetailsDialog"
-			class="min-w-[700px] max-md:min-w-[95%]"
+			position="top"
+			class="mt-12 min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
@@ -105,7 +106,8 @@
 		</Dialog>
 		<Dialog
 			v-model:visible="deleteDialog"
-			class="min-w-[700px] max-md:min-w-[95%]"
+			position="top"
+			class="mt-12 min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
@@ -127,7 +129,8 @@
 		</Dialog>
 		<Dialog
 			v-model:visible="regenerateDialog"
-			class="min-w-[700px] max-md:min-w-[95%]"
+			position="top"
+			class="mt-12 min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"

From f664c05649f56e7e872fe6efe17806dbe2473fce Mon Sep 17 00:00:00 2001
From: Alexey Yarmosh <yarmoshalexey@gmail.com>
Date: Tue, 20 Aug 2024 20:04:17 +0200
Subject: [PATCH 06/12] feat: use default animation for the "top" modal
 position

---
 components/StartProbe.vue    | 3 ---
 pages/index.vue              | 2 +-
 pages/probes.vue             | 4 ++--
 pages/settings.vue           | 2 +-
 pages/tokens.vue             | 6 +++---
 presets/aura/dialog/index.js | 5 ++++-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/components/StartProbe.vue b/components/StartProbe.vue
index 75e8940c..47bedd5d 100644
--- a/components/StartProbe.vue
+++ b/components/StartProbe.vue
@@ -12,11 +12,8 @@
 			@update:model-value="onChangePlatform"
 		/>
 	</div>
-	<!-- "relative" block should wrap "overflow-hidden" block so "Copied!" tooltip is not hiding. -->
 	<div class="relative">
 		<div ref="codeWrapperElem" class="mt-4 box-content overflow-hidden rounded-xl border p-4 pr-0 transition-[height] duration-500 dark:bg-dark-900">
-			<!-- TODO: P1: related ^ all the modals may work better if they are closer to the top, not fully vertically centered -->
-
 			<!-- TODO: P3: collapse/expand thing could be a component -->
 			<div ref="codeElem">
 				<pre v-if="size === 'compact'" class="no-scrollbar flex min-h-[22px] items-center overflow-scroll"><code class="mr-16">{{ commands[platform][size] }}</code></pre>
diff --git a/pages/index.vue b/pages/index.vue
index 042fa2c6..ed6852bf 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -123,7 +123,7 @@
 		<Dialog
 			v-model:visible="adoptProbeDialog"
 			position="top"
-			class="mt-12 min-w-[700px] max-md:min-w-[95%]"
+			class="mt-8 min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
diff --git a/pages/probes.vue b/pages/probes.vue
index 5113de91..a691ca3c 100644
--- a/pages/probes.vue
+++ b/pages/probes.vue
@@ -289,7 +289,7 @@
 		<Dialog
 			v-model:visible="startProbeDialog"
 			position="top"
-			class="mt-12 min-w-[700px] max-md:min-w-[95%]"
+			class="mt-8 min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
@@ -300,7 +300,7 @@
 		<Dialog
 			v-model:visible="adoptProbeDialog"
 			position="top"
-			class="mt-12 max-h-[95vh] min-w-[700px] max-md:min-w-[95%]"
+			class="mt-8 max-h-[95vh] min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
diff --git a/pages/settings.vue b/pages/settings.vue
index 72942b7c..10d66fcd 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -97,7 +97,7 @@
 		<Dialog
 			v-model:visible="deleteDialog"
 			position="top"
-			class="mt-12 min-w-[700px] max-md:min-w-[95%]"
+			class="mt-8 min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
diff --git a/pages/tokens.vue b/pages/tokens.vue
index 3476ec6f..3af298eb 100644
--- a/pages/tokens.vue
+++ b/pages/tokens.vue
@@ -89,7 +89,7 @@
 		<Dialog
 			v-model:visible="tokenDetailsDialog"
 			position="top"
-			class="mt-12 min-w-[700px] max-md:min-w-[95%]"
+			class="mt-8 min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
@@ -107,7 +107,7 @@
 		<Dialog
 			v-model:visible="deleteDialog"
 			position="top"
-			class="mt-12 min-w-[700px] max-md:min-w-[95%]"
+			class="mt-8 min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
@@ -130,7 +130,7 @@
 		<Dialog
 			v-model:visible="regenerateDialog"
 			position="top"
-			class="mt-12 min-w-[700px] max-md:min-w-[95%]"
+			class="mt-8 min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
diff --git a/presets/aura/dialog/index.js b/presets/aura/dialog/index.js
index 6725567e..7070996e 100644
--- a/presets/aura/dialog/index.js
+++ b/presets/aura/dialog/index.js
@@ -115,7 +115,10 @@ export default {
 		],
 	}),
 	transition: ({ props }) => {
-		return props.position === 'top'
+		// Use default animation for the "position": "top"
+		// return props.position === 'top'
+		// eslint-disable-next-line no-constant-condition
+		return false
 			? {
 				enterFromClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active',
 				enterActiveClass: 'transition-all duration-200 ease-out',

From a33ce2aaa6e0258f342945b1f19f34760c28f453 Mon Sep 17 00:00:00 2001
From: Alexey Yarmosh <yarmoshalexey@gmail.com>
Date: Wed, 21 Aug 2024 13:27:01 +0200
Subject: [PATCH 07/12] misc: add copy expand comment

---
 components/StartProbe.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/StartProbe.vue b/components/StartProbe.vue
index 47bedd5d..2ebc44bb 100644
--- a/components/StartProbe.vue
+++ b/components/StartProbe.vue
@@ -14,7 +14,7 @@
 	</div>
 	<div class="relative">
 		<div ref="codeWrapperElem" class="mt-4 box-content overflow-hidden rounded-xl border p-4 pr-0 transition-[height] duration-500 dark:bg-dark-900">
-			<!-- TODO: P3: collapse/expand thing could be a component -->
+			<!-- TODO: P3: collapse/expand thing could be a component, collapse/expand is not smooth if triggered immideately after copy click -->
 			<div ref="codeElem">
 				<pre v-if="size === 'compact'" class="no-scrollbar flex min-h-[22px] items-center overflow-scroll"><code class="mr-16">{{ commands[platform][size] }}</code></pre>
 				<div v-if="size === 'expanded'" class="no-scrollbar overflow-scroll">

From ae3b5819b6fcdc0c69f38c7fb956250a1786d770 Mon Sep 17 00:00:00 2001
From: Alexey Yarmosh <yarmoshalexey@gmail.com>
Date: Wed, 21 Aug 2024 13:56:59 +0200
Subject: [PATCH 08/12] fix: not setting cursor when autocomplete click is on
 the edge

---
 components/TokenDetails.vue        | 3 +--
 presets/aura/autocomplete/index.js | 6 +++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/components/TokenDetails.vue b/components/TokenDetails.vue
index a7f68dec..319b2242 100644
--- a/components/TokenDetails.vue
+++ b/components/TokenDetails.vue
@@ -70,11 +70,10 @@
 			id="origins"
 			v-model="origins"
 			class="mt-2"
-			input-class="h-[22px]"
 			remove-token-icon="pi pi-times"
 			multiple
 			:typeahead="false"
-			:pt="{ inputChip: { id: 'token-details-origins-input-wrapper'} }"
+			:pt="{ inputChip: { id: 'token-details-origins-input-wrapper'}, chipItem: 'my-0.5' }"
 			@update:model-value="updateOrigins"
 			@blur="onAutoCompleteBlur"
 		/>
diff --git a/presets/aura/autocomplete/index.js b/presets/aura/autocomplete/index.js
index db8765ba..8ece1ccf 100644
--- a/presets/aura/autocomplete/index.js
+++ b/presets/aura/autocomplete/index.js
@@ -28,11 +28,11 @@ export default {
 
 			// Flex
 			'flex items-center flex-wrap',
-			'gap-2',
+			'gap-x-2',
 
 			// Spacing
 			'm-0 list-none',
-			'py-1 px-3',
+			'px-3',
 
 			// Size
 			'w-full',
@@ -67,7 +67,7 @@ export default {
 		class: [ 'py-1 px-0 ml-2', 'inline-flex flex-auto' ],
 	},
 	inputChip: {
-		class: 'flex-auto inline-flex pt-1 pb-1',
+		class: 'flex-auto inline-flex h-[35px]',
 	},
 	input: {
 		class: 'border-none outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full',

From 01b6b4062635f171d204f5d360839d7a550e0852 Mon Sep 17 00:00:00 2001
From: Alexey Yarmosh <yarmoshalexey@gmail.com>
Date: Wed, 21 Aug 2024 15:02:09 +0200
Subject: [PATCH 09/12] feat: add CRUD actions confirmation toasts

---
 components/TokenDetails.vue | 12 ++++++++----
 pages/credits.vue           |  6 +++---
 pages/index.vue             |  8 ++++----
 pages/probes.vue            |  6 +++---
 pages/settings.vue          |  8 ++++----
 pages/tokens.vue            | 12 ++++++++----
 utils/send-toast.ts         |  8 +++++++-
 7 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/components/TokenDetails.vue b/components/TokenDetails.vue
index 319b2242..63f99521 100644
--- a/components/TokenDetails.vue
+++ b/components/TokenDetails.vue
@@ -102,7 +102,7 @@
 <script setup lang="ts">
 	import { createItem, customEndpoint, updateItem } from '@directus/sdk';
 	import { formatDate } from '~/utils/date-formatters';
-	import { sendToast } from '~/utils/send-toast';
+	import { sendErrorToast, sendToast } from '~/utils/send-toast';
 
 	const props = defineProps({
 		token: {
@@ -231,7 +231,7 @@
 
 			emit('generate', response.id, token);
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 	};
 
@@ -251,9 +251,11 @@
 				expire: expire.value && expire.value.toISOString().split('T')[0],
 			}));
 
+			sendToast('success', 'Done', 'Token info was successfully updated');
+
 			emit('save');
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 	};
 
@@ -276,9 +278,11 @@
 				value: token,
 			}));
 
+			sendToast('success', 'Done', 'Token was successfully regenerated');
+
 			emit('regenerate', response.id, token);
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 	};
 </script>
diff --git a/pages/credits.vue b/pages/credits.vue
index 4f3e422a..abe0f6a5 100644
--- a/pages/credits.vue
+++ b/pages/credits.vue
@@ -71,7 +71,7 @@
 	import type { PageState } from 'primevue/paginator';
 	import { useAuth } from '~/store/auth';
 	import { formatDateForTable } from '~/utils/date-formatters';
-	import { sendToast } from '~/utils/send-toast';
+	import { sendErrorToast } from '~/utils/send-toast';
 
 	useHead({
 		title: 'Credits -',
@@ -114,7 +114,7 @@
 
 			return { total: total[0]?.amount || 0, additions, deductions };
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 			throw e;
 		}
 	}, { default: () => ({ total: 0, additions: [], deductions: [] }) });
@@ -156,7 +156,7 @@
 
 			creditsChangesCount.value = additionsCount + deductionsCount;
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 
 		loading.value = false;
diff --git a/pages/index.vue b/pages/index.vue
index ed6852bf..b16195d4 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -141,7 +141,7 @@
 	import isEmpty from 'lodash/isEmpty';
 	import CountryFlag from 'vue-country-flag-next';
 	import { useAuth } from '~/store/auth';
-	import { sendToast } from '~/utils/send-toast';
+	import { sendErrorToast } from '~/utils/send-toast';
 
 	useHead({
 		title: 'Overview -',
@@ -159,7 +159,7 @@
 			}));
 			return result;
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 			throw e;
 		}
 	}, { default: () => [] });
@@ -182,7 +182,7 @@
 			}));
 			return result;
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 			throw e;
 		}
 	}, { default: () => [] });
@@ -204,7 +204,7 @@
 			}));
 			return result;
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 			throw e;
 		}
 	}, { default: () => [] });
diff --git a/pages/probes.vue b/pages/probes.vue
index a691ca3c..1c8d4a4d 100644
--- a/pages/probes.vue
+++ b/pages/probes.vue
@@ -320,7 +320,7 @@
 	import CountryFlag from 'vue-country-flag-next';
 	import { useAuth } from '~/store/auth';
 	import { initGoogleMap } from '~/utils/init-google-map';
-	import { sendToast } from '~/utils/send-toast';
+	import { sendErrorToast } from '~/utils/send-toast';
 
 	const config = useRuntimeConfig();
 
@@ -389,7 +389,7 @@
 			probes.value = adoptedProbes;
 			probesCount.value = count;
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 
 		loading.value = false;
@@ -526,7 +526,7 @@
 			const updatedProbe = await $directus.request(updateItem('gp_adopted_probes', id, newData));
 			probes.value = [ ...probes.value.map(probe => probe.id === updatedProbe.id ? updatedProbe : probe) ];
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 	};
 </script>
diff --git a/pages/settings.vue b/pages/settings.vue
index 10d66fcd..6ce4f06c 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -123,7 +123,7 @@
 <script setup lang="ts">
 	import { customEndpoint, deleteUser, updateMe } from '@directus/sdk';
 	import { useAuth } from '~/store/auth';
-	import { sendToast } from '~/utils/send-toast';
+	import { sendErrorToast } from '~/utils/send-toast';
 
 	useHead({
 		title: 'Settings -',
@@ -164,7 +164,7 @@
 
 			toast.add({ severity: 'success', summary: 'Saved', detail: 'All settings saved', life: 4000 });
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 
 		saveLoading.value = false;
@@ -196,7 +196,7 @@
 
 			toast.add({ severity: 'success', summary: 'Synced', detail: 'GitHub data synced', life: 4000 });
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 
 		loadingIconId.value = null;
@@ -210,7 +210,7 @@
 			await $directus.request(deleteUser(user.id!));
 			reloadNuxtApp();
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 	};
 </script>
diff --git a/pages/tokens.vue b/pages/tokens.vue
index 3af298eb..f8168122 100644
--- a/pages/tokens.vue
+++ b/pages/tokens.vue
@@ -158,7 +158,7 @@
 	import type { PageState } from 'primevue/paginator';
 	import { useAuth } from '~/store/auth';
 	import { formatDate, getRelativeTimeString } from '~/utils/date-formatters';
-	import { sendToast } from '~/utils/send-toast';
+	import { sendErrorToast, sendToast } from '~/utils/send-toast';
 
 	useHead({
 		title: 'Tokens -',
@@ -192,7 +192,7 @@
 			tokens.value = gpTokens;
 			tokensCount.value = count;
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 
 		loading.value = false;
@@ -283,8 +283,10 @@
 			expandedRows.value = { [id]: true };
 			tokenToRegenerate.value = null;
 			regenerateDialog.value = false;
+
+			sendToast('success', 'Done', 'Token was successfully regenerated');
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 	};
 
@@ -312,8 +314,10 @@
 			await loadLazyData();
 			tokenToDelete.value = null;
 			deleteDialog.value = false;
+
+			sendToast('success', 'Done', 'Token was deleted');
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 	};
 </script>
diff --git a/utils/send-toast.ts b/utils/send-toast.ts
index 9fe0c3e3..7df50d97 100644
--- a/utils/send-toast.ts
+++ b/utils/send-toast.ts
@@ -1,6 +1,12 @@
+import type { ToastMessageOptions } from 'primevue/toast';
 import { useToastService } from '~/composables/useToastService';
 
-export const sendToast = (error: unknown) => {
+export const sendToast = (severity: ToastMessageOptions['severity'], summary: string, detail: string = '') => {
+	const toastService = useToastService();
+	toastService.add({ severity, summary, detail, life: 5000 });
+};
+
+export const sendErrorToast = (error: unknown) => {
 	const toastService = useToastService();
 	const e = error as DashboardError;
 

From 387902e245cbdb0a48057a5d4960de1210cf7392 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Kol=C3=A1rik?= <martin@kolarik.sk>
Date: Wed, 21 Aug 2024 18:29:21 +0200
Subject: [PATCH 10/12] fix: increase top modals margin

---
 pages/index.vue              | 2 +-
 pages/probes.vue             | 4 ++--
 pages/settings.vue           | 2 +-
 pages/tokens.vue             | 6 +++---
 presets/aura/dialog/index.js | 5 +++--
 5 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index b16195d4..5aab56d5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -123,7 +123,7 @@
 		<Dialog
 			v-model:visible="adoptProbeDialog"
 			position="top"
-			class="mt-8 min-w-[700px] max-md:min-w-[95%]"
+			class="min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
diff --git a/pages/probes.vue b/pages/probes.vue
index 1c8d4a4d..7bcbf634 100644
--- a/pages/probes.vue
+++ b/pages/probes.vue
@@ -289,7 +289,7 @@
 		<Dialog
 			v-model:visible="startProbeDialog"
 			position="top"
-			class="mt-8 min-w-[700px] max-md:min-w-[95%]"
+			class="min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
@@ -300,7 +300,7 @@
 		<Dialog
 			v-model:visible="adoptProbeDialog"
 			position="top"
-			class="mt-8 max-h-[95vh] min-w-[700px] max-md:min-w-[95%]"
+			class="min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
diff --git a/pages/settings.vue b/pages/settings.vue
index 6ce4f06c..66b1c149 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -97,7 +97,7 @@
 		<Dialog
 			v-model:visible="deleteDialog"
 			position="top"
-			class="mt-8 min-w-[700px] max-md:min-w-[95%]"
+			class="min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
diff --git a/pages/tokens.vue b/pages/tokens.vue
index f8168122..168a77d6 100644
--- a/pages/tokens.vue
+++ b/pages/tokens.vue
@@ -89,7 +89,7 @@
 		<Dialog
 			v-model:visible="tokenDetailsDialog"
 			position="top"
-			class="mt-8 min-w-[700px] max-md:min-w-[95%]"
+			class="min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
@@ -107,7 +107,7 @@
 		<Dialog
 			v-model:visible="deleteDialog"
 			position="top"
-			class="mt-8 min-w-[700px] max-md:min-w-[95%]"
+			class="min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
@@ -130,7 +130,7 @@
 		<Dialog
 			v-model:visible="regenerateDialog"
 			position="top"
-			class="mt-8 min-w-[700px] max-md:min-w-[95%]"
+			class="min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
diff --git a/presets/aura/dialog/index.js b/presets/aura/dialog/index.js
index 7070996e..ff40dd9b 100644
--- a/presets/aura/dialog/index.js
+++ b/presets/aura/dialog/index.js
@@ -1,5 +1,5 @@
 export default {
-	root: ({ state }) => ({
+	root: ({ props, state }) => ({
 		class: [
 			// Shape
 			'rounded-lg',
@@ -7,7 +7,8 @@ export default {
 			'border-0',
 
 			// Size
-			'max-h-[90vh]',
+			props.position === 'top' ? 'max-h[calc(95vh-7*16px)]' : 'max-h-[90vh]',
+			{ 'mt-28': props.position === 'top' },
 			'w-[50vw]',
 			'm-0',
 

From 226d9aa1258ee1c26b11b99097843f8f63a304df Mon Sep 17 00:00:00 2001
From: Alexey Yarmosh <yarmoshalexey@gmail.com>
Date: Wed, 21 Aug 2024 18:47:12 +0200
Subject: [PATCH 11/12] fix: autocomplete left padding

---
 presets/aura/autocomplete/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/presets/aura/autocomplete/index.js b/presets/aura/autocomplete/index.js
index 8ece1ccf..e0c3190f 100644
--- a/presets/aura/autocomplete/index.js
+++ b/presets/aura/autocomplete/index.js
@@ -32,7 +32,7 @@ export default {
 
 			// Spacing
 			'm-0 list-none',
-			'px-3',
+			'px-1',
 
 			// Size
 			'w-full',
@@ -67,7 +67,7 @@ export default {
 		class: [ 'py-1 px-0 ml-2', 'inline-flex flex-auto' ],
 	},
 	inputChip: {
-		class: 'flex-auto inline-flex h-[35px]',
+		class: 'flex-auto inline-flex h-[35px] only:pl-2',
 	},
 	input: {
 		class: 'border-none outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full',

From d8b85e8277cc4951d694a94464ddf80c00d47d6c Mon Sep 17 00:00:00 2001
From: Alexey Yarmosh <yarmoshalexey@gmail.com>
Date: Wed, 21 Aug 2024 19:01:22 +0200
Subject: [PATCH 12/12] fix: get mt-2 back

---
 components/AdoptProbe.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/AdoptProbe.vue b/components/AdoptProbe.vue
index 264ff40e..ca221c4d 100644
--- a/components/AdoptProbe.vue
+++ b/components/AdoptProbe.vue
@@ -38,12 +38,13 @@
 					</TabList>
 					<TabPanels ref="tabPanels" class="box-content overflow-hidden transition-[height] duration-500">
 						<TabPanel value="0">
-							<p class="mb-4 text-lg font-bold">Set up your probe</p>
+							<!-- inline-block is required so mt-2 is not collapsed -->
+							<p class="mb-4 mt-2 inline-block text-lg font-bold">Set up your probe</p>
 							<p>First, update your container by running the following commands:</p>
 							<CodeBlock :commands="setUpCommands" class="mt-4"/>
 						</TabPanel>
 						<TabPanel value="1">
-							<p class="mb-4 text-lg font-bold">Join the network</p>
+							<p class="mb-4 mt-2 inline-block text-lg font-bold">Join the network</p>
 							<StartProbe/>
 						</TabPanel>
 					</TabPanels>