Improve client

src/client/components/form/suspense.vue

@@ -5,9 +5,9 @@
 			<MkLoading/>
 		</div>
 	</div>
-	<div v-else-if="resolved">
+	<FormGroup v-else-if="resolved" class="_formItem">
 		<slot :result="result"></slot>
-	</div>
+	</FormGroup>
 	<div class="_formItem" v-else>
 		<div class="_formPanel">
 			error!
@@ -20,8 +20,13 @@
 <script lang="ts">
 import { defineComponent, PropType, ref, watch } from 'vue';
 import './form.scss';
+import FormGroup from './group.vue';
 
 export default defineComponent({
+	components: {
+		FormGroup,
+	},
+
 	props: {
 		p: {
 			type: Function as PropType<() => Promise<any>>,

src/client/pages/instance-info.vue

@@ -14,6 +14,10 @@
 			</FormKeyValueView>
 		</FormGroup>
 
+		<FormTextarea readonly :value="instance.description">
+			<span>{{ $ts.description }}</span>
+		</FormTextarea>
+
 		<FormGroup>
 			<FormKeyValueView>
 				<template #key>{{ $ts.software }}</template>
@@ -99,6 +103,27 @@
 			<FormLink :to="`https://${host}/.well-known/host-meta.json`" external>host-meta.json</FormLink>
 			<FormLink :to="`https://${host}/.well-known/nodeinfo`" external>nodeinfo</FormLink>
 		</FormGroup>
+		<FormSuspense :p="dnsPromiseFactory" v-slot="{ result: dns }">
+			<FormGroup>
+				<template #label>DNS</template>
+				<FormKeyValueView v-for="record in dns.a" :key="record">
+					<template #key>A</template>
+					<template #value><span class="_monospace">{{ record }}</span></template>
+				</FormKeyValueView>
+				<FormKeyValueView v-for="record in dns.aaaa" :key="record">
+					<template #key>AAAA</template>
+					<template #value><span class="_monospace">{{ record }}</span></template>
+				</FormKeyValueView>
+				<FormKeyValueView v-for="record in dns.cname" :key="record">
+					<template #key>CNAME</template>
+					<template #value><span class="_monospace">{{ record }}</span></template>
+				</FormKeyValueView>
+				<FormKeyValueView v-for="record in dns.txt">
+					<template #key>TXT</template>
+					<template #value><span class="_monospace">{{ record[0] }}</span></template>
+				</FormKeyValueView>
+			</FormGroup>
+		</FormSuspense>
 	</FormGroup>
 </FormBase>
 </template>
@@ -167,6 +192,9 @@ export default defineComponent({
 				}],
 			},
 			instance: null,
+			dnsPromiseFactory: () => os.api('federation/dns', {
+				host: this.host
+			}),
 			now: null,
 			canvas: null,
 			chart: null,

src/client/pages/user-ap-info.vue

@@ -22,7 +22,7 @@
 				</FormKeyValueView>
 				<FormKeyValueView>
 					<template #key>Shared Inbox</template>
-					<template #value><span class="_monospace">{{ ap.sharedInbox }}</span></template>
+					<template #value><span class="_monospace">{{ ap.sharedInbox || ap.endpoints.sharedInbox }}</span></template>
 				</FormKeyValueView>
 				<FormKeyValueView>
 					<template #key>Outbox</template>

src/client/pages/user-info.vue

@@ -18,6 +18,13 @@
 			</FormKeyValueView>
 		</FormGroup>
 
+		<FormGroup>
+			<FormKeyValueView>
+				<template #key>{{ $ts.updatedAt }}</template>
+				<template #value><MkTime v-if="user.lastFetchedAt" mode="detail" :time="user.lastFetchedAt"/><span v-else>N/A</span></template>
+			</FormKeyValueView>
+		</FormGroup>
+
 		<FormObjectView tall :value="user">
 			<span>Raw</span>
 		</FormObjectView>