update root to use dynamic page title

frontend/src/routes/(app)/+layout.server.ts

@@ -5,9 +5,12 @@ export const load = (async (event) => {
 
 	const breadcrumbs = [{ name: 'Home', path: '/' }]
 
+	const page_title = 'Home'
+
 	return {
 		shortener_url: Bun.env.PUBLIC_SHORTENER_URL ?? '',
 		user: user,
 		breadcrumbs,
+		page_title,
 	}
 }) satisfies LayoutServerLoad

frontend/src/routes/(app)/+page.svelte

@@ -8,35 +8,31 @@
 	export let data: PageData
 </script>
 
-<svelte:head>
-	<title>Home</title>
-</svelte:head>
-
-<div class="flex flex-col gap-4 px-10 py-8">
+<div class="flex flex-col gap-4 py-8 px-10">
 	<h2 class="text-2xl font-bold tracking-tight">Projects</h2>
 	<Separator class="" />
 </div>
 
-<div class="flex w-full flex-wrap items-stretch gap-2 px-6">
+<div class="flex flex-wrap gap-2 items-stretch px-6 w-full">
 	{#each data.projects as project}
 		<a href={'/links?project=' + project.uuid}>
 			<Card.Root
-				class="w-[500px] hover:cursor-pointer hover:bg-secondary">
+				class="hover:cursor-pointer w-[500px] hover:bg-secondary">
 				<Card.Header>
-					<Card.Title class="flex items-center gap-2">
+					<Card.Title class="flex gap-2 items-center">
 						{project.name}
 					</Card.Title>
 				</Card.Header>
 				<Card.Content>
-					<div class="flex w-full gap-4">
+					<div class="flex gap-4 w-full">
 						<Button
-							class="flex h-8 items-center justify-center gap-1 rounded bg-secondary text-sm">
+							class="flex gap-1 justify-center items-center h-8 text-sm rounded bg-secondary">
 							<ExternalLink size={20} />
 							{project.shortener.length}
 							Shorteners
 						</Button>
 						<Button
-							class="flex h-8 items-center justify-center gap-1 rounded bg-secondary text-sm">
+							class="flex gap-1 justify-center items-center h-8 text-sm rounded bg-secondary">
 							<BarChart size={20} />
 							{project.shortener.reduce(
 								(curr, shortener) => shortener.visitor.length + curr,

frontend/src/routes/(app)/links/+layout.server.ts

@@ -2,9 +2,13 @@ import type { LayoutServerLoad } from './$types'
 
 export const load = (async (event) => {
 	const { breadcrumbs: parentBreadcrumbs } = await event.parent()
+
 	const breadcrumbs = [
 		...parentBreadcrumbs,
 		{ name: 'Links', path: '/links' },
 	]
-	return { breadcrumbs }
+
+	const page_title = 'Links'
+
+	return { breadcrumbs, page_title }
 }) satisfies LayoutServerLoad

frontend/src/routes/(app)/links/[id]/+page.server.ts

@@ -93,6 +93,8 @@ export const load = (async (event) => {
 		.where(eq(visitorSchema.shortenerId, shortener.id))
 		.groupBy(visitorSchema.deviceType)
 
+	const page_title = 'Shortener | ' + shortener.link
+
 	return {
 		shortener,
 		visitor,
@@ -101,5 +103,6 @@ export const load = (async (event) => {
 		visitorByOS,
 		visitorByDeviceVendor,
 		visitorByDeviceType,
+		page_title,
 	}
 }) satisfies PageServerLoad

frontend/src/routes/(app)/links/[id]/+page.svelte

@@ -98,16 +98,12 @@
 	})
 </script>
 
-<svelte:head>
-	<title>Shortener {data.shortener.link}</title>
-</svelte:head>
-
-<div class="flex min-h-[80px] items-center justify-between p-4">
+<div class="flex justify-between items-center p-4 min-h-[80px]">
 	<div class="text-3xl font-bold">{data.shortener.link}</div>
 </div>
 <Separator />
 
-<div class="flex flex-wrap gap-4 overflow-y-scroll p-4">
+<div class="flex overflow-y-scroll flex-wrap gap-4 p-4">
 	<Card.Root class="w-[700px]">
 		<Card.Header>
 			<Card.Title>Clicks</Card.Title>
@@ -121,7 +117,7 @@
 	<Card.Root class="min-h-[500px] w-[500px]">
 		<Tabs.Root value="country">
 			<Card.Header
-				class="flex w-full flex-row items-center justify-between space-y-0">
+				class="flex flex-row justify-between items-center space-y-0 w-full">
 				<div>
 					<Card.Title>Visitors</Card.Title>
 					<Card.Description
@@ -135,8 +131,8 @@
 			<Card.Content>
 				<Tabs.Content value="country">
 					{#each data.visitorByCountry as visitorByCountry}
-						<div class="flex items-center justify-between">
-							<div class="flex items-center gap-4">
+						<div class="flex justify-between items-center">
+							<div class="flex gap-4 items-center">
 								<img
 									src={`https://flagsapi.com/${visitorByCountry.code}/flat/64.png`}
 									alt="" />
@@ -148,8 +144,8 @@
 				</Tabs.Content>
 				<Tabs.Content value="city">
 					{#each data.visitorByCity as visitorByCity}
-						<div class="flex items-center justify-between">
-							<div class="flex items-center gap-4">
+						<div class="flex justify-between items-center">
+							<div class="flex gap-4 items-center">
 								<img
 									src={`https://flagsapi.com/${visitorByCity.code}/flat/64.png`}
 									alt="" />
@@ -165,7 +161,7 @@
 	<Card.Root class="min-h-[500px] w-[500px]">
 		<Tabs.Root value="vendor">
 			<Card.Header
-				class="flex w-full flex-row items-center justify-between space-y-0">
+				class="flex flex-row justify-between items-center space-y-0 w-full">
 				<div>
 					<Card.Title>Devices</Card.Title>
 					<Card.Description>Devices by Country/City</Card.Description>
@@ -180,8 +176,8 @@
 				<Tabs.Content value="vendor">
 					<div class="flex flex-col gap-6">
 						{#each data.visitorByDeviceVendor as visitorByDeviceVendor}
-							<div class="flex items-center justify-between">
-								<div class="flex items-center gap-4">
+							<div class="flex justify-between items-center">
+								<div class="flex gap-4 items-center">
 									<TabletSmartphone />
 									<div>
 										{visitorByDeviceVendor.vendor ??
@@ -196,8 +192,8 @@
 				<Tabs.Content value="type">
 					<div class="flex flex-col gap-6">
 						{#each data.visitorByDeviceType as visitorByDeviceType}
-							<div class="flex items-center justify-between">
-								<div class="flex items-center gap-4">
+							<div class="flex justify-between items-center">
+								<div class="flex gap-4 items-center">
 									{#if visitorByDeviceType.type === 'mobile'}
 										<Smartphone />
 									{:else if visitorByDeviceType.type === 'tablet'}
@@ -218,8 +214,8 @@
 				<Tabs.Content value="os">
 					<div class="flex flex-col gap-6">
 						{#each data.visitorByOS as visitorByOS}
-							<div class="flex items-center justify-between">
-								<div class="flex items-center gap-4">
+							<div class="flex justify-between items-center">
+								<div class="flex gap-4 items-center">
 									<TabletSmartphone />
 									<div>{visitorByOS.os ?? 'Undefined OS'}</div>
 								</div>

frontend/src/routes/(app)/projects/+layout.server.ts

@@ -6,5 +6,6 @@ export const load = (async (event) => {
 		...parentBreadcrumbs,
 		{ name: 'Projects', path: '/projects' },
 	]
-	return { breadcrumbs }
+	const page_title = 'Projects'
+	return { breadcrumbs, page_title }
 }) satisfies LayoutServerLoad

frontend/src/routes/(app)/projects/+page.svelte

@@ -35,10 +35,6 @@
 	}
 </script>
 
-<svelte:head>
-	<title>Projects</title>
-</svelte:head>
-
 <div class="flex justify-start items-center p-4">
 	<Dialog.Root bind:open={dialogOpen}>
 		<Dialog.Trigger

frontend/src/routes/(app)/settings/+layout.server.ts

@@ -2,9 +2,13 @@ import type { LayoutServerLoad } from './$types'
 
 export const load = (async (event) => {
 	const { breadcrumbs: parentBreadcrumbs } = await event.parent()
+
 	const breadcrumbs = [
 		...parentBreadcrumbs,
 		{ name: 'Settings', path: '/settings' },
 	]
-	return { breadcrumbs }
+
+	const page_title = 'Settings'
+
+	return { breadcrumbs, page_title }
 }) satisfies LayoutServerLoad

frontend/src/routes/(app)/settings/+layout.svelte

@@ -4,10 +4,6 @@
 	import SidebarNav from './(components)/sidebar-nav.svelte'
 </script>
 
-<svelte:head>
-	<title>Settings</title>
-</svelte:head>
-
 <div class="flex overflow-hidden flex-col p-10 h-auto">
 	<div class="space-y-0.5">
 		<h2 class="text-2xl font-bold tracking-tight">Settings</h2>

frontend/src/routes/+layout.svelte

@@ -3,10 +3,11 @@
 	import '../app.postcss'
 	import { ModeWatcher } from 'mode-watcher'
 	import { ProgressBar } from '@prgm/sveltekit-progress-bar'
+	import { page } from '$app/stores'
 </script>
 
 <svelte:head>
-	<title>Link Shortener</title>
+	<title>{$page.data.page_title || 'Link Shortener'}</title>
 </svelte:head>
 
 <ModeWatcher />