update deps, use tailwind v4, add allowed hosts env var

frontend/README.md

@@ -3,3 +3,9 @@
 ## Structure
 
 - Trips, routes, and stops, each have a `Button` and `Modal` component.
+
+## Config
+
+| Environmental Variable | Usage                                                                    | Required |
+| ---------------------- | ------------------------------------------------------------------------ | -------- |
+| `VITE_ALLOWED_HOSTS`   | Comma separate list of domains that gets passed to `server.allowedHosts` | No       |

frontend/package.json

@@ -12,32 +12,32 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.3.1",
-		"@sveltejs/adapter-node": "^5.2.11",
-		"@sveltejs/kit": "^2.15.2",
+		"@sveltejs/adapter-auto": "^4.0.0",
+		"@sveltejs/adapter-node": "^5.2.12",
+		"@sveltejs/kit": "^2.16.1",
 		"@sveltejs/vite-plugin-svelte": "5.0.3",
 		"@tailwindcss/forms": "^0.5.10",
 		"@types/eslint": "^9.6.1",
-		"autoprefixer": "^10.4.20",
-		"eslint": "^9.18.0",
+		"@types/node": "^22.12.0",
+		"eslint": "^9.19.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^2.46.1",
 		"globals": "^15.14.0",
-		"postcss": "^8.5.1",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
-		"svelte": "5.17.4",
+		"svelte": "5.19.5",
 		"svelte-check": "^4.1.4",
-		"tailwindcss": "^3.4.17",
+		"tailwindcss": "^4.0.1",
 		"typescript": "^5.7.3",
-		"typescript-eslint": "^8.20.0",
-		"vite": "^6.0.7"
+		"typescript-eslint": "^8.22.0",
+		"vite": "^6.0.11"
 	},
 	"type": "module",
 	"dependencies": {
 		"@fontsource/inter": "^5.1.1",
+		"@tailwindcss/vite": "^4.0.1",
 		"dayjs": "^1.11.13",
 		"flexsearch": "^0.7.43",
-		"lucide-svelte": "^0.471.0"
+		"lucide-svelte": "^0.474.0"
 	}
 }

frontend/src/app.css

@@ -1,15 +1,26 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer utilities {
-	/* Chrome, Safari and Opera */
-	.scrollbar-hidden::-webkit-scrollbar {
-		display: none;
-	}
+@import 'tailwindcss';
 
-	.scrollbar-hidden {
-		scrollbar-width: none; /* Firefox */
-		-ms-overflow-style: none; /* IE and Edge */
-	}
+@plugin '@tailwindcss/forms';
+
+@theme {
+	--font-*: initial;
+	--font-sans: Inter, sans-serif;
 }
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+/* @layer base {
+	*,
+	::after,
+	::before,
+	::backdrop,
+	::file-selector-button {
+		border-color: var(--color-gray-200, currentColor);
+	}
+} */

frontend/src/lib/List.svelte

@@ -276,7 +276,7 @@
 
 <div class="flex flex-col text-neutral-200 relative w-full z-30">
 	<div
-		class="flex sticky top-0 bg-neutral-900/95 backdrop-blur-sm shadow-lg shadow-black/10 items-center justify-between w-full z-30"
+		class="flex sticky top-0 bg-neutral-900/95 backdrop-blur-xs shadow-lg shadow-black/10 items-center justify-between w-full z-30"
 	>
 		<h1 class="flex gap-2 items-center font-bold text-xl pl-2">
 			<span>
@@ -322,7 +322,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="h-px bg-gradient-to-r from-transparent via-neutral-700/50 to-transparent"></div>
+	<div class="h-px bg-linear-to-r from-transparent via-neutral-700/50 to-transparent"></div>
 
 	<div
 		bind:this={viewport_el}
@@ -339,7 +339,7 @@
 				{#each visible_items as { data, id } (id)}
 					<div
 						bind:offsetHeight={item_heights[data.id]}
-						class="relative w-full list-item will-change-transform bg-neutral-950 border border-neutral-800/50 rounded"
+						class="relative w-full list-item will-change-transform bg-neutral-950 border border-neutral-800/50 rounded-sm"
 					>
 						<button
 							class="w-full flex justify-between items-center p-2 hover:bg-neutral-800/50 active:bg-neutral-700/50 transition-colors duration-200"

frontend/src/lib/Modal.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { CircleX, Share, ClipboardCheck, History, Timer, AlarmClock } from 'lucide-svelte';
-	import { onMount } from 'svelte';
 	import { pushState } from '$app/navigation';
 	import { page } from '$app/state';
 	import {
@@ -161,7 +160,6 @@
 		</button>
 
 		<div class="flex gap-1 items-center text-xs">
-			<!-- TODO: make history button work -->
 			{#if history}
 				<button
 					class:text-neutral-400={!show_previous}
@@ -253,11 +251,11 @@
 		</div>
 	</div>
 {/snippet}
-
+<!-- fixed bottom-0 left-0 right-0 -->
 <dialog
 	bind:this={dialog_el}
 	use:manage_modal
-	class="text-white bg-neutral-900 w-full max-w-[800px] max-h-[95dvh] rounded flex flex-col backdrop:bg-black/50 mb-0 focus:outline-none focus:ring-2 focus:ring-neutral-700"
+	class="m-auto text-white bg-neutral-900 w-full max-w-[800px] max-h-[95dvh] rounded-t-sm flex flex-col backdrop:bg-black/50 mb-0 focus:outline-hidden focus:ring-2 focus:ring-neutral-700"
 >
 	{#if page.state.modal === 'stop'}
 		<StopModal {show_previous} time_format={time_format.value} stop={page.state.data} />

frontend/src/lib/Navbar.svelte

@@ -37,7 +37,9 @@
 	{@render nav_button('Stops')}
 </nav>
 
-<style lang="postcss">
+<style>
+	@reference "../app.css";
+
 	.nav-button {
 		@apply flex flex-col items-center justify-center gap-1
 			 p-2  transition-all duration-200
@@ -52,6 +54,6 @@
 	nav::before {
 		content: '';
 		@apply absolute top-0 left-0 right-0 h-[1px]
-			 bg-gradient-to-r from-transparent via-neutral-700 to-transparent;
+			 bg-linear-to-r from-transparent via-neutral-700 to-transparent;
 	}
 </style>

frontend/src/lib/Route/Button.svelte

@@ -31,7 +31,7 @@
 			{alerts[0].alert_type}
 		</div>
 		{#if alerts.length > 1}
-			<div class="bg-neutral-700 text-neutral-50 rounded p-1">
+			<div class="bg-neutral-700 text-neutral-50 rounded-sm p-1">
 				+{alerts.length - 1}
 			</div>
 		{/if}

frontend/src/lib/Route/Modal.svelte

@@ -181,3 +181,14 @@
 		</div>
 	{/if}
 </div>
+
+<style>
+	.scrollbar-hidden {
+		/* Chrome, Safari and Opera */
+		&::-webkit-scrollbar {
+			display: none;
+		}
+		scrollbar-width: none; /* Firefox */
+		-ms-overflow-style: none; /* IE and Edge */
+	}
+</style>

frontend/src/lib/Stop/Button.svelte

@@ -166,7 +166,7 @@
 				<!-- {@const route_stop_times = stop_times.filter((st) => st.route_id === stop_route.id)} -->
 				{@const route_stop_times = nb_st_by_route.get(stop_route.id) ?? []}
 
-				<div class="flex gap-2 items-center text-wrap text-left rounded p-1">
+				<div class="flex gap-2 items-center text-wrap text-left rounded-sm p-1">
 					<Icon {route} link={false} express={false} />
 					<div class="flex flex-col">
 						<div class="">

frontend/src/lib/Stop/Modal.svelte

@@ -126,7 +126,7 @@
 				/>
 			{/each}
 			<!-- {#if route_stops.length > 5} -->
-			<div class="font-semibold rounded bg-neutral-700 p-1">+{main_rs.length - 5}</div>
+			<div class="font-semibold rounded-sm bg-neutral-700 p-1">+{main_rs.length - 5}</div>
 			<!-- {/if} -->
 		{:else}
 			{#each route_stops as route}
@@ -164,7 +164,7 @@
 		{#each stop.data.transfers as transfer}
 			{@const transfer_stop = page.data.stops[transfer] as Stop<'train'>}
 			<button
-				class="flex rounded bg-neutral-800 shadow-2xl gap-1 p-1 items-center transition-colors duration-200 hover:bg-neutral-700 active:bg-neutral-900"
+				class="flex rounded-sm bg-neutral-800 shadow-2xl gap-1 p-1 items-center transition-colors duration-200 hover:bg-neutral-700 active:bg-neutral-900"
 				onclick={() =>
 					pushState('', { modal: 'stop', data: JSON.parse(JSON.stringify(transfer_stop)) })}
 			>

frontend/src/lib/Trip/Modal.svelte

@@ -119,7 +119,7 @@
 					}
 				}}
 				aria-label="Show transfers at stop"
-				class="bg-neutral-800 z-20 absolute left-0 top-[50%] -translate-y-1/2 h-[95%] rounded"
+				class="bg-neutral-800 z-20 absolute left-0 top-[50%] -translate-y-1/2 h-[95%] rounded-sm"
 			>
 				<div class="flex items-center mx-1">
 					<!-- Transfers -->

frontend/src/lib/Trip/Transfers.svelte

@@ -68,7 +68,7 @@
 				{@const route = page.data.routes[st.trip.route_id]}
 				<button
 					onclick={() => pushState('', { modal: 'trip', data: st.trip })}
-					class="transition-colors duration-200 flex rounded bg-neutral-800 shadow-2xl gap-1 p-1 items-center hover:bg-neutral-700 active:bg-neutral-900"
+					class="transition-colors duration-200 flex rounded-sm bg-neutral-800 shadow-2xl gap-1 p-1 items-center hover:bg-neutral-700 active:bg-neutral-900"
 				>
 					<Icon
 						{route}

frontend/src/routes/+layout.svelte

@@ -176,8 +176,8 @@
 </main>
 <Navbar />
 
-<style lang="postcss">
+<style>
 	:global(body) {
-		@apply bg-neutral-900;
+		background-color: var(--color-neutral-900);
 	}
 </style>

frontend/src/routes/+page.svelte

@@ -236,7 +236,9 @@
 	</div>
 </div>
 
-<style lang="postcss">
+<style>
+	@reference "../app.css";
+
 	.locate-button {
 		@apply relative flex items-center justify-center
 			 p-1 rounded-lg

frontend/src/routes/stops/+page.svelte

@@ -63,7 +63,7 @@
 		train_data={train_stops}
 		pin_rune={stop_pins_rune}
 		auto_scroll
-		class="max-h-[calc(100dvh-13.5rem)] flex-grow"
+		class="max-h-[calc(100dvh-13.5rem)] grow"
 		bind:selected_tab
 		height_calc={calculate_stop_height}
 	/>
@@ -82,7 +82,7 @@
 				class="w-full h-12 pl-10 pr-10
 			   text-neutral-200
 			   bg-neutral-900
-			   backdrop-blur-sm
+			   backdrop-blur-xs
 			   rounded
 			   border border-neutral-800/50
 			   shadow-lg shadow-black/10
@@ -110,7 +110,7 @@
 	</div>
 </div>
 
-<style lang="postcss">
+<style>
 	/* .search-stops {
 		background-image: url('/search.svg');
 		background-position: 10px 10px;

frontend/vite.config.ts

@@ -1,15 +1,23 @@
 import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig, loadEnv } from 'vite';
 
-export default defineConfig({
-	plugins: [sveltekit()],
-	server: {
-		proxy: {
-			'/api': {
-				target: 'http://localhost:3055',
-				changeOrigin: true,
-				rewrite: (path) => path.replace(/^\/api/, '')
-			}
+export default defineConfig(({ mode }) => {
+	const env = loadEnv(mode, process.cwd());
+	const allowedHosts = env.VITE_ALLOWED_HOSTS?.split(',');
+
+	return {
+		plugins: [tailwindcss(), sveltekit()],
+		server: {
+			proxy: {
+				'/api': {
+					target: 'http://localhost:3055',
+					changeOrigin: true,
+					rewrite: (path) => path.replace(/^\/api/, '')
+				}
+			},
+			allowedHosts
+			// : allowedHosts.length ? allowedHosts : undefined
 		}
-	}
+	};
 });