From 9dd2633e0c1ae35d0aa765fe99bdcb77217926fa Mon Sep 17 00:00:00 2001
From: Snowknight26 <Snowknight26@users.noreply.github.com>
Date: Mon, 2 Mar 2026 05:52:02 -0600
Subject: [PATCH] chore(web): deduplicate storage template examples (#26462)

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

diff --git a/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte b/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
index de455380a9..c22d3cb792 100644
--- a/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
+++ b/web/src/lib/components/admin-settings/SupportedDatetimePanel.svelte
@@ -11,85 +11,38 @@
 
   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<string>)}
+  <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>