added bg feature

src/contexts/AuthContext.tsx

@@ -38,6 +38,8 @@ type MongoUser = {
   photoURL?: string
   theme?: string
   tutorial?: boolean
+  backgroundImage?: string | null
+  backgroundImages?: string[]
 }
 
 type AuthContextValue = {
@@ -62,6 +64,21 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const [loading, setLoading] = useState(true)
   const [authError, setAuthError] = useState<string | null>(null)
 
+  // Apply custom background image whenever mongoUser changes
+  useEffect(() => {
+    const bg = mongoUser?.backgroundImage
+    if (bg) {
+      document.body.style.backgroundImage = `url(${bg})`
+      document.body.style.backgroundSize = 'cover'
+      document.body.style.backgroundPosition = 'center'
+      document.body.style.backgroundAttachment = 'fixed'
+      document.body.classList.add('gj-has-bg')
+    } else {
+      document.body.style.backgroundImage = ''
+      document.body.classList.remove('gj-has-bg')
+    }
+  }, [mongoUser?.backgroundImage])
+
   // Initialize encryption keys on login
   async function initializeEncryption(authUser: User) {
     try {