Enhance dialogs and configuration handling in the admin interface

- Updated `EditNodeDialog` and `RegisterNodeDialog` to prevent interaction outside the dialog, improving user experience.
- Added data attributes to password fields in both dialogs for better password management.
- Refactored `CreateConfigDialog` to accept inbounds as a prop, improving data handling and user feedback when no inbounds are available.
- Introduced a warning banner in the root layout to inform users about the necessity of linking their Telegram account for notifications and password recovery.
- Updated translations for improved clarity regarding available inbounds and Telegram linking requirements.

frontend/src/features/admin/nodes/EditNodeDialog.tsx

@@ -31,7 +31,7 @@ export function EditNodeDialog({ node, open, onOpenChange }: { node: NodeDto; op
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent>
+      <DialogContent onInteractOutside={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>{node.name}</DialogTitle>
         </DialogHeader>
@@ -68,6 +68,10 @@ export function EditNodeDialog({ node, open, onOpenChange }: { node: NodeDto; op
               id="editPassword"
               type="password"
               autoComplete="new-password"
+              data-lpignore="true"
+              data-1p-ignore
+              data-bwignore
+              data-form-type="other"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
             />

frontend/src/features/admin/nodes/RegisterNodeDialog.tsx

@@ -41,7 +41,7 @@ export function RegisterNodeDialog() {
       <DialogTrigger asChild>
         <Button size="sm">{t('admin.nodes.create')}</Button>
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent onInteractOutside={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle>{t('admin.nodes.create')}</DialogTitle>
         </DialogHeader>
@@ -76,6 +76,10 @@ export function RegisterNodeDialog() {
               id="nodePassword"
               type="password"
               autoComplete="new-password"
+              data-lpignore="true"
+              data-1p-ignore
+              data-bwignore
+              data-form-type="other"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               required

frontend/src/features/configs/CreateConfigDialog.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { Plus } from 'lucide-react'
 import { toast } from '@/shared/ui/toast-store'
@@ -9,9 +9,10 @@ import { Label } from '@/shared/ui/label'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/shared/ui/dialog'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/ui/select'
 import { HttpError } from '@/shared/api/client'
-import { createConfig, listAvailableInbounds } from './api'
+import type { AvailableInboundDto } from '@/shared/api/types'
+import { createConfig } from './api'
 
-export function CreateConfigDialog() {
+export function CreateConfigDialog({ inbounds }: { inbounds: AvailableInboundDto[] }) {
   const { t } = useTranslation()
   const queryClient = useQueryClient()
   const [open, setOpen] = useState(false)
@@ -19,8 +20,6 @@ export function CreateConfigDialog() {
   const [label, setLabel] = useState('')
   const [deviceLimit, setDeviceLimit] = useState('')
 
-  const inboundsQuery = useQuery({ queryKey: ['available-inbounds'], queryFn: listAvailableInbounds, enabled: open })
-
   const createMutation = useMutation({
     mutationFn: () => createConfig(inboundId, label.trim() || undefined, deviceLimit ? Number(deviceLimit) : undefined),
     onSuccess: async () => {
@@ -64,16 +63,13 @@ export function CreateConfigDialog() {
                 <SelectValue placeholder={t('configs.selectLocation')} />
               </SelectTrigger>
               <SelectContent>
-                {inboundsQuery.data?.map((inbound) => (
+                {inbounds.map((inbound) => (
                   <SelectItem key={inbound.inboundId} value={inbound.inboundId}>
                     {inbound.displayName} ({inbound.protocol})
                   </SelectItem>
                 ))}
               </SelectContent>
             </Select>
-            {inboundsQuery.data?.length === 0 && (
-              <p className="text-xs text-muted-foreground">{t('configs.noInboundsAvailable')}</p>
-            )}
           </div>
           <div className="flex flex-col gap-1.5">
             <Label htmlFor="label">{t('configs.label')}</Label>

frontend/src/features/telegram/TelegramLinkWarningBanner.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react'
+import { Link } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { X } from 'lucide-react'
+import { useAuthStore } from '@/features/auth/store'
+
+export function TelegramLinkWarningBanner() {
+  const { t } = useTranslation()
+  const { user, isBootstrapping } = useAuthStore()
+  const [dismissed, setDismissed] = useState(false)
+
+  if (isBootstrapping || !user || user.telegramLinked || dismissed) return null
+
+  return (
+    <div className="flex items-center justify-between gap-4 border-b border-border bg-amber-500/10 px-6 py-2 text-sm text-amber-700 dark:text-amber-400">
+      <p>
+        {t('telegramLinkWarning.message')}{' '}
+        <Link to="/settings" className="font-medium underline underline-offset-2">
+          {t('telegramLinkWarning.action')}
+        </Link>
+      </p>
+      <button
+        type="button"
+        onClick={() => setDismissed(true)}
+        aria-label={t('telegramLinkWarning.dismiss')}
+        className="shrink-0 text-amber-700/70 hover:text-amber-700 dark:text-amber-400/70 dark:hover:text-amber-400"
+      >
+        <X className="h-4 w-4" />
+      </button>
+    </div>
+  )
+}