feat: add search field in list accounts view

locales/en.json

@@ -212,6 +212,7 @@
     "search": "Search"
   },
   "list": {
+    "add": "Add",
     "add_account": "Add account to list",
     "cancel_edit": "Cancel editing",
     "clear_error": "Clear error",
@@ -226,7 +227,8 @@
     "manage": "Manage lists",
     "modify_account": "Modify lists with account",
     "remove_account": "Remove account from list",
-    "save": "Save changes"
+    "save": "Save changes",
+    "search_following_placeholder": "Search among people you follow"
   },
   "magic_keys": {
     "dialog_header": "Keyboard shortcuts",

pages/[[server]]/list/[list]/index/accounts.vue

@@ -7,9 +7,49 @@ const params = useRoute().params
 const listId = computed(() => params.list as string)
 
 const paginator = useMastoClient().v1.lists.$select(listId.value).accounts.list()
+
+// TODO - these are placeholder vars -- need to rename &/or set correctly
+const actionError = false
+const createText = ref('')
+const inputRef = ref<HTMLInputElement>()
+function addAccount() {
+  // TODO: implement
+}
 </script>
 
 <template>
+  <!-- Search Accounts You Follow -->
+  <form
+    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="addAccount"
+  >
+    <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
+      ps-4
+    >
+      <div i-ri:search-2-line pointer-events-none text-secondary mt="1px" class="rtl-flip" />
+      <input
+        ref="inputRef"
+        v-model="createText"
+        bg-transparent
+        outline="focus:none"
+        ps-3
+        rounded-3
+        pb="1px"
+        h-full
+        w-full
+        placeholder-text-secondary
+        :placeholder="$t('list.search_following_placeholder')"
+        @keypress.enter="addAccount"
+      >
+    </div>
+  </form>
+
   <CommonPaginator :paginator="paginator">
     <template #default="{ item }">
       <ListAccount