feat(lists): add error handling (#1593)

components/common/CommonErrorMessage.vue

@@ -1,22 +1,18 @@
 <script setup lang="ts">
-defineProps<{
-  describedBy: string
-}>()
-
-defineOptions({
-  inheritAttrs: false,
-})
+defineProps<{ describedBy: string }>()
 </script>
 
 <template>
   <div
     role="alert"
+    aria-live="polite"
     :aria-describedby="describedBy"
     flex="~ col"
     gap-1 text-sm
     pt-1 ps-2 pe-1 pb-2
     text-red-600 dark:text-red-400
     border="~ base rounded red-600 dark:red-400"
+    v-bind="$attrs"
   >
     <slot />
   </div>

components/list/ListEntry.vue

@@ -19,24 +19,28 @@ const client = useMastoClient()
 let isEditing = $ref<boolean>(false)
 let busy = $ref<boolean>(false)
 let deleteBusy = $ref<boolean>(false)
+let actionError = $ref<string | undefined>(undefined)
 
 const enableSaveButton = computed(() => list.title !== modelValue.value)
 
 const edit = ref()
+const deleteBtn = ref()
 const input = ref()
 
 const prepareEdit = () => {
   isEditing = true
+  actionError = undefined
   nextTick(() => {
-    input.value.focus()
+    input.value?.focus()
   })
 }
-const cancelEdit = (updateTitle = true) => {
+const cancelEdit = () => {
   isEditing = false
-  if (updateTitle)
-    modelValue.value = list.title
+  actionError = undefined
+  modelValue.value = list.title
+
   nextTick(() => {
-    edit.value.focus()
+    edit.value?.focus()
   })
 }
 async function finishEditing() {
@@ -44,14 +48,22 @@ async function finishEditing() {
     return
 
   busy = true
+  actionError = undefined
   await nextTick()
   try {
     const updateList = await client.v1.lists.update(list.id, {
       title: modelValue.value,
     })
-    cancelEdit(false)
+    cancelEdit()
     emit('listUpdated', updateList)
   }
+  catch (err) {
+    console.error(err)
+    actionError = (err as Error).message
+    nextTick(() => {
+      input.value?.focus()
+    })
+  }
   finally {
     busy = false
   }
@@ -61,6 +73,7 @@ async function removeList() {
     return
 
   deleteBusy = true
+  actionError = undefined
   await nextTick()
 
   const confirmDelete = await openConfirmDialog({
@@ -75,6 +88,13 @@ async function removeList() {
       await client.v1.lists.remove(list.id)
       emit('listRemoved', list.id)
     }
+    catch (err) {
+      console.error(err)
+      actionError = (err as Error).message
+      nextTick(() => {
+        deleteBtn.value?.focus()
+      })
+    }
     finally {
       deleteBusy = false
     }
@@ -83,11 +103,27 @@ async function removeList() {
     deleteBusy = false
   }
 }
-onBeforeUnmount(() => cancelEdit(false))
+
+function clearError() {
+  actionError = undefined
+  nextTick(() => {
+    if (isEditing)
+      input.value?.focus()
+    else
+      deleteBtn.value?.focus()
+  })
+}
+
+onDeactivated(cancelEdit)
 </script>
 
 <template>
-  <form hover:bg-active flex justify-between items-center gap-x-2 @submit.prevent="finishEditing">
+  <form
+    hover:bg-active flex justify-between items-center gap-x-2
+    :aria-describedby="actionError ? `action-list-error-${list.id}` : undefined"
+    :class="actionError ? 'border border-base border-rounded rounded-be-is-0 rounded-be-ie-0 border-b-unset border-$c-danger-active' : null"
+    @submit.prevent="finishEditing"
+  >
     <div
       v-if="isEditing"
       bg-base border="~ base" h10 m2 ps-1 pe-4 rounded-3 w-full flex="~ row"
@@ -98,7 +134,7 @@ onBeforeUnmount(() => cancelEdit(false))
           type="button"
           rounded-full text-sm p2 transition-colors
           hover:text-primary
-          @click="cancelEdit(true)"
+          @click="cancelEdit()"
         >
           <span block text-current i-ri:close-fill />
         </button>
@@ -114,7 +150,7 @@ onBeforeUnmount(() => cancelEdit(false))
         pb="1px"
         flex-1
         placeholder-text-secondary
-        @keydown.esc="cancelEdit(true)"
+        @keydown.esc="cancelEdit()"
       >
     </div>
     <NuxtLink v-else :to="`list/${list.id}`" block grow p4>
@@ -151,6 +187,7 @@ onBeforeUnmount(() => cancelEdit(false))
       </CommonTooltip>
       <CommonTooltip :content="$t('list.delete')" no-auto-focus>
         <button
+          ref="delete"
           type="button"
           text-sm p2 border-1 transition-colors
           border-dark hover:text-primary
@@ -166,4 +203,31 @@ onBeforeUnmount(() => cancelEdit(false))
       </CommonTooltip>
     </div>
   </form>
+  <CommonErrorMessage
+    v-if="actionError"
+    :id="`action-list-error-${list.id}`"
+    :described-by="`action-list-failed-${list.id}`"
+    class="rounded-bs-is-0 rounded-bs-ie-0 border-t-dashed m-b-2"
+  >
+    <header :id="`action-list-failed-${list.id}`" flex justify-between>
+      <div flex items-center gap-x-2 font-bold>
+        <div aria-hidden="true" i-ri:error-warning-fill />
+        <p>{{ $t(`list.${isEditing ? 'edit_error' : 'delete_error'}`) }}</p>
+      </div>
+      <CommonTooltip placement="bottom" :content="$t('list.clear_error')" no-auto-focus>
+        <button
+          flex rounded-4 p1 hover:bg-active cursor-pointer transition-100 :aria-label="$t('list.clear_error')"
+          @click="clearError"
+        >
+          <span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
+        </button>
+      </CommonTooltip>
+    </header>
+    <ol ps-2 sm:ps-1>
+      <li flex="~ col sm:row" gap-y-1 sm:gap-x-2>
+        <strong sr-only>{{ $t('list.error_prefix') }}</strong>
+        <span>{{ actionError }}</span>
+      </li>
+    </ol>
+  </CommonErrorMessage>
 </template>

components/publish/PublishWidget.vue

@@ -164,8 +164,8 @@ defineExpose({
           >
         </div>
 
-        <PublishErrMessage v-if="failedMessages.length > 0" described-by="publish-failed">
-          <head id="publish-failed" flex justify-between>
+        <CommonErrorMessage v-if="failedMessages.length > 0" described-by="publish-failed">
+          <header id="publish-failed" flex justify-between>
             <div flex items-center gap-x-2 font-bold>
               <div aria-hidden="true" i-ri:error-warning-fill />
               <p>{{ $t('state.publish_failed') }}</p>
@@ -178,14 +178,14 @@ defineExpose({
                 <span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
               </button>
             </CommonTooltip>
-          </head>
+          </header>
           <ol ps-2 sm:ps-1>
             <li v-for="(error, i) in failedMessages" :key="i" flex="~ col sm:row" gap-y-1 sm:gap-x-2>
               <strong>{{ i + 1 }}.</strong>
               <span>{{ error }}</span>
             </li>
           </ol>
-        </PublishErrMessage>
+        </CommonErrorMessage>
 
         <div relative flex-1 flex flex-col>
           <EditorContent
@@ -201,11 +201,11 @@ defineExpose({
           </div>
           {{ $t('state.uploading') }}
         </div>
-        <PublishErrMessage
+        <CommonErrorMessage
           v-else-if="failedAttachments.length > 0"
           :described-by="isExceedingAttachmentLimit ? 'upload-failed uploads-per-post' : 'upload-failed'"
         >
-          <head id="upload-failed" flex justify-between>
+          <header id="upload-failed" flex justify-between>
             <div flex items-center gap-x-2 font-bold>
               <div aria-hidden="true" i-ri:error-warning-fill />
               <p>{{ $t('state.upload_failed') }}</p>
@@ -218,7 +218,7 @@ defineExpose({
                 <span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
               </button>
             </CommonTooltip>
-          </head>
+          </header>
           <div v-if="isExceedingAttachmentLimit" id="uploads-per-post" ps-2 sm:ps-1 text-small>
             {{ $t('state.attachments_exceed_server_limit') }}
           </div>
@@ -228,7 +228,7 @@ defineExpose({
               <span>{{ error[0] }}</span>
             </li>
           </ol>
-        </PublishErrMessage>
+        </CommonErrorMessage>
 
         <div v-if="draft.attachments.length" flex="~ col gap-2" overflow-auto>
           <PublishAttachment

locales/en.json

@@ -183,9 +183,14 @@
   "list": {
     "add_account": "Add account to list",
     "cancel_edit": "Cancel editing",
+    "clear_error": "Clear error",
     "create": "Create",
     "delete": "Delete this list",
+    "delete_error": "There was an error while deleting the list",
     "edit": "Edit this list",
+    "edit_error": "There was an error while updating the list",
+    "error": "There was an error while creating the list",
+    "error_prefix": "Error: ",
     "list_title_placeholder": "List title",
     "modify_account": "Modify lists with account",
     "remove_account": "Remove account from list",

locales/es.json

@@ -183,9 +183,14 @@
   "list": {
     "add_account": "Agregar cuenta a la lista",
     "cancel_edit": "Cancelar edición",
+    "clear_error": "Limpiar error",
     "create": "Crear",
     "delete": "Eliminar esta lista",
+    "delete_error": "Se produjo un error eliminando la lista",
     "edit": "Ediar esta lista",
+    "edit_error": "Se produjo un error modificando la lista",
+    "error": "Se produjo un error creando la lista",
+    "error_prefix": "Error: ",
     "list_title_placeholder": "Título de la lista",
     "modify_account": "Modificar listas con cuenta",
     "remove_account": "Eliminar cuenta de la lista",

pages/[[server]]/lists.vue

@@ -16,6 +16,8 @@ useHeadFixed({
 })
 
 const paginatorRef = ref()
+const inputRef = ref()
+let actionError = $ref<string | undefined>(undefined)
 let busy = $ref<boolean>(false)
 const createText = ref('')
 const enableSubmit = computed(() => createText.value.length > 0)
@@ -25,24 +27,42 @@ async function createList() {
     return
 
   busy = true
+  actionError = undefined
   await nextTick()
   try {
     const newEntry = await client.v1.lists.create({
       title: createText.value,
     })
-    paginatorRef.value.createEntry(newEntry)
+    paginatorRef.value?.createEntry(newEntry)
     createText.value = ''
   }
+  catch (err) {
+    console.error(err)
+    actionError = (err as Error).message
+    nextTick(() => {
+      inputRef.value?.focus()
+    })
+  }
   finally {
     busy = false
   }
 }
+
+function clearError(focusBtn: boolean) {
+  actionError = undefined
+  focusBtn && nextTick(() => {
+    inputRef.value?.focus()
+  })
+}
+
 function updateEntry(list: mastodon.v1.List) {
-  paginatorRef.value.updateEntry(list)
+  paginatorRef.value?.updateEntry(list)
 }
 function removeEntry(id: string) {
-  paginatorRef.value.removeEntry(id)
+  paginatorRef.value?.removeEntry(id)
 }
+
+onDeactivated(() => clearError(false))
 </script>
 
 <template>
@@ -67,6 +87,8 @@ function removeEntry(id: string) {
             border="t base"
             p-4 w-full
             flex="~ wrap" relative gap-3
+            :aria-describedby="actionError ? 'create-list-error' : undefined"
+            :class="actionError ? 'border border-base border-rounded rounded-be-is-0 rounded-be-ie-0 border-b-unset border-$c-danger-active' : null"
             @submit.prevent="createList"
           >
             <div
@@ -74,6 +96,7 @@ function removeEntry(id: string) {
               items-center relative focus-within:box-shadow-outline gap-3
             >
               <input
+                ref="inputRef"
                 v-model="createText"
                 bg-transparent
                 outline="focus:none"
@@ -95,6 +118,33 @@ function removeEntry(id: string) {
               </button>
             </div>
           </form>
+          <CommonErrorMessage
+            v-if="actionError"
+            id="create-list-error"
+            described-by="create-list-failed"
+            class="rounded-bs-is-0 rounded-bs-ie-0 border-t-dashed m-b-2"
+          >
+            <header id="create-list-failed" flex justify-between>
+              <div flex items-center gap-x-2 font-bold>
+                <div aria-hidden="true" i-ri:error-warning-fill />
+                <p>{{ $t('list.error') }}</p>
+              </div>
+              <CommonTooltip placement="bottom" :content="$t('list.clear_error')" no-auto-focus>
+                <button
+                  flex rounded-4 p1 hover:bg-active cursor-pointer transition-100 :aria-label="$t('list.clear_error')"
+                  @click="clearError(true)"
+                >
+                  <span aria-hidden="true" w="1.75em" h="1.75em" i-ri:close-line />
+                </button>
+              </CommonTooltip>
+            </header>
+            <ol ps-2 sm:ps-1>
+              <li flex="~ col sm:row" gap-y-1 sm:gap-x-2>
+                <strong sr-only>{{ $t('list.error_prefix') }}</strong>
+                <span>{{ actionError }}</span>
+              </li>
+            </ol>
+          </CommonErrorMessage>
         </template>
       </CommonPaginator>
     </slot>