Site seems to be working completely now!

src/components/context/Auth.tsx

@@ -102,7 +102,6 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
 
   useEffect(() => {
     const supabase = createClient();
-
     // Initial fetch with loading
     fetchUserData(true).catch((error) => {
       console.error('💥 Initial fetch error:', error);
@@ -111,8 +110,8 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     const {
       data: { subscription },
     } = supabase.auth.onAuthStateChange(async (event, _session) => {
-      console.log('Auth state change:', event); // Debug log
 
+      console.log('Auth state change:', event); // Debug log
       if (event === 'SIGNED_IN') {
         // Background refresh without loading state
         await fetchUserData(false);
@@ -126,12 +125,53 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
         await fetchUserData(false);
       }
     });
-
     return () => {
       subscription.unsubscribe();
     };
   }, [fetchUserData]);
 
+  useEffect(() => {
+    const supabase = createClient();
+
+    // Handle visibility changes (tab switching)
+    const handleVisibilityChange = () => {
+      if (!document.hidden && isInitialized) {
+        // Refresh auth state when tab becomes visible
+        fetchUserData(false).catch(console.error);
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    // Initial fetch with loading
+    fetchUserData(true).catch((error) => {
+      console.error('💥 Initial fetch error:', error);
+    });
+
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange(async (event, session) => {
+      console.log('Auth state change:', event, session?.expires_at);
+
+      if (event === 'SIGNED_IN') {
+        await fetchUserData(false);
+      } else if (event === 'SIGNED_OUT') {
+        setUser(null);
+        setProfile(null);
+        setAvatarUrl(null);
+        setIsLoading(false);
+      } else if (event === 'TOKEN_REFRESHED') {
+        console.log('Token refreshed, updating user data');
+        await fetchUserData(false);
+      }
+    });
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      subscription.unsubscribe();
+    };
+  }, [fetchUserData, isInitialized]);
+
   const updateProfile = useCallback(
     async (data: {
       full_name?: string;

src/components/default/SubmitButton.tsx

@@ -7,12 +7,14 @@ import { Loader2 } from 'lucide-react';
 
 type Props = ComponentProps<typeof Button> & {
   disabled?: boolean;
+  disabledNotLoading?: boolean;
   pendingText?: string;
 };
 
 export const SubmitButton = ({
   children,
   disabled = false,
+  disabledNotLoading = false,
   pendingText = 'Submitting...',
   ...props
 }: Props) => {
@@ -26,7 +28,7 @@ export const SubmitButton = ({
       disabled={disabled}
       {...props}
     >
-      {pending || disabled ? (
+      {pending || (disabled && !disabledNotLoading) ? (
         <>
           <Loader2 className='mr-2 h-4 w-4 animate-spin' />
           {pendingText}

src/components/status/TechTable.tsx

@@ -8,8 +8,9 @@ import {
   updateStatuses,
   updateUserStatus,
   type UserWithStatus,
-} from '@/lib/hooks/status';
+} from '@/lib/hooks';
 import { Drawer, DrawerTrigger, Loading } from '@/components/ui';
+import { SubmitButton } from '@/components/default';
 import { toast } from 'sonner';
 import { HistoryDrawer } from '@/components/status';
 import type { Profile } from '@/utils/supabase';
@@ -115,6 +116,13 @@ export const TechTable = ({
 
   useEffect(() => {
     if (!isAuthenticated) return;
+    //if (channelRef.current) {
+      //const supabase = createClient();
+      //supabase.removeChannel(channelRef.current).catch((error) => {
+        //console.error(`Error unsubscribing from status updates: ${error}`);
+      //});
+      //channelRef.current = null;
+    //}
     const supabase = createClient();
 
     const channel = supabase
@@ -284,20 +292,19 @@ export const TechTable = ({
               }
             }}
           />
-          <button
-            type='submit'
+          <SubmitButton
+            size='xl'
             className={
-              'min-w-[100px] lg:min-w-[160px] py-2 px-4 rounded-xl \
-                text-center font-semibold lg:text-2xl bg-primary \
-                text-primary-foreground hover:bg-primary/90 \
-                transition-colors disabled:opacity-50 \
-                disabled:cursor-not-allowed'
+              'px-8 rounded-xl font-semibold lg:text-2xl \
+              disabled:opacity-50 disabled:cursor-not-allowed \
+              cursor-pointer'
             }
-            onClick={() => void updateStatus()}
+            onClick={() => updateStatus()}
             disabled={!statusInput.trim()}
+            disabledNotLoading={true}
           >
             Update
-          </button>
+          </SubmitButton>
         </div>
       )}
     </div>