feat(loama): add inbox to view & remove access request responses

loama/src/components/inbox/AccessRequestMessage.vue

@@ -3,7 +3,7 @@
         <p><span class="prefix">From:</span> {{ message.actor }}</p>
         <p><span class="prefix">Target:</span> {{ message.target }}</p>
         <div>
-            <span class="prefix">Requested: </span>
+            <span class="prefix">Requested Permissions: </span>
             <p v-for="label in aclLabels" :key="label">{{ label }}</p>
         </div>
         <div class="actions">

loama/src/components/inbox/RequestInbox.vue

@@ -12,11 +12,12 @@
 import { activeController } from 'loama-controller';
 import AccessRequestMessage from './AccessRequestMessage.vue';
 import { PhArrowClockwise } from '@phosphor-icons/vue';
+import { ref } from 'vue';
 
-let messages = await activeController.AccessRequest().loadAccessRequests();
+let messages = ref(await activeController.AccessRequest().loadAccessRequests());
 
 const reloadMessages = async () => {
-    messages = await activeController.AccessRequest().loadAccessRequests();
+    messages.value = await activeController.AccessRequest().loadAccessRequests();
 }
 </script>
 <style scoped lang="scss">

loama/src/components/inbox/RequestResponseMessage.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="container">
+        <div><p class="prefix">Accepted:</p><PhCheckCircle v-if="message.isAccepted" weight="bold" /><PhXCircle v-else weight="bold" /></div>
+        <p><span class="prefix">To:</span> {{ message.target }}</p>
+        <div>
+            <span class="prefix">Requested Permissions: </span>
+            <p v-for="label in aclLabels" :key="label">{{ label }}</p>
+        </div>
+        <div class="actions">
+            <LoButton @click="confirmMessage">Confirm</LoButton>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { PhCheckCircle, PhXCircle } from '@phosphor-icons/vue';
+import { activeController, type RequestResponseMessage } from 'loama-controller';
+import { computed } from 'vue';
+import LoButton from '../LoButton.vue';
+
+const props = defineProps<{
+    message: RequestResponseMessage,
+}>();
+const emit = defineEmits<{
+    (e: "reload"): void,
+}>();
+
+const aclLabels = computed(() => props.message.permissions.map(p => aclToLabel[p] ?? p));
+const aclToLabel: Record<string, string> = {
+    "acl:Read": "Read",
+    "acl:Append": "Append",
+    "acl:Write": "Write",
+    "acl:Control": "Control",
+}
+
+const confirmMessage = async () => {
+    await activeController.AccessRequest().removeRequest(props.message.id);
+    emit("reload")
+}
+
+</script>
+<style lang="scss" scoped>
+.container {
+    padding: .5rem;
+    border: 1px solid var(--solid-purple);
+    border-radius: .5rem;
+    text-align: left;
+
+    &>div {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: .25rem;
+    }
+
+    &>p {
+        display: inline;
+    }
+}
+
+.actions {
+    float: right;
+}
+</style>

loama/src/components/inbox/ResponseInbox.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="header">
+        <h3>Request Responses</h3>
+        <PhArrowClockwise weight="bold" :size="32" @click="reloadMessages" />
+    </div>
+    <div class="request-list">
+        <RequestResponseMessage v-for="message in messages" :key="message.id" :message="message"
+            @reload="reloadMessages" />
+    </div>
+</template>
+<script setup lang="ts">
+import { activeController } from 'loama-controller';
+import { PhArrowClockwise } from '@phosphor-icons/vue';
+import RequestResponseMessage from './RequestResponseMessage.vue';
+import { ref } from 'vue';
+
+let messages = ref(await activeController.AccessRequest().loadRequestResponses());
+
+const reloadMessages = async () => {
+    messages.value = await activeController.AccessRequest().loadRequestResponses();
+}
+</script>
+<style scoped lang="scss">
+.request-list {
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+}
+
+.header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+
+    &>svg {
+        justify-self: end;
+        cursor: pointer;
+    }
+}
+</style>

loama/src/views/InboxView.vue

@@ -5,7 +5,7 @@
                 <RequestInbox />
             </div>
             <div>
-                <h3>Accepted request</h3>
+                <ResponseInbox />
             </div>
         </div>
         <template #fallback>
@@ -17,6 +17,7 @@
 <script lang="ts" setup>
 import FallbackExplorer from '@/components/explorer/FallbackExplorer.vue';
 import RequestInbox from '@/components/inbox/RequestInbox.vue';
+import ResponseInbox from '@/components/inbox/ResponseInbox.vue';
 
 </script>
 <style scoped lang="scss">