Merge pull request #18 from jsdelivr/todos-2.2

feat: address TODO comments 2

assets/css/global.css

@@ -69,3 +69,9 @@ input[disabled], textarea[disabled], select[disabled='disabled'] {
 	opacity: 1;
 	color: var(--text-bluegray-500);
 }
+
+@layer classes {
+	.page-title {
+		@apply text-2xl font-bold
+	}
+}

components/CodeBlock.vue

@@ -1,20 +1,9 @@
 <template>
 	<div class="relative rounded-xl border bg-surface-0 p-4 pr-0 dark:bg-dark-900">
+		<CopyButton :content="props.commands"/>
 		<div class="no-scrollbar overflow-scroll">
 			<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
-				icon="pi pi-copy"
-				severity="secondary"
-				outlined
-				aria-label="Copy"
-				@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>
 </template>
 
@@ -25,13 +14,4 @@
 			default: () => [],
 		},
 	});
-
-	const copyTooltip = ref(false);
-	const copyCommand = async () => {
-		const content = props.commands.map(parts => parts.join('')).join('\n');
-
-		await navigator.clipboard.writeText(content);
-		copyTooltip.value = true;
-		setTimeout(() => copyTooltip.value = false, 1000);
-	};
 </script>

components/CopyButton.vue

@@ -0,0 +1,41 @@
+<template>
+	<div class="!absolute right-2 top-2">
+		<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>
+</template>
+
+<script setup lang="ts">
+	const props = defineProps({
+		content: {
+			type: [
+				String,
+				Array as () => string[] | string[][],
+			],
+			required: true,
+		},
+	});
+
+	const copyTooltip = ref(false);
+	const copyCommand = async () => {
+		let result: string;
+
+		if (Array.isArray(props.content)) {
+			result = props.content.map(parts => Array.isArray(parts) ? parts.join('') : parts).join('\n');
+		} else {
+			result = props.content;
+		}
+
+		await navigator.clipboard.writeText(result);
+		copyTooltip.value = true;
+		setTimeout(() => copyTooltip.value = false, 1000);
+	};
+</script>

components/CreditsChart.vue

@@ -1,5 +1,7 @@
 <template>
-	<Chart type="line" :data="chartData" :options="chartOptions" class="h-30rem"/>
+	<div class="credits-chart">
+		<Chart type="line" :data="chartData" :options="chartOptions" class="h-40"/>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -185,3 +187,11 @@ Spent: ${changes.value[ctx[0].dataIndex].spent.toLocaleString('en-US')}`,
 		},
 	}));
 </script>
+
+<style>
+	/* https://github.com/chartjs/Chart.js/issues/11005 */
+	.credits-chart canvas {
+		width: 100% !important;
+		height: 100% !important;
+	}
+</style>

components/GPDialog.vue

@@ -0,0 +1,11 @@
+<template>
+	<Dialog
+		position="top"
+		class="min-w-[700px] max-md:min-w-[95%]"
+		modal
+		dismissable-mask
+		:draggable="false"
+	>
+		<slot/>
+	</Dialog>
+</template>

components/StartProbe.vue

@@ -13,27 +13,14 @@
 		/>
 	</div>
 	<div class="relative">
+		<CopyButton :content="commands[platform][size]"/>
 		<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 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>
 	<div class="flex justify-center">
@@ -97,17 +84,4 @@
 		size.value = size.value === 'compact' ? 'expanded' : 'compact';
 		smoothResize(codeWrapperElem.value!, codeElem.value!, codeElem.value!);
 	};
-
-	const copyTooltip = ref(false);
-	const copyCommand = async () => {
-		let content = commands[platform.value][size.value];
-
-		if (Array.isArray(content)) {
-			content = content.map(parts => parts.join('')).join('\n');
-		}
-
-		await navigator.clipboard.writeText(content);
-		copyTooltip.value = true;
-		setTimeout(() => copyTooltip.value = false, 1000);
-	};
 </script>

components/TokenCalendar.vue

@@ -2,19 +2,19 @@
 	<div>
 		<DatePicker
 			:min-date="new Date()"
-			:model-value="value"
+			:model-value="props.value"
 			inline
 			prev-icon="pi pi-arrow-left"
 			next-icon="pi pi-arrow-right"
-			@update:model-value="(date: Date) => emit('change', date)"
+			@update:model-value="(date) => emit('change', date || null)"
 		/>
 	</div>
 </template>
 
 <script setup lang="ts">
-	defineProps({
+	const props = defineProps({
 		value: {
-			type: [ Date, null, undefined ],
+			type: Object as () => Date | null,
 			default: null,
 		},
 	});

layouts/default.vue

@@ -58,12 +58,12 @@
 						</div>
 					</template>
 
-					<NuxtLink active-class="active" class="sidebar-link" to="/" @click="mobileSidebar = false"><i class="pi pi-home pl-4 pr-3 text-lg text-bluegray-400"/>Overview</NuxtLink>
-					<NuxtLink active-class="active" class="sidebar-link" to="/probes" @click="mobileSidebar = false"><nuxt-icon class="pi pl-4 pr-3 text-lg text-bluegray-400" name="probe"/>Probes</NuxtLink>
-					<NuxtLink active-class="active" class="sidebar-link" to="/credits" @click="mobileSidebar = false"><nuxt-icon class="pi pl-4 pr-3 text-lg text-bluegray-400" name="coin"/>Credits</NuxtLink>
-					<NuxtLink active-class="active" class="sidebar-link" to="/tokens" @click="mobileSidebar = false"><i class="pi pi-database pl-4 pr-3 text-lg text-bluegray-400"/>Tokens</NuxtLink>
-					<NuxtLink active-class="active" class="sidebar-link" to="/settings" @click="mobileSidebar = false"><i class="pi pi-cog pl-4 pr-3 text-lg text-bluegray-400"/>Settings</NuxtLink>
-					<button active-class="active" class="sidebar-link" @click="auth.logout"><i class="pi pi-power-off pl-4 pr-3 text-lg text-bluegray-400"/>Sign out</button>
+					<NuxtLink active-class="active" class="sidebar-link" to="/" @click="mobileSidebar = false"><i class="pi pi-home sidebar-link-icon"/>Overview</NuxtLink>
+					<NuxtLink active-class="active" class="sidebar-link" to="/probes" @click="mobileSidebar = false"><nuxt-icon class="pi sidebar-link-icon" name="probe"/>Probes</NuxtLink>
+					<NuxtLink active-class="active" class="sidebar-link" to="/credits" @click="mobileSidebar = false"><nuxt-icon class="pi sidebar-link-icon" name="coin"/>Credits</NuxtLink>
+					<NuxtLink active-class="active" class="sidebar-link" to="/tokens" @click="mobileSidebar = false"><i class="pi pi-database sidebar-link-icon"/>Tokens</NuxtLink>
+					<NuxtLink active-class="active" class="sidebar-link" to="/settings" @click="mobileSidebar = false"><i class="pi pi-cog sidebar-link-icon"/>Settings</NuxtLink>
+					<button active-class="active" class="sidebar-link" @click="auth.logout"><i class="pi pi-power-off sidebar-link-icon"/>Sign out</button>
 					<div class="flex flex-col border-t">
 						<NuxtLink class="ml-6 mt-4 text-bluegray-600 no-underline hover:underline dark:text-bluegray-100" to="https://www.jsdelivr.com/" target="_blank">
 							<i class="pi pi-external-link text-bluegray-300"/>
@@ -98,10 +98,10 @@
 		</header>
 
 		<aside class="flex flex-col border-r bg-surface-100 p-4 max-lg:hidden dark:bg-dark-700">
-			<NuxtLink active-class="active" class="sidebar-link" to="/"><i class="pi pi-home pl-4 pr-3 text-lg text-bluegray-400"/>Overview</NuxtLink>
-			<NuxtLink active-class="active" class="sidebar-link" to="/probes"><nuxt-icon class="pi pl-4 pr-3 text-lg text-bluegray-400" name="probe"/>Probes</NuxtLink>
-			<NuxtLink active-class="active" class="sidebar-link" to="/credits"><nuxt-icon class="pi pl-4 pr-3 text-lg text-bluegray-400" name="coin"/>Credits</NuxtLink>
-			<NuxtLink active-class="active" class="sidebar-link" to="/tokens"><i class="pi pi-database pl-4 pr-3 text-lg text-bluegray-400"/>Tokens</NuxtLink>
+			<NuxtLink active-class="active" class="sidebar-link" to="/"><i class="pi pi-home sidebar-link-icon"/>Overview</NuxtLink>
+			<NuxtLink active-class="active" class="sidebar-link" to="/probes"><nuxt-icon class="pi sidebar-link-icon" name="probe"/>Probes</NuxtLink>
+			<NuxtLink active-class="active" class="sidebar-link" to="/credits"><nuxt-icon class="pi sidebar-link-icon" name="coin"/>Credits</NuxtLink>
+			<NuxtLink active-class="active" class="sidebar-link" to="/tokens"><i class="pi pi-database sidebar-link-icon"/>Tokens</NuxtLink>
 			<div class="mt-auto rounded-xl border bg-surface-0 p-6 dark:border-dark-400 dark:bg-dark-500">
 				<p class="mb-2 font-bold">Sponsorship</p>
 				<p class="mb-6">Support the development of our products by becoming a sponsor.</p>
@@ -110,7 +110,7 @@
 				</NuxtLink>
 			</div>
 		</aside>
-		<div class="max-lg:overflow-x-scroll">
+		<div class="overflow-auto">
 			<slot/>
 		</div>
 	</section>
@@ -219,6 +219,10 @@
 		box-sizing: border-box;
 	}
 
+	.sidebar-link-icon {
+		@apply pl-4 pr-3 text-lg text-bluegray-400;
+	}
+
 	.dark .sidebar-link {
 		color: var(--p-surface-0);
 	}

nuxt.config.ts

@@ -47,8 +47,7 @@ export default defineNuxtConfig({
 	},
 	tailwindcss: {},
 	typescript: {
-		// TODO: P2: fix and uncomment.
-		// typeCheck: 'build',
+		typeCheck: 'build',
 	},
 	$development: {
 		runtimeConfig: {

package.json

@@ -30,7 +30,7 @@
 		"nuxt-icons": "^3.2.1",
 		"pinia": "^2.2.1",
 		"primeicons": "^7.0.0",
-		"primevue": "^4.0.4",
+		"primevue": "^4.0.5",
 		"tailwindcss": "^3.4.9",
 		"tailwindcss-primeui": "^0.3.4",
 		"vue": "^3.4.37",
@@ -52,6 +52,7 @@
 		"stylelint": "^14.16.1",
 		"stylelint-config-tailwindcss": "^0.0.7",
 		"typescript": "^5.5.4",
+		"vite": "^5.4.2",
 		"vue-tsc": "^2.0.29"
 	},
 	"lint-staged": {

pages/credits.vue

@@ -1,7 +1,7 @@
 <template>
-	<div class="flex min-h-full flex-col p-6" :class="{'min-w-[640px]': creditsChanges.length}">
-		<div class="mb-6 flex">
-			<h1 class="col-span-2 text-2xl font-bold">Credits</h1>
+	<div class="min-h-full p-6" :class="{'min-w-[640px]': creditsChanges.length}">
+		<div class="mb-4 flex">
+			<h1 class="page-title">Credits</h1>
 			<NuxtLink to="https://github.com/sponsors/jsdelivr" tabindex="-1" class="ml-auto" target="_blank" rel="noopener">
 				<Button label="Become a sponsor" icon="pi pi-github"/>
 			</NuxtLink>
@@ -102,7 +102,6 @@
 						date_created: { _gte: '$NOW(-30 day)' },
 					},
 				})),
-				// TODO: P2: let's also drop the "For (the)" prefix from other messages (server side) => "Adopted probe ...", "$10 sponsorship"
 				$directus.request<CreditsDeduction[]>(readItems('gp_credits_deductions', {
 					filter: {
 						user_id: { _eq: user.id },

pages/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="grid grid-cols-2 gap-4 p-6">
-		<h1 class="col-span-2 mb-2 text-2xl font-bold">Overview</h1>
+		<h1 class="page-title col-span-2 mb-2">Overview</h1>
 
 		<div class="rounded-xl border bg-surface-0 max-xl:col-span-2 dark:bg-dark-800">
 			<p class="flex border-b px-6 py-3 font-bold text-bluegray-700 dark:text-dark-0">Summary</p>
@@ -132,18 +132,13 @@
 			</AsyncBlock>
 		</div>
 
-		<Dialog
+		<GPDialog
 			v-model:visible="adoptProbeDialog"
-			position="top"
-			class="min-w-[700px] max-md:min-w-[95%]"
-			modal
-			dismissable-mask
-			:draggable="false"
 			header="Adopt a probe"
 			content-class="!p-0"
 		>
 			<AdoptProbe @cancel="adoptProbeDialog = false" @adopted="refreshNuxtData"/>
-		</Dialog>
+		</GPDialog>
 	</div>
 </template>