Refactor & Usability improvements

src/client/app/common/hotkey.ts

@@ -51,7 +51,8 @@ export default {
 
 				const actions = getKeyMap(binding.value);
 
-				const reservedKeys = concat(actions.map(a => a.patterns.map(p => p.which)));
+				// flatten
+				const reservedKeys = concat(concat(actions.map(a => a.patterns.map(p => p.which))));
 
 				el.dataset.reservedKeys = reservedKeys.map(key => `'${key}'`).join(' ');
 

src/client/app/common/views/components/reaction-picker.vue

@@ -56,6 +56,12 @@ export default Vue.extend({
 			type: Boolean,
 			required: false,
 			default: false
+		},
+
+		animation: {
+			type: Boolean,
+			required: false,
+			default: true
 		}
 	},
 
@@ -70,9 +76,7 @@ export default Vue.extend({
 		keymap(): any {
 			return {
 				'esc': this.close,
-				'enter': this.choose,
-				'space': this.choose,
-				'plus': this.choose,
+				'enter|space|plus': this.choose,
 				'up': this.focusUp,
 				'right': this.focusRight,
 				'down': this.focusDown,
@@ -126,7 +130,7 @@ export default Vue.extend({
 			anime({
 				targets: this.$refs.backdrop,
 				opacity: 1,
-				duration: 100,
+				duration: this.animation ? 100 : 0,
 				easing: 'linear'
 			});
 
@@ -134,7 +138,7 @@ export default Vue.extend({
 				targets: this.$refs.popover,
 				opacity: 1,
 				scale: [0.5, 1],
-				duration: 500
+				duration: this.animation ? 500 : 0
 			});
 		});
 	},
@@ -164,7 +168,7 @@ export default Vue.extend({
 			anime({
 				targets: this.$refs.backdrop,
 				opacity: 0,
-				duration: 200,
+				duration: this.animation ? 200 : 0,
 				easing: 'linear'
 			});
 
@@ -173,7 +177,7 @@ export default Vue.extend({
 				targets: this.$refs.popover,
 				opacity: 0,
 				scale: 0.5,
-				duration: 200,
+				duration: this.animation ? 200 : 0,
 				easing: 'easeInBack',
 				complete: () => {
 					this.$emit('closed');

src/client/app/desktop/views/components/notes.note.vue

@@ -113,14 +113,11 @@ export default Vue.extend({
 	computed: {
 		keymap(): any {
 			return {
-				'r': this.reply,
-				'a': () => this.react(true),
-				'plus': () => this.react(true),
-				'n': this.renote,
-				'up': this.focusBefore,
-				'shift+tab': this.focusBefore,
-				'down': this.focusAfter,
-				'tab': this.focusAfter,
+				'r|left': this.reply,
+				'a|plus': () => this.react(true),
+				'n|right': this.renote,
+				'up|shift+tab': this.focusBefore,
+				'down|tab': this.focusAfter,
 			};
 		},
 
@@ -250,7 +247,8 @@ export default Vue.extend({
 			(this as any).os.new(MkReactionPicker, {
 				source: this.$refs.reactButton,
 				note: this.p,
-				showFocus: viaKeyboard
+				showFocus: viaKeyboard,
+				animation: !viaKeyboard
 			}).$once('closed', this.focus);
 		},