diff --git a/frontend/src/lib/components/favorites/FavoritesView.svelte b/frontend/src/lib/components/favorites/FavoritesView.svelte
index 9a802bb4..09c19d94 100644
--- a/frontend/src/lib/components/favorites/FavoritesView.svelte
+++ b/frontend/src/lib/components/favorites/FavoritesView.svelte
@@ -22,11 +22,16 @@
     import ViewHeader from '$lib/components/shared/ViewHeader.svelte';
     import {applyWallpaperOnly} from '$lib/actions/themeActions';
     import {getIsApplying} from '$lib/stores/theme.svelte';
-    import type {favorites as favoritesNs} from '../../../../wailsjs/go/models';
-
-    type Favorite = favoritesNs.Favorite;
+    import {
+        getFavorites,
+        getFavoritesError,
+        refreshFavorites,
+        toggleFavorite,
+        type Favorite,
+    } from '$lib/stores/favorites.svelte';
 
-    let favorites = $state<Favorite[]>([]);
+    let favorites = $derived(getFavorites());
+    let loadError = $derived(getFavoritesError());
     let isLoading = $state(true);
     let filterTag = $state<string>('');
     let previewIndex = $state(-1);
@@ -45,17 +50,13 @@
         loadFavorites();
     });
 
+    // Re-sync with the backend on every mount so favourites added via the
+    // CLI/IPC while this tab was closed show up.
     async function loadFavorites() {
         isLoading = true;
         try {
-            const {GetFavorites} = await import(
-                '../../../../wailsjs/go/main/App'
-            );
-            const result = await GetFavorites();
-            favorites = Array.isArray(result) ? result : [];
+            await refreshFavorites();
             loadThumbnails();
-        } catch {
-            favorites = [];
         } finally {
             isLoading = false;
         }
@@ -103,12 +104,11 @@
 
     async function handleRemove(fav: Favorite) {
         try {
-            const {ToggleFavorite} = await import(
-                '../../../../wailsjs/go/main/App'
-            );
-            await ToggleFavorite(fav.path, fav.type ?? '', {});
-            favorites = favorites.filter(f => f.path !== fav.path);
-        } catch {}
+            await toggleFavorite(fav.path, fav.type ?? '');
+        } catch (err) {
+            console.error('ToggleFavorite failed', err);
+            showToast('Could not update favorites');
+        }
     }
 
     async function handleAddExtra(fav: Favorite) {
@@ -199,9 +199,22 @@
     </ViewHeader>
 
     <div class="flex-1 overflow-y-auto p-3">
+        {#if loadError}
+            <div
+                class="border-border bg-bg-surface text-fg-primary mb-3 flex items-center justify-between gap-3 border p-3 text-xs"
+                role="alert"
+            >
+                <span>{loadError}</span>
+                <button
+                    class="text-accent shrink-0 px-2 py-1"
+                    onclick={loadFavorites}
+                    disabled={isLoading}>Retry</button
+                >
+            </div>
+        {/if}
         {#if isLoading}
             <LoadingState message="Loading favorites…" />
-        {:else if filtered.length === 0}
+        {:else if filtered.length === 0 && !loadError}
             {#if filterTag}
                 <EmptyState
                     title="No favorites with this label"
@@ -260,11 +273,13 @@
                         path={fav.path}
                         name={fav.data?.name || fav.data?.id || 'Wallpaper'}
                         isAdded={getAdditionalImages().includes(fav.path)}
+                        isFavorited={true}
                         applying={getIsApplying()}
                         onuse={() => handleSelect(fav)}
                         onwallpaperonly={() => applyWallpaperOnly(fav.path)}
                         onpreview={() => handlePreview(i)}
                         onaddextra={() => handleAddExtra(fav)}
+                        onfavorite={() => handleRemove(fav)}
                     >
                         {#snippet thumb()}
                             {#if getCachedThumbnail(fav.path)}
@@ -279,27 +294,6 @@
                                 >
                             {/if}
                         {/snippet}
-                        {#snippet topRight()}
-                            <button
-                                class="absolute right-1.5 top-1.5 z-10 flex h-7 w-7 items-center justify-center opacity-100"
-                                onclick={() => handleRemove(fav)}
-                                aria-label="Remove from favorites"
-                            >
-                                <svg
-                                    class="text-destructive h-4 w-4"
-                                    viewBox="0 0 24 24"
-                                    fill="currentColor"
-                                    stroke="currentColor"
-                                    stroke-width="2"
-                                    stroke-linecap="round"
-                                    stroke-linejoin="round"
-                                >
-                                    <path
-                                        d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
-                                    ></path>
-                                </svg>
-                            </button>
-                        {/snippet}
                     </WallpaperTile>
                 {/each}
             </div>
diff --git a/frontend/src/lib/components/local/LocalBrowser.svelte b/frontend/src/lib/components/local/LocalBrowser.svelte
index 7a64e739..0866c6ab 100644
--- a/frontend/src/lib/components/local/LocalBrowser.svelte
+++ b/frontend/src/lib/components/local/LocalBrowser.svelte
@@ -17,6 +17,7 @@
         loadFullImage,
         getCachedFullImage,
     } from '$lib/stores/imagecache.svelte';
+    import {isFavorite, toggleFavorite} from '$lib/stores/favorites.svelte';
     import LazyImage from '$lib/components/shared/LazyImage.svelte';
     import WallpaperTile from '$lib/components/shared/WallpaperTile.svelte';
     import ImagePreview from '$lib/components/shared/ImagePreview.svelte';
@@ -89,7 +90,9 @@
         } catch (err) {
             wallpapers = [];
             loadError =
-                err instanceof Error ? err.message : 'Wallpaper folder unavailable';
+                err instanceof Error
+                    ? err.message
+                    : 'Wallpaper folder unavailable';
         } finally {
             isLoading = false;
         }
@@ -186,6 +189,20 @@
         showToast('Added to additional images');
     }
 
+    async function handleFavorite(wp: Wallpaper) {
+        try {
+            const nowFavorited = await toggleFavorite(wp.path, 'local', {
+                name: wp.name,
+            });
+            showToast(
+                nowFavorited ? 'Added to favorites' : 'Removed from favorites'
+            );
+        } catch (err) {
+            console.error('ToggleFavorite failed', err);
+            showToast('Could not update favorites');
+        }
+    }
+
     async function handlePreview(index: number) {
         const wp = filtered[index];
         const cached = getCachedFullImage(wp.path);
@@ -371,11 +388,13 @@
                         path={wp.path}
                         name={wp.name}
                         isAdded={getAdditionalImages().includes(wp.path)}
+                        isFavorited={isFavorite(wp.path)}
                         applying={getIsApplying()}
                         onuse={() => selectWallpaper(wp.path)}
                         onwallpaperonly={() => applyWallpaperOnly(wp.path)}
                         onpreview={() => handlePreview(i)}
                         onaddextra={() => handleAddExtra(wp.path)}
+                        onfavorite={() => handleFavorite(wp)}
                     >
                         {#snippet thumb()}
                             <LazyImage path={wp.path} alt={wp.name} />
diff --git a/frontend/src/lib/components/shared/WallpaperTile.svelte b/frontend/src/lib/components/shared/WallpaperTile.svelte
index a7cd2d1c..da722b9d 100644
--- a/frontend/src/lib/components/shared/WallpaperTile.svelte
+++ b/frontend/src/lib/components/shared/WallpaperTile.svelte
@@ -4,31 +4,33 @@
 
     // Shared card for the Local and Favorites wallpaper grids. The thumbnail
     // source differs per view (lazy-loaded vs preloaded cache), so it arrives
-    // as a `thumb` snippet; `topRight` is an optional slot for view-specific
-    // actions (e.g. the favourites remove button). Clicking the thumbnail or
-    // the Use button selects the wallpaper.
+    // as a `thumb` snippet. The favourite heart renders only when `onfavorite`
+    // is supplied. Clicking the thumbnail or the Use button selects the
+    // wallpaper.
     let {
         path,
         name,
         isAdded = false,
+        isFavorited = false,
         applying = false,
         onuse,
         onwallpaperonly,
         onpreview,
         onaddextra,
+        onfavorite,
         thumb,
-        topRight,
     }: {
         path: string;
         name: string;
         isAdded?: boolean;
+        isFavorited?: boolean;
         applying?: boolean;
         onuse: () => void;
         onwallpaperonly: () => void;
         onpreview: () => void;
         onaddextra: () => void;
+        onfavorite?: () => void;
         thumb: Snippet;
-        topRight?: Snippet;
     } = $props();
 </script>
 
@@ -51,7 +53,7 @@
         class="absolute left-1.5 top-1.5 z-10 flex h-7 w-7 items-center justify-center transition-all duration-150
         {isAdded
             ? 'opacity-100'
-            : 'opacity-0 hover:!opacity-100 group-hover:opacity-60'}"
+            : 'opacity-0 hover:!opacity-100 focus-visible:opacity-100 group-focus-within:opacity-100 group-hover:opacity-60'}"
         onclick={e => {
             e.stopPropagation();
             onaddextra();
@@ -73,12 +75,40 @@
         </svg>
     </button>
 
-    {#if topRight}
-        {@render topRight()}
+    {#if onfavorite}
+        <button
+            class="absolute right-1.5 top-1.5 z-10 flex h-7 w-7 items-center justify-center transition-all duration-150
+            {isFavorited
+                ? 'opacity-100'
+                : 'opacity-0 hover:!opacity-100 focus-visible:opacity-100 group-focus-within:opacity-100 group-hover:opacity-60'}"
+            onclick={e => {
+                e.stopPropagation();
+                onfavorite();
+            }}
+            aria-label={isFavorited
+                ? 'Remove from favorites'
+                : 'Add to favorites'}
+        >
+            <svg
+                class="h-4 w-4 {isFavorited
+                    ? 'text-destructive'
+                    : 'text-white'}"
+                viewBox="0 0 24 24"
+                fill={isFavorited ? 'currentColor' : 'none'}
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            >
+                <path
+                    d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
+                ></path>
+            </svg>
+        </button>
     {/if}
 
     <div
-        class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2 bg-black/60 opacity-0 transition-opacity duration-150 group-hover:opacity-100"
+        class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-2 bg-black/60 opacity-0 transition-opacity duration-150 group-focus-within:opacity-100 group-hover:opacity-100"
     >
         <button
             class="bg-accent hover:bg-accent-hover text-accent-fg pointer-events-auto min-w-[7rem] px-4 py-1.5 text-[11px] font-medium transition-colors"
diff --git a/frontend/src/lib/components/wallhaven/WallpaperCard.svelte b/frontend/src/lib/components/wallhaven/WallpaperCard.svelte
index 2158a562..c16c268e 100644
--- a/frontend/src/lib/components/wallhaven/WallpaperCard.svelte
+++ b/frontend/src/lib/components/wallhaven/WallpaperCard.svelte
@@ -9,41 +9,29 @@
     import {getIsApplying} from '$lib/stores/theme.svelte';
     import {openURL} from '$lib/utils/browser';
     import {observeIntersection} from '$lib/utils/intersection';
+    import {isFavorite, toggleFavorite} from '$lib/stores/favorites.svelte';
 
     let {wallpaper, onpreview}: {wallpaper: any; onpreview: () => void} =
         $props();
     let isDownloading = $state(false);
-    let isFavorited = $state(false);
+    let favoriteKey = $derived(wallpaper.path || wallpaper.id);
+    let isFavorited = $derived(isFavorite(favoriteKey));
     let cardEl = $state<HTMLDivElement | null>(null);
     let inView = $state(false);
-    let favoriteChecked = false;
 
-    // Gate <img> and the IsFavorite IPC call on viewport so scrolled-past
-    // cards release decoded-image memory and never-visible cards skip IPC.
+    // Gate <img> on viewport so scrolled-past cards release decoded-image
+    // memory.
     $effect(() => {
         if (!cardEl) return;
         return observeIntersection(
             cardEl,
             entry => {
                 inView = entry.isIntersecting;
-                if (inView && !favoriteChecked) {
-                    favoriteChecked = true;
-                    checkFavorite();
-                }
             },
             {rootMargin: '600px 0px'}
         );
     });
 
-    async function checkFavorite() {
-        try {
-            const {IsFavorite} = await import(
-                '../../../../wailsjs/go/main/App'
-            );
-            isFavorited = await IsFavorite(wallpaper.path || wallpaper.id);
-        } catch {}
-    }
-
     async function handleUse() {
         isDownloading = true;
         try {
@@ -64,20 +52,15 @@
     async function handleFavorite(event: MouseEvent) {
         event.stopPropagation();
         try {
-            const {ToggleFavorite} = await import(
-                '../../../../wailsjs/go/main/App'
-            );
-            const result = await ToggleFavorite(
-                wallpaper.path || wallpaper.id,
-                'wallhaven',
-                {
-                    id: wallpaper.id,
-                    thumbUrl: wallpaper.thumbs?.small,
-                    resolution: wallpaper.resolution,
-                }
-            );
-            isFavorited = result;
-        } catch {}
+            await toggleFavorite(favoriteKey, 'wallhaven', {
+                id: wallpaper.id,
+                thumbUrl: wallpaper.thumbs?.small,
+                resolution: wallpaper.resolution,
+            });
+        } catch (err) {
+            console.error('ToggleFavorite failed', err);
+            showToast('Could not update favorites');
+        }
     }
 
     async function handleAddExtra(event: MouseEvent) {
diff --git a/frontend/src/lib/stores/favorites.svelte.ts b/frontend/src/lib/stores/favorites.svelte.ts
new file mode 100644
index 00000000..152f6397
--- /dev/null
+++ b/frontend/src/lib/stores/favorites.svelte.ts
@@ -0,0 +1,89 @@
+// One shared list keeps favorite controls in sync without per-card IPC calls.
+
+import type {favorites as favoritesNs} from '../../../wailsjs/go/models';
+
+export type Favorite = favoritesNs.Favorite;
+
+let favorites = $state<Favorite[]>([]);
+let pathSet = $derived(new Set(favorites.map(f => f.path)));
+let loadError = $state('');
+let refreshSequence = 0;
+let mutationRevision = 0;
+const modifiedPaths = new Map<string, number>();
+const pendingToggles = new Map<string, Promise<boolean>>();
+
+refreshFavorites();
+
+export async function refreshFavorites(): Promise<void> {
+    const sequence = ++refreshSequence;
+    const revision = mutationRevision;
+    try {
+        const {GetFavorites} = await import('../../../wailsjs/go/main/App');
+        const result = await GetFavorites();
+        if (sequence !== refreshSequence) return;
+
+        // Keep newer local mutations while accepting unrelated backend entries.
+        const changed = (path: string) =>
+            pendingToggles.has(path) ||
+            (modifiedPaths.get(path) ?? 0) > revision;
+        favorites = [
+            ...(Array.isArray(result) ? result : []).filter(
+                f => !changed(f.path)
+            ),
+            ...favorites.filter(f => changed(f.path)),
+        ];
+        loadError = '';
+        for (const path of modifiedPaths.keys()) {
+            if (!pendingToggles.has(path)) modifiedPaths.delete(path);
+        }
+    } catch {
+        if (sequence === refreshSequence)
+            loadError = 'Could not load favorites. Try again.';
+    }
+}
+
+export function getFavorites(): Favorite[] {
+    return favorites;
+}
+
+export function getFavoritesError(): string {
+    return loadError;
+}
+
+export function isFavorite(path: string): boolean {
+    return pathSet.has(path);
+}
+
+// Adds or removes `path`; resolves to the new favorited state. `data` is
+// only used when adding (see favorites.Service.buildEntry for the shape
+// each type accepts).
+export function toggleFavorite(
+    path: string,
+    type: string,
+    data: Record<string, unknown> = {}
+): Promise<boolean> {
+    modifiedPaths.set(path, ++mutationRevision);
+    const previous = pendingToggles.get(path) ?? Promise.resolve(false);
+    const metadata = {...data};
+    const operation = previous
+        .catch(() => false)
+        .then(async () => {
+            const {ToggleFavorite} = await import(
+                '../../../wailsjs/go/main/App'
+            );
+            const nowFavorited = await ToggleFavorite(path, type, metadata);
+            if (nowFavorited) {
+                if (!pathSet.has(path))
+                    favorites = [...favorites, {path, type, data: metadata}];
+            } else {
+                favorites = favorites.filter(f => f.path !== path);
+            }
+            return nowFavorited;
+        });
+    const queued = operation.finally(() => {
+        modifiedPaths.set(path, ++mutationRevision);
+        if (pendingToggles.get(path) === queued) pendingToggles.delete(path);
+    });
+    pendingToggles.set(path, queued);
+    return queued;
+}
diff --git a/frontend/tests/favorites.test.ts b/frontend/tests/favorites.test.ts
new file mode 100644
index 00000000..ea2e82c3
--- /dev/null
+++ b/frontend/tests/favorites.test.ts
@@ -0,0 +1,189 @@
+import {beforeEach, expect, test, vi} from 'vitest';
+import WallpaperCard from '../src/lib/components/wallhaven/WallpaperCard.svelte';
+import FavoritesView from '../src/lib/components/favorites/FavoritesView.svelte';
+import LocalBrowser from '../src/lib/components/local/LocalBrowser.svelte';
+import * as favorites from '../src/lib/stores/favorites.svelte';
+import * as theme from '../src/lib/stores/theme.svelte';
+import {
+    GetFavorites,
+    ToggleFavorite,
+    ScanLocalWallpapers,
+} from '../wailsjs/go/main/App';
+import {deferred, render, settle} from './setup';
+
+vi.mock('../wailsjs/go/main/App', () => ({
+    GetFavorites: vi.fn().mockResolvedValue([]),
+    ToggleFavorite: vi.fn(),
+    ScanLocalWallpapers: vi.fn().mockResolvedValue([]),
+    GetWallpaperTags: vi.fn().mockResolvedValue({labels: [], assignments: {}}),
+    GetThumbnail: vi.fn().mockResolvedValue('/thumbnail.png'),
+    ReadImageAsDataURL: vi.fn().mockResolvedValue('data:image/png;base64,AA=='),
+}));
+vi.mock('../src/lib/stores/omarchy.svelte', () => ({
+    getOmarchyAvailable: () => true,
+    getOmarchyCapabilities: () => ({overrideApps: []}),
+    initOmarchyCapabilities: vi.fn().mockResolvedValue(undefined),
+}));
+
+const remote = 'https://example.com/wallpaper.png';
+const wallpaper = {path: remote, id: 'sample', thumbs: {small: remote}};
+
+beforeEach(async () => {
+    vi.stubGlobal(
+        'IntersectionObserver',
+        class {
+            observe() {}
+            disconnect() {}
+            unobserve() {}
+        }
+    );
+    vi.stubGlobal(
+        'ResizeObserver',
+        class {
+            observe() {}
+            disconnect() {}
+            unobserve() {}
+        }
+    );
+    await settle();
+    vi.mocked(GetFavorites).mockReset().mockResolvedValue([]);
+    vi.mocked(ToggleFavorite).mockReset();
+    vi.mocked(ScanLocalWallpapers).mockReset().mockResolvedValue([]);
+    await favorites.refreshFavorites();
+    theme.reset();
+});
+
+test('a favorite toggle updates both cards and the Favorites view', async () => {
+    const one = render(WallpaperCard, {wallpaper, onpreview: vi.fn()});
+    const two = render(WallpaperCard, {wallpaper, onpreview: vi.fn()});
+    vi.mocked(ToggleFavorite).mockResolvedValue(true);
+    one.target
+        .querySelector<HTMLButtonElement>(
+            'button[aria-label="Add to favorites"]'
+        )!
+        .click();
+    await settle();
+    expect(ToggleFavorite).toHaveBeenCalledTimes(1);
+    expect(
+        two.target.querySelector('button[aria-label="Remove from favorites"]')
+    ).not.toBeNull();
+    vi.mocked(GetFavorites).mockResolvedValue([
+        {path: remote, type: 'wallhaven', data: {id: 'sample'}},
+    ]);
+    const view = render(FavoritesView, {});
+    await settle();
+    expect(
+        view.target.querySelectorAll(
+            'button[aria-label="Remove from favorites"]'
+        )
+    ).toHaveLength(1);
+});
+
+test('the local heart saves a favorite without selecting the wallpaper', async () => {
+    vi.mocked(ScanLocalWallpapers).mockResolvedValue([
+        {path: '/local.png', name: 'Local', size: 1, modTime: 1},
+    ]);
+    vi.mocked(ToggleFavorite).mockResolvedValue(true);
+    const view = render(LocalBrowser, {});
+    await settle();
+    view.target
+        .querySelector<HTMLButtonElement>(
+            'button[aria-label="Add to favorites"]'
+        )!
+        .click();
+    await settle();
+    expect(favorites.isFavorite('/local.png')).toBe(true);
+    expect(theme.getWallpaperPath()).toBe('');
+    expect(ToggleFavorite).toHaveBeenCalledWith('/local.png', 'local', {
+        name: 'Local',
+    });
+});
+
+test('an old refresh preserves a newer toggle and loads unrelated favorites', async () => {
+    const old = deferred<Awaited<ReturnType<typeof GetFavorites>>>();
+    vi.mocked(GetFavorites).mockReturnValueOnce(old.promise);
+    const refresh = favorites.refreshFavorites();
+    await settle();
+    vi.mocked(ToggleFavorite).mockResolvedValue(true);
+    await favorites.toggleFavorite(remote, 'wallhaven');
+    old.resolve([{path: '/existing.png', type: 'local'}]);
+    await refresh;
+    expect(favorites.isFavorite(remote)).toBe(true);
+    expect(favorites.isFavorite('/existing.png')).toBe(true);
+});
+
+test('a refresh cannot restore a removed favorite', async () => {
+    const entry = {path: remote, type: 'wallhaven'};
+    vi.mocked(GetFavorites).mockResolvedValueOnce([entry]);
+    await favorites.refreshFavorites();
+    const old = deferred<Awaited<ReturnType<typeof GetFavorites>>>();
+    vi.mocked(GetFavorites).mockReturnValueOnce(old.promise);
+    const refresh = favorites.refreshFavorites();
+    await settle();
+    vi.mocked(ToggleFavorite).mockResolvedValue(false);
+    await favorites.toggleFavorite(remote, 'wallhaven');
+    old.resolve([entry]);
+    await refresh;
+    expect(favorites.isFavorite(remote)).toBe(false);
+});
+
+test('the newest refresh wins', async () => {
+    const old = deferred<Awaited<ReturnType<typeof GetFavorites>>>();
+    vi.mocked(GetFavorites)
+        .mockReturnValueOnce(old.promise)
+        .mockResolvedValueOnce([{path: '/new.png'}]);
+    const first = favorites.refreshFavorites();
+    await settle();
+    await favorites.refreshFavorites();
+    old.resolve([]);
+    await first;
+    expect(favorites.isFavorite('/new.png')).toBe(true);
+});
+
+test('same-path toggles reach the backend in click order', async () => {
+    const added = deferred<boolean>();
+    const removed = deferred<boolean>();
+    vi.mocked(ToggleFavorite)
+        .mockReturnValueOnce(added.promise)
+        .mockReturnValueOnce(removed.promise);
+    const first = favorites.toggleFavorite(remote, 'wallhaven');
+    const second = favorites.toggleFavorite(remote, 'wallhaven');
+    await settle();
+    expect(ToggleFavorite).toHaveBeenCalledTimes(1);
+    added.resolve(true);
+    await first;
+    await settle();
+    expect(ToggleFavorite).toHaveBeenCalledTimes(2);
+    removed.resolve(false);
+    await second;
+    expect(favorites.isFavorite(remote)).toBe(false);
+});
+
+test('a failed toggle does not block the next toggle', async () => {
+    vi.mocked(ToggleFavorite)
+        .mockRejectedValueOnce(new Error('offline'))
+        .mockResolvedValueOnce(true);
+    const first = favorites.toggleFavorite(remote, 'wallhaven');
+    const second = favorites.toggleFavorite(remote, 'wallhaven');
+    await expect(first).rejects.toThrow('offline');
+    await expect(second).resolves.toBe(true);
+    expect(favorites.isFavorite(remote)).toBe(true);
+});
+
+test('a failed refresh preserves favorites and offers a retry', async () => {
+    vi.mocked(GetFavorites).mockResolvedValueOnce([{path: '/saved.png'}]);
+    await favorites.refreshFavorites();
+    vi.mocked(GetFavorites).mockRejectedValueOnce(new Error('offline'));
+    const view = render(FavoritesView, {});
+    await settle();
+    expect(favorites.isFavorite('/saved.png')).toBe(true);
+    expect(view.target.querySelector('[role="alert"]')?.textContent).toContain(
+        'Could not load favorites'
+    );
+    vi.mocked(GetFavorites).mockResolvedValue([{path: '/saved.png'}]);
+    view.target
+        .querySelector<HTMLButtonElement>('[role="alert"] button')!
+        .click();
+    await settle();
+    expect(view.target.querySelector('[role="alert"]')).toBeNull();
+});