Feature/version and commit hash

.github/workflows/deploy-pages.yml

@@ -28,7 +28,7 @@ jobs:
         run: bun install --frozen-lockfile
 
       - name: Build application
-        run: bun run build -- --base-href /watch-list/
+        run: bun run build -- --base-href /watch-list/ --define "import.meta.env.APP_COMMIT_HASH=\"${{ github.sha }}\"" --define "import.meta.env.APP_VERSION=\"$(bun -e \"console.log(require('./package.json').version)\")\""
 
       - name: Setup Pages
         uses: actions/configure-pages@v4

Dockerfile

@@ -14,7 +14,8 @@ COPY tsconfig.json .
 COPY tsconfig.app.json .
 COPY tsconfig.spec.json .
 
-RUN bun run build
+ARG COMMIT_HASH=unknown
+RUN bun run build -- --define "import.meta.env.APP_COMMIT_HASH=\"$COMMIT_HASH\"" --define "import.meta.env.APP_VERSION=\"$(grep '"version"' package.json | sed 's/.*"\(.*\)".*/\1/')\""
 
 FROM nginx:alpine-slim AS prod
 

angular.json

@@ -30,7 +30,11 @@
             ],
             "styles": [
               "src/styles.css"
-            ]
+            ],
+            "define": {
+              "import.meta.env.APP_COMMIT_HASH": "\"dev\"",
+              "import.meta.env.APP_VERSION": "\"0.0.0\""
+            }
           },
           "configurations": {
             "production": {

docker-compose.prod.yml

@@ -12,6 +12,8 @@ services:
       dockerfile: ./Dockerfile
       target: prod
       network: host
+      args:
+        COMMIT_HASH: ${COMMIT_HASH:-unknown}
     ports:
       - 4200:80
     networks:

src/app/components/settings/settings.component.spec.ts

@@ -1,10 +1,24 @@
 import { TestBed } from '@angular/core/testing';
+import { environment } from '../../../environments/environment';
 import { ImportExportService } from '../../services/import-export.service';
 import { TmdbCredential, TmdbSettingsService } from '../../services/tmdb-settings.service';
 import { SettingsComponent } from './settings.component';
 import { vi } from 'vitest';
 
 describe('SettingsComponent', () => {
+  let origHash: string;
+  let origVersion: string;
+
+  beforeEach(() => {
+    origHash = environment.commitHash;
+    origVersion = environment.appVersion;
+  });
+
+  afterEach(() => {
+    environment.commitHash = origHash;
+    environment.appVersion = origVersion;
+  });
+
   function configure(credentials: { token: string; key: string; credential: TmdbCredential }) {
     const tmdbSettingsService = {
       token: vi.fn(() => credentials.token),
@@ -101,4 +115,21 @@ describe('SettingsComponent', () => {
     expect(tmdbSettingsService.clearCredentials).toHaveBeenCalled();
     expect(fixture.componentInstance.tmdbSettingsMessage()).toBe('TMDB credentials cleared.');
   });
+
+  it('renders About section with version info', () => {
+    environment.commitHash = 'abc123456789';
+    environment.appVersion = '1.2.3';
+
+    configure({
+      token: '',
+      key: '',
+      credential: null,
+    });
+    const fixture = TestBed.createComponent(SettingsComponent);
+
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toContain('Watch List v1.2.3');
+    expect(fixture.nativeElement.textContent).toContain('abc1234');
+  });
 });

src/app/components/settings/settings.component.ts

@@ -3,6 +3,7 @@ import { FormsModule } from '@angular/forms';
 
 import { ImportExportService } from '../../services/import-export.service';
 import { TmdbSettingsService } from '../../services/tmdb-settings.service';
+import { environment } from '../../../environments/environment';
 
 @Component({
   selector: 'app-settings',
@@ -120,6 +121,15 @@ import { TmdbSettingsService } from '../../services/tmdb-settings.service';
         </div>
       </div>
 
+      <div class="bg-light-bg-tertiary dark:bg-dark-bg-tertiary p-6 rounded-lg mb-6">
+        <h2 class="text-xl mt-0 mb-4 text-light-font-secondary dark:text-dark-font-secondary">
+          About
+        </h2>
+        <p class="text-sm text-light-font-secondary dark:text-dark-font-secondary">
+          Watch List v{{ environment.appVersion }} ({{ shortHash }})
+        </p>
+      </div>
+
       @if (errorMessage()) {
         <div class="bg-light-bg-tertiary dark:bg-dark-bg-tertiary p-6 rounded-lg mb-6">
           <div
@@ -146,6 +156,12 @@ export class SettingsComponent {
   private importExportService = inject(ImportExportService);
   private tmdbSettingsService = inject(TmdbSettingsService);
 
+  protected readonly environment = environment;
+
+  get shortHash(): string {
+    return environment.commitHash?.substring(0, 7) ?? 'unknown';
+  }
+
   errorMessage = signal<string | null>(null);
   successMessage = signal<string | null>(null);
   tmdbToken = signal(this.tmdbSettingsService.token());

src/env.d.ts

@@ -0,0 +1,8 @@
+interface ImportMetaEnv {
+  APP_COMMIT_HASH: string;
+  APP_VERSION: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

src/environments/environment.tauri.ts

@@ -1,3 +1,5 @@
 export const environment = {
   enableServiceWorker: false,
+  commitHash: import.meta.env.APP_COMMIT_HASH,
+  appVersion: import.meta.env.APP_VERSION,
 };

src/environments/environment.ts

@@ -1,3 +1,5 @@
 export const environment = {
   enableServiceWorker: false,
+  commitHash: import.meta.env.APP_COMMIT_HASH,
+  appVersion: import.meta.env.APP_VERSION,
 };

src/environments/environment.web.ts

@@ -1,3 +1,5 @@
 export const environment = {
   enableServiceWorker: true,
+  commitHash: import.meta.env.APP_COMMIT_HASH,
+  appVersion: import.meta.env.APP_VERSION,
 };