index.astro

---
import Layout from '../layouts/Layout.astro';
import Tips from '../components/Tips.astro';
import { RightPanel } from '../components/RightPanel.jsx';
import { CodingArea } from '../components/CodingArea.jsx';
import { Assembled } from '../components/Assembled.jsx';
import { PlusDialog } from '../components/PlusDialog.jsx';
import '../components/styles.css';
---

<Layout title="Sim8085 - A 8085 microprocessor simulator" showActions={true} fullwidth={true} smallFooter={true}>
    <Tips />
    <main class="relative">
        <div
            class="flex items-start h-[calc(100dvh-4rem)] md:h-[calc(100vh-6.2rem)]"
        >
            <!-- Left Panel with fixed width -->
            <div
                id="left-panel"
                class="absolute md:static z-10 min-w-max max-w-[400px] hidden md:block"
            >
                <RightPanel client:idle />
            </div>

            <!-- Middle Panel that can grow, but with a min and max width to remain stable -->
            <div
                class="px-2 md:px-0 md:pr-0 md:pl-0 border-y border-y-main-border bg-main-background md:bg-secondary-background flex-grow min-w-0"
            >
                <!-- <div class="flex justify-center md:hidden">
                    <Actions client:idle />
                </div> -->
                <CodingArea client:load />
            </div>

            <!-- Right Panel with fixed width -->
            <div
                id="right-panel"
                class="hidden md:flex min-w-max items-start h-[calc(100svh-5.5rem)] md:h-[calc(100vh-6.2rem)] overflow-x-hidden"
            >
                <Assembled client:idle />
            </div>
        </div>

        <PlusDialog client:idle />

        <!-- Mobile warning message -->
        <!-- <div class="flex md:hidden justify-center items-start bg-gray-100 dark:bg-gray-900" style="height: calc(100vh - 6rem);">
            <p class="text-center dark:text-red-800 text-lg font-semibold mt-10 px-4">
                Sim8085 is not supported on mobile devices. Please use a larger screen for the best experience.
            </p>
        </div> -->
    </main>
</Layout>

<script>
    import { supabase } from '../lib/supabase.js';

    // Function to handle the OAuth tokens from URL
    async function handleOAuthTokens() {
        const hash = window.location.hash;
        if (hash) {
            const params = new URLSearchParams(hash.substring(1)); // Remove '#' and parse
            const access_token = params.get('access_token');
            const refresh_token = params.get('refresh_token');

            if (access_token && refresh_token) {
                // Set the session in Supabase
                await supabase.auth.setSession({
                    access_token,
                    refresh_token,
                });

                // Redirect to clear the URL hash and go to dashboard
                window.location.replace('/'); // Update with the correct path for your app
            }
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        handleOAuthTokens();
    });

    window.addEventListener("showLeftPanel", () => {
        const el = document.getElementById("left-panel");
        if (el) {
            if (el.classList.contains("hidden")) {
                el.classList.remove("hidden");
            } else {
                el.classList.add("hidden");
            }
        }
    });

    window.addEventListener("showRightPanel", () => {
        const el = document.getElementById("right-panel");
        if (el) {
            if (el.classList.contains("hidden")) {
                el.classList.remove("hidden");
            } else {
                el.classList.add("hidden");
            }
        }
    });
</script>