Allow approving/rejecting users in admin UI

web/admin/components/shared/bsky/description.vue

@@ -5,14 +5,18 @@ import { newAgent } from "~/lib/auth";
 const props = defineProps<{ description: string }>();
 
 const segments = ref();
-onMounted(async () => {
+
+const updateDescription = async () => {
   const descriptionRichText = new RichText(
     { text: props.description },
     { cleanNewlines: true }
   );
   await descriptionRichText.detectFacets(newAgent());
   segments.value = [...descriptionRichText.segments()];
-});
+};
+
+onMounted(updateDescription);
+watch(() => props.description, updateDescription);
 </script>
 <template>
   <div>

web/admin/components/user-card.vue

@@ -1,13 +1,25 @@
 <script lang="ts" setup>
+import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
 import { newAgent } from "~/lib/auth";
 
-const props = defineProps<{ did: string }>();
+const props = defineProps<{ did: string; loading: boolean }>();
 defineEmits(["accept", "reject"]);
 
 const agent = newAgent();
-const { data } = await agent.getProfile({
-  actor: props.did,
-});
+const data = ref<ProfileViewDetailed>();
+const loadProfile = async () => {
+  const result = await agent.getProfile({
+    actor: props.did,
+  });
+  data.value = result.data;
+};
+
+watch(
+  () => props.did,
+  () => loadProfile()
+);
+
+await loadProfile();
 </script>
 
 <template>
@@ -49,12 +61,14 @@ const { data } = await agent.getProfile({
     <div class="flex gap-3 mt-5">
       <button
         class="px-3 py-2 bg-blue-400 dark:bg-blue-500 rounded-lg"
+        :disabled="loading"
         @click="$emit('accept')"
       >
         Accept
       </button>
       <button
         class="px-3 py-2 bg-red-500 dark:bg-red-600 rounded-lg"
+        :disabled="loading"
         @click="$emit('reject')"
       >
         Reject

web/admin/pages/index.vue

@@ -1,19 +1,48 @@
-<script setup>
-import { ActorStatus } from "../../proto/bff/v1/moderation_service_pb";
+<script lang="ts" setup>
+import {
+  Actor,
+  ActorStatus,
+  ApprovalQueueAction,
+} from "../../proto/bff/v1/moderation_service_pb";
 
 const api = await useAPI();
-const queue = await api.listActors({ filterStatus: ActorStatus.PENDING });
-const accept = () => {
-  alert("todo: accepting");
+const actor = ref<Actor>();
+const loading = ref(false);
+
+const nextActor = async () => {
+  const queue = await api.listActors({ filterStatus: ActorStatus.PENDING });
+  actor.value = queue.actors[0];
 };
-const reject = () => {
-  alert("todo: rejecting");
+
+const accept = () =>
+  process(actor.value?.did as string, ApprovalQueueAction.APPROVE);
+const reject = () =>
+  process(actor.value?.did as string, ApprovalQueueAction.REJECT);
+const process = async (did: string, action: ApprovalQueueAction) => {
+  loading.value = true;
+  await api.processApprovalQueue({
+    did,
+    action,
+  });
+  await nextActor();
+  loading.value = false;
 };
+
+await nextActor();
 </script>
 
 <template>
   <div class="max-w-[800px] py-4 px-3 mx-auto">
     <core-nav />
-    <user-card :did="queue.actors[0]?.did" @accept="accept" @reject="reject" />
+    <user-card
+      v-if="actor"
+      :did="actor.did"
+      :loading="loading"
+      @accept="accept"
+      @reject="reject"
+    />
+    <shared-card v-else>
+      No user is in the queue.
+    </shared-card>
   </div>
 </template>