Add error message styling

web/admin/components/icon/cross-octagon.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-x-octagon"
+  >
+    <polygon
+      points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"
+    ></polygon>
+    <line x1="15" y1="9" x2="9" y2="15"></line>
+    <line x1="9" y1="9" x2="15" y2="15"></line>
+  </svg>
+</template>

web/admin/components/shared/card.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
-defineProps<{ noPadding?: boolean }>();
+defineProps<{ noPadding?: boolean; variant?: "error" }>();
 </script>
 
 <template>
   <div
     class="border border-gray-300 dark:border-gray-700 rounded-lg"
-    :class="{ 'px-4 py-3': !noPadding }"
+    :class="{
+      'px-4 py-3': !noPadding,
+      'bg-red-600 bg-opacity-50': variant === 'error',
+      'flex gap-2 items-center': variant,
+    }"
   >
+    <icon-cross-octagon v-if="variant === 'error'" />
     <slot />
   </div>
 </template>

web/admin/pages/audit-log.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const api = await useAPI();
 
-const error = ref<string>(null);
+const error = ref<string>();
 
 const { auditEvents } = await api.listAuditEvents({}).catch((err) => {
   error.value = err.rawMessage;
@@ -14,7 +14,7 @@ const { auditEvents } = await api.listAuditEvents({}).catch((err) => {
 
 <template>
   <div>
-    <shared-card v-if="error">{{ error }}</shared-card>
+    <shared-card v-if="error" variant="error">{{ error }}</shared-card>
     <div v-else>
       <h1 class="text-xl font-bold">Audit log</h1>
       <p class="text-gray-600 dark:text-gray-400">

web/admin/pages/index.vue

@@ -4,10 +4,10 @@ import { Actor, ActorStatus } from "../../proto/bff/v1/moderation_service_pb";
 const api = await useAPI();
 const pending = ref(0);
 const actor = ref<Actor>();
-const error = ref<string>(null);
+const error = ref<string>();
 
 const nextActor = async () => {
-  error.value = null;
+  error.value = "";
 
   const queue = await api
     .listActors({ filterStatus: ActorStatus.PENDING })
@@ -27,7 +27,7 @@ await nextActor();
 </script>
 
 <template>
-  <shared-card v-if="error">{{ error }}</shared-card>
+  <shared-card v-if="error" variant="error">{{ error }}</shared-card>
   <user-card
     v-else-if="actor"
     :did="actor.did"

web/admin/pages/users/[did].vue

@@ -5,7 +5,7 @@ import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/act
 
 const api = await useAPI();
 
-const error = ref<string>(null);
+const error = ref<string>();
 
 const subject = ref() as Ref<ProfileViewDetailed>;
 const agent = newAgent();
@@ -19,7 +19,7 @@ async function loadProfile() {
 const auditEvents: Ref<AuditEvent[]> = ref([]);
 
 async function loadEvents() {
-  error.value = null;
+  error.value = "";
 
   const response = await api
     .listAuditEvents({
@@ -35,15 +35,15 @@ async function loadEvents() {
 }
 
 async function comment(comment: string) {
-  error.value = null;
+  error.value = "";
 
   await api
     .createCommentAuditEvent({
       subjectDid: subject.value.did,
       comment,
     })
     .catch((err) => {
-      error.value = { rawMessage: err.rawMessage };
+      error.value = err.rawMessage;
     });
 
   if (!error.value) await loadEvents();
@@ -59,7 +59,7 @@ await refresh();
 
 <template>
   <div>
-    <shared-card v-if="error">{{ error }}</shared-card>
+    <shared-card v-if="error" variant="error">{{ error }}</shared-card>
     <div v-else>
       <user-card
         class="mb-5"