From 609092582ea849a2ade1238424480361506464b1 Mon Sep 17 00:00:00 2001
From: Snowknight26 <Snowknight26@users.noreply.github.com>
Date: Mon, 23 Feb 2026 09:40:40 -0600
Subject: [PATCH 1/3] chore(web): deduplicate storage template examples

---
 .../SupportedDatetimePanel.svelte             | 88 +++++--------------
 1 file changed, 21 insertions(+), 67 deletions(-)

diff --git a/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte b/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
index de455380a9278..c30bb27d9ce60 100644
--- a/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
+++ b/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
@@ -11,85 +11,39 @@
 
   let { options }: Props = $props();
 
-  const getLuxonExample = (format: string) => {
-    return DateTime.fromISO('2022-02-15T20:03:05.250Z', { locale: $locale }).toFormat(format);
-  };
+  const getExampleDate = () => DateTime.fromISO('2022-02-15T20:03:05.250Z', { locale: $locale });
+
 </script>
 
+{#snippet example(title: string, options: Array)}
+  <div>
+    <Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{title}</Text>
+    <ul>
+      {#each options as format, index (index)}
+        <li>{`{{${format}}} - ${getExampleDate().toFormat(format)}`}</li>
+      {/each}
+    </ul>
+  </div>
+{/snippet}
+
 <Text size="small">{$t('date_and_time')}</Text>
 
-<!-- eslint-disable svelte/no-useless-mustaches -->
 <Card class="mt-2 text-sm bg-light-50 shadow-none">
   <CardHeader>
     <Text class="mb-1">{$t('admin.storage_template_date_time_description')}</Text>
     <Text color="primary"
-      >{$t('admin.storage_template_date_time_sample', { values: { date: '2022-02-15T20:03:05.250+00:00' } })}</Text
+      >{$t('admin.storage_template_date_time_sample', { values: { date: getExampleDate().toISO() }})}</Text
     >
   </CardHeader>
   <CardBody>
     <div class="grid grid-cols-1 gap-6 sm:grid-cols-3 md:grid-cols-4">
-      <div>
-        <Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('year')}</Text>
-        <ul>
-          {#each options.yearOptions as yearFormat, index (index)}
-            <li>{'{{'}{yearFormat}{'}}'} - {getLuxonExample(yearFormat)}</li>
-          {/each}
-        </ul>
-      </div>
-
-      <div>
-        <Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('month')}</Text>
-        <ul>
-          {#each options.monthOptions as monthFormat, index (index)}
-            <li>{'{{'}{monthFormat}{'}}'} - {getLuxonExample(monthFormat)}</li>
-          {/each}
-        </ul>
-      </div>
-
-      <div>
-        <Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('week')}</Text>
-        <ul>
-          {#each options.weekOptions as weekFormat, index (index)}
-            <li>{'{{'}{weekFormat}{'}}'} - {getLuxonExample(weekFormat)}</li>
-          {/each}
-        </ul>
-      </div>
-
-      <div>
-        <Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('day')}</Text>
-        <ul>
-          {#each options.dayOptions as dayFormat, index (index)}
-            <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
-          {/each}
-        </ul>
-      </div>
-
-      <div>
-        <Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('hour')}</Text>
-        <ul>
-          {#each options.hourOptions as dayFormat, index (index)}
-            <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
-          {/each}
-        </ul>
-      </div>
-
-      <div>
-        <Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('minute')}</Text>
-        <ul>
-          {#each options.minuteOptions as dayFormat, index (index)}
-            <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
-          {/each}
-        </ul>
-      </div>
-
-      <div>
-        <Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{$t('second')}</Text>
-        <ul>
-          {#each options.secondOptions as dayFormat, index (index)}
-            <li>{'{{'}{dayFormat}{'}}'} - {getLuxonExample(dayFormat)}</li>
-          {/each}
-        </ul>
-      </div>
+      {@render example($t('year'), options.yearOptions)}
+      {@render example($t('month'), options.monthOptions)}
+      {@render example($t('week'), options.weekOptions)}
+      {@render example($t('day'), options.dayOptions)}
+      {@render example($t('hour'), options.hourOptions)}
+      {@render example($t('minute'), options.minuteOptions)}
+      {@render example($t('second'), options.secondOptions)}
     </div>
   </CardBody>
 </Card>

From da5c73a3db4f91519d2ed7abb9ccf5484eccdb40 Mon Sep 17 00:00:00 2001
From: Snowknight26 <Snowknight26@users.noreply.github.com>
Date: Mon, 23 Feb 2026 10:16:36 -0600
Subject: [PATCH 2/3] Fix type check

---
 .../lib/components/admin-settings/SupportedDatetimePanel.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte b/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
index c30bb27d9ce60..93da47ca63da0 100644
--- a/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
+++ b/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
@@ -15,7 +15,7 @@
 
 </script>
 
-{#snippet example(title: string, options: Array)}
+{#snippet example(title: string, options: Array<string>)}
   <div>
     <Text fontWeight="medium" size="tiny" color="primary" class="mb-1">{title}</Text>
     <ul>

From 79fa05351a094407c72fa1d41c0b755b182bbd5f Mon Sep 17 00:00:00 2001
From: Snowknight26 <Snowknight26@users.noreply.github.com>
Date: Mon, 23 Feb 2026 13:47:56 -0600
Subject: [PATCH 3/3] Fix formatting

---
 .../components/admin-settings/SupportedDatetimePanel.svelte    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte b/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
index 93da47ca63da0..c22d3cb792ff9 100644
--- a/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
+++ b/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
@@ -12,7 +12,6 @@
   let { options }: Props = $props();
 
   const getExampleDate = () => DateTime.fromISO('2022-02-15T20:03:05.250Z', { locale: $locale });
-
 </script>
 
 {#snippet example(title: string, options: Array<string>)}
@@ -32,7 +31,7 @@
   <CardHeader>
     <Text class="mb-1">{$t('admin.storage_template_date_time_description')}</Text>
     <Text color="primary"
-      >{$t('admin.storage_template_date_time_sample', { values: { date: getExampleDate().toISO() }})}</Text
+      >{$t('admin.storage_template_date_time_sample', { values: { date: getExampleDate().toISO() } })}</Text
     >
   </CardHeader>
   <CardBody>