144 lines
4.4 KiB
Svelte
144 lines
4.4 KiB
Svelte
<script lang="ts">
|
|
/**
|
|
* AE_ObjectFlags.svelte
|
|
* GENERIC Aether Object Flags & Visibility Toggles
|
|
* Manages: alert, private, public, personal, professional, template
|
|
*/
|
|
import {
|
|
Siren,
|
|
MessageSquareWarning,
|
|
Fingerprint,
|
|
Globe,
|
|
BookHeart,
|
|
BriefcaseBusiness,
|
|
NotepadTextDashed,
|
|
Settings
|
|
} from '@lucide/svelte';
|
|
import { ae_loc } from '$lib/stores/ae_stores';
|
|
|
|
interface Props {
|
|
// The object containing the flags (bindable)
|
|
obj: any;
|
|
|
|
// Visibility configuration (optional overrides)
|
|
show_labels?: boolean;
|
|
hide_alert?: boolean;
|
|
hide_private?: boolean;
|
|
hide_public?: boolean;
|
|
hide_personal?: boolean;
|
|
hide_professional?: boolean;
|
|
hide_template?: boolean;
|
|
|
|
// Callbacks
|
|
on_toggle?: (prop: string, newValue: boolean) => void;
|
|
|
|
// Styling
|
|
container_class?: string;
|
|
}
|
|
|
|
let {
|
|
obj = $bindable(),
|
|
show_labels = true,
|
|
hide_alert: hide_alert = false,
|
|
hide_private: hide_private = false,
|
|
hide_public: hide_public = false,
|
|
hide_personal: hide_personal = false,
|
|
hide_professional: hide_professional = false,
|
|
hide_template: hide_template = false,
|
|
on_toggle: onToggle,
|
|
container_class = 'flex flex-row flex-wrap gap-1 items-center justify-evenly py-2 border-y border-surface-500/10'
|
|
}: Props = $props();
|
|
|
|
function handle_toggle(prop: string) {
|
|
obj[prop] = !obj[prop];
|
|
if (onToggle) onToggle(prop, obj[prop]);
|
|
}
|
|
</script>
|
|
|
|
<div class={container_class}>
|
|
{#if show_labels}
|
|
<span
|
|
class="text-surface-500 mr-2 flex items-center gap-1 text-xs font-bold tracking-wider uppercase">
|
|
<Settings size="1.1em" /> Flags:
|
|
</span>
|
|
{/if}
|
|
|
|
<!-- Alert Status -->
|
|
{#if !hide_alert}
|
|
<button
|
|
type="button"
|
|
onclick={() => handle_toggle('alert')}
|
|
class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
|
|
title="Toggle Alert Status">
|
|
<Siren
|
|
size="1.2em"
|
|
class={obj?.alert ? 'text-error-500' : 'opacity-40'} />
|
|
</button>
|
|
{/if}
|
|
|
|
<!-- Private / E2EE -->
|
|
{#if !hide_private}
|
|
<button
|
|
type="button"
|
|
onclick={() => handle_toggle('private')}
|
|
class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
|
|
title="Toggle Private/Encrypted">
|
|
<Fingerprint
|
|
size="1.2em"
|
|
class={obj?.private ? 'text-success-500' : 'opacity-40'} />
|
|
</button>
|
|
{/if}
|
|
|
|
<!-- Public Visibility -->
|
|
{#if !hide_public}
|
|
<button
|
|
type="button"
|
|
onclick={() => handle_toggle('public')}
|
|
class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
|
|
title="Toggle Public Visibility">
|
|
<Globe
|
|
size="1.2em"
|
|
class={obj?.public ? 'text-success-500' : 'opacity-40'} />
|
|
</button>
|
|
{/if}
|
|
|
|
<!-- Personal Scope -->
|
|
{#if !hide_personal}
|
|
<button
|
|
type="button"
|
|
onclick={() => handle_toggle('personal')}
|
|
class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
|
|
title="Toggle Personal Scope">
|
|
<BookHeart
|
|
size="1.2em"
|
|
class={obj?.personal ? 'text-success-500' : 'opacity-40'} />
|
|
</button>
|
|
{/if}
|
|
|
|
<!-- Professional Scope -->
|
|
{#if !hide_professional}
|
|
<button
|
|
type="button"
|
|
onclick={() => handle_toggle('professional')}
|
|
class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
|
|
title="Toggle Professional Scope">
|
|
<BriefcaseBusiness
|
|
size="1.2em"
|
|
class={obj?.professional ? 'text-success-500' : 'opacity-40'} />
|
|
</button>
|
|
{/if}
|
|
|
|
<!-- Template Status -->
|
|
{#if !hide_template && $ae_loc.edit_mode}
|
|
<button
|
|
type="button"
|
|
onclick={() => handle_toggle('template')}
|
|
class="btn-icon btn-icon-sm preset-tonal-secondary hover:preset-filled-secondary-500 transition"
|
|
title="Toggle Template Mode">
|
|
<NotepadTextDashed
|
|
size="1.2em"
|
|
class={obj?.template ? 'text-success-500' : 'opacity-40'} />
|
|
</button>
|
|
{/if}
|
|
</div>
|