feat: add frontend subscription page - M4 (refs #55)

frontend/src/App.tsx

@@ -59,6 +59,10 @@ const CallbackMobileScreen = lazy(() => import('./features/auth/mobile/CallbackM
 const OnboardingPage = lazy(() => import('./features/onboarding/pages/OnboardingPage').then(m => ({ default: m.OnboardingPage })));
 const OnboardingMobileScreen = lazy(() => import('./features/onboarding/mobile/OnboardingMobileScreen').then(m => ({ default: m.OnboardingMobileScreen })));
 
+// Subscription pages (lazy-loaded)
+const SubscriptionPage = lazy(() => import('./features/subscription/pages/SubscriptionPage').then(m => ({ default: m.SubscriptionPage })));
+const SubscriptionMobileScreen = lazy(() => import('./features/subscription/mobile/SubscriptionMobileScreen').then(m => ({ default: m.SubscriptionMobileScreen })));
+
 import { HomePage } from './pages/HomePage';
 import { BottomNavigation } from './shared-minimal/components/mobile/BottomNavigation';
 import { QuickAction } from './shared-minimal/components/mobile/quickActions';
@@ -743,6 +747,31 @@ function App() {
                 </MobileErrorBoundary>
               </motion.div>
             )}
+            {activeScreen === "Subscription" && (
+              <motion.div
+                key="subscription"
+                initial={{opacity:0, y:8}}
+                animate={{opacity:1, y:0}}
+                exit={{opacity:0, y:-8}}
+                transition={{ duration: 0.2, ease: "easeOut" }}
+              >
+                <MobileErrorBoundary screenName="Subscription">
+                  <React.Suspense fallback={
+                    <div className="space-y-4">
+                      <GlassCard>
+                        <div className="p-4">
+                          <div className="text-slate-500 py-6 text-center">
+                            Loading subscription...
+                          </div>
+                        </div>
+                      </GlassCard>
+                    </div>
+                  }>
+                    <SubscriptionMobileScreen />
+                  </React.Suspense>
+                </MobileErrorBoundary>
+              </motion.div>
+            )}
             {activeScreen === "Documents" && (
               <motion.div
                 key="documents"
@@ -1012,6 +1041,7 @@ function App() {
             <Route path="/garage/stations" element={<StationsPage />} />
             <Route path="/garage/settings" element={<SettingsPage />} />
             <Route path="/garage/settings/security" element={<SecuritySettingsPage />} />
+            <Route path="/garage/settings/subscription" element={<SubscriptionPage />} />
             <Route path="/garage/settings/admin/users" element={<AdminUsersPage />} />
             <Route path="/garage/settings/admin/catalog" element={<AdminCatalogPage />} />
             <Route path="/garage/settings/admin/community-stations" element={<AdminCommunityStationsPage />} />