plugin-ignorelist.html

<template id="ignorelist">
    <div class="kiwi-ignorelist-container">
        <table v-if="ignoredUsers.length > 0" class="kiwi-ignorelist-table">
            <tr>
                <td colspan="3">
                    <h3>{{ $t('plugin-ignorelist:ignore_list') }}</h3>
                </td>
            </tr>
            <tr v-for="user in ignoredUsers" :key="user.nick">
                <td>{{ user.nick }}</td>
                <td>{{ user.username }}@{{ user.host }}</td>
                <td>
                    <a class="u-link" @click="user.ignore = false">Remove</a>
                </td>
            </tr>
        </table>
        <span v-else class="kiwi-ignorelist-empty">{{ $t('plugin-ignorelist:ignore_list_empty') }}</span>
    </div>
</template>

<script>
kiwi.plugin('ignorelist', function (kiwi, log) {
    const TextFormatting = kiwi.require('helpers/TextFormatting');
    const ignoreList = kiwi.Vue.extend({
        template: '#ignorelist',
        computed: {
            network() {
                return this.$state.getActiveNetwork();
            },
            ignoredUsers() {
                return _.filter(this.network.users, (u) => u.ignore);
            },
        },
    });

    kiwi.addTab('server', 'Ignore List', ignoreList);

    const translations = {
        name: 'plugin-ignorelist',
        langs: {
            'en-us': {
                ignore_list: 'Ignore List',
                ignore_list_empty: 'ignore list empty'
            },
            'es-es': {
                ignore_list: 'Lista de ignorados',
                ignore_list_empty: 'lista de ignorados vacia',
            },
        },
    };
    Object.entries(translations.langs).forEach(([lang, data]) => {
        kiwi.i18n.addResourceBundle(lang, translations.name, data);
    });
});
</script>

<style>
    .kiwi-ignorelist-container {
        max-width: 400px;
        width: auto;
        display: block;
        box-sizing: border-box;
        margin: 20px auto 20px auto;
    }

    .kiwi-ignorelist-container h3 {
        width: 100%;
        line-height: 45px;
        padding: 0 10px;
        box-sizing: border-box;
        text-align: center;
    }

    .kiwi-ignorelist-container table {
        width: 100%;
    }

    .kiwi-ignorelist-container table tr:last-of-type td {
        border-bottom: none;
    }

    .kiwi-ignorelist-table td:nth-child(1) {
        min-width: 250px;
        padding: 0 20px;
    }

    .kiwi-ignorelist-table td:nth-child(2) {
        text-align: left;
    }

    .kiwi-ignorelist-table td:nth-child(3) {
        text-align: center;
    }

    .kiwi-ignorelist-empty {
        padding-left: 20px;
    }

    /* ---- Ignore List ( IgnoreList.vue ) ---- */
    .kiwi-ignorelist-table {
        background-color: rgba(128, 128, 128, 0.2);
    }

    .kiwi-ignorelist-container h3 {
        background: var(--brand-primary);
        color: var(--brand-default-fg);
    }

    .kiwi-ignorelist-container table tr td {
        border-bottom: 1px solid var(--brand-midtone);
    }
</style>