Cleanup

src/components/ChannelBanlist.vue

@@ -1,9 +1,28 @@
 <template>
     <form class="u-form kiwi-channelbanlist" @submit.prevent="">
-        <a class="u-link" @click="updateBanlist">{{ $t('bans_refresh') }}</a>
+        <div v-if="areWeAnOp" class="kiwi-banlist-ban u-form">
+            <input
+                v-model="banMask"
+                type="text"
+                class="u-input"
+                placeholder="*!*@*"
+                @keydown="banKeyDown"
+            >
+            <a class="u-button u-button-secondary" @click="addBan()">
+                {{ $t('bans_add_ban') }}
+            </a>
+        </div>
+
+        <a
+            class="kiwi-banlist-refresh"
+            :class="{'u-link': !is_refreshing && !clickUpdateTimeout }"
+            @click="clickUpdateBanlist"
+        >
+            {{ $t('bans_refresh') }}
+        </a>
 
         <div
-            v-if="banlist.length > 0"
+            v-if="banList.length > 0"
             :class="{'kiwi-sidebar-settings-access-restricted': !areWeAnOp}"
             class="kiwi-sidebar-settings-access-table"
         >
@@ -12,12 +31,12 @@
             <div class="kiwi-sidebar-settings-access-table-header" />
             <div v-if="areWeAnOp" class="kiwi-sidebar-settings-access-table-header" />
 
-            <template v-for="ban in banlist">
+            <template v-for="ban in sortedBanList">
                 <div
                     :key="'mask' + ban.banned"
                     class="kiwi-sidebar-settings-access-mask"
                 >
-                    {{ ban.banned }}
+                    {{ displayMask(ban.banned) }}
                 </div>
                 <div
                     :key="'who' + ban.banned"
@@ -56,30 +75,86 @@
 <script>
 'kiwi public';
 
+import * as IrcdDiffs from '@/helpers/IrcdDiffs';
+import * as Misc from '@/helpers/Misc';
+
+const basicBanListSorter = (a, b) => {
+    if (a.banned_at === b.banned_at) {
+        return Misc.strCompare(a.banned, b.banned);
+    }
+
+    return b.banned_at - a.banned_at;
+};
+const getBanListSorter = (_extban) => {
+    if (!_extban) {
+        return basicBanListSorter;
+    }
+
+    const extbanColon = _extban + ':';
+    return (a, b) => {
+        const aAccount = a.banned.indexOf(extbanColon) === 0;
+        const bAccount = b.banned.indexOf(extbanColon) === 0;
+
+        if (aAccount && !bAccount) {
+            return -1;
+        }
+
+        if (!aAccount && bAccount) {
+            return 1;
+        }
+
+        return basicBanListSorter(a, b);
+    };
+};
+
 export default {
     props: ['buffer'],
     data() {
         return {
-            banlist: [],
+            banMask: '',
+            banList: [],
             is_refreshing: false,
+            clickUpdateTimeout: 0,
         };
     },
     computed: {
+        extban() {
+            return IrcdDiffs.extbanAccount(this.buffer.getNetwork());
+        },
         areWeAnOp() {
             return this.buffer.isUserAnOp(this.buffer.getNetwork().nick);
         },
+        sortedBanList() {
+            const sorter = getBanListSorter(this.extban);
+            return this.banList.slice().sort(sorter);
+        },
     },
     watch: {
         buffer() {
-            this.banlist = [];
+            this.banList = [];
             this.is_refreshing = false;
+            this.clickUpdateTimeout = 0;
             this.updateBanlist();
         },
     },
     created() {
         this.updateBanlist();
     },
     methods: {
+        displayMask(banMask) {
+            return banMask.replace(this.extban + ':', '');
+        },
+        clickUpdateBanlist() {
+            if (this.clickUpdateTimeout) {
+                return;
+            }
+
+            this.clickUpdateTimeout = setTimeout(() => {
+                this.clickUpdateTimeout = 0;
+            }, 4000);
+
+            this.updateBanlist();
+        },
         updateBanlist() {
             if (this.is_refreshing || this.buffer.getNetwork().state !== 'connected') {
                 return;
@@ -99,14 +174,31 @@ export default {
                     return;
                 }
 
-                this.banlist = event.bans;
+                this.banList = event.bans;
                 this.is_refreshing = false;
             });
         },
+        addBan() {
+            const mask = this.banMask.trim();
+            if (!mask) {
+                return;
+            }
+            const ircClient = this.buffer.getNetwork().ircClient;
+            ircClient.ban(this.buffer.name, mask);
+
+            this.banMask = '';
+            this.updateBanlist();
+        },
         removeBan(mask) {
             const channelName = this.buffer.name;
             this.buffer.getNetwork().ircClient.unban(channelName, mask);
-            this.banlist = this.banlist.filter((ban) => ban.banned !== mask);
+            this.banList = this.banList.filter((ban) => ban.banned !== mask);
+        },
+        banKeyDown(event) {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                this.addBan();
+            }
         },
     },
 };
@@ -119,4 +211,19 @@ export default {
     row-gap: 10px;
     margin: 10px 0;
 }
+
+.kiwi-banlist-refresh:not(.u-link) {
+    cursor: default;
+}
+
+.kiwi-banlist-ban {
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+
+    > input {
+        flex-grow: 1;
+        margin-right: 10px;
+    }
+}
 </style>

src/components/ChannelInfo.vue

@@ -117,9 +117,6 @@ export default {
         },
     },
     methods: {
-        updateBanList() {
-            this.buffer.getNetwork().ircClient.raw('MODE', this.buffer.name, '+b');
-        },
         setMode(mode, param) {
             this.buffer.getNetwork().ircClient.raw('MODE', this.buffer.name, mode, param);
         },