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

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>