console/src/lib/layout/displaySettingsModal.svelte

<script lang="ts">
    import { Confirm, ViewToggle } from '$lib/components';
    import ColumnSelector from '$lib/components/columnSelector.svelte';
    import type { View } from '$lib/helpers/load';
    import type { Column } from '$lib/helpers/types';
    import { IconViewBoards } from '@appwrite.io/pink-icons-svelte';
    import { Button, Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
    import type { Writable } from 'svelte/store';

    let {
        show = $bindable(false),
        hideView = false,
        view = $bindable(),
        columns,
        hideColumns = false,
        isCustomTable = false
    }: {
        show?: boolean;
        hideView?: boolean;
        view?: View;
        columns?: Writable<Column[]>;
        hideColumns?: boolean;
        isCustomTable?: boolean;
    } = $props();
</script>

<Confirm title="Adjustments" bind:open={show} canDelete={false}>
    <Layout.Stack>
        {#if !hideView}
            <Layout.Stack gap="xs">
                <Typography.Text>Layout</Typography.Text>
                <ViewToggle bind:view />
            </Layout.Stack>
        {/if}
        {#if !hideColumns && $columns?.length}
            <Layout.Stack gap="xs">
                <Typography.Text>Columns</Typography.Text>
                <ColumnSelector ui="new" {columns} {isCustomTable}>
                    {#snippet children(toggle, selectedColumnsNumber)}
                        <Button.Button
                            size="s"
                            variant="secondary"
                            badge={selectedColumnsNumber.toString()}
                            on:click={toggle}>
                            Columns
                            <Icon slot="start" icon={IconViewBoards} />
                        </Button.Button>
                    {/snippet}
                </ColumnSelector>
            </Layout.Stack>
        {/if}
    </Layout.Stack>
</Confirm>