fix and update

apps/frontend/app/security/page.tsx

@@ -12,6 +12,7 @@ import {
   Monitor,
   type LucideIcon,
   Phone,
+  QrCode,
   ShieldCheck,
   Smartphone,
   Speaker,
@@ -29,9 +30,10 @@ import { OtpInput } from '@/components/ui/otp-input';
 import { ActiveDevice, ActiveSession, apiFetch, AUTH_SESSION_KEY, getApiErrorMessage, SignInEvent, TotpSetupResponse, TotpStatusResponse } from '@/lib/api';
 import { markPinIdleWatch } from '@/lib/pin-idle-storage';
 import { formatUserAgentLabel } from '@/lib/device-client';
+import { DeviceLinkQrDialog } from '@/components/id/device-link-qr-dialog';
+import { useRequireAuth } from '@/hooks/use-require-auth';
 import { cn } from '@/lib/utils';
 import { QRCodeSVG } from 'qrcode.react';
-import { useRequireAuth } from '@/hooks/use-require-auth';
 
 function formatDate(value: string) {
   return new Intl.DateTimeFormat('ru-RU', {
@@ -91,6 +93,7 @@ export default function SecurityPage() {
   const [passwordTotpCode, setPasswordTotpCode] = useState('');
   const [newPassword, setNewPassword] = useState('');
   const [passwordOtpSending, setPasswordOtpSending] = useState(false);
+  const [deviceLinkOpen, setDeviceLinkOpen] = useState(false);
 
   const hasSmsContact = Boolean(user?.phone || user?.backupPhone);
   const hasEmailContact = Boolean(user?.email || user?.backupEmail);
@@ -418,7 +421,20 @@ export default function SecurityPage() {
       </div>
 
       <div className="mt-8 space-y-2">
-        <h2 className="text-lg font-medium">Другие устройства</h2>
+        <div className="flex items-center justify-between gap-3">
+          <h2 className="text-lg font-medium">Другие устройства</h2>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="rounded-xl"
+            disabled={!user || !token || isSecurityLoading}
+            onClick={() => setDeviceLinkOpen(true)}
+          >
+            <QrCode className="mr-2 h-4 w-4" />
+            Подключить новое
+          </Button>
+        </div>
         {isSecurityLoading ? (
           <div className="rounded-[20px] bg-[#f4f5f8] px-4 py-5 text-[#667085]">Загружаем устройства...</div>
         ) : devices.length ? (
@@ -729,6 +745,16 @@ export default function SecurityPage() {
           ) : null}
         </DialogContent>
       </Dialog>
+
+      {user && token ? (
+        <DeviceLinkQrDialog
+          open={deviceLinkOpen}
+          userId={user.id}
+          token={token}
+          onOpenChange={setDeviceLinkOpen}
+          onLinked={() => void loadSecurity()}
+        />
+      ) : null}
     </IdShell>
   );
 }