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>

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

@@ -0,0 +1,18 @@
+:host {
+	display: block;
+}
+
+mat-dialog-content > p {
+	margin: 0 0 1.5rem;
+	color: var(--ui-text-secondary);
+}
+
+.settings-controls {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+mat-form-field {
+	width: 100%;
+}

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

@@ -1,9 +1,38 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { MatButton } from '@angular/material/button';
+import {
+	MatDialogActions,
+	MatDialogClose,
+	MatDialogContent,
+	MatDialogTitle,
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { CalendarSettingsService } from '../../services/calendar-settings-service';
+import { ThemeService } from '../../services/theme-service';
+import { TranslationService } from '../../services/translation-service';
 
 @Component({
 	selector: 'app-user-settings',
-	imports: [],
+	imports: [
+		MatButton,
+		MatDialogActions,
+		MatDialogClose,
+		MatDialogContent,
+		MatDialogTitle,
+		MatFormFieldModule,
+		MatSelectModule,
+		MatSlideToggle,
+	],
 	templateUrl: './user-settings.html',
 	styleUrl: './user-settings.scss',
+	changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class UserSettings {}
+export class UserSettings {
+	protected readonly themeService = inject(ThemeService);
+	protected readonly translationService = inject(TranslationService);
+	protected readonly showWeekNumbers = inject(CalendarSettingsService).get('showWeekNumbers');
+	protected readonly tr = this.translationService.tr;
+	protected readonly themePreferences = ['system', 'light', 'dark'] as const;
+}