fix and update

apps/frontend/components/family/family-overlay-provider.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-
-const SELECTED_FAMILY_STORAGE_KEY = 'id-selected-family-group-id';
+import { readStoredFamilyGroupId, writeStoredFamilyGroupId } from '@/lib/selected-family-storage';
 
 type FamilyOverlayContextValue = {
   openMiniChat: () => void;
@@ -14,6 +13,7 @@ type FamilyOverlayContextValue = {
   pendingMember: { userId: string; name: string; isBot?: boolean; botUsername?: string } | null;
   clearPending: () => void;
   selectedGroupId: string | null;
+  isSelectionHydrated: boolean;
   setSelectedGroupId: (groupId: string | null) => void;
 };
 
@@ -24,23 +24,20 @@ export function FamilyOverlayProvider({ children }: { children: React.ReactNode
   const [pendingRoomId, setPendingRoomId] = useState<string | null>(null);
   const [pendingMember, setPendingMember] = useState<{ userId: string; name: string; isBot?: boolean; botUsername?: string } | null>(null);
   const [selectedGroupId, setSelectedGroupIdState] = useState<string | null>(null);
+  const [isSelectionHydrated, setIsSelectionHydrated] = useState(false);
   const pendingMemberRef = useRef<{ userId: string; name: string; isBot?: boolean; botUsername?: string } | null>(null);
-  const selectionHydratedRef = useRef(false);
 
   useEffect(() => {
-    if (selectionHydratedRef.current) return;
-    selectionHydratedRef.current = true;
-    const stored = window.localStorage.getItem(SELECTED_FAMILY_STORAGE_KEY);
-    if (stored) setSelectedGroupIdState(stored);
+    const stored = readStoredFamilyGroupId();
+    if (stored) {
+      setSelectedGroupIdState(stored);
+    }
+    setIsSelectionHydrated(true);
   }, []);
 
   const setSelectedGroupId = useCallback((groupId: string | null) => {
     setSelectedGroupIdState(groupId);
-    if (groupId) {
-      window.localStorage.setItem(SELECTED_FAMILY_STORAGE_KEY, groupId);
-    } else {
-      window.localStorage.removeItem(SELECTED_FAMILY_STORAGE_KEY);
-    }
+    writeStoredFamilyGroupId(groupId);
   }, []);
 
   const openMiniChat = useCallback(() => {
@@ -86,11 +83,13 @@ export function FamilyOverlayProvider({ children }: { children: React.ReactNode
       pendingMember,
       clearPending,
       selectedGroupId,
+      isSelectionHydrated,
       setSelectedGroupId
     }),
     [
       clearPending,
       closeMiniChat,
+      isSelectionHydrated,
       miniChatOpen,
       openChatRoom,
       openChatWithMember,