refactor: full codebase cleanup, dependency updates, and lint fixes

Phase 0: Remove ~920 lines of dead code (ThemeBentoPicker, PromoDiscountBadge,
AdminLayout, SettingsSidebar, MovingGradient, EmptyState, miniapp API, unused
types/functions/transitions/skeleton helpers). Fix API barrel file (add 20 missing exports).

Phase 1: Add ErrorBoundary (app/page/widget levels), centralize constants,
add axios timeout, fix staleTime:0 in React Query.

Phase 2: Consolidate hexToHsl, extract email validation, fix duplicate code.

Phase 3: Fix auth race condition (await checkAdminStatus), memoize useCurrency,
add WebSocket message validation.

Phase 4: Extract useBranding, useFeatureFlags, useScrollRestoration from AppShell.

Phase 5: Remove all eslint-disable react-hooks/exhaustive-deps (14 total),
simplify logger, remove deprecated hooks (useBackButton, useTelegramDnd,
useTelegramWebApp).

Dependencies: React 19, react-router 7, zustand 5, i18next 25, react-i18next 16,
eslint-plugin-react-refresh 0.5. Remove unused @lottiefiles/dotlottie-react.
Convert vite manualChunks to function-based approach for react-router v7 compat.

Lint: Fix logger.ts no-unused-expressions, fix react-refresh/only-export-components
in 6 Radix primitive files (const re-exports → direct re-exports), fix
WebSocketProvider exhaustive-deps. Result: 0 errors, 0 warnings.

Add CLAUDE.md to .gitignore.

src/components/layout/AppShell/AppHeader.tsx

@@ -1,4 +1,4 @@
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from '@tanstack/react-query';
 import { useState, useEffect } from 'react';

src/components/layout/AppShell/AppShell.tsx

@@ -1,26 +1,19 @@
-import { useEffect, useState, useCallback, useRef } from 'react';
-import { useLocation, useNavigate, Link } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { useLocation, Link } from 'react-router';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 
 import { useAuthStore } from '@/store/auth';
-import { useBackButton, useHaptic } from '@/platform';
+import { useHaptic } from '@/platform';
 import { useTelegramSDK } from '@/hooks/useTelegramSDK';
 import { useTheme } from '@/hooks/useTheme';
+import { useBranding } from '@/hooks/useBranding';
+import { useFeatureFlags } from '@/hooks/useFeatureFlags';
+import { useScrollRestoration } from '@/hooks/useScrollRestoration';
 import { themeColorsApi } from '@/api/themeColors';
-import { referralApi } from '@/api/referral';
-import { wheelApi } from '@/api/wheel';
-import { contestsApi } from '@/api/contests';
-import { pollsApi } from '@/api/polls';
-import {
-  brandingApi,
-  getCachedBranding,
-  setCachedBranding,
-  preloadLogo,
-  isLogoPreloaded,
-} from '@/api/branding';
-import { setCachedFullscreenEnabled } from '@/hooks/useTelegramSDK';
+import { isLogoPreloaded } from '@/api/branding';
 import { cn } from '@/lib/utils';
+import { UI } from '@/config/constants';
 
 import WebSocketNotifications from '@/components/WebSocketNotifications';
 import SuccessNotificationModal from '@/components/SuccessNotificationModal';
@@ -176,9 +169,6 @@ const MoonIcon = ({ className }: { className?: string }) => (
   </svg>
 );
 
-const FALLBACK_NAME = import.meta.env.VITE_APP_NAME || 'Cabinet';
-const FALLBACK_LOGO = import.meta.env.VITE_APP_LOGO || 'V';
-
 interface AppShellProps {
   children: React.ReactNode;
 }
@@ -186,20 +176,17 @@ interface AppShellProps {
 export function AppShell({ children }: AppShellProps) {
   const { t } = useTranslation();
   const location = useLocation();
-  const navigate = useNavigate();
-  const { isAdmin, isAuthenticated, logout } = useAuthStore();
-  const {
-    isFullscreen,
-    safeAreaInset,
-    contentSafeAreaInset,
-    requestFullscreen,
-    isTelegramWebApp,
-    platform,
-    isMobile,
-  } = useTelegramSDK();
+  const { isAdmin, logout } = useAuthStore();
+  const { isFullscreen, safeAreaInset, contentSafeAreaInset, platform, isMobile } =
+    useTelegramSDK();
   const haptic = useHaptic();
   const { toggleTheme, isDark } = useTheme();
 
+  // Extracted hooks
+  const { appName, logoLetter, hasCustomLogo, logoUrl } = useBranding();
+  const { referralEnabled, wheelEnabled, hasContests, hasPolls } = useFeatureFlags();
+  useScrollRestoration();
+
   // Theme toggle visibility
   const { data: enabledThemes } = useQuery({
     queryKey: ['enabled-themes'],
@@ -214,147 +201,6 @@ export function AppShell({ children }: AppShellProps) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
 
-  // Scroll position restoration for admin pages
-  const scrollPositions = useRef<Record<string, number>>({});
-
-  // Disable browser's automatic scroll restoration
-  useEffect(() => {
-    if ('scrollRestoration' in history) {
-      history.scrollRestoration = 'manual';
-    }
-  }, []);
-
-  // Continuously save scroll position for current path
-  useEffect(() => {
-    const currentPath = location.pathname;
-
-    // Only track scroll for admin pages
-    if (!currentPath.startsWith('/admin')) return;
-
-    const handleScroll = () => {
-      scrollPositions.current[currentPath] = window.scrollY;
-    };
-
-    // Save on scroll
-    window.addEventListener('scroll', handleScroll, { passive: true });
-
-    // Restore scroll position immediately (synchronous)
-    const savedPosition = scrollPositions.current[currentPath];
-    if (savedPosition !== undefined && savedPosition > 0) {
-      // Immediate restore
-      window.scrollTo({ top: savedPosition, behavior: 'instant' });
-    }
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [location.pathname]);
-
-  // Branding
-  const { data: branding } = useQuery({
-    queryKey: ['branding'],
-    queryFn: async () => {
-      const data = await brandingApi.getBranding();
-      setCachedBranding(data);
-      preloadLogo(data);
-      return data;
-    },
-    initialData: getCachedBranding() ?? undefined,
-    staleTime: 60000,
-    enabled: isAuthenticated,
-  });
-
-  const appName = branding ? branding.name : FALLBACK_NAME;
-  const logoLetter = branding?.logo_letter || FALLBACK_LOGO;
-  const hasCustomLogo = branding?.has_custom_logo || false;
-  const logoUrl = branding ? brandingApi.getLogoUrl(branding) : null;
-
-  // Set document title
-  useEffect(() => {
-    document.title = appName || 'VPN';
-  }, [appName]);
-
-  // Update favicon
-  useEffect(() => {
-    if (!logoUrl) return;
-
-    const link =
-      document.querySelector<HTMLLinkElement>("link[rel*='icon']") ||
-      document.createElement('link');
-    link.type = 'image/x-icon';
-    link.rel = 'shortcut icon';
-    link.href = logoUrl;
-    document.head.appendChild(link);
-  }, [logoUrl]);
-
-  // Fullscreen setting from server
-  const { data: fullscreenSetting } = useQuery({
-    queryKey: ['fullscreen-enabled'],
-    queryFn: brandingApi.getFullscreenEnabled,
-    staleTime: 60000,
-  });
-
-  // Apply fullscreen setting when loaded from server
-  // Only apply on mobile Telegram (iOS/Android) - desktop doesn't need fullscreen
-  useEffect(() => {
-    if (!fullscreenSetting || !isTelegramWebApp) return;
-
-    // Update cache for future app starts
-    setCachedFullscreenEnabled(fullscreenSetting.enabled);
-
-    // Request fullscreen if enabled, not already fullscreen, and on mobile Telegram
-    if (fullscreenSetting.enabled && !isFullscreen && isMobile) {
-      requestFullscreen();
-    }
-  }, [fullscreenSetting, isTelegramWebApp, isFullscreen, requestFullscreen, isMobile]);
-
-  // Feature flags
-  const { data: referralTerms } = useQuery({
-    queryKey: ['referral-terms'],
-    queryFn: referralApi.getReferralTerms,
-    enabled: isAuthenticated,
-    staleTime: 60000,
-    retry: false,
-  });
-
-  const { data: wheelConfig } = useQuery({
-    queryKey: ['wheel-config'],
-    queryFn: wheelApi.getConfig,
-    enabled: isAuthenticated,
-    staleTime: 60000,
-    retry: false,
-  });
-
-  const { data: contestsCount } = useQuery({
-    queryKey: ['contests-count'],
-    queryFn: contestsApi.getCount,
-    enabled: isAuthenticated,
-    staleTime: 60000,
-    retry: false,
-  });
-
-  const { data: pollsCount } = useQuery({
-    queryKey: ['polls-count'],
-    queryFn: pollsApi.getCount,
-    enabled: isAuthenticated,
-    staleTime: 60000,
-    retry: false,
-  });
-
-  // BackButton for Telegram Mini App
-  // Don't show back button on main tab pages (bottom nav) - users navigate via tabs
-  const mainTabPaths = ['/', '/subscription', '/balance', '/referral', '/support', '/wheel'];
-  const isMainTabPage = mainTabPaths.includes(location.pathname);
-  const handleBack = useCallback(() => {
-    if (mobileMenuOpen) {
-      setMobileMenuOpen(false);
-      return;
-    }
-    navigate(-1);
-  }, [mobileMenuOpen, navigate]);
-
-  useBackButton(isMainTabPage ? null : handleBack);
-
   // Keyboard detection for hiding bottom nav
   useEffect(() => {
     const handleFocusIn = (e: FocusEvent) => {
@@ -405,7 +251,8 @@ export function AppShell({ children }: AppShellProps) {
   // Calculate header height based on fullscreen mode (only on mobile Telegram)
   // On iOS: contentSafeAreaInset.top includes status bar + dynamic island + Telegram header
   // On Android: safeAreaInset.top only includes status bar, need to add Telegram header height (~48px)
-  const telegramHeaderHeight = platform === 'android' ? 48 : 45;
+  const telegramHeaderHeight =
+    platform === 'android' ? UI.TELEGRAM_HEADER_ANDROID_PX : UI.TELEGRAM_HEADER_IOS_PX;
   const headerHeight = isMobileFullscreen
     ? 64 + Math.max(safeAreaInset.top, contentSafeAreaInset.top) + telegramHeaderHeight
     : 64;
@@ -465,7 +312,7 @@ export function AppShell({ children }: AppShellProps) {
                 <span>{item.label}</span>
               </Link>
             ))}
-            {referralTerms?.is_enabled && (
+            {referralEnabled && (
               <Link
                 to="/referral"
                 onClick={handleNavClick}
@@ -541,10 +388,10 @@ export function AppShell({ children }: AppShellProps) {
         safeAreaInset={safeAreaInset}
         contentSafeAreaInset={contentSafeAreaInset}
         telegramPlatform={platform}
-        wheelEnabled={wheelConfig?.is_enabled}
-        referralEnabled={referralTerms?.is_enabled}
-        hasContests={(contestsCount?.count ?? 0) > 0}
-        hasPolls={(pollsCount?.count ?? 0) > 0}
+        wheelEnabled={wheelEnabled}
+        referralEnabled={referralEnabled}
+        hasContests={hasContests}
+        hasPolls={hasPolls}
       />
 
       {/* Desktop spacer */}
@@ -559,8 +406,8 @@ export function AppShell({ children }: AppShellProps) {
       {/* Mobile Bottom Navigation */}
       <MobileBottomNav
         isKeyboardOpen={isKeyboardOpen}
-        referralEnabled={referralTerms?.is_enabled}
-        wheelEnabled={wheelConfig?.is_enabled}
+        referralEnabled={referralEnabled}
+        wheelEnabled={wheelEnabled}
       />
     </div>
   );

src/components/layout/AppShell/Aurora.tsx

@@ -154,6 +154,14 @@ export function Aurora() {
   const background = isDark ? themeColors.darkBackground : themeColors.lightBackground;
   const surface = isDark ? themeColors.darkSurface : themeColors.lightSurface;
 
+  // Refs for initial color values (WebGL context shouldn't recreate on color change)
+  const backgroundRef = useRef(background);
+  backgroundRef.current = background;
+  const surfaceRef = useRef(surface);
+  surfaceRef.current = surface;
+  const accentRef = useRef(themeColors.accent);
+  accentRef.current = themeColors.accent;
+
   // Initialize WebGL context once (only depends on isEnabled)
   useEffect(() => {
     if (!isEnabled || !containerRef.current) return;
@@ -175,7 +183,11 @@ export function Aurora() {
 
     const geometry = new Triangle(gl);
 
-    const colorStops = generateColorStops(background, surface, themeColors.accent);
+    const colorStops = generateColorStops(
+      backgroundRef.current,
+      surfaceRef.current,
+      accentRef.current,
+    );
     const colorStopsArray = colorStops
       .map((hex) => {
         const c = new Color(hex);
@@ -238,7 +250,7 @@ export function Aurora() {
       rendererRef.current = null;
       programRef.current = null;
     };
-  }, [isEnabled]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [isEnabled]);
 
   // Update color uniforms reactively without recreating WebGL context
   useEffect(() => {

src/components/layout/AppShell/DesktopSidebar.tsx

@@ -1,4 +1,4 @@
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import { motion } from 'framer-motion';
 import { useQuery } from '@tanstack/react-query';

src/components/layout/AppShell/MobileBottomNav.tsx

@@ -1,4 +1,4 @@
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import { motion } from 'framer-motion';
 

src/components/layout/AppShell/MovingGradient.tsx

@@ -1,57 +0,0 @@
-import { motion } from 'framer-motion';
-
-/**
- * Animated moving gradient background.
- * Uses CSS variables for colors to support theme switching.
- * Lightweight - pure CSS gradients with Framer Motion animation.
- */
-export function MovingGradient() {
-  return (
-    <div className="fixed inset-0 -z-10 overflow-hidden">
-      {/* Base background */}
-      <div className="absolute inset-0 bg-dark-950" />
-
-      {/* Animated gradient layer */}
-      <motion.div
-        className="absolute inset-0 opacity-60"
-        style={{
-          background:
-            'radial-gradient(ellipse 80% 50% at 20% 40%, rgba(var(--color-accent-500), 0.12) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 60%, rgba(var(--color-accent-500), 0.08) 0%, transparent 50%)',
-        }}
-        animate={{
-          backgroundPosition: ['0% 0%', '100% 100%', '0% 0%'],
-        }}
-        transition={{
-          duration: 20,
-          repeat: Infinity,
-          ease: 'linear',
-        }}
-      />
-
-      {/* Second animated layer - moves in opposite direction */}
-      <motion.div
-        className="absolute inset-0 opacity-40"
-        style={{
-          background:
-            'radial-gradient(ellipse 70% 60% at 70% 30%, rgba(var(--color-accent-500), 0.1) 0%, transparent 50%), radial-gradient(ellipse 50% 50% at 30% 70%, rgba(var(--color-accent-500), 0.06) 0%, transparent 50%)',
-        }}
-        animate={{
-          backgroundPosition: ['100% 100%', '0% 0%', '100% 100%'],
-        }}
-        transition={{
-          duration: 25,
-          repeat: Infinity,
-          ease: 'linear',
-        }}
-      />
-
-      {/* Subtle noise texture overlay */}
-      <div
-        className="absolute inset-0 opacity-[0.02]"
-        style={{
-          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
-        }}
-      />
-    </div>
-  );
-}