OSIT-AE-App-Svelte/src/routes/events/[event_id]/(launcher)/launcher_cfg.svelte

<script lang="ts">
    interface Props {
        log_lvl?: number;
    }

    let { log_lvl = 0 }: Props = $props();

    import {
        ae_snip,
        ae_loc,
        ae_sess,
        ae_api,
        ae_trig,
        slct,
        slct_trigger,
        time
    } from '$lib/stores/ae_stores';
    import {
        events_loc,
        events_sess,
        events_slct,
        events_trigger,
        events_trig
    } from '$lib/stores/ae_events_stores';

    // Sub-components
    import Launcher_Cfg_Native_OS from './cfg_components/launcher_cfg_native_os.svelte';
    import Launcher_Cfg_Sync_Timers from './cfg_components/launcher_cfg_sync_timers.svelte';
    import Launcher_Cfg_Health from './cfg_components/launcher_cfg_health.svelte';
    import Launcher_Cfg_Updates from './cfg_components/launcher_cfg_updates.svelte';
    import Launcher_Cfg_Controller from './cfg_components/launcher_cfg_controller.svelte';
    import Launcher_Cfg_Screen_Saver from './cfg_components/launcher_cfg_screen_saver.svelte';
    import Launcher_Cfg_App_Modes from './cfg_components/launcher_cfg_app_modes.svelte';
    import Launcher_Cfg_Local_Actions from './cfg_components/launcher_cfg_local_actions.svelte';

    // UI Tab State
    let active_tab: 'system' | 'sync' | 'general' = $state('system');

    /**
     * Auto-Collapse Coordinator
     * When a section is opened in 'auto' mode, collapse all other 'auto' sections.
     * Pinned sections are ignored and remain open.
     */
    function handle_section_expand(current_key: string) {
        const launcher = $events_loc.launcher;
        Object.keys(launcher).forEach((key) => {
            if (
                key.startsWith('section_state__') &&
                key !== `section_state__${current_key}`
            ) {
                if (launcher[key] === 'auto') {
                    launcher[key] = 'collapsed';
                }
            }
        });
        $events_loc.launcher = launcher; // Trigger store update
    }
</script>

<div
    class="
        w-full max-w-full
        flex flex-col gap-4 items-center justify-start
        "
>
    <div
        class="w-full flex flex-row items-center justify-between border-b border-surface-500/20 pb-2"
    >
        <h2
            class="text-center text-lg font-bold text-gray-700 dark:text-gray-200"
        >
            <span class="fas fa-cog mr-2 opacity-50"></span>
            Launcher Configuration
        </h2>

        <button
            type="button"
            onclick={() => ($events_loc.launcher.hide_drawer__cfg = true)}
            class="btn btn-icon dark:text-white hover:bg-surface-500/10 transition-colors"
        >
            <span class="fas fa-times"></span>
            <span class="sr-only">Close Config</span>
        </button>
    </div>

    <!-- Category Tabs -->
    <div class="w-full grid grid-cols-3 gap-1 bg-surface-500/10 p-1 rounded-lg">
        <button
            type="button"
            onclick={() => (active_tab = 'system')}
            class="btn btn-sm text-[10px] uppercase font-bold transition-all"
            class:preset-filled-primary-500={active_tab === 'system'}
            class:opacity-50={active_tab !== 'system'}
        >
            <span class="fas fa-microchip mr-1"></span> System
        </button>
        <button
            type="button"
            onclick={() => (active_tab = 'sync')}
            class="btn btn-sm text-[10px] uppercase font-bold transition-all"
            class:preset-filled-primary-500={active_tab === 'sync'}
            class:opacity-50={active_tab !== 'sync'}
        >
            <span class="fas fa-sync mr-1"></span> Sync
        </button>
        <button
            type="button"
            onclick={() => (active_tab = 'general')}
            class="btn btn-sm text-[10px] uppercase font-bold transition-all"
            class:preset-filled-primary-500={active_tab === 'general'}
            class:opacity-50={active_tab !== 'general'}
        >
            <span class="fas fa-sliders-h mr-1"></span> General
        </button>
    </div>

    <!-- Tab Content -->
    <div class="w-full flex flex-col gap-2 min-h-[400px]">
        {#if active_tab === 'system'}
            <div class="animate-in fade-in slide-in-from-left-2 duration-300">
                {#if $ae_loc.is_native}
                    <Launcher_Cfg_Health
                        on_expand={() => handle_section_expand('health')}
                    />
                    <Launcher_Cfg_Native_OS
                        on_expand={() => handle_section_expand('native_os')}
                    />
                    <Launcher_Cfg_Updates
                        on_expand={() => handle_section_expand('updates')}
                    />
                {:else}
                    <div class="card p-8 text-center opacity-50 italic text-sm">
                        Native OS features are only available when running in
                        the Aether Desktop app.
                    </div>
                {/if}
            </div>
        {/if}

        {#if active_tab === 'sync'}
            <div class="animate-in fade-in slide-in-from-bottom-2 duration-300">
                <Launcher_Cfg_Sync_Timers
                    on_expand={() => handle_section_expand('sync_timers')}
                />
            </div>
        {/if}

        {#if active_tab === 'general'}
            <div class="animate-in fade-in slide-in-from-right-2 duration-300">
                <Launcher_Cfg_Controller
                    on_expand={() => handle_section_expand('controller')}
                />
                <Launcher_Cfg_App_Modes
                    on_expand={() => handle_section_expand('app_modes')}
                />
                <Launcher_Cfg_Screen_Saver
                    on_expand={() => handle_section_expand('screen_saver')}
                />
                <Launcher_Cfg_Local_Actions
                    on_expand={() => handle_section_expand('local_actions')}
                />
            </div>
        {/if}
    </div>

    <!-- Global Actions Footer -->
    <div
        class="w-full flex flex-col gap-2 border-t border-surface-500/20 pt-4 mt-auto"
    >
        <div class="grid grid-cols-2 gap-2">
            <button
                type="button"
                onclick={() =>
                    ($events_loc.launcher.hide_drawer__debug = false)}
                class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 transition-all"
            >
                <span class="fas fa-bug mr-2"></span>
                Open Debug
            </button>

            <button
                type="button"
                onclick={() => location.reload()}
                class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition-all"
            >
                <span class="fas fa-sync-alt mr-2"></span>
                Reload Page
            </button>
        </div>

        <p
            class="text-[9px] text-center opacity-40 uppercase font-bold tracking-widest mt-2"
        >
            Aether Platform &bull; Events Launcher v3.0
        </p>
    </div>
</div>