From 7020fc2a9346b96bb4a48542286f4140a97930d0 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 30 Dec 2023 10:55:11 +0100
Subject: [PATCH] Feature/add hint for community language support (#2793)

* Add hint

* Update changelog
---
 CHANGELOG.md                                         |  1 +
 .../user-account-settings.component.ts               |  4 ++++
 .../user-account-settings/user-account-settings.html | 12 ++++++++++++
 .../user-account-settings/user-account-settings.scss |  9 +++++++++
 4 files changed, 26 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 54cbd3d07..05ad3599c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added support to edit the currency of asset profiles with `MANUAL` data source in the asset profile details dialog of the admin control panel
+- Added a hint for the community languages in the user settings
 
 ### Changed
 
diff --git a/apps/client/src/app/components/user-account-settings/user-account-settings.component.ts b/apps/client/src/app/components/user-account-settings/user-account-settings.component.ts
index eaf16e015..b4c2b4556 100644
--- a/apps/client/src/app/components/user-account-settings/user-account-settings.component.ts
+++ b/apps/client/src/app/components/user-account-settings/user-account-settings.component.ts
@@ -93,6 +93,10 @@ export class UserAccountSettingsComponent implements OnDestroy, OnInit {
     this.update();
   }
 
+  public isCommunityLanguage() {
+    return !(this.language === 'de' || this.language === 'en');
+  }
+
   public onChangeUserSetting(aKey: string, aValue: string) {
     this.dataService
       .putUserSetting({ [aKey]: aValue })
diff --git a/apps/client/src/app/components/user-account-settings/user-account-settings.html b/apps/client/src/app/components/user-account-settings/user-account-settings.html
index 4d55bbc27..b77b5e94c 100644
--- a/apps/client/src/app/components/user-account-settings/user-account-settings.html
+++ b/apps/client/src/app/components/user-account-settings/user-account-settings.html
@@ -46,6 +46,18 @@
           <div class="align-items-center d-flex mb-2">
             <div class="pr-1 w-50">
               <div i18n>Language</div>
+              <div
+                *ngIf="isCommunityLanguage()"
+                class="hint-text text-muted"
+                i18n
+              >
+                If a translation is missing, kindly support us in extending it
+                <a
+                  href="https://github.com/ghostfolio/ghostfolio/blob/main/apps/client/src/locales/messages.{{language}}.xlf"
+                  target="_blank"
+                  >here</a
+                >.
+              </div>
             </div>
             <div class="pl-1 w-50">
               <mat-form-field appearance="outline" class="w-100 without-hint">
diff --git a/apps/client/src/app/components/user-account-settings/user-account-settings.scss b/apps/client/src/app/components/user-account-settings/user-account-settings.scss
index 1bcd1c65a..22555407a 100644
--- a/apps/client/src/app/components/user-account-settings/user-account-settings.scss
+++ b/apps/client/src/app/components/user-account-settings/user-account-settings.scss
@@ -2,6 +2,15 @@
   color: rgb(var(--dark-primary-text));
   display: block;
 
+  a {
+    color: rgba(var(--palette-primary-500), 1);
+    font-weight: 500;
+
+    &:hover {
+      color: rgba(var(--palette-primary-300), 1);
+    }
+  }
+
   .hint-text {
     font-size: 90%;
     line-height: 1.2;