Fix

2025-12-17 19:50:55 +07:00
parent debdd66458
commit 7e7cdbcd76
10 changed files with 225 additions and 77 deletions
--- a/frontend/src/api/users.ts
+++ b/frontend/src/api/users.ts
@@ -41,8 +41,9 @@ export const usersApi = {
  },

  // Получить аватар пользователя как blob URL
-  getAvatarUrl: async (userId: number): Promise<string> => {
-    const response = await client.get(`/users/${userId}/avatar`, {
+  getAvatarUrl: async (userId: number, bustCache = false): Promise<string> => {
+    const cacheBuster = bustCache ? `?t=${Date.now()}` : ''
+    const response = await client.get(`/users/${userId}/avatar${cacheBuster}`, {
      responseType: 'blob',
    })
    return URL.createObjectURL(response.data)
--- a/frontend/src/components/TelegramLink.tsx
+++ b/frontend/src/components/TelegramLink.tsx
@@ -125,8 +125,8 @@ export function TelegramLink() {
        onClick={() => setIsOpen(true)}
        className={`p-2 rounded-lg transition-colors ${
          isLinked
-            ? 'text-blue-400 hover:text-blue-300 hover:bg-gray-700'
-            : 'text-gray-400 hover:text-white hover:bg-gray-700'
+            ? 'text-blue-400 hover:text-blue-300 hover:bg-dark-700'
+            : 'text-gray-400 hover:text-white hover:bg-dark-700'
        }`}
        title={isLinked ? 'Telegram привязан' : 'Привязать Telegram'}
      >
@@ -134,17 +134,17 @@ export function TelegramLink() {
      </button>

      {isOpen && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-          <div className="bg-gray-800 rounded-xl max-w-md w-full p-6 relative">
+        <div className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+          <div className="glass rounded-xl max-w-md w-full p-6 relative border border-dark-600">
            <button
              onClick={handleClose}
-              className="absolute top-4 right-4 text-gray-400 hover:text-white"
+              className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
            >
              <X className="w-5 h-5" />
            </button>

            <div className="flex items-center gap-3 mb-6">
-              <div className="w-12 h-12 bg-blue-500/20 rounded-full flex items-center justify-center">
+              <div className="w-12 h-12 bg-blue-500/10 rounded-full flex items-center justify-center border border-blue-500/30">
                <MessageCircle className="w-6 h-6 text-blue-400" />
              </div>
              <div>
@@ -171,7 +171,7 @@ export function TelegramLink() {
                )}

                {/* User Profile Card */}
-                <div className="p-4 bg-gradient-to-br from-gray-700/50 to-gray-800/50 rounded-xl border border-gray-600/50">
+                <div className="p-4 bg-dark-700/50 rounded-xl border border-dark-600">
                  <div className="flex items-center gap-4">
                    {/* Avatar - Telegram avatar */}
                    <div className="relative">
@@ -182,12 +182,12 @@ export function TelegramLink() {
                          className="w-12 h-12 rounded-full object-cover border-2 border-blue-500/50"
                        />
                      ) : (
-                        <div className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center border-2 border-blue-500/50">
+                        <div className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-accent-500 flex items-center justify-center border-2 border-blue-500/50">
                          <User className="w-6 h-6 text-white" />
                        </div>
                      )}
                      {/* Link indicator */}
-                      <div className="absolute -bottom-1 -right-1 w-5 h-5 bg-green-500 rounded-full flex items-center justify-center border-2 border-gray-800">
+                      <div className="absolute -bottom-1 -right-1 w-5 h-5 bg-green-500 rounded-full flex items-center justify-center border-2 border-dark-800">
                        <Link2 className="w-2.5 h-2.5 text-white" />
                      </div>
                    </div>
@@ -205,7 +205,7 @@ export function TelegramLink() {
                </div>

                {/* Notifications Info */}
-                <div className="p-4 bg-gray-700/30 rounded-lg">
+                <div className="p-4 bg-dark-700/30 rounded-lg border border-dark-600/50">
                  <p className="text-sm text-gray-300 font-medium mb-3">Уведомления включены:</p>
                  <div className="grid grid-cols-1 gap-2">
                    <div className="flex items-center gap-2 text-sm text-gray-400">
@@ -254,7 +254,7 @@ export function TelegramLink() {

                    <button
                      onClick={handleOpenBot}
-                      className="w-full py-3 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
+                      className="w-full py-3 px-4 bg-blue-500/20 hover:bg-blue-500/30 text-blue-400 border border-blue-500/50 hover:border-blue-500 rounded-lg font-medium transition-all duration-200 flex items-center justify-center gap-2"
                    >
                      <ExternalLink className="w-5 h-5" />
                      Открыть Telegram снова
@@ -268,13 +268,13 @@ export function TelegramLink() {

                    <button
                      onClick={handleOpenBot}
-                      className="w-full py-3 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
+                      className="w-full py-3 px-4 bg-blue-500/20 hover:bg-blue-500/30 text-blue-400 border border-blue-500/50 hover:border-blue-500 rounded-lg font-medium transition-all duration-200 flex items-center justify-center gap-2"
                    >
                      <ExternalLink className="w-5 h-5" />
                      Открыть Telegram
                    </button>

-                    <p className="text-sm text-gray-500 text-center">
+                    <p className="text-sm text-gray-400 text-center">
                      Ссылка действительна 10 минут
                    </p>
                  </>
@@ -304,7 +304,7 @@ export function TelegramLink() {
                <button
                  onClick={handleGenerateLink}
                  disabled={loading}
-                  className="w-full py-3 px-4 bg-blue-500 hover:bg-blue-600 text-white rounded-lg font-medium transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
+                  className="w-full py-3 px-4 bg-blue-500/20 hover:bg-blue-500/30 text-blue-400 border border-blue-500/50 hover:border-blue-500 rounded-lg font-medium transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
                >
                  {loading ? (
                    <Loader2 className="w-5 h-5 animate-spin" />
--- a/frontend/src/components/ui/ConfirmModal.tsx
+++ b/frontend/src/components/ui/ConfirmModal.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 import { AlertTriangle, Info, Trash2, X } from 'lucide-react'
 import { clsx } from 'clsx'
 import { useConfirmStore, type ConfirmVariant } from '@/store/confirm'
-import { Button } from './Button'
+import { NeonButton } from './NeonButton'

 const icons: Record<ConfirmVariant, React.ReactNode> = {
  danger: <Trash2 className="w-6 h-6" />,
@@ -11,15 +11,15 @@ const icons: Record<ConfirmVariant, React.ReactNode> = {
 }

 const iconStyles: Record<ConfirmVariant, string> = {
-  danger: 'bg-red-500/20 text-red-500',
-  warning: 'bg-yellow-500/20 text-yellow-500',
-  info: 'bg-blue-500/20 text-blue-500',
+  danger: 'bg-red-500/10 text-red-400 border border-red-500/30',
+  warning: 'bg-yellow-500/10 text-yellow-400 border border-yellow-500/30',
+  info: 'bg-neon-500/10 text-neon-400 border border-neon-500/30',
 }

-const buttonVariants: Record<ConfirmVariant, 'danger' | 'primary' | 'secondary'> = {
-  danger: 'danger',
-  warning: 'primary',
-  info: 'primary',
+const confirmButtonStyles: Record<ConfirmVariant, string> = {
+  danger: 'border-red-500/50 text-red-400 hover:bg-red-500/10 hover:border-red-500',
+  warning: 'border-yellow-500/50 text-yellow-400 hover:bg-yellow-500/10 hover:border-yellow-500',
+  info: '', // Will use NeonButton default
 }

 export function ConfirmModal() {
@@ -62,7 +62,7 @@ export function ConfirmModal() {
      />

      {/* Modal */}
-      <div className="relative bg-gray-800 rounded-xl shadow-2xl max-w-md w-full animate-in zoom-in-95 fade-in duration-200 border border-gray-700">
+      <div className="relative glass rounded-xl shadow-2xl max-w-md w-full animate-in zoom-in-95 fade-in duration-200 border border-dark-600">
        {/* Close button */}
        <button
          onClick={handleCancel}
@@ -89,20 +89,31 @@ export function ConfirmModal() {

          {/* Actions */}
          <div className="flex gap-3">
-            <Button
+            <NeonButton
              variant="secondary"
              className="flex-1"
              onClick={handleCancel}
            >
              {options.cancelText || 'Отмена'}
-            </Button>
-            <Button
-              variant={buttonVariants[variant]}
-              className="flex-1"
-              onClick={handleConfirm}
-            >
-              {options.confirmText || 'Подтвердить'}
-            </Button>
+            </NeonButton>
+            {variant === 'info' ? (
+              <NeonButton
+                className="flex-1"
+                onClick={handleConfirm}
+              >
+                {options.confirmText || 'Подтвердить'}
+              </NeonButton>
+            ) : (
+              <button
+                className={clsx(
+                  'flex-1 px-4 py-2.5 rounded-lg font-semibold transition-all duration-200 border-2 bg-transparent',
+                  confirmButtonStyles[variant]
+                )}
+                onClick={handleConfirm}
+              >
+                {options.confirmText || 'Подтвердить'}
+              </button>
+            )}
          </div>
        </div>
      </div>
--- a/frontend/src/components/ui/GlassCard.tsx
+++ b/frontend/src/components/ui/GlassCard.tsx
@@ -91,10 +91,14 @@ export function StatsCard({
        className
      )}
    >
-      <div className="flex items-center justify-between gap-3">
+      <div className="flex items-center justify-between gap-2">
        <div className="min-w-0 flex-1">
          <p className="text-sm text-gray-400 mb-1">{label}</p>
-          <p className={clsx('text-2xl font-bold truncate', valueColorClasses[color])}>
+          <p className={clsx(
+            'font-bold',
+            typeof value === 'number' ? 'text-2xl' : 'text-lg',
+            valueColorClasses[color]
+          )}>
            {value}
          </p>
          {trend && (
@@ -111,7 +115,7 @@ export function StatsCard({
        {icon && (
          <div
            className={clsx(
-              'w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0',
+              'w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0',
              iconColorClasses[color]
            )}
          >
--- a/frontend/src/components/ui/UserAvatar.tsx
+++ b/frontend/src/components/ui/UserAvatar.tsx
@@ -3,6 +3,8 @@ import { usersApi } from '@/api'

 // Глобальный кэш для blob URL аватарок
 const avatarCache = new Map<number, string>()
+// Пользователи, для которых нужно сбросить HTTP-кэш при следующем запросе
+const needsCacheBust = new Set<number>()

 interface UserAvatarProps {
  userId: number
@@ -10,6 +12,7 @@ interface UserAvatarProps {
  nickname: string
  size?: 'sm' | 'md' | 'lg'
  className?: string
+  version?: number  // Для принудительного обновления при смене аватара
 }

 const sizeClasses = {
@@ -18,7 +21,7 @@ const sizeClasses = {
  lg: 'w-24 h-24 text-xl',
 }

-export function UserAvatar({ userId, hasAvatar, nickname, size = 'md', className = '' }: UserAvatarProps) {
+export function UserAvatar({ userId, hasAvatar, nickname, size = 'md', className = '', version = 0 }: UserAvatarProps) {
  const [blobUrl, setBlobUrl] = useState<string | null>(null)
  const [failed, setFailed] = useState(false)

@@ -28,16 +31,31 @@ export function UserAvatar({ userId, hasAvatar, nickname, size = 'md', className
      return
    }

-    // Проверяем кэш
-    const cached = avatarCache.get(userId)
-    if (cached) {
-      setBlobUrl(cached)
-      return
+    // Если version > 0, значит аватар обновился - сбрасываем кэш
+    const shouldBustCache = version > 0 || needsCacheBust.has(userId)
+
+    // Проверяем кэш только если не нужен bust
+    if (!shouldBustCache) {
+      const cached = avatarCache.get(userId)
+      if (cached) {
+        setBlobUrl(cached)
+        return
+      }
+    }
+
+    // Очищаем старый кэш если bust
+    if (shouldBustCache) {
+      const cached = avatarCache.get(userId)
+      if (cached) {
+        URL.revokeObjectURL(cached)
+        avatarCache.delete(userId)
+      }
+      needsCacheBust.delete(userId)
    }

    // Загружаем аватарку
    let cancelled = false
-    usersApi.getAvatarUrl(userId)
+    usersApi.getAvatarUrl(userId, shouldBustCache)
      .then(url => {
        if (!cancelled) {
          avatarCache.set(userId, url)
@@ -53,7 +71,7 @@ export function UserAvatar({ userId, hasAvatar, nickname, size = 'md', className
    return () => {
      cancelled = true
    }
-  }, [userId, hasAvatar])
+  }, [userId, hasAvatar, version])

  const sizeClass = sizeClasses[size]

@@ -84,4 +102,6 @@ export function clearAvatarCache(userId: number) {
    URL.revokeObjectURL(cached)
    avatarCache.delete(userId)
  }
+  // Помечаем, что при следующем запросе нужно сбросить HTTP-кэш браузера
+  needsCacheBust.add(userId)
 }
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -33,7 +33,7 @@ type NicknameForm = z.infer<typeof nicknameSchema>
 type PasswordForm = z.infer<typeof passwordSchema>

 export function ProfilePage() {
-  const { user, updateUser } = useAuthStore()
+  const { user, updateUser, avatarVersion, bumpAvatarVersion } = useAuthStore()
  const toast = useToast()

  // State
@@ -72,31 +72,57 @@ export function ProfilePage() {
    }
  }, [])

+  // Ref для отслеживания текущего blob URL
+  const avatarBlobRef = useRef<string | null>(null)
+
  // Load avatar via API
  useEffect(() => {
-    if (user?.id && user?.avatar_url) {
-      loadAvatar(user.id)
-    } else {
+    if (!user?.id || !user?.avatar_url) {
      setIsLoadingAvatar(false)
+      return
    }
+
+    let cancelled = false
+    const bustCache = avatarVersion > 0
+
+    setIsLoadingAvatar(true)
+    usersApi.getAvatarUrl(user.id, bustCache)
+      .then(url => {
+        if (cancelled) {
+          URL.revokeObjectURL(url)
+          return
+        }
+        // Очищаем старый blob URL
+        if (avatarBlobRef.current) {
+          URL.revokeObjectURL(avatarBlobRef.current)
+        }
+        avatarBlobRef.current = url
+        setAvatarBlobUrl(url)
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setAvatarBlobUrl(null)
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setIsLoadingAvatar(false)
+        }
+      })
+
    return () => {
-      if (avatarBlobUrl) {
-        URL.revokeObjectURL(avatarBlobUrl)
+      cancelled = true
+    }
+  }, [user?.id, user?.avatar_url, avatarVersion])
+
+  // Cleanup blob URL on unmount
+  useEffect(() => {
+    return () => {
+      if (avatarBlobRef.current) {
+        URL.revokeObjectURL(avatarBlobRef.current)
      }
    }
-  }, [user?.id, user?.avatar_url])
-
-  const loadAvatar = async (userId: number) => {
-    setIsLoadingAvatar(true)
-    try {
-      const url = await usersApi.getAvatarUrl(userId)
-      setAvatarBlobUrl(url)
-    } catch {
-      setAvatarBlobUrl(null)
-    } finally {
-      setIsLoadingAvatar(false)
-    }
-  }
+  }, [])

  // Update nickname form when user changes
  useEffect(() => {
@@ -150,12 +176,10 @@ export function ProfilePage() {
      const updatedUser = await usersApi.uploadAvatar(file)
      updateUser({ avatar_url: updatedUser.avatar_url })
      if (user?.id) {
-        if (avatarBlobUrl) {
-          URL.revokeObjectURL(avatarBlobUrl)
-        }
        clearAvatarCache(user.id)
-        await loadAvatar(user.id)
      }
+      // Bump version - это вызовет перезагрузку через useEffect
+      bumpAvatarVersion()
      toast.success('Аватар обновлен')
    } catch {
      toast.error('Не удалось загрузить аватар')
--- a/frontend/src/store/auth.ts
+++ b/frontend/src/store/auth.ts
@@ -10,6 +10,7 @@ interface AuthState {
  isLoading: boolean
  error: string | null
  pendingInviteCode: string | null
+  avatarVersion: number

  login: (data: LoginData) => Promise<void>
  register: (data: RegisterData) => Promise<void>
@@ -18,6 +19,7 @@ interface AuthState {
  setPendingInviteCode: (code: string | null) => void
  consumePendingInviteCode: () => string | null
  updateUser: (updates: Partial<User>) => void
+  bumpAvatarVersion: () => void
 }

 export const useAuthStore = create<AuthState>()(
@@ -29,6 +31,7 @@ export const useAuthStore = create<AuthState>()(
      isLoading: false,
      error: null,
      pendingInviteCode: null,
+      avatarVersion: 0,

      login: async (data) => {
        set({ isLoading: true, error: null })
@@ -97,6 +100,10 @@ export const useAuthStore = create<AuthState>()(
          set({ user: { ...currentUser, ...updates } })
        }
      },
+
+      bumpAvatarVersion: () => {
+        set({ avatarVersion: get().avatarVersion + 1 })
+      },
    }),
    {
      name: 'auth-storage',