add metube version. closes #83

ui/src/app/app.component.html

@@ -355,6 +355,21 @@
 
 <footer class="footer navbar-dark bg-dark py-3 mt-5">
   <div class="container text-center">
-    <small class="text-light" *ngIf="versionInfo">{{ versionInfo }}</small>
+    <div class="footer-content" *ngIf="ytDlpVersion && metubeVersion">
+      <div class="version-item">
+        <span class="version-label">yt-dlp</span>
+        <span class="version-value">{{ytDlpVersion}}</span>
+      </div>
+      <div class="version-separator"></div>
+      <div class="version-item">
+        <span class="version-label">MeTube</span>
+        <span class="version-value">{{metubeVersion}}</span>
+      </div>
+      <div class="version-separator"></div>
+      <a href="https://github.com/alexta69/metube" target="_blank" class="github-link">
+        <fa-icon [icon]="faGithub"></fa-icon>
+        <span>GitHub</span>
+      </a>
+    </div>
   </div>
 </footer>

ui/src/app/app.component.sass

@@ -126,3 +126,59 @@ td
                 white-space: nowrap
                 overflow: visible
                 text-overflow: ellipsis
+
+.footer
+  width: 100%
+  padding: 10px 0
+  background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.1))
+
+  .footer-content
+    display: flex
+    justify-content: center
+    align-items: center
+    gap: 20px
+    color: #fff
+    font-size: 0.9rem
+
+    .version-item
+      display: flex
+      align-items: center
+      gap: 8px
+
+      .version-label
+        font-size: 0.75rem
+        text-transform: uppercase
+        letter-spacing: 0.5px
+        opacity: 0.7
+
+      .version-value
+        font-family: monospace
+        font-size: 0.85rem
+        padding: 2px 6px
+        background: rgba(255,255,255,0.1)
+        border-radius: 4px
+
+    .version-separator
+      width: 1px
+      height: 16px
+      background: rgba(255,255,255,0.2)
+      margin: 0 4px
+
+    .github-link
+      display: flex
+      align-items: center
+      gap: 6px
+      color: #fff
+      text-decoration: none
+      font-size: 0.85rem
+      padding: 2px 8px
+      border-radius: 4px
+      transition: background-color 0.2s ease
+
+      &:hover
+        background: rgba(255,255,255,0.1)
+        color: #fff
+        text-decoration: none
+
+      i
+        font-size: 1rem

ui/src/app/app.component.ts

@@ -2,6 +2,7 @@ import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { faTrashAlt, faCheckCircle, faTimesCircle, IconDefinition } from '@fortawesome/free-regular-svg-icons';
 import { faRedoAlt, faSun, faMoon, faCircleHalfStroke, faCheck, faExternalLinkAlt, faDownload, faFileImport, faFileExport, faCopy } from '@fortawesome/free-solid-svg-icons';
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import { CookieService } from 'ngx-cookie-service';
 import { map, Observable, of, distinctUntilChanged } from 'rxjs';
 
@@ -38,7 +39,8 @@ export class AppComponent implements AfterViewInit {
   batchImportStatus = '';
   importInProgress = false;
   cancelImportFlag = false;
-  versionInfo: string | null = null;
+  ytDlpVersion: string | null = null;
+  metubeVersion: string | null = null;
   isAdvancedOpen = false;
 
   @ViewChild('queueMasterCheckbox') queueMasterCheckbox: MasterCheckboxComponent;
@@ -64,6 +66,7 @@ export class AppComponent implements AfterViewInit {
   faFileImport = faFileImport;
   faFileExport = faFileExport;
   faCopy = faCopy;
+  faGithub = faGithub;
 
   constructor(public downloads: DownloadsService, private cookieService: CookieService, private http: HttpClient) {
     this.format = cookieService.get('metube_format') || 'any';
@@ -449,13 +452,15 @@ export class AppComponent implements AfterViewInit {
   fetchVersionInfo(): void {
     const baseUrl = `${window.location.origin}${window.location.pathname.replace(/\/[^\/]*$/, '/')}`;
     const versionUrl = `${baseUrl}version`;
-    this.http.get<{ version: string}>(versionUrl)
+    this.http.get<{ 'yt-dlp': string, version: string }>(versionUrl)
       .subscribe({
         next: (data) => {
-          this.versionInfo = `yt-dlp version: ${data.version}`;
+          this.ytDlpVersion = data['yt-dlp'];
+          this.metubeVersion = data.version;
         },
         error: () => {
-          this.versionInfo = '';
+          this.ytDlpVersion = null;
+          this.metubeVersion = null;
         }
       });
   }