fix(i18n): dynamic sidebar translations and UI font normalization (#2683)

* fix(i18n): make sidebar menu labels translate dynamically on language change * fix: sync package-lock.json with missing hono dependency * style: normalize small font sizes to 0.875rem across UI components
2026-02-18 00:17:53 +01:00 · 2026-02-10 09:27:00 -07:00
parent d133a8767e
commit 53403c168d
21 changed files with 56 additions and 45 deletions
--- a/booklore-ui/package-lock.json
+++ b/booklore-ui/package-lock.json
@@ -7239,6 +7239,17 @@
        "node": ">= 0.4"
      }
    },
+    "node_modules/hono": {
+      "version": "4.11.9",
+      "resolved": "https://registry.npmjs.org/hono/-/hono-4.11.9.tgz",
+      "integrity": "sha512-Eaw2YTGM6WOxA6CXbckaEvslr2Ne4NFsKrvc0v97JD5awbmeBLO5w9Ho9L9kmKonrwF9RJlW6BxT1PVv/agBHQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=16.9.0"
+      }
+    },
    "node_modules/hosted-git-info": {
      "version": "9.0.2",
      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-9.0.2.tgz",
@@ -10528,7 +10539,7 @@
      "version": "5.9.3",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
+      "devOptional": true,
      "license": "Apache-2.0",
      "bin": {
        "tsc": "bin/tsc",
--- a/booklore-ui/src/app/core/security/oauth2-management/authentication-settings.component.scss
+++ b/booklore-ui/src/app/core/security/oauth2-management/authentication-settings.component.scss
@@ -153,7 +153,7 @@
 }

 .auth-method-status {
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
  font-weight: 600;
  color: var(--p-text-muted-color);

@@ -213,7 +213,7 @@
 }

 .field-hint {
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
  color: var(--p-text-muted-color);
  line-height: 1.4;
 }
@@ -290,7 +290,7 @@
 }

 .toggle-status {
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
  font-weight: 600;
  color: var(--p-text-muted-color);

--- a/booklore-ui/src/app/features/book/components/book-file-attacher/book-file-attacher.component.scss
+++ b/booklore-ui/src/app/features/book/components/book-file-attacher/book-file-attacher.component.scss
@@ -62,7 +62,7 @@

  .book-authors {
    color: var(--p-text-muted-color);
-    font-size: 0.8125rem;
+    font-size: 0.875rem;
    margin-bottom: 0.375rem;
    white-space: nowrap;
    overflow: hidden;
@@ -74,11 +74,11 @@
    align-items: center;
    gap: 0.5rem;
    color: var(--p-primary-color);
-    font-size: 0.8125rem;
+    font-size: 0.875rem;
    font-weight: 500;

    i {
-      font-size: 0.8125rem;
+      font-size: 0.875rem;
    }

    span {
@@ -106,7 +106,7 @@
  }

  .suggestion-authors {
-    font-size: 0.8125rem;
+    font-size: 0.875rem;
    color: var(--p-text-muted-color);
  }

--- a/booklore-ui/src/app/features/library-creator/library-creator.component.scss
+++ b/booklore-ui/src/app/features/library-creator/library-creator.component.scss
@@ -474,7 +474,7 @@
  min-width: 90px;

  .format-checkbox-label {
-    font-size: 0.8125rem;
+    font-size: 0.875rem;
    color: var(--text-color);
    cursor: pointer;
  }
@@ -550,7 +550,7 @@
  }

  .chip-label {
-    font-size: 0.8125rem;
+    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-color);
  }
--- a/booklore-ui/src/app/features/metadata/component/book-metadata-center/metadata-searcher/metadata-searcher.component.scss
+++ b/booklore-ui/src/app/features/metadata/component/book-metadata-center/metadata-searcher/metadata-searcher.component.scss
@@ -96,7 +96,7 @@ $provider-colors: (

    i {
      color: var(--primary-color);
-      font-size: 0.8125rem;
+      font-size: 0.875rem;
    }
  }

@@ -496,7 +496,7 @@ $provider-colors: (
    background: var(--p-surface-900);
    color: var(--primary-color);
    border-radius: 2rem;
-    font-size: 0.8125rem;
+    font-size: 0.875rem;
    font-weight: 600;
  }
 }
@@ -517,7 +517,7 @@ $provider-colors: (

    i {
      color: var(--primary-color);
-      font-size: 0.8125rem;
+      font-size: 0.875rem;
    }
  }

@@ -672,7 +672,7 @@ $provider-colors: (

  i {
    color: var(--primary-color);
-    font-size: 0.8125rem;
+    font-size: 0.875rem;
    flex-shrink: 0;
  }
 }
--- a/booklore-ui/src/app/features/metadata/component/metadata-manager/metadata-manager.component.scss
+++ b/booklore-ui/src/app/features/metadata/component/metadata-manager/metadata-manager.component.scss
@@ -198,7 +198,7 @@

  p {
    margin: 0;
-    font-size: 0.8125rem;
+    font-size: 0.875rem;
    line-height: 1.45;

    strong {
--- a/booklore-ui/src/app/features/settings/custom-fonts/custom-fonts.component.scss
+++ b/booklore-ui/src/app/features/settings/custom-fonts/custom-fonts.component.scss
@@ -156,7 +156,7 @@
    background: color-mix(in srgb, var(--p-primary-color) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--p-primary-color) 20%, transparent);
    border-radius: 6px;
-    font-size: 0.8125rem;
+    font-size: 0.875rem;
    color: var(--p-text-muted-color);
    max-width: 500px;

@@ -299,7 +299,7 @@

      .preview-paragraph-small {
        color: var(--p-text-color);
-        font-size: 0.8125rem;
+        font-size: 0.875rem;
        line-height: 1.6;
        margin: 0;
        text-align: justify;
@@ -353,7 +353,7 @@
        display: flex;
        align-items: center;
        gap: 0.5rem;
-        font-size: 0.8125rem;
+        font-size: 0.875rem;
        color: var(--p-text-muted-color);
        font-weight: 500;

@@ -364,7 +364,7 @@
      }

      .meta-value {
-        font-size: 0.8125rem;
+        font-size: 0.875rem;
        color: var(--p-text-color);
        font-weight: 500;
        text-align: right;
--- a/booklore-ui/src/app/features/settings/custom-fonts/font-upload-dialog/font-upload-dialog.component.scss
+++ b/booklore-ui/src/app/features/settings/custom-fonts/font-upload-dialog/font-upload-dialog.component.scss
@@ -227,7 +227,7 @@
    }

    .file-meta {
-      font-size: 0.8125rem;
+      font-size: 0.875rem;
      color: var(--text-secondary-color);
    }
  }
--- a/booklore-ui/src/app/features/settings/global-preferences/global-preferences.component.scss
+++ b/booklore-ui/src/app/features/settings/global-preferences/global-preferences.component.scss
@@ -160,7 +160,7 @@
  display: flex;
  align-items: center;
  gap: 0.5rem;
-  font-size: 0.75rem;
+  font-size: 0.875rem;
  color: var(--p-text-muted-color);
  margin-top: 0.5rem;

--- a/booklore-ui/src/app/features/settings/global-preferences/metadata-match-weights/metadata-match-weights-component.scss
+++ b/booklore-ui/src/app/features/settings/global-preferences/metadata-match-weights/metadata-match-weights-component.scss
@@ -87,7 +87,7 @@
 }

 .action-description {
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
  color: var(--p-text-muted-color);
  line-height: 1.4;
 }
--- a/booklore-ui/src/app/features/settings/opds-settings/opds-settings.scss
+++ b/booklore-ui/src/app/features/settings/opds-settings/opds-settings.scss
@@ -154,7 +154,7 @@
 }

 .toggle-status {
-  font-size: 0.75rem;
+  font-size: 0.875rem;
  font-weight: 600;
  color: var(--p-text-muted-color);

@@ -356,7 +356,7 @@
  color: var(--p-text-muted-color);

  .pi {
-    font-size: 0.75rem;
+    font-size: 0.875rem;
  }
 }

@@ -431,7 +431,7 @@
    align-items: flex-start;
    gap: 0.375rem;
    color: var(--p-text-muted-color);
-    font-size: 0.75rem;
+    font-size: 0.875rem;
    line-height: 1.4;
    margin-top: 0.25rem;

--- a/booklore-ui/src/app/features/settings/reader-preferences/settings-application-mode/settings-application-mode.component.scss
+++ b/booklore-ui/src/app/features/settings/reader-preferences/settings-application-mode/settings-application-mode.component.scss
@@ -119,7 +119,7 @@
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s ease;
-    font-size: 0.8125rem;
+    font-size: 0.875rem;
    font-weight: 500;
    min-width: 4.5rem;

--- a/booklore-ui/src/app/features/settings/task-management/task-management.component.scss
+++ b/booklore-ui/src/app/features/settings/task-management/task-management.component.scss
@@ -293,7 +293,7 @@
 }

 .option-hint {
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
  color: var(--p-text-muted-color);
  flex: 1;

@@ -350,7 +350,7 @@
 }

 .cron-empty {
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
  color: var(--p-text-muted-color);
  font-style: italic;
  white-space: nowrap;
--- a/booklore-ui/src/app/features/settings/user-management/create-user-dialog/create-user-dialog.component.scss
+++ b/booklore-ui/src/app/features/settings/user-management/create-user-dialog/create-user-dialog.component.scss
@@ -118,7 +118,7 @@
    align-items: center;
    gap: 0.375rem;
    color: #ef4444;
-    font-size: 0.8125rem;
+    font-size: 0.875rem;
    margin-top: -0.25rem;

    i {
--- a/booklore-ui/src/app/features/settings/user-profile-dialog/user-profile-dialog.component.scss
+++ b/booklore-ui/src/app/features/settings/user-profile-dialog/user-profile-dialog.component.scss
@@ -134,7 +134,7 @@
    align-items: center;
    gap: 0.375rem;
    color: #ef4444;
-    font-size: 0.8125rem;
+    font-size: 0.875rem;
    margin-top: -0.25rem;

    i {
--- a/booklore-ui/src/app/shared/components/directory-picker/directory-picker.component.scss
+++ b/booklore-ui/src/app/shared/components/directory-picker/directory-picker.component.scss
@@ -479,13 +479,13 @@
        height: 26px;

        .directory-icon {
-          font-size: 0.8125rem;
+          font-size: 0.875rem;
        }
      }

      .directory-info {
        .directory-name {
-          font-size: 0.8125rem;
+          font-size: 0.875rem;
        }

        .directory-path {
--- a/booklore-ui/src/app/shared/components/icon-picker/icon-picker-component.scss
+++ b/booklore-ui/src/app/shared/components/icon-picker/icon-picker-component.scss
@@ -340,7 +340,7 @@
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
-    font-size: 0.8125rem;
+    font-size: 0.875rem;
    resize: vertical;
    line-height: 1.5;
  }
--- a/booklore-ui/src/app/shared/components/login/login.component.scss
+++ b/booklore-ui/src/app/shared/components/login/login.component.scss
@@ -66,7 +66,7 @@
 }

 .warning-message {
-  font-size: 0.75rem;
+  font-size: 0.875rem;
  color: #fcd34d;
  line-height: 1.5;
  margin: 0;
--- a/booklore-ui/src/app/shared/components/tag/tag.component.scss
+++ b/booklore-ui/src/app/shared/components/tag/tag.component.scss
@@ -40,7 +40,7 @@

  &-xs {
    padding: 0.21875rem 0.46875rem;
-    font-size: 0.8125rem;
+    font-size: 0.875rem;
    line-height: 1.125rem;
    gap: 0.34375rem;
  }
--- a/booklore-ui/src/app/shared/layout/component/layout-menu/app.menu.component.ts
+++ b/booklore-ui/src/app/shared/layout/component/layout-menu/app.menu.component.ts
@@ -3,7 +3,7 @@ import {AppMenuitemComponent} from './app.menuitem.component';
 import {AsyncPipe} from '@angular/common';
 import {MenuModule} from 'primeng/menu';
 import {LibraryService} from '../../../../features/book/service/library.service';
-import {Observable, of} from 'rxjs';
+import {combineLatest, Observable, of} from 'rxjs';
 import {filter, map} from 'rxjs/operators';
 import {ShelfService} from '../../../../features/book/service/shelf.service';
 import {BookService} from '../../../../features/book/service/book.service';
@@ -73,8 +73,8 @@ export class AppMenuComponent implements OnInit {
        this.initMenus();
      });

-    this.homeMenu$ = this.bookService.bookState$.pipe(
-      map((bookState) => [
+    this.homeMenu$ = combineLatest([this.bookService.bookState$, this.t.langChanges$]).pipe(
+      map(([bookState]) => [
        {
          label: this.t.translate('layout.menu.home'),
          items: [
@@ -97,8 +97,8 @@ export class AppMenuComponent implements OnInit {
  }

  private initMenus(): void {
-    this.libraryMenu$ = this.libraryService.libraryState$.pipe(
-      map((state) => {
+    this.libraryMenu$ = combineLatest([this.libraryService.libraryState$, this.t.langChanges$]).pipe(
+      map(([state]) => {
        const libraries = state.libraries ?? [];
        const sortedLibraries = this.sortArray(libraries, this.librarySortField, this.librarySortOrder);
        return [
@@ -121,8 +121,8 @@ export class AppMenuComponent implements OnInit {
      })
    );

-    this.magicShelfMenu$ = this.magicShelfService.shelvesState$.pipe(
-      map((state: MagicShelfState) => {
+    this.magicShelfMenu$ = combineLatest([this.magicShelfService.shelvesState$, this.t.langChanges$]).pipe(
+      map(([state]: [MagicShelfState, string]) => {
        const shelves = state.shelves ?? [];
        const sortedShelves = this.sortArray(shelves, this.magicShelfSortField, this.magicShelfSortOrder);
        return [
@@ -145,8 +145,8 @@ export class AppMenuComponent implements OnInit {
      })
    );

-    this.shelfMenu$ = this.shelfService.shelfState$.pipe(
-      map((state) => {
+    this.shelfMenu$ = combineLatest([this.shelfService.shelfState$, this.t.langChanges$]).pipe(
+      map(([state]) => {
        const shelves = state.shelves ?? [];
        const sortedShelves = this.sortArray(shelves, this.shelfSortField, this.shelfSortOrder);

--- a/booklore-ui/src/app/shared/styles/_settings-shared.scss
+++ b/booklore-ui/src/app/shared/styles/_settings-shared.scss
@@ -16,7 +16,7 @@ $settings-section-description-size: 0.875rem;

 $settings-label-size: 0.9375rem;
 $settings-label-weight: 500;
-$settings-description-size: 0.8125rem;
+$settings-description-size: 0.875rem;

 // ============================================================================
 // SPACING VARIABLES