refactor: scope providers by route and use XState selectors

src/app/chat/hooks/use-chat-message-limit-banner.ts

@@ -4,7 +4,7 @@ import type { LoginStatus } from "@/data/dto/auth";
 import { ROUTES } from "@/router/routes";
 import { useAppNavigator } from "@/router/use-app-navigator";
 import type { ChatUpgradeReason } from "@/stores/chat/chat-state";
-import { useUserState } from "@/stores/user/user-context";
+import { useUserSelector } from "@/stores/user/user-context";
 
 import {
   getInsufficientCreditsMessageLimitView,
@@ -31,7 +31,7 @@ export function useChatMessageLimitBanner({
   loginStatus,
 }: UseChatMessageLimitBannerInput): ChatMessageLimitBannerView {
   const navigator = useAppNavigator();
-  const userState = useUserState();
+  const isVip = useUserSelector((state) => state.context.isVip);
   const view = getInsufficientCreditsMessageLimitView(loginStatus);
 
   function unlock(): void {
@@ -41,7 +41,7 @@ export function useChatMessageLimitBanner({
     }
 
     navigator.openSubscription({
-      type: getInsufficientCreditsSubscriptionType(userState.isVip),
+      type: getInsufficientCreditsSubscriptionType(isVip),
       returnTo: "chat",
     });
   }