perf: add Zustand selectors to prevent cascading re-renders

Replace all bare useAuthStore(), useBlockingStore(), and
useSuccessNotification() calls with individual field selectors.
This prevents components from re-rendering when unrelated store
fields change.

- 21 useAuthStore usages across 20 files: individual selectors
  for 1-2 fields, useShallow for 3+ fields
- 5 useBlockingStore usages: individual selectors
- 2 useSuccessNotification usages: individual selectors

src/components/SuccessNotificationModal.tsx

@@ -78,7 +78,9 @@ const CloseIcon = () => (
 export default function SuccessNotificationModal() {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const { isOpen, data, hide } = useSuccessNotification();
+  const isOpen = useSuccessNotification((state) => state.isOpen);
+  const data = useSuccessNotification((state) => state.data);
+  const hide = useSuccessNotification((state) => state.hide);
   const { formatAmount, currencySymbol } = useCurrency();
   const { safeAreaInset, contentSafeAreaInset, isTelegramWebApp } = useTelegramSDK();
   const haptic = useHaptic();

src/components/TicketNotificationBell.tsx

@@ -33,7 +33,7 @@ export default function TicketNotificationBell({ isAdmin = false }: TicketNotifi
   const { t } = useTranslation();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
-  const { isAuthenticated } = useAuthStore();
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
   const { showToast } = useToast();
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);

src/components/WebSocketNotifications.tsx

@@ -18,9 +18,9 @@ export default function WebSocketNotifications() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const { showToast } = useToast();
-  const { refreshUser } = useAuthStore();
+  const refreshUser = useAuthStore((state) => state.refreshUser);
   const { formatAmount, currencySymbol } = useCurrency();
-  const { show: showSuccessModal } = useSuccessNotification();
+  const showSuccessModal = useSuccessNotification((state) => state.show);
 
   const handleMessage = useCallback(
     (message: WSMessage) => {

src/components/blocking/BlacklistedScreen.tsx

@@ -3,7 +3,7 @@ import { useBlockingStore } from '../../store/blocking';
 
 export default function BlacklistedScreen() {
   const { t } = useTranslation();
-  const { blacklistedInfo } = useBlockingStore();
+  const blacklistedInfo = useBlockingStore((state) => state.blacklistedInfo);
 
   return (
     <div className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-dark-950 p-6">

src/components/blocking/ChannelSubscriptionScreen.tsx

@@ -7,7 +7,8 @@ const CHECK_COOLDOWN_SECONDS = 5;
 
 export default function ChannelSubscriptionScreen() {
   const { t } = useTranslation();
-  const { channelInfo, clearBlocking } = useBlockingStore();
+  const channelInfo = useBlockingStore((state) => state.channelInfo);
+  const clearBlocking = useBlockingStore((state) => state.clearBlocking);
   const [isChecking, setIsChecking] = useState(false);
   const [cooldown, setCooldown] = useState(0);
   const [error, setError] = useState<string | null>(null);

src/components/blocking/MaintenanceScreen.tsx

@@ -3,7 +3,7 @@ import { useBlockingStore } from '../../store/blocking';
 
 export default function MaintenanceScreen() {
   const { t } = useTranslation();
-  const { maintenanceInfo } = useBlockingStore();
+  const maintenanceInfo = useBlockingStore((state) => state.maintenanceInfo);
 
   return (
     <div className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-dark-950 p-6">

src/components/layout/AppShell/AppHeader.tsx

@@ -5,6 +5,7 @@ import { useState, useEffect } from 'react';
 import { initDataUser } from '@telegram-apps/sdk-react';
 
 import { useAuthStore } from '@/store/auth';
+import { useShallow } from 'zustand/shallow';
 import { useTheme } from '@/hooks/useTheme';
 import { usePlatform } from '@/platform';
 import {
@@ -77,7 +78,9 @@ export function AppHeader({
 }: AppHeaderProps) {
   const { t } = useTranslation();
   const location = useLocation();
-  const { user, logout, isAdmin } = useAuthStore();
+  const { user, logout, isAdmin } = useAuthStore(
+    useShallow((state) => ({ user: state.user, logout: state.logout, isAdmin: state.isAdmin })),
+  );
   const { toggleTheme, isDark } = useTheme();
   const { haptic, platform } = usePlatform();
   const [userPhotoUrl, setUserPhotoUrl] = useState<string | null>(null);

src/components/layout/AppShell/AppShell.tsx

@@ -193,7 +193,8 @@ interface AppShellProps {
 export function AppShell({ children }: AppShellProps) {
   const { t } = useTranslation();
   const location = useLocation();
-  const { isAdmin, logout } = useAuthStore();
+  const isAdmin = useAuthStore((state) => state.isAdmin);
+  const logout = useAuthStore((state) => state.logout);
   const { isFullscreen, safeAreaInset, contentSafeAreaInset, platform, isMobile } =
     useTelegramSDK();
   const haptic = useHaptic();

src/components/layout/AppShell/DesktopSidebar.tsx

@@ -49,7 +49,8 @@ export function DesktopSidebar({
 }: DesktopSidebarProps) {
   const { t } = useTranslation();
   const location = useLocation();
-  const { user, logout } = useAuthStore();
+  const user = useAuthStore((state) => state.user);
+  const logout = useAuthStore((state) => state.logout);
   const { haptic } = usePlatform();
 
   // Branding

src/components/navigation/CommandPalette/CommandPalette.tsx

@@ -62,7 +62,7 @@ export function CommandPalette({
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { haptic } = usePlatform();
-  const { isAdmin } = useAuthStore();
+  const isAdmin = useAuthStore((state) => state.isAdmin);
   const { toggleTheme, isDark } = useTheme();
   const [search, setSearch] = useState('');