fix and update

2026-06-29 22:51:25 +03:00
parent 885b07d76b
commit 57cb58347b
30 changed files with 799 additions and 187 deletions
--- a/apps/frontend/components/family/chat-room-avatar-display.tsx
+++ b/apps/frontend/components/family/chat-room-avatar-display.tsx
@@ -4,8 +4,11 @@ import { Bot } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 import { UserAvatar } from '@/components/id/user-avatar';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useAuth } from '@/components/id/auth-provider';
 import { ChatRoom, apiFetch } from '@/lib/api';
 import { CHAT_ROOM_AVATAR_UPDATED_EVENT } from '@/lib/avatar-events';
+import { useResilientBlobUrl } from '@/hooks/use-resilient-blob-url';
 import { cn } from '@/lib/utils';

 interface ChatRoomAvatarDisplayProps {
@@ -21,7 +24,9 @@ function sizeClass(size: 'sm' | 'md') {
 }

 export function ChatRoomAvatarDisplay({ room, viewerUserId, token, className, size = 'md' }: ChatRoomAvatarDisplayProps) {
+  const { isLoading: authLoading } = useAuth();
  const [roomAvatarUrl, setRoomAvatarUrl] = useState<string | null>(null);
+  const [resolvingRoomAvatar, setResolvingRoomAvatar] = useState(false);
  const peerMember = useMemo(
    () =>
      room.type === 'DIRECT' || room.type === 'E2E' || room.type === 'BOT'
@@ -31,34 +36,44 @@ export function ChatRoomAvatarDisplay({ room, viewerUserId, token, className, si
  );

  useEffect(() => {
-    if (!token || !room.hasAvatar || room.type === 'DIRECT' || room.type === 'E2E' || room.type === 'BOT') {
+    if (!token || authLoading || !room.hasAvatar || room.type === 'DIRECT' || room.type === 'E2E' || room.type === 'BOT') {
      setRoomAvatarUrl(null);
+      setResolvingRoomAvatar(false);
      return;
    }
    let cancelled = false;
+    setResolvingRoomAvatar(true);
    apiFetch<{ accessUrl: string }>(`/media/chat/${room.id}/avatar/url`, {}, token)
      .then((response) => {
        if (!cancelled) setRoomAvatarUrl(response.accessUrl);
      })
      .catch(() => {
        if (!cancelled) setRoomAvatarUrl(null);
+      })
+      .finally(() => {
+        if (!cancelled) setResolvingRoomAvatar(false);
      });
    return () => {
      cancelled = true;
    };
-  }, [room.hasAvatar, room.id, room.type, room.updatedAt, token]);
+  }, [authLoading, room.hasAvatar, room.id, room.type, room.updatedAt, token]);

  useEffect(() => {
    function handleRoomAvatarUpdated(event: Event) {
      const detail = (event as CustomEvent<{ roomId?: string }>).detail;
-      if (detail?.roomId !== room.id || !room.hasAvatar || !token) return;
+      if (detail?.roomId !== room.id || !room.hasAvatar || !token || authLoading) return;
      apiFetch<{ accessUrl: string }>(`/media/chat/${room.id}/avatar/url`, {}, token)
        .then((response) => setRoomAvatarUrl(response.accessUrl))
        .catch(() => setRoomAvatarUrl(null));
    }
    window.addEventListener(CHAT_ROOM_AVATAR_UPDATED_EVENT, handleRoomAvatarUpdated);
    return () => window.removeEventListener(CHAT_ROOM_AVATAR_UPDATED_EVENT, handleRoomAvatarUpdated);
-  }, [room.hasAvatar, room.id, token]);
+  }, [authLoading, room.hasAvatar, room.id, token]);
+
+  const { blobUrl, isLoading: isLoadingRoomBlob } = useResilientBlobUrl(roomAvatarUrl, token, {
+    enabled: Boolean(room.hasAvatar && roomAvatarUrl && !authLoading),
+    label: `аватар чата ${room.name}`
+  });

  if (peerMember && (room.type === 'DIRECT' || room.type === 'E2E')) {
    return (
@@ -85,10 +100,22 @@ export function ChatRoomAvatarDisplay({ room, viewerUserId, token, className, si
    );
  }

-  if (room.hasAvatar && roomAvatarUrl) {
+  const isRoomAvatarLoading = Boolean(room.hasAvatar && (resolvingRoomAvatar || isLoadingRoomBlob || (roomAvatarUrl && !blobUrl)));
+
+  if (room.hasAvatar && isRoomAvatarLoading) {
    return (
      <Avatar className={cn(sizeClass(size), className)}>
-        <AvatarImage src={roomAvatarUrl} alt={room.name} />
+        <AvatarFallback className="bg-transparent p-0">
+          <Skeleton className="h-full w-full rounded-full" />
+        </AvatarFallback>
+      </Avatar>
+    );
+  }
+
+  if (room.hasAvatar && blobUrl) {
+    return (
+      <Avatar className={cn(sizeClass(size), className)}>
+        <AvatarImage src={blobUrl} alt={room.name} />
        <AvatarFallback>{room.name.slice(0, 2).toUpperCase()}</AvatarFallback>
      </Avatar>
    );
--- a/apps/frontend/components/family/family-group-view.tsx
+++ b/apps/frontend/components/family/family-group-view.tsx
@@ -65,6 +65,7 @@ import { useAuth } from '@/components/id/auth-provider';
 import { useToast } from '@/components/id/toast-provider';
 import { useRealtime } from '@/components/notifications/realtime-provider';
 import { Button } from '@/components/ui/button';
+import { MediaImageSkeleton } from '@/components/ui/media-image-skeleton';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { useRequireAuth } from '@/hooks/use-require-auth';
@@ -88,6 +89,7 @@ import {
  fetchFamilyPresence,
  forwardChatMessages,
  getApiErrorMessage,
+  getAccessToken,
  leaveFamilyGroup,
  markChatRoomRead,
  removeChatRoomMember,
@@ -197,22 +199,24 @@ function FamilySidebarAvatar({
  uploading?: boolean;
  onUpload: (file: File) => void;
 }) {
+  const { isLoading: authLoading } = useAuth();
  const [url, setUrl] = useState<string | null>(null);

  useEffect(() => {
-    if (!hasAvatar || !token) {
+    if (!hasAvatar || !token || authLoading) {
      setUrl(null);
      return;
    }
    apiFetch<{ accessUrl: string }>(`/media/families/${groupId}/avatar/url`, {}, token)
      .then((response) => setUrl(response.accessUrl))
      .catch(() => setUrl(null));
-  }, [groupId, hasAvatar, token]);
+  }, [authLoading, groupId, hasAvatar, token]);

  return (
    <HoverUploadAvatar
      name={name}
      imageUrl={url}
+      imageToken={token}
      uploading={uploading}
      onFileSelect={onUpload}
      className="h-11 w-11 shrink-0"
@@ -230,6 +234,10 @@ function familyMemberRoleLabel(role: string) {
  return role === 'owner' ? 'Создатель семьи' : 'Участник';
 }

+/** Desktop: зона под fixed UserMenu + колокольчик (IdShell), на mobile не применяется */
+const DESKTOP_CHAT_RIGHT_GUTTER = 'lg:pr-64';
+const DESKTOP_CHAT_TOP_GUTTER = 'lg:pt-14';
+
 function shouldSkipGroupedAlbumMessage(messages: ChatMessage[], index: number) {
  const message = messages[index];
  if (!message) return false;
@@ -257,7 +265,7 @@ function collectAlbumMessages(messages: ChatMessage[], startIndex: number) {

 export function FamilyGroupView({ groupId }: { groupId: string }) {
  const router = useRouter();
-  const { user, token } = useAuth();
+  const { user, token, isLoading: authLoading } = useAuth();
  const { isReady, isPinLocked } = useRequireAuth();
  const { showToast } = useToast();
  const { subscribe, connected } = useRealtime();
@@ -469,9 +477,10 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
  }, [isPinLocked, rooms, showToast, token]);

  const loadPresence = useCallback(async () => {
-    if (!token || isPinLocked) return;
+    const accessToken = getAccessToken() ?? token?.trim() ?? null;
+    if (!accessToken || isPinLocked) return;
    try {
-      const response = await fetchFamilyPresence(groupId, token);
+      const response = await fetchFamilyPresence(groupId, accessToken);
      setPresenceMembers(response.members ?? []);
    } catch {
      // ignore background presence errors
@@ -479,13 +488,14 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
  }, [groupId, isPinLocked, token]);

  useEffect(() => {
-    if (!isReady || !token || isPinLocked) return;
+    const accessToken = getAccessToken() ?? token?.trim() ?? null;
+    if (!isReady || !accessToken || isPinLocked || authLoading) return;
    setLoading(true);
    loadGroup()
      .catch((error) => showToast(getApiErrorMessage(error, 'Не удалось загрузить семью') ?? 'Ошибка'))
      .finally(() => setLoading(false));
    void loadPresence();
-  }, [isPinLocked, isReady, loadGroup, loadPresence, showToast, token]);
+  }, [authLoading, isPinLocked, isReady, loadGroup, loadPresence, showToast, token]);

  useEffect(() => {
    function handleAvatarUpdated() {
@@ -496,11 +506,12 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
  }, [loadGroup]);

  useEffect(() => {
-    if (!token || isPinLocked) return;
+    const accessToken = getAccessToken() ?? token?.trim() ?? null;
+    if (!accessToken || isPinLocked || authLoading) return;
    void loadPresence();
    const timer = window.setInterval(() => void loadPresence(), 25_000);
    return () => window.clearInterval(timer);
-  }, [connected, isPinLocked, loadPresence, token]);
+  }, [authLoading, connected, isPinLocked, loadPresence, token]);

  useEffect(() => {
    if (!activeRoomId || activeRoomIsBot) return;
@@ -1699,7 +1710,7 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
      >
        {activeRoom ? (
          <>
-            <div className="flex items-center justify-between gap-2 border-b border-[#dce3ec] bg-white px-3 py-3 sm:px-4 lg:pr-48">
+            <div className={cn('flex items-center justify-between gap-2 border-b border-[#dce3ec] bg-white px-3 py-3 sm:px-4', DESKTOP_CHAT_RIGHT_GUTTER)}>
              <div className="flex min-w-0 flex-1 items-center gap-2 sm:gap-3">
                <button
                  type="button"
@@ -1903,6 +1914,7 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
              <ChatPinnedMessageBanner
                senderName={pinnedMessage.senderName}
                preview={pinnedPreview}
+                className={DESKTOP_CHAT_RIGHT_GUTTER}
                onClick={() => {
                  if (!scrollToChatMessage(pinnedMessage.id)) {
                    showToast('Закреплённое сообщение пока не загружено в ленте');
@@ -1910,7 +1922,7 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
                }}
              />
            ) : null}
-            <div className={cn('flex-1 space-y-2 overflow-y-auto px-4 py-4', isDragging && 'select-none')}>
+            <div className={cn('flex-1 space-y-2 overflow-y-auto px-4 py-4', DESKTOP_CHAT_RIGHT_GUTTER, DESKTOP_CHAT_TOP_GUTTER, isDragging && 'select-none')}>
              {visibleMessages.map((message, messageIndex) => {
                if (shouldSkipGroupedAlbumMessage(visibleMessages, messageIndex)) {
                  return null;
@@ -2055,10 +2067,7 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
                          }
                          if (!media?.blobUrl || media.status === 'loading') {
                            return (
-                              <div className="flex items-center gap-2 text-sm text-[#667085]">
-                                <Loader2 className="h-4 w-4 animate-spin" />
-                                Загрузка файла...
-                              </div>
+                              <MediaImageSkeleton className="max-h-72 w-full max-w-[320px]" rounded="xl" />
                            );
                          }
                          if (message.type === 'IMAGE') {
@@ -2256,7 +2265,7 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
                onDelete={() => void handleBulkDelete()}
              />
            ) : (
-            <div className="border-t border-[#dce3ec] bg-white px-2 py-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] sm:px-3 sm:py-3">
+            <div className={cn('border-t border-[#dce3ec] bg-white px-2 py-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] sm:px-3 sm:py-3', DESKTOP_CHAT_RIGHT_GUTTER)}>
              {editingMessageId ? (
                <ChatMessageEditBanner
                  preview={draft.trim() || messages.find((item) => item.id === editingMessageId)?.content || undefined}
--- a/apps/frontend/components/family/hover-upload-avatar.tsx
+++ b/apps/frontend/components/family/hover-upload-avatar.tsx
@@ -3,11 +3,14 @@
 import { Camera, Loader2 } from 'lucide-react';
 import { useId } from 'react';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useResilientBlobUrl } from '@/hooks/use-resilient-blob-url';
 import { cn } from '@/lib/utils';

 interface HoverUploadAvatarProps {
  name: string;
  imageUrl?: string | null;
+  imageToken?: string | null;
  uploading?: boolean;
  onFileSelect: (file: File) => void;
  className?: string;
@@ -17,12 +20,18 @@ interface HoverUploadAvatarProps {
 export function HoverUploadAvatar({
  name,
  imageUrl,
+  imageToken = null,
  uploading = false,
  onFileSelect,
  className,
  fallbackClassName
 }: HoverUploadAvatarProps) {
  const inputId = useId();
+  const { blobUrl, isLoading } = useResilientBlobUrl(imageUrl, imageToken, {
+    enabled: Boolean(imageUrl && imageToken),
+    label: `аватар ${name}`
+  });
+  const resolvedUrl = blobUrl ?? (imageToken ? null : imageUrl);

  return (
    <label
@@ -34,8 +43,16 @@ export function HoverUploadAvatar({
      )}
    >
      <Avatar className="h-full w-full">
-        {imageUrl ? <AvatarImage src={imageUrl} alt={name} /> : null}
-        <AvatarFallback className={fallbackClassName}>{name.slice(0, 2).toUpperCase()}</AvatarFallback>
+        {isLoading && imageUrl ? (
+          <AvatarFallback className="bg-transparent p-0">
+            <Skeleton className="h-full w-full rounded-full" />
+          </AvatarFallback>
+        ) : (
+          <>
+            {resolvedUrl ? <AvatarImage src={resolvedUrl} alt={name} /> : null}
+            <AvatarFallback className={fallbackClassName}>{name.slice(0, 2).toUpperCase()}</AvatarFallback>
+          </>
+        )}
      </Avatar>
      <span
        className={cn(