fix: removed all reference to radix components

Author: AlexVOiceover

src/App.tsx

@@ -16,11 +16,13 @@ import MockNotification from './features/auth/components/MockNotification';
 
 // Hooks and Utilities
 import { useEntries } from './features/statements/hooks/useEntries';
+import { useAuth } from './features/auth/api/hooks';
 import { handleMagicLinkVerification } from './features/auth/authUtils';
 
 // Outer Component: Responsible only for setting up the environment (the providers) for the rest of the app.
 const AppContent: React.FC = () => {
   const { data } = useEntries();
+  const { state: authState } = useAuth();
 
   // Check for magic link tokens on app load
   useEffect(() => {
@@ -30,6 +32,17 @@ const AppContent: React.FC = () => {
 
     verifyToken();
   }, []);
+  
+  // Force synchronization between auth state and entries state when component mounts
+  useEffect(() => {
+    if (authState.user && authState.isAuthenticated) {
+      console.log('AppContent: Found authenticated user, dispatching event:', authState.user);
+      // Dispatch event to ensure EntriesProvider gets the user data
+      window.dispatchEvent(new CustomEvent('authStateChanged', { 
+        detail: { user: authState.user }
+      }));
+    }
+  }, [authState.user, authState.isAuthenticated]);
 
   return (
     // MainPage and Header receives the username from context.

src/components/modals/UserDataModal.tsx

@@ -23,16 +23,26 @@ export function ConfirmationDialog({
   description,
   singleButton = false,
 }: ConfirmationDialogProps) {
+  // Don't render anything if not open
+  if (!isOpen) {
+    return null;
+  }
+  
   return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
-      {/* Pass headerTitle so the shared DialogContent renders the pink header */}
-      <DialogContent headerTitle={title} className='sm:max-w-md p-0'>
-        {/* Optionally hide the description for screen readers */}
-        <DialogDescription className='sr-only'>{description}</DialogDescription>
+    <div className="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/50">
+      <div className="bg-white max-w-md rounded-lg shadow-lg overflow-hidden">
+        {/* Header */}
+        <div className="bg-brand-pink p-3 flex items-center">
+          <h2 className="text-lg font-bold text-white">{title}</h2>
+        </div>
+        
+        {/* Body */}
         <div className='bg-gray-50 p-4'>
           <p className='text-sm text-gray-800'>{description}</p>
         </div>
-        <DialogFooter className='p-4 bg-gray-50 sm:rounded-b-lg'>
+        
+        {/* Footer */}
+        <div className='p-4 bg-gray-50 flex justify-end space-x-2'>
           {singleButton ? (
             <Button variant='default' onClick={onConfirm} className="inline-flex items-center">
               <span>OK</span>
@@ -47,8 +57,8 @@ export function ConfirmationDialog({
               </Button>
             </>
           )}
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </div>
+      </div>
+    </div>
   );
 }

src/components/ui/confirmation-dialog.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 // Import our simple components
 import {
@@ -41,7 +41,16 @@ interface DialogRootProps {
 
 // Create a Dialog Root that has the same API as Radix's
 const Dialog: React.FC<DialogRootProps> = ({ children, open, onOpenChange }) => {
-  const [isOpen, setIsOpen] = useState(open || false);
+  // IMPORTANT: Initialize isOpen to false by default
+  const [isOpen, setIsOpen] = useState(open === true ? true : false);
+  
+  // Add useEffect to update internal state when open prop changes
+  useEffect(() => {
+    // Only update when the prop explicitly changes to true or false (not undefined)
+    if (open === true || open === false) {
+      setIsOpen(open);
+    }
+  }, [open]);
 
   const handleOpenChange = (newOpen: boolean) => {
     setIsOpen(newOpen);

src/components/ui/radix-compatibility.tsx

@@ -103,8 +103,33 @@ const SimpleDialogDescription: React.FC<SimpleDialogDescriptionProps> = ({ child
   );
 };
 
+// Context for communicating between Dialog and DialogTrigger
+export const SimpleDialogContext = React.createContext<{
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+}>({
+  isOpen: false,
+  onOpenChange: () => {},
+});
+
 const SimpleDialogTrigger: React.FC<SimpleDialogTriggerProps> = ({ children }) => {
-  return <>{children}</>;
+  // Get the dialog context to control the dialog's open state
+  const { onOpenChange } = React.useContext(SimpleDialogContext);
+  
+  // Create a clickable wrapper that opens the dialog
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    console.log('SimpleDialogTrigger: Opening dialog');
+    onOpenChange(true);
+  };
+  
+  // If asChild is true, we'd clone the child element and add an onClick handler
+  // For simplicity, we'll just wrap the children in a div with an onClick
+  return (
+    <div onClick={handleClick} style={{ display: 'inline-block', cursor: 'pointer' }}>
+      {children}
+    </div>
+  );
 };
 
 const SimpleDialog: React.FC<SimpleDialogProps> = ({ 
@@ -127,12 +152,21 @@ const SimpleDialog: React.FC<SimpleDialogProps> = ({
     return () => window.removeEventListener('keydown', onKeyDown);
   }, [isOpen, onOpenChange]);
 
-  if (!isOpen) return null;
+  console.log('SimpleDialog rendering with isOpen:', isOpen);
 
+  // Provide the dialog state to all children via context
   return (
-    <div className={cn('', className)}>
-      {children}
-    </div>
+    <SimpleDialogContext.Provider value={{ isOpen, onOpenChange }}>
+      {isOpen ? (
+        <div className={cn('fixed inset-0 z-50', className)}>
+          <SimpleDialogOverlay />
+          {children}
+        </div>
+      ) : (
+        // Even when dialog is closed, we need to render the trigger
+        <>{children}</>
+      )}
+    </SimpleDialogContext.Provider>
   );
 };
 

src/components/ui/simple-dialog.tsx

@@ -61,7 +61,14 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
         const { user, error } = await getCurrentUser();
 
         if (user) {
+          console.log('AuthProvider: User found during checkAuthStatus', user);
           dispatch({ type: 'AUTH_SUCCESS', payload: user });
+          
+          // Dispatch a custom event for EntriesProvider to listen to
+          window.dispatchEvent(new CustomEvent('authStateChanged', { 
+            detail: { user }
+          }));
+          console.log('AuthProvider: Dispatched authStateChanged event with user:', user);
         } else {
           dispatch({ type: 'AUTH_FAILURE', payload: error || 'No user found' });
         }
@@ -126,6 +133,12 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
 
     if (result.success && result.user) {
       dispatch({ type: 'AUTH_SUCCESS', payload: result.user });
+      
+      // Dispatch event for EntriesProvider
+      window.dispatchEvent(new CustomEvent('authStateChanged', { 
+        detail: { user: result.user }
+      }));
+      
       return { success: true };
     } else {
       dispatch({ 

src/features/auth/AuthProvider.tsx

@@ -220,12 +220,14 @@ export const mockUpdateUserProfile = async (
     // Update the user's profile
     if (data.username !== undefined) {
       mockUsers[userEmail].username = data.username;
+      console.log(`MockAuth: Updated username for ${userEmail} to:`, data.username);
     }
 
     // If this is the current user, update the current session
     if (currentSession.user && currentSession.user.id === userId) {
       currentSession.user = { ...mockUsers[userEmail] };
       localStorage.setItem('mockAuthSession', JSON.stringify(currentSession.user));
+      console.log('MockAuth: Updated current session with new profile data:', currentSession.user);
     }
 
     // Save updated users to localStorage