Improve

src/components/AutoComplete.vue

@@ -35,11 +35,11 @@
 <script>
 'kiwi public';
 
-import _ from 'lodash';
+import * as Misc from '@/helpers/Misc';
 
 export default {
-    props: ['filter', 'buffer', 'items'],
-    data: function data() {
+    props: ['filter', 'buffer', 'items', 'itemsPerPage'],
+    data() {
         return {
             // items: [
             //     { text: 'anick1', type: 'user' },
@@ -52,10 +52,18 @@ export default {
         };
     },
     computed: {
+        itemLimits() {
+            const itemLimit = parseInt(this.itemsPerPage, 10) || 7;
+            const halfLimit = (itemLimit - 1) / 2;
+            return {
+                backward: Math.floor(halfLimit) || 1,
+                forward: Math.ceil(halfLimit) || 1,
+            };
+        },
         filteredItems() {
             let filterVal = (this.filter || '').toLowerCase();
 
-            return _(this.items).filter((item) => {
+            return this.items.filter((item) => {
                 let s = false;
                 if (item.text.toLowerCase().indexOf(filterVal) === 0) {
                     s = true;
@@ -68,15 +76,13 @@ export default {
                 });
 
                 return s;
-            })
-                .sort((a, b) => a.text.localeCompare(b.text))
-                .value();
+            }).sort(Misc.strCompare);
         },
         filteredAndLimitedItems() {
             return this.filteredItems.filter((item, itemIdx, items) => {
                 let numItems = items.length - 1;
-                let idxFrom = this.selected_idx - 3;
-                let idxTo = this.selected_idx + 3;
+                let idxFrom = this.selected_idx - this.itemLimits.backward;
+                let idxTo = this.selected_idx + this.itemLimits.forward;
                 let isInRange = false;
 
                 // Adjust the number of items before and after the selected item

src/components/Nicklist.vue

@@ -54,31 +54,12 @@
 'kiwi public';
 
 import Logger from '@/libs/Logger';
+import * as Misc from '@/helpers/Misc';
+
 import NicklistUser from './NicklistUser';
 
 let log = Logger.namespace('Nicklist');
 
-// This provides a better sort for numbered nicks but does not work on ios9
-let intlCollator = null;
-if (global.Intl) {
-    intlCollator = new Intl.Collator({}, { numeric: true });
-}
-
-// Hot function, so it's here for easier caching
-function strCompare(a, b) {
-    if (intlCollator) {
-        return intlCollator.compare(a, b);
-    }
-
-    if (a === b) {
-        return 0;
-    }
-
-    return a > b ?
-        1 :
-        -1;
-}
-
 export default {
     components: {
         NicklistUser,
@@ -155,7 +136,7 @@ export default {
                         }
                     }
 
-                    return strCompare(nickMap[a.nick], nickMap[b.nick]);
+                    return Misc.strCompare(nickMap[a.nick], nickMap[b.nick]);
                 }
 
                 // Compare via prefixes..
@@ -193,7 +174,7 @@ export default {
                 }
 
                 // Prefixes are the same, resort to comparing text
-                return strCompare(nickMap[a.nick], nickMap[b.nick]);
+                return Misc.strCompare(nickMap[a.nick], nickMap[b.nick]);
             });
         },
         useColouredNicks() {

src/components/SidebarAboutBuffer.vue

@@ -71,6 +71,7 @@
                     v-if="invitableUsers.length > 0"
                     ref="autocomplete"
                     class="kiwi-aboutbuffer-invite-auto-complete"
+                    items-per-page="5"
                     :items="invitableUsers"
                     :filter="inviteNick"
                     @selected="inviteSelected"

src/helpers/Misc.js

@@ -379,3 +379,23 @@ export function makePluginObject(pluginId, componentOrElement, args = {}) {
 
     return plugin;
 }
+
+// This provides a better sort for numbered nicks but does not work on ios9
+let intlCollator;
+if (global.Intl) {
+    intlCollator = new Intl.Collator({}, { numeric: true });
+}
+
+export function strCompare(a, b) {
+    if (intlCollator) {
+        return intlCollator.compare(a, b);
+    }
+
+    if (a === b) {
+        return 0;
+    }
+
+    return a > b ?
+        1 :
+        -1;
+}