Ran prettier. Moved Header to layout file

src/components/context/TVMode.tsx

@@ -1,8 +1,9 @@
 'use client';
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useContext, useState, useEffect } from 'react';
 import Image from 'next/image';
 import type { ReactNode } from 'react';
-//import { useSession } from 'next-auth/react';
+import type { Session } from '@supabase/supabase-js';
+import { createClient } from '@/utils/supabase/client';
 
 interface TVModeContextProps {
   tvMode: boolean;
@@ -35,8 +36,45 @@ export const useTVMode = () => {
 
 export const TVToggle = () => {
   const { tvMode, toggleTVMode } = useTVMode();
-  //const { data: session } = useSession();
-  //if (!session) return <div />;
+  const supabase = createClient();
+  const [session, setSession] = useState<Session | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Function to fetch the session
+    async function fetchSession() {
+      try {
+        const {
+          data: { session },
+        } = await supabase.auth.getSession();
+        setSession(session);
+      } catch (error) {
+        console.error('Error fetching session:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    // Call the function
+    fetchSession().catch((error) => {
+      console.error('Error fetching session:', error);
+    });
+
+    // Set up auth state change listener
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event, session) => {
+      setSession(session);
+    });
+
+    // Clean up the subscription when component unmounts
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [supabase]);
+
+  if (loading || !session) return <div />;
+
   return (
     <button onClick={toggleTVMode} className='mr-4 mt-1'>
       {tvMode ? (