feat: add unified Settings dialog (#18)

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;
+}