Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tweaking things.

Browse Source
This commit is contained in:
Scott Idem
2026-06-16 20:09:52 -04:00
parent 3fc0a33044
commit 4c148206ac
1 changed files with 35 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/lib/app_components/e_app_sys_bar.svelte
View File

@@ -258,11 +258,17 @@ function apply_theme(value: string) {
ae_sys_panel ae_sys_panel
flex max-h-[80vh] w-80 max-w-[94vw] flex max-h-[80vh] w-80 max-w-[94vw]
flex-col items-stretch flex-col items-stretch
gap-0 overflow-x-hidden overflow-y-auto gap-0
rounded-xl border border-gray-200/70 bg-white/85 text-sm overflow-x-hidden overflow-y-auto
text-gray-900 shadow-2xl backdrop-blur-md rounded-xl border
dark:border-gray-700/70 dark:bg-gray-900/85 border-primary-400-600/50
dark:text-gray-100 bg-white/0 dark:bg-gray-900/60
shadow-2xl backdrop-blur-md
text-sm
text-gray-950-50
transition-all
duration-300
"> ">
<!-- Panel header: person info + close --> <!-- Panel header: person info + close -->
<div <div
@@ -285,9 +291,9 @@ function apply_theme(value: string) {
</div> </div>
<button <button
type="button" type="button"
class="btn btn-icon btn-sm preset-tonal-surface hover:preset-filled-error ml-2 shrink-0 transition-all" class="btn btn-icon btn-sm preset-filled-tertiary-200-800 hover:preset-filled-error ml-2 shrink-0 transition-all"
onclick={toggle_expand} onclick={toggle_expand}
title="Close menu"> title="Close the Aether system menu">
<CircleX size="1.1em" /> <CircleX size="1.1em" />
</button> </button>
</div> </div>
@@ -297,7 +303,7 @@ function apply_theme(value: string) {
<div class="border-b border-gray-100 dark:border-gray-800"> <div class="border-b border-gray-100 dark:border-gray-800">
<button <button
type="button" type="button"
class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-gray-500 uppercase transition-colors hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800" class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-surface-600-400 uppercase transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
onclick={() => (sec_signin = !sec_signin)}> onclick={() => (sec_signin = !sec_signin)}>
<span class="flex min-w-0 items-center gap-1.5"> <span class="flex min-w-0 items-center gap-1.5">
{#if $ae_loc?.person_id && $ae_loc?.user_id} {#if $ae_loc?.person_id && $ae_loc?.user_id}
@@ -337,7 +343,7 @@ function apply_theme(value: string) {
<div class="border-b border-gray-100 dark:border-gray-800"> <div class="border-b border-gray-100 dark:border-gray-800">
<button <button
type="button" type="button"
class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-gray-500 uppercase transition-colors hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800" class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-surface-600-400 uppercase transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
onclick={() => (sec_access = !sec_access)}> onclick={() => (sec_access = !sec_access)}>
<span class="flex min-w-0 items-center gap-1.5"> <span class="flex min-w-0 items-center gap-1.5">
{#if $ae_loc?.access_type && $ae_loc?.access_type !== 'anonymous'} {#if $ae_loc?.access_type && $ae_loc?.access_type !== 'anonymous'}
@@ -391,7 +397,7 @@ function apply_theme(value: string) {
<div class="border-b border-gray-100 dark:border-gray-800"> <div class="border-b border-gray-100 dark:border-gray-800">
<button <button
type="button" type="button"
class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-gray-500 uppercase transition-colors hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800" class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-surface-600-400 uppercase transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
onclick={() => (sec_appearance = !sec_appearance)}> onclick={() => (sec_appearance = !sec_appearance)}>
<span class="flex items-center gap-1"> <span class="flex items-center gap-1">
<Palette size="1em" class="opacity-60" /> <Palette size="1em" class="opacity-60" />
@@ -411,8 +417,8 @@ function apply_theme(value: string) {
type="button" type="button"
class="btn btn-sm flex-1 transition-all class="btn btn-sm flex-1 transition-all
{$ae_loc?.theme_mode === 'dark' {$ae_loc?.theme_mode === 'dark'
? 'preset-tonal-secondary hover:preset-filled-secondary-500' ? 'preset-tonal-secondary hover:preset-filled-secondary-400-600'
: 'preset-tonal-warning hover:preset-filled-warning-500'}" : 'preset-tonal-secondary hover:preset-filled-secondary-400-600'}"
onclick={toggle_theme_mode} onclick={toggle_theme_mode}
title="Toggle light/dark mode (currently: {$ae_loc?.theme_mode ?? title="Toggle light/dark mode (currently: {$ae_loc?.theme_mode ??
'unknown'})"> 'unknown'})">
@@ -426,7 +432,7 @@ function apply_theme(value: string) {
</button> </button>
<button <button
type="button" type="button"
class="btn btn-sm preset-tonal-surface hover:preset-tonal-primary flex-1 transition-all" class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-400-600 flex-1 transition-all"
onclick={cycle_font_size} onclick={cycle_font_size}
title={font_title}> title={font_title}>
<span class="text-sm leading-none font-bold" <span class="text-sm leading-none font-bold"
@@ -438,11 +444,11 @@ function apply_theme(value: string) {
<!-- Theme picker: compact grouped select --> <!-- Theme picker: compact grouped select -->
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="shrink-0 text-xs text-gray-400 dark:text-gray-500">Theme</span> <span class="shrink-0 text-xs text-surface-600-400">Theme</span>
<select <select
bind:value={$ae_loc.theme_name} bind:value={$ae_loc.theme_name}
onchange={(e) => apply_theme((e.target as HTMLSelectElement).value)} onchange={(e) => apply_theme((e.target as HTMLSelectElement).value)}
class="flex-1 rounded-md border border-gray-200 bg-gray-50 px-2 py-1 text-xs text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200" class="flex-1 rounded-md border border-gray-200 px-2 py-1 text-xs text-surface-800-200 dark:border-gray-600 bg-surface-200-800"
title="Select theme (current: {$ae_loc.theme_name ?? 'default'})"> title="Select theme (current: {$ae_loc.theme_name ?? 'default'})">
<optgroup label="System"> <optgroup label="System">
{#each skeleton_themes as opt (opt.value)} {#each skeleton_themes as opt (opt.value)}
@@ -470,7 +476,7 @@ function apply_theme(value: string) {
<div class="border-b border-gray-100 dark:border-gray-800"> <div class="border-b border-gray-100 dark:border-gray-800">
<button <button
type="button" type="button"
class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-gray-500 uppercase transition-colors hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800" class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-surface-600-400 uppercase transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
onclick={() => (sec_dev = !sec_dev)}> onclick={() => (sec_dev = !sec_dev)}>
<span class="flex items-center gap-1"> <span class="flex items-center gap-1">
<Bug size="0.9em" class="opacity-60" /> <Bug size="0.9em" class="opacity-60" />
@@ -596,16 +602,16 @@ function apply_theme(value: string) {
class=" class="
ae_sys_bar__strip ae_sys_bar__strip
flex h-9 flex-row items-center flex h-9 flex-row items-center
gap-1 gap-1 px-2
rounded-xl border rounded-xl border
border-gray-200/60 border-primary-400-600/50
bg-white/30 px-2 shadow-lg bg-white/30 dark:bg-gray-900/30
backdrop-blur-sm shadow-lg backdrop-blur-sm
transition-colors text-gray-900-100
transition-all
duration-300 duration-300
dark:border-gray-700/60 dark:bg-gray-900/30
" "
class:border-primary-400={expand}> class:border-primary-400-600={expand}>
<!-- AUTH STATUS SHIELD — hidden in iframe; host page manages auth context --> <!-- AUTH STATUS SHIELD — hidden in iframe; host page manages auth context -->
{#if !$ae_loc?.iframe} {#if !$ae_loc?.iframe}
{#if $ae_loc?.access_type && $ae_loc?.access_type !== 'anonymous' && expand} {#if $ae_loc?.access_type && $ae_loc?.access_type !== 'anonymous' && expand}
@@ -613,13 +619,14 @@ function apply_theme(value: string) {
type="button" type="button"
class=" class="
btn btn-sm group/shield transition-all duration-200 btn btn-sm group/shield transition-all duration-200
preset-tonal-surface preset-outlined-surface
{$ae_loc?.access_type && {$ae_loc?.access_type &&
$ae_loc?.access_type !== 'anonymous' $ae_loc?.access_type !== 'anonymous'
? $ae_loc?.user_access_type && ? $ae_loc?.user_access_type &&
$ae_loc?.access_type === $ae_loc?.user_access_type $ae_loc?.access_type === $ae_loc?.user_access_type
? 'variant-outline-surface hover:variant-ghost-warning' ? 'hover:preset-tonal-success'
: 'variant-outline-warning hover:variant-ghost-warning' : 'preset-tonal-warning hover:preset-tonal-warning'
: 'variant-outline-surface hover:variant-ghost-success'} : 'preset-outlined-surface hover:preset-tonal-success'}
" "
onclick={handle_shield_click} onclick={handle_shield_click}
title={$ae_loc?.access_type && title={$ae_loc?.access_type &&
@@ -721,9 +728,9 @@ function apply_theme(value: string) {
<!-- MENU EXPAND / COLLAPSE ───────────────────────────────────── --> <!-- MENU EXPAND / COLLAPSE ───────────────────────────────────── -->
<button <button
type="button" type="button"
class="btn btn-sm preset-filled-tertiary-400-600 hover:preset-filled-success group/menu transition-all duration-200" class="btn btn-sm preset-filled-tertiary-200-800 hover:preset-filled-success group/menu transition-all duration-200"
onclick={toggle_expand} onclick={toggle_expand}
title={expand ? 'Close menu' : 'Open menu'}> title={expand ? 'Close the Aether system menu' : 'Open menu'}>
{#if expand} {#if expand}
<CircleX size="1.1em" class="shrink-0" /> <CircleX size="1.1em" class="shrink-0" />
<span <span