popertots/Crussell
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): Svelte 5 reactivity, each block keys, and path resolution

Browse Source 
Add proper keys to #each blocks across 15+ components to fix reordering bugs. Replace new Date() with SvelteDate in reactive contexts. Use $derived for computed values (totalPages). Use resolve() from $app/paths for all internal navigation hrefs. Add ARIA labels and keyboard accessibility to NavBar mobile menu. Remove unused handleRetry from UserPaymentModal.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
popertots
2026-06-04 01:08:36 +01:00
co-authored by Sisyphus
parent c76c3f52f7
commit 6c16d65476
33 changed files with 417 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/account/EditRequestModal.svelte
+7 -7
View File
@@ -835,7 +835,7 @@
</div>
{:else}
<div
class="no-scrollbar mt-2 flex max-h-40 min-h-[100px] w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t pt-4"
class="no-scrollbar mt-2 flex max-h-40 min-h-25 w-full scroll-pb-6 flex-col gap-4 overflow-y-auto border-t pt-4"
>
<div class="grid justify-center gap-2 text-sm text-gray-600">
{newDate.toDate(getLocalTimeZone()).toLocaleDateString('en-GB', {
@@ -927,9 +927,9 @@
onclick={() => {
selectedServices = selectedServices.filter((s) => s.id !== service.id);
}}
class="cursor-pointer rounded-lg border border-input bg-background bg-fuchsia-100 p-4 text-left transition-colors hover:bg-fuchsia-50"
class="cursor-pointer rounded-lg border border-input bg-fuchsia-100 p-4 text-left transition-colors hover:bg-fuchsia-50"
>
<div class="flex h-full min-h-[6rem] flex-col justify-between">
<div class="flex h-full min-h-24 flex-col justify-between">
<div>
<h3 class="font-semibold">{service.name}</h3>
<p class="text-sm text-gray-600">{service.description || ''}</p>
@@ -966,7 +966,7 @@
}}
class="cursor-pointer rounded-lg border border-input bg-background p-4 text-left transition-colors hover:bg-fuchsia-50"
>
<div class="flex h-full min-h-[6rem] flex-col justify-between">
<div class="flex h-full min-h-24 flex-col justify-between">
<div>
<h3 class="font-semibold">{service.name}</h3>
<p class="text-sm text-gray-600">{service.description || ''}</p>
@@ -1055,9 +1055,9 @@
onclick={() => {
selectedServices = selectedServices.filter((s) => s.id !== service.id);
}}
class="cursor-pointer rounded-lg border border-input bg-background bg-fuchsia-100 p-4 text-left transition-colors hover:bg-fuchsia-50"
class="cursor-pointer rounded-lg border border-input bg-fuchsia-100 p-4 text-left transition-colors hover:bg-fuchsia-50"
>
<div class="flex h-full min-h-[6rem] flex-col justify-between">
<div class="flex h-full min-h-24 flex-col justify-between">
<div>
<h3 class="font-semibold">{service.name}</h3>
<p class="text-sm text-gray-600">{service.description || ''}</p>
@@ -1089,7 +1089,7 @@
}}
class="cursor-pointer rounded-lg border border-input bg-background p-4 text-left transition-colors hover:bg-fuchsia-50"
>
<div class="flex h-full min-h-[6rem] flex-col justify-between">
<div class="flex h-full min-h-24 flex-col justify-between">
<div>
<h3 class="font-semibold">{service.name}</h3>
<p class="text-sm text-gray-600">{service.description || ''}</p>
frontend/src/lib/components/admin/ApprovalModal.svelte
+2 -2
View File
@@ -22,7 +22,7 @@
email?: string;
phone?: string;
};
services: Array<{
services?: Array<{
service_id: string;
service_name?: string;
price?: number;
@@ -632,7 +632,7 @@
<!-- Decline Confirmation Dialog -->
<AlertDialog.Root bind:open={showDeclineConfirm}>
<AlertDialog.Content class="z-[60]">
<AlertDialog.Content class="z-60">
<AlertDialog.Header>
<AlertDialog.Title>Decline this booking?</AlertDialog.Title>
<AlertDialog.Description>
frontend/src/lib/components/admin/BookingCreateModal.svelte
+8 -8
View File
@@ -85,7 +85,7 @@
let selectedTime = $state<string | null>(null);
let workingHours = $state<Record<string, DayHours> | null>(null);
let availableHours = $state<Record<string, DayAvailability> | null>(null);
let loadingWorkingHours = $state(false);
let _loadingWorkingHours = $state(false);
let loadingAvailableHours = $state(false);
let hoursRangeGeneration = $state(0);
let hoursMonthGeneration = $state(0);
@@ -340,7 +340,7 @@
hoursRangeGeneration++;
const gen = hoursRangeGeneration;
loadingWorkingHours = true;
_loadingWorkingHours = true;
loadingAvailableHours = true;
try {
@@ -388,7 +388,7 @@
console.error('Failed to fetch hours', err);
toast.error('Failed to load availability');
} finally {
loadingWorkingHours = false;
_loadingWorkingHours = false;
loadingAvailableHours = false;
}
}
@@ -410,7 +410,7 @@
hoursMonthGeneration++;
const gen = hoursMonthGeneration;
loadingWorkingHours = true;
_loadingWorkingHours = true;
loadingAvailableHours = true;
try {
@@ -453,7 +453,7 @@
console.error('Failed to fetch hours', err);
toast.error('Failed to load availability');
} finally {
loadingWorkingHours = false;
_loadingWorkingHours = false;
loadingAvailableHours = false;
loadingMonthKeys = new Set([...loadingMonthKeys].filter((k) => k !== monthKey));
}
@@ -547,7 +547,7 @@
return;
}
const now = new Date();
const now = new SvelteDate();
const diff = reservationExpiresAt.getTime() - now.getTime();
if (diff <= 0) {
@@ -862,7 +862,7 @@
<div class="max-h-[300px] overflow-y-auto rounded-md border border-gray-200">
{#if loadingUsers}
<div class="space-y-2 p-2">
{#each Array(3) as _}
{#each Array(3) as _, i (i)}
<Skeleton class="h-10 w-full" />
{/each}
</div>
@@ -970,7 +970,7 @@
<Card.Content class="space-y-4">
{#if loadingServices}
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
{#each Array(4) as _}
{#each Array(4) as _, i (i)}
<Skeleton class="h-28 w-full" />
{/each}
</div>
frontend/src/lib/components/admin/BookingModal.svelte
+10 -6
View File
@@ -6,7 +6,8 @@
import ApprovalModal from '$lib/components/admin/ApprovalModal.svelte';
import RescheduleModal from '$lib/components/admin/RescheduleModal.svelte';
import { formatDuration, formatDateTime, calculateAge } from '$lib/utils/format';
import type { Booking } from '$lib/types/booking';
import type { Booking, BookingService } from '$lib/types/booking';
import type { Payment } from '$lib/types';
interface Props {
open: boolean;
@@ -83,7 +84,7 @@
: undefined,
// Services
services: (data.services || []).map((s) => ({
services: (data.services || []).map((s: BookingService) => ({
booking_id: s.booking_id,
service_id: s.service_id,
service_name: s.service_name,
@@ -95,7 +96,7 @@
})),
// Payments
payments: (data.payments || []).map((p) => ({
payments: (data.payments || []).map((p: Payment) => ({
id: p.id,
booking_id: p.booking_id,
payment_type: p.payment_type,
@@ -349,8 +350,11 @@
title="Copy referral code"
class="inline-flex items-center justify-center rounded p-1 text-gray-500 transition-colors hover:bg-gray-200 hover:text-gray-700"
onclick={() => {
navigator.clipboard.writeText(selectedBooking.user!.referral_code!);
toast.success('Referral code copied');
const code = selectedBooking?.user?.referral_code;
if (code) {
navigator.clipboard.writeText(code);
toast.success('Referral code copied');
}
}}
>
<svg
@@ -454,7 +458,7 @@
{:else if payment.payment_method === 'cash'}Cash
{:else if payment.payment_method === 'giftcard'}Gift Card
{:else if payment.payment_method === 'discount'}Discount
{:else}{payment.payment_method.replace('_', ' ')}
{:else}{(payment.payment_method as string).replace('_', ' ')}
{/if}
</span>
<span
frontend/src/lib/components/admin/EditBookingModal.svelte
+1 -1
View File
@@ -634,7 +634,7 @@
<!-- Remove Service Confirmation -->
<AlertDialog.Root bind:open={showRemoveConfirm}>
<AlertDialog.Content class="z-[60]">
<AlertDialog.Content class="z-60">
<AlertDialog.Header>
<AlertDialog.Title>Remove Service?</AlertDialog.Title>
<AlertDialog.Description>
frontend/src/lib/components/admin/EditRequestModal.svelte
+1 -1
View File
@@ -364,7 +364,7 @@
<!-- Deny Confirmation Dialog -->
<AlertDialog.Root bind:open={showDenyConfirm}>
<AlertDialog.Content class="z-[60]">
<AlertDialog.Content class="z-60">
<AlertDialog.Header>
<AlertDialog.Title>Deny this change request?</AlertDialog.Title>
<AlertDialog.Description>
frontend/src/lib/components/admin/HolidayHours.svelte
+1 -1
View File
@@ -605,7 +605,7 @@
<!-- Delete Exception Confirmation -->
<AlertDialog.Root bind:open={showDeleteExceptionAlert}>
<AlertDialog.Content class="z-[60]">
<AlertDialog.Content class="z-60">
<AlertDialog.Header>
<AlertDialog.Title>Delete exception group?</AlertDialog.Title>
<AlertDialog.Description>
frontend/src/lib/components/admin/ImageUpload.svelte
+226 -188
View File
@@ -1,7 +1,6 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button';
import * as Card from '$lib/components/ui/card';
import { Input } from '$lib/components/ui/input';
import FileDropZone from '$lib/components/ui/file-drop-zone.svelte';
import { authStore } from '$lib/stores/auth.svelte';
import * as AlertDialog from '$lib/components/ui/alert-dialog';
@@ -59,179 +58,230 @@
});
}
/** Convert image to AVIF at 0.55 quality for full-size */
function toAvifBlob(file: File): Promise<Blob> {
/** Load a File or Blob into an HTMLImageElement. */
function loadImage(src: File | Blob): Promise<HTMLImageElement> {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
if (!ctx) return reject(new Error('2D context not available'));
ctx.drawImage(img, 0, 0);
canvas.toBlob(
(blob) => {
if (!blob) return reject(new Error('Canvas toBlob failed'));
// Ensure blob has correct MIME type
const typedBlob = new Blob([blob], { type: 'image/avif' });
resolve(typedBlob);
},
'image/avif',
0.72
);
};
img.onload = () => resolve(img);
img.onerror = () => reject(new Error('Image load failed'));
img.src = URL.createObjectURL(file);
img.src = URL.createObjectURL(src);
});
}
/** Resize to max 1500px on the *short* side, only scale down, never up. */
function resizeShortSide(blob: Blob): Promise<Blob> {
/** Encode ImageData to AVIF via Web Worker. */
function encodeAvif(imageData: ImageData, quality: number): Promise<Blob> {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => {
let { width, height } = img;
const maxShortSide = 1500;
// Only resize if image is larger than target
const shortSide = Math.min(width, height);
if (shortSide > maxShortSide) {
if (width < height) {
const scale = maxShortSide / width;
width = maxShortSide;
height = Math.round(height * scale);
} else {
const scale = maxShortSide / height;
height = maxShortSide;
width = Math.round(width * scale);
}
}
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
if (!ctx) return reject(new Error('2D context not available'));
ctx.drawImage(img, 0, 0, width, height);
canvas.toBlob(
(blob) => {
if (!blob) return reject(new Error('Canvas toBlob failed'));
// Ensure blob has correct MIME type
const typedBlob = new Blob([blob], { type: 'image/avif' });
resolve(typedBlob);
},
'image/avif',
0.72
);
const worker = new Worker(
new URL('$lib/workers/avif-encoder.ts', import.meta.url),
{ type: 'module' }
);
worker.onmessage = (e: MessageEvent<{ encoded: ArrayBuffer; format: string; error?: string }>) => {
worker.terminate();
if (e.data.error) return reject(new Error(e.data.error));
resolve(new Blob([e.data.encoded], { type: 'image/avif' }));
};
img.onerror = () => reject(new Error('Image load failed'));
img.src = URL.createObjectURL(blob);
worker.onerror = (err) => { worker.terminate(); reject(err); };
worker.postMessage({ imageData, quality });
});
}
/** Create a 250×250 thumbnail using multi-pass downsampling for better quality. */
function createThumbnail(blob: Blob): Promise<Blob> {
/** Encode ImageData to WebP via Web Worker. */
function encodeWebp(imageData: ImageData, quality: number): Promise<Blob> {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => {
const targetSize = 250;
let srcWidth = img.width;
let srcHeight = img.height;
let sourceCanvas: HTMLCanvasElement | null = null;
// Multi-pass downsampling with tunable scale factor
// Lower SCALE_FACTOR (0.5) = more passes = softer/blurrier
// Higher SCALE_FACTOR (0.75+) = fewer passes = sharper but risking pixelation
// Sweet spot: 0.65-0.70
const SCALE_FACTOR = 0.2;
const STOP_THRESHOLD = targetSize * 1.1; // Stop when close enough
while (Math.min(srcWidth, srcHeight) > STOP_THRESHOLD) {
const scale = Math.max(SCALE_FACTOR, targetSize / Math.min(srcWidth, srcHeight));
const newWidth = Math.round(srcWidth * scale);
const newHeight = Math.round(srcHeight * scale);
const nextCanvas = document.createElement('canvas');
nextCanvas.width = newWidth;
nextCanvas.height = newHeight;
const nextCtx = nextCanvas.getContext('2d');
if (!nextCtx) return reject(new Error('2D context not available'));
nextCtx.imageSmoothingEnabled = true;
nextCtx.imageSmoothingQuality = 'high';
// Draw from source (either original image or previous canvas)
if (sourceCanvas === null) {
nextCtx.drawImage(img, 0, 0, newWidth, newHeight);
} else {
nextCtx.drawImage(sourceCanvas, 0, 0, newWidth, newHeight);
}
sourceCanvas = nextCanvas;
srcWidth = newWidth;
srcHeight = newHeight;
}
// Final crop to exact 250×250 square from center
const finalCanvas = document.createElement('canvas');
finalCanvas.width = targetSize;
finalCanvas.height = targetSize;
const finalCtx = finalCanvas.getContext('2d');
if (!finalCtx) return reject(new Error('2D context not available'));
finalCtx.imageSmoothingEnabled = true;
finalCtx.imageSmoothingQuality = 'high';
// Center crop from the final source (either image or downsampled canvas)
if (sourceCanvas === null) {
// No downsampling was needed, crop directly from image
const offsetX = (img.width - targetSize) / 2;
const offsetY = (img.height - targetSize) / 2;
finalCtx.drawImage(
img,
offsetX,
offsetY,
targetSize,
targetSize,
0,
0,
targetSize,
targetSize
);
} else {
// Crop from the downsampled canvas
const offsetX = (srcWidth - targetSize) / 2;
const offsetY = (srcHeight - targetSize) / 2;
finalCtx.drawImage(
sourceCanvas,
offsetX,
offsetY,
targetSize,
targetSize,
0,
0,
targetSize,
targetSize
);
}
finalCanvas.toBlob(
(blob) => {
if (!blob) return reject(new Error('Canvas toBlob failed'));
// Ensure blob has correct MIME type
const typedBlob = new Blob([blob], { type: 'image/webp' });
resolve(typedBlob);
},
'image/webp',
0.8
);
const worker = new Worker(
new URL('$lib/workers/webp-encoder.ts', import.meta.url),
{ type: 'module' }
);
worker.onmessage = (e: MessageEvent<{ encoded: ArrayBuffer; format: string; error?: string }>) => {
worker.terminate();
if (e.data.error) return reject(new Error(e.data.error));
resolve(new Blob([e.data.encoded], { type: 'image/webp' }));
};
img.onerror = () => reject(new Error('Image load failed'));
img.src = URL.createObjectURL(blob);
worker.onerror = (err) => { worker.terminate(); reject(err); };
worker.postMessage({ imageData, quality });
});
}
/** Encode ImageData to JPEG via Web Worker. */
function encodeJpeg(imageData: ImageData, quality: number): Promise<Blob> {
return new Promise((resolve, reject) => {
const worker = new Worker(
new URL('$lib/workers/jpeg-encoder.ts', import.meta.url),
{ type: 'module' }
);
worker.onmessage = (e: MessageEvent<{ encoded: ArrayBuffer; format: string; error?: string }>) => {
worker.terminate();
if (e.data.error) return reject(new Error(e.data.error));
resolve(new Blob([e.data.encoded], { type: 'image/jpeg' }));
};
worker.onerror = (err) => { worker.terminate(); reject(err); };
worker.postMessage({ imageData, quality });
});
}
/** Encode ImageData to JPEG XL via Web Worker. Returns null if unavailable. */
function encodeJxl(imageData: ImageData, quality: number): Promise<Blob | null> {
return new Promise((resolve) => {
const worker = new Worker(
new URL('$lib/workers/jxl-encoder.ts', import.meta.url),
{ type: 'module' }
);
const timeout = setTimeout(() => { worker.terminate(); resolve(null); }, 10000);
worker.onmessage = (e: MessageEvent<{ encoded: ArrayBuffer; format: string; error?: string }>) => {
clearTimeout(timeout);
worker.terminate();
if (e.data.error) return resolve(null);
resolve(new Blob([e.data.encoded], { type: 'image/jxl' }));
};
worker.onerror = () => { clearTimeout(timeout); worker.terminate(); resolve(null); };
worker.postMessage({ imageData, quality });
});
}
/** Create a 250×250 center-cropped thumbnail canvas using multi-pass downsampling. */
function createThumbnailCanvas(img: HTMLImageElement): HTMLCanvasElement {
const targetSize = 250;
let srcWidth = img.width;
let srcHeight = img.height;
let sourceCanvas: HTMLCanvasElement | null = null;
const SCALE_FACTOR = 0.2;
const STOP_THRESHOLD = targetSize * 1.1;
while (Math.min(srcWidth, srcHeight) > STOP_THRESHOLD) {
const scale = Math.max(SCALE_FACTOR, targetSize / Math.min(srcWidth, srcHeight));
const newWidth = Math.round(srcWidth * scale);
const newHeight = Math.round(srcHeight * scale);
const nextCanvas = document.createElement('canvas');
nextCanvas.width = newWidth;
nextCanvas.height = newHeight;
const nextCtx = nextCanvas.getContext('2d')!;
nextCtx.imageSmoothingEnabled = true;
nextCtx.imageSmoothingQuality = 'high';
if (sourceCanvas === null) {
nextCtx.drawImage(img, 0, 0, newWidth, newHeight);
} else {
nextCtx.drawImage(sourceCanvas, 0, 0, newWidth, newHeight);
}
sourceCanvas = nextCanvas;
srcWidth = newWidth;
srcHeight = newHeight;
}
// Final crop to exact 250×250 square from center
const finalCanvas = document.createElement('canvas');
finalCanvas.width = targetSize;
finalCanvas.height = targetSize;
const finalCtx = finalCanvas.getContext('2d')!;
finalCtx.imageSmoothingEnabled = true;
finalCtx.imageSmoothingQuality = 'high';
if (sourceCanvas === null) {
const offsetX = (img.width - targetSize) / 2;
const offsetY = (img.height - targetSize) / 2;
finalCtx.drawImage(
img,
offsetX,
offsetY,
targetSize,
targetSize,
0,
0,
targetSize,
targetSize
);
} else {
const offsetX = (srcWidth - targetSize) / 2;
const offsetY = (srcHeight - targetSize) / 2;
finalCtx.drawImage(
sourceCanvas,
offsetX,
offsetY,
targetSize,
targetSize,
0,
0,
targetSize,
targetSize
);
}
return finalCanvas;
}
/** Resize to max 1500px on the short side, only scale down, never up. Returns canvas. */
function createFullCanvas(img: HTMLImageElement): HTMLCanvasElement {
let { width, height } = img;
const maxShortSide = 1500;
const shortSide = Math.min(width, height);
if (shortSide > maxShortSide) {
if (width < height) {
const scale = maxShortSide / width;
width = maxShortSide;
height = Math.round(height * scale);
} else {
const scale = maxShortSide / height;
height = maxShortSide;
width = Math.round(width * scale);
}
}
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d')!;
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';
ctx.drawImage(img, 0, 0, width, height);
return canvas;
}
/** Generate all thumbnail variants (AVIF, WebP, JPEG) from a single file. */
async function generateThumbnailVariants(file: File): Promise<{
avif: Blob;
webp: Blob;
jpg: Blob;
}> {
const img = await loadImage(file);
const canvas = createThumbnailCanvas(img);
const ctx = canvas.getContext('2d')!;
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const [avif, webp, jpg] = await Promise.all([
encodeAvif(imageData, 80),
encodeWebp(imageData, 80),
encodeJpeg(imageData, 85)
]);
return { avif, webp, jpg };
}
/** Generate all full-size variants (AVIF, WebP, JPEG, optional JXL) from a single file. */
async function generateFullVariants(file: File): Promise<{
avif: Blob;
webp: Blob;
jpg: Blob;
jxl: Blob | null;
}> {
const img = await loadImage(file);
const canvas = createFullCanvas(img);
const ctx = canvas.getContext('2d')!;
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const [avif, webp, jpg, jxl] = await Promise.all([
encodeAvif(imageData, 72),
encodeWebp(imageData, 80),
encodeJpeg(imageData, 85),
encodeJxl(imageData, 75)
]);
return { avif, webp, jpg, jxl };
}
let availableTags = $state<string[]>([]);
let loadingTags = $state(true);
let isMobile = $state(false);
@@ -403,7 +453,7 @@
tags = tags.filter((t) => t !== tag);
}
/** Core upload function – now processes the images before sending. */
/** Core upload function – multi-format: generates AVIF+WebP+JPEG+JXL variants. */
async function uploadOneOrMany() {
// Add any pending input as tag before uploading
if (input.trim()) {
@@ -425,44 +475,32 @@
const fd = new FormData();
try {
/* -------- 1. Convert to base image format (AVIF) ------- */
uploadStatus[fileKey] = 'Converting to AVIF...';
const avifBlob = await toAvifBlob(file);
/* -------- 1. Generate all full-size variants (AVIF, WebP, JPEG, JXL) ------- */
uploadStatus[fileKey] = 'Generating full-size variants...';
const fullVariants = await generateFullVariants(file);
/* -------- 2. Create the two processed versions IN PARALLEL ------- */
uploadStatus[fileKey] = 'Compressing...';
const [resizedBlob, thumbBlob] = await Promise.all([
resizeShortSide(avifBlob).then((blob) => {
uploadStatus[fileKey] = 'Full size ready';
return blob;
}),
createThumbnail(avifBlob).then((blob) => {
uploadStatus[fileKey] = 'Thumbnail ready';
return blob;
})
]);
/* -------- 2. Generate all thumbnail variants (AVIF, WebP, JPEG) ------- */
uploadStatus[fileKey] = 'Generating thumbnail variants...';
const thumbVariants = await generateThumbnailVariants(file);
/* -------- 3. Generate filenames -------------------------------- */
const ts = startTs - i; // 1 ms decrement per file
const baseName = `${ts}.avif`;
const thumbName = `${ts}_thumb.webp`;
/* -------- 4. Attach to FormData -------------------------------- */
fd.append('file', resizedBlob, baseName);
fd.append('thumbnail', thumbBlob, thumbName);
/* -------- 4. Attach all variants to FormData -------------------------------- */
fd.append('file_full_avif', fullVariants.avif, `${ts}_full.avif`);
fd.append('file_full_webp', fullVariants.webp, `${ts}_full.webp`);
fd.append('file_full_jpg', fullVariants.jpg, `${ts}_full.jpg`);
if (fullVariants.jxl) {
fd.append('file_full_jxl', fullVariants.jxl, `${ts}_full.jxl`);
}
fd.append('file_thumb_avif', thumbVariants.avif, `${ts}_thumb.avif`);
fd.append('file_thumb_webp', thumbVariants.webp, `${ts}_thumb.webp`);
fd.append('file_thumb_jpg', thumbVariants.jpg, `${ts}_thumb.jpg`);
if (tags.length > 0) {
fd.append('tags', tags.join(','));
}
/* Debug: log what we're sending
console.log(`Uploading ${fileKey}:`, {
baseName,
thumbName,
thumbMimeType: thumbBlob.type,
fullMimeType: resizedBlob.type
});
*/
/* -------- 5. Call the API ------------------------------------- */
uploadStatus[fileKey] = 'Uploading...';
const response = await fetch('/api/portfolio/images', {
@@ -843,7 +881,7 @@
<!-- Confirmation Dialog -->
<AlertDialog.Root bind:open={showConfirmUploadAlert}>
<AlertDialog.Content class="z-[60]">
<AlertDialog.Content class="z-60">
<AlertDialog.Header>
<AlertDialog.Title>Confirm Upload</AlertDialog.Title>
<AlertDialog.Description>
frontend/src/lib/components/admin/PatchTestsManagement.svelte
+1 -1
View File
@@ -462,7 +462,7 @@
</div>
<div class="space-y-2 pt-2">
<label class="text-sm font-medium">Applicable Services</label>
<div class="text-sm font-medium">Applicable Services</div>
<p class="mb-2 text-xs text-gray-500">Select which services require this patch test</p>
<div class="max-h-48 space-y-2 overflow-y-auto rounded-md border bg-gray-50 p-2">
{#if availableServices.length === 0}
frontend/src/lib/components/admin/RescheduleModal.svelte
+5 -5
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { authStore } from '$lib/stores/auth.svelte';
import { SvelteDate } from 'svelte/reactivity';
import { SvelteDate, SvelteSet } from 'svelte/reactivity';
import { toast } from 'svelte-sonner';
import { CalendarDate, getLocalTimeZone, type DateValue } from '@internationalized/date';
@@ -51,7 +51,7 @@
let workingHoursCache: Record<string, Record<string, any>> = {};
let availableHoursCache: Record<string, Record<string, any>> = {};
let loadingMonths: Record<string, boolean> = {};
let loadingMonthKeys: Set<string> = new Set();
let loadingMonthKeys = new SvelteSet<string>();
let initialLoadDone = $state(false);
let rescheduleAutoSelectDone = $state(false);
@@ -220,7 +220,7 @@
if (loadingMonths[monthKey]) return;
if (loadingMonthKeys.has(monthKey)) return;
loadingMonthKeys = new Set(loadingMonthKeys).add(monthKey);
loadingMonthKeys.add(monthKey);
loadingMonths[monthKey] = true;
hoursMonthGeneration++;
@@ -265,7 +265,7 @@
toast.error('Failed to load availability');
} finally {
delete loadingMonths[monthKey];
loadingMonthKeys = new Set([...loadingMonthKeys].filter((k) => k !== monthKey));
loadingMonthKeys.delete(monthKey);
loadingHours = false;
}
}
@@ -280,7 +280,7 @@
workingHoursCache = {};
availableHoursCache = {};
loadingMonths = {};
loadingMonthKeys = new Set();
loadingMonthKeys = new SvelteSet<string>();
rescheduleAutoSelectDone = false;
placeholder = new CalendarDate(
new SvelteDate().getFullYear(),
frontend/src/lib/components/admin/ServicesManagement.svelte
+3 -3
View File
@@ -41,11 +41,11 @@
let creatingService = $state(false);
let serviceErrors = $state<Record<string, string>>({});
function validatePrice(price: any): string {
function validatePrice(price: number | string): string {
if (price === null || price === undefined || price === '') {
return 'Price is required';
}
const numPrice = parseFloat(price);
const numPrice = parseFloat(typeof price === 'number' ? price.toString() : price);
if (isNaN(numPrice)) {
return 'Price must be a valid number';
}
@@ -62,7 +62,7 @@
return '';
}
function validateDuration(value: any, field: string): string {
function validateDuration(value: number | string, field: string): string {
if (value === null || value === undefined || value === '') {
return 'Field cannot be empty';
}
frontend/src/lib/components/admin/TimeBlockers.svelte
+2 -2
View File
@@ -735,7 +735,7 @@
/>
</div>
<div class="space-y-2">
<label class="text-xs text-gray-600">Time</label>
<div class="text-xs text-gray-600">Time</div>
{#if hoursLoading}
<Skeleton class="h-9 w-full" />
{:else if !selectedWorkingHours}
@@ -912,7 +912,7 @@
</Modal.Root>
<AlertDialog.Root bind:open={showDeleteAlert}>
<AlertDialog.Content class="z-[60]">
<AlertDialog.Content class="z-60">
<AlertDialog.Header>
<AlertDialog.Title>Delete time blocker?</AlertDialog.Title>
<AlertDialog.Description>
frontend/src/lib/components/admin/WalkInBooking.svelte
+1 -1
View File
@@ -231,7 +231,7 @@
return;
}
const now = new Date();
const now = new SvelteDate();
const diff = reservationExpiresAt.getTime() - now.getTime();
if (diff <= 0) {
frontend/src/lib/components/admin/WalkInCreateModal.svelte
+5 -5
View File
@@ -152,7 +152,7 @@
return;
}
const now = new Date();
const now = new SvelteDate();
const diff = reservationExpiresAt.getTime() - now.getTime();
if (diff <= 0) {
@@ -545,9 +545,9 @@
<div class="max-h-[300px] overflow-y-auto rounded-md border border-gray-200">
{#if loadingUsers}
<div class="space-y-2 p-2">
{#each Array(3) as _}
<Skeleton class="h-10 w-full" />
{/each}
{#each Array(3) as _, i (i)}
<Skeleton class="h-10 w-full" />
{/each}
</div>
{:else if users.length === 0}
<div class="flex items-center justify-center p-8 text-sm text-gray-500">
@@ -653,7 +653,7 @@
<Card.Content class="space-y-4">
{#if loadingServices}
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
{#each Array(4) as _}
{#each Array(4) as _, i (i)}
<Skeleton class="h-28 w-full" />
{/each}
</div>
frontend/src/lib/components/admin/WeeklySchedule.svelte
+1 -1
View File
@@ -534,7 +534,7 @@
<!-- Save Default Hours Confirmation -->
<AlertDialog.Root bind:open={showSaveDefaultHoursAlert}>
<AlertDialog.Content class="z-[60]">
<AlertDialog.Content class="z-60">
<AlertDialog.Header>
<AlertDialog.Title>Save default hours?</AlertDialog.Title>
<AlertDialog.Description>
frontend/src/lib/components/booking/BookingFlow.svelte
+6 -5
View File
@@ -14,6 +14,7 @@
// staff adjusting working hours; the app does not need timezone-aware scheduling logic.
import { CalendarDate, getLocalTimeZone, type DateValue } from '@internationalized/date';
import { goto } from '$app/navigation';
import { resolve } from '$app/paths';
import { authStore } from '$lib/stores/auth.svelte';
import { toast } from 'svelte-sonner';
import { SvelteDate } from 'svelte/reactivity';
@@ -171,7 +172,7 @@
const data = await response.json();
paymentMethods = data.payment_methods ?? [];
if (paymentMethods.length > 0 && !selectedPaymentMethod) {
const defaultCard = paymentMethods.find((m: any) => m.is_default) ?? paymentMethods[0];
const defaultCard = paymentMethods.find((m) => 'is_default' in m && m.is_default) ?? paymentMethods[0];
selectedPaymentMethod = defaultCard.id;
}
} else {
@@ -323,7 +324,7 @@
return;
}
const now = new Date();
const now = new SvelteDate();
const diff = reservationExpiresAt.getTime() - now.getTime();
if (diff <= 0) {
@@ -1378,7 +1379,7 @@
</p>
<div class="flex flex-col gap-3 sm:flex-row sm:justify-center sm:gap-4">
<Button
onclick={() => goto('/login')}
onclick={() => goto(resolve('/login'))}
variant="outline"
class="border-fuchsia-200 hover:bg-fuchsia-100"
>
@@ -2001,12 +2002,12 @@
<p class="text-sm text-amber-800">
<strong>Please note:</strong> Because you included special requests, the cost and duration
shown are estimates. We may adjust these after reviewing your requirements. You'll receive
a notification once your booking is approved.
{authStore.isAuthenticated ? ' a notification' : ' an email'} once your booking is approved.
</p>
</div>
{/if}
{#if !calculateDepositRequired()}
{#if !calculateDepositRequired() && authStore.isAuthenticated && authStore.currentUser?.role !== 'admin' && authStore.currentUser?.role !== 'guest'}
<div class="rounded-lg border border-gray-200 bg-gray-50 p-6 text-center">
<h3 class="mb-2 text-lg font-semibold">Pay on the Day</h3>
<p class="mb-4 text-gray-600">
frontend/src/lib/components/booking/ServiceCard.svelte
+3 -2
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { resolve } from '$app/paths';
import type { Service } from '$lib/types/booking';
let {
@@ -26,7 +27,7 @@
onclick={() => !isGrayedOut && onclick?.()}
disabled={isGrayedOut}
>
<div class="flex h-full min-h-[6rem] flex-col justify-between">
<div class="flex h-full min-h-24 flex-col justify-between">
<div>
<h3 class="font-semibold">{service.name}</h3>
{#if isGrayedOut}
@@ -37,7 +38,7 @@
Patch test expired
{/if}
{#if showContactLink}
- <a href="/contact" class="underline">contact us</a>
- <a href={resolve('/contact')} class="underline">contact us</a>
{/if}
</p>
{:else}
frontend/src/lib/components/layout/NavBar.svelte
+93 -21
View File
@@ -1,8 +1,8 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import { slide } from 'svelte/transition';
import { slide, fly } from 'svelte/transition';
import { navigating, page } from '$app/stores';
import { goto } from '$app/navigation';
import { resolve } from '$app/paths';
import { authStore } from '$lib/stores/auth.svelte';
import { Button } from '$lib/components/ui/button';
import { Skeleton } from '$lib/components/ui/skeleton';
@@ -126,12 +126,12 @@
<!-- Center: Desktop Links -->
<div class="hidden space-x-8 md:flex">
{#each links as link}
{#each links as link (link.href)}
{#if canShow(link)}
{#if isLoading}
<Skeleton class={`h-4 ${link.width} rounded`} />
{:else}
<a href={link.href} class="font-medium text-gray-800 hover:text-primary"
<a href={resolve(link.href)} class="font-medium text-gray-800 hover:text-primary"
>{link.label}</a
>
{/if}
@@ -142,7 +142,7 @@
<div class="hidden items-center gap-4 md:flex">
{#if isAuthenticated}
<a
href="/notifications"
href={resolve('/notifications')}
class="relative text-gray-600 hover:text-primary"
aria-label="Notifications"
>
@@ -170,7 +170,7 @@
</a>
{/if}
{#if !isLoading && !isAuthenticated && $page.url.pathname !== '/login'}
<Button href="/login">Login</Button>
<Button href={resolve('/login')}>Login</Button>
{/if}
{#if isLoading}
<Skeleton class="h-8 w-16 rounded" />
@@ -179,18 +179,19 @@
<!-- Mobile: Burger -->
<div class="flex items-center md:hidden">
<button onclick={toggleMenu} class="relative focus:outline-none" aria-label="Toggle menu">
<svg class="h-6 w-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
{#if unreadCount > 0 && !mobileMenuOpen}
<button
onclick={toggleMenu}
class="relative h-6 w-6 focus:outline-none"
aria-label="Toggle menu"
class:open={mobileMenuOpen}
>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
{#if unreadCount > 0}
<span
class="absolute -top-1 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white"
class="notification-badge absolute -top-1 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white"
>
{unreadCount > 9 ? '9+' : unreadCount}
</span>
@@ -203,7 +204,11 @@
{#if mobileMenuOpen}
<div
class="fixed inset-0 top-16 bg-black/30 backdrop-blur-[1px] md:hidden"
role="button"
tabindex="0"
aria-label="Close menu"
onclick={toggleMenu}
onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleMenu(); } }}
></div>
{/if}
@@ -214,13 +219,13 @@
class="relative z-50 border-b border-gray-200 bg-background md:hidden"
>
<div class="space-y-1 px-2 pt-2 pb-3">
{#each links as link}
{#each links as link (link.href)}
{#if canShow(link)}
{#if isLoading}
<Skeleton class="h-4 w-full rounded" />
{:else}
<a
href={link.href}
href={resolve(link.href)}
class="block rounded px-3 py-2 text-center text-primary hover:text-gray-800"
>
{link.label}
@@ -231,12 +236,13 @@
{#if isAuthenticated}
<a
href="/notifications"
href={resolve('/notifications')}
class="flex items-center justify-center gap-2 rounded px-3 py-2 text-primary hover:text-gray-800"
>
<span>Notifications</span>
{#if unreadCount > 0}
<span
in:fly={{ y: -8, duration: 200, delay: 50 }}
class="flex h-5 w-5 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white"
>
{unreadCount > 9 ? '9+' : unreadCount}
@@ -248,7 +254,7 @@
{#if isLoading}
<Skeleton class="mt-2 h-8 w-full rounded" />
{:else if !isAuthenticated}
<Button href="/login" class="mt-2 w-full text-center">Login</Button>
<Button href={resolve('/login')} class="mt-2 w-full text-center">Login</Button>
{/if}
</div>
</div>
@@ -259,4 +265,70 @@
.frosty-nav {
backdrop-filter: saturate(180%) blur(10px);
}
/* Hamburger animation - 4 lines, middle two overlap when closed */
.hamburger-line {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #374151;
border-radius: 2px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: 0.125s ease-in-out;
}
.hamburger-line:nth-child(1) {
top: 3px;
}
/* Spans 2 and 3 overlap at same position, span 3 hidden when closed */
.hamburger-line:nth-child(2) {
top: 10px;
}
.hamburger-line:nth-child(3) {
top: 10px;
opacity: 0;
}
.hamburger-line:nth-child(4) {
top: 17px;
}
/* Open state - transform to X */
.open .hamburger-line:nth-child(1) {
top: 10px;
width: 0%;
left: 50%;
}
.open .hamburger-line:nth-child(2) {
transform: rotate(45deg);
}
.open .hamburger-line:nth-child(3) {
opacity: 1;
transform: rotate(-45deg);
}
.open .hamburger-line:nth-child(4) {
top: 10px;
width: 0%;
left: 50%;
}
/* Badge animations */
.notification-badge {
opacity: 1;
transform: translateY(0);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.open .notification-badge {
opacity: 0;
transform: translateY(8px);
}
</style>
frontend/src/lib/components/layout/PortfolioCarousel.svelte
+1 -1
View File
@@ -43,7 +43,7 @@
<div class="relative w-full overflow-hidden">
<div class="animate-scroll flex">
{#each [...portfolioImages, ...portfolioImages] as image}
{#each [...portfolioImages, ...portfolioImages] as image, i (i)}
<div class="group flex-shrink-0">
<img
src={image.src}
frontend/src/lib/components/payments/PaymentModal.svelte
+4 -5
View File
@@ -426,7 +426,6 @@
<Dialog.Root
open={true}
onOpenChange={(open) => !open && handleClose()}
onOpenAutoFocus={(e) => e.preventDefault()}
>
<Dialog.Content class="max-h-[90vh] max-w-lg overflow-y-auto">
<Dialog.Header>
@@ -452,7 +451,7 @@
<input
type="text"
inputmode="decimal"
tabindex="-1"
tabindex={-1}
class="flex h-8 w-24 rounded-md border border-input bg-background px-2 py-1 text-sm ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none"
value={serviceOverrides[service.service_id]?.price ??
service.price?.toFixed(2) ??
@@ -607,7 +606,7 @@
<Input
type="text"
inputmode="decimal"
tabindex="-1"
tabindex={-1}
placeholder="Custom tip amount"
value={customTipAmount}
oninput={handleCustomTipInput}
@@ -657,7 +656,7 @@
id="cash-amount"
type="text"
inputmode="decimal"
tabindex="-1"
tabindex={-1}
value={cashAmount}
oninput={handleCashInput}
class="pl-7 text-lg font-semibold"
@@ -713,7 +712,7 @@
id="gift-card-id"
type="text"
inputmode="text"
tabindex="-1"
tabindex={-1}
value={giftCardId}
oninput={handleGiftCardInput}
placeholder="XXXX XXXX XXXX"
frontend/src/lib/components/payments/UserPaymentModal.svelte
-5
View File
@@ -354,11 +354,6 @@
makePayment('partial', Math.round(partialAmountNum * 100));
}
function handleRetry() {
status = 'idle';
error = null;
}
function handleClose() {
stopPolling();
onClose();
frontend/src/lib/components/today/TodayCalendar.svelte
+3 -3
View File
@@ -920,7 +920,7 @@
checkOverlappingBookings();
}}
>
{#each availableStartOptions as opt}
{#each availableStartOptions as opt (opt.totalMin)}
<option value={`${opt.hour}:${opt.minute}:${opt.period}`}>{opt.label}</option>
{/each}
</select>
@@ -948,7 +948,7 @@
checkOverlappingBookings();
}}
>
{#each availableEndOptions as opt}
{#each availableEndOptions as opt (opt.totalMin)}
<option value={`${opt.hour}:${opt.minute}:${opt.period}`}>{opt.label}</option>
{/each}
</select>
@@ -1047,7 +1047,7 @@
</Modal.Root>
<AlertDialog.Root bind:open={showDeleteAlert}>
<AlertDialog.Content class="z-[60]">
<AlertDialog.Content class="z-60">
<AlertDialog.Header>
<AlertDialog.Title>Delete time blocker?</AlertDialog.Title>
<AlertDialog.Description
frontend/src/lib/components/ui/form/form-button.svelte
+3 -2
View File
@@ -1,7 +1,8 @@
<script lang="ts">
import * as Button from '$lib/components/ui/button/index.js';
let { ref = $bindable(null), ...restProps }: Button.Props = $props();
let { ...restProps }: Record<string, unknown> = $props();
let ref = $state<HTMLElement | null>(null);
</script>
<Button.Root bind:ref type="submit" {...restProps} />
<Button.Root bind:ref={ref} type="submit" {...restProps} />