refactor: shared links modals (#23803)

web/src/lib/components/SharedLinkExpiration.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
+  import { locale } from '$lib/stores/preferences.store';
+  import { minBy } from 'lodash-es';
+  import { DateTime, Duration } from 'luxon';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    createdAt?: string;
+    expiresAt: string | null;
+  };
+
+  let { createdAt = DateTime.now().toISO(), expiresAt = $bindable() }: Props = $props();
+
+  const expirationOptions: [number, Intl.RelativeTimeFormatUnit][] = [
+    [30, 'minutes'],
+    [1, 'hour'],
+    [6, 'hours'],
+    [1, 'day'],
+    [7, 'days'],
+    [30, 'days'],
+    [3, 'months'],
+    [1, 'year'],
+  ];
+
+  const relativeTime = $derived(new Intl.RelativeTimeFormat($locale));
+  const expiredDateOptions = $derived([
+    { text: $t('never'), value: 0 },
+    ...expirationOptions
+      .map(([value, unit]) => ({
+        text: relativeTime.format(value, unit),
+        value: Duration.fromObject({ [unit]: value }).toMillis(),
+      }))
+      .filter(({ value: millis }) => DateTime.fromISO(createdAt).plus(millis) > DateTime.now()),
+  ]);
+
+  const getExpirationOption = (createdAt: string, expiresAt: string | null) => {
+    if (!expiresAt) {
+      return expiredDateOptions[0];
+    }
+
+    const delta = DateTime.fromISO(expiresAt).diff(DateTime.fromISO(createdAt)).toMillis();
+    const closestOption = minBy(expiredDateOptions, ({ value }) => Math.abs(delta - value));
+
+    if (!closestOption) {
+      return expiredDateOptions[0];
+    }
+
+    // allow a generous epsilon to compensate for potential API delays
+    if (Math.abs(closestOption.value - delta) > 10_000) {
+      const interval = DateTime.fromMillis(closestOption.value) as DateTime<true>;
+      return { text: interval.toRelative({ locale: $locale }), value: closestOption.value };
+    }
+
+    return closestOption;
+  };
+
+  const onSelect = (option: number | string) => {
+    const expirationOption = Number(option);
+
+    expiresAt = expirationOption === 0 ? null : DateTime.fromISO(createdAt).plus(expirationOption).toISO();
+  };
+
+  let expirationOption = $derived(getExpirationOption(createdAt, expiresAt).value);
+</script>
+
+<div class="mt-2">
+  <SettingSelect
+    bind:value={expirationOption}
+    {onSelect}
+    options={[...new Set([...expiredDateOptions, getExpirationOption(createdAt, expiresAt)])]}
+    label={$t('expire_after')}
+    disabled={expiresAt !== null && DateTime.fromISO(expiresAt) < DateTime.now()}
+    number={true}
+  />
+</div>