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

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

// *** Import other supporting libraries
import {
    Bug,
    CircleX, Info,
    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;
    hide?: null|boolean;
    expand?: boolean;
}

let {
    log_lvl = $bindable(0),
    hide = $bindable(false),
    expand = $bindable(false),
}: 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={expand}
    class:w-full={expand}
    class:hidden={hide}
    class:border-transparent={!expand}
    class:hover:border-transparent={!expand}
    class:hover:bg-transparent={!expand}
    >

    <div
        class:hidden={!expand}
        class:border-red-200={expand}
        class:dark:border-red-800={expand}
        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-outlined-surface-400-600 preset-filled-suface-200-800
                hover:preset-tonal-success
                transition-all
                "
            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={() => {
                if (log_lvl) {
                    console.log('Showing quick info/debug menu.');
                }
                expand = false;
                $ae_sess.debug_menu.hide_quick_info = false;

            }}
            title="Show Quick Info"
            class="
                btn btn-sm
                preset-outlined-surface-400-600 preset-filled-suface-200-800
                hover:preset-tonal-success
                transition-all
                "
            >
            <!-- <span class="fas fa-info-circle mx-1"></span> -->
            <Info class="inline-block mx-1" />
            Quick Info
        </button>

        <button
            type="button"
            onclick={() => {
                console.log('Debug ae_loc:', $ae_loc);
                // $ae_loc.debug_menu.expand = !$ae_loc?.debug_menu?.expand;
                expand = !expand;
            }}
            class="
                btn btn-sm
                preset-outlined-surface-400-600 preset-filled-suface-200-800
                hover:preset-tonal-warning
                transition-all
                "
            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.expand = !$ae_loc?.debug_menu?.expand;
            expand = !expand;
        }}
        id="AE-Quick-Debug"
        class="
            btn btn-icon
            text-xs
            preset-filled-surface-50-950 preset-outlined-surface-100-900
            hover:preset-tonal-warning
            transition-all
            fixed bottom-2 left-2
            text-neutral-300 hover:text-neutral-800
            dark:text-neutral-700 dark:hover:text-neutral-200
            "
        title="Turn debug content and styles off and on"
        >
        <!-- absolute bottom-2 left-2 -->
        <!-- fixed bottom-0 left-0 -->
        &pi;
    </button>

</section>