Icon title translate

src/app/app.config.ts

@@ -1,17 +1,15 @@
 import { APP_INITIALIZER, ApplicationConfig } from "@angular/core";
-import { provideRouter } from "@angular/router";
 
 import { provideHttpClient } from "@angular/common/http";
-import { routes } from "./app.routes";
 import { TranslateService } from "./services/translate.service";
 
 export function setupTranslateServiceFactory(service: TranslateService) {
-  return () => service.use("en");
+  const lang = localStorage.getItem("lang") ?? "en";
+  return () => service.use(lang);
 }
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideRouter(routes),
     provideHttpClient(),
     TranslateService,
     {

src/app/modules/link/link.component.html

@@ -1,4 +1,4 @@
 <a [href]="url">
-  <img [src]="svg" [alt]="url" [title]="text" />
+  <img [src]="svg" [alt]="url" [title]="text | translate" />
   <span>{{ text | translate }}</span>
 </a>

src/app/modules/link/link.component.less

@@ -10,7 +10,7 @@ a {
   flex-direction: column;
   justify-content: center;
   gap: 0;
-  transition: 0.3s ease-in-out;
+  transition: 0.5s ease-in-out;
   span {
     opacity: 0;
     visibility: hidden;
@@ -21,7 +21,7 @@ a {
     font-size: 0.8rem;
     height: 0;
     font-weight: 600;
-    transition: opacity 0.3s ease-in-out;
+    transition: all 0.6s ease-in-out;
   }
   &:hover {
     transform: translateY(-1rem);

src/app/modules/panel/panel.component.html

@@ -15,8 +15,8 @@
       #lang_btn
       >{{ getLang() }}</span
     >
-    <a href="https://git.nwaifu.su/neuro_llc/NwaifuWeb">
-      <fa-icon [icon]="faGithub" class="sourcecode-icon" title="Source code"></fa-icon>
+    <a href="https://git.nwaifu.su/neuro_llc/NwaifuWeb" [title]="source_code_btn_title | translate">
+      <fa-icon [icon]="faGithub" class="sourcecode-icon"></fa-icon>
     </a>
     <fa-icon [icon]="faVolume"></fa-icon>
     <fa-icon [icon]="faPower"></fa-icon>

src/app/modules/panel/panel.component.less

@@ -57,6 +57,8 @@
   align-items: center;
   span {
     font-weight: 600;
+    user-select: none;
+    -webkit-user-select: none;
   }
   fa-icon {
     font-size: 1.2rem;

src/app/modules/panel/panel.component.ts

@@ -3,17 +3,20 @@ import { Component, ElementRef, HostListener, ViewChild } from "@angular/core";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
 import { faPowerOff, faVolumeHigh } from "@fortawesome/free-solid-svg-icons";
+import { TranslationPipe } from '../../pipes/translation.pipe';
 import { PanelSevice } from "../../services/panel.service";
 import { TranslateService } from "../../services/translate.service";
 
 @Component({
   standalone: true,
   selector: "app-panel",
-  imports: [CommonModule, FontAwesomeModule],
+  imports: [CommonModule, FontAwesomeModule, TranslationPipe],
   templateUrl: "./panel.component.html",
   styleUrls: ["./panel.component.less"],
 })
 export class PanelComponent {
+  source_code_btn_title = "SOURCE_CODE_TITLE"
+
   public time = "";
   faGithub = faGithub;
   faVolume = faVolumeHigh;
@@ -53,6 +56,18 @@ export class PanelComponent {
     this.langModal.nativeElement.style.left = `calc(${x}px - 3.5rem)`;
   }
 
+  @HostListener("window:click", ["$event"])
+  private closeLangModal(event: MouseEvent) {
+    if (
+      this.langModal &&
+      this.langBtn &&
+      !this.langModal.nativeElement.contains(event.target as Node) &&
+      !this.langBtn.nativeElement.contains(event.target as Node)
+    ) {
+      this.langModal.nativeElement.classList.remove("active");
+    }
+  }
+
   toggleModal() {
     if (this.langModal) {
       this.langModal.nativeElement.classList.toggle("active");
@@ -63,6 +78,7 @@ export class PanelComponent {
   }
 
   useLang(lang: string) {
+    this.langModal && this.langModal.nativeElement.classList.remove("active");
     this.translateService.use(lang);
   }
 

src/app/services/translate.service.ts

@@ -5,12 +5,13 @@ import { Injectable } from "@angular/core";
 export class TranslateService {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   data: Record<string, any> = {};
-  lang = "en";
+  lang: string | null = null;
   constructor(private http: HttpClient) {}
   use(lang: string): Promise<object> {
     this.lang = lang ?? "en";
+    localStorage.setItem("lang", this.lang);
     return new Promise<object>((resolve) => {
-      const langPath = `assets/i18n/${lang ?? "en"}.json`;
+      const langPath = `assets/i18n/${this.lang}.json`;
       this.http.get(langPath).subscribe({
         next: (response) => {
           this.data = response ?? {};

src/assets/i18n/en.json

@@ -4,5 +4,6 @@
   "MODAL_TEXT": "Hello, World!",
   "TELEGRAM_LABEL": "Telegram channel",
   "GITHUB_LABEL": "Admin's Github",
-  "GITEA_LABEL": "Neuro LLC Gitea"
+  "GITEA_LABEL": "Neuro LLC Gitea",
+  "SOURCE_CODE_TITLE": "Source code"
 }

src/assets/i18n/ja.json

@@ -4,5 +4,6 @@
   "MODAL_TEXT": "こんにちは、世界!",
   "TELEGRAM_LABEL": "Telegramチャンネル",
   "GITHUB_LABEL": "管理者Github",
-  "GITEA_LABEL": "Neuro LLC Gitea"
+  "GITEA_LABEL": "Neuro LLC Gitea",
+  "SOURCE_CODE_TITLE": "ソースコード"
 }

src/assets/i18n/ru.json

@@ -4,5 +4,6 @@
   "MODAL_TEXT": "Здравствуйте, мир!",
   "TELEGRAM_LABEL": "Телеграм канал",
   "GITHUB_LABEL": "Github админа",
-  "GITEA_LABEL": "Neuro LLC Gitea"
+  "GITEA_LABEL": "Neuro LLC Gitea",
+  "SOURCE_CODE_TITLE": "Исходный код"
 }

src/styles.less

@@ -47,7 +47,8 @@ ngneat-dialog {
       }
       .btns {
         fa-icon {
-          cursor: pointer;
+          z-index: 999;
+          cursor: not-allowed;
         }
       }
       .ngneat-drag-marker {