feat(web): default to date storage template during onboarding (#31989)

Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>

web/src/lib/components/admin-settings/StorageTemplateSettings.svelte

@@ -23,9 +23,10 @@
     minified?: boolean;
     duration?: number;
     saveOnClose?: boolean;
+    preselectDate?: boolean;
   };
 
-  const { minified = false, duration = 500, saveOnClose = false }: Props = $props();
+  const { minified = false, duration = 500, saveOnClose = false, preselectDate = false }: Props = $props();
 
   const DATE_TEMPLATE = '{{y}}/{{MM}}/{{dd}}/{{filename}}';
 
@@ -41,6 +42,12 @@
   const config = $derived(systemConfigManager.value);
   let configToEdit = $state(systemConfigManager.cloneValue());
 
+  // TODO remove once we support partial overwriting with database values
+  if (preselectDate && !featureFlagsManager.value.configFile && !configToEdit.storageTemplate.enabled) {
+    configToEdit.storageTemplate.enabled = true;
+    configToEdit.storageTemplate.template = DATE_TEMPLATE;
+  }
+
   let templateOptions: SystemConfigTemplateStorageOptionDto | undefined = $state();
   let selectedPreset = $state('');
   let customTemplate = $state(systemConfigManager.value.storageTemplate.template);

web/src/routes/auth/onboarding/OnboardingStorageTemplate.svelte

@@ -1,7 +1,19 @@
+<script module lang="ts">
+  let visited = false;
+
+  const isFirstVisit = () => {
+    const firstVisit = !visited;
+    visited = true;
+    return firstVisit;
+  };
+</script>
+
 <script lang="ts">
   import StorageTemplateSettings from '$lib/components/admin-settings/StorageTemplateSettings.svelte';
   import FormatMessage from '$lib/elements/FormatMessage.svelte';
   import { authManager } from '$lib/managers/auth-manager.svelte';
+
+  const preselectDate = isFirstVisit();
 </script>
 
 <div class="flex flex-col gap-2">
@@ -10,6 +22,6 @@
   </p>
 
   {#if authManager.authenticated}
-    <StorageTemplateSettings minified duration={0} saveOnClose />
+    <StorageTemplateSettings minified duration={0} saveOnClose {preselectDate} />
   {/if}
 </div>