feat: add unified Settings dialog (#18)

src/app/components/user-settings/user-settings.html

@@ -1 +1,47 @@
-<p>user-settings works!</p>
+<h2 mat-dialog-title>{{ tr().settings.title }}</h2>
+<mat-dialog-content>
+	<p>{{ tr().settings.description }}</p>
+	<div class="settings-controls">
+		<mat-form-field appearance="outline">
+			<mat-label>{{ tr().settings.selectTheme }}</mat-label>
+			<mat-select
+				[value]="themeService.themePreference()"
+				(valueChange)="themeService.setThemePreference($event)"
+			>
+				@for (preference of themePreferences; track preference) {
+					<mat-option [value]="preference">{{
+						tr().settings.themeOptions[preference]
+					}}</mat-option>
+				}
+			</mat-select>
+			@if (themeService.themePreference() === 'system') {
+				<mat-hint aria-live="polite">
+					{{ tr().settings.systemAppearance }}:
+					{{ tr().settings.themeOptions[themeService.effectiveTheme()] }}
+				</mat-hint>
+			}
+		</mat-form-field>
+		<mat-form-field appearance="outline">
+			<mat-label>{{ tr().settings.selectLanguage }}</mat-label>
+			<mat-select
+				[value]="translationService.language()"
+				(valueChange)="translationService.setLanguage($event)"
+			>
+				@for (lang of translationService.availableLanguages; track lang) {
+					<mat-option [value]="lang">{{
+						translationService.getLanguageName(lang)
+					}}</mat-option>
+				}
+			</mat-select>
+		</mat-form-field>
+		<mat-slide-toggle
+			[checked]="showWeekNumbers()"
+			(change)="showWeekNumbers.set($event.checked)"
+		>
+			{{ tr().settings.showWeekNumbers }}
+		</mat-slide-toggle>
+	</div>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+	<button mat-button type="button" mat-dialog-close>{{ tr().settings.close }}</button>
+</mat-dialog-actions>