refactor: update component naming and imports

app/components/AsyncBlock.vue → app/components/async/AsyncBlock.vue

@@ -1,6 +1,6 @@
 <template>
-	<BlockLoading v-if="status === 'pending'"/>
-	<BlockError v-else-if="status === 'error'"/>
+	<AsyncBlockLoading v-if="status === 'pending'"/>
+	<AsyncBlockError v-else-if="status === 'error'"/>
 
 	<div v-else>
 		<slot/>

app/components/credits/CreditsFilters.vue

@@ -31,7 +31,7 @@
 	import debounce from 'lodash/debounce';
 	import isEqual from 'lodash/isEqual';
 	import { FIELD_LABELS, TYPE_REASONS, useCreditsFilters } from '~/composables/useCreditsFilters';
-	import { buildNodesByKey, renderTreeSelectValue } from '~/utils/tree-select.ts';
+	import { buildNodesByKey, renderTreeSelectValue } from '~/utils/tree-select';
 
 	const { filter, onParamChange, key: creditsFilterKey } = useCreditsFilters();
 

app/components/AdoptProbe.vue → app/components/gp-dialog/content/AdoptProbe.vue

@@ -107,11 +107,11 @@
 							<!-- inline-block is required so mt-2 is not collapsed -->
 							<p class="mb-4 mt-2 inline-block text-lg font-bold">Configure the probe</p>
 							<p>Recreate the container by running the following commands. The new container will be automatically bound to your account.</p>
-							<StartProbeCommands :adopt="true" :recreate="true"/>
+							<ProbeStartCommands :adopt="true" :recreate="true"/>
 						</TabPanel>
 						<TabPanel value="1">
 							<p class="mb-4 mt-2 inline-block text-lg font-bold">Join the network</p>
-							<StartProbe :adopt="true"/>
+							<GpDialogContentStartProbe :adopt="true"/>
 						</TabPanel>
 					</TabPanels>
 				</Tabs>

app/components/StartProbe.vue → app/components/gp-dialog/content/StartProbe.vue

@@ -1,6 +1,6 @@
 <template>
 	<p>To join the Globalping probe network, all you have to do is run our container.</p>
-	<StartProbeCommands class="my-4" :adopt="props.adopt"/>
+	<ProbeStartCommands class="my-4" :adopt="props.adopt"/>
 	<p>Once the container starts, you become part of the global community that powers the Globalping Platform. The container works on both x86 and ARM architectures.</p>
 </template>
 

app/components/UpdateProbe.vue → app/components/gp-dialog/content/UpdateProbe.vue

@@ -1,5 +1,5 @@
 <template>
 	<p>To update your probe, all you have to do is recreate the container.</p>
-	<StartProbeCommands class="my-4" :adopt="true" :recreate="true"/>
+	<ProbeStartCommands class="my-4" :adopt="true" :recreate="true"/>
 	<p>Once this is done, your probe will be updated and ready to handle new measurements.</p>
 </template>

app/components/probe/LocationInput.vue

@@ -42,7 +42,7 @@
 		<div
 			class="relative flex h-full grow items-center rounded-md border border-[#D1D5DB] bg-white focus:z-10 focus:ring-1 focus:ring-primary sm:rounded-l-none sm:border-l-0 dark:border-dark-600 dark:bg-dark-800"
 		>
-			<CityAutoComplete
+			<ProbeCityAutocomplete
 				v-model="editedLocation"
 				v-model:input-ref="inputCityRef"
 				:dirty="isDirty"

app/components/probe/TabDetails.vue

@@ -99,7 +99,7 @@
 			header="Delete probe"
 			aria-label="Remove a probe dialog"
 		>
-			<DeleteProbes :probes="[ probe ]" @cancel="deleteDialog = false" @success="onDeleteSuccess"/>
+			<GpDialogContentDeleteProbes :probes="[ probe ]" @cancel="deleteDialog = false" @success="onDeleteSuccess"/>
 		</GPDialog>
 	</div>
 </template>

app/components/probe/TabLogs.vue

@@ -5,7 +5,7 @@
 				<span v-if="logs.length" class="font-bold">
 					Showing {{logs.length}} <span class="hidden sm:inline">most recent</span> {{pluralize('log', logs.length)}}.
 				</span>
-				<LogLoader v-else-if="enabled && !showLargeLoader"/>
+				<ProbeLogLoader v-else-if="enabled && !showLargeLoader"/>
 				<label
 					class="ml-auto flex cursor-pointer select-none items-center justify-end gap-2 whitespace-nowrap rounded-md border border-gray-500 px-2 py-1 duration-200 dark:border-gray-400"
 					:class="{
@@ -52,7 +52,7 @@
 					</span>
 				</span>
 				<div v-if="logs.length" class="h-fit px-1 py-2">
-					<LogLoader v-if="enabled"/>
+					<ProbeLogLoader v-if="enabled"/>
 					<span v-else class="block size-1.5"/>
 				</div>
 			</div>
@@ -63,7 +63,6 @@
 
 <script setup lang="ts">
 	import throttle from 'lodash/throttle';
-	import LogLoader from '~/components/probe/LogLoader.vue';
 	import { useErrorToast } from '~/composables/useErrorToast';
 	import { formatTechnicalDateTime } from '~/utils/date-formatters';
 	import { pluralize } from '~/utils/pluralize';

app/components/probe/ProbeFilters/ProbeListFilters.vue → app/components/probe/filters/ProbeFiltersDesktop.vue

@@ -55,7 +55,7 @@
 			</Button>
 
 			<Popover ref="adminOptsRef" class="w-fit gap-4 p-4 [&>*]:border-none" role="dialog">
-				<AdminFilterSettings/>
+				<ProbeFiltersAdminOnly/>
 			</Popover>
 		</div>
 	</div>
@@ -64,7 +64,6 @@
 <script setup lang="ts">
 	import { aggregate } from '@directus/sdk';
 	import debounce from 'lodash/debounce';
-	import AdminFilterSettings from '~/components/probe/ProbeFilters/AdminFilterSettings.vue';
 	import { useErrorToast } from '~/composables/useErrorToast';
 	import { STATUS_MAP, type StatusCode, useProbeFilters } from '~/composables/useProbeFilters';
 	import { useAuth } from '~/store/auth';

app/components/probe/ProbeFilters/MobileProbeListFilters.vue → app/components/probe/filters/ProbeFiltersMobile.vue

@@ -85,7 +85,7 @@
 			</div>
 		</div>
 
-		<AdminFilterSettings v-if="auth.adminMode" v-model:filter="draftFilter"/>
+		<ProbeFiltersAdminOnly v-if="auth.adminMode" v-model:filter="draftFilter"/>
 
 		<div class="mt-4 flex justify-end gap-2">
 			<Button label="Cancel" severity="secondary" text @click="emit('cancel')"/>
@@ -97,7 +97,6 @@
 <script setup lang="ts">
 	import { aggregate } from '@directus/sdk';
 	import debounce from 'lodash/debounce';
-	import AdminFilterSettings from '~/components/probe/ProbeFilters/AdminFilterSettings.vue';
 	import { useErrorToast } from '~/composables/useErrorToast';
 	import { type StatusCode, SORTABLE_FIELDS, STATUS_MAP, useProbeFilters } from '~/composables/useProbeFilters';
 	import { useAuth } from '~/store/auth';

app/pages/credits.vue

@@ -86,7 +86,7 @@
 					No entries match the filter.
 				</p>
 				<AsyncRow v-for="(creditChange, index) in creditsChanges" v-else :key="index" :loading="loading">
-					<CreditItem :credit-change="creditChange"/>
+					<ListItemCredits :credit-change="creditChange"/>
 				</AsyncRow>
 			</div>
 			<Paginator
@@ -114,7 +114,7 @@
 			content-class="!p-0"
 			size="w-[700px]"
 		>
-			<AddCredits
+			<GpDialogContentAddCredits
 				@cancel="creditsDialog = false"
 				@adopt-a-probe="() => {
 					creditsDialog = false;
@@ -129,14 +129,13 @@
 			content-class="!p-0"
 			size="large"
 		>
-			<AdoptProbe @cancel="adoptProbeDialog = false" @adopted="refreshNuxtData"/>
+			<GpDialogContentAdoptProbe @cancel="adoptProbeDialog = false" @adopted="refreshNuxtData"/>
 		</GPDialog>
 	</div>
 </template>
 
 <script setup lang="ts">
 	import { aggregate, customEndpoint, readItems } from '@directus/sdk';
-	import CreditItem from '~/components/list-items/CreditItem.vue';
 	import { computedDebounced } from '~/composables/computedDebounced';
 	import { usePagination } from '~/composables/pagination';
 	import { useCreditsFilters } from '~/composables/useCreditsFilters';

app/pages/index.vue

@@ -151,7 +151,7 @@
 			content-class="!p-0"
 			size="large"
 		>
-			<AdoptProbe @cancel="adoptProbeDialog = false" @adopted="refreshNuxtData"/>
+			<GpDialogContentAdoptProbe @cancel="adoptProbeDialog = false" @adopted="refreshNuxtData"/>
 		</GPDialog>
 
 		<GPDialog
@@ -161,7 +161,7 @@
 			content-class="!p-0"
 			size="w-[700px]"
 		>
-			<AddCredits
+			<GpDialogContentAddCredits
 				@cancel="creditsDialog = false"
 				@adopt-a-probe="() => {
 					creditsDialog = false;

app/pages/login.vue

@@ -42,7 +42,7 @@
 			content-class="!p-0"
 			size="w-[700px]"
 		>
-			<AddCredits @cancel="addCreditsDialog = false"/>
+			<GpDialogContentAddCredits @cancel="addCreditsDialog = false"/>
 		</GPDialog>
 	</section>
 </template>

app/pages/probes/[id].vue

@@ -119,7 +119,7 @@
 			header="Update a probe"
 			size="large"
 		>
-			<UpdateProbe/>
+			<GpDialogContentUpdateProbe/>
 		</GPDialog>
 	</div>
 </template>

app/pages/probes/index.vue

@@ -41,7 +41,7 @@
 					<template #header>
 						<div class="flex w-full items-center">
 							<h3 class="px-2">List of probes</h3>
-							<ProbeListFilters/>
+							<ProbeFiltersDesktop/>
 						</div>
 					</template>
 
@@ -99,7 +99,7 @@
 						<template #body="slotProps">
 							<AsyncCell :loading="loading">
 								<NuxtLink :to="`/probes/${slotProps.data.id}`" class="flex h-full items-center">
-									<TagsList :tags="getAllTags(slotProps.data)" :wrapper="desktopTagsWrapperRef"/>
+									<ProbeTagsList :tags="getAllTags(slotProps.data)" :wrapper="desktopTagsWrapperRef"/>
 								</NuxtLink>
 							</AsyncCell>
 						</template>
@@ -141,7 +141,7 @@
 							ref="mobileFiltersRef"
 							class="!left-1/2 w-[95%] !-translate-x-1/2 !transform p-6 [&>*]:border-none"
 							role="dialog">
-							<MobileProbeListFilters
+							<ProbeFiltersMobile
 								@apply="() => mobileFiltersRef.toggle()"
 								@cancel="mobileFiltersRef.hide()"
 							/>
@@ -179,7 +179,7 @@
 												<span>{{ probe.version }}</span>
 											</div>
 											<div>
-												<TagsList :tags="getAllTags(probe)"/>
+												<ProbeTagsList :tags="getAllTags(probe)"/>
 											</div>
 										</div>
 									</NuxtLink>
@@ -244,38 +244,35 @@
 			header="Start a probe"
 			size="large"
 		>
-			<StartProbe/>
+			<GpDialogContentStartProbe/>
 		</GPDialog>
 		<GPDialog
 			v-model:visible="adoptProbeDialog"
 			header="Adopt a probe"
 			content-class="!p-0"
 			size="large"
 		>
-			<AdoptProbe @cancel="adoptProbeDialog = false" @adopted="refresh"/>
+			<GpDialogContentAdoptProbe @cancel="adoptProbeDialog = false" @adopted="refresh"/>
 		</GPDialog>
 		<GPDialog
 			v-model:visible="deleteProbesDialog"
 			:header="`Delete ${pluralize('probe', selectedProbes.length)}`"
 		>
-			<DeleteProbes :probes="selectedProbes" @cancel="deleteProbesDialog = false" @success="onDeleteSuccess"/>
+			<GpDialogContentDeleteProbes :probes="selectedProbes" @cancel="deleteProbesDialog = false" @success="onDeleteSuccess"/>
 		</GPDialog>
 		<GPDialog
 			view-name="update-a-probe"
 			header="Update a probe"
 			size="large"
 		>
-			<UpdateProbe/>
+			<GpDialogContentUpdateProbe/>
 		</GPDialog>
 	</div>
 </template>
 
 <script setup lang="ts">
 	import { aggregate, readItems } from '@directus/sdk';
 	import CountryFlag from 'vue-country-flag-next';
-	import BigProbeIcon from '~/components/BigProbeIcon.vue';
-	import MobileProbeListFilters from '~/components/probe/ProbeFilters/MobileProbeListFilters.vue';
-	import ProbeListFilters from '~/components/probe/ProbeFilters/ProbeListFilters.vue';
 	import { computedDebounced } from '~/composables/computedDebounced';
 	import { useGoogleMaps } from '~/composables/maps';
 	import { usePagination } from '~/composables/pagination';

app/pages/tokens.vue

@@ -97,7 +97,7 @@
 							<CodeBlock data-testid="token-value" :commands="[[generatedToken!.value]]"/>
 						</div>
 						<AsyncRow v-for="token in tokens" :key="token.id" :loading="loadingTokens">
-							<TokenItem
+							<ListItemTokens
 								:token="token"
 								@edit="openTokenDetails('edit', token.id)"
 								@regenerate="openRegenerateDialog(token.id)"
@@ -166,7 +166,7 @@
 						<i class="pi pi-spin pi-spinner text-xl"/>
 					</div>
 					<AsyncRow v-for="app in apps" v-else :key="app.id" :loading="loadingApplications">
-						<AppItem
+						<ListItemApps
 							:app="app"
 							@revoke="openRevokeDialog(app.id)"
 						/>
@@ -262,9 +262,6 @@
 
 <script setup lang="ts">
 	import { aggregate, customEndpoint, deleteItem, readItems, updateItem } from '@directus/sdk';
-	import AsyncRow from '~/components/AsyncRow.vue';
-	import AppItem from '~/components/list-items/AppItem.vue';
-	import TokenItem from '~/components/list-items/TokenItem.vue';
 	import { usePagination } from '~/composables/pagination';
 	import { useErrorToast } from '~/composables/useErrorToast';
 	import { useUserFilter } from '~/composables/useUserFilter';

app/plugins/05.setMetadata.ts

@@ -1,5 +1,5 @@
 import { customEndpoint } from '@directus/sdk';
-import { useMetadata } from '~/store/metadata.js';
+import { useMetadata } from '~/store/metadata';
 
 export default defineNuxtPlugin(async () => {
 	const metadata = useMetadata();

app/utils/init-google-map.ts

@@ -1,4 +1,4 @@
-import { useAppearance } from '~/store/appearance.js';
+import { useAppearance } from '~/store/appearance';
 
 const MAP_MIN_ZOOM = 1;
 const MAP_MAX_ZOOM = 22;

eslint.config.js

@@ -49,6 +49,14 @@ export default createConfigForNuxt().prepend(
 			],
 		},
 	},
+	{
+		files: [
+			'{app,server}/**/*.{ts,vue}',
+		],
+		rules: {
+			'import/extensions': [ 'error', 'never' ],
+		},
+	},
 	{
 		files: [
 			'**/*.vue',