feat(release): add mobile APK download feature

- Add ReleaseService on server to fetch mobile APK URL from GitHub releases
- Expose getMobileApkUrl API via new TRPC releasesRouter
- Inject ReleaseService in frontend app and login page components
- Add mobile app download buttons with error handling in UI
- Update package.json and lock with axios and its types dependencies
- Adjust UI styles for new download button and existing elements

Author: EndyKaufman

web/package-lock.json

@@ -55,6 +55,7 @@
     "@trpc/client": "^10.45.2",
     "@trpc/server": "^10.45.2",
     "@zxing/browser": "^0.1.5",
+    "axios": "^1.13.2",
     "cors": "^2.8.5",
     "es-toolkit": "^1.41.0",
     "isomorphic-fetch": "^3.0.0",
@@ -81,6 +82,7 @@
     "@angular/compiler-cli": "^20.0.0",
     "@tailwindcss/postcss": "^4.1.17",
     "@tailwindcss/vite": "^4.1.18",
+    "@types/axios": "^0.9.36",
     "@types/node": "^24.9.2",
     "@types/qrcode": "^1.5.6",
     "@typescript-eslint/eslint-plugin": "^8.46.4",

web/package.json

@@ -18,6 +18,7 @@ import { ShowNavGuard } from './guards/nav.guard';
 import { AuthService } from './services/auth.service';
 import { ErrorHandlerService } from './services/error-handler.service';
 import { ProfileService } from './services/profile.service';
+import { ReleaseService } from './services/release.service';
 
 export const routeMeta: RouteMeta = {
   canActivate: [ShowNavGuard],
@@ -95,6 +96,15 @@ export const routeMeta: RouteMeta = {
             <i-lucide name="settings" class="w-6 h-6 mr-0 lg:mr-3"></i-lucide>
             <span class="mobile-hidden lg:inline">Settings</span>
           </a>
+
+
+          <button
+            (click)="downloadMobileApk()"
+            class="flex items-center p-3 rounded-xl text-gray-600 font-medium transition-all duration-300 hover:bg-gray-100 hover:text-gray-800 w-full text-left"
+          >
+            <i-lucide name="smartphone" class="w-6 h-6 mr-0 lg:mr-3"></i-lucide>
+            <span class="mobile-hidden lg:inline">Mobile App</span>
+          </button>
         </nav>
 
         <div
@@ -103,11 +113,12 @@ export const routeMeta: RouteMeta = {
           <div class="flex justify-between items-center w-full px-2">
             <button
               (click)="signOut()"
-              class="mt-2 text-red-500 font-medium hover:text-red-700 transition-colors flex items-center"
+              class="p-2 rounded-lg bg-gray-200 hover:bg-gray-300 text-red-500 font-medium transition-colors flex items-center"
             >
               <i-lucide name="log-out" class="w-5 h-5 mr-0 lg:mr-2"></i-lucide>
               <span class="mobile-hidden lg:inline">Sign Out</span>
             </button>
+
             <color-scheme-switcher class="flex items-center" />
           </div>
         </div>
@@ -128,6 +139,7 @@ export class AppComponent implements OnInit {
   private readonly router = inject(Router);
   private readonly appInitializerService = inject(AppInitializerService);
   private readonly errorHandler = inject(ErrorHandlerService);
+  private readonly releaseService = inject(ReleaseService);
 
   ngOnInit(): void {
     this.router.events
@@ -175,4 +187,30 @@ export class AppComponent implements OnInit {
       new Error('This feature is not available yet')
     );
   }
+
+  downloadMobileApk() {
+    this.releaseService.getMobileApkDownloadUrl().subscribe({
+      next: (downloadUrl) => {
+        if (downloadUrl) {
+          // Open the download URL in a new tab
+          window.open(downloadUrl, '_blank');
+        } else {
+          this.errorHandler
+            .handleError(
+              new Error('Mobile APK download URL not found'),
+              'Download Unavailable'
+            )
+            .then();
+        }
+      },
+      error: (error) => {
+        this.errorHandler
+          .handleError(
+            error,
+            'Download Error'
+          )
+          .then();
+      }
+    });
+  }
 }

web/src/app/app.ts

@@ -28,7 +28,7 @@ import { ThemeService } from '../../services/theme.service';
               fill="none"
               strokeLinecap="round"
               strokeLinejoin="round"
-              class="text-gray-700"
+              class="text-gray-700 w-5 h-5 mr-0"
             >
               <path stroke="none" d="M0 0h24v24H0z" fill="none" />
               <path
@@ -49,7 +49,7 @@ import { ThemeService } from '../../services/theme.service';
               fill="none"
               strokeLinecap="round"
               strokeLinejoin="round"
-              class="hover:bg-pastel-blue hover:text-white"
+              class="hover:bg-pastel-blue hover:text-white w-5 h-5 mr-0"
             >
               <path stroke="none" d="M0 0h24v24H0z" fill="none" />
               <path

web/src/app/components/theme/color-scheme-switcher.component.ts

@@ -8,6 +8,7 @@ import { NgxTelegramWidgetComponent } from '../components/telegram/ngx-telegram-
 import { HideNavGuard } from '../guards/nav.guard';
 import { AuthService } from '../services/auth.service';
 import { ErrorHandlerService } from '../services/error-handler.service';
+import { ReleaseService } from '../services/release.service';
 import { TelegramSettingsService } from '../services/telegram-settings.service';
 import { TelegramService } from '../services/telegram.service';
 
@@ -300,6 +301,13 @@ export const routeMeta: RouteMeta = {
           >
             Continue as Guest
           </button>
+          <span class="text-gray-400 mx-2">|</span>
+          <button
+            (click)="downloadMobileApk()"
+            class="text-gray-500 font-medium hover:text-gray-800 transition-colors"
+          >
+            Download Mobile App
+          </button>
         </div>
       </div>
     </div>
@@ -311,6 +319,7 @@ export default class LoginPageComponent {
   private readonly telegramService = inject(TelegramService);
   private readonly telegramSettingsService = inject(TelegramSettingsService);
   private readonly errorHandlerService = inject(ErrorHandlerService);
+  private readonly releaseService = inject(ReleaseService);
 
   activeTab: 'signin' | 'signup' = 'signin'; // Default to sign in tab
 
@@ -434,4 +443,25 @@ export default class LoginPageComponent {
       )
       .subscribe();
   }
+
+  downloadMobileApk() {
+    this.releaseService.getMobileApkDownloadUrl().subscribe({
+      next: downloadUrl => {
+        if (downloadUrl) {
+          // Open the download URL in a new tab
+          window.open(downloadUrl, '_blank');
+        } else {
+          this.errorHandlerService
+            .handleError(
+              new Error('Mobile APK download URL not found'),
+              'Download Unavailable'
+            )
+            .then();
+        }
+      },
+      error: error => {
+        this.errorHandlerService.handleError(error, 'Download Error').then();
+      },
+    });
+  }
 }

web/src/app/pages/login.page.ts

@@ -0,0 +1,16 @@
+import { inject, Injectable } from '@angular/core';
+import { map, Observable } from 'rxjs';
+import { injectTrpcClient } from '../trpc-client';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ReleaseService {
+  private trpc = injectTrpcClient();
+
+  getMobileApkDownloadUrl(): Observable<string | null> {
+    return this.trpc.releases.getMobileApkUrl
+      .query()
+      .pipe(map(result => result));
+  }
+}