Develop

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chytanka",
-  "version": "0.13.54",
+  "version": "0.13.56",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/app.module.ts

@@ -1,5 +1,5 @@
-import { NgModule, isDevMode, provideZoneChangeDetection } from '@angular/core';
-import { BrowserModule, provideClientHydration, withEventReplay, withHttpTransferCacheOptions } from '@angular/platform-browser';
+import { NgModule, isDevMode } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -11,6 +11,7 @@ import { SharedModule } from './shared/shared.module';
 import { registerLocaleData } from '@angular/common';
 import localeUk from "@angular/common/locales/uk";
 import { parserProviders } from './link-parser/data-access/parser.providers';
+import { languageConfigProvider } from './shared/data-access/lang.provider';
 
 registerLocaleData(localeUk)
 
@@ -23,20 +24,13 @@ registerLocaleData(localeUk)
         AppRoutingModule,
         ServiceWorkerModule.register('ngsw-worker.js', {
             enabled: !isDevMode(),
-            // Register the ServiceWorker as soon as the application is stable
-            // or after 30 seconds (whichever comes first).
             registrationStrategy: 'registerWhenStable:30000'
         }),
         SharedModule],
     providers: [
-        // provideZoneChangeDetection({ eventCoalescing: true }),
-        // provideClientHydration(withEventReplay(),
-        //     withHttpTransferCacheOptions({
-        //         includePostRequests: false,
-        //     })
-        // ),
+        languageConfigProvider,
         provideHttpClient(withFetch()),
-        ...parserProviders
+        ...parserProviders,
     ]
 })
 export class AppModule { }

src/app/link-parser/data-access/link-parser-settings.service.ts

@@ -1,5 +1,6 @@
 import { isPlatformBrowser } from '@angular/common';
 import { Injectable, PLATFORM_ID, WritableSignal, computed, inject, signal } from '@angular/core';
+import { ToggleBarOption } from '../../shared/ui/toggle-bar';
 
 export const DISPLAY_MODES = ['softmode', 'truemode'];
 const NAME_DISPLAY_MODE = 'displayMode';
@@ -36,6 +37,11 @@ export class LinkParserSettingsService {
 
   displayMode!: WritableSignal<string>;
 
+  displayModeOptions: ToggleBarOption<string>[] = [
+    { value: 'true', emoji: '👑', label: 'trueMode' },
+    { value: 'soft', emoji: '🧸', label: 'softMode' }
+  ]
+
   initDisplayMode() {
     if (!isPlatformBrowser(this.platformId)) return;
 

src/app/link-parser/link-parser/link-parser.component.ts

@@ -1,9 +1,8 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, effect, inject } from '@angular/core';
 import { LangService } from '../../shared/data-access/lang.service';
 import { MetaTagsService } from '../../shared/data-access/meta-tags.service';
 import { LinkParserService } from '../data-access/link-parser.service';
 import { LinkParserSettingsService } from '../data-access/link-parser-settings.service';
-import { take } from 'rxjs';
 import { FileService } from '../../file/data-access/file.service';
 
 @Component({
@@ -30,14 +29,11 @@ export class LinkParserComponent {
   public setts = inject(LinkParserSettingsService)
   public file = inject(FileService)
 
-  constructor() { }
-
-  ngOnInit() {
-    this.initMeta()
-    this.lang.langChanged$.pipe(take(1)).subscribe(() => {
+  constructor() {
+    effect(() => {
       this.initMeta()
     });
-  }
+   }
 
   initMeta() {
     this.meta.setOg()

src/app/link-parser/ui/settings/settings.component.html

@@ -1,11 +1,11 @@
 <fieldset>
-    <legend>🛠️ Base</legend>
+    <legend>🛠️ {{lang.ph().baseSettings}}</legend>
 
     <section>
         <div>
-            <p style="display: flex; justify-content: space-between; align-items: center;">
+            <p class="setting-title">
                 <span class="label">🈚 {{lang.ph().language}}</span>
-                <small>{{lang.ph().getByKey(getLangValue(lang.lang()).hintPhraceKey)}}</small>
+                <small>{{lang.ph().getByKey(getLangValue(lang.lang()).label)}}</small>
             </p>
             <p><small>{{lang.ph().settingLangDesc}}</small></p>
         </div>
@@ -15,7 +15,7 @@
     @if(vibro.enabled()){
     <section [class]="!vibro.vibrationOn()? 'inactive': ''">
         <div>
-            <p style="display: flex; justify-content: space-between; align-items: center;">
+            <p class="setting-title">
                 <label class="label" for="Vibration">🫨 Vibration</label>
                 @if(vibro.vibrationOn()) {
                 <small class="on">ON</small>
@@ -34,7 +34,7 @@
 
     <section [class]="!setts.autoPasteLink()? 'inactive': ''">
         <div>
-            <p style="display: flex; justify-content: space-between; align-items: center;">
+            <p class="setting-title">
                 <label class="label" for="autoPasteLink">📋 {{lang.ph().autoPasteLink}}</label>
                 @if(setts.autoPasteLink()) {
                 <small class="on">ON</small>
@@ -50,28 +50,23 @@
             id="autoPasteLink">
     </section>
 
-    <section style="display: block;">
-            <div>
-                <p style="display: flex; justify-content: space-between; align-items: center;">
-                🖥️ Display Mode
+    <section>
+        <div>
+            <p class="setting-title">
+                <span class="label">🖥️ {{lang.ph().displayMode}}</span>
                 <small>{{setts.displayMode() | titlecase}}</small>
             </p>
-            <div class="radio-group">
-                <button [vibrateHaptic]="10" class="button" [class.active]=" setts.displayMode() === 'true' "
-                    (click)="setts.setDisplayMode('true')">
-                    👑<br>True Mode
-                </button>
-                <button [vibrateHaptic]="10" class="button" [class.active]=" setts.displayMode() === 'soft' "
-                    (click)="setts.setDisplayMode('soft')">
-                    🧸<br> Soft Mode
-                </button>
-            </div>
-            </div>
+            <p><small>{{lang.ph().displayModeDesc}}</small></p>
+        </div>
+        <div>
+            <app-toggle-bar [options]="setts.displayModeOptions" [value]="setts.displayMode()"
+                (valueChange)="setts.setDisplayMode($event)" />
+        </div>
     </section>
 
     <section [class]="!setts.seasonalTheme()? 'inactive': ''">
         <div>
-            <p style="display: flex; justify-content: space-between; align-items: center;">
+            <p class="setting-title">
                 <label class="label" for="seasonalTheme">🎨 {{lang.ph().seasonalTheme}}</label>
                 @if(setts.seasonalTheme()) {
                 <small class="on">ON</small>
@@ -89,11 +84,11 @@
 </fieldset>
 
 <fieldset>
-    <legend>🗐 Files</legend>
+    <legend>🗐 {{lang.ph().fileSettings}}</legend>
 
     <section [class]="!fileSetts.saveFileToHistory()? 'inactive': ''">
         <div>
-            <p style="display: flex; justify-content: space-between; align-items: center;">
+            <p class="setting-title">
                 <label class="label" for="saveFileToHistory">💾 Save Local Files in History</label>
                 @if(fileSetts.saveFileToHistory()) {
                 <small class="on">ON</small>
@@ -112,7 +107,7 @@
     @if(fileSetts.saveFileToHistory()){
     <section [class]="!fileSetts.copyFileToHistory()? 'inactive': ''">
         <div>
-            <p style="display: flex; justify-content: space-between; align-items: center;">
+            <p class="setting-title">
                 <label class="label" for="copyFileToHistory">📄 Copy Local Files to History</label>
                 @if(fileSetts.copyFileToHistory()) {
                 <small class="on">ON</small>
@@ -131,7 +126,7 @@
     @if(fileSetts.copyFileToHistory()){
     <section>
         <div>
-            <p style="display: flex; justify-content: space-between; align-items: center;">
+            <p class="setting-title">
                 <label class="label" for="storageLimit">⛃ Storage Limit (Mb)</label>
                 <small>{{fileSetts.storageLimit()}}</small>
             </p>
@@ -142,7 +137,7 @@
 
     <section>
         <div>
-            <p style="display: flex; justify-content: space-between; align-items: center;">
+            <p class="setting-title">
                 <label class="label" for="retentionTime">⏱️ Retention Time</label>
                 <small>{{fileSetts.retentionTime()}}</small>
             </p>

src/app/link-parser/ui/settings/settings.component.scss

@@ -86,14 +86,14 @@ fieldset {
 }
 
 
-@supports (corner-shape: squircle) 
-{
+@supports (corner-shape: squircle) {
     section {
         input[type=checkbox] {
-        corner-shape: squircle;
-        border-radius: 1ch;
-    }
+            corner-shape: squircle;
+            border-radius: 1ch;
+        }
     }
+
     fieldset {
         corner-shape: squircle;
         border-radius: calc(var(--r) * 2);
@@ -110,4 +110,10 @@ input[type=number] {
     grid-template-columns: repeat(auto-fit, minmax(8ch, 1fr));
     gap: 1ch;
     margin-top: 1ch;
+}
+
+.setting-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }

src/app/link-parser/ui/settings/settings.component.ts

@@ -1,8 +1,9 @@
-import { Component, WritableSignal, effect, inject, input, signal } from '@angular/core';
+import { Component, inject} from '@angular/core';
 import { LinkParserSettingsService } from '../../data-access/link-parser-settings.service';
 import { LangService } from '../../../shared/data-access/lang.service';
 import { FileSettingsService } from '../../../file/data-access/file-settings.service';
 import { VibrationService } from '../../../shared/data-access/vibration.service';
+import { ToggleBarOption } from '../../../shared/ui/toggle-bar';
 
 @Component({
   selector: 'app-settings',
@@ -18,20 +19,16 @@ export class SettingsComponent {
 
 
   getLangValue(lang: string) {
-    return this.lang.langOpt.filter((opt: any) => opt.code == lang)[0]
+    return this.lang.options.filter((opt: ToggleBarOption<string>) => opt.value == lang)[0]
   }
 
   setAutoPasteLink(e: Event) {
     this.setts.setAutoPasteLink((e.target as HTMLInputElement).checked)
-
     this.vibro.vibrateForSettings(this.setts.autoPasteLink())
-
   }
 
   setSeasonalTheme(e: Event) {
     this.setts.setSeasonalTheme((e.target as HTMLInputElement).checked)
-    //
-
   }
 
   setSaveFileToHistory(e: Event) {

src/app/shared/data-access/lang.provider.ts

@@ -0,0 +1,16 @@
+import { LANGUAGE_CONFIG } from "./lang.token";
+
+export const languageConfigProvider = {
+    provide: LANGUAGE_CONFIG,
+    useValue: {
+        options: [
+            { label: "english", value: "en", emoji: "🇬🇧" },
+            { label: "ukrainian", value: "uk", emoji: "🇺🇦" }
+        ],
+        defaultLang: "en",
+        manifests: new Map([
+            ['en', "manifest.webmanifest"],
+            ['uk', "manifest-uk.webmanifest"]
+        ])
+    }
+};