chore(web): standardize settings labels (#10303)

* chore(web): standardize settings labels

- spelling out "max" and "min" in full
- accordions use title case
- labels for settings all use sentence case
- remove the "Enable"/"Enabled"/"ENABLED" titles for toggles, in favor
  of just using the description
- change any gray labels to be immich blue, to match the look and feel
  of the other settings

* chore: update user settings toggle, remove unused "enable" strings

web/src/lib/components/admin-page/settings/auth/auth-settings.svelte

@@ -88,8 +88,7 @@
 
             <SettingSwitch
               {disabled}
-              title={$t('enable').toUpperCase()}
-              subtitle={$t('admin.oauth_enable_description')}
+              title={$t('admin.oauth_enable_description')}
               bind:checked={config.oauth.enabled}
             />
 
@@ -223,9 +222,8 @@
           <div class="ml-4 mt-4 flex flex-col gap-4">
             <div class="ml-4 mt-4 flex flex-col">
               <SettingSwitch
-                title={$t('enabled')}
+                title={$t('admin.password_enable_description')}
                 {disabled}
-                subtitle={$t('admin.password_enable_description')}
                 bind:checked={config.passwordLogin.enabled}
               />
             </div>

web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte

@@ -82,7 +82,7 @@
         />
 
         <SettingSelect
-          label={$t('admin.transcoding_audio_codec').toUpperCase()}
+          label={$t('admin.transcoding_audio_codec')}
           {disabled}
           desc={$t('admin.transcoding_audio_codec_description')}
           bind:value={config.ffmpeg.targetAudioCodec}
@@ -100,7 +100,7 @@
         />
 
         <SettingCheckboxes
-          label={$t('admin.transcoding_accepted_audio_codecs').toUpperCase()}
+          label={$t('admin.transcoding_accepted_audio_codecs')}
           {disabled}
           desc={$t('admin.transcoding_accepted_audio_codecs_description')}
           bind:value={config.ffmpeg.acceptedAudioCodecs}
@@ -114,7 +114,7 @@
         />
 
         <SettingSelect
-          label={$t('admin.transcoding_video_codec').toUpperCase()}
+          label={$t('admin.transcoding_video_codec')}
           {disabled}
           desc={$t('admin.transcoding_video_codec_description')}
           bind:value={config.ffmpeg.targetVideoCodec}
@@ -130,7 +130,7 @@
         />
 
         <SettingCheckboxes
-          label={$t('admin.transcoding_accepted_video_codecs').toUpperCase()}
+          label={$t('admin.transcoding_accepted_video_codecs')}
           {disabled}
           desc={$t('admin.transcoding_accepted_video_codecs_description')}
           bind:value={config.ffmpeg.acceptedVideoCodecs}
@@ -145,7 +145,7 @@
         />
 
         <SettingSelect
-          label={$t('admin.transcoding_target_resolution').toUpperCase()}
+          label={$t('admin.transcoding_target_resolution')}
           {disabled}
           desc={$t('admin.transcoding_target_resolution_description')}
           bind:value={config.ffmpeg.targetResolution}
@@ -164,7 +164,7 @@
         <SettingInputField
           inputType={SettingInputFieldType.TEXT}
           {disabled}
-          label={$t('admin.transcoding_max_bitrate').toUpperCase()}
+          label={$t('admin.transcoding_max_bitrate')}
           desc={$t('admin.transcoding_max_bitrate_description')}
           bind:value={config.ffmpeg.maxBitrate}
           isEdited={config.ffmpeg.maxBitrate !== savedConfig.ffmpeg.maxBitrate}
@@ -173,14 +173,14 @@
         <SettingInputField
           inputType={SettingInputFieldType.NUMBER}
           {disabled}
-          label={$t('admin.transcoding_threads').toUpperCase()}
+          label={$t('admin.transcoding_threads')}
           desc={$t('admin.transcoding_threads_description')}
           bind:value={config.ffmpeg.threads}
           isEdited={config.ffmpeg.threads !== savedConfig.ffmpeg.threads}
         />
 
         <SettingSelect
-          label={$t('admin.transcoding_transcode_policy').toUpperCase()}
+          label={$t('admin.transcoding_transcode_policy')}
           {disabled}
           desc={$t('admin.transcoding_transcode_policy_description')}
           bind:value={config.ffmpeg.transcode}
@@ -208,7 +208,7 @@
         />
 
         <SettingSelect
-          label={$t('admin.transcoding_tone_mapping').toUpperCase()}
+          label={$t('admin.transcoding_tone_mapping')}
           {disabled}
           desc={$t('admin.transcoding_tone_mapping_description')}
           bind:value={config.ffmpeg.tonemap}
@@ -235,7 +235,7 @@
         />
 
         <SettingSwitch
-          title={$t('admin.transcoding_two_pass_encoding').toUpperCase()}
+          title={$t('admin.transcoding_two_pass_encoding')}
           {disabled}
           subtitle={$t('admin.transcoding_two_pass_encoding_setting_description')}
           bind:checked={config.ffmpeg.twoPass}
@@ -249,7 +249,7 @@
         >
           <div class="ml-4 mt-4 flex flex-col gap-4">
             <SettingSelect
-              label={$t('admin.transcoding_acceleration_api').toUpperCase()}
+              label={$t('admin.transcoding_acceleration_api')}
               {disabled}
               desc={$t('admin.transcoding_acceleration_api_description')}
               bind:value={config.ffmpeg.accel}
@@ -277,7 +277,7 @@
             />
 
             <SettingSwitch
-              title={$t('admin.transcoding_hardware_decoding').toUpperCase()}
+              title={$t('admin.transcoding_hardware_decoding')}
               {disabled}
               subtitle={$t('admin.transcoding_hardware_decoding_setting_description')}
               bind:checked={config.ffmpeg.accelDecode}
@@ -285,7 +285,7 @@
             />
 
             <SettingSelect
-              label={$t('admin.transcoding_constant_quality_mode').toUpperCase()}
+              label={$t('admin.transcoding_constant_quality_mode')}
               desc={$t('admin.transcoding_constant_quality_mode_description')}
               bind:value={config.ffmpeg.cqMode}
               options={[
@@ -298,7 +298,7 @@
             />
 
             <SettingSwitch
-              title={$t('admin.transcoding_temporal_aq').toUpperCase()}
+              title={$t('admin.transcoding_temporal_aq')}
               {disabled}
               subtitle={$t('admin.transcoding_temporal_aq_description')}
               bind:checked={config.ffmpeg.temporalAQ}
@@ -307,7 +307,7 @@
 
             <SettingInputField
               inputType={SettingInputFieldType.TEXT}
-              label={$t('admin.transcoding_preferred_hardware_device').toUpperCase()}
+              label={$t('admin.transcoding_preferred_hardware_device')}
               desc={$t('admin.transcoding_preferred_hardware_device_description')}
               bind:value={config.ffmpeg.preferredHwDevice}
               isEdited={config.ffmpeg.preferredHwDevice !== savedConfig.ffmpeg.preferredHwDevice}
@@ -324,7 +324,7 @@
           <div class="ml-4 mt-4 flex flex-col gap-4">
             <SettingInputField
               inputType={SettingInputFieldType.NUMBER}
-              label={$t('admin.transcoding_tone_mapping_npl').toUpperCase()}
+              label={$t('admin.transcoding_tone_mapping_npl')}
               desc={$t('admin.transcoding_tone_mapping_npl_description')}
               bind:value={config.ffmpeg.npl}
               isEdited={config.ffmpeg.npl !== savedConfig.ffmpeg.npl}
@@ -333,7 +333,7 @@
 
             <SettingInputField
               inputType={SettingInputFieldType.NUMBER}
-              label={$t('admin.transcoding_max_b_frames').toUpperCase()}
+              label={$t('admin.transcoding_max_b_frames')}
               desc={$t('admin.transcoding_max_b_frames_description')}
               bind:value={config.ffmpeg.bframes}
               isEdited={config.ffmpeg.bframes !== savedConfig.ffmpeg.bframes}
@@ -342,7 +342,7 @@
 
             <SettingInputField
               inputType={SettingInputFieldType.NUMBER}
-              label={$t('admin.transcoding_reference_frames').toUpperCase()}
+              label={$t('admin.transcoding_reference_frames')}
               desc={$t('admin.transcoding_reference_frames_description')}
               bind:value={config.ffmpeg.refs}
               isEdited={config.ffmpeg.refs !== savedConfig.ffmpeg.refs}
@@ -351,7 +351,7 @@
 
             <SettingInputField
               inputType={SettingInputFieldType.NUMBER}
-              label={$t('admin.transcoding_max_keyframe_interval').toUpperCase()}
+              label={$t('admin.transcoding_max_keyframe_interval')}
               desc={$t('admin.transcoding_max_keyframe_interval_description')}
               bind:value={config.ffmpeg.gopSize}
               isEdited={config.ffmpeg.gopSize !== savedConfig.ffmpeg.gopSize}

web/src/lib/components/admin-page/settings/image/image-settings.svelte

@@ -26,7 +26,7 @@
     <form autocomplete="off" on:submit|preventDefault>
       <div class="ml-4 mt-4 flex flex-col gap-4">
         <SettingSelect
-          label={$t('admin.image_thumbnail_format').toUpperCase()}
+          label={$t('admin.image_thumbnail_format')}
           desc={$t('admin.image_format_description')}
           bind:value={config.image.thumbnailFormat}
           options={[
@@ -39,7 +39,7 @@
         />
 
         <SettingSelect
-          label={$t('admin.image_thumbnail_resolution').toUpperCase()}
+          label={$t('admin.image_thumbnail_resolution')}
           desc={$t('admin.image_thumbnail_resolution_description')}
           number
           bind:value={config.image.thumbnailSize}
@@ -56,7 +56,7 @@
         />
 
         <SettingSelect
-          label={$t('admin.image_preview_format').toUpperCase()}
+          label={$t('admin.image_preview_format')}
           desc={$t('admin.image_format_description')}
           bind:value={config.image.previewFormat}
           options={[
@@ -69,7 +69,7 @@
         />
 
         <SettingSelect
-          label={$t('admin.image_preview_resolution').toUpperCase()}
+          label={$t('admin.image_preview_resolution')}
           desc={$t('admin.image_preview_resolution_description')}
           number
           bind:value={config.image.previewSize}
@@ -86,7 +86,7 @@
 
         <SettingInputField
           inputType={SettingInputFieldType.NUMBER}
-          label={$t('admin.image_quality').toUpperCase()}
+          label={$t('admin.image_quality')}
           desc={$t('admin.image_quality_description')}
           bind:value={config.image.quality}
           isEdited={config.image.quality !== savedConfig.image.quality}
@@ -94,7 +94,7 @@
         />
 
         <SettingSwitch
-          title={$t('admin.image_prefer_wide_gamut').toUpperCase()}
+          title={$t('admin.image_prefer_wide_gamut')}
           subtitle={$t('admin.image_prefer_wide_gamut_setting_description')}
           checked={config.image.colorspace === Colorspace.P3}
           on:toggle={(e) => (config.image.colorspace = e.detail ? Colorspace.P3 : Colorspace.Srgb)}
@@ -103,7 +103,7 @@
         />
 
         <SettingSwitch
-          title={$t('admin.image_prefer_embedded_preview').toUpperCase()}
+          title={$t('admin.image_prefer_embedded_preview')}
           subtitle={$t('admin.image_prefer_embedded_preview_setting_description')}
           checked={config.image.extractEmbedded}
           on:toggle={() => (config.image.extractEmbedded = !config.image.extractEmbedded)}

web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte

@@ -38,9 +38,8 @@
       <form autocomplete="off" on:submit|preventDefault>
         <div class="ml-4 mt-4 flex flex-col gap-4">
           <SettingSwitch
-            title={$t('enable')}
+            title={$t('admin.library_watching_enable_description')}
             {disabled}
-            subtitle={$t('admin.library_watching_enable_description')}
             bind:checked={config.library.watch.enabled}
           />
         </div>
@@ -65,14 +64,18 @@
       <form autocomplete="off" on:submit|preventDefault>
         <div class="ml-4 mt-4 flex flex-col gap-4">
           <SettingSwitch
-            title={$t('enabled').toUpperCase()}
+            title={$t('admin.library_scanning_enable_description')}
             {disabled}
-            subtitle={$t('admin.library_scanning_enable_description')}
             bind:checked={config.library.scan.enabled}
           />
 
           <div class="flex flex-col my-2 dark:text-immich-dark-fg">
-            <label class="text-sm" for="expression-select">{$t('admin.library_cron_expression_presets')}</label>
+            <label
+              class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm"
+              for="expression-select"
+            >
+              {$t('admin.library_cron_expression_presets')}
+            </label>
             <select
               class="p-2 mt-2 text-sm rounded-lg bg-slate-200 hover:cursor-pointer dark:bg-gray-600"
               disabled={disabled || !config.library.scan.enabled}

web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte

@@ -22,13 +22,12 @@
     <form autocomplete="off" on:submit|preventDefault>
       <div class="ml-4 mt-4 flex flex-col gap-4">
         <SettingSwitch
-          title={$t('enabled').toUpperCase()}
+          title={$t('admin.logging_enable_description')}
           {disabled}
-          subtitle={$t('admin.logging_enable_description')}
           bind:checked={config.logging.enabled}
         />
         <SettingSelect
-          label={$t('level').toUpperCase()}
+          label={$t('level')}
           desc={$t('admin.logging_level_description')}
           bind:value={config.logging.level}
           options={[

web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte

@@ -27,7 +27,7 @@
     <form autocomplete="off" on:submit|preventDefault class="mx-4 mt-4">
       <div class="flex flex-col gap-4">
         <SettingSwitch
-          title={$t('enabled').toUpperCase()}
+          title={$t('admin.machine_learning_enabled')}
           subtitle={$t('admin.machine_learning_enabled_description')}
           {disabled}
           bind:checked={config.machineLearning.enabled}
@@ -37,7 +37,7 @@
 
         <SettingInputField
           inputType={SettingInputFieldType.TEXT}
-          label={$t('url').toUpperCase()}
+          label={$t('url')}
           desc={$t('admin.machine_learning_url_description')}
           bind:value={config.machineLearning.url}
           required={true}
@@ -53,7 +53,7 @@
       >
         <div class="ml-4 mt-4 flex flex-col gap-4">
           <SettingSwitch
-            title={$t('enabled').toUpperCase()}
+            title={$t('admin.machine_learning_smart_search_enabled')}
             subtitle={$t('admin.machine_learning_smart_search_enabled_description')}
             bind:checked={config.machineLearning.clip.enabled}
             disabled={disabled || !config.machineLearning.enabled}
@@ -63,7 +63,7 @@
 
           <SettingInputField
             inputType={SettingInputFieldType.TEXT}
-            label={$t('admin.machine_learning_clip_model').toUpperCase()}
+            label={$t('admin.machine_learning_clip_model')}
             bind:value={config.machineLearning.clip.modelName}
             required={true}
             disabled={disabled || !config.machineLearning.enabled || !config.machineLearning.clip.enabled}
@@ -84,7 +84,7 @@
       >
         <div class="ml-4 mt-4 flex flex-col gap-4">
           <SettingSwitch
-            title={$t('enabled').toUpperCase()}
+            title={$t('admin.machine_learning_duplicate_detection_enabled')}
             subtitle={$t('admin.machine_learning_duplicate_detection_enabled_description')}
             bind:checked={config.machineLearning.duplicateDetection.enabled}
             disabled={disabled || !config.machineLearning.enabled || !config.machineLearning.clip.enabled}
@@ -94,7 +94,7 @@
 
           <SettingInputField
             inputType={SettingInputFieldType.NUMBER}
-            label={$t('admin.machine_learning_max_detection_distance').toUpperCase()}
+            label={$t('admin.machine_learning_max_detection_distance')}
             bind:value={config.machineLearning.duplicateDetection.maxDistance}
             step="0.0005"
             min={0.001}
@@ -114,7 +114,7 @@
       >
         <div class="ml-4 mt-4 flex flex-col gap-4">
           <SettingSwitch
-            title={$t('enabled').toUpperCase()}
+            title={$t('admin.machine_learning_facial_recognition_setting')}
             subtitle={$t('admin.machine_learning_facial_recognition_setting_description')}
             bind:checked={config.machineLearning.facialRecognition.enabled}
             disabled={disabled || !config.machineLearning.enabled}
@@ -123,7 +123,7 @@
           <hr />
 
           <SettingSelect
-            label={$t('admin.machine_learning_facial_recognition_model').toUpperCase()}
+            label={$t('admin.machine_learning_facial_recognition_model')}
             desc={$t('admin.machine_learning_facial_recognition_model_description')}
             name="facial-recognition-model"
             bind:value={config.machineLearning.facialRecognition.modelName}
@@ -140,7 +140,7 @@
 
           <SettingInputField
             inputType={SettingInputFieldType.NUMBER}
-            label={$t('admin.machine_learning_min_detection_score').toUpperCase()}
+            label={$t('admin.machine_learning_min_detection_score')}
             desc={$t('admin.machine_learning_min_detection_score_description')}
             bind:value={config.machineLearning.facialRecognition.minScore}
             step="0.1"
@@ -153,7 +153,7 @@
 
           <SettingInputField
             inputType={SettingInputFieldType.NUMBER}
-            label={$t('admin.machine_learning_max_recognition_distance').toUpperCase()}
+            label={$t('admin.machine_learning_max_recognition_distance')}
             desc={$t('admin.machine_learning_max_recognition_distance_description')}
             bind:value={config.machineLearning.facialRecognition.maxDistance}
             step="0.1"
@@ -166,7 +166,7 @@
 
           <SettingInputField
             inputType={SettingInputFieldType.NUMBER}
-            label={$t('admin.machine_learning_min_recognized_faces').toUpperCase()}
+            label={$t('admin.machine_learning_min_recognized_faces')}
             desc={$t('admin.machine_learning_min_recognized_faces_description')}
             bind:value={config.machineLearning.facialRecognition.minFaces}
             step="1"

web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte

@@ -26,12 +26,7 @@
       <div class="flex flex-col gap-4">
         <SettingAccordion key="map" title={$t('admin.map_settings')} subtitle={$t('admin.map_settings_description')}>
           <div class="ml-4 mt-4 flex flex-col gap-4">
-            <SettingSwitch
-              title={$t('enabled').toUpperCase()}
-              {disabled}
-              subtitle={$t('admin.map_enable_description')}
-              bind:checked={config.map.enabled}
-            />
+            <SettingSwitch title={$t('admin.map_enable_description')} {disabled} bind:checked={config.map.enabled} />
 
             <hr />
 
@@ -67,9 +62,8 @@
           </svelte:fragment>
           <div class="ml-4 mt-4 flex flex-col gap-4">
             <SettingSwitch
-              title={$t('enabled').toUpperCase()}
+              title={$t('admin.map_reverse_geocoding_enable_description')}
               {disabled}
-              subtitle={$t('admin.map_reverse_geocoding_enable_description')}
               bind:checked={config.reverseGeocoding.enabled}
             />
           </div></SettingAccordion

web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte

@@ -21,8 +21,7 @@
     <form autocomplete="off" on:submit|preventDefault>
       <div class="ml-4 mt-4">
         <SettingSwitch
-          title={$t('enabled').toUpperCase()}
-          subtitle={$t('admin.version_check_enabled_description')}
+          title={$t('admin.version_check_enabled_description')}
           bind:checked={config.newVersionCheck.enabled}
           {disabled}
         />

web/src/lib/components/admin-page/settings/notification-settings/notification-settings.svelte

@@ -71,8 +71,7 @@
         <SettingAccordion key="email" title={$t('email')} subtitle={$t('admin.notification_email_setting_description')}>
           <div class="ml-4 mt-4 flex flex-col gap-4">
             <SettingSwitch
-              title={$t('enabled')}
-              subtitle={$t('admin.notification_enable_email_notifications')}
+              title={$t('admin.notification_enable_email_notifications')}
               {disabled}
               bind:checked={config.notifications.smtp.enabled}
             />

web/src/lib/components/admin-page/settings/server/server-settings.svelte

@@ -24,7 +24,7 @@
       <div class="mt-4 ml-4">
         <SettingInputField
           inputType={SettingInputFieldType.TEXT}
-          label={$t('admin.server_external_domain_settings').toUpperCase()}
+          label={$t('admin.server_external_domain_settings')}
           desc={$t('admin.server_external_domain_settings_description')}
           bind:value={config.server.externalDomain}
           isEdited={config.server.externalDomain !== savedConfig.server.externalDomain}
@@ -32,7 +32,7 @@
 
         <SettingInputField
           inputType={SettingInputFieldType.TEXT}
-          label={$t('admin.server_welcome_message').toUpperCase()}
+          label={$t('admin.server_welcome_message')}
           desc={$t('admin.server_welcome_message_description')}
           bind:value={config.server.loginPageMessage}
           isEdited={config.server.loginPageMessage !== savedConfig.server.loginPageMessage}

web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte

@@ -108,16 +108,15 @@
   {#await getTemplateOptions() then}
     <div id="directory-path-builder" class="flex flex-col gap-4 {minified ? '' : 'ml-4 mt-4'}">
       <SettingSwitch
-        title={$t('enabled').toUpperCase()}
+        title={$t('admin.storage_template_enable_description')}
         {disabled}
-        subtitle={$t('admin.storage_template_enable_description')}
         bind:checked={config.storageTemplate.enabled}
         isEdited={!(config.storageTemplate.enabled === savedConfig.storageTemplate.enabled)}
       />
 
       {#if !minified}
         <SettingSwitch
-          title={$t('admin.storage_template_hash_verification_enabled').toUpperCase()}
+          title={$t('admin.storage_template_hash_verification_enabled')}
           {disabled}
           subtitle={$t('admin.storage_template_hash_verification_enabled_description')}
           bind:checked={config.storageTemplate.hashVerificationEnabled}
@@ -173,7 +172,9 @@
 
           <form autocomplete="off" class="flex flex-col" on:submit|preventDefault>
             <div class="flex flex-col my-2">
-              <label class="text-sm" for="preset-select">{$t('preset').toUpperCase()}</label>
+              <label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="preset-select">
+                {$t('preset')}
+              </label>
               <select
                 class="immich-form-input p-2 mt-2 text-sm rounded-lg bg-slate-200 hover:cursor-pointer dark:bg-gray-600"
                 disabled={disabled || !config.storageTemplate.enabled}
@@ -189,7 +190,7 @@
             </div>
             <div class="flex gap-2 align-bottom">
               <SettingInputField
-                label={$t('template').toUpperCase()}
+                label={$t('template')}
                 disabled={disabled || !config.storageTemplate.enabled}
                 required
                 inputType={SettingInputFieldType.TEXT}

web/src/lib/components/admin-page/settings/trash-settings/trash-settings.svelte

@@ -23,12 +23,7 @@
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" on:submit|preventDefault>
       <div class="ml-4 mt-4 flex flex-col gap-4">
-        <SettingSwitch
-          title={$t('enabled').toUpperCase()}
-          {disabled}
-          subtitle={$t('admin.trash_enabled_description')}
-          bind:checked={config.trash.enabled}
-        />
+        <SettingSwitch title={$t('admin.trash_enabled_description')} {disabled} bind:checked={config.trash.enabled} />
 
         <hr />
 

web/src/lib/components/admin-page/settings/user-settings/user-settings.svelte

@@ -26,7 +26,7 @@
         <SettingInputField
           inputType={SettingInputFieldType.NUMBER}
           min={1}
-          label={$t('admin.user_delete_delay_settings').toUpperCase()}
+          label={$t('admin.user_delete_delay_settings')}
           desc={$t('admin.user_delete_delay_settings_description')}
           bind:value={config.user.deleteDelay}
           isEdited={config.user.deleteDelay !== savedConfig.user.deleteDelay}