From 754ca78137a995c99aa1f21862c2255f8a4b1cdc Mon Sep 17 00:00:00 2001
From: Raiper34 <raipergm34@gmail.com>
Date: Wed, 13 Aug 2025 15:32:28 +0000
Subject: [PATCH] feat(gui): add version to gui header

add version from package.json to gui header next to title

close #25
---
 src/frontend/src/app/app.component.html          |  1 +
 src/frontend/src/app/app.component.ts            |  7 ++++++-
 .../src/app/services/version.service.spec.ts     | 16 ++++++++++++++++
 src/frontend/src/app/services/version.service.ts | 14 ++++++++++++++
 4 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 src/frontend/src/app/services/version.service.spec.ts
 create mode 100644 src/frontend/src/app/services/version.service.ts

diff --git a/src/frontend/src/app/app.component.html b/src/frontend/src/app/app.component.html
index 79e4e28..35b6deb 100644
--- a/src/frontend/src/app/app.component.html
+++ b/src/frontend/src/app/app.component.html
@@ -3,6 +3,7 @@
     <p class="title">
       <i class="fa-brands fa-spotify"></i>
       <span>Spooty</span>
+      <span class="tag is-dark is-size-7">v{{version}}</span>
     </p>
     <p class="subtitle">Self-hosted spotify downloader</p>
   </div>
diff --git a/src/frontend/src/app/app.component.ts b/src/frontend/src/app/app.component.ts
index 44711b5..353676f 100644
--- a/src/frontend/src/app/app.component.ts
+++ b/src/frontend/src/app/app.component.ts
@@ -3,6 +3,7 @@ import {FormsModule} from "@angular/forms";
 import {CommonModule, NgFor} from "@angular/common";
 import {PlaylistService, PlaylistStatusEnum} from "./services/playlist.service";
 import {PlaylistBoxComponent} from "./components/playlist-box/playlist-box.component";
+import {VersionService} from "./services/version.service";
 
 @Component({
     selector: 'app-root',
@@ -16,8 +17,12 @@ export class AppComponent {
   url = ''
   createLoading$ = this.playlistService.createLoading$;
   playlists$ = this.playlistService.all$;
+  version = this.versionService.getVersion();
 
-  constructor(private readonly playlistService: PlaylistService) {
+  constructor(
+    private readonly playlistService: PlaylistService,
+    private readonly versionService: VersionService,
+  ) {
     this.fetchPlaylists();
   }
 
diff --git a/src/frontend/src/app/services/version.service.spec.ts b/src/frontend/src/app/services/version.service.spec.ts
new file mode 100644
index 0000000..3401526
--- /dev/null
+++ b/src/frontend/src/app/services/version.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { VersionService } from './version.service';
+
+describe('VersionService', () => {
+  let service: VersionService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(VersionService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/frontend/src/app/services/version.service.ts b/src/frontend/src/app/services/version.service.ts
new file mode 100644
index 0000000..fa187f1
--- /dev/null
+++ b/src/frontend/src/app/services/version.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import {version} from '../../../package.json';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class VersionService {
+
+  constructor() { }
+
+  getVersion(): string {
+    return version;
+  }
+}