feat: add QR code generation for user subscription URL

- Integrate uqr library for QR code rendering
- Add "Show QR" button in user details modal
- Update localization files with new QR-related translations

Author: kastov

package-lock.json

@@ -45,7 +45,7 @@
     "@mantine/nprogress": "^7.17.1",
     "@monaco-editor/react": "^4.7.0",
     "@paralleldrive/cuid2": "2.2.2",
-    "@remnawave/backend-contract": "0.3.6",
+    "@remnawave/backend-contract": "0.3.7",
     "@stablelib/base64": "^2.0.1",
     "@stablelib/x25519": "^2.0.1",
     "@tabler/icons-react": "^3.31.0",
@@ -79,6 +79,7 @@
     "react-router-dom": "6.27.0",
     "recharts": "^2.15.1",
     "tiny-invariant": "^1.3.3",
+    "uqr": "^0.1.2",
     "vite-plugin-deadfile": "^1.3.0",
     "xbytes": "^1.9.1",
     "zod": "^3.23.8",

package.json

@@ -257,7 +257,10 @@
             "user-details": "User details",
             "loading-user-data": "Loading user data...",
             "edit-user": "Edit user",
-            "never": "Never"
+            "never": "Never",
+            "show-qr": "Show QR",
+            "subscription-qr-code": "Subscription QR Code",
+            "close": "Close"
         }
     },
     "base-api-token-form": {

public/locales/en/remnawave.json

@@ -257,7 +257,10 @@
             "user-details": "جزئیات کاربر",
             "loading-user-data": "در حال بارگذاری اطلاعات کاربر...",
             "edit-user": "ویرایش کاربر",
-            "never": "هرگز"
+            "never": "هرگز",
+            "close": "نزدیک",
+            "show-qr": "نمایش QR",
+            "subscription-qr-code": "اشتراک کد QR"
         }
     },
     "base-api-token-form": {

public/locales/fa/remnawave.json

@@ -257,7 +257,10 @@
             "user-details": "Информация о пользователе",
             "loading-user-data": "Загрузка данных пользователя...",
             "edit-user": "Редактировать пользователя",
-            "never": "Никогда"
+            "never": "Никогда",
+            "close": "Закрыть",
+            "show-qr": "Показать QR",
+            "subscription-qr-code": "QR-код ссылки-подписки"
         }
     },
     "base-api-token-form": {

public/locales/ru/remnawave.json

@@ -23,13 +23,16 @@ import {
     PiCopy,
     PiFloppyDiskDuotone,
     PiLinkDuotone,
+    PiQrCodeDuotone,
     PiUserDuotone
 } from 'react-icons/pi'
 import { UpdateUserCommand } from '@remnawave/backend-contract'
 import { useForm, zodResolver } from '@mantine/form'
 import { DateTimePicker } from '@mantine/dates'
 import { useTranslation } from 'react-i18next'
 import { useEffect, useMemo } from 'react'
+import { modals } from '@mantine/modals'
+import { renderSVG } from 'uqr'
 import dayjs from 'dayjs'
 
 import {
@@ -383,6 +386,41 @@ export const ViewUserModal = () => {
                             </ActionIcon.Group>
                         </Group>
                         <Group>
+                            <Button
+                                leftSection={<PiQrCodeDuotone size="1rem" />}
+                                onClick={() => {
+                                    const subscriptionQrCode = renderSVG(
+                                        user?.subscriptionUrl ?? '',
+                                        {
+                                            whiteColor: '#161B22',
+                                            blackColor: '#3CC9DB'
+                                        }
+                                    )
+                                    modals.open({
+                                        centered: true,
+                                        title: t('view-user-modal.widget.subscription-qr-code'),
+                                        children: (
+                                            <>
+                                                <div
+                                                    dangerouslySetInnerHTML={{
+                                                        __html: subscriptionQrCode
+                                                    }}
+                                                />
+                                                <Button
+                                                    fullWidth
+                                                    mt="md"
+                                                    onClick={() => modals.closeAll()}
+                                                >
+                                                    {t('view-user-modal.widget.close')}
+                                                </Button>
+                                            </>
+                                        )
+                                    })
+                                }}
+                                size="md"
+                            >
+                                {t('view-user-modal.widget.show-qr')}
+                            </Button>
                             {user && <ToggleUserStatusButtonFeature user={user} />}
                             <Button
                                 color="blue"