Apply Language Settings

src/app/features/settings/popup.html

@@ -1,38 +1,40 @@
 <app-popup (closeRequest)="close()" [position]="position()">
   <div header-left class="profile-section">
     <img ngSrc="/guest_profile.png" alt="profile" class="avatar" width="24" height="24">
-    <span>{{ userName }}</span>
+    <span>{{ settingsService.userName() }}</span>
   </div>
 
   <div class="settings-content">
     <section class="settings-category">
-      <label class="category-header">Language</label>
+      <label class="category-header">{{ translation.settings.language }}</label>
 
       <div class="settings-container">
         <dropdown [options]="languages"
-                  placeholder="Choose Language"
-                  [defaultIndex]="0"
+                  [placeholder]="translation.settings.chooseLanguage"
+                  [value]="settingsService.language()"
+                  (selectionChange)="onLanguageChange($event)"
                   icon="language"></dropdown>
       </div>
 
       <div class="settings-container">
         <div class="settings-name">
           <span class="material-symbols-outlined icon-24 settings-icon">match_case</span>
-          <span>Romanisation</span>
+          <span>{{ translation.settings.romanisation }}</span>
         </div>
-        <switch></switch>
+        <switch [isActive]="settingsService.romanisation()" (toggle)="onRomanisationChange($event)"></switch>
       </div>
     </section>
 
     <section class="settings-category">
-      <label class="category-header">Appearance</label>
+      <label class="category-header">{{ translation.settings.appearance }}</label>
       <div class="settings-container">
         <div class="settings-name">
           <span class="material-symbols-outlined icon-24 settings-icon">dark_mode</span>
-          <span>Dark Mode</span>
+          <span>{{ translation.settings.darkMode }}</span>
         </div>
-        <switch></switch>
+        <switch [isActive]="settingsService.darkMode()" (toggle)="onDarkModeChange($event)"></switch>
       </div>
     </section>
   </div>
+
 </app-popup>