feat: integrate ML-DSA65 key generation and update dependencies in KeypairGeneratorWidget

Author: kastov

package-lock.json

@@ -57,8 +57,9 @@
     "@mantine/nprogress": "^8.3.3",
     "@mantine/spotlight": "^8.3.3",
     "@monaco-editor/react": "^4.7.0",
+    "@noble/post-quantum": "^0.5.2",
     "@paralleldrive/cuid2": "2.2.2",
-    "@remnawave/backend-contract": "2.1.64",
+    "@remnawave/backend-contract": "2.1.65",
     "@stablelib/base64": "^2.0.1",
     "@stablelib/x25519": "^2.0.1",
     "@tabler/icons-react": "^3.35.0",

package.json

@@ -0,0 +1,38 @@
+import { ActionIcon, CopyButton, Textarea } from '@mantine/core'
+import { PiCheck, PiCopy } from 'react-icons/pi'
+
+export const CopyableAreaShared = ({
+    label,
+    value
+}: {
+    label?: string
+    value: number | string
+}) => {
+    return (
+        <CopyButton timeout={2000} value={value.toString()}>
+            {({ copied, copy }) => (
+                <Textarea
+                    label={label}
+                    onClick={copy}
+                    readOnly
+                    rightSection={
+                        <ActionIcon
+                            color={copied ? 'teal' : 'gray'}
+                            onClick={copy}
+                            variant="subtle"
+                        >
+                            {copied ? <PiCheck size="16px" /> : <PiCopy size="16px" />}
+                        </ActionIcon>
+                    }
+                    styles={{
+                        input: {
+                            cursor: 'copy',
+                            fontFamily: 'monospace'
+                        }
+                    }}
+                    value={value.toString()}
+                />
+            )}
+        </CopyButton>
+    )
+}

src/shared/ui/copyable-area/copyable-area.tsx

@@ -0,0 +1,56 @@
+.tab {
+    position: relative;
+    border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+    background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
+
+    @mixin hover {
+        background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
+    }
+
+    @mixin smaller-than 370px {
+        border-radius: 8px;
+        margin: 4px;
+    }
+
+    @mixin larger-than 370px {
+        &:first-of-type {
+            border-radius: 8px 0 0 8px;
+
+            @mixin rtl {
+                border-radius: 0 8px 8px 0;
+            }
+        }
+
+        &:last-of-type {
+            border-radius: 0 8px 8px 0;
+
+            @mixin rtl {
+                border-radius: 8px 0 0 8px;
+            }
+        }
+
+        & + & {
+            border-left-width: 0;
+
+            @mixin rtl {
+                border-right-width: 0;
+                border-left-width: 1px;
+            }
+        }
+    }
+
+    &[data-active] {
+        z-index: 1;
+        background-color: transparent;
+        border: 2px solid var(--mantine-color-cyan-filled);
+
+        @mixin hover {
+            background-color: var(--mantine-color-cyan-outline-hover);
+        }
+    }
+}
+
+.tabLabel {
+    color: var(--mantine-color-white);
+    font-weight: 500;
+}