feat: finish list CRUD (#1532)

Co-authored-by: userquin <userquin@gmail.com>
closes https://github.com/elk-zone/elk/issues/372

pages/[[server]]/lists.vue

@@ -1,12 +1,44 @@
 <script lang="ts" setup>
+import type { mastodon } from 'masto'
+
 const { t } = useI18n()
 
-const { client } = $(useMasto())
+const client = useMastoClient()
+
 const paginator = client.v1.lists.list()
 
 useHeadFixed({
   title: () => t('nav.lists'),
 })
+
+const paginatorRef = ref()
+let busy = $ref<boolean>(false)
+const createText = ref('')
+const enableSubmit = computed(() => createText.value.length > 0)
+
+async function createList() {
+  if (busy || !enableSubmit.value)
+    return
+
+  busy = true
+  await nextTick()
+  try {
+    const newEntry = await client.v1.lists.create({
+      title: createText.value,
+    })
+    paginatorRef.value.createEntry(newEntry)
+    createText.value = ''
+  }
+  finally {
+    busy = false
+  }
+}
+function updateEntry(list: mastodon.v1.List) {
+  paginatorRef.value.updateEntry(list)
+}
+function removeEntry(id: string) {
+  paginatorRef.value.removeEntry(id)
+}
 </script>
 
 <template>
@@ -18,11 +50,47 @@ useHeadFixed({
       </NuxtLink>
     </template>
     <slot>
-      <CommonPaginator :paginator="paginator">
+      <CommonPaginator ref="paginatorRef" :paginator="paginator">
         <template #default="{ item }">
-          <NuxtLink :to="`list/${item.id}`" block p4 hover:bg-active flex justify-between>
-            {{ item.title }}
-          </NuxtLink>
+          <ListEntry
+            :list="item"
+            @list-updated="updateEntry"
+            @list-removed="removeEntry"
+          />
+        </template>
+        <template #done>
+          <form
+            border="t base"
+            p-4 w-full
+            flex="~ wrap" relative gap-3
+            @submit.prevent="createList"
+          >
+            <div
+              bg-base border="~ base" flex-1 h10 ps-1 pe-4 rounded-2 w-full flex="~ row"
+              items-center relative focus-within:box-shadow-outline gap-3
+            >
+              <input
+                v-model="createText"
+                bg-transparent
+                outline="focus:none"
+                px-4
+                pb="1px"
+                flex-1
+                placeholder-text-secondary
+                :placeholder="$t('list.list_title_placeholder')"
+                @keypress.enter="createList"
+              >
+            </div>
+            <div flex="~ col" gap-y-4 gap-x-2 sm="~ justify-between flex-row">
+              <button flex="~ row" gap-x-2 items-center btn-solid :disabled="!enableSubmit || busy">
+                <span v-if="busy" aria-hidden="true" block animate animate-spin preserve-3d class="rtl-flip">
+                  <span block i-ri:loader-2-fill aria-hidden="true" />
+                </span>
+                <span v-else aria-hidden="true" block i-material-symbols:playlist-add-rounded class="rtl-flip" />
+                {{ $t('list.create') }}
+              </button>
+            </div>
+          </form>
         </template>
       </CommonPaginator>
     </slot>