Add site banner, build number, and changelog

frontend/app/admin/SettingsPage.tsx

@@ -29,9 +29,12 @@ const SECTION_LABELS: Record<string, string> = {
   qbittorrent: 'qBittorrent',
   log: 'Activity log',
   requests: 'Request syncing',
+  site: 'Site',
 }
 
-const BOOL_SETTINGS = new Set(['jellyfin_sync_to_arr'])
+const BOOL_SETTINGS = new Set(['jellyfin_sync_to_arr', 'site_banner_enabled'])
+const TEXTAREA_SETTINGS = new Set(['site_banner_message', 'site_changelog'])
+const BANNER_TONES = ['info', 'warning', 'error', 'maintenance']
 
 const SECTION_DESCRIPTIONS: Record<string, string> = {
   jellyseerr: 'Connect the request system where users submit content.',
@@ -44,6 +47,7 @@ const SECTION_DESCRIPTIONS: Record<string, string> = {
   qbittorrent: 'Downloader connection settings.',
   requests: 'Sync and refresh cadence for requests.',
   log: 'Activity log for troubleshooting.',
+  site: 'Sitewide banner, version, and changelog details.',
 }
 
 const SETTINGS_SECTION_MAP: Record<string, string | null> = {
@@ -58,6 +62,7 @@ const SETTINGS_SECTION_MAP: Record<string, string | null> = {
   cache: null,
   logs: 'log',
   maintenance: null,
+  site: 'site',
 }
 
 const labelFromKey = (key: string) =>
@@ -78,6 +83,11 @@ const labelFromKey = (key: string) =>
     .replace('jellyfin public url', 'Jellyfin public URL')
     .replace('jellyfin sync to arr', 'Sync Jellyfin to Sonarr/Radarr')
     .replace('artwork cache mode', 'Artwork cache mode')
+    .replace('site build number', 'Build number')
+    .replace('site banner enabled', 'Sitewide banner enabled')
+    .replace('site banner message', 'Sitewide banner message')
+    .replace('site banner tone', 'Sitewide banner tone')
+    .replace('site changelog', 'Changelog text')
 
 type SettingsPageProps = {
   section: string
@@ -290,6 +300,11 @@ export default function SettingsPage({ section }: SettingsPageProps) {
     requests_data_source: 'Pick where Magent should read requests from.',
     log_level: 'How much detail is written to the activity log.',
     log_file: 'Where the activity log is stored.',
+    site_build_number: 'Version or build identifier shown in the footer.',
+    site_banner_enabled: 'Enable a sitewide banner for announcements.',
+    site_banner_message: 'Short banner message for maintenance or updates.',
+    site_banner_tone: 'Visual tone for the banner.',
+    site_changelog: 'One update per line for the public changelog.',
   }
 
   const buildSelectOptions = (
@@ -1008,6 +1023,34 @@ export default function SettingsPage({ section }: SettingsPageProps) {
                     </label>
                   )
                 }
+                if (setting.key === 'site_banner_tone') {
+                  return (
+                    <label key={setting.key} data-helper={helperText || undefined}>
+                      <span className="label-row">
+                        <span>{labelFromKey(setting.key)}</span>
+                        <span className="meta">
+                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
+                        </span>
+                      </span>
+                      <select
+                        name={setting.key}
+                        value={value || 'info'}
+                        onChange={(event) =>
+                          setFormValues((current) => ({
+                            ...current,
+                            [setting.key]: event.target.value,
+                          }))
+                        }
+                      >
+                        {BANNER_TONES.map((tone) => (
+                          <option key={tone} value={tone}>
+                            {tone.charAt(0).toUpperCase() + tone.slice(1)}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  )
+                }
                 if (
                   setting.key === 'requests_full_sync_time' ||
                   setting.key === 'requests_cleanup_time'
@@ -1086,6 +1129,35 @@ export default function SettingsPage({ section }: SettingsPageProps) {
                     </label>
                   )
                 }
+                if (TEXTAREA_SETTINGS.has(setting.key)) {
+                  return (
+                    <label key={setting.key} data-helper={helperText || undefined}>
+                      <span className="label-row">
+                        <span>{labelFromKey(setting.key)}</span>
+                        <span className="meta">
+                          {setting.isSet ? `Source: ${setting.source}` : 'Not set'}
+                          {setting.sensitive && setting.isSet ? '  stored' : ''}
+                        </span>
+                      </span>
+                      <textarea
+                        name={setting.key}
+                        rows={setting.key === 'site_changelog' ? 6 : 3}
+                        placeholder={
+                          setting.key === 'site_changelog'
+                            ? 'One update per line.'
+                            : ''
+                        }
+                        value={value}
+                        onChange={(event) =>
+                          setFormValues((current) => ({
+                            ...current,
+                            [setting.key]: event.target.value,
+                          }))
+                        }
+                      />
+                    </label>
+                  )
+                }
                 return (
                   <label key={setting.key} data-helper={helperText || undefined}>
                     <span className="label-row">