refactor(ExpirationPicker): remove ZonedDateTime dep, use native Temporal and datetime-local input

Author: hhvrc

src/lib/components/ExpirationPicker.svelte

@@ -1,21 +1,15 @@
 <script lang="ts">
-  import type { ZonedDateTime } from '@internationalized/date';
-  import DateTimePicker from '$lib/components/datetime-picker/date-time-picker.svelte';
   import * as Select from '$lib/components/ui/select';
   import { GetValResColor } from '$lib/types/ValidationResult';
-  import { durationBetween, formatElapsed, instantFromDate } from '$lib/utils';
+  import { durationBetween, formatElapsed } from '$lib/utils';
 
   interface Props {
     option?: string;
-    customDate?: ZonedDateTime | undefined;
     instant?: Temporal.Instant | null;
   }
 
-  let {
-    option = $bindable('never'),
-    customDate = $bindable<ZonedDateTime | undefined>(undefined),
-    instant = $bindable<Temporal.Instant | null>(null),
-  }: Props = $props();
+  let { option = $bindable('never'), instant = $bindable<Temporal.Instant | null>(null) }: Props =
+    $props();
 
   const inDays = (days: number) => () => Temporal.Now.instant().add({ hours: days * 24 });
 
@@ -25,11 +19,7 @@
     getInstant: () => Temporal.Instant | null;
   }[] = [
     { value: 'never', label: 'Never', getInstant: () => null },
-    {
-      value: 'custom',
-      label: 'Custom',
-      getInstant: () => (customDate !== undefined ? instantFromDate(customDate.toDate()) : null),
-    },
+    { value: 'custom', label: 'Custom', getInstant: () => customInstant },
     { value: '1days', label: '1 Day', getInstant: inDays(1) },
     { value: '7days', label: '7 Days', getInstant: inDays(7) },
     { value: '30days', label: '30 Days', getInstant: inDays(30) },
@@ -38,14 +28,25 @@
     { value: '365days', label: '365 Days', getInstant: inDays(365) },
   ];
 
+  let customValue = $state('');
+  let customInstant = $derived.by<Temporal.Instant | null>(() => {
+    if (!customValue) return null;
+    try {
+      return Temporal.PlainDateTime.from(customValue)
+        .toZonedDateTime(Temporal.Now.timeZoneId())
+        .toInstant();
+    } catch {
+      return null;
+    }
+  });
+
   let selectedExpiration = $derived(expirationOptions.find((o) => o.value === option));
-  let _instant = $derived(selectedExpiration?.getInstant() ?? null);
   $effect(() => {
-    instant = _instant;
+    instant = selectedExpiration?.getInstant() ?? null;
   });
 
   let validationResult = $derived(
-    option === 'custom' && !customDate
+    option === 'custom' && !customInstant
       ? { valid: false, message: 'Expire date is required' }
       : { valid: true }
   );
@@ -67,8 +68,12 @@
   </Select.Root>
 
   {#if option === 'custom'}
-    <div class="my-2 w-1/2">
-      <DateTimePicker bind:date={customDate} />
+    <div class="my-2">
+      <input
+        type="datetime-local"
+        bind:value={customValue}
+        class="rounded border px-2 py-1 text-sm"
+      />
     </div>
   {/if}
   {#if 'message' in validationResult}

src/routes/(app)/settings/api-tokens/dialog-token-create.svelte

@@ -1,7 +1,6 @@
 <script lang="ts" module>
   import { PermissionType, tokensCreateToken } from '$lib/api';
   import type { TokenCreatedResponse } from '$lib/api';
-  import type { ZonedDateTime } from '@internationalized/date';
   import type { ValidationResult } from '$lib/types/ValidationResult';
 
   type PermissionCategory = {
@@ -56,7 +55,6 @@
 
   let name = $state<string>('');
   let expire = $state('never');
-  let expireCustom = $state<ZonedDateTime | undefined>(undefined);
   let expireInstant = $state<Temporal.Instant | null>(null);
   let permissions = $state<PermissionType[]>([PermissionType.ShockersUse]);
 
@@ -65,7 +63,7 @@
     if (!o) {
       name = '';
       expire = 'never';
-      expireCustom = undefined;
+
       permissions = [PermissionType.ShockersUse];
     }
     open = o;
@@ -103,11 +101,7 @@
         validationResult={nameValidationResult}
       />
 
-      <ExpirationPicker
-        bind:option={expire}
-        bind:customDate={expireCustom}
-        bind:instant={expireInstant}
-      />
+      <ExpirationPicker bind:option={expire} bind:instant={expireInstant} />
 
       <div class="mt-4">
         <h2>Permissions</h2>

src/routes/(app)/shares/public/dialog-publicshare-create.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import type { ZonedDateTime } from '@internationalized/date';
   import { shareLinksCreatePublicShare } from '$lib/api';
   import ExpirationPicker from '$lib/components/ExpirationPicker.svelte';
   import TextInput from '$lib/components/input/TextInput.svelte';
@@ -16,7 +15,6 @@
 
   let name = $state('');
   let expireOption = $state('never');
-  let customExpire = $state<ZonedDateTime | undefined>();
   let expireInstant = $state<Temporal.Instant | null>(null);
 
   function createShareLink() {
@@ -39,11 +37,7 @@
       <Dialog.Title>Create Public Share</Dialog.Title>
     </Dialog.Header>
     <TextInput label="Name" bind:value={name} />
-    <ExpirationPicker
-      bind:option={expireOption}
-      bind:customDate={customExpire}
-      bind:instant={expireInstant}
-    />
+    <ExpirationPicker bind:option={expireOption} bind:instant={expireInstant} />
 
     <Button onclick={createShareLink}>Create</Button>
   </Dialog.Content>