fix(console): migrate useFavorites to React Context (FavoritesProvider) to fix star toggle reactivity

Agent-Logs-Url: https://github.com/objectstack-ai/objectui/sessions/26bb233a-d5c2-4042-8361-e6c14d430389

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- **Home page star/favorite not reactive** (`@object-ui/console`): Migrated `useFavorites` from standalone hook to React Context (`FavoritesProvider`) so all consumers (HomePage, AppCard, AppSidebar, UnifiedSidebar) share a single state instance. Previously, each component calling `useFavorites()` created independent state, so toggling a favorite in AppCard did not trigger re-render in HomePage. localStorage persistence is retained as the storage layer.
+
 ### Changed
 
 - **Merged ObjectManagerPage into MetadataManagerPage pipeline** (`@object-ui/console`): Removed the standalone `ObjectManagerPage` component. Object management is now fully handled by the generic `MetadataManagerPage` (list view) and `MetadataDetailPage` (detail view) pipeline. The object type config in `metadataTypeRegistry` uses `listComponent: ObjectManagerListAdapter` for the custom list UI and `pageSchemaFactory: buildObjectDetailPageSchema` for the detail page, eliminating redundant page code and centralizing all metadata management through a single architecture.

apps/console/src/App.tsx

@@ -63,6 +63,7 @@ const HomeLayout = lazy(() => import('./pages/home/HomeLayout').then(m => ({ def
 import { ThemeProvider } from './components/theme-provider';
 import { ConsoleToaster } from './components/ConsoleToaster';
 import { NavigationProvider } from './context/NavigationContext';
+import { FavoritesProvider } from './context/FavoritesProvider';
 
 /**
  * ConnectedShell
@@ -520,6 +521,7 @@ export function App() {
       <ConditionalAuthWrapper authUrl="/api/v1/auth">
         <PreviewBanner />
         <NavigationProvider>
+        <FavoritesProvider>
         <BrowserRouter basename={import.meta.env.BASE_URL?.replace(/\/$/, '') || '/'}>
             <Suspense fallback={<LoadingScreen />}>
             <Routes>
@@ -571,6 +573,7 @@ export function App() {
             </Routes>
             </Suspense>
         </BrowserRouter>
+        </FavoritesProvider>
         </NavigationProvider>
       </ConditionalAuthWrapper>
     </ThemeProvider>

apps/console/src/__tests__/Favorites.test.tsx

@@ -1,9 +1,11 @@
 /**
- * Tests for useFavorites hook
+ * Tests for useFavorites hook (via FavoritesProvider context)
  */
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { renderHook, act } from '@testing-library/react';
+import type { ReactNode } from 'react';
 import { useFavorites } from '../hooks/useFavorites';
+import { FavoritesProvider } from '../context/FavoritesProvider';
 
 // Mock localStorage
 const localStorageMock = (() => {
@@ -18,19 +20,24 @@ const localStorageMock = (() => {
 
 Object.defineProperty(window, 'localStorage', { value: localStorageMock });
 
+/** Wrapper that provides the FavoritesProvider for renderHook */
+function wrapper({ children }: { children: ReactNode }) {
+  return <FavoritesProvider>{children}</FavoritesProvider>;
+}
+
 describe('useFavorites', () => {
   beforeEach(() => {
     localStorageMock.clear();
     vi.clearAllMocks();
   });
 
   it('starts with empty favorites when localStorage is empty', () => {
-    const { result } = renderHook(() => useFavorites());
+    const { result } = renderHook(() => useFavorites(), { wrapper });
     expect(result.current.favorites).toEqual([]);
   });
 
   it('adds a favorite item', () => {
-    const { result } = renderHook(() => useFavorites());
+    const { result } = renderHook(() => useFavorites(), { wrapper });
 
     act(() => {
       result.current.addFavorite({
@@ -48,7 +55,7 @@ describe('useFavorites', () => {
   });
 
   it('does not add duplicate favorites', () => {
-    const { result } = renderHook(() => useFavorites());
+    const { result } = renderHook(() => useFavorites(), { wrapper });
 
     act(() => {
       result.current.addFavorite({
@@ -73,7 +80,7 @@ describe('useFavorites', () => {
   });
 
   it('removes a favorite', () => {
-    const { result } = renderHook(() => useFavorites());
+    const { result } = renderHook(() => useFavorites(), { wrapper });
 
     act(() => {
       result.current.addFavorite({
@@ -92,7 +99,7 @@ describe('useFavorites', () => {
   });
 
   it('toggles a favorite on and off', () => {
-    const { result } = renderHook(() => useFavorites());
+    const { result } = renderHook(() => useFavorites(), { wrapper });
     const item = {
       id: 'dashboard:sales',
       label: 'Sales Dashboard',
@@ -116,7 +123,7 @@ describe('useFavorites', () => {
   });
 
   it('checks if an item is a favorite', () => {
-    const { result } = renderHook(() => useFavorites());
+    const { result } = renderHook(() => useFavorites(), { wrapper });
 
     expect(result.current.isFavorite('object:contact')).toBe(false);
 
@@ -134,7 +141,7 @@ describe('useFavorites', () => {
   });
 
   it('limits to max 20 favorites', () => {
-    const { result } = renderHook(() => useFavorites());
+    const { result } = renderHook(() => useFavorites(), { wrapper });
 
     for (let i = 0; i < 25; i++) {
       act(() => {
@@ -151,7 +158,7 @@ describe('useFavorites', () => {
   });
 
   it('clears all favorites', () => {
-    const { result } = renderHook(() => useFavorites());
+    const { result } = renderHook(() => useFavorites(), { wrapper });
 
     act(() => {
       result.current.addFavorite({
@@ -170,7 +177,7 @@ describe('useFavorites', () => {
   });
 
   it('persists favorites to localStorage', () => {
-    const { result } = renderHook(() => useFavorites());
+    const { result } = renderHook(() => useFavorites(), { wrapper });
 
     act(() => {
       result.current.addFavorite({
@@ -186,4 +193,46 @@ describe('useFavorites', () => {
       expect.any(String),
     );
   });
+
+  it('two hooks sharing the same provider see each other\'s mutations (cross-component reactivity)', () => {
+    // Both hooks are called within the same render, sharing the same provider.
+    // This simulates the real scenario where AppCard (consumer A) toggles a favorite
+    // and HomePage (consumer B) should immediately see the updated state.
+    const { result } = renderHook(
+      () => ({ hookA: useFavorites(), hookB: useFavorites() }),
+      { wrapper },
+    );
+
+    // Hook A adds a favorite
+    act(() => {
+      result.current.hookA.addFavorite({
+        id: 'app:crm',
+        label: 'CRM',
+        href: '/apps/crm',
+        type: 'object',
+      });
+    });
+
+    // Hook B (simulating HomePage reading favorites) must see the update
+    expect(result.current.hookB.favorites).toHaveLength(1);
+    expect(result.current.hookB.isFavorite('app:crm')).toBe(true);
+
+    // Hook B removes the favorite
+    act(() => {
+      result.current.hookB.removeFavorite('app:crm');
+    });
+
+    // Hook A must see the removal
+    expect(result.current.hookA.favorites).toHaveLength(0);
+    expect(result.current.hookA.isFavorite('app:crm')).toBe(false);
+  });
+
+  it('throws when used outside FavoritesProvider', () => {
+    // Suppress the expected React error boundary console output
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() => renderHook(() => useFavorites())).toThrow(
+      'useFavorites must be used within a FavoritesProvider',
+    );
+    spy.mockRestore();
+  });
 });

apps/console/src/context/FavoritesProvider.tsx

@@ -0,0 +1,186 @@
+/**
+ * FavoritesProvider
+ *
+ * React Context + Provider for shared favorites state across all consumers
+ * (HomePage, AppCard, AppSidebar, UnifiedSidebar, StarredApps).
+ *
+ * Replaces the standalone `useFavorites` hook pattern — all callers now share
+ * a single state instance so that toggling a star in AppCard immediately
+ * reflects in HomePage's Starred section and sidebar.
+ *
+ * Persistence: localStorage (key: "objectui-favorites", max 20 items).
+ *
+ * TODO: Migrate persistence to server-side storage via the adapter/API layer
+ * (e.g. PUT /api/user/preferences) so favorites sync across devices and browsers.
+ * The provider should accept an optional `persistenceAdapter` prop that implements
+ * `load(): Promise<FavoriteItem[]>` and `save(items: FavoriteItem[]): Promise<void>`.
+ * When the adapter is provided, localStorage should be used only as a fallback
+ * during the initial load while the server response is in-flight.
+ *
+ * @module
+ */
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface FavoriteItem {
+  /** Unique key, e.g. "object:contact" or "dashboard:sales_overview" */
+  id: string;
+  label: string;
+  href: string;
+  type: 'object' | 'dashboard' | 'page' | 'report';
+  /** ISO timestamp of when the item was favorited */
+  favoritedAt: string;
+}
+
+interface FavoritesContextValue {
+  favorites: FavoriteItem[];
+  addFavorite: (item: Omit<FavoriteItem, 'favoritedAt'>) => void;
+  removeFavorite: (id: string) => void;
+  toggleFavorite: (item: Omit<FavoriteItem, 'favoritedAt'>) => void;
+  isFavorite: (id: string) => boolean;
+  clearFavorites: () => void;
+}
+
+// ---------------------------------------------------------------------------
+// Storage helpers
+// ---------------------------------------------------------------------------
+
+const STORAGE_KEY = 'objectui-favorites';
+const MAX_FAVORITES = 20;
+
+function loadFavorites(): FavoriteItem[] {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveFavorites(items: FavoriteItem[]) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
+  } catch {
+    // Storage full — silently ignore
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+const FavoritesContext = createContext<FavoritesContextValue | null>(null);
+
+// ---------------------------------------------------------------------------
+// Provider
+// ---------------------------------------------------------------------------
+
+interface FavoritesProviderProps {
+  children: ReactNode;
+}
+
+export function FavoritesProvider({ children }: FavoritesProviderProps) {
+  const [favorites, setFavorites] = useState<FavoriteItem[]>(loadFavorites);
+
+  // Re-sync from storage on mount (handles cases where storage was written
+  // before this provider was mounted, e.g. on initial page load).
+  useEffect(() => {
+    setFavorites(loadFavorites());
+  }, []);
+
+  const addFavorite = useCallback(
+    (item: Omit<FavoriteItem, 'favoritedAt'>) => {
+      setFavorites(prev => {
+        if (prev.some(f => f.id === item.id)) return prev;
+        const updated = [
+          { ...item, favoritedAt: new Date().toISOString() },
+          ...prev,
+        ].slice(0, MAX_FAVORITES);
+        saveFavorites(updated);
+        return updated;
+      });
+    },
+    [],
+  );
+
+  const removeFavorite = useCallback((id: string) => {
+    setFavorites(prev => {
+      const updated = prev.filter(f => f.id !== id);
+      saveFavorites(updated);
+      return updated;
+    });
+  }, []);
+
+  const toggleFavorite = useCallback(
+    (item: Omit<FavoriteItem, 'favoritedAt'>) => {
+      setFavorites(prev => {
+        const exists = prev.some(f => f.id === item.id);
+        const updated = exists
+          ? prev.filter(f => f.id !== item.id)
+          : [{ ...item, favoritedAt: new Date().toISOString() }, ...prev].slice(
+              0,
+              MAX_FAVORITES,
+            );
+        saveFavorites(updated);
+        return updated;
+      });
+    },
+    [],
+  );
+
+  const clearFavorites = useCallback(() => {
+    setFavorites([]);
+    saveFavorites([]);
+  }, []);
+
+  const value = useMemo<FavoritesContextValue>(
+    () => ({
+      favorites,
+      addFavorite,
+      removeFavorite,
+      toggleFavorite,
+      // Inlined here so useMemo sees the freshest `favorites` without needing
+      // a separate useCallback([favorites]) entry in the deps array.
+      isFavorite: (id: string) => favorites.some(f => f.id === id),
+      clearFavorites,
+    }),
+    // addFavorite / removeFavorite / toggleFavorite / clearFavorites are all
+    // stable (useCallback with [] deps) and never cause extra re-renders.
+    [favorites, addFavorite, removeFavorite, toggleFavorite, clearFavorites],
+  );
+
+  return (
+    <FavoritesContext.Provider value={value}>
+      {children}
+    </FavoritesContext.Provider>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
+/**
+ * Access shared favorites state.
+ *
+ * Must be used inside `<FavoritesProvider>`.
+ */
+export function useFavorites(): FavoritesContextValue {
+  const ctx = useContext(FavoritesContext);
+  if (!ctx) {
+    throw new Error('useFavorites must be used within a FavoritesProvider');
+  }
+  return ctx;
+}