From 8ce4b1a24a42ffe77fa9ce10df385d4f216ddb59 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Sat, 7 Mar 2026 23:25:33 +0300
Subject: [PATCH] refactor: move ConnectionQR into standard Layout with proper
 navigation

- Wrap /connection/qr route in ProtectedRoute with Layout
- Remove fullscreen overlay and custom close button
- Add AdminBackButton with replace prop to avoid history cycles
- Use replace navigation from Connection to QR page
- Add replace prop support to AdminBackButton component
---
 src/App.tsx                              |   8 +-
 src/components/admin/AdminBackButton.tsx |   4 +-
 src/pages/Connection.tsx                 |   1 +
 src/pages/ConnectionQR.tsx               | 106 +++++++----------------
 4 files changed, 42 insertions(+), 77 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 46e0ea8..5b484ca 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -406,9 +406,11 @@ function App() {
         <Route
           path="/connection/qr"
           element={
-            <LazyPage>
-              <ConnectionQR />
-            </LazyPage>
+            <ProtectedRoute>
+              <LazyPage>
+                <ConnectionQR />
+              </LazyPage>
+            </ProtectedRoute>
           }
         />
         <Route
diff --git a/src/components/admin/AdminBackButton.tsx b/src/components/admin/AdminBackButton.tsx
index 5dc084b..6770f90 100644
--- a/src/components/admin/AdminBackButton.tsx
+++ b/src/components/admin/AdminBackButton.tsx
@@ -4,6 +4,7 @@ import { BackIcon } from './icons';
 
 interface AdminBackButtonProps {
   to?: string;
+  replace?: boolean;
   className?: string;
 }
 
@@ -11,7 +12,7 @@ interface AdminBackButtonProps {
  * Back button for admin pages.
  * Hidden in Telegram Mini App since native back button is used instead.
  */
-export function AdminBackButton({ to = '/admin', className }: AdminBackButtonProps) {
+export function AdminBackButton({ to = '/admin', replace, className }: AdminBackButtonProps) {
   const { platform } = usePlatform();
 
   // In Telegram Mini App, we use native back button
@@ -22,6 +23,7 @@ export function AdminBackButton({ to = '/admin', className }: AdminBackButtonPro
   return (
     <Link
       to={to}
+      replace={replace}
       className={
         className ||
         'flex h-10 w-10 items-center justify-center rounded-xl border border-dark-700 bg-dark-800 transition-colors hover:border-dark-600'
diff --git a/src/pages/Connection.tsx b/src/pages/Connection.tsx
index 21e7e9b..9300219 100644
--- a/src/pages/Connection.tsx
+++ b/src/pages/Connection.tsx
@@ -37,6 +37,7 @@ export default function Connection() {
 
   const handleOpenQR = useCallback(() => {
     navigate('/connection/qr', {
+      replace: true,
       state: {
         url: appConfig?.subscriptionUrl,
         hideLink: appConfig?.hideLink ?? false,
diff --git a/src/pages/ConnectionQR.tsx b/src/pages/ConnectionQR.tsx
index b09cffe..5671a2a 100644
--- a/src/pages/ConnectionQR.tsx
+++ b/src/pages/ConnectionQR.tsx
@@ -2,8 +2,8 @@ import { useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import { QRCodeSVG } from 'qrcode.react';
-import { useAuthStore } from '../store/auth';
 import { useBranding } from '../hooks/useBranding';
+import { AdminBackButton } from '@/components/admin';
 
 interface ConnectionQRState {
   url: string;
@@ -20,96 +20,56 @@ export default function ConnectionQR() {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const location = useLocation();
-  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
-  const isLoading = useAuthStore((state) => state.isLoading);
   const { appName } = useBranding();
 
   const state = location.state as unknown;
   const validState = isValidState(state) ? state : null;
 
   useEffect(() => {
-    if (!isLoading && !isAuthenticated) {
-      navigate('/login', { replace: true });
-    }
-  }, [isAuthenticated, isLoading, navigate]);
-
-  useEffect(() => {
-    if (!isLoading && isAuthenticated && !validState) {
+    if (!validState) {
       navigate('/connection', { replace: true });
     }
-  }, [isLoading, isAuthenticated, validState, navigate]);
+  }, [validState, navigate]);
 
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        e.preventDefault();
-        navigate(-1);
-      }
-    };
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [navigate]);
-
-  if (isLoading || !validState) {
+  if (!validState) {
     return null;
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex min-h-dvh flex-col items-center justify-center bg-gradient-to-b from-dark-900 to-dark-950">
-      {/* Close button */}
-      <button
-        type="button"
-        onClick={() => navigate(-1)}
-        className="absolute left-4 top-4 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-dark-800/60 backdrop-blur-sm transition-colors hover:bg-dark-700/80"
-        aria-label={t('common.close')}
-      >
-        <svg
-          className="h-5 w-5 text-dark-200"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          strokeWidth={2}
-        >
-          <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-        </svg>
-      </button>
+    <div className="animate-fade-in">
+      <div className="mb-6 flex items-center gap-3">
+        <AdminBackButton to="/connection" replace />
+        <h1 className="text-2xl font-bold text-dark-100">{t('subscription.connection.qrTitle')}</h1>
+      </div>
 
-      {/* Content */}
-      <div className="flex w-full max-w-sm animate-scale-in flex-col items-center px-6">
-        {/* Branding name */}
-        {appName && (
-          <p className="mb-3 text-sm font-medium uppercase tracking-wider text-dark-400">
-            {appName}
+      <div className="flex flex-col items-center">
+        <div className="flex w-full max-w-sm flex-col items-center px-6">
+          {appName && (
+            <p className="mb-3 text-sm font-medium uppercase tracking-wider text-dark-400">
+              {appName}
+            </p>
+          )}
+
+          <p className="mb-8 text-center text-sm text-dark-400">
+            {t('subscription.connection.qrScanHint')}
           </p>
-        )}
 
-        {/* Title */}
-        <h1 className="mb-2 text-center text-xl font-bold text-dark-100">
-          {t('subscription.connection.qrTitle')}
-        </h1>
+          <div className="rounded-3xl bg-white p-6">
+            <QRCodeSVG
+              value={validState.url}
+              size={280}
+              level="M"
+              includeMargin={false}
+              className="h-[280px] w-[280px] sm:h-[360px] sm:w-[360px]"
+            />
+          </div>
 
-        {/* Hint */}
-        <p className="mb-8 text-center text-sm text-dark-400">
-          {t('subscription.connection.qrScanHint')}
-        </p>
-
-        {/* QR code container */}
-        <div className="rounded-3xl bg-white p-6">
-          <QRCodeSVG
-            value={validState.url}
-            size={280}
-            level="M"
-            includeMargin={false}
-            className="h-[280px] w-[280px] sm:h-[360px] sm:w-[360px]"
-          />
+          {!validState.hideLink && (
+            <p className="mt-6 max-w-full truncate text-center font-mono text-xs text-dark-500">
+              {validState.url}
+            </p>
+          )}
         </div>
-
-        {/* URL display */}
-        {!validState.hideLink && (
-          <p className="mt-6 max-w-full truncate text-center font-mono text-xs text-dark-500">
-            {validState.url}
-          </p>
-        )}
       </div>
     </div>
   );