OSIT-AE-App-Svelte/src/lib/e_app_debug_menu.svelte

<script lang="ts">
// *** Import Svelte specific

// *** Import other supporting libraries
import {
    Bug,
    CircleX,
    ToggleLeft, ToggleRight,
    X
    } from '@lucide/svelte';


// *** Import Aether specific variables and functions
// import { ae_util } from '$lib/ae_utils/ae_utils';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';


// *** Setup Svelte properties
interface Props {
    log_lvl?: number;
    show_debug_menu: boolean;
    hidden: null|boolean;
}

let {
    log_lvl = 0,
    show_debug_menu = false,
    hidden = true,
    }: Props = $props();


</script>


<!-- App Debug Menu -->
<!-- opacity-25
hover:opacity-100 -->
<!-- text-slate-400 hover:text-slate-800 -->
<section
    class="
        ae_app__debug_menu

        hidden-print
        z-50
        absolute bottom-0 left-0

        flex
        text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg

        dark:text-slate-400 dark:hover:text-slate-200
        bg-red-100/60 dark:bg-red-800/50
        hover:bg-red-200 hover:dark:bg-red-900

        mx-1 my-2
        max-h-min
        max-w-lg
        transition-all
        transition-delay-1000
        transition-duration-1000
        ease-in


        border-2
        border-red-300 dark:border-red-700
        hover:border-red-500 hover:dark:border-red-500
        "
    class:top-0={$ae_loc?.debug_menu}
    class:w-full={$ae_loc?.debug_menu}
    class:hidden={!$ae_loc?.trusted_access}
    class:border-transparent={!$ae_loc?.debug_menu}
    class:hover:border-transparent={!$ae_loc?.debug_menu}
    class:hover:bg-transparent={!$ae_loc?.debug_menu}
    >

    <div
        class:hidden={!$ae_loc?.debug_menu}
        class:border-red-200={$ae_loc?.debug_menu}
        class:dark:border-red-800={$ae_loc?.debug_menu}
        class="

            transition-all
            transition-delay-1000
            transition-duration-1000
            ease-in
            overflow-y-auto
            px-1 py-4
            opacity-50
            hover:opacity-100
            relative
            "
        >

        <!-- flex flex-col items-center justify-center max-h-full outline -->
        <div>
            <!-- <span class="fas fa-bug mx-1"></span> -->
            <Bug class="inline-block mx-1" />
            <span>Debug</span>
        </div>

        <pre>
            {JSON.stringify($ae_loc, null, 2)}
        </pre>

    </div>

    <span class="absolute top-0 right-0 flex flex-row gap-1 items-center justify-center">
        <button
            type="button"
            onclick={() => {
                console.log('Debug ae_loc:', $ae_loc);
                $ae_loc.debug_mode = !$ae_loc?.debug_mode;
            }}
            class="
                btn btn-sm preset-tonal-surface border-sm border-surface-500 hover:preset-tonal-warning
                transition-all *:hover:inline-block


                "
            title="Turn debug content and styles off and on"
            >
            {#if $ae_loc?.debug_mode}
                <!-- <span class="fas fa-toggle-on mx-1"></span> -->
                <ToggleRight strokeWidth="2.5" color="green" class="inline-block mx-1" />
                <span>Debug</span>
                <span class="hidden">
                    Mode On
                </span>
            {:else}
                <!-- <span class="fas fa-toggle-off mx-1"></span> -->
                <ToggleLeft strokeWidth="1" color="gray" class="inline-block mx-1" />
                <span>Debug?</span>
                <span class="hidden">
                    Mode Off
                </span>
            {/if}
            <!-- <span class="fas fa-toggle-on mx-1"></span> -->
            <!-- <ToggleRight class="inline-block mx-1" /> -->
            <!-- <X class="inline-block mx-1" /> -->

        </button>

        <button
            type="button"
            onclick={() => {
                console.log('Debug ae_loc:', $ae_loc);
                $ae_loc.debug_menu = !$ae_loc?.debug_menu;
            }}
            class="
                btn btn-sm preset-tonal-surface border-sm border-surface-500 hover:preset-tonal-warning
                transition-all *:hover:inline-block
                "
            title="Turn debug content and styles off and on"
            >
            <!-- <span class="fas fa-toggle-on mx-1"></span> -->
            <!-- <ToggleRight class="inline-block mx-1" /> -->
            <CircleX class="inline-block mx-1" />
            <span class="hidden">
                Close
            </span>
            <span>Debug</span>

        </button>
    </span>

    <button
        type="button"
        onclick={() => {
            console.log('Debug ae_loc:', $ae_loc);
            $ae_loc.debug_menu = !$ae_loc?.debug_menu;
        }}
        id="AE-Quick-Debug"
        class="
            btn btn-icon
            preset-tonal-surface border-sm border-surface-500
            hover:preset-tonal-warning
            transition-all
            fixed bottom-2 left-2
            text-gray-400 hover:text-gray-800
            "
        title="Turn debug content and styles off and on"
        >
        <!-- absolute bottom-2 left-2 -->
        <!-- fixed bottom-0 left-0 -->
        π
    </button>

</section>