add datetimepicker, lots of other small improvements

.claude/settings.local.json

···
 {
-	"permissions": {
-		"allow": [
-			"Bash(pnpm check:*)",
-			"mcp__ide__getDiagnostics",
-			"mcp__plugin_svelte_svelte__svelte-autofixer",
-			"mcp__plugin_svelte_svelte__list-sections",
-			"Bash(pkill:*)",
-			"Bash(timeout 8 pnpm dev:*)",
-			"Bash(git checkout:*)",
-			"Bash(npx svelte-kit:*)",
-			"Bash(ls:*)",
-			"Bash(pnpm format:*)",
-			"Bash(pnpm add:*)",
-			"WebSearch",
-			"WebFetch(domain:github.com)",
-			"WebFetch(domain:flipclockjs.com)",
-			"WebFetch(domain:codepen.io)",
-			"WebFetch(domain:flo-bit.dev)",
-			"Bash(pnpm install)",
-			"Bash(pnpm install:*)",
-			"Bash(pnpm config:*)",
-			"Bash(lsof:*)",
-			"Bash(pnpm dev)",
-			"Bash(pnpm exec svelte-kit:*)",
-			"Bash(pnpm build:*)",
-			"Bash(pnpm remove:*)",
-			"Bash(grep:*)",
-			"Bash(find:*)",
-			"Bash(npx prettier:*)",
-			"Bash(node -e:*)"
-		]
-	}
+  "permissions": {
+    "allow": [
+      "Bash(pnpm check:*)",
+      "mcp__ide__getDiagnostics",
+      "mcp__plugin_svelte_svelte__svelte-autofixer",
+      "mcp__plugin_svelte_svelte__list-sections",
+      "Bash(pkill:*)",
+      "Bash(timeout 8 pnpm dev:*)",
+      "Bash(git checkout:*)",
+      "Bash(npx svelte-kit:*)",
+      "Bash(ls:*)",
+      "Bash(pnpm format:*)",
+      "Bash(pnpm add:*)",
+      "WebSearch",
+      "WebFetch(domain:github.com)",
+      "WebFetch(domain:flipclockjs.com)",
+      "WebFetch(domain:codepen.io)",
+      "WebFetch(domain:flo-bit.dev)",
+      "Bash(pnpm install)",
+      "Bash(pnpm install:*)",
+      "Bash(pnpm config:*)",
+      "Bash(lsof:*)",
+      "Bash(pnpm dev)",
+      "Bash(pnpm exec svelte-kit:*)",
+      "Bash(pnpm build:*)",
+      "Bash(pnpm remove:*)",
+      "Bash(grep:*)",
+      "Bash(find:*)",
+      "Bash(npx prettier:*)",
+      "Bash(node -e:*)",
+      "mcp__plugin_svelte_svelte__get-documentation",
+      "WebFetch(domain:bits-ui.com)"
+    ]
+  }
 }

package.json

···
 		"@foxui/social": "^0.4.7",
 		"@foxui/time": "^0.4.7",
 		"@foxui/visual": "^0.4.7",
+		"@internationalized/date": "^3.11.0",
 		"@number-flow/svelte": "^0.3.10",
 		"@tailwindcss/typography": "^0.5.19",
 		"@threlte/core": "^8.3.1",

pnpm-lock.yaml

···
       '@foxui/visual':
         specifier: ^0.4.7
         version: 0.4.7(svelte@5.48.0)(tailwindcss@4.1.18)
+      '@internationalized/date':
+        specifier: ^3.11.0
+        version: 3.11.0
       '@number-flow/svelte':
         specifier: ^0.3.10
         version: 0.3.10(svelte@5.48.0)
···
         version: 0.176.0
       bits-ui:
         specifier: ^2.15.4
-        version: 2.15.4(@internationalized/date@3.10.1)(@sveltejs/kit@2.50.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.48.0)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0)
+        version: 2.15.4(@internationalized/date@3.11.0)(@sveltejs/kit@2.50.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.48.0)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
···
     cpu: [x64]
     os: [win32]
 
-  '@internationalized/date@3.10.1':
-    resolution: {integrity: sha512-oJrXtQiAXLvT9clCf1K4kxp3eKsQhIaZqxEyowkBcsvZDdZkbWrVmnGknxs5flTD0VGsxrxKgBCZty1EzoiMzA==}
+  '@internationalized/date@3.11.0':
+    resolution: {integrity: sha512-BOx5huLAWhicM9/ZFs84CzP+V3gBW6vlpM02yzsdYC7TGlZJX1OJiEEHcSayF00Z+3jLlm4w79amvSt6RqKN3Q==, tarball: https://registry.npmjs.org/@internationalized/date/-/date-3.11.0.tgz}
 
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
···
       vite: ^6.3.0 || ^7.0.0
 
   '@swc/helpers@0.5.18':
-    resolution: {integrity: sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==}
+    resolution: {integrity: sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==, tarball: https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz}
 
   '@tailwindcss/forms@0.5.11':
     resolution: {integrity: sha512-h9wegbZDPurxG22xZSoWtdzc41/OlNEUQERNqI/0fOwa2aVlWGu7C35E/x6LDyD3lgtztFSSjKZyuVM0hxhbgA==}
···
       typescript: '>=4.8.4'
 
   tslib@2.8.1:
-    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==, tarball: https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz}
 
   turndown@7.2.2:
     resolution: {integrity: sha512-1F7db8BiExOKxjSMU2b7if62D/XOyQyZbPKq/nUwopfgnHlqXHqQ0lvfUTeUIr1lZJzOPFn43dODyMSIfvWRKQ==}
···
   '@img/sharp-win32-x64@0.34.5':
     optional: true
 
-  '@internationalized/date@3.10.1':
+  '@internationalized/date@3.11.0':
     dependencies:
       '@swc/helpers': 0.5.18
 
···
     dependencies:
       '@floating-ui/core': 1.7.3
       '@floating-ui/dom': 1.7.5
-      '@internationalized/date': 3.10.1
+      '@internationalized/date': 3.11.0
       css.escape: 1.5.1
       esm-env: 1.2.2
       runed: 0.23.4(svelte@5.48.0)
···
       svelte-toolbelt: 0.7.1(svelte@5.48.0)
       tabbable: 6.4.0
 
-  bits-ui@2.15.4(@internationalized/date@3.10.1)(@sveltejs/kit@2.50.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.48.0)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0):
+  bits-ui@2.15.4(@internationalized/date@3.11.0)(@sveltejs/kit@2.50.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.48.0)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0):
     dependencies:
       '@floating-ui/core': 1.7.3
       '@floating-ui/dom': 1.7.5
-      '@internationalized/date': 3.10.1
+      '@internationalized/date': 3.11.0
       esm-env: 1.2.2
       runed: 0.35.1(@sveltejs/kit@2.50.1(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.48.0)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0)(typescript@5.9.3)(vite@7.3.1(@types/node@25.0.10)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.48.0)
       svelte: 5.48.0

src/lib/components/DatePicker.svelte

···
+<script lang="ts">
+	// @ts-nocheck
+	import { DatePicker } from 'bits-ui';
+	import { CalendarDate, type DateValue } from '@internationalized/date';
+	import { untrack } from 'svelte';
+
+	let {
+		value = $bindable(''),
+		required = false,
+		minValue = '',
+		locale = 'en',
+		onSelect
+	}: {
+		value: string;
+		required?: boolean;
+		minValue?: string;
+		locale?: string;
+		onSelect?: () => void;
+	} = $props();
+
+	let isOpen = $state(false);
+
+	const currentYear = new Date().getFullYear();
+	const yearRange = Array.from({ length: 7 }, (_, i) => currentYear - 1 + i);
+	const today = new Date();
+	const todayDay = today.getDate();
+	const todayMonth = today.getMonth() + 1;
+	const todayYear = today.getFullYear();
+
+	let internalValue: CalendarDate | undefined = $state(undefined);
+
+	function parseDateStr(str: string): CalendarDate | undefined {
+		if (!str) return undefined;
+		const [yearStr, monthStr, dayStr] = str.split('-');
+		const year = parseInt(yearStr, 10);
+		const month = parseInt(monthStr, 10);
+		const day = parseInt(dayStr, 10);
+		if (isNaN(year) || isNaN(month) || isNaN(day)) return undefined;
+		return new CalendarDate(year, month, day);
+	}
+
+	function formatDateStr(dt: CalendarDate): string {
+		const y = String(dt.year).padStart(4, '0');
+		const m = String(dt.month).padStart(2, '0');
+		const d = String(dt.day).padStart(2, '0');
+		return `${y}-${m}-${d}`;
+	}
+
+	let internalMinValue: CalendarDate | undefined = $derived.by(() => {
+		return parseDateStr(minValue);
+	});
+
+	$effect(() => {
+		const parsed = parseDateStr(value);
+		untrack(() => {
+			if (parsed) {
+				if (
+					!internalValue ||
+					parsed.year !== internalValue.year ||
+					parsed.month !== internalValue.month ||
+					parsed.day !== internalValue.day
+				) {
+					internalValue = parsed;
+				}
+			} else {
+				internalValue = undefined;
+			}
+		});
+	});
+
+	function handleValueChange(newVal: DateValue | undefined) {
+		if (newVal && newVal instanceof CalendarDate) {
+			internalValue = newVal;
+			value = formatDateStr(newVal);
+		}
+	}
+
+	function handleOpenChange(open: boolean) {
+		isOpen = open;
+	}
+
+	function handleOpenChangeComplete(open: boolean) {
+		if (!open && internalValue) {
+			onSelect?.();
+		}
+	}
+</script>
+
+<DatePicker.Root
+	bind:value={internalValue}
+	onValueChange={handleValueChange}
+	onOpenChange={handleOpenChange}
+	onOpenChangeComplete={handleOpenChangeComplete}
+	minValue={internalMinValue}
+	granularity="day"
+	fixedWeeks={true}
+	weekdayFormat="short"
+	{locale}
+	{required}
+>
+	<div
+		class="border-base-300 bg-base-100 text-base-900 focus-within:border-accent-500 dark:border-base-700 dark:bg-base-800 dark:text-base-100 dark:focus-within:border-accent-400 flex items-center rounded-xl border px-2.5 py-1.5 text-sm transition-colors"
+	>
+		<DatePicker.Input>
+			{#snippet children({ segments })}
+				{#each segments as segment, i (segment.part + i)}
+					{#if segment.part === 'literal'}
+						<span class="text-base-400 dark:text-base-500">{segment.value}</span>
+					{:else}
+						<DatePicker.Segment
+							part={segment.part}
+							class="hover:bg-base-200 focus:bg-base-200 dark:hover:bg-base-700 dark:focus:bg-base-700 rounded px-0.5 focus:outline-none"
+						>
+							{segment.value}
+						</DatePicker.Segment>
+					{/if}
+				{/each}
+			{/snippet}
+		</DatePicker.Input>
+
+		<DatePicker.Trigger
+			class="text-base-400 hover:text-base-600 dark:text-base-500 dark:hover:text-base-300 ml-auto cursor-pointer pl-1.5"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				class="size-4"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
+				/>
+			</svg>
+		</DatePicker.Trigger>
+	</div>
+
+	<DatePicker.Content
+		class="border-base-200 bg-base-50 dark:border-base-700 dark:bg-base-900 z-50 rounded-2xl border p-4 shadow-lg"
+	>
+		<DatePicker.Calendar>
+			{#snippet children({ months, weekdays })}
+				<DatePicker.Header class="flex items-center justify-between">
+					<DatePicker.PrevButton
+						class="text-base-500 hover:bg-base-200 dark:text-base-400 dark:hover:bg-base-700 inline-flex size-8 items-center justify-center rounded-lg"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="size-5"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</DatePicker.PrevButton>
+
+					<div class="flex items-center gap-1.5">
+						<DatePicker.MonthSelect
+							monthFormat="long"
+							class="text-base-900 dark:text-base-100 hover:text-accent-500 dark:hover:text-accent-400 cursor-pointer border-0 bg-transparent text-sm font-medium outline-none focus:ring-0 focus:outline-none"
+						/>
+						<DatePicker.YearSelect
+							years={yearRange}
+							class="text-base-900 dark:text-base-100 hover:text-accent-500 dark:hover:text-accent-400 cursor-pointer border-0 bg-transparent text-sm font-medium outline-none focus:ring-0 focus:outline-none"
+						/>
+					</div>
+
+					<DatePicker.NextButton
+						class="text-base-500 hover:bg-base-200 dark:text-base-400 dark:hover:bg-base-700 inline-flex size-8 items-center justify-center rounded-lg"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="size-5"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 1 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</DatePicker.NextButton>
+				</DatePicker.Header>
+
+				{#each months as month (month.value.month)}
+					<DatePicker.Grid class="mt-3 w-full">
+						<DatePicker.GridHead>
+							<DatePicker.GridRow class="flex w-full">
+								{#each weekdays as weekday, i (i)}
+									<DatePicker.HeadCell
+										class="text-base-400 dark:text-base-500 flex-1 text-center text-xs font-medium"
+									>
+										{weekday}
+									</DatePicker.HeadCell>
+								{/each}
+							</DatePicker.GridRow>
+						</DatePicker.GridHead>
+
+						<DatePicker.GridBody>
+							{#each month.weeks as week, weekIndex (weekIndex)}
+								<DatePicker.GridRow class="flex w-full">
+									{#each week as day (day.toString())}
+										<DatePicker.Cell date={day} month={month.value} class="flex-1 p-0.5">
+											<DatePicker.Day>
+												{#snippet children({ selected, disabled, day: dayText })}
+													<div
+														class="relative flex size-9 items-center justify-center rounded-lg text-sm
+														{selected
+															? 'bg-accent-500 font-medium text-white'
+															: disabled
+																? 'text-base-300 dark:text-base-600 pointer-events-none'
+																: day.month !== month.value.month
+																	? 'text-base-300 dark:text-base-600'
+																	: 'text-base-700 hover:bg-base-200 dark:text-base-300 dark:hover:bg-base-700'}"
+													>
+														{dayText}
+														{#if day.day === todayDay && day.month === todayMonth && day.year === todayYear}
+															<span
+																class="bg-accent-500 absolute bottom-1 left-1/2 size-1 -translate-x-1/2 rounded-full"
+																class:bg-white={selected}
+															></span>
+														{/if}
+													</div>
+												{/snippet}
+											</DatePicker.Day>
+										</DatePicker.Cell>
+									{/each}
+								</DatePicker.GridRow>
+							{/each}
+						</DatePicker.GridBody>
+					</DatePicker.Grid>
+				{/each}
+			{/snippet}
+		</DatePicker.Calendar>
+	</DatePicker.Content>
+</DatePicker.Root>

src/lib/components/DateTimePicker.svelte

···
+<script lang="ts">
+	// @ts-nocheck
+	import DatePickerField from './DatePicker.svelte';
+	import TimePicker from './TimePicker.svelte';
+	import { untrack } from 'svelte';
+	import { browser } from '$app/environment';
+
+	let {
+		value = $bindable(''),
+		required = false,
+		minValue = ''
+	}: {
+		value: string;
+		required?: boolean;
+		minValue?: string;
+	} = $props();
+
+	let datePart = $state('');
+	let timePart = $state('00:00');
+	let timeEl: HTMLDivElement | undefined = $state(undefined);
+
+	const locale = browser ? navigator.language || 'en' : 'en';
+	let minDatePart = $derived(minValue ? minValue.split('T')[0] || '' : '');
+
+	// Sync external value -> date/time parts
+	$effect(() => {
+		const v = value;
+		untrack(() => {
+			if (v) {
+				const [d, t] = v.split('T');
+				if (d && d !== datePart) datePart = d;
+				if (t && t !== timePart) timePart = t;
+			}
+		});
+	});
+
+	// Sync date/time parts -> external value
+	$effect(() => {
+		const d = datePart;
+		const t = timePart;
+		untrack(() => {
+			if (d) {
+				const newVal = `${d}T${t || '00:00'}`;
+				if (newVal !== value) value = newVal;
+			}
+		});
+	});
+
+	function focusTime() {
+		// Small delay to let the popover finish closing
+		setTimeout(() => {
+			if (timeEl) {
+				const segment = timeEl.querySelector('[data-segment]');
+				if (segment instanceof HTMLElement) {
+					segment.focus();
+				}
+			}
+		}, 50);
+	}
+</script>
+
+<div class="flex items-center gap-1.5">
+	<DatePickerField
+		bind:value={datePart}
+		{required}
+		minValue={minDatePart}
+		{locale}
+		onSelect={focusTime}
+	/>
+	<div bind:this={timeEl}>
+		<TimePicker bind:value={timePart} {locale} />
+	</div>
+</div>

src/lib/components/TimePicker.svelte

···
+<script lang="ts">
+	// @ts-nocheck
+	import { TimeField } from 'bits-ui';
+	import { Time } from '@internationalized/date';
+	import { untrack } from 'svelte';
+
+	let {
+		value = $bindable(''),
+		required = false,
+		locale = 'en'
+	}: {
+		value: string;
+		required?: boolean;
+		locale?: string;
+	} = $props();
+
+	let internalValue: Time | undefined = $state(undefined);
+
+	function parseTimeStr(str: string): Time | undefined {
+		if (!str) return undefined;
+		const [hourStr, minuteStr] = str.split(':');
+		const hour = parseInt(hourStr, 10);
+		const minute = parseInt(minuteStr, 10);
+		if (isNaN(hour) || isNaN(minute)) return undefined;
+		return new Time(hour, minute);
+	}
+
+	function formatTimeStr(t: Time): string {
+		const h = String(t.hour).padStart(2, '0');
+		const m = String(t.minute).padStart(2, '0');
+		return `${h}:${m}`;
+	}
+
+	$effect(() => {
+		const parsed = parseTimeStr(value);
+		untrack(() => {
+			if (parsed) {
+				if (
+					!internalValue ||
+					parsed.hour !== internalValue.hour ||
+					parsed.minute !== internalValue.minute
+				) {
+					internalValue = parsed;
+				}
+			} else {
+				internalValue = undefined;
+			}
+		});
+	});
+
+	function handleValueChange(newVal: Time | undefined) {
+		if (newVal && newVal instanceof Time) {
+			internalValue = newVal;
+			value = formatTimeStr(newVal);
+		}
+	}
+</script>
+
+<TimeField.Root
+	bind:value={internalValue}
+	onValueChange={handleValueChange}
+	granularity="minute"
+	{locale}
+	{required}
+>
+	<div
+		class="border-base-300 bg-base-100 text-base-900 focus-within:border-accent-500 dark:border-base-700 dark:bg-base-800 dark:text-base-100 dark:focus-within:border-accent-400 flex items-center rounded-xl border px-2.5 py-1.5 text-sm transition-colors"
+	>
+		<TimeField.Input>
+			{#snippet children({ segments })}
+				{#each segments as segment, i (segment.part + i)}
+					{#if segment.part === 'literal'}
+						<span class="text-base-400 dark:text-base-500">{segment.value}</span>
+					{:else}
+						<TimeField.Segment
+							part={segment.part}
+							class="hover:bg-base-200 focus:bg-base-200 dark:hover:bg-base-700 dark:focus:bg-base-700 rounded px-0.5 focus:outline-none"
+						>
+							{segment.value}
+						</TimeField.Segment>
+					{/if}
+				{/each}
+			{/snippet}
+		</TimeField.Input>
+
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			stroke-width="1.5"
+			stroke="currentColor"
+			class="text-base-400 dark:text-base-500 ml-auto size-4 pl-0.5"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+			/>
+		</svg>
+	</div>
+</TimeField.Root>

src/routes/[[actor=actor]]/events/[rkey]/edit/+page.svelte

···
 <script lang="ts">
 	import { user } from '$lib/atproto/auth.svelte';
 	import { loginModalState } from '$lib/atproto/UI/LoginModal.svelte';
-	import { uploadBlob, putRecord, resolveHandle } from '$lib/atproto/methods';
+	import { uploadBlob, putRecord, deleteRecord, resolveHandle } from '$lib/atproto/methods';
 	import { getCDNImageBlobUrl } from '$lib/atproto';
 	import { compressImage } from '$lib/atproto/image-helper';
-	import { Avatar as FoxAvatar, Badge, Button, ToggleGroup, ToggleGroupItem } from '@foxui/core';
+	import { validateLink } from '$lib/helper';
+	import {
+		Avatar as FoxAvatar,
+		Button,
+		PopoverRoot,
+		PopoverTrigger,
+		PopoverContent,
+		ToggleGroup,
+		ToggleGroupItem,
+		Input
+	} from '@foxui/core';
 	import { goto } from '$app/navigation';
 	import { tokenize, type Token } from '@atcute/bluesky-richtext-parser';
 	import type { Handle } from '@atcute/lexicons';
···
 	import { putImage, getImage, deleteImage } from '$lib/components/image-store';
 	import Modal from '$lib/components/modal/Modal.svelte';
 	import Avatar from 'svelte-boring-avatars';
+	import DateTimePicker from '$lib/components/DateTimePicker.svelte';
 
 	let { data } = $props();
 
···
 	let thumbnailPreview: string | null = $state(null);
 	let submitting = $state(false);
 	let error: string | null = $state(null);
+	let titleEl: HTMLTextAreaElement | undefined = $state(undefined);
 
 	let location: EventLocation | null = $state(null);
 	let locationChanged = $state(false);
···
 	let locationResult: { displayName: string; location: EventLocation } | null = $state(null);
 
 	let links: Array<{ uri: string; name: string }> = $state([]);
+	let editingDates = $state(false);
 	let showLinkPopup = $state(false);
 	let newLinkUri = $state('');
 	let newLinkName = $state('');
+	let linkError = $state('');
 
-	let hasDraft = $state(false);
 	let draftLoaded = $state(false);
 
 	function isoToDatetimeLocal(iso: string): string {
···
 					// No new thumbnail in draft, show existing one from event data
 					populateThumbnailFromEventData();
 				}
-
-				hasDraft = true;
 			} catch {
 				localStorage.removeItem(DRAFT_KEY);
 				if (!isNew) populateFromEventData();
···
 			populateFromEventData();
 		}
 		draftLoaded = true;
+		if (!startsAt) editingDates = true;
+		titleEl?.focus();
 	});
 
 	let saveDraftTimeout: ReturnType<typeof setTimeout> | undefined;
···
 			if (locationChanged) draft.location = location;
 			if (thumbnailKey) draft.thumbnailKey = thumbnailKey;
 			localStorage.setItem(DRAFT_KEY, JSON.stringify(draft));
-			hasDraft = true;
 		}, 500);
 	}
 
···
 		saveDraft();
 	});
 
-	function deleteDraft() {
-		localStorage.removeItem(DRAFT_KEY);
-		if (thumbnailKey) deleteImage(thumbnailKey);
-		thumbnailKey = null;
-		thumbnailChanged = false;
-		if (isNew) {
-			name = '';
-			description = '';
-			startsAt = '';
-			endsAt = '';
-			links = [];
-			mode = 'inperson';
-			location = null;
-			thumbnailFile = null;
-			if (thumbnailPreview) URL.revokeObjectURL(thumbnailPreview);
-			thumbnailPreview = null;
-		} else {
-			populateFromEventData();
-		}
-		hasDraft = false;
-	}
-
 	async function searchLocation() {
 		const q = locationSearch.trim();
 		if (!q) return;
···
 	}
 
 	function addLink() {
-		const uri = newLinkUri.trim();
-		if (!uri) return;
+		const raw = newLinkUri.trim();
+		if (!raw) return;
+		const uri = validateLink(raw);
+		if (!uri) {
+			linkError = 'Please enter a valid URL';
+			return;
+		}
 		links.push({ uri, name: newLinkName.trim() });
 		newLinkUri = '';
 		newLinkName = '';
+		linkError = '';
 		showLinkPopup = false;
 	}
 
···
 			startDate.getDate() === endDate.getDate()
 	);
 
+	// Auto-adjust end date if start moves past it
+	$effect(() => {
+		if (startsAt && endsAt) {
+			const s = new Date(startsAt);
+			const e = new Date(endsAt);
+			if (s >= e) {
+				const adjusted = new Date(s);
+				adjusted.setHours(adjusted.getHours() + 1);
+				endsAt = isoToDatetimeLocal(adjusted.toISOString());
+			}
+		}
+	});
+
 	async function tokensToFacets(tokens: Token[]): Promise<Record<string, unknown>[]> {
 		const encoder = new TextEncoder();
 		const facets: Record<string, unknown>[] = [];
···
 			submitting = false;
 		}
 	}
+
+	let showDeleteConfirm = $state(false);
+	let deleting = $state(false);
+
+	async function handleDelete() {
+		deleting = true;
+		try {
+			await deleteRecord({
+				collection: 'community.lexicon.calendar.event',
+				rkey
+			});
+			localStorage.removeItem(DRAFT_KEY);
+			if (thumbnailKey) deleteImage(thumbnailKey);
+			const handle =
+				user.profile?.handle && user.profile.handle !== 'handle.invalid'
+					? user.profile.handle
+					: user.did;
+			goto(`/${handle}/events`);
+		} catch (e) {
+			console.error('Failed to delete event:', e);
+			error = 'Failed to delete event. Please try again.';
+		} finally {
+			deleting = false;
+			showDeleteConfirm = false;
+		}
+	}
 </script>
 
 <svelte:head>
···
 				<Button onclick={() => loginModalState.show()}>Log in</Button>
 			</div>
 		{:else}
-			<div class="mb-6 flex items-center gap-3">
-				<Badge size="sm">{isNew ? 'Local draft' : 'Local edit'}</Badge>
-				{#if hasDraft}
-					<button
-						type="button"
-						onclick={deleteDraft}
-						class="text-base-500 dark:text-base-400 cursor-pointer text-xs hover:text-red-500 hover:underline"
-					>
-						{isNew ? 'Delete draft' : 'Discard changes'}
-					</button>
-				{/if}
-			</div>
-
 			<form
 				onsubmit={(e) => {
 					e.preventDefault();
···
 								<span class="text-sm font-medium">Upload thumbnail</span>
 							</button>
 							{#if thumbnailPreview}
-								<button
-									type="button"
+								<Button
+									variant="ghost"
+									size="iconSm"
 									onclick={removeThumbnail}
-									aria-label="Remove thumbnail"
-									class="bg-base-900/70 absolute top-2 right-2 flex size-7 items-center justify-center rounded-full text-white opacity-0 transition-opacity group-hover:opacity-100 hover:bg-red-600"
+									class="bg-base-900/70 absolute top-2 right-2 text-white opacity-0 transition-opacity group-hover:opacity-100 hover:bg-red-600"
 								>
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
 										viewBox="0 0 20 20"
 										fill="currentColor"
-										class="size-4"
+										class="size-3.5"
 									>
 										<path
 											d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
 										/>
 									</svg>
-								</button>
+								</Button>
 							{/if}
 						</div>
 					</div>
 
 					<!-- Right column: event details -->
 					<div class="order-2 min-w-0 md:order-0 md:col-start-2 md:row-span-5 md:row-start-1">
-						<!-- Name -->
-						<input
-							type="text"
-							bind:value={name}
-							required
-							placeholder="Event name"
-							class="text-base-900 dark:text-base-50 placeholder:text-base-500 dark:placeholder:text-base-500 mb-2 w-full border-0 bg-transparent text-4xl leading-tight font-bold focus:border-0 focus:ring-0 focus:outline-none sm:text-5xl"
-						/>
+						<!-- Name + Save button -->
+						<div class="mb-2 flex items-start justify-between gap-4">
+							<textarea
+								bind:this={titleEl}
+								bind:value={name}
+								required
+								placeholder="Event name"
+								rows={1}
+								class="text-base-900 dark:text-base-50 placeholder:text-base-500 dark:placeholder:text-base-500 w-full min-w-0 resize-none border-0 bg-transparent px-0 text-4xl leading-tight font-bold focus:border-0 focus:ring-0 focus:outline-none sm:text-5xl"
+								style="field-sizing: content;"
+							></textarea>
+							<Button
+								type="submit"
+								size="sm"
+								class="shrink-0"
+								disabled={submitting || !name.trim() || !startsAt}
+							>
+								{submitting ? (isNew ? 'Creating...' : 'Saving...') : isNew ? 'Create' : 'Save'}
+							</Button>
+						</div>
 
 						<!-- Mode toggle -->
 						<div class="mb-8">
···
 						</div>
 
 						<!-- Date row -->
-						<div class="mb-4 flex items-center gap-4">
+						<div class="mb-4 flex items-start gap-4">
 							<div
-								class="border-base-200 dark:border-base-700 flex size-12 shrink-0 flex-col items-center justify-center overflow-hidden rounded-xl border"
+								class="border-base-200 dark:border-base-700 bg-base-100 dark:bg-base-950/30 flex size-12 shrink-0 flex-col items-center justify-center overflow-hidden rounded-xl border"
 							>
 								{#if startDate}
 									<span
···
 										viewBox="0 0 24 24"
 										stroke-width="1.5"
 										stroke="currentColor"
-										class="text-base-400 dark:text-base-500 size-5"
+										class="text-base-900 dark:text-base-200 size-5"
 									>
 										<path
 											stroke-linecap="round"
···
 								{/if}
 							</div>
 							<div class="flex-1">
-								{#if startDate}
-									<p class="text-base-900 dark:text-base-50 font-semibold">
-										{formatWeekday(startDate)}, {formatFullDate(startDate)}
-										{#if endDate && !isSameDay}
-											- {formatWeekday(endDate)}, {formatFullDate(endDate)}
+								{#if startDate && !editingDates}
+									<!-- Display mode: show formatted date, click to edit -->
+									<div class="flex items-start gap-2">
+										<button
+											type="button"
+											onclick={() => (editingDates = true)}
+											class="cursor-pointer text-left"
+										>
+											<p class="text-base-900 dark:text-base-50 font-semibold">
+												{formatWeekday(startDate)}, {formatFullDate(startDate)}
+												{#if endDate && !isSameDay}
+													- {formatWeekday(endDate)}, {formatFullDate(endDate)}
+												{/if}
+											</p>
+											<p class="text-base-500 dark:text-base-400 text-sm">
+												{formatTime(startDate)}
+												{#if endDate && isSameDay}
+													- {formatTime(endDate)}
+												{/if}
+											</p>
+										</button>
+										<Button variant="ghost" size="iconSm" onclick={() => (editingDates = true)}>
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke-width="1.5"
+												stroke="currentColor"
+												class="size-3.5"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"
+												/>
+											</svg>
+										</Button>
+									</div>
+								{:else}
+									<!-- Edit mode: show pickers -->
+									<div class="flex flex-col gap-2">
+										<div class="flex items-center gap-2">
+											{#if endsAt}
+												<span class="text-base-500 dark:text-base-400 w-9 text-xs">Start</span>
+											{/if}
+											<DateTimePicker bind:value={startsAt} required />
+										</div>
+										{#if endsAt}
+											<div class="flex items-center gap-2">
+												<span class="text-base-500 dark:text-base-400 w-9 text-xs">End</span>
+												<DateTimePicker bind:value={endsAt} minValue={startsAt} />
+												<Button variant="ghost" size="iconSm" onclick={() => (endsAt = '')}>
+													<svg
+														xmlns="http://www.w3.org/2000/svg"
+														fill="none"
+														viewBox="0 0 24 24"
+														stroke-width="1.5"
+														stroke="currentColor"
+														class="size-3.5"
+													>
+														<path
+															stroke-linecap="round"
+															stroke-linejoin="round"
+															d="M6 18 18 6M6 6l12 12"
+														/>
+													</svg>
+												</Button>
+											</div>
+										{:else}
+											<Button
+												variant="ghost"
+												size="sm"
+												class="w-fit"
+												onclick={() => {
+													if (startsAt) {
+														const d = new Date(startsAt);
+														d.setHours(d.getHours() + 1);
+														endsAt = isoToDatetimeLocal(d.toISOString());
+													} else {
+														endsAt = '';
+													}
+												}}
+											>
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke-width="1.5"
+													stroke="currentColor"
+													class="size-3.5"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														d="M12 4.5v15m7.5-7.5h-15"
+													/>
+												</svg>
+												Add end date
+											</Button>
 										{/if}
-									</p>
-									<p class="text-base-500 dark:text-base-400 text-sm">
-										{formatTime(startDate)}
-										{#if endDate && isSameDay}
-											- {formatTime(endDate)}
+										{#if startDate}
+											<Button size="sm" onclick={() => (editingDates = false)} class="mt-1 w-fit">
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													fill="none"
+													viewBox="0 0 24 24"
+													stroke-width="2"
+													stroke="currentColor"
+													class="size-3.5"
+												>
+													<path
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														d="m4.5 12.75 6 6 9-13.5"
+													/>
+												</svg>
+												Done
+											</Button>
 										{/if}
-									</p>
+									</div>
 								{/if}
-								<div class="mt-1 flex flex-wrap gap-3">
-									<label class="flex items-center gap-1.5">
-										<span class="text-base-500 dark:text-base-400 text-xs">Start</span>
-										<input
-											type="datetime-local"
-											bind:value={startsAt}
-											required
-											class="text-base-700 dark:text-base-300 bg-transparent text-xs focus:outline-none"
-										/>
-									</label>
-									<label class="flex items-center gap-1.5">
-										<span class="text-base-500 dark:text-base-400 text-xs">End</span>
-										<input
-											type="datetime-local"
-											bind:value={endsAt}
-											class="text-base-700 dark:text-base-300 bg-transparent text-xs focus:outline-none"
-										/>
-									</label>
-								</div>
 							</div>
 						</div>
 
···
 						{#if location}
 							<div class="mb-6 flex items-center gap-4">
 								<div
-									class="border-base-200 dark:border-base-700 flex size-12 shrink-0 items-center justify-center rounded-xl border"
+									class="border-base-200 dark:border-base-700 bg-base-100 dark:bg-base-950/30 flex size-12 shrink-0 items-center justify-center rounded-xl border"
 								>
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
···
 								<p class="text-base-900 dark:text-base-50 flex-1 font-semibold">
 									{getLocationDisplayString(location)}
 								</p>
-								<button
-									type="button"
-									onclick={removeLocation}
-									class="text-base-400 shrink-0 hover:text-red-500"
-									aria-label="Remove location"
-								>
+								<Button variant="ghost" size="iconSm" onclick={removeLocation} class="shrink-0">
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
 										viewBox="0 0 20 20"
 										fill="currentColor"
-										class="size-4"
+										class="size-3.5"
 									>
 										<path
 											d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
 										/>
 									</svg>
-								</button>
+								</Button>
 							</div>
 						{:else}
-							<button
-								type="button"
-								onclick={() => (showLocationModal = true)}
-								class="text-base-500 dark:text-base-400 hover:text-base-700 dark:hover:text-base-200 mb-6 flex items-center gap-4 transition-colors"
-							>
-								<div
-									class="border-base-200 dark:border-base-700 flex size-12 shrink-0 items-center justify-center rounded-xl border"
-								>
+							<div class="mb-6">
+								<Button variant="ghost" onclick={() => (showLocationModal = true)}>
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
 										fill="none"
 										viewBox="0 0 24 24"
 										stroke-width="1.5"
 										stroke="currentColor"
-										class="size-5"
+										class="size-4"
 									>
 										<path
 											stroke-linecap="round"
···
 											d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"
 										/>
 									</svg>
-								</div>
-								<span class="text-sm">Add location</span>
-							</button>
+									Add location
+								</Button>
+							</div>
 						{/if}
 
 						<!-- About Event -->
···
 								bind:value={description}
 								rows={4}
 								placeholder="What's this event about? @mentions, #hashtags and links will be detected automatically."
-								class="text-base-700 dark:text-base-300 placeholder:text-base-500 dark:placeholder:text-base-500 w-full resize-none border-0 bg-transparent leading-relaxed focus:border-0 focus:ring-0 focus:outline-none"
+								class="text-base-700 dark:text-base-300 placeholder:text-base-500 dark:placeholder:text-base-500 w-full resize-none border-0 bg-transparent px-0 leading-relaxed focus:border-0 focus:ring-0 focus:outline-none"
+								style="field-sizing: content;"
 							></textarea>
 						</div>
 
···
 							<p class="mb-4 text-sm text-red-600 dark:text-red-400">{error}</p>
 						{/if}
 
-						<Button type="submit" disabled={submitting}>
+						<Button type="submit" disabled={submitting || !name.trim() || !startsAt}>
 							{submitting
 								? isNew
 									? 'Creating...'
···
 									<span class="text-base-700 dark:text-base-300 truncate text-sm">
 										{link.name || link.uri.replace(/^https?:\/\//, '')}
 									</span>
-									<button
-										type="button"
+									<Button
+										variant="ghost"
+										size="iconSm"
 										onclick={() => removeLink(i)}
-										class="text-base-400 ml-auto shrink-0 opacity-0 transition-opacity group-hover:opacity-100 hover:text-red-500"
-										aria-label="Remove link"
+										class="ml-auto shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
 									>
 										<svg
 											xmlns="http://www.w3.org/2000/svg"
···
 												d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
 											/>
 										</svg>
-									</button>
+									</Button>
 								</div>
 							{/each}
 						</div>
 
-						<div class="relative mt-3">
-							<button
-								type="button"
-								onclick={() => (showLinkPopup = !showLinkPopup)}
-								class="text-base-500 dark:text-base-400 hover:text-base-700 dark:hover:text-base-200 flex items-center gap-1.5 text-sm transition-colors"
-							>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke-width="1.5"
-									stroke="currentColor"
-									class="size-4"
-								>
-									<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-								</svg>
-								Add link
-							</button>
+						<div class="mt-3">
+							<PopoverRoot bind:open={showLinkPopup}>
+								<PopoverTrigger>
+									<Button size="sm">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke-width="1.5"
+											stroke="currentColor"
+											class="size-4"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												d="M12 4.5v15m7.5-7.5h-15"
+											/>
+										</svg>
 
-							{#if showLinkPopup}
-								<div
-									class="border-base-200 dark:border-base-700 bg-base-50 dark:bg-base-900 absolute top-full left-0 z-10 mt-2 w-64 rounded-xl border p-3 shadow-lg"
-								>
-									<input
+										Add link
+									</Button>
+								</PopoverTrigger>
+								<PopoverContent side="bottom" sideOffset={8} class="w-64 p-3">
+									<Input
 										type="url"
 										bind:value={newLinkUri}
 										placeholder="https://..."
-										class="border-base-300 dark:border-base-700 bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100 placeholder:text-base-400 dark:placeholder:text-base-600 mb-2 w-full rounded-lg border px-2.5 py-1.5 text-sm focus:outline-none"
+										variant="secondary"
+										class="mb-2"
+										onkeydown={(e) => {
+											if (e.key === 'Enter') {
+												e.preventDefault();
+												addLink();
+											}
+										}}
 									/>
-									<input
+									<Input
 										type="text"
 										bind:value={newLinkName}
 										placeholder="Label (optional)"
-										class="border-base-300 dark:border-base-700 bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100 placeholder:text-base-400 dark:placeholder:text-base-600 mb-3 w-full rounded-lg border px-2.5 py-1.5 text-sm focus:outline-none"
+										variant="secondary"
+										class="mb-2"
+										onkeydown={(e) => {
+											if (e.key === 'Enter') {
+												e.preventDefault();
+												addLink();
+											}
+										}}
 									/>
+									{#if linkError}
+										<p class="mb-2 text-xs text-red-500">{linkError}</p>
+									{/if}
 									<div class="flex justify-end gap-2">
-										<button
-											type="button"
-											onclick={() => (showLinkPopup = false)}
-											class="text-base-500 dark:text-base-400 text-xs hover:underline"
+										<Button
+											variant="ghost"
+											size="sm"
+											onclick={() => {
+												showLinkPopup = false;
+												linkError = '';
+												newLinkUri = '';
+												newLinkName = '';
+											}}
 										>
 											Cancel
-										</button>
-										<button
-											type="button"
-											onclick={addLink}
-											disabled={!newLinkUri.trim()}
-											class="bg-base-900 dark:bg-base-100 text-base-50 dark:text-base-900 disabled:bg-base-300 dark:disabled:bg-base-700 rounded-lg px-3 py-1 text-xs font-medium disabled:cursor-not-allowed"
-										>
-											Add
-										</button>
+										</Button>
+										<Button onclick={addLink} size="sm" disabled={!newLinkUri.trim()}>Add</Button>
 									</div>
-								</div>
-							{/if}
+								</PopoverContent>
+							</PopoverRoot>
 						</div>
 					</div>
 				</div>
+
+				{#if !isNew}
+					<div class="border-base-200 dark:border-base-800 mt-12 border-t pt-8">
+						{#if showDeleteConfirm}
+							<div class="flex items-center gap-3">
+								<p class="text-sm text-red-600 dark:text-red-400">
+									Are you sure? This cannot be undone.
+								</p>
+								<Button
+									variant="secondary"
+									size="sm"
+									onclick={() => (showDeleteConfirm = false)}
+									disabled={deleting}
+								>
+									Cancel
+								</Button>
+								<Button
+									size="sm"
+									onclick={handleDelete}
+									disabled={deleting}
+									variant="red"
+								>
+									{deleting ? 'Deleting...' : 'Delete'}
+								</Button>
+							</div>
+						{:else}
+							<Button
+								variant="red"
+								onclick={() => (showDeleteConfirm = true)}
+							>
+								Delete event
+							</Button>
+						{/if}
+					</div>
+				{/if}
 			</form>
 		{/if}
 	</div>
···
 		class="mt-2"
 	>
 		<div class="flex gap-2">
-			<input
-				type="text"
-				bind:value={locationSearch}
-				placeholder="Search for a city or address..."
-				class="border-base-300 dark:border-base-700 bg-base-100 dark:bg-base-800 text-base-900 dark:text-base-100 placeholder:text-base-400 dark:placeholder:text-base-600 flex-1 rounded-lg border px-3 py-2 text-sm focus:outline-none"
-			/>
+			<Input type="text" class="flex-1" bind:value={locationSearch} />
 			<Button type="submit" disabled={locationSearching || !locationSearch.trim()}>
 				{locationSearching ? 'Searching...' : 'Search'}
 			</Button>