Change environment variable handling

.env.example

@@ -1,15 +1,15 @@
 # Your Google Cloud OAuth 2.0 Client ID
-VITE_GOOGLE_CLIENT_ID="YOUR_GOOGLE_CLIENT_ID_HERE"
+PUBLIC_GOOGLE_CLIENT_ID="YOUR_GOOGLE_CLIENT_ID_HERE"
 
 # Face Detection Crop Configuration
 # Crop aspect ratio (width:height) - e.g., 1.0 for square, 1.5 for 3:2 ratio
-VITE_CROP_RATIO=1.0
+PUBLIC_CROP_RATIO=1.0
 
 # Face offset from center (as percentage of crop dimensions)
 # Positive values move the face toward bottom-right, negative toward top-left
-VITE_FACE_OFFSET_X=0.0
+PUBLIC_FACE_OFFSET_X=0.0
-VITE_FACE_OFFSET_Y=-0.1
+PUBLIC_FACE_OFFSET_Y=-0.1
 
 # Crop scale multiplier based on face width
 # 1.0 = crop width equals face width, 2.0 = crop is 2x face width
-VITE_CROP_SCALE=2.5
+PUBLIC_CROP_SCALE=2.5

src/lib/components/PhotoCrop.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { env } from '$env/dynamic/public';
 
 	let { imageUrl, personName, initialCropData, onCropUpdated, onClose } = $props<{
 		imageUrl: string;
@@ -35,7 +36,7 @@
 	let canvasHeight = 400;
 
 	// Get crop ratio from environment
-	const cropRatio = parseFloat(import.meta.env.VITE_CROP_RATIO || '1.0');
+	const cropRatio = parseFloat(env.PUBLIC_CROP_RATIO || '1.0');
 
 	onMount(() => {
 		ctx = canvas.getContext('2d')!;

src/lib/components/wizard/StepGallery.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import { env } from '$env/dynamic/public';
   import { columnMapping, filteredSheetData, currentStep, pictures, cropRects } from '$lib/stores';
   import { downloadDriveImage, isGoogleDriveUrl, createImageObjectUrl } from '$lib/google';
   import PhotoCard from '../PhotoCard.svelte';
@@ -221,10 +222,10 @@
         const faceCenterX = (x1 + (x2 - x1)/2) * scaleX;
         const faceCenterY = (y1 + (y2 - y1) / 2) * scaleY;
         // Load crop config from env
-        const cropRatio = parseFloat(import.meta.env.VITE_CROP_RATIO || '1.0');
+        const cropRatio = parseFloat(env.PUBLIC_CROP_RATIO || '1.0');
-        const offsetX = parseFloat(import.meta.env.VITE_FACE_OFFSET_X || '0.0');
+        const offsetX = parseFloat(env.PUBLIC_FACE_OFFSET_X || '0.0');
-        const offsetY = parseFloat(import.meta.env.VITE_FACE_OFFSET_Y || '0.0');
+        const offsetY = parseFloat(env.PUBLIC_FACE_OFFSET_Y || '0.0');
-        const cropScale = parseFloat(import.meta.env.VITE_CROP_SCALE || '2.5');
+        const cropScale = parseFloat(env.PUBLIC_CROP_SCALE || '2.5');
         // Compute crop size and center
         let cropWidth = faceWidth * cropScale;
         let cropHeight = cropWidth / cropRatio;

src/lib/google.ts

@@ -1,6 +1,5 @@
 import { writable } from 'svelte/store';
-
+import { env } from '$env/dynamic/public';
-const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID;
 
 export const isGoogleApiReady = writable(false);
 export const isSignedIn = writable(false);
@@ -45,8 +44,13 @@ export function initGoogleClient(callback: () => void) {
   const scriptGsi = document.createElement('script');
   scriptGsi.src = 'https://accounts.google.com/gsi/client';
   scriptGsi.onload = () => {
+    const clientId = env.PUBLIC_GOOGLE_CLIENT_ID;
+    if (!clientId) {
+      console.error('PUBLIC_GOOGLE_CLIENT_ID is not set in the environment.');
+      return;
+    }
     tokenClient = google.accounts.oauth2.initTokenClient({
-      client_id: GOOGLE_CLIENT_ID,
+      client_id: clientId,
       scope: 'https://www.googleapis.com/auth/drive.readonly https://www.googleapis.com/auth/spreadsheets.readonly',
       callback: (tokenResponse) => {
         if (tokenResponse?.access_token) {
@@ -140,7 +144,7 @@ export function extractDriveFileId(url: string): string | null {
   ];
   
   for (const pattern of patterns) {
-    const match = url.match(pattern);
+    const match = pattern.exec(url);
     if (match) {
       return match[1];
     }

src/routes/Navbar.Svelte

@@ -1,12 +0,0 @@
-<nav class="border-b border-gray-300 bg-gray-50 p-2 text-gray-900">
-	<div class="container mx-auto max-w-2xl p-2">
-		<div class="flex items-center justify-between">
-			<a href="/private/home" class="text-lg font-bold" aria-label="ScanWave Home">ScanWave</a>
-
-			<ul class="flex space-x-4">
-				<li><a href="/private/scanner">Scanner</a></li>
-				<li><a href="/private/events">Events</a></li>
-			</ul>
-		</div>
-	</div>
-</nav>