Add optional keyboard hotkeys

Author: KevSlashNull

web/admin/assets/css/main.css

@@ -48,3 +48,7 @@
 .meta-item {
   @apply inline-flex items-center gap-1;
 }
+
+kbd {
+  @apply border border-gray-300 dark:border-gray-700 rounded px-1 bg-gray-200 dark:bg-gray-800 shadow-sm dark:shadow-gray-800;
+}

web/admin/components/reject-reason-modal.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
+import { useKeyboardShurtcuts } from "~/lib/settings";
+import { onDocumentEvent, shouldHandleKeypress } from "~/lib/util";
+
 defineProps<{
   name: string;
 }>();
-defineEmits<{
+const $emit = defineEmits<{
   (event: "reject", reason: string): void;
   (event: "cancel"): void;
 }>();
@@ -33,6 +36,28 @@ function handleCheck(reason: string, value: boolean) {
     selectedReasons.value.delete(reason);
   }
 }
+
+onDocumentEvent("keydown", (e: KeyboardEvent) => {
+  if (!shouldHandleKeypress(e)) return;
+  if (e.key === "Enter") {
+    (document.querySelector("#reject") as HTMLButtonElement)?.click();
+    return;
+  }
+  if (e.key === "Escape") {
+    $emit("cancel");
+    return;
+  }
+  if (!e.key.match(/^[0-9]$/)) return;
+  const index = parseInt(e.key) - 1;
+  const reason = reasons[index];
+  console.log(reason);
+  if (index === reasons.length) {
+    showOther.value = true;
+    (document.querySelector("#other") as HTMLInputElement)?.focus();
+  } else if (reason) {
+    handleCheck(reason, !selectedReasons.value.has(reason));
+  }
+});
 </script>
 
 <template>
@@ -52,14 +77,16 @@ function handleCheck(reason: string, value: boolean) {
           <input
             :id="`reason-${idx}`"
             type="checkbox"
+            :checked="selectedReasons.has(reason)"
             @input="
               handleCheck(reason, ($event.target as HTMLInputElement).checked)
             "
           />
           <label
-            class="w-full h-full cursor-pointer py-1.5"
+            class="w-full h-full cursor-pointer py-1.5 flex items-center gap-1"
             :for="`reason-${idx}`"
           >
+            <kbd v-if="useKeyboardShurtcuts" class="text-xs">{{ idx + 1 }}</kbd>
             {{ reason }}
           </label>
         </li>
@@ -69,15 +96,19 @@ function handleCheck(reason: string, value: boolean) {
           <input id="reason-other" v-model="showOther" type="checkbox" />
           <label
             id="other-label"
-            class="w-full h-full cursor-pointer py-1.5"
+            class="w-full h-full cursor-pointer py-1.5 flex items-center gap-1"
             for="reason-other"
           >
+            <kbd v-if="useKeyboardShurtcuts" class="text-xs">{{
+              reasons.length + 1
+            }}</kbd>
             Other
           </label>
         </li>
         <li v-if="showOther">
           <input
             v-model="other"
+            id="other"
             type="text"
             aria-labelledby="other-label"
             placeholder="Type a reason..."
@@ -95,6 +126,7 @@ function handleCheck(reason: string, value: boolean) {
         </button>
 
         <button
+          id="reject"
           class="py-1 px-2 mr-1 bg-red-500 dark:bg-red-600 hover:bg-red-600 dark:hover:bg-red-700 disabled:bg-red-400 disabled:dark:bg-red-500 rounded-lg disabled:cursor-not-allowed"
           :disabled="!selectedReasonsText"
           @click="$emit('reject', selectedReasonsText)"

web/admin/components/user/queue-actions.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { showQueueActionConfirmation } from "~/lib/settings";
 import { ApprovalQueueAction } from "../../../proto/bff/v1/moderation_service_pb";
+import { onDocumentEvent, shouldHandleKeypress } from "~/lib/util";
 
 const showRejectModal = ref(false);
 const loading = ref(false);
@@ -87,6 +88,17 @@ function promptReject() {
   }
   showRejectModal.value = true;
 }
+
+onDocumentEvent("keydown", (e: KeyboardEvent) => {
+  if (!shouldHandleKeypress(e)) return;
+  if (e.key === "a") {
+    accept();
+  } else if (e.key === "r") {
+    showRejectModal.value = true;
+  } else if (e.key === "h") {
+    holdBack();
+  }
+});
 </script>
 
 <template>

web/admin/lib/settings.ts

@@ -1,5 +1,6 @@
 const SHOW_QUEUE_ACTION_CONFIRMATION = "bff-show-queue-action-confirmation";
 const BLUR_NSFW_POST_MEDIA = "bff-blur-nsfw-post-media";
+const USE_KEYBOARD_SHORTCUTS = "bff-use-keyboard-shortcuts";
 
 function defineLocalStorageRef(key: string): Ref<boolean> {
   const r = useState(key, () => localStorage.getItem(key) === "true");
@@ -18,3 +19,6 @@ export const showQueueActionConfirmation = defineLocalStorageRef(
   SHOW_QUEUE_ACTION_CONFIRMATION
 );
 export const blurNsfwPostMedia = defineLocalStorageRef(BLUR_NSFW_POST_MEDIA);
+export const useKeyboardShurtcuts = defineLocalStorageRef(
+  USE_KEYBOARD_SHORTCUTS
+);

web/admin/lib/util.ts

@@ -40,3 +40,26 @@ export function chunk<T>(a: Array<T>, max: number): Array<Array<T>> {
   }
   return result;
 }
+
+export function onDocumentEvent<K extends keyof DocumentEventMap>(
+  type: K,
+  listener: (this: Document, ev: DocumentEventMap[K]) => any,
+  options?: boolean | AddEventListenerOptions
+): void {
+  onMounted(() => {
+    document.addEventListener(type, listener, options);
+  });
+  onBeforeUnmount(() => {
+    document.removeEventListener(type, listener);
+  });
+}
+
+export function shouldHandleKeypress(e: KeyboardEvent): boolean {
+  return (
+    !e.metaKey &&
+    !e.altKey &&
+    !e.ctrlKey &&
+    !e.shiftKey &&
+    !document.querySelector(":focus")
+  );
+}

web/admin/pages/index.vue

@@ -63,8 +63,11 @@ function didToProfile(did: string): ProfileViewDetailed | undefined {
 function selectRandomActor() {
   if (!queues.value) return;
   const queue = queues.value[currentQueue.value];
-
-  randomActor.value = queue[Math.floor(Math.random() * queue.length)] as Actor;
+  randomActor.value = queue.toSorted((a, b) => {
+    const ageA = a.createdAt?.toDate().getTime() || 0;
+    const ageB = b.createdAt?.toDate().getTime() || 0
+    return ageA - ageB;
+  })[0] as Actor
 }
 
 async function rejectAllDeleted() {

web/admin/pages/settings.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { showQueueActionConfirmation, blurNsfwPostMedia } from "~/lib/settings";
+import {
+  showQueueActionConfirmation,
+  blurNsfwPostMedia,
+  useKeyboardShurtcuts,
+} from "~/lib/settings";
 import { logout } from "~/lib/auth";
 </script>
 
@@ -29,6 +33,17 @@ import { logout } from "~/lib/auth";
         >Blur NSFW post media (images/video).</label
       >
     </div>
+    <div class="flex gap-2 mb-4">
+      <input
+        id="use-keyboard-shortcuts"
+        v-model="useKeyboardShurtcuts"
+        type="checkbox"
+      />
+      <label for="buse-keyboard-shortcuts"
+        >Use keyboard shortcuts: <kbd>A</kbd> for approve, <kbd>R</kbd> for
+        reject, and <kbd>H</kbd> for hold back</label
+      >
+    </div>
 
     <button class="text-white bg-gray-700 px-2 py-1 rounded-lg" @click="logout">
       Logout