Add settings source indicators and improve form UX

- Remove HTML 'required' attributes - all fields optional
- Add source detection (DB/ENV/DEFAULT) for each setting
- Display color-coded badges showing setting source
- Update template with precedence order explanation
- Pre-fill form with current values from DB/ENV/defaults
- Update documentation with source badge explanations
- Test and verify form prefilling works correctly

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>

frontend/templates/settings.html

@@ -15,16 +15,24 @@
   <div class="mb-8">
     <h1 class="text-3xl font-bold mb-2">Application Settings</h1>
     <p class="text-gray-600">
-      Configure application settings through the web interface. 
-      Settings saved here will take precedence over environment variables.
+      This is a convenience feature to view and edit application settings through the web interface.
     </p>
+    <div class="bg-blue-50 border-l-4 border-blue-500 text-blue-700 p-4 my-4" role="alert">
+      <p class="font-bold">📋 Settings Precedence Order:</p>
+      <ul class="list-disc list-inside ml-4 mt-2">
+        <li><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">DB</span> Database settings (highest priority) - explicitly saved via this UI</li>
+        <li><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">ENV</span> Environment variables - from .env file or system environment</li>
+        <li><span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">DEFAULT</span> Default values - built-in application defaults</li>
+      </ul>
+    </div>
     <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 my-4" role="alert">
       <p class="font-bold">⚠️ Important Notes:</p>
       <ul class="list-disc list-inside ml-4 mt-2">
         <li>Settings marked with <span class="text-red-600">*</span> require an application restart to take effect.</li>
         <li>Sensitive values (passwords, API keys) are masked for security.</li>
-        <li>Changes are persisted in the database and override environment variables.</li>
+        <li>Saving a setting here stores it in the database and overrides environment variables.</li>
         <li>Only administrators can access and modify these settings.</li>
+        <li>All fields are optional - you can save just the settings you want to override.</li>
       </ul>
     </div>
   </div>
@@ -53,15 +61,29 @@
         <div class="border-b border-gray-200 pb-6 last:border-b-0">
           <div class="flex justify-between items-start">
             <div class="flex-1">
-              <label for="{{ setting.key }}" class="block text-sm font-medium text-gray-700 mb-1">
-                {{ setting.key.replace('_', ' ').title() }}
-                {% if setting.metadata.restart_required %}
-                <span class="text-red-600">*</span>
-                {% endif %}
-                {% if setting.metadata.required %}
-                <span class="text-red-600 text-xs">(required)</span>
-                {% endif %}
-              </label>
+              <div class="flex items-center gap-2 mb-1">
+                <label for="{{ setting.key }}" class="block text-sm font-medium text-gray-700">
+                  {{ setting.key.replace('_', ' ').title() }}
+                  {% if setting.metadata.restart_required %}
+                  <span class="text-red-600">*</span>
+                  {% endif %}
+                  {% if setting.metadata.required %}
+                  <span class="text-red-600 text-xs">(required)</span>
+                  {% endif %}
+                </label>
+                <!-- Source Indicator Badge -->
+                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
+                  {% if setting.source == 'database' %}
+                    bg-green-100 text-green-800
+                  {% elif setting.source == 'environment' %}
+                    bg-blue-100 text-blue-800
+                  {% else %}
+                    bg-gray-100 text-gray-800
+                  {% endif %}
+                " title="Value source: {{ setting.source }}">
+                  {{ setting.source_label }}
+                </span>
+              </div>
               
               <p class="text-xs text-gray-500 mb-2">
                 {{ setting.metadata.description }}
@@ -93,7 +115,6 @@
                   x-model="formData['{{ setting.key }}']"
                   class="setting-input w-full px-3 py-2 pr-10 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                   placeholder="{{ setting.metadata.description }}"
-                  {% if setting.metadata.required %}required{% endif %}
                 />
                 <button 
                   type="button"
@@ -110,7 +131,6 @@
                   x-model="formData['{{ setting.key }}']"
                   class="setting-input w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
                   placeholder="{{ setting.metadata.description }}"
-                  {% if setting.metadata.required %}required{% endif %}
                 />
                 {% endif %}
               </div>