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

164 lines
6.4 KiB
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>