fix and update

apps/frontend/hooks/use-avatar-url.ts

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useAuth } from '@/components/id/auth-provider';
 import { apiFetch } from '@/lib/api';
 import { AVATAR_UPDATED_EVENT } from '@/lib/avatar-events';
+import { useResilientBlobUrl } from '@/hooks/use-resilient-blob-url';
 
 interface AvatarAccessResponse {
   accessUrl: string;
@@ -12,41 +13,61 @@ interface AvatarAccessResponse {
 
 export function useAvatarUrl(userId: string | undefined, hasAvatar: boolean | undefined, token: string | null) {
   const { isPinLocked, isLoading } = useAuth();
-  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
+  const [accessUrl, setAccessUrl] = useState<string | null>(null);
+  const [resolvingAccessUrl, setResolvingAccessUrl] = useState(false);
 
-  const refresh = useCallback(async () => {
+  const refreshAccessUrl = useCallback(async () => {
     if (!userId || !token || !hasAvatar || isPinLocked || isLoading) {
-      setAvatarUrl(null);
+      setAccessUrl(null);
+      setResolvingAccessUrl(false);
       return;
     }
+    setResolvingAccessUrl(true);
     try {
       const response = await apiFetch<AvatarAccessResponse>(`/media/avatars/${userId}/url`, {}, token);
-      setAvatarUrl(response.accessUrl);
+      setAccessUrl(response.accessUrl);
     } catch {
-      setAvatarUrl(null);
+      setAccessUrl(null);
+    } finally {
+      setResolvingAccessUrl(false);
     }
   }, [hasAvatar, isLoading, isPinLocked, token, userId]);
 
   useEffect(() => {
-    void refresh();
+    void refreshAccessUrl();
     if (!hasAvatar) return;
     const timer = window.setInterval(() => {
-      void refresh();
+      void refreshAccessUrl();
     }, 14 * 60 * 1000);
     return () => window.clearInterval(timer);
-  }, [hasAvatar, refresh]);
+  }, [hasAvatar, refreshAccessUrl]);
 
   useEffect(() => {
     if (!userId || !hasAvatar) return;
     function handleAvatarUpdated(event: Event) {
       const detail = (event as CustomEvent<{ userId?: string }>).detail;
       if (detail?.userId === userId) {
-        void refresh();
+        void refreshAccessUrl();
       }
     }
     window.addEventListener(AVATAR_UPDATED_EVENT, handleAvatarUpdated);
     return () => window.removeEventListener(AVATAR_UPDATED_EVENT, handleAvatarUpdated);
-  }, [hasAvatar, refresh, userId]);
+  }, [hasAvatar, refreshAccessUrl, userId]);
 
-  return { avatarUrl, refreshAvatarUrl: refresh };
+  const {
+    blobUrl,
+    isLoading: isLoadingBlob,
+    hasError
+  } = useResilientBlobUrl(accessUrl, token, {
+    enabled: Boolean(hasAvatar && accessUrl && !isPinLocked && !isLoading),
+    label: `аватар ${userId ?? ''}`.trim()
+  });
+
+  const avatarUrl = blobUrl;
+  const isAvatarLoading = Boolean(hasAvatar && (resolvingAccessUrl || isLoadingBlob || (accessUrl && !blobUrl && !hasError)));
+  const refreshAvatarUrl = useCallback(async () => {
+    await refreshAccessUrl();
+  }, [refreshAccessUrl]);
+
+  return { avatarUrl, isAvatarLoading, hasAvatarError: hasError, refreshAvatarUrl };
 }

apps/frontend/hooks/use-primary-family.ts

@@ -8,7 +8,8 @@ import {
   FamilyPresenceMember,
   fetchFamilyGroup,
   fetchFamilyGroups,
-  fetchFamilyPresence
+  fetchFamilyPresence,
+  getAccessToken
 } from '@/lib/api';
 
 export function useSelectedFamily(enabled = true) {
@@ -20,7 +21,8 @@ export function useSelectedFamily(enabled = true) {
   const [loading, setLoading] = useState(true);
 
   const refresh = useCallback(async () => {
-    if (!enabled || !user || !token || isPinLocked || isLoading) {
+    const accessToken = getAccessToken() ?? token?.trim() ?? null;
+    if (!enabled || !user || !accessToken || isPinLocked || isLoading) {
       setGroups([]);
       setGroup(null);
       setPresenceMembers([]);
@@ -29,7 +31,7 @@ export function useSelectedFamily(enabled = true) {
     }
 
     try {
-      const groupsResponse = await fetchFamilyGroups(user.id, token);
+      const groupsResponse = await fetchFamilyGroups(user.id, accessToken);
       const list = groupsResponse.groups ?? [];
       setGroups(list);
 
@@ -48,8 +50,8 @@ export function useSelectedFamily(enabled = true) {
       }
 
       const [groupResponse, presenceResponse] = await Promise.all([
-        fetchFamilyGroup(effectiveId, token),
-        fetchFamilyPresence(effectiveId, token)
+        fetchFamilyGroup(effectiveId, accessToken),
+        fetchFamilyPresence(effectiveId, accessToken)
       ]);
       setGroup(groupResponse);
       setPresenceMembers(presenceResponse.members ?? []);
@@ -68,7 +70,8 @@ export function useSelectedFamily(enabled = true) {
   }, [refresh]);
 
   useEffect(() => {
-    if (!enabled || !token || isPinLocked || isLoading || !group) return;
+    const accessToken = getAccessToken() ?? token?.trim() ?? null;
+    if (!enabled || !accessToken || isPinLocked || isLoading || !group) return;
     const timer = window.setInterval(() => void refresh(), 25_000);
     return () => window.clearInterval(timer);
   }, [enabled, group, isLoading, isPinLocked, refresh, token]);

apps/frontend/hooks/use-resilient-blob-url.ts

@@ -0,0 +1,60 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { createBlobObjectUrl, revokeBlobObjectUrl } from '@/lib/authenticated-media';
+import { fetchMediaBlobWithRetry } from '@/lib/resilient-media-fetch';
+
+export type ResilientBlobStatus = 'idle' | 'loading' | 'ready' | 'error';
+
+export function useResilientBlobUrl(
+  remoteUrl: string | null | undefined,
+  token: string | null | undefined,
+  options?: { enabled?: boolean; label?: string; mimeType?: string }
+) {
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [status, setStatus] = useState<ResilientBlobStatus>('idle');
+
+  useEffect(() => {
+    const enabled = options?.enabled !== false;
+    if (!remoteUrl || !token || !enabled) {
+      setBlobUrl(null);
+      setStatus('idle');
+      return;
+    }
+
+    let cancelled = false;
+    let objectUrl: string | null = null;
+
+    async function load() {
+      setStatus('loading');
+      try {
+        const blob = await fetchMediaBlobWithRetry(remoteUrl!, token!, {
+          mimeType: options?.mimeType,
+          label: options?.label
+        });
+        if (cancelled) return;
+        objectUrl = createBlobObjectUrl(blob);
+        setBlobUrl(objectUrl);
+        setStatus('ready');
+      } catch {
+        if (cancelled) return;
+        setBlobUrl(null);
+        setStatus('error');
+      }
+    }
+
+    void load();
+
+    return () => {
+      cancelled = true;
+      revokeBlobObjectUrl(objectUrl ?? undefined);
+    };
+  }, [options?.enabled, options?.label, options?.mimeType, remoteUrl, token]);
+
+  return {
+    blobUrl,
+    status,
+    isLoading: status === 'loading',
+    hasError: status === 'error'
+  };
+}