@focus8/settings-registry 0.5.0 → 0.7.0

package/src/index.ts

@@ -77,6 +77,47 @@ export type AllDayPreset = {
   time: string;
 };
 
+// ---------------------------------------------------------------------------
+// UI type discriminator — determines which component renders each setting
+// ---------------------------------------------------------------------------
+
+export type SettingUiType =
+  | 'TOGGLE'
+  | 'SELECT'
+  | 'VOLUME_SLIDER'
+  | 'SLIDER'
+  | 'NUMBER_INPUT'
+  | 'TEXT_INPUT'
+  | 'PIN_INPUT'
+  | 'CUSTOM_THEME_PICKER'
+  | 'CUSTOM_LANGUAGE_PICKER'
+  | 'CUSTOM_CALENDAR_TYPE'
+  | 'CUSTOM_CLOCK_TYPE'
+  | 'CUSTOM_WEATHER_LOCATION'
+  | 'CUSTOM_IMAGE'
+  | 'CUSTOM_IMAGE_ARRAY'
+  | 'CUSTOM_CALENDAR_IDS'
+  | 'CUSTOM_REMINDER_PRESETS'
+  | 'CUSTOM_EVENT_FORM'
+  | 'CUSTOM_CHRONOLOGICAL_EVENT_FORM'
+  | 'CUSTOM_DISPLAY_DENSITY'
+  | 'CUSTOM_BRIGHTNESS'
+  | 'CUSTOM_SPLIT_VIEW_CONFIG'
+  | 'HIDDEN';
+
+export type SettingOption<T = unknown> = {
+  /** The option value */
+  value: T;
+  /** i18n message key for the option label */
+  labelKey: string;
+};
+
+export type SliderConfig = {
+  min: number;
+  max: number;
+  step: number;
+};
+
 // ---------------------------------------------------------------------------
 // Setting categories — used for UI grouping and profile organization
 // ---------------------------------------------------------------------------
@@ -219,6 +260,8 @@ export type SettingsGroupDef = {
   keys: string[];
   /** Only show for this calendar type (undefined = always) */
   calendarType?: CalendarType;
+  /** Only show for this app mode (undefined = always) */
+  appMode?: 'ENROLLED';
 };
 
 /**
@@ -242,21 +285,18 @@ export const SETTINGS_GROUPS: readonly SettingsGroupDef[] = [
     id: 'calendarType',
     labelKey: 'Settings.CalendarType',
     icon: 'ArrowLeftRight',
-    keys: ['calendarView.type'],
+    keys: ['calendarView.type', 'calendarView.view'],
   },
   {
     id: 'calendarView',
     labelKey: 'Settings.CalendarView',
     icon: 'Eye',
     keys: [
-      'calendarView.view',
-      'calendarView.dayViewZoom',
-      'calendarView.weekViewZoom',
-      'calendarView.splitView',
       'calendarView.showCalendarNames',
+      'calendarView.splitView',
       'calendarView.calendarColumns',
-      'calendarView.autoReturnToTodayEnabled',
-      'calendarView.autoReturnToTodayTimeoutSeconds',
+      'calendarView.dayViewZoom',
+      'calendarView.weekViewZoom',
     ],
   },
   {
@@ -301,12 +341,14 @@ export const SETTINGS_GROUPS: readonly SettingsGroupDef[] = [
       'sound.timerAlarmTimeout',
       'timer.',
     ],
+    appMode: 'ENROLLED',
   },
   {
     id: 'lockScreen',
     labelKey: 'Settings.LockScreen',
     icon: 'Lock',
     keys: ['lockScreen.'],
+    appMode: 'ENROLLED',
   },
   {
     id: 'touch',
@@ -325,7 +367,11 @@ export const SETTINGS_GROUPS: readonly SettingsGroupDef[] = [
     id: 'device',
     labelKey: 'SettingsDevices.Title',
     icon: 'Smartphone',
-    keys: ['device.'],
+    keys: [
+      'device.',
+      'calendarView.autoReturnToTodayEnabled',
+      'calendarView.autoReturnToTodayTimeoutSeconds',
+    ],
   },
   {
     id: 'language',
@@ -346,6 +392,251 @@ export const EXCLUDED_DEVICE_SETTINGS: ReadonlySet<string> = new Set([
   'notification.hasBeenPrompted',
 ]);
 
+// ---------------------------------------------------------------------------
+// Per-setting i18n label / description keys
+// ---------------------------------------------------------------------------
+
+export type SettingLabelDef = {
+  /** i18n message key for the setting label */
+  labelKey: string;
+  /** Optional i18n message key for a description shown below the label */
+  descriptionKey?: string;
+};
+
+/**
+ * Maps each setting key to its i18n label and optional description key.
+ * These keys must exist in every consumer's i18n catalog.
+ *
+ * When a key is missing from this map, consumers should fall back to
+ * the auto-generated label from `SettingsRegistry.getSettingLabel()`.
+ */
+export const SETTINGS_LABELS: Readonly<Record<string, SettingLabelDef>> = {
+  // ── Appearance ──────────────────────────────────────────────────────────
+  'appearance.theme': { labelKey: 'Settings.SelectTheme' },
+  'appearance.clockType': {
+    labelKey: 'Settings.ClockType',
+    descriptionKey: 'Settings.ClockTypeDescription',
+  },
+  'appearance.enableDayColors': {
+    labelKey: 'Settings.EnableDayColors',
+    descriptionKey: 'Settings.EnableDayColorsDescription',
+  },
+
+  // ── Calendar type ───────────────────────────────────────────────────────
+  'calendarView.type': {
+    labelKey: 'Settings.CalendarType',
+    descriptionKey: 'Settings.ModeDescription',
+  },
+  'calendarView.view': { labelKey: 'Settings.Calendar' },
+
+  // ── Calendar view ───────────────────────────────────────────────────────
+  'calendarView.showCalendarNames': { labelKey: 'Settings.ShowCalendarNames' },
+  'calendarView.splitView': {
+    labelKey: 'Settings.SplitViewLabel',
+    descriptionKey: 'Settings.SplitViewDescription',
+  },
+  'calendarView.calendarColumns': {
+    labelKey: 'Settings.SplitViewConfig',
+    descriptionKey: 'Settings.SplitViewConfigDescription',
+  },
+  'calendarView.dayViewZoom': {
+    labelKey: 'Settings.CalendarDayViewIntervalTitle',
+    descriptionKey: 'Settings.CalendarDayViewIntervalDescription',
+  },
+  'calendarView.weekViewZoom': {
+    labelKey: 'Settings.CalendarWeekViewIntervalTitle',
+    descriptionKey: 'Settings.CalendarWeekViewIntervalDescription',
+  },
+
+  // ── Auto return to today ────────────────────────────────────────────────
+  'calendarView.autoReturnToTodayEnabled': {
+    labelKey: 'Settings.AutoReturnToTodayEnabled',
+  },
+  'calendarView.autoReturnToTodayTimeoutSeconds': {
+    labelKey: 'Settings.AutoReturnToTodayTimeout',
+  },
+
+  // ── Weather ─────────────────────────────────────────────────────────────
+  'calendarView.weatherLocation': { labelKey: 'Settings.WeatherLocation' },
+  'calendarView.showWeatherOnEvents': {
+    labelKey: 'Settings.ShowWeatherOnEvents',
+    descriptionKey: 'Settings.ShowWeatherOnEventsDescription',
+  },
+  'calendarView.showWeatherOnTimeline': {
+    labelKey: 'Settings.ShowWeatherOnTimeline',
+    descriptionKey: 'Settings.ShowWeatherOnTimelineDescription',
+  },
+
+  // ── Sound & alerts ──────────────────────────────────────────────────────
+  'sound.reminderVolume': {
+    labelKey: 'Settings.ReminderVolume',
+    descriptionKey: 'Settings.ReminderVolumeDescription',
+  },
+  'sound.timerVolume': {
+    labelKey: 'Settings.TimerVolume',
+    descriptionKey: 'Settings.TimerVolumeDescription',
+  },
+  'sound.mediaVolume': {
+    labelKey: 'Settings.MediaVolume',
+    descriptionKey: 'Settings.MediaVolumeDescription',
+  },
+  'sound.alarmSound': { labelKey: 'Settings.AlarmSound' },
+  'sound.reminderAlarmSound': { labelKey: 'Settings.ReminderAlarmAsset' },
+  'sound.reminderAlarmTimeout': { labelKey: 'Settings.ReminderAlarmTimeout' },
+  'sound.timerAlarmSound': { labelKey: 'Settings.TimerAlarmSound' },
+  'sound.timerAlarmTimeout': { labelKey: 'Settings.TimerAlarmTimeout' },
+  'sound.allowCustomReminderSounds': {
+    labelKey: 'Settings.AllowCustomReminderSounds',
+  },
+  'sound.ttsEnabled': {
+    labelKey: 'Settings.EnableSpeech',
+    descriptionKey: 'Settings.EnableSpeechDescription',
+  },
+  'sound.ttsRate': { labelKey: 'Settings.TtsTitle' },
+
+  // ── Timer ───────────────────────────────────────────────────────────────
+  'timer.showTimeRemaining': { labelKey: 'Settings.TimerShowTimeRemaining' },
+  'timer.showEndTime': { labelKey: 'Settings.TimerShowEndTime' },
+  'timer.showRestartButton': { labelKey: 'Settings.TimerShowRestartButton' },
+  'timer.showPauseButton': { labelKey: 'Settings.TimerShowPauseButton' },
+
+  // ── Lock screen ─────────────────────────────────────────────────────────
+  'lockScreen.pin': { labelKey: 'Settings.LockScreenTitlePin' },
+  'lockScreen.clockDisplay': { labelKey: 'Settings.LockScreenClockTitle' },
+  'lockScreen.showDate': { labelKey: 'Settings.LockScreenShowDate' },
+  'lockScreen.showHourNumbers': {
+    labelKey: 'Settings.LockScreenShowHourNumbers',
+  },
+  'lockScreen.imageMode': { labelKey: 'Settings.LockScreenImageModeTitle' },
+  'lockScreen.backgroundImage': {
+    labelKey: 'Settings.LockScreenImageModeBackground',
+  },
+  'lockScreen.photoFrameImages': {
+    labelKey: 'Settings.LockScreenImageModePhotoFrame',
+  },
+  'lockScreen.photoFrameIntervalSeconds': {
+    labelKey: 'Settings.LockScreenPhotoFrameIntervalTitle',
+  },
+  'lockScreen.inactivityLockEnabled': {
+    labelKey: 'SettingsInactivity.EnableLabel',
+  },
+  'lockScreen.inactivityTimeoutMinutes': {
+    labelKey: 'SettingsInactivity.TimeoutLabel',
+  },
+
+  // ── Touch / gestures ───────────────────────────────────────────────────
+  'touch.enableTapToCreate': {
+    labelKey: 'Settings.EnableTapToCreate',
+    descriptionKey: 'Settings.EnableTapToCreateDescription',
+  },
+  'touch.enableDragDrop': {
+    labelKey: 'Settings.EnableDragDrop',
+    descriptionKey: 'Settings.EnableDragDropDescription',
+  },
+
+  // ── Device ──────────────────────────────────────────────────────────────
+  'device.timePickerMode': { labelKey: 'Settings.DateTimeTitle' },
+
+  // ── Language ────────────────────────────────────────────────────────────
+  'language.locale': { labelKey: 'Settings.SelectLanguage' },
+
+  // ── Notifications ───────────────────────────────────────────────────────
+  'notification.enabled': { labelKey: 'Settings.NotificationsEnabled' },
+  'notification.notifyAllCalendars': {
+    labelKey: 'Settings.NotifyAllCalendars',
+  },
+  'notification.enabledCalendarIds': {
+    labelKey: 'Settings.NotificationsCalendars',
+  },
+
+  // ── Chronological header ────────────────────────────────────────────────
+  'chronological.header.showNavigationArrows': {
+    labelKey: 'ChronologicalFeatures.NavigationArrows',
+  },
+  'chronological.header.showClock': {
+    labelKey: 'ChronologicalFeatures.Clock',
+  },
+  'chronological.header.showCurrentYearInDate': {
+    labelKey: 'ChronologicalFeatures.ShowCurrentYear',
+  },
+  'chronological.header.showTimeOfDay': {
+    labelKey: 'ChronologicalFeatures.TimeOfDay',
+  },
+
+  // ── Chronological footer ────────────────────────────────────────────────
+  'chronological.footer.showMenuButton': {
+    labelKey: 'ChronologicalFeatures.MenuButton',
+  },
+  'chronological.footer.showViewSwitcherDay': {
+    labelKey: 'ChronologicalFeatures.ViewSwitcherDay',
+  },
+  'chronological.footer.showViewSwitcherWeek': {
+    labelKey: 'ChronologicalFeatures.ViewSwitcherWeek',
+  },
+  'chronological.footer.showViewSwitcherMonth': {
+    labelKey: 'ChronologicalFeatures.ViewSwitcherMonth',
+  },
+  'chronological.footer.showTimerButton': {
+    labelKey: 'ChronologicalFeatures.TimerButton',
+  },
+  'chronological.footer.showNewEventButton': {
+    labelKey: 'ChronologicalFeatures.NewEventButton',
+  },
+  'chronological.footer.showSettingsButton': {
+    labelKey: 'ChronologicalFeatures.SettingsButton',
+  },
+
+  // ── Chronological timer ─────────────────────────────────────────────────
+  'chronological.timer.showNewCountdown': {
+    labelKey: 'TimerFeatures.ShowNewCountdown',
+  },
+  'chronological.timer.showFromTemplate': {
+    labelKey: 'TimerFeatures.ShowFromTemplate',
+  },
+  'chronological.timer.showEditTemplate': {
+    labelKey: 'TimerFeatures.ShowEditTemplate',
+  },
+  'chronological.timer.showDeleteTemplate': {
+    labelKey: 'TimerFeatures.ShowDeleteTemplate',
+  },
+  'chronological.timer.showAddTemplate': {
+    labelKey: 'TimerFeatures.ShowAddTemplate',
+  },
+
+  // ── Chronological menu ──────────────────────────────────────────────────
+  'chronological.menu.showSettingsButton': {
+    labelKey: 'ChronologicalFeatures.MenuSettingsButton',
+  },
+  'chronological.quickSettings.showTimerVolume': {
+    labelKey: 'ChronologicalFeatures.QuickSettingsTimerVolume',
+  },
+  'chronological.quickSettings.showReminderVolume': {
+    labelKey: 'ChronologicalFeatures.QuickSettingsReminderVolume',
+  },
+  'chronological.quickSettings.showMediaVolume': {
+    labelKey: 'ChronologicalFeatures.QuickSettingsMediaVolume',
+  },
+  'chronological.quickSettings.showBrightness': {
+    labelKey: 'ChronologicalFeatures.QuickSettingsBrightness',
+  },
+  'chronological.quickSettings.showLockScreen': {
+    labelKey: 'ChronologicalFeatures.QuickSettingsLockScreen',
+  },
+
+  // ── Event form (time-based) ─────────────────────────────────────────────
+  'eventForm.recurrence': { labelKey: 'Calendar.LabelRecurrence' },
+  'eventForm.reminders': { labelKey: 'Calendar.LabelReminders' },
+  'eventForm.emailReminders': { labelKey: 'Calendar.LabelEmailReminders' },
+  'eventForm.location': { labelKey: 'Common.Location' },
+  'eventForm.travelTime': { labelKey: 'TravelTime.Title' },
+  'eventForm.description': { labelKey: 'Common.Description' },
+  'eventForm.checklist': { labelKey: 'EventChecklist.DefaultName' },
+  'eventForm.images': { labelKey: 'EventImageGallery.SectionTitle' },
+  'eventForm.audioClips': { labelKey: 'EventAudioGallery.SectionTitle' },
+  'eventForm.notificationReceivers': { labelKey: 'EventForm.NotificationReceivers' },
+  'eventForm.visibility': { labelKey: 'EventVisibility.Title' },
+};
+
 /**
  * Check whether a setting key matches a group's key matchers.
  */
@@ -367,10 +658,11 @@ function matchesGroup(key: string, group: SettingsGroupDef): boolean {
 export function groupSettingsForDevice(
   allSettings: ParsedSettingEntry[],
   calendarType: CalendarType,
+  appMode?: 'ENROLLED',
 ): { id: SettingsGroupId; labelKey: string; icon: string; settings: ParsedSettingEntry[] }[] {
-  // Filter excluded
+  // Filter excluded and hidden settings
   const settings = allSettings.filter(
-    (s) => !EXCLUDED_DEVICE_SETTINGS.has(s.key),
+    (s) => !EXCLUDED_DEVICE_SETTINGS.has(s.key) && s.uiType !== 'HIDDEN',
   );
 
   // Calendar type filtering for event form keys
@@ -399,6 +691,11 @@ export function groupSettingsForDevice(
       continue;
     }
 
+    // Skip groups not relevant for current app mode
+    if (group.appMode && group.appMode !== appMode) {
+      continue;
+    }
+
     const matched = filteredSettings.filter(
       (s) => !claimed.has(s.key) && matchesGroup(s.key, group),
     );
@@ -437,6 +734,12 @@ export type SettingDef<T = unknown> = {
   default: T;
   /** Whether this setting should be synced to the server. Default true. */
   sync: boolean;
+  /** UI component type for rendering this setting */
+  uiType: SettingUiType;
+  /** Available options for SELECT-type settings */
+  options?: readonly SettingOption<T>[];
+  /** Slider configuration for SLIDER-type settings */
+  sliderConfig?: SliderConfig;
 };
 
 // ---------------------------------------------------------------------------
@@ -459,6 +762,39 @@ export const DEFAULT_REGISTRY_CONFIG: RegistryConfig = {
   defaultLocale: 'nb',
 };
 
+// ---------------------------------------------------------------------------
+// Shared option arrays (reused across multiple settings)
+// ---------------------------------------------------------------------------
+
+const ALARM_SOUND_OPTIONS: readonly SettingOption<AlarmSound>[] = [
+  { value: 'none', labelKey: 'Settings.Option.AlarmSound.None' },
+  { value: 'alarm1', labelKey: 'Settings.Option.AlarmSound.Alarm1' },
+  { value: 'alarm2', labelKey: 'Settings.Option.AlarmSound.Alarm2' },
+  { value: 'alarm3', labelKey: 'Settings.Option.AlarmSound.Alarm3' },
+  { value: 'alarm4', labelKey: 'Settings.Option.AlarmSound.Alarm4' },
+  { value: 'alarm5', labelKey: 'Settings.Option.AlarmSound.Alarm5' },
+  { value: 'alarm6', labelKey: 'Settings.Option.AlarmSound.Alarm6' },
+  { value: 'alarm7', labelKey: 'Settings.Option.AlarmSound.Alarm7' },
+  { value: 'alarm8', labelKey: 'Settings.Option.AlarmSound.Alarm8' },
+  { value: 'alarm9', labelKey: 'Settings.Option.AlarmSound.Alarm9' },
+];
+
+const ALARM_TIMEOUT_OPTIONS: readonly SettingOption<AlarmTimeout>[] = [
+  { value: 1, labelKey: 'Settings.Option.AlarmTimeout.1min' },
+  { value: 2, labelKey: 'Settings.Option.AlarmTimeout.2min' },
+  { value: 3, labelKey: 'Settings.Option.AlarmTimeout.3min' },
+  { value: 5, labelKey: 'Settings.Option.AlarmTimeout.5min' },
+  { value: 10, labelKey: 'Settings.Option.AlarmTimeout.10min' },
+];
+
+const DAY_VIEW_ZOOM_OPTIONS: readonly SettingOption<CalendarDayViewCellZoom>[] = [
+  { value: 15, labelKey: 'Settings.Option.DayViewZoom.15min' },
+  { value: 30, labelKey: 'Settings.Option.DayViewZoom.30min' },
+  { value: 60, labelKey: 'Settings.Option.DayViewZoom.60min' },
+];
+
+const TIME_OF_DAY_SLIDER: SliderConfig = { min: 0, max: 23, step: 1 };
+
 // ---------------------------------------------------------------------------
 // Helper
 // ---------------------------------------------------------------------------
@@ -467,9 +803,27 @@ function def<T>(
   category: SettingsCategory,
   type: SettingsDataType,
   defaultValue: T,
-  sync = true,
+  uiType: SettingUiType,
+  extra?: {
+    sync?: boolean;
+    options?: readonly SettingOption<T>[];
+    sliderConfig?: SliderConfig;
+  },
 ): SettingDef<T> {
-  return { category, type, default: defaultValue, sync };
+  const result: SettingDef<T> = {
+    category,
+    type,
+    default: defaultValue,
+    sync: extra?.sync ?? true,
+    uiType,
+  };
+  if (extra?.options) {
+    result.options = extra.options;
+  }
+  if (extra?.sliderConfig) {
+    result.sliderConfig = extra.sliderConfig;
+  }
+  return result;
 }
 
 // ---------------------------------------------------------------------------
@@ -485,9 +839,33 @@ function buildEntries(config: RegistryConfig) {
       'appearance',
       'string',
       config.defaultTheme,
+      'CUSTOM_THEME_PICKER',
+      {
+        options: [
+          { value: 'light', labelKey: 'Settings.Option.Theme.Light' },
+          { value: 'dark', labelKey: 'Settings.Option.Theme.Dark' },
+          { value: 'system', labelKey: 'Settings.Option.Theme.System' },
+        ],
+      },
+    ),
+    'appearance.clockType': def<ClockType>(
+      'appearance',
+      'string',
+      'digital',
+      'CUSTOM_CLOCK_TYPE',
+      {
+        options: [
+          { value: 'digital', labelKey: 'Settings.Option.ClockType.Digital' },
+          { value: 'analog', labelKey: 'Settings.Option.ClockType.Analog' },
+        ],
+      },
+    ),
+    'appearance.enableDayColors': def<boolean>(
+      'appearance',
+      'boolean',
+      false,
+      'TOGGLE',
     ),
-    'appearance.clockType': def<ClockType>('appearance', 'string', 'digital'),
-    'appearance.enableDayColors': def<boolean>('appearance', 'boolean', false),
 
     // ═══════════════════════════════════════════════════════════════════════
     // Calendar view
@@ -496,152 +874,346 @@ function buildEntries(config: RegistryConfig) {
       'calendarView',
       'string',
       'time-based',
+      'CUSTOM_CALENDAR_TYPE',
+      {
+        options: [
+          {
+            value: 'chronological',
+            labelKey: 'Settings.Option.CalendarType.Chronological',
+          },
+          {
+            value: 'time-based',
+            labelKey: 'Settings.Option.CalendarType.TimeBased',
+          },
+        ],
+      },
+    ),
+    'calendarView.view': def<CalendarViewMode>(
+      'calendarView',
+      'string',
+      'day',
+      'SELECT',
+      {
+        options: [
+          { value: 'day', labelKey: 'Settings.Option.CalendarView.Day' },
+          {
+            value: '3-days',
+            labelKey: 'Settings.Option.CalendarView.3Days',
+          },
+          {
+            value: '5-days',
+            labelKey: 'Settings.Option.CalendarView.5Days',
+          },
+          {
+            value: '7-days',
+            labelKey: 'Settings.Option.CalendarView.7Days',
+          },
+          { value: 'week', labelKey: 'Settings.Option.CalendarView.Week' },
+          {
+            value: 'month',
+            labelKey: 'Settings.Option.CalendarView.Month',
+          },
+          {
+            value: 'overview',
+            labelKey: 'Settings.Option.CalendarView.Overview',
+          },
+        ],
+      },
     ),
-    'calendarView.view': def<CalendarViewMode>('calendarView', 'string', 'day'),
     'calendarView.dayViewZoom': def<CalendarDayViewCellZoom>(
       'calendarView',
       'number',
       60,
+      'SELECT',
+      { options: DAY_VIEW_ZOOM_OPTIONS },
     ),
     'calendarView.weekViewZoom': def<CalendarDayViewCellZoom>(
       'calendarView',
       'number',
       60,
+      'SELECT',
+      { options: DAY_VIEW_ZOOM_OPTIONS },
+    ),
+    'calendarView.splitView': def<boolean>(
+      'calendarView',
+      'boolean',
+      false,
+      'TOGGLE',
     ),
-    'calendarView.splitView': def<boolean>('calendarView', 'boolean', false),
     'calendarView.showCalendarNames': def<boolean>(
       'calendarView',
       'boolean',
       true,
+      'TOGGLE',
+    ),
+    'calendarView.calendarColumns': def<unknown[]>(
+      'calendarView',
+      'json',
+      [],
+      'CUSTOM_SPLIT_VIEW_CONFIG',
     ),
-    'calendarView.calendarColumns': def<unknown[]>('calendarView', 'json', []),
     'calendarView.autoReturnToTodayEnabled': def<boolean>(
       'calendarView',
       'boolean',
       config.isEnrolled,
+      'TOGGLE',
     ),
     'calendarView.autoReturnToTodayTimeoutSeconds': def<number>(
       'calendarView',
       'number',
       300,
+      'SLIDER',
+      { sliderConfig: { min: 30, max: 600, step: 30 } },
     ),
     'calendarView.showWeatherOnEvents': def<boolean>(
       'calendarView',
       'boolean',
       false,
+      'TOGGLE',
     ),
     'calendarView.showWeatherOnTimeline': def<boolean>(
       'calendarView',
       'boolean',
       false,
+      'TOGGLE',
     ),
     'calendarView.weatherLocation': def<WeatherLocation | null>(
       'calendarView',
       'json',
       null,
+      'CUSTOM_WEATHER_LOCATION',
     ),
 
     // ═══════════════════════════════════════════════════════════════════════
     // Event form field visibility (time-based)
     // ═══════════════════════════════════════════════════════════════════════
-    'eventForm.recurrence': def<boolean>('eventForm', 'boolean', true),
-    'eventForm.reminders': def<boolean>('eventForm', 'boolean', true),
-    'eventForm.emailReminders': def<boolean>('eventForm', 'boolean', false),
-    'eventForm.location': def<boolean>('eventForm', 'boolean', true),
-    'eventForm.travelTime': def<boolean>('eventForm', 'boolean', false),
-    'eventForm.description': def<boolean>('eventForm', 'boolean', true),
-    'eventForm.checklist': def<boolean>('eventForm', 'boolean', true),
-    'eventForm.images': def<boolean>('eventForm', 'boolean', false),
-    'eventForm.audioClips': def<boolean>('eventForm', 'boolean', false),
+    'eventForm.recurrence': def<boolean>('eventForm', 'boolean', true, 'TOGGLE'),
+    'eventForm.reminders': def<boolean>('eventForm', 'boolean', true, 'TOGGLE'),
+    'eventForm.emailReminders': def<boolean>('eventForm', 'boolean', false, 'TOGGLE'),
+    'eventForm.location': def<boolean>('eventForm', 'boolean', true, 'TOGGLE'),
+    'eventForm.travelTime': def<boolean>('eventForm', 'boolean', false, 'TOGGLE'),
+    'eventForm.description': def<boolean>('eventForm', 'boolean', true, 'TOGGLE'),
+    'eventForm.checklist': def<boolean>('eventForm', 'boolean', true, 'TOGGLE'),
+    'eventForm.images': def<boolean>('eventForm', 'boolean', false, 'TOGGLE'),
+    'eventForm.audioClips': def<boolean>('eventForm', 'boolean', false, 'TOGGLE'),
     'eventForm.notificationReceivers': def<boolean>(
       'eventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
-    'eventForm.visibility': def<boolean>('eventForm', 'boolean', false),
+    'eventForm.visibility': def<boolean>('eventForm', 'boolean', false, 'TOGGLE'),
 
     // ═══════════════════════════════════════════════════════════════════════
     // Sound & alerts
     // ═══════════════════════════════════════════════════════════════════════
-    'sound.timerVolume': def<number>('sound', 'number', 0.5),
-    'sound.reminderVolume': def<number>('sound', 'number', 0.5),
-    'sound.mediaVolume': def<number>('sound', 'number', 0.5),
-    'sound.alarmSound': def<AlarmSound>('sound', 'string', 'alarm1'),
-    'sound.reminderAlarmSound': def<AlarmSound>('sound', 'string', 'alarm1'),
-    'sound.timerAlarmSound': def<AlarmSound>('sound', 'string', 'alarm1'),
-    'sound.timerAlarmTimeout': def<AlarmTimeout>('sound', 'number', 3),
-    'sound.reminderAlarmTimeout': def<AlarmTimeout>('sound', 'number', 3),
-    'sound.allowCustomReminderSounds': def<boolean>('sound', 'boolean', false),
-    'sound.ttsEnabled': def<boolean>('sound', 'boolean', config.isEnrolled),
-    'sound.ttsRate': def<number>('sound', 'number', 1.0),
+    'sound.timerVolume': def<number>('sound', 'number', 0.5, 'VOLUME_SLIDER'),
+    'sound.reminderVolume': def<number>('sound', 'number', 0.5, 'VOLUME_SLIDER'),
+    'sound.mediaVolume': def<number>('sound', 'number', 0.5, 'VOLUME_SLIDER'),
+    'sound.alarmSound': def<AlarmSound>(
+      'sound',
+      'string',
+      'alarm1',
+      'SELECT',
+      { options: ALARM_SOUND_OPTIONS },
+    ),
+    'sound.reminderAlarmSound': def<AlarmSound>(
+      'sound',
+      'string',
+      'alarm1',
+      'SELECT',
+      { options: ALARM_SOUND_OPTIONS },
+    ),
+    'sound.timerAlarmSound': def<AlarmSound>(
+      'sound',
+      'string',
+      'alarm1',
+      'SELECT',
+      { options: ALARM_SOUND_OPTIONS },
+    ),
+    'sound.timerAlarmTimeout': def<AlarmTimeout>(
+      'sound',
+      'number',
+      3,
+      'SELECT',
+      { options: ALARM_TIMEOUT_OPTIONS },
+    ),
+    'sound.reminderAlarmTimeout': def<AlarmTimeout>(
+      'sound',
+      'number',
+      3,
+      'SELECT',
+      { options: ALARM_TIMEOUT_OPTIONS },
+    ),
+    'sound.allowCustomReminderSounds': def<boolean>(
+      'sound',
+      'boolean',
+      false,
+      'TOGGLE',
+    ),
+    'sound.ttsEnabled': def<boolean>(
+      'sound',
+      'boolean',
+      config.isEnrolled,
+      'TOGGLE',
+    ),
+    'sound.ttsRate': def<number>(
+      'sound',
+      'number',
+      1.0,
+      'SLIDER',
+      { sliderConfig: { min: 0.5, max: 2, step: 0.1 } },
+    ),
 
     // ═══════════════════════════════════════════════════════════════════════
     // Timer
     // ═══════════════════════════════════════════════════════════════════════
-    'timer.showTimeRemaining': def<boolean>('timer', 'boolean', true),
-    'timer.showEndTime': def<boolean>('timer', 'boolean', true),
-    'timer.showRestartButton': def<boolean>('timer', 'boolean', true),
-    'timer.showPauseButton': def<boolean>('timer', 'boolean', true),
+    'timer.showTimeRemaining': def<boolean>('timer', 'boolean', true, 'TOGGLE'),
+    'timer.showEndTime': def<boolean>('timer', 'boolean', true, 'TOGGLE'),
+    'timer.showRestartButton': def<boolean>('timer', 'boolean', true, 'TOGGLE'),
+    'timer.showPauseButton': def<boolean>('timer', 'boolean', true, 'TOGGLE'),
 
     // ═══════════════════════════════════════════════════════════════════════
     // Lock screen
     // ═══════════════════════════════════════════════════════════════════════
-    'lockScreen.pin': def<string>('lockScreen', 'string', ''),
+    'lockScreen.pin': def<string>('lockScreen', 'string', '', 'PIN_INPUT'),
     'lockScreen.inactivityLockEnabled': def<boolean>(
       'lockScreen',
       'boolean',
       false,
+      'TOGGLE',
     ),
     'lockScreen.inactivityTimeoutMinutes': def<InactivityTimeoutMinutes>(
       'lockScreen',
       'number',
       5,
+      'SELECT',
+      {
+        options: [
+          { value: 1, labelKey: 'Settings.Option.InactivityTimeout.1min' },
+          { value: 5, labelKey: 'Settings.Option.InactivityTimeout.5min' },
+          { value: 10, labelKey: 'Settings.Option.InactivityTimeout.10min' },
+          { value: 15, labelKey: 'Settings.Option.InactivityTimeout.15min' },
+          { value: 30, labelKey: 'Settings.Option.InactivityTimeout.30min' },
+          { value: 45, labelKey: 'Settings.Option.InactivityTimeout.45min' },
+        ],
+      },
     ),
     'lockScreen.clockDisplay': def<LockScreenClockDisplay>(
       'lockScreen',
       'string',
       'digital',
+      'SELECT',
+      {
+        options: [
+          { value: 'none', labelKey: 'Settings.Option.ClockDisplay.None' },
+          {
+            value: 'digital',
+            labelKey: 'Settings.Option.ClockDisplay.Digital',
+          },
+          {
+            value: 'analog',
+            labelKey: 'Settings.Option.ClockDisplay.Analog',
+          },
+        ],
+      },
+    ),
+    'lockScreen.showDate': def<boolean>(
+      'lockScreen',
+      'boolean',
+      true,
+      'TOGGLE',
+    ),
+    'lockScreen.showHourNumbers': def<boolean>(
+      'lockScreen',
+      'boolean',
+      true,
+      'TOGGLE',
     ),
-    'lockScreen.showDate': def<boolean>('lockScreen', 'boolean', true),
-    'lockScreen.showHourNumbers': def<boolean>('lockScreen', 'boolean', true),
     'lockScreen.imageMode': def<LockScreenImageMode>(
       'lockScreen',
       'string',
       'none',
+      'SELECT',
+      {
+        options: [
+          { value: 'none', labelKey: 'Settings.Option.ImageMode.None' },
+          {
+            value: 'background',
+            labelKey: 'Settings.Option.ImageMode.Background',
+          },
+          {
+            value: 'photoFrame',
+            labelKey: 'Settings.Option.ImageMode.PhotoFrame',
+          },
+        ],
+      },
     ),
     'lockScreen.backgroundImage': def<string | null>(
       'lockScreen',
       'json',
       null,
+      'CUSTOM_IMAGE',
     ),
     'lockScreen.photoFrameImages': def<LockScreenImage[]>(
       'lockScreen',
       'json',
       [],
+      'CUSTOM_IMAGE_ARRAY',
     ),
     'lockScreen.photoFrameIntervalSeconds': def<PhotoFrameIntervalSeconds>(
       'lockScreen',
       'number',
       60,
+      'SELECT',
+      {
+        options: [
+          { value: 30, labelKey: 'Settings.Option.PhotoFrameInterval.30sec' },
+          { value: 60, labelKey: 'Settings.Option.PhotoFrameInterval.1min' },
+          { value: 120, labelKey: 'Settings.Option.PhotoFrameInterval.2min' },
+          { value: 300, labelKey: 'Settings.Option.PhotoFrameInterval.5min' },
+        ],
+      },
     ),
 
     // ═══════════════════════════════════════════════════════════════════════
     // Touch / gestures
     // ═══════════════════════════════════════════════════════════════════════
-    'touch.enableTapToCreate': def<boolean>('touch', 'boolean', false),
-    'touch.enableDragDrop': def<boolean>('touch', 'boolean', false),
+    'touch.enableTapToCreate': def<boolean>('touch', 'boolean', false, 'TOGGLE'),
+    'touch.enableDragDrop': def<boolean>('touch', 'boolean', false, 'TOGGLE'),
 
     // ═══════════════════════════════════════════════════════════════════════
     // Device (not synced unless noted)
     // ═══════════════════════════════════════════════════════════════════════
-    'device.id': def<string>('device', 'string', '', false),
-    'device.timePickerMode': def<TimePickerMode>('device', 'string', 'dials'),
-    'device.devMenuEnabled': def<boolean>('device', 'boolean', false, false),
+    'device.id': def<string>('device', 'string', '', 'HIDDEN', { sync: false }),
+    'device.timePickerMode': def<TimePickerMode>(
+      'device',
+      'string',
+      'dials',
+      'SELECT',
+      {
+        options: [
+          { value: 'dials', labelKey: 'Settings.Option.TimePickerMode.Dials' },
+          {
+            value: 'keypad',
+            labelKey: 'Settings.Option.TimePickerMode.Keypad',
+          },
+        ],
+      },
+    ),
+    'device.devMenuEnabled': def<boolean>(
+      'device',
+      'boolean',
+      false,
+      'HIDDEN',
+      { sync: false },
+    ),
     'device.authWarningDismissTtlDays': def<number>(
       'device',
       'number',
       3,
-      false,
+      'HIDDEN',
+      { sync: false },
     ),
 
     // ═══════════════════════════════════════════════════════════════════════
@@ -651,27 +1223,42 @@ function buildEntries(config: RegistryConfig) {
       'language',
       'string',
       config.defaultLocale,
+      'CUSTOM_LANGUAGE_PICKER',
+      {
+        options: [
+          { value: 'nb', labelKey: 'Settings.Option.Language.Norwegian' },
+          { value: 'en', labelKey: 'Settings.Option.Language.English' },
+        ],
+      },
     ),
 
     // ═══════════════════════════════════════════════════════════════════════
     // Notifications
     // ═══════════════════════════════════════════════════════════════════════
-    'notification.enabled': def<boolean>('notification', 'boolean', false),
+    'notification.enabled': def<boolean>(
+      'notification',
+      'boolean',
+      false,
+      'TOGGLE',
+    ),
     'notification.notifyAllCalendars': def<boolean>(
       'notification',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'notification.enabledCalendarIds': def<string[]>(
       'notification',
       'json',
       [],
+      'CUSTOM_CALENDAR_IDS',
     ),
     'notification.hasBeenPrompted': def<boolean>(
       'notification',
       'boolean',
       false,
-      false,
+      'HIDDEN',
+      { sync: false },
     ),
 
     // ═══════════════════════════════════════════════════════════════════════
@@ -682,141 +1269,173 @@ function buildEntries(config: RegistryConfig) {
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.header.showClock': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.header.showCurrentYearInDate': def<boolean>(
       'chronological',
       'boolean',
       false,
+      'TOGGLE',
     ),
     'chronological.header.showTimeOfDay': def<boolean>(
       'chronological',
       'boolean',
       false,
+      'TOGGLE',
     ),
     // Footer
     'chronological.footer.showMenuButton': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.footer.showViewSwitcherDay': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.footer.showViewSwitcherWeek': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.footer.showViewSwitcherMonth': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.footer.showTimerButton': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.footer.showNewEventButton': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.footer.showSettingsButton': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     // Timer features
     'chronological.timer.showNewCountdown': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.timer.showFromTemplate': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.timer.showEditTemplate': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.timer.showDeleteTemplate': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.timer.showAddTemplate': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     // Menu
     'chronological.menu.showSettingsButton': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     // Quick settings
     'chronological.quickSettings.showTimerVolume': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.quickSettings.showReminderVolume': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.quickSettings.showMediaVolume': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.quickSettings.showBrightness': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.quickSettings.showLockScreen': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     // Time-of-day periods
     'chronological.timeOfDay.morningStart': def<number>(
       'chronological',
       'number',
       6,
+      'SLIDER',
+      { sliderConfig: TIME_OF_DAY_SLIDER },
     ),
     'chronological.timeOfDay.forenoonStart': def<number>(
       'chronological',
       'number',
       9,
+      'SLIDER',
+      { sliderConfig: TIME_OF_DAY_SLIDER },
     ),
     'chronological.timeOfDay.afternoonStart': def<number>(
       'chronological',
       'number',
       12,
+      'SLIDER',
+      { sliderConfig: TIME_OF_DAY_SLIDER },
     ),
     'chronological.timeOfDay.eveningStart': def<number>(
       'chronological',
       'number',
       18,
+      'SLIDER',
+      { sliderConfig: TIME_OF_DAY_SLIDER },
     ),
     'chronological.timeOfDay.nightStart': def<number>(
       'chronological',
       'number',
       0,
+      'SLIDER',
+      { sliderConfig: TIME_OF_DAY_SLIDER },
     ),
 
     // ═══════════════════════════════════════════════════════════════════════
@@ -827,80 +1446,115 @@ function buildEntries(config: RegistryConfig) {
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronologicalEventForm.field.recurrence': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronologicalEventForm.field.acknowledge': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronologicalEventForm.field.checklist': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronologicalEventForm.field.extraImages': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronologicalEventForm.field.reminders': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronologicalEventForm.field.audioClips': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
     // Fixed fields
     'chronologicalEventForm.fixedField.allDay': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronologicalEventForm.fixedField.endTime': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronologicalEventForm.fixedField.visibility': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
     // Suggest end time
     'chronologicalEventForm.suggestEndTime.enabled': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       false,
+      'TOGGLE',
     ),
     'chronologicalEventForm.suggestEndTime.value': def<number>(
       'chronologicalEventForm',
       'number',
       30,
+      'SLIDER',
+      { sliderConfig: { min: 5, max: 480, step: 5 } },
     ),
     'chronologicalEventForm.suggestEndTime.unit': def<SuggestEndTimeUnit>(
       'chronologicalEventForm',
       'string',
       'minutes',
+      'SELECT',
+      {
+        options: [
+          {
+            value: 'minutes',
+            labelKey: 'Settings.Option.SuggestEndTimeUnit.Minutes',
+          },
+          {
+            value: 'hours',
+            labelKey: 'Settings.Option.SuggestEndTimeUnit.Hours',
+          },
+        ],
+      },
     ),
     // Default visibility
     'chronologicalEventForm.defaultVisibility': def<EventVisibility>(
       'chronologicalEventForm',
       'string',
       'Private',
+      'SELECT',
+      {
+        options: [
+          { value: 'Public', labelKey: 'Settings.Option.Visibility.Public' },
+          { value: 'Private', labelKey: 'Settings.Option.Visibility.Private' },
+          { value: 'Custom', labelKey: 'Settings.Option.Visibility.Custom' },
+        ],
+      },
     ),
     // Reminder presets
     'chronologicalEventForm.reminderPresets.timed': def<number[]>(
       'chronologicalEventForm',
       'json',
       [5, 15, 30, 60, 120, 1440],
+      'CUSTOM_REMINDER_PRESETS',
     ),
     'chronologicalEventForm.reminderPresets.allDay': def<AllDayPreset[]>(
       'chronologicalEventForm',
@@ -910,6 +1564,7 @@ function buildEntries(config: RegistryConfig) {
         { daysBefore: 1, time: '18:00' },
         { daysBefore: 2, time: '09:00' },
       ],
+      'CUSTOM_REMINDER_PRESETS',
     ),
   } as const satisfies Record<string, SettingDef>;
 }
@@ -1064,8 +1719,18 @@ export type ParsedSettingEntry = {
   name: string;
   /** Human-readable label (e.g. 'Inactivity Timeout Minutes') */
   label: string;
+  /** i18n message key for the label (from SETTINGS_LABELS) */
+  labelKey?: string;
+  /** i18n message key for a description (from SETTINGS_LABELS) */
+  descriptionKey?: string;
   /** The setting value */
   value: unknown;
+  /** UI component type for rendering this setting */
+  uiType: SettingUiType;
+  /** Available options for SELECT-type settings */
+  options?: readonly SettingOption[];
+  /** Slider configuration for SLIDER-type settings */
+  sliderConfig?: SliderConfig;
 };
 
 export type ParsedSettingsGroup = {
@@ -1122,11 +1787,21 @@ export function parseSettingsSnapshot(
     if (!groups.has(category)) {
       groups.set(category, []);
     }
+
+    const labelDef = SETTINGS_LABELS[key];
+    const entryDef = key in registry.entries
+      ? registry.entries[key as SettingKey]
+      : undefined;
     groups.get(category)!.push({
       key,
       name,
       label: registry.getSettingLabel(key),
+      labelKey: labelDef?.labelKey,
+      descriptionKey: labelDef?.descriptionKey,
       value,
+      uiType: entryDef?.uiType ?? 'TEXT_INPUT',
+      ...(entryDef?.options && { options: entryDef.options as readonly SettingOption[] }),
+      ...(entryDef?.sliderConfig && { sliderConfig: entryDef.sliderConfig }),
     });
   }