feat(mobile-fixes-phase3): Complete US-302 - Footer Nav pe toate Paginile de Setări

Implemented by Ralph autonomous loop.
Iteration: 4

Co-Authored-By: Claude <noreply@anthropic.com>

src/modules/reports/views/TelegramView.vue

@@ -1,13 +1,22 @@
 <template>
-  <main class="main-content">
-    <div class="app-container">
-      <!-- Page Header -->
-      <div class="page-header">
-        <h1 class="page-title">Telegram Bot</h1>
-        <p class="page-subtitle">
-          Conectează-ți contul pentru acces rapid din Telegram
-        </p>
-      </div>
+  <div class="telegram-view" :class="{ 'mobile-layout': isMobile }">
+    <!-- US-302: Mobile Material Design Top Bar -->
+    <MobileTopBar
+      v-if="isMobile"
+      title="Telegram"
+      :show-back="true"
+      @back-click="router.push('/settings')"
+    />
+
+    <main class="main-content">
+      <div class="app-container">
+        <!-- Page Header - Desktop only -->
+        <div v-if="!isMobile" class="page-header">
+          <h1 class="page-title">Telegram Bot</h1>
+          <p class="page-subtitle">
+            Conectează-ți contul pentru acces rapid din Telegram
+          </p>
+        </div>
 
       <!-- Loading State -->
       <div v-if="loading" class="loading-state">
@@ -71,15 +80,23 @@
       </div>
     </div>
   </main>
+
+    <!-- US-302: Mobile Bottom Navigation -->
+    <MobileBottomNav v-if="isMobile" />
+  </div>
 </template>
 
 <script setup>
-import { ref, computed, onUnmounted } from "vue";
+import { ref, computed, onMounted, onUnmounted } from "vue";
+import { useRouter } from "vue-router";
 import { useToast } from "primevue/usetoast";
 import Button from "primevue/button";
 import Toast from "primevue/toast";
 import QRCodeVue from "qrcode.vue";
 import axios from "axios";
+// US-302: Mobile Material Design components
+import MobileTopBar from '@shared/components/mobile/MobileTopBar.vue';
+import MobileBottomNav from '@shared/components/mobile/MobileBottomNav.vue';
 
 // Telegram API uses /api/telegram (separate from reports)
 const telegramApi = axios.create({
@@ -97,6 +114,15 @@ telegramApi.interceptors.request.use((config) => {
 });
 
 const toast = useToast();
+const router = useRouter();
+
+// US-302: Mobile state
+const isMobile = ref(window.innerWidth < 768);
+
+// Handle window resize
+const handleResize = () => {
+  isMobile.value = window.innerWidth < 768;
+};
 
 // State
 const linkingCode = ref("");
@@ -196,12 +222,28 @@ const copyCode = async () => {
   }
 };
 
+// US-302: Lifecycle
+onMounted(() => {
+  window.addEventListener('resize', handleResize);
+});
+
 onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
   if (countdownInterval) clearInterval(countdownInterval);
 });
 </script>
 
 <style scoped>
+/* US-302: Mobile Layout - Padding for fixed top/bottom bars */
+.telegram-view.mobile-layout {
+  padding-top: 56px; /* MobileTopBar height */
+  padding-bottom: 56px; /* MobileBottomNav height */
+}
+
+.telegram-view.mobile-layout .main-content {
+  padding: var(--space-sm);
+}
+
 /* Page Header - Uses global .page-header pattern */
 /* Loading - Uses global .loading-spinner pattern */
 /* Card - Uses global .card pattern */