OSIT-AE-App-Svelte/src/lib/ae_elements/AE_Object_Flags.svelte

<script lang="ts">
/**
 * AE_ObjectFlags.svelte
 * GENERIC Aether Object Flags & Visibility Toggles
 * Manages: alert, private, public, personal, professional, template
 */
import {
    Siren,
    FingerprintPattern,
    Globe,
    BookHeart,
    BriefcaseBusiness,
    NotepadTextDashed,
    Settings
} from '@lucide/svelte';
import { ae_loc } from '$lib/stores/ae_stores';
import type { ae_JournalEntryDraft } from '$lib/types/ae_types';

interface Props {
    // The object containing the flags (bindable)
    obj: ae_JournalEntryDraft;

    // 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 emit_toggle(prop: string, value: boolean) {
    if (onToggle) onToggle(prop, value);
}

function toggle_alert() {
    obj.alert = !obj.alert;
    emit_toggle('alert', !!obj.alert);
}

function toggle_private() {
    obj.private = !obj.private;
    emit_toggle('private', !!obj.private);
}

function toggle_public() {
    obj.public = !obj.public;
    emit_toggle('public', !!obj.public);
}

function toggle_personal() {
    obj.personal = !obj.personal;
    emit_toggle('personal', !!obj.personal);
}

function toggle_professional() {
    obj.professional = !obj.professional;
    emit_toggle('professional', !!obj.professional);
}

function toggle_template() {
    obj.template = !obj.template;
    emit_toggle('template', !!obj.template);
}
</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}

    {#if !hide_alert}
        <button
            type="button"
            onclick={toggle_alert}
            class="btn btn-sm flex items-center gap-2 px-3 transition preset-tonal-secondary hover:preset-filled-secondary-500"
            title="Toggle alert status">
            <Siren size="1.2em" class={obj?.alert ? 'text-error-500' : 'opacity-40'} />
            <span class="whitespace-nowrap text-[10px] font-bold uppercase tracking-wider">Alert</span>
        </button>
    {/if}

    {#if !hide_private}
        <button
            type="button"
            onclick={toggle_private}
            class="btn btn-sm flex items-center gap-2 px-3 transition preset-tonal-secondary hover:preset-filled-secondary-500"
            title="Toggle private or encrypted visibility">
            <FingerprintPattern size="1.2em" class={obj?.private ? 'text-success-500' : 'opacity-40'} />
            <span class="whitespace-nowrap text-[10px] font-bold uppercase tracking-wider">Private or Encrypt</span>
        </button>
    {/if}

    {#if !hide_public}
        <button
            type="button"
            onclick={toggle_public}
            class="btn btn-sm flex items-center gap-2 px-3 transition preset-tonal-secondary hover:preset-filled-secondary-500"
            title="Toggle public visibility">
            <Globe size="1.2em" class={obj?.public ? 'text-success-500' : 'opacity-40'} />
            <span class="whitespace-nowrap text-[10px] font-bold uppercase tracking-wider">Public</span>
        </button>
    {/if}

    {#if !hide_personal}
        <button
            type="button"
            onclick={toggle_personal}
            class="btn btn-sm flex items-center gap-2 px-3 transition preset-tonal-secondary hover:preset-filled-secondary-500"
            title="Toggle personal scope">
            <BookHeart size="1.2em" class={obj?.personal ? 'text-success-500' : 'opacity-40'} />
            <span class="whitespace-nowrap text-[10px] font-bold uppercase tracking-wider">Personal</span>
        </button>
    {/if}

    {#if !hide_professional}
        <button
            type="button"
            onclick={toggle_professional}
            class="btn btn-sm flex items-center gap-2 px-3 transition preset-tonal-secondary hover:preset-filled-secondary-500"
            title="Toggle professional scope">
            <BriefcaseBusiness size="1.2em" class={obj?.professional ? 'text-success-500' : 'opacity-40'} />
            <span class="whitespace-nowrap text-[10px] font-bold uppercase tracking-wider">Professional</span>
        </button>
    {/if}

    {#if !hide_template && $ae_loc.edit_mode}
        <button
            type="button"
            onclick={toggle_template}
            class="btn btn-sm flex items-center gap-2 px-3 transition preset-tonal-secondary hover:preset-filled-secondary-500"
            title="Toggle template mode">
            <NotepadTextDashed size="1.2em" class={obj?.template ? 'text-success-500' : 'opacity-40'} />
            <span class="whitespace-nowrap text-[10px] font-bold uppercase tracking-wider">Template</span>
        </button>
    {/if}
</div>