feat: Address TODO comments 2

components/AdoptProbe.vue

@@ -37,13 +37,14 @@
 						<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">
+							<!-- 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" class="overflow-auto">
-							<p class="mb-4 mt-2 text-lg font-bold">Join the network</p>
+						<TabPanel value="1">
+							<p class="mb-4 mt-2 inline-block text-lg font-bold">Join the network</p>
 							<StartProbe/>
 						</TabPanel>
 					</TabPanels>

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

components/StartProbe.vue

@@ -12,27 +12,27 @@
 			@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 -->
-
-		<!-- 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>
-			<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 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, 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">
+					<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>

components/TokenDetails.vue

@@ -66,16 +66,16 @@
 		</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 -->
 		<AutoComplete
 			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'}, chipItem: 'my-0.5' }"
 			@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.
@@ -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: {
@@ -175,6 +175,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);
@@ -198,7 +231,7 @@
 
 			emit('generate', response.id, token);
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 	};
 
@@ -218,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);
 		}
 	};
 
@@ -243,9 +278,11 @@
 				value: token,
 			}));
 
+			sendToast('success', 'Done', 'Token was successfully regenerated');
+
 			emit('regenerate', response.id, token);
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 	};
 </script>

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;

pages/index.vue

@@ -122,6 +122,7 @@
 		</div>
 		<Dialog
 			v-model:visible="adoptProbeDialog"
+			position="top"
 			class="min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
@@ -140,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 -',
@@ -158,7 +159,7 @@
 			}));
 			return result;
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 			throw e;
 		}
 	}, { default: () => [] });
@@ -181,7 +182,7 @@
 			}));
 			return result;
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 			throw e;
 		}
 	}, { default: () => [] });
@@ -203,7 +204,7 @@
 			}));
 			return result;
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 			throw e;
 		}
 	}, { default: () => [] });

pages/probes.vue

@@ -288,6 +288,7 @@
 		</div>
 		<Dialog
 			v-model:visible="startProbeDialog"
+			position="top"
 			class="min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
@@ -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="min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
 			:draggable="false"
@@ -318,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();
 
@@ -387,7 +389,7 @@
 			probes.value = adoptedProbes;
 			probesCount.value = count;
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 
 		loading.value = false;
@@ -524,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>

pages/settings.vue

@@ -96,6 +96,7 @@
 		<!-- 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"
+			position="top"
 			class="min-w-[700px] max-md:min-w-[95%]"
 			modal
 			dismissable-mask
@@ -122,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 -',
@@ -163,7 +164,7 @@
 
 			toast.add({ severity: 'success', summary: 'Saved', detail: 'All settings saved', life: 4000 });
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 
 		saveLoading.value = false;
@@ -195,7 +196,7 @@
 
 			toast.add({ severity: 'success', summary: 'Synced', detail: 'GitHub data synced', life: 4000 });
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 
 		loadingIconId.value = null;
@@ -209,7 +210,7 @@
 			await $directus.request(deleteUser(user.id!));
 			reloadNuxtApp();
 		} catch (e) {
-			sendToast(e);
+			sendErrorToast(e);
 		}
 	};
 </script>