Refactor Dockerfile and Vite configuration to remove VITE_APP_VERSION and streamline build process

- Removed VITE_APP_VERSION from Dockerfile and GitHub workflows.
- Simplified Vite configuration by eliminating the Git version retrieval function and global constant for app version.
- Updated ColorPicker and other components to enhance accessibility with aria-labels.
- Introduced unique identifiers for buttons in the AppEditorModal for better React key management.
- Improved error handling in the Login component to provide user-friendly messages without exposing sensitive data.

src/components/ColorPicker.tsx

@@ -81,14 +81,15 @@ export function ColorPicker({ value, onChange, label, description, disabled }: C
       {description && <p className="text-xs text-dark-500 mb-2">{description}</p>}
 
       <div className="flex items-center gap-3">
-        {/* Color preview button */}
+        {/* Color preview button - min 44px for touch accessibility */}
         <button
           type="button"
           onClick={() => !disabled && setIsOpen(!isOpen)}
           disabled={disabled}
-          className="w-10 h-10 rounded-lg border-2 border-dark-700 shadow-inner transition-all hover:scale-105 hover:border-dark-600 disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0"
+          className="w-11 h-11 rounded-lg border-2 border-dark-700 shadow-inner transition-all hover:scale-105 hover:border-dark-600 disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0"
           style={{ backgroundColor: localValue || '#000000' }}
           title={localValue}
+          aria-label={`Select color: ${localValue}`}
         />
 
         {/* Hex input */}
@@ -112,13 +113,14 @@ export function ColorPicker({ value, onChange, label, description, disabled }: C
           className="sr-only"
         />
 
-        {/* Native picker button */}
+        {/* Native picker button - min 44px for touch accessibility */}
         <button
           type="button"
           onClick={() => colorInputRef.current?.click()}
           disabled={disabled}
-          className="btn-secondary p-2 disabled:opacity-50"
+          className="btn-secondary min-w-[44px] min-h-[44px] p-2.5 disabled:opacity-50"
           title="Open color picker"
+          aria-label="Open color picker"
         >
           <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
             <path
@@ -134,16 +136,17 @@ export function ColorPicker({ value, onChange, label, description, disabled }: C
       {isOpen && (
         <div className="absolute z-50 mt-2 p-3 bg-dark-800 rounded-xl border border-dark-700 shadow-xl animate-fade-in">
           <div className="text-xs text-dark-400 mb-2">Preset colors</div>
-          <div className="grid grid-cols-6 gap-2">
+          <div className="grid grid-cols-4 sm:grid-cols-6 gap-1">
             {PRESET_COLORS.map((preset) => (
               <button
                 key={preset}
                 onClick={() => handlePresetClick(preset)}
-                className={`w-7 h-7 rounded-lg border-2 transition-all hover:scale-110 ${
-                  localValue === preset ? 'border-white' : 'border-dark-600 hover:border-dark-500'
+                className={`min-w-[44px] min-h-[44px] w-11 h-11 rounded-lg border-2 transition-all hover:scale-105 ${
+                  localValue === preset ? 'border-white ring-2 ring-white/30' : 'border-dark-600 hover:border-dark-500'
                 }`}
                 style={{ backgroundColor: preset }}
                 title={preset}
+                aria-label={`Select color ${preset}`}
               />
             ))}
           </div>

src/components/ConnectionModal.tsx

@@ -286,7 +286,7 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
               <h2 className="text-lg font-semibold text-dark-100">
                 {t('subscription.connection.title')}
               </h2>
-              <button onClick={onClose} className="btn-icon">
+              <button onClick={onClose} className="btn-icon" aria-label="Close">
                 <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                   <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                 </svg>

src/components/InsufficientBalancePrompt.tsx

@@ -152,7 +152,7 @@ function PaymentMethodModal({ paymentMethods, onSelect, onClose }: PaymentMethod
         {/* Header */}
         <div className="flex items-center justify-between px-4 py-3 bg-dark-800/50">
           <span className="font-semibold text-dark-100">{t('balance.selectPaymentMethod')}</span>
-          <button onClick={onClose} className="p-1.5 rounded-lg hover:bg-dark-700 text-dark-400">
+          <button onClick={onClose} className="p-1.5 rounded-lg hover:bg-dark-700 text-dark-400" aria-label="Close">
             <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>

src/components/Onboarding.tsx

@@ -179,9 +179,9 @@ export default function Onboarding({ steps, onComplete, onSkip }: OnboardingProp
       >
         {/* Progress indicator */}
         <div className="flex items-center gap-1.5 mb-4">
-          {steps.map((_, index) => (
+          {steps.map((s, index) => (
             <div
-              key={index}
+              key={s.target}
               className={`h-1 rounded-full transition-all duration-300 ${
                 index === currentStep
                   ? 'w-6 bg-accent-500'

src/components/TopUpModal.tsx

@@ -9,23 +9,55 @@ import type { PaymentMethod } from '../types'
 const TELEGRAM_LINK_REGEX = /^https?:\/\/t\.me\//i
 const isTelegramPaymentLink = (url: string): boolean => TELEGRAM_LINK_REGEX.test(url)
 
-const openPaymentLink = (url: string, reservedWindow?: Window | null) => {
-  if (typeof window === 'undefined' || !url) return
+/**
+ * Открывает платёжную ссылку разными способами в зависимости от окружения.
+ * Возвращает true если ссылка успешно открыта, false если все методы не сработали.
+ */
+const openPaymentLink = (url: string, reservedWindow?: Window | null): boolean => {
+  if (typeof window === 'undefined' || !url) return false
   const webApp = window.Telegram?.WebApp
 
+  // Попытка 1: Telegram openTelegramLink для t.me ссылок
   if (isTelegramPaymentLink(url) && webApp?.openTelegramLink) {
-    try { webApp.openTelegramLink(url); return } catch (e) { console.warn('[TopUpModal] openTelegramLink failed:', e) }
+    try {
+      webApp.openTelegramLink(url)
+      return true
+    } catch (e) {
+      console.warn('[TopUpModal] openTelegramLink failed:', e)
+    }
   }
+
+  // Попытка 2: Telegram WebApp openLink
   if (webApp?.openLink) {
-    try { webApp.openLink(url, { try_instant_view: false }); return } catch (e) { console.warn('[TopUpModal] webApp.openLink failed:', e) }
+    try {
+      webApp.openLink(url, { try_instant_view: false })
+      return true
+    } catch (e) {
+      console.warn('[TopUpModal] webApp.openLink failed:', e)
+    }
   }
+
+  // Попытка 3: Зарезервированное окно браузера
   if (reservedWindow && !reservedWindow.closed) {
-    try { reservedWindow.location.href = url; reservedWindow.focus?.() } catch (e) { console.warn('[TopUpModal] Failed to use reserved window:', e) }
-    return
+    try {
+      reservedWindow.location.href = url
+      reservedWindow.focus?.()
+      return true
+    } catch (e) {
+      console.warn('[TopUpModal] Failed to use reserved window:', e)
+    }
   }
+
+  // Попытка 4: window.open
   const w2 = window.open(url, '_blank', 'noopener,noreferrer')
-  if (w2) { w2.opener = null; return }
+  if (w2) {
+    w2.opener = null
+    return true
+  }
+
+  // Последний вариант: редирект текущей страницы
   window.location.href = url
+  return true
 }
 
 interface TopUpModalProps {
@@ -82,24 +114,47 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
   })
 
   const topUpMutation = useMutation<{
-    payment_id: string; payment_url?: string; invoice_url?: string
-    amount_kopeks: number; amount_rubles: number; status: string; expires_at: string | null
+    payment_id: string
+    payment_url?: string
+    invoice_url?: string
+    amount_kopeks: number
+    amount_rubles: number
+    status: string
+    expires_at: string | null
   }, unknown, number>({
     mutationFn: (amountKopeks: number) => balanceApi.createTopUp(amountKopeks, method.id, selectedOption || undefined),
     onSuccess: (data) => {
-      const redirectUrl = data.payment_url || (data as any).invoice_url
-      if (redirectUrl) openPaymentLink(redirectUrl, popupRef.current)
+      const redirectUrl = data.payment_url || data.invoice_url
+      if (!redirectUrl) {
+        setError(t('balance.noPaymentUrl', 'Сервер не вернул ссылку для оплаты'))
+        closePopupSafely()
+        return
+      }
+      const opened = openPaymentLink(redirectUrl, popupRef.current)
+      if (!opened) {
+        setError(t('balance.openLinkFailed', 'Не удалось открыть страницу оплаты'))
+      }
       popupRef.current = null
       onClose()
     },
     onError: (err: unknown) => {
-      try { if (popupRef.current && !popupRef.current.closed) popupRef.current.close() } catch {}
-      popupRef.current = null
+      closePopupSafely()
       const detail = (err as { response?: { data?: { detail?: string } } })?.response?.data?.detail || ''
       setError(detail.includes('not yet implemented') ? t('balance.useBot') : (detail || t('common.error')))
     },
   })
 
+  const closePopupSafely = () => {
+    try {
+      if (popupRef.current && !popupRef.current.closed) {
+        popupRef.current.close()
+      }
+    } catch (e) {
+      console.warn('[TopUpModal] Failed to close popup:', e)
+    }
+    popupRef.current = null
+  }
+
   const handleSubmit = () => {
     setError(null)
     inputRef.current?.blur()
@@ -139,7 +194,7 @@ export default function TopUpModal({ method, onClose, initialAmountRubles }: Top
         {/* Header */}
         <div className="flex items-center justify-between px-4 py-3 bg-dark-800/50">
           <span className="font-semibold text-dark-100">{methodName}</span>
-          <button onClick={onClose} className="p-1.5 rounded-lg hover:bg-dark-700 text-dark-400">
+          <button onClick={onClose} className="p-1.5 rounded-lg hover:bg-dark-700 text-dark-400" aria-label="Close">
             <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
             </svg>

src/components/layout/Layout.tsx

@@ -337,6 +337,7 @@ export default function Layout({ children }: LayoutProps) {
                              dark:text-dark-400 dark:hover:text-dark-100 dark:hover:bg-dark-800
                              text-champagne-500 hover:text-champagne-800 hover:bg-champagne-200/50"
                   title={isDark ? t('theme.light') || 'Light mode' : t('theme.dark') || 'Dark mode'}
+                  aria-label={isDark ? t('theme.light') || 'Switch to light mode' : t('theme.dark') || 'Switch to dark mode'}
                 >
                   <div className="relative w-5 h-5">
                     <div className={`absolute inset-0 transition-all duration-300 ${isDark ? 'opacity-100 rotate-0' : 'opacity-0 rotate-90'}`}>
@@ -373,6 +374,7 @@ export default function Layout({ children }: LayoutProps) {
                   onClick={logout}
                   className="btn-icon"
                   title={t('nav.logout')}
+                  aria-label={t('nav.logout') || 'Logout'}
                 >
                   <LogoutIcon />
                 </button>
@@ -382,6 +384,8 @@ export default function Layout({ children }: LayoutProps) {
               <button
                 onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                 className="lg:hidden btn-icon"
+                aria-label={mobileMenuOpen ? t('common.close') || 'Close menu' : t('nav.menu') || 'Open menu'}
+                aria-expanded={mobileMenuOpen}
               >
                 {mobileMenuOpen ? <CloseIcon /> : <MenuIcon />}
               </button>
@@ -500,14 +504,6 @@ export default function Layout({ children }: LayoutProps) {
           {children}
         </div>
 
-        {/* Version footer for admin pages */}
-        {isAdminActive() && (
-          <div className="mt-8 pt-4 border-t border-dark-800/50 text-center">
-            <span className="text-xs text-dark-500">
-              Cabinet {__APP_VERSION__}
-            </span>
-          </div>
-        )}
       </main>
 
       {/* Mobile Bottom Navigation - only core items */}