feat: qr codes

src/pages/AccountPage.tsx

@@ -10,6 +10,7 @@ import { Skeleton } from '../components/Skeleton';
 import { StatStrip } from '../components/StatStrip';
 import { DeviceCard } from '../components/DeviceCard';
 import { Modal } from '../components/Modal';
+import { SubscriptionQrModal } from '../components/SubscriptionQrModal';
 import type { Device, SubscriptionData, UserInfo } from '../types';
 
 export function AccountPage() {
@@ -22,6 +23,7 @@ export function AccountPage() {
   const [subscription, setSubscription] = useState<SubscriptionData | null>(null);
   const [loadingMeta, setLoadingMeta] = useState(true);
   const [pending, setPending] = useState<Device | null>(null);
+  const [isQrOpen, setIsQrOpen] = useState(false);
 
   useEffect(() => {
     if (!isAuthenticated) {
@@ -137,9 +139,19 @@ export function AccountPage() {
                 {subscription.subscription_link}
               </span>
             </div>
-            <button type="button" className="copy-link" onClick={() => void copySubscriptionLink()}>
-              Копировать
-            </button>
+            <div className="subscription-actions">
+              <button
+                type="button"
+                className="subscription-qr-button"
+                aria-label="Показать QR-код ссылки подписки"
+                onClick={() => setIsQrOpen(true)}
+              >
+                QR
+              </button>
+              <button type="button" className="copy-link" onClick={() => void copySubscriptionLink()}>
+                Копировать
+              </button>
+            </div>
           </section>
         </Reveal>
       ) : null}
@@ -210,6 +222,10 @@ export function AccountPage() {
         confirmLabel="Удалить"
         onConfirm={confirmDelete}
       />
+      <SubscriptionQrModal
+        link={isQrOpen ? subscription?.subscription_link ?? null : null}
+        onClose={() => setIsQrOpen(false)}
+      />
     </Shell>
   );
 }