Add hover selection to user list.

client/components/ChatUserList.vue

@@ -28,6 +28,7 @@
 				<template v-if="userSearchInput.length > 0">
 					<UsernameFiltered
 						v-for="user in users"
+						:onHover="hoverUser"
 						:key="user.original.nick"
 						:active="user.original === activeUser"
 						:user="user"/>
@@ -35,6 +36,7 @@
 				<template v-else>
 					<Username
 						v-for="user in users"
+						:onHover="hoverUser"
 						:key="user.nick"
 						:active="user === activeUser"
 						:user="user"/>
@@ -75,11 +77,10 @@ export default {
 		};
 	},
 	computed: {
-		groupedUsers() {
+		// filteredUsers is computed, to avoid unnecessary filtering
-			const groups = {};
+		// as it is shared between filtering and keybindings.
-
+		filteredUsers() {
-			if (this.userSearchInput) {
+			return fuzzy.filter(
-				const result = fuzzy.filter(
 				this.userSearchInput,
 				this.channel.users,
 				{
@@ -88,6 +89,12 @@ export default {
 					extract: (u) => u.nick,
 				}
 			);
+		},
+		groupedUsers() {
+			const groups = {};
+
+			if (this.userSearchInput) {
+				const result = this.filteredUsers;
 
 				for (const user of result) {
 					if (!groups[user.original.mode]) {
@@ -131,21 +138,15 @@ export default {
 			});
 			el.dispatchEvent(ev);
 		},
+		hoverUser(user) {
+			this.activeUser = user;
+		},
 		navigateUserList(direction) {
 			let users = this.channel.users;
 
-			// If a search is active, get the matching user objects
+			// Only using filteredUsers when we have to avoids filtering when it's not needed
-			// TODO: this could probably be cached via `computed`
-			//		 to avoid refiltering on each keypress
 			if (this.userSearchInput) {
-				const results = fuzzy.filter(
+				users = this.filteredUsers.map((result) => result.original);
-					this.userSearchInput,
-					this.channel.users,
-					{
-						extract: (u) => u.nick,
-					}
-				);
-				users = results.map((result) => result.original);
 			}
 
 			// Bail out if there's no users to select

client/components/Username.vue

@@ -2,7 +2,9 @@
 	<span
 		:class="['user', $options.filters.colorClass(user.nick), active ? 'active' : '']"
 		:data-name="user.nick"
-		role="button">{{ user.mode }}{{ user.nick }}</span>
+		role="button">{{ user.mode }}{{ user.nick }}
+		@mouseover="hover"
+	></span>
 </template>
 
 <script>
@@ -11,6 +13,12 @@ export default {
 	props: {
 		user: Object,
 		active: Boolean,
+		onHover: Function,
+	},
+	methods: {
+		hover() {
+			this.onHover ? this.onHover(this.user) : null;
+		},
 	},
 };
 </script>

client/components/UsernameFiltered.vue

@@ -2,6 +2,7 @@
 	<span
 		:class="['user', $options.filters.colorClass(user.original.nick), active ? 'active' : '']"
 		:data-name="user.original.nick"
+		@mouseover="hover"
 		role="button"
 		v-html="user.original.mode + user.string"/>
 </template>
@@ -12,6 +13,12 @@ export default {
 	props: {
 		user: Object,
 		active: Boolean,
+		onHover: Function,
+	},
+	methods: {
+		hover() {
+			this.onHover ? this.onHover(this.user.original) : null;
+		},
 	},
 };
 </script>

client/js/vue.js

@@ -20,11 +20,6 @@ Vue.filter("friendlysize", friendlysize);
 Vue.filter("colorClass", colorClass);
 Vue.filter("roundBadgeNumber", roundBadgeNumber);
 
-Vue.config.keyCodes = {
-	"page-up": 33,
-	"page-down": 34,
-};
-
 const vueApp = new Vue({
 	el: "#viewport",
 	data: {