From 4df20e87323f4e56dfc045e51d4728e4d1426da6 Mon Sep 17 00:00:00 2001
From: Tatevik <tatevikg1@gmail.com>
Date: Tue, 24 Mar 2026 14:01:59 +0400
Subject: [PATCH 1/6] ListsController

---
 assets/router/index.js                        |   2 +
 assets/vue/api.js                             |   5 +-
 .../components/lists/AddSubscribersModal.vue  | 165 +++++++++
 .../vue/components/lists/CreateListModal.vue  | 181 ++++++++++
 assets/vue/components/lists/EditListModal.vue | 244 ++++++++++++++
 assets/vue/components/lists/ListDirectory.vue | 312 ++++++++++++++++++
 assets/vue/views/ListsView.vue                |  12 +
 package.json                                  |   2 +-
 src/Controller/ListsController.php            |  35 ++
 yarn.lock                                     |   8 +-
 10 files changed, 960 insertions(+), 6 deletions(-)
 create mode 100644 assets/vue/components/lists/AddSubscribersModal.vue
 create mode 100644 assets/vue/components/lists/CreateListModal.vue
 create mode 100644 assets/vue/components/lists/EditListModal.vue
 create mode 100644 assets/vue/components/lists/ListDirectory.vue
 create mode 100644 assets/vue/views/ListsView.vue
 create mode 100644 src/Controller/ListsController.php

diff --git a/assets/router/index.js b/assets/router/index.js
index 526b664..14d1842 100644
--- a/assets/router/index.js
+++ b/assets/router/index.js
@@ -1,12 +1,14 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import DashboardView from '../vue/views/DashboardView.vue'
 import SubscribersView from '../vue/views/SubscribersView.vue'
+import ListsView from '../vue/views/ListsView.vue'
 
 export const router = createRouter({
     history: createWebHistory(),
     routes: [
         { path: '/', name: 'dashboard', component: DashboardView, meta: { title: 'Dashboard' } },
         { path: '/subscribers', name: 'subscribers', component: SubscribersView, meta: { title: 'Subscribers' } },
+        { path: '/lists', name: 'lists', component: ListsView, meta: { title: 'Lists' } },
         { path: '/:pathMatch(.*)*', redirect: '/' },
     ],
 });
diff --git a/assets/vue/api.js b/assets/vue/api.js
index b61c721..3ef3307 100644
--- a/assets/vue/api.js
+++ b/assets/vue/api.js
@@ -1,4 +1,4 @@
-import { Client, SubscribersClient } from '@tatevikgr/rest-api-client';
+import {Client, ListClient, SubscribersClient, SubscriptionClient} from '@tatevikgr/rest-api-client';
 
 const appElement = document.getElementById('vue-app');
 const apiToken = appElement?.dataset.apiToken;
@@ -15,4 +15,7 @@ if (apiToken) {
 }
 
 export const subscribersClient = new SubscribersClient(client);
+export const listClient = new ListClient(client);
+export const subscriptionClient = new SubscriptionClient(client);
+
 export default client;
diff --git a/assets/vue/components/lists/AddSubscribersModal.vue b/assets/vue/components/lists/AddSubscribersModal.vue
new file mode 100644
index 0000000..8c26b0c
--- /dev/null
+++ b/assets/vue/components/lists/AddSubscribersModal.vue
@@ -0,0 +1,165 @@
+<template>
+  <div
+      v-if="isOpen"
+      class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0"
+      aria-labelledby="add-subscribers-modal-title"
+      role="dialog"
+      aria-modal="true"
+  >
+    <div
+        class="fixed inset-0 bg-slate-900/50 transition-opacity"
+        aria-hidden="true"
+        @click="close"
+    ></div>
+
+    <div
+        class="relative z-10 w-full overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:max-w-lg sm:w-full"
+    >
+      <div class="bg-white px-4 pt-5 pb-4 sm:p-6">
+        <div class="flex items-center justify-between">
+          <h3 id="add-subscribers-modal-title" class="text-lg font-medium leading-6 text-slate-900">
+            Add subscribers
+          </h3>
+
+          <button
+              type="button"
+              class="text-slate-400 hover:text-slate-500"
+              @click="close"
+          >
+            <BaseIcon name="close" class="w-5 h-5" />
+          </button>
+        </div>
+
+        <form class="mt-4 space-y-4" @submit.prevent="submitAddSubscribers">
+          <div>
+            <label for="subscriber-emails" class="block text-sm font-medium text-slate-700">
+              Email addresses
+            </label>
+            <textarea
+                id="subscriber-emails"
+                v-model.trim="addSubsForm.emails"
+                rows="8"
+                placeholder="john@example.com&#10;jane@example.com&#10;team@example.com"
+                class="mt-1 block w-full rounded-md border border-slate-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"
+            ></textarea>
+            <p class="mt-1 text-xs text-slate-500">
+              Enter one email per line, or separate multiple emails with commas.
+            </p>
+          </div>
+
+          <p v-if="addSubsError" class="text-sm text-red-600">
+            {{ addSubsError }}
+          </p>
+        </form>
+      </div>
+
+      <div class="bg-slate-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 gap-2">
+        <button
+            type="button"
+            :disabled="addingSubscribers || !addSubsForm.emails.trim()"
+            class="w-full inline-flex justify-center rounded-md border border-transparent bg-ext-wf1 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-ext-wf3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:w-auto sm:text-sm disabled:opacity-50"
+            @click="submitAddSubscribers"
+        >
+          {{ addingSubscribers ? 'Adding...' : 'Add subscribers' }}
+        </button>
+
+        <button
+            type="button"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 bg-white px-4 py-2 text-base font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
+            @click="close"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import BaseIcon from '../base/BaseIcon.vue'
+import { subscriptionClient } from '../../api'
+
+const props = defineProps({
+  isOpen: Boolean,
+  list: {
+    type: Object,
+    default: null
+  }
+})
+
+const emit = defineEmits(['close', 'added'])
+
+const addingSubscribers = ref(false)
+const addSubsError = ref('')
+const addSubsForm = ref({
+  emails: ''
+})
+
+const resetAddSubsForm = () => {
+  addSubsForm.value = {
+    emails: ''
+  }
+  addSubsError.value = ''
+}
+
+watch(
+    () => props.isOpen,
+    (isOpen) => {
+      if (isOpen) {
+        resetAddSubsForm()
+      }
+    }
+)
+
+const close = () => {
+  if (addingSubscribers.value) return
+  emit('close')
+}
+
+const parseEmails = (raw) => {
+  return raw
+      .split(/[\n,;]/)
+      .map(email => email.trim())
+      .filter(Boolean)
+}
+
+const isValidEmail = (email) => {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
+}
+
+const submitAddSubscribers = async () => {
+  if (addingSubscribers.value) return
+
+  if (!props.list?.id) {
+    addSubsError.value = 'No mailing list selected.'
+    return
+  }
+
+  const emails = parseEmails(addSubsForm.value.emails)
+
+  if (!emails.length) {
+    addSubsError.value = 'At least one email is required.'
+    return
+  }
+
+  const invalidEmails = emails.filter(email => !isValidEmail(email))
+  if (invalidEmails.length) {
+    addSubsError.value = `Invalid email(s): ${invalidEmails.join(', ')}`
+    return
+  }
+
+  addingSubscribers.value = true
+  addSubsError.value = ''
+
+  try {
+    await subscriptionClient.createSubscriptions(emails, props.list.id)
+    emit('added')
+    emit('close')
+  } catch (error) {
+    addSubsError.value = error?.message || 'Failed to add subscribers to the list.'
+  } finally {
+    addingSubscribers.value = false
+  }
+}
+</script>
diff --git a/assets/vue/components/lists/CreateListModal.vue b/assets/vue/components/lists/CreateListModal.vue
new file mode 100644
index 0000000..37399ca
--- /dev/null
+++ b/assets/vue/components/lists/CreateListModal.vue
@@ -0,0 +1,181 @@
+<template>
+  <div
+    v-if="isOpen"
+    class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0"
+    aria-labelledby="create-list-modal-title"
+    role="dialog"
+    aria-modal="true"
+  >
+    <div class="fixed inset-0 bg-slate-900/50 transition-opacity" aria-hidden="true" @click="close"></div>
+
+    <div class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full z-10">
+      <div class="bg-white px-4 pt-5 pb-4 sm:p-6">
+        <div class="flex justify-between items-center">
+          <h3 id="create-list-modal-title" class="text-lg leading-6 font-medium text-slate-900">
+            Create New List
+          </h3>
+          <button type="button" class="text-slate-400 hover:text-slate-500" @click="close">
+            <BaseIcon name="close" class="w-5 h-5" />
+          </button>
+        </div>
+
+        <form class="mt-4 space-y-4" @submit.prevent="submitCreateList">
+          <div>
+            <label for="list-name" class="block text-sm font-medium text-slate-700">Name</label>
+            <input
+              id="list-name"
+              v-model.trim="createForm.name"
+              type="text"
+              required
+              class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            >
+          </div>
+
+          <div class="flex items-center">
+            <input
+              id="list-public"
+              v-model="createForm.public"
+              type="checkbox"
+              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded"
+            >
+            <label for="list-public" class="ml-2 block text-sm text-slate-900">
+              Public
+            </label>
+          </div>
+
+          <div>
+            <label for="list-position" class="block text-sm font-medium text-slate-700">List Position (optional)</label>
+            <input
+              id="list-position"
+              v-model="createForm.listPosition"
+              type="number"
+              min="0"
+              step="1"
+              class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            >
+          </div>
+
+          <div>
+            <label for="list-description" class="block text-sm font-medium text-slate-700">Description (optional)</label>
+            <textarea
+              id="list-description"
+              v-model.trim="createForm.description"
+              rows="3"
+              class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            ></textarea>
+          </div>
+
+          <p v-if="createError" class="text-sm text-red-600">{{ createError }}</p>
+        </form>
+      </div>
+
+      <div class="bg-slate-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
+        <button
+          type="button"
+          :disabled="creatingList || !createForm.name.trim()"
+          class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-ext-wf1 text-base font-medium text-white hover:bg-ext-wf3 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm disabled:opacity-50"
+          @click="submitCreateList"
+        >
+          {{ creatingList ? 'Creating...' : 'Create' }}
+        </button>
+        <button
+          type="button"
+          class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm"
+          @click="close"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { Requests } from '@tatevikgr/rest-api-client'
+import BaseIcon from '../base/BaseIcon.vue'
+import { listClient } from '../../api'
+
+const props = defineProps({
+  isOpen: Boolean
+})
+
+const emit = defineEmits(['close', 'created'])
+
+const creatingList = ref(false)
+const createError = ref('')
+const createForm = ref({
+  name: '',
+  public: false,
+  listPosition: '',
+  description: ''
+})
+
+const resetCreateForm = () => {
+  createForm.value = {
+    name: '',
+    public: false,
+    listPosition: '',
+    description: ''
+  }
+  createError.value = ''
+}
+
+watch(
+  () => props.isOpen,
+  (isOpen) => {
+    if (isOpen) {
+      resetCreateForm()
+    }
+  }
+)
+
+const close = () => {
+  if (creatingList.value) {
+    return
+  }
+
+  emit('close')
+}
+
+const submitCreateList = async () => {
+  if (creatingList.value) {
+    return
+  }
+
+  const name = createForm.value.name.trim()
+  if (!name) {
+    createError.value = 'Name is required.'
+    return
+  }
+
+  const parsedPosition = createForm.value.listPosition === ''
+    ? null
+    : Number(createForm.value.listPosition)
+
+  if (parsedPosition !== null && (!Number.isInteger(parsedPosition) || parsedPosition < 0)) {
+    createError.value = 'List Position must be a whole number greater than or equal to 0.'
+    return
+  }
+
+  creatingList.value = true
+  createError.value = ''
+
+  try {
+    const request = new Requests.CreateSubscriberListRequest(
+      name,
+      !!createForm.value.public,
+      parsedPosition,
+      createForm.value.description.trim() || null
+    )
+
+    const createdList = await listClient.createList(request)
+    emit('created', createdList)
+    emit('close')
+  } catch (error) {
+    createError.value = error?.message || 'Failed to create list.'
+  } finally {
+    creatingList.value = false
+  }
+}
+</script>
diff --git a/assets/vue/components/lists/EditListModal.vue b/assets/vue/components/lists/EditListModal.vue
new file mode 100644
index 0000000..43668ef
--- /dev/null
+++ b/assets/vue/components/lists/EditListModal.vue
@@ -0,0 +1,244 @@
+<template>
+  <div
+      v-if="isOpen"
+      class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0"
+      aria-labelledby="edit-list-modal-title"
+      role="dialog"
+      aria-modal="true"
+  >
+    <div
+        class="fixed inset-0 bg-slate-900/50 transition-opacity"
+        aria-hidden="true"
+        @click="close"
+    ></div>
+
+    <div
+        class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full z-10"
+    >
+      <div class="bg-white px-4 pt-5 pb-4 sm:p-6">
+        <div class="flex justify-between items-center">
+          <h3 id="edit-list-modal-title" class="text-lg leading-6 font-medium text-slate-900">
+            Edit List
+          </h3>
+          <button
+              type="button"
+              class="text-slate-400 hover:text-slate-500"
+              @click="close"
+          >
+            <BaseIcon name="close" class="w-5 h-5" />
+          </button>
+        </div>
+
+        <form class="mt-4 space-y-4" @submit.prevent="submitEditList">
+          <div>
+            <label for="list-name" class="block text-sm font-medium text-slate-700">Name</label>
+            <input
+                id="list-name"
+                v-model.trim="editForm.name"
+                type="text"
+                required
+                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            >
+          </div>
+
+          <div class="flex items-center">
+            <input
+                id="list-public"
+                v-model="editForm.public"
+                type="checkbox"
+                class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded"
+            >
+            <label for="list-public" class="ml-2 block text-sm text-slate-900">
+              Public
+            </label>
+          </div>
+
+          <div>
+            <label for="list-position" class="block text-sm font-medium text-slate-700">
+              List Position (optional)
+            </label>
+            <input
+                id="list-position"
+                v-model="editForm.listPosition"
+                type="number"
+                min="0"
+                step="1"
+                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            >
+          </div>
+
+          <div>
+            <label for="list-description" class="block text-sm font-medium text-slate-700">
+              Description (optional)
+            </label>
+            <textarea
+                id="list-description"
+                v-model.trim="editForm.description"
+                rows="3"
+                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            ></textarea>
+          </div>
+
+          <div>
+            <label for="list-category" class="block text-sm font-medium text-slate-700">Category</label>
+            <input
+                id="list-category"
+                v-model.trim="editForm.category"
+                type="text"
+                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            >
+          </div>
+
+          <div>
+            <label for="list-rssFeed" class="block text-sm font-medium text-slate-700">RssFeed url</label>
+            <input
+                id="list-rss"
+                v-model.trim="editForm.rssFeed"
+                type="text"
+                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            >
+          </div>
+
+          <div>
+            <label for="list-subjectPrefix" class="block text-sm font-medium text-slate-700">Subject Prefix</label>
+            <input
+                id="list-prefix"
+                v-model.trim="editForm.subjectPrefix"
+                type="text"
+                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+            >
+          </div>
+
+          <p v-if="editError" class="text-sm text-red-600">{{ editError }}</p>
+        </form>
+      </div>
+
+      <div class="bg-slate-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
+        <button
+            type="button"
+            :disabled="updatingList || !editForm.name.trim()"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-ext-wf1 text-base font-medium text-white hover:bg-ext-wf3 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm disabled:opacity-50"
+            @click="submitEditList"
+        >
+          {{ updatingList ? 'Saving...' : 'Save' }}
+        </button>
+
+        <button
+            type="button"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm"
+            @click="close"
+        >
+          Cancel
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { Requests } from '@tatevikgr/rest-api-client'
+import BaseIcon from '../base/BaseIcon.vue'
+import { listClient } from '../../api'
+
+const props = defineProps({
+  isOpen: Boolean,
+  list: {
+    type: Object,
+    default: null
+  }
+})
+
+const emit = defineEmits(['close', 'updated'])
+
+const updatingList = ref(false)
+const editError = ref('')
+const editForm = ref({
+  name: '',
+  public: false,
+  listPosition: '',
+  description: '',
+  category: '',
+  rssFeed: '',
+  subjectPrefix: ''
+})
+
+const fillEditForm = () => {
+  editForm.value = {
+    name: props.list?.name || '',
+    public: !!props.list?.public,
+    listPosition:
+        props.list?.listPosition !== null && props.list?.list_position !== undefined
+            ? String(props.list.list_position)
+            : null,
+    description: props.list?.description || '',
+    category: props.list?.category || '',
+    rssFeed: props.list?.rss_feed || '',
+    subjectPrefix: props.list?.subject_prefix || ''
+  }
+  editError.value = ''
+}
+
+watch(
+    () => [props.isOpen, props.list],
+    ([isOpen]) => {
+      if (isOpen) {
+        fillEditForm()
+      }
+    },
+    { immediate: true }
+)
+
+const close = () => {
+  if (updatingList.value) {
+    return
+  }
+
+  emit('close')
+}
+
+const submitEditList = async () => {
+  if (updatingList.value || !props.list?.id) {
+    return
+  }
+
+  const name = editForm.value.name.trim()
+  if (!name) {
+    editError.value = 'Name is required.'
+    return
+  }
+
+  const parsedPosition =
+      editForm.value.listPosition === ''
+          ? null
+          : Number(editForm.value.listPosition)
+
+  if (parsedPosition !== null && (!Number.isInteger(parsedPosition) || parsedPosition < 0)) {
+    editError.value = 'List Position must be a whole number greater than or equal to 0.'
+    return
+  }
+
+  updatingList.value = true
+  editError.value = ''
+
+  try {
+    const request = new Requests.CreateSubscriberListRequest(
+      name,
+      !!editForm.value.public,
+      parsedPosition,
+      editForm.value.description.trim() || null,
+      editForm.value.subjectPrefix.trim() || null,
+      editForm.value.rssFeed.trim() || null,
+      editForm.value.category.trim() || null,
+    )
+
+    const updatedList = await listClient.updateList(props.list.id, request)
+    emit('updated', updatedList)
+    emit('close')
+  } catch (error) {
+    editError.value = error?.message || 'Failed to update list.'
+  } finally {
+    updatingList.value = false
+  }
+}
+</script>
diff --git a/assets/vue/components/lists/ListDirectory.vue b/assets/vue/components/lists/ListDirectory.vue
new file mode 100644
index 0000000..afbb69d
--- /dev/null
+++ b/assets/vue/components/lists/ListDirectory.vue
@@ -0,0 +1,312 @@
+<template>
+  <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+    <div class="p-4 sm:p-6 border-b border-slate-200 flex justify-between items-center">
+      <h2 class="text-xl font-bold text-slate-900">Mailing Lists</h2>
+
+      <button
+        type="button"
+        class="inline-flex shrink-0 items-center gap-2 whitespace-nowrap min-w-max px-4 py-2 bg-ext-wf1 text-white text-xs font-bold rounded-lg hover:bg-ext-wf3 transition-shadow shadow-sm shadow-indigo-500/20"
+        @click="openCreateModal"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M5 12h14"></path>
+          <path d="M12 5v14"></path>
+        </svg>
+        Add new list
+      </button>
+    </div>
+
+    <div class="overflow-x-auto">
+      <table class="w-full text-left text-sm hidden md:table">
+        <thead class="bg-slate-50 text-slate-500 font-medium">
+        <tr>
+          <th class="px-6 py-4">ID</th>
+          <th class="px-6 py-4">Name</th>
+          <th class="px-6 py-4">Public/Active</th>
+          <th class="px-6 py-4 text-right">Actions</th>
+        </tr>
+        </thead>
+        <tbody class="divide-y divide-slate-200">
+        <tr
+            v-for="list in mailingLists"
+            :key="list.id"
+            class="hover:bg-slate-50 transition-colors"
+        >
+          <td class="px-6 py-4 text-slate-600">{{ list.id }}</td>
+          <td class="px-6 py-4 font-medium text-slate-900">{{ list.name }}</td>
+          <td class="px-6 py-4">
+              <span
+                  class="px-2.5 py-0.5 rounded-full text-xs font-medium"
+                  :class="isPublic(list) ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-600'"
+              >
+                {{ isPublic(list) ? 'Yes' : 'No' }}
+              </span>
+          </td>
+          <td class="px-6 py-4">
+            <div class="flex flex-wrap justify-end gap-2">
+              <button
+                  type="button"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors"
+                  @click="handleDelete(list)"
+              >
+                <BaseIcon name="delete" class="w-3.5 h-3.5" />
+                Delete
+              </button>
+
+              <button
+                  type="button"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-emerald-200 text-emerald-700 hover:bg-emerald-50 transition-colors"
+                  @click="handleAddSubscriber(list)"
+              >
+                <BaseIcon name="addUser" class="w-3.5 h-3.5" />
+                Add Subscribers
+              </button>
+
+              <button
+                  type="button"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                  @click="handleEdit(list)"
+              >
+                <BaseIcon name="edit" class="w-3.5 h-3.5" />
+                Edit
+              </button>
+
+              <button
+                  type="button"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-blue-200 text-blue-700 hover:bg-blue-50 transition-colors"
+                  @click="handleStartCampaign(list)"
+              >
+                <BaseIcon name="plane" class="w-3.5 h-3.5" />
+                Start Campaign
+              </button>
+
+              <button
+                  type="button"
+                  class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                  @click="handleViewMembers(list)"
+              >
+                <BaseIcon name="eye" class="w-3.5 h-3.5" />
+                View Members
+              </button>
+            </div>
+          </td>
+        </tr>
+
+        <tr v-if="mailingLists.length === 0">
+          <td colspan="4" class="px-6 py-8 text-center text-slate-500">
+            No mailing lists found.
+          </td>
+        </tr>
+        </tbody>
+      </table>
+
+      <div class="block md:hidden divide-y divide-slate-100">
+        <div
+            v-for="list in mailingLists"
+            :key="`mobile-${list.id}`"
+            class="p-4 space-y-3"
+        >
+          <div class="flex items-start justify-between gap-3">
+            <div>
+              <p class="text-xs uppercase tracking-wide text-slate-500">#{{ list.id }}</p>
+              <p class="font-semibold text-slate-900">{{ list.name }}</p>
+            </div>
+
+            <span
+                class="px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap"
+                :class="isPublic(list) ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-600'"
+            >
+              {{ isPublic(list) ? 'Public' : 'Private' }}
+            </span>
+          </div>
+
+          <div class="grid grid-cols-2 gap-2">
+            <button
+                type="button"
+                class="px-2.5 py-2 text-xs font-medium rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors"
+                @click="handleDelete(list)"
+            >
+              Delete
+            </button>
+
+            <button
+                type="button"
+                class="px-2.5 py-2 text-xs font-medium rounded-md border border-emerald-200 text-emerald-700 hover:bg-emerald-50 transition-colors"
+                @click="handleAddSubscriber(list)"
+            >
+              Add Subscriber
+            </button>
+
+            <button
+                type="button"
+                class="px-2.5 py-2 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                @click="handleEdit(list)"
+            >
+              Edit
+            </button>
+
+            <button
+                type="button"
+                class="px-2.5 py-2 text-xs font-medium rounded-md border border-blue-200 text-blue-700 hover:bg-blue-50 transition-colors"
+                @click="handleStartCampaign(list)"
+            >
+              Start Campaign
+            </button>
+
+            <button
+                type="button"
+                class="col-span-2 px-2.5 py-2 text-xs font-medium rounded-md border border-slate-200 text-slate-700 hover:bg-slate-50 transition-colors"
+                @click="handleViewMembers(list)"
+            >
+              View Members
+            </button>
+          </div>
+        </div>
+
+        <div
+            v-if="mailingLists.length === 0"
+            class="px-4 py-8 text-center text-slate-500 text-sm"
+        >
+          No mailing lists found.
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <CreateListModal
+      :is-open="isCreateModalOpen"
+      @close="closeCreateModal"
+      @created="handleListCreated"
+  />
+
+  <EditListModal
+      :is-open="isEditModalOpen"
+      :list="selectedList"
+      @close="closeEditModal"
+      @updated="handleListUpdated"
+  />
+
+  <AddSubscribersModal
+      :is-open="isAddSubscribersModalOpen"
+      :list="selectedList"
+      @close="closeAddSubscribersModal"
+      @added="handleSubscribersAdded"
+  />
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import BaseIcon from '../base/BaseIcon.vue'
+import CreateListModal from './CreateListModal.vue'
+import EditListModal from './EditListModal.vue'
+import AddSubscribersModal from './AddSubscribersModal.vue'
+
+import { listClient } from '../../api'
+
+const mailingLists = ref([])
+const isCreateModalOpen = ref(false)
+
+const selectedList = ref(null)
+const isEditModalOpen = ref(false)
+const isAddSubscribersModalOpen = ref(false)
+
+const fetchMailingLists = async () => {
+  const url = new URL('/lists', window.location.origin)
+
+  try {
+    const response = await fetch(url, {
+      headers: {
+        Accept: 'application/json',
+        'X-Requested-With': 'XMLHttpRequest'
+      }
+    })
+
+    if (response.status === 401) {
+      const data = await response.json()
+      window.location.href = data.redirect
+      return
+    }
+
+    const data = await response.json()
+    mailingLists.value = Array.isArray(data?.items) ? data.items : []
+  } catch (error) {
+    console.error('Failed to fetch mailing lists:', error)
+    mailingLists.value = []
+  }
+}
+
+onMounted(() => {
+  fetchMailingLists()
+})
+
+const emit = defineEmits([
+  'delete',
+  'add-subscriber',
+  'edit',
+  'start-campaign',
+  'view-members'
+])
+
+const handleDelete = async (list) => {
+  const confirmed = window.confirm(
+      `Delete mailing list "${list.name}"?\n\nThis action cannot be undone.`
+  )
+
+  if (!confirmed) return
+
+  try {
+    await listClient.deleteList(list.id)
+    await fetchMailingLists()
+  } catch (e) {
+    console.error('Delete failed', e)
+  }
+}
+
+const handleAddSubscriber = (list) => {
+  selectedList.value = list
+  isAddSubscribersModalOpen.value = true
+  emit('add-subscriber', list)
+}
+
+const closeAddSubscribersModal = () => {
+  isAddSubscribersModalOpen.value = false
+  selectedList.value = null
+}
+
+const handleSubscribersAdded = async () => {
+  await fetchMailingLists()
+}
+
+const handleEdit = (list) => {
+  selectedList.value = list
+  isEditModalOpen.value = true
+  emit('edit', list)
+}
+
+const closeEditModal = () => {
+  isEditModalOpen.value = false
+  selectedList.value = null
+}
+
+const handleListUpdated = async () => {
+  await fetchMailingLists()
+}
+
+const handleStartCampaign = (list) => emit('start-campaign', list)
+const handleViewMembers = (list) => emit('view-members', list)
+
+const isPublic = (list) =>
+    list?.public === true || list?.public === 1 || list?.public === '1'
+
+const openCreateModal = () => {
+  isCreateModalOpen.value = true
+}
+
+const closeCreateModal = () => {
+  isCreateModalOpen.value = false
+}
+
+const handleListCreated = async () => {
+  await fetchMailingLists()
+}
+</script>
diff --git a/assets/vue/views/ListsView.vue b/assets/vue/views/ListsView.vue
new file mode 100644
index 0000000..dd66bc4
--- /dev/null
+++ b/assets/vue/views/ListsView.vue
@@ -0,0 +1,12 @@
+<template>
+  <AdminLayout>
+    <div class="space-y-6 animate-in fade-in duration-300">
+      <ListDirectory />
+    </div>
+  </AdminLayout>
+</template>
+
+<script setup>
+import AdminLayout from '../layouts/AdminLayout.vue'
+import ListDirectory from '../components/lists/ListDirectory.vue'
+</script>
diff --git a/package.json b/package.json
index 7b5b04a..58b4d76 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "webpack-notifier": "^1.15.0"
   },
   "dependencies": {
-    "@tatevikgr/rest-api-client": "^1.0.2",
+    "@tatevikgr/rest-api-client": "^1.2.0",
     "apexcharts": "^5.10.4",
     "vue": "^3.5.16",
     "vue-router": "4",
diff --git a/src/Controller/ListsController.php b/src/Controller/ListsController.php
new file mode 100644
index 0000000..783efa9
--- /dev/null
+++ b/src/Controller/ListsController.php
@@ -0,0 +1,35 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PhpList\WebFrontend\Controller;
+
+use PhpList\RestApiClient\Endpoint\ListClient;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+#[Route('/lists', name: 'list_')]
+class ListsController extends AbstractController
+{
+    public function __construct(private readonly ListClient $listClient)
+    {
+    }
+
+    #[Route('/', name: 'list', methods: ['GET'])]
+    public function index(Request $request): JsonResponse|Response
+    {
+        if (! $request->isXmlHttpRequest() && $request->headers->get('Accept') !== 'application/json') {
+            return $this->render('spa.html.twig', [
+                'page' => 'Lists',
+                'api_token' => $request->getSession()->get('auth_token'),
+                'api_base_url' => $this->getParameter('api_base_url'),
+            ]);
+        }
+        $initialData = $this->listClient->getLists();
+
+        return $this->json($initialData);
+    }
+}
diff --git a/yarn.lock b/yarn.lock
index c3bd267..edab6a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1089,10 +1089,10 @@
     postcss "^8.5.6"
     tailwindcss "4.2.1"
 
-"@tatevikgr/rest-api-client@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@tatevikgr/rest-api-client/-/rest-api-client-1.0.2.tgz#d78c28a35a037fb3bfdf3ebe6d3e46163498be89"
-  integrity sha512-b/pu0LEt/p3TTDmsDIAWU95rb60weF7wGK1iuYOd+BNPCS9sineADQQ90z83C+vviU+DoEGSUqa3Uhr/jJwJLw==
+"@tatevikgr/rest-api-client@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@tatevikgr/rest-api-client/-/rest-api-client-1.2.0.tgz#bca4e74d8e726da578a290a1cace5145aeb6d22b"
+  integrity sha512-ScYe3PY11iSnplaF0mKuyK4B6nzA6GT2yA4rMyAvezWxAjv2Znn8kbqzbGnDE+jMvhRo3FcutKFnVtB5cr698g==
   dependencies:
     axios "^1.6.0"
 

From dae2f1a38fb0acee9387dfcb5ebb67e6522a66bd Mon Sep 17 00:00:00 2001
From: Tatevik <tatevikg1@gmail.com>
Date: Wed, 25 Mar 2026 11:29:47 +0400
Subject: [PATCH 2/6] Fix edit position parsing and validation

---
 assets/vue/components/lists/CreateListModal.vue |  4 +---
 assets/vue/components/lists/EditListModal.vue   | 10 ++++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/assets/vue/components/lists/CreateListModal.vue b/assets/vue/components/lists/CreateListModal.vue
index 37399ca..eaf3b06 100644
--- a/assets/vue/components/lists/CreateListModal.vue
+++ b/assets/vue/components/lists/CreateListModal.vue
@@ -149,9 +149,7 @@ const submitCreateList = async () => {
     return
   }
 
-  const parsedPosition = createForm.value.listPosition === ''
-    ? null
-    : Number(createForm.value.listPosition)
+  const parsedPosition = createForm.value.listPosition === '' ? null : Number(createForm.value.listPosition)
 
   if (parsedPosition !== null && (!Number.isInteger(parsedPosition) || parsedPosition < 0)) {
     createError.value = 'List Position must be a whole number greater than or equal to 0.'
diff --git a/assets/vue/components/lists/EditListModal.vue b/assets/vue/components/lists/EditListModal.vue
index 43668ef..640da9d 100644
--- a/assets/vue/components/lists/EditListModal.vue
+++ b/assets/vue/components/lists/EditListModal.vue
@@ -207,11 +207,13 @@ const submitEditList = async () => {
     editError.value = 'Name is required.'
     return
   }
+  const rawPosition = editForm.value.listPosition
 
-  const parsedPosition =
-      editForm.value.listPosition === ''
-          ? null
-          : Number(editForm.value.listPosition)
+  let parsedPosition = null
+
+  if (rawPosition != null && String(rawPosition).trim() !== '' && String(rawPosition).trim().toLowerCase() !== 'null') {
+    parsedPosition = Number(rawPosition)
+  }
 
   if (parsedPosition !== null && (!Number.isInteger(parsedPosition) || parsedPosition < 0)) {
     editError.value = 'List Position must be a whole number greater than or equal to 0.'

From 10480a97aa4773abbe75b8c863ad1908ef018f78 Mon Sep 17 00:00:00 2001
From: Tatevik <tatevikg1@gmail.com>
Date: Wed, 25 Mar 2026 11:44:57 +0400
Subject: [PATCH 3/6] List subscribers view component

---
 assets/router/index.js                        |   2 +
 assets/vue/components/lists/ListDirectory.vue |  16 +-
 assets/vue/views/ListSubscribersView.vue      | 535 ++++++++++++++++++
 src/Controller/ListsController.php            |  10 +
 4 files changed, 560 insertions(+), 3 deletions(-)
 create mode 100644 assets/vue/views/ListSubscribersView.vue

diff --git a/assets/router/index.js b/assets/router/index.js
index 14d1842..231642c 100644
--- a/assets/router/index.js
+++ b/assets/router/index.js
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router';
 import DashboardView from '../vue/views/DashboardView.vue'
 import SubscribersView from '../vue/views/SubscribersView.vue'
 import ListsView from '../vue/views/ListsView.vue'
+import ListSubscribersView from '../vue/views/ListSubscribersView.vue'
 
 export const router = createRouter({
     history: createWebHistory(),
@@ -9,6 +10,7 @@ export const router = createRouter({
         { path: '/', name: 'dashboard', component: DashboardView, meta: { title: 'Dashboard' } },
         { path: '/subscribers', name: 'subscribers', component: SubscribersView, meta: { title: 'Subscribers' } },
         { path: '/lists', name: 'lists', component: ListsView, meta: { title: 'Lists' } },
+        { path: '/lists/:listId/subscribers', name: 'list-subscribers', component: ListSubscribersView, meta: { title: 'List Subscribers' } },
         { path: '/:pathMatch(.*)*', redirect: '/' },
     ],
 });
diff --git a/assets/vue/components/lists/ListDirectory.vue b/assets/vue/components/lists/ListDirectory.vue
index afbb69d..3d55efb 100644
--- a/assets/vue/components/lists/ListDirectory.vue
+++ b/assets/vue/components/lists/ListDirectory.vue
@@ -196,6 +196,7 @@
 
 <script setup>
 import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
 import BaseIcon from '../base/BaseIcon.vue'
 import CreateListModal from './CreateListModal.vue'
 import EditListModal from './EditListModal.vue'
@@ -203,6 +204,8 @@ import AddSubscribersModal from './AddSubscribersModal.vue'
 
 import { listClient } from '../../api'
 
+const router = useRouter()
+
 const mailingLists = ref([])
 const isCreateModalOpen = ref(false)
 
@@ -243,8 +246,7 @@ const emit = defineEmits([
   'delete',
   'add-subscriber',
   'edit',
-  'start-campaign',
-  'view-members'
+  'start-campaign'
 ])
 
 const handleDelete = async (list) => {
@@ -293,7 +295,15 @@ const handleListUpdated = async () => {
 }
 
 const handleStartCampaign = (list) => emit('start-campaign', list)
-const handleViewMembers = (list) => emit('view-members', list)
+const handleViewMembers = (list) => {
+  if (!list?.id) return
+
+  router.push({
+    name: 'list-subscribers',
+    params: { listId: list.id },
+    query: list.name ? { listName: list.name } : {}
+  })
+}
 
 const isPublic = (list) =>
     list?.public === true || list?.public === 1 || list?.public === '1'
diff --git a/assets/vue/views/ListSubscribersView.vue b/assets/vue/views/ListSubscribersView.vue
new file mode 100644
index 0000000..94fe499
--- /dev/null
+++ b/assets/vue/views/ListSubscribersView.vue
@@ -0,0 +1,535 @@
+<template>
+  <AdminLayout>
+    <div class="space-y-6 animate-in fade-in duration-300">
+      <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-4 sm:p-6">
+        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+          <div>
+            <p class="text-xs uppercase tracking-wide text-slate-500">Mailing List</p>
+            <h2 class="text-xl font-bold text-slate-900">
+              {{ listName || `List #${listId}` }}
+            </h2>
+          </div>
+
+          <RouterLink
+            to="/lists"
+            class="inline-flex items-center gap-2 px-3 py-2 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50"
+          >
+            Back to Lists
+          </RouterLink>
+        </div>
+      </div>
+
+      <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+        <div class="p-4 sm:p-6 border-b border-slate-200 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+          <h3 class="text-lg font-semibold text-slate-900">Subscribers</h3>
+          <div class="flex flex-col sm:flex-row gap-2 sm:items-center">
+            <label class="text-sm text-slate-600">Status</label>
+            <select
+              v-model="statusFilter"
+              class="px-3 py-2 text-sm border border-slate-200 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 outline-none"
+            >
+              <option value="all">All</option>
+              <option value="confirmed">Confirmed</option>
+              <option value="unconfirmed">Unconfirmed</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="p-4 sm:p-6 border-b border-slate-200 bg-slate-50/50">
+          <div class="flex flex-col xl:flex-row xl:items-center gap-3">
+            <div class="flex flex-wrap items-center gap-2">
+              <span class="text-sm text-slate-600">Selected: {{ selectedSubscribers.length }}</span>
+              <button
+                type="button"
+                class="px-3 py-2 text-xs font-medium rounded-lg border border-red-200 text-red-700 hover:bg-red-50 disabled:opacity-50"
+                :disabled="!hasSelection || actionLoading"
+                @click="deleteSelectedSubscribers"
+              >
+                Delete Selected
+              </button>
+            </div>
+
+            <div class="flex flex-col sm:flex-row sm:items-center gap-2 xl:ml-auto">
+              <select
+                v-model="selectedTargetListId"
+                class="px-3 py-2 text-sm border border-slate-200 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 outline-none"
+                :disabled="actionLoading"
+              >
+                <option value="">Select target list</option>
+                <option
+                  v-for="list in availableLists"
+                  :key="list.id"
+                  :value="String(list.id)"
+                >
+                  {{ list.name || `List #${list.id}` }}
+                </option>
+              </select>
+
+              <button
+                type="button"
+                class="px-3 py-2 text-xs font-medium rounded-lg border border-blue-200 text-blue-700 hover:bg-blue-50 disabled:opacity-50"
+                :disabled="!hasSelection || !selectedTargetListId || actionLoading"
+                @click="copySelectedSubscribers"
+              >
+                Copy Selected
+              </button>
+
+              <button
+                type="button"
+                class="px-3 py-2 text-xs font-medium rounded-lg border border-amber-200 text-amber-700 hover:bg-amber-50 disabled:opacity-50"
+                :disabled="!hasSelection || !selectedTargetListId || actionLoading"
+                @click="moveSelectedSubscribers"
+              >
+                Move Selected
+              </button>
+            </div>
+          </div>
+
+          <p v-if="actionError" class="mt-3 text-sm text-red-600">{{ actionError }}</p>
+          <p v-if="actionMessage" class="mt-3 text-sm text-emerald-700">{{ actionMessage }}</p>
+        </div>
+
+        <div class="overflow-x-auto">
+          <table class="w-full text-left text-sm hidden md:table">
+            <thead class="bg-slate-50 text-slate-500 font-medium">
+              <tr>
+                <th class="px-4 py-4 w-10">
+                  <input
+                    ref="selectAllCheckbox"
+                    type="checkbox"
+                    class="w-4 h-4 rounded border-slate-300"
+                    :checked="allVisibleSelected"
+                    :disabled="filteredSubscribers.length === 0"
+                    @change="toggleSelectAllVisible"
+                  >
+                </th>
+                <th class="px-6 py-4">ID</th>
+                <th class="px-6 py-4">Email</th>
+                <th class="px-6 py-4">Status</th>
+                <th class="px-6 py-4">Created</th>
+                <th class="px-6 py-4 text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-slate-200">
+              <tr v-if="loading">
+                <td colspan="6" class="px-6 py-8 text-center text-slate-500">Loading...</td>
+              </tr>
+
+              <tr v-else-if="errorMessage">
+                <td colspan="6" class="px-6 py-8 text-center text-red-600">{{ errorMessage }}</td>
+              </tr>
+
+              <tr
+                v-for="subscriber in filteredSubscribers"
+                v-else
+                :key="subscriber.id"
+                class="hover:bg-slate-50 transition-colors"
+              >
+                <td class="px-4 py-4">
+                  <input
+                    v-model="selectedIds"
+                    type="checkbox"
+                    class="w-4 h-4 rounded border-slate-300"
+                    :value="subscriber.id"
+                  >
+                </td>
+                <td class="px-6 py-4 text-slate-600">{{ subscriber.id }}</td>
+                <td class="px-6 py-4 font-mono text-slate-900">{{ subscriber.email }}</td>
+                <td class="px-6 py-4">
+                  <span
+                    class="px-2.5 py-0.5 rounded-full text-xs font-medium"
+                    :class="subscriber.confirmed ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700'"
+                  >
+                    {{ subscriber.confirmed ? 'Confirmed' : 'Unconfirmed' }}
+                  </span>
+                </td>
+                <td class="px-6 py-4 text-slate-600">{{ formatDate(subscriber.createdAt) }}</td>
+                <td class="px-6 py-4 text-right">
+                  <button
+                    type="button"
+                    class="px-3 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-700 hover:bg-red-50 disabled:opacity-50"
+                    :disabled="actionLoading"
+                    @click="deleteSingleSubscriber(subscriber)"
+                  >
+                    Delete
+                  </button>
+                </td>
+              </tr>
+
+              <tr v-if="!loading && !errorMessage && filteredSubscribers.length === 0">
+                <td colspan="6" class="px-6 py-8 text-center text-slate-500">No subscribers for this filter.</td>
+              </tr>
+            </tbody>
+          </table>
+
+          <div class="block md:hidden divide-y divide-slate-100">
+            <div v-if="loading" class="px-4 py-8 text-center text-slate-500 text-sm">Loading...</div>
+            <div v-else-if="errorMessage" class="px-4 py-8 text-center text-red-600 text-sm">{{ errorMessage }}</div>
+
+            <div class="p-4 border-b border-slate-100" v-if="!loading && !errorMessage && filteredSubscribers.length">
+              <label class="inline-flex items-center gap-2 text-sm text-slate-700">
+                <input
+                  type="checkbox"
+                  class="w-4 h-4 rounded border-slate-300"
+                  :checked="allVisibleSelected"
+                  @change="toggleSelectAllVisible"
+                >
+                Select all visible
+              </label>
+            </div>
+
+            <div
+              v-for="subscriber in filteredSubscribers"
+              :key="`mobile-${subscriber.id}`"
+              class="p-4"
+            >
+              <div class="flex items-start gap-3">
+                <input
+                  v-model="selectedIds"
+                  type="checkbox"
+                  class="mt-1 w-4 h-4 rounded border-slate-300"
+                  :value="subscriber.id"
+                >
+
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center justify-between gap-3">
+                    <p class="text-sm font-medium text-slate-900 truncate">{{ subscriber.email }}</p>
+                    <span
+                      class="px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap"
+                      :class="subscriber.confirmed ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700'"
+                    >
+                      {{ subscriber.confirmed ? 'Confirmed' : 'Unconfirmed' }}
+                    </span>
+                  </div>
+                  <p class="mt-2 text-xs text-slate-500">#{{ subscriber.id }} · {{ formatDate(subscriber.createdAt) }}</p>
+                  <button
+                    type="button"
+                    class="mt-3 px-3 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-700 hover:bg-red-50 disabled:opacity-50"
+                    :disabled="actionLoading"
+                    @click="deleteSingleSubscriber(subscriber)"
+                  >
+                    Delete
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div
+              v-if="!loading && !errorMessage && filteredSubscribers.length === 0"
+              class="px-4 py-8 text-center text-slate-500 text-sm"
+            >
+              No subscribers for this filter.
+            </div>
+          </div>
+        </div>
+
+        <div class="p-4 sm:p-6 border-t border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-3 text-sm">
+          <span class="text-slate-500">Showing {{ filteredSubscribers.length }} on page · Total: {{ total }}</span>
+          <div class="flex gap-2 w-full sm:w-auto">
+            <button
+              type="button"
+              class="flex-1 sm:flex-none px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+              :disabled="!canGoPrevious || loading || actionLoading"
+              @click="previousPage"
+            >
+              Previous
+            </button>
+            <button
+              type="button"
+              class="flex-1 sm:flex-none px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+              :disabled="!canGoNext || loading || actionLoading"
+              @click="nextPage"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </AdminLayout>
+</template>
+
+<script setup>
+import { computed, onMounted, ref, watch, watchEffect } from 'vue'
+import { useRoute } from 'vue-router'
+import AdminLayout from '../layouts/AdminLayout.vue'
+import client, { subscriptionClient } from '../api'
+
+const route = useRoute()
+const listId = computed(() => Number(route.params.listId))
+const listName = ref(typeof route.query.listName === 'string' ? route.query.listName : '')
+
+const subscribers = ref([])
+const total = ref(0)
+const pageSize = ref(25)
+const loading = ref(false)
+const actionLoading = ref(false)
+const errorMessage = ref('')
+const actionError = ref('')
+const actionMessage = ref('')
+const nextCursor = ref(null)
+const cursorHistory = ref([null])
+const statusFilter = ref('all')
+const selectedIds = ref([])
+const selectedTargetListId = ref('')
+const availableLists = ref([])
+const selectAllCheckbox = ref(null)
+
+const filteredSubscribers = computed(() => {
+  if (statusFilter.value === 'confirmed') {
+    return subscribers.value.filter((subscriber) => subscriber.confirmed)
+  }
+
+  if (statusFilter.value === 'unconfirmed') {
+    return subscribers.value.filter((subscriber) => !subscriber.confirmed)
+  }
+
+  return subscribers.value
+})
+
+const selectedSubscribers = computed(() => (
+  subscribers.value.filter((subscriber) => selectedIds.value.includes(subscriber.id))
+))
+
+const hasSelection = computed(() => selectedSubscribers.value.length > 0)
+const canGoPrevious = computed(() => cursorHistory.value.length > 1)
+const canGoNext = computed(() => nextCursor.value !== null)
+
+const allVisibleSelected = computed(() => {
+  if (filteredSubscribers.value.length === 0) return false
+  return filteredSubscribers.value.every((subscriber) => selectedIds.value.includes(subscriber.id))
+})
+
+const someVisibleSelected = computed(() => {
+  if (filteredSubscribers.value.length === 0) return false
+  return filteredSubscribers.value.some((subscriber) => selectedIds.value.includes(subscriber.id))
+})
+
+watchEffect(() => {
+  if (!selectAllCheckbox.value) return
+  selectAllCheckbox.value.indeterminate = !allVisibleSelected.value && someVisibleSelected.value
+})
+
+watch(statusFilter, () => {
+  actionError.value = ''
+  actionMessage.value = ''
+})
+
+const formatDate = (value) => {
+  if (!value) return '-'
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return '-'
+  return date.toLocaleDateString()
+}
+
+const clearSelection = () => {
+  selectedIds.value = []
+}
+
+const getCurrentCursor = () => cursorHistory.value[cursorHistory.value.length - 1]
+
+const toggleSelectAllVisible = (event) => {
+  const visibleIds = filteredSubscribers.value.map((subscriber) => subscriber.id)
+
+  if (event.target.checked) {
+    const merged = new Set([...selectedIds.value, ...visibleIds])
+    selectedIds.value = Array.from(merged)
+    return
+  }
+
+  const visibleSet = new Set(visibleIds)
+  selectedIds.value = selectedIds.value.filter((id) => !visibleSet.has(id))
+}
+
+const getSelectedEmails = () => selectedSubscribers.value
+  .map((subscriber) => subscriber.email)
+  .filter((email) => typeof email === 'string' && email.length > 0)
+
+const loadListMeta = async () => {
+  try {
+    const list = await subscriptionClient.getSubscriberList(listId.value)
+    if (list?.name) {
+      listName.value = list.name
+    }
+  } catch (error) {
+    console.error('Failed to load list metadata:', error)
+  }
+}
+
+const loadAvailableLists = async () => {
+  const lists = []
+  let cursor = null
+
+  try {
+    while (true) {
+      const response = await subscriptionClient.getSubscriberLists(cursor, 100)
+      const items = Array.isArray(response.items) ? response.items : []
+
+      for (const list of items) {
+        if (list.id !== listId.value) {
+          lists.push(list)
+        }
+      }
+
+      if (!response.pagination?.hasMore || response.pagination?.nextCursor == null) {
+        break
+      }
+
+      cursor = response.pagination.nextCursor
+    }
+  } catch (error) {
+    console.error('Failed to load available lists:', error)
+  }
+
+  availableLists.value = lists
+}
+
+const fetchSubscribers = async (cursor = null) => {
+  if (!Number.isInteger(listId.value) || listId.value <= 0) {
+    errorMessage.value = 'Invalid list ID.'
+    subscribers.value = []
+    return
+  }
+
+  loading.value = true
+  errorMessage.value = ''
+
+  try {
+    const response = await subscriptionClient.getSubscribersOfList(listId.value, cursor, pageSize.value)
+    subscribers.value = Array.isArray(response.items) ? response.items : []
+    total.value = response.pagination?.total ?? subscribers.value.length
+    nextCursor.value = response.pagination?.nextCursor ?? null
+    clearSelection()
+  } catch (error) {
+    console.error('Failed to load list subscribers:', error)
+    errorMessage.value = 'Failed to load subscribers for this list.'
+    subscribers.value = []
+    nextCursor.value = null
+    clearSelection()
+  } finally {
+    loading.value = false
+  }
+}
+
+const refreshCurrentPage = async () => {
+  await fetchSubscribers(getCurrentCursor())
+}
+
+const deleteEmailsFromCurrentList = async (emails) => {
+  if (emails.length === 0) return
+  // todo: check why subscription client delete is not working
+  await client.delete(`lists/${listId.value}/subscribers`, { emails })
+}
+
+const deleteSingleSubscriber = async (subscriber) => {
+  if (!subscriber?.email) return
+
+  actionError.value = ''
+  actionMessage.value = ''
+
+  const confirmed = window.confirm(`Remove ${subscriber.email} from this list?`)
+  if (!confirmed) return
+
+  actionLoading.value = true
+  try {
+    await deleteEmailsFromCurrentList([subscriber.email])
+    actionMessage.value = 'Subscriber removed from this list.'
+    await refreshCurrentPage()
+  } catch (error) {
+    console.error('Failed to delete subscriber from list:', error)
+    actionError.value = 'Failed to remove subscriber from this list.'
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+const deleteSelectedSubscribers = async () => {
+  const emails = getSelectedEmails()
+  if (emails.length === 0) return
+
+  actionError.value = ''
+  actionMessage.value = ''
+
+  const confirmed = window.confirm(`Remove ${emails.length} selected subscriber(s) from this list?`)
+  if (!confirmed) return
+
+  actionLoading.value = true
+  try {
+    await deleteEmailsFromCurrentList(emails)
+    actionMessage.value = `Removed ${emails.length} subscriber(s) from this list.`
+    await refreshCurrentPage()
+  } catch (error) {
+    console.error('Failed to delete selected subscribers from list:', error)
+    actionError.value = 'Failed to remove selected subscribers from this list.'
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+const copySelectedSubscribers = async () => {
+  const emails = getSelectedEmails()
+  const targetListId = Number(selectedTargetListId.value)
+
+  if (emails.length === 0 || !Number.isInteger(targetListId) || targetListId <= 0) return
+
+  actionError.value = ''
+  actionMessage.value = ''
+
+  actionLoading.value = true
+  try {
+    await subscriptionClient.createSubscriptions(emails, targetListId)
+    actionMessage.value = `Copied ${emails.length} subscriber(s) to the selected list.`
+  } catch (error) {
+    console.error('Failed to copy selected subscribers:', error)
+    actionError.value = 'Failed to copy selected subscribers.'
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+const moveSelectedSubscribers = async () => {
+  const emails = getSelectedEmails()
+  const targetListId = Number(selectedTargetListId.value)
+
+  if (emails.length === 0 || !Number.isInteger(targetListId) || targetListId <= 0) return
+
+  actionError.value = ''
+  actionMessage.value = ''
+
+  const confirmed = window.confirm(`Move ${emails.length} selected subscriber(s) to the selected list?`)
+  if (!confirmed) return
+
+  actionLoading.value = true
+  try {
+    await subscriptionClient.createSubscriptions(emails, targetListId)
+    await deleteEmailsFromCurrentList(emails)
+    actionMessage.value = `Moved ${emails.length} subscriber(s) to the selected list.`
+    await refreshCurrentPage()
+  } catch (error) {
+    console.error('Failed to move selected subscribers:', error)
+    actionError.value = 'Failed to move selected subscribers.'
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+const nextPage = async () => {
+  if (nextCursor.value === null || loading.value || actionLoading.value) return
+  cursorHistory.value.push(nextCursor.value)
+  await fetchSubscribers(nextCursor.value)
+}
+
+const previousPage = async () => {
+  if (cursorHistory.value.length <= 1 || loading.value || actionLoading.value) return
+  cursorHistory.value.pop()
+  await fetchSubscribers(getCurrentCursor())
+}
+
+onMounted(async () => {
+  await Promise.all([
+    loadListMeta(),
+    loadAvailableLists(),
+    fetchSubscribers(getCurrentCursor())
+  ])
+})
+</script>
diff --git a/src/Controller/ListsController.php b/src/Controller/ListsController.php
index 783efa9..9bf6983 100644
--- a/src/Controller/ListsController.php
+++ b/src/Controller/ListsController.php
@@ -32,4 +32,14 @@ public function index(Request $request): JsonResponse|Response
 
         return $this->json($initialData);
     }
+
+    #[Route('/{listId}/subscribers', name: 'list_subscribers', methods: ['GET'])]
+    public function view(Request $request, int $listId): JsonResponse|Response
+    {
+        return $this->render('spa.html.twig', [
+            'page' => 'List Subscribers',
+            'api_token' => $request->getSession()->get('auth_token'),
+            'api_base_url' => $this->getParameter('api_base_url'),
+        ]);
+    }
 }

From a65992e32a0cdecf20b926bd4a98e1491bce8324 Mon Sep 17 00:00:00 2001
From: Tatevik <tatevikg1@gmail.com>
Date: Wed, 25 Mar 2026 12:53:14 +0400
Subject: [PATCH 4/6] Export subscribers panel

---
 assets/vue/api.js                             |   3 +-
 .../lists/ListSubscribersExportPanel.vue      | 250 ++++++++++++++++++
 .../subscribers/SubscriberDirectory.vue       |   3 +
 .../subscribers/SubscribersTable.vue          |  64 -----
 assets/vue/views/ListSubscribersView.vue      |   4 +
 package.json                                  |   2 +-
 src/Controller/SubscribersController.php      |  85 +++---
 yarn.lock                                     |   8 +-
 8 files changed, 297 insertions(+), 122 deletions(-)
 create mode 100644 assets/vue/components/lists/ListSubscribersExportPanel.vue
 delete mode 100644 assets/vue/components/subscribers/SubscribersTable.vue

diff --git a/assets/vue/api.js b/assets/vue/api.js
index 3ef3307..95c3cbc 100644
--- a/assets/vue/api.js
+++ b/assets/vue/api.js
@@ -1,4 +1,4 @@
-import {Client, ListClient, SubscribersClient, SubscriptionClient} from '@tatevikgr/rest-api-client';
+import {Client, ListClient, SubscribersClient, SubscriptionClient, SubscriberAttributesClient} from '@tatevikgr/rest-api-client';
 
 const appElement = document.getElementById('vue-app');
 const apiToken = appElement?.dataset.apiToken;
@@ -17,5 +17,6 @@ if (apiToken) {
 export const subscribersClient = new SubscribersClient(client);
 export const listClient = new ListClient(client);
 export const subscriptionClient = new SubscriptionClient(client);
+export const subscriberAttributesClient = new SubscriberAttributesClient(client);
 
 export default client;
diff --git a/assets/vue/components/lists/ListSubscribersExportPanel.vue b/assets/vue/components/lists/ListSubscribersExportPanel.vue
new file mode 100644
index 0000000..b5f3075
--- /dev/null
+++ b/assets/vue/components/lists/ListSubscribersExportPanel.vue
@@ -0,0 +1,250 @@
+<template>
+  <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+    <div class="p-4 sm:p-6 space-y-5">
+      <!-- Date type -->
+      <div class="space-y-2">
+        <p class="text-sm font-medium text-slate-800">What date needs to be used:</p>
+
+        <div class="flex flex-wrap gap-x-5 gap-y-2">
+          <label
+              v-for="option in dateTypeOptions"
+              :key="option.value"
+              class="inline-flex items-center gap-2 text-sm text-slate-700 cursor-pointer mr-2"
+          >
+            <input
+                v-model="form.dateType"
+                type="radio"
+                name="list-export-date-type"
+                class="h-4 w-4 border-slate-300 text-ext-wf1 focus:ring-ext-wf1"
+                :value="option.value"
+            >
+            <span>{{ option.label }}</span>
+          </label>
+        </div>
+      </div>
+
+      <!-- Date range -->
+      <div class="grid grid-cols-1 lg:grid-cols-[1fr_auto_1fr] gap-3 items-end">
+        <div>
+          <label class="block text-sm font-medium text-slate-700 mb-1" for="list-export-date-from">
+            Date From
+          </label>
+          <input
+              id="list-export-date-from"
+              v-model="form.dateFrom"
+              type="date"
+              class="block w-full rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500 disabled:bg-slate-100 disabled:text-slate-400"
+              :disabled="usesAnyDate"
+          >
+        </div>
+
+        <div class="hidden lg:flex items-center justify-center pb-2 text-slate-400">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path
+                fill-rule="evenodd"
+                d="M3 10a1 1 0 011-1h9.586l-2.293-2.293a1 1 0 111.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L13.586 11H4a1 1 0 01-1-1z"
+                clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-slate-700 mb-1" for="list-export-date-to">
+            Date To
+          </label>
+          <input
+              id="list-export-date-to"
+              v-model="form.dateTo"
+              type="date"
+              class="block w-full rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500 disabled:bg-slate-100 disabled:text-slate-400"
+              :disabled="usesAnyDate"
+          >
+        </div>
+      </div>
+
+      <!-- Columns -->
+      <div class="space-y-3">
+        <div class="flex flex-wrap items-center justify-between gap-3">
+          <p class="text-sm font-medium text-slate-800">Columns</p>
+
+          <label class="inline-flex items-center gap-2 text-sm font-medium text-slate-900 cursor-pointer">
+            <input
+                ref="selectAllColumnsCheckbox"
+                type="checkbox"
+                class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1"
+                :checked="allColumnsSelected"
+                @change="toggleAllColumns"
+            >
+            <span>Select all</span>
+          </label>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-x-8 gap-y-3">
+          <label
+              v-for="column in columnOptions"
+              :key="column.value"
+              class="inline-flex items-center gap-2 text-sm text-slate-700 cursor-pointer min-w-0"
+          >
+            <input
+                v-model="form.columns"
+                type="checkbox"
+                class="h-4 w-4 rounded border-slate-300 text-ext-wf1 focus:ring-ext-wf1 shrink-0"
+                :value="column.value"
+            >
+            <span class="truncate">{{ column.label }}</span>
+          </label>
+        </div>
+      </div>
+
+      <p v-if="exportError" class="text-sm text-red-600">{{ exportError }}</p>
+    </div>
+
+    <!-- Footer -->
+    <div class="px-4 sm:px-6 py-4 border-t border-slate-200 flex items-center justify-between gap-3">
+      <button
+          type="button"
+          class="inline-flex items-center justify-center rounded-md border border-transparent bg-ext-wf1 px-5 py-2 text-sm font-medium text-white shadow-sm hover:bg-ext-wf3 disabled:opacity-50 disabled:cursor-not-allowed"
+          @click="exportSubscribers"
+      >
+        Export
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref, watch, watchEffect } from 'vue'
+// todo: check why subscriberAttributesClient was not working
+import client, { subscriberAttributesClient } from '../../api'
+
+onMounted(async () => {
+  try {
+    const queryParams = { limit: 5 };
+    const data = await client.get('attributes', queryParams)
+    const dynamicColumns = data.items.map(attr => ({
+      value: attr.name,
+      label: capitalizeFirst(attr.name)
+    }))
+
+    columnOptions.value = [
+      ...columnOptions.value,
+      ...dynamicColumns
+    ]
+
+    form.value.columns = columnOptions.value.map(c => c.value)
+  } catch (err) {
+    console.error('Failed to load attribute definitions', err)
+  }
+})
+const capitalizeFirst = (s) => s ? s[0].toUpperCase() + s.slice(1) : ''
+
+const props = defineProps({
+  listId: {
+    type: Number,
+  },
+  listName: {
+    type: String,
+    default: ''
+  }
+})
+
+const dateTypeOptions = [
+  { value: 'any', label: 'Any date (Export all subscribers)' },
+  { value: 'signup', label: 'When they signed up' },
+  { value: 'changed', label: 'When the record was changed' },
+  { value: 'changelog', label: 'Based on changelog' },
+  { value: 'subscribed', label: 'When they subscribed to new list' }
+]
+
+const columnOptions = ref([
+  { value: 'id', label: 'ID' },
+  { value: 'email', label: 'Email' },
+  { value: 'confirmed', label: 'Is this subscriber confirmed' },
+  { value: 'blacklisted', label: 'Is this subscriber blacklisted' },
+  // { value: 'manualConfirm', label: 'Did this subscriber manually confirm' },
+  { value: 'bounceCount', label: 'Number of bounces' },
+  { value: 'createdAt', label: 'Entered' },
+  { value: 'updatedAt', label: 'Last Modified' },
+  { value: 'uniqueId', label: 'Unique ID' },
+  { value: 'htmlEmail', label: 'Send this subscriber HTML emails' },
+  { value: 'rssFrequency', label: 'RSS Frequency' },
+  { value: 'disabled', label: 'Is this account disabled?' },
+  { value: 'extraData', label: 'Additional data' },
+  { value: 'foreignKey', label: 'Foreign Key' },
+])
+
+const form = ref({
+  dateType: 'any',
+  dateFrom: '',
+  dateTo: '',
+  columns: columnOptions.value.map((column) => column.value)
+})
+
+const exportError = ref('')
+const selectAllColumnsCheckbox = ref(null)
+
+const usesAnyDate = computed(() => form.value.dateType === 'any')
+
+const allColumnsSelected = computed(() => {
+  return form.value.columns.length === columnOptions.length
+})
+
+const someColumnsSelected = computed(() => {
+  return form.value.columns.length > 0 && !allColumnsSelected.value
+})
+
+watchEffect(() => {
+  if (!selectAllColumnsCheckbox.value) return
+  selectAllColumnsCheckbox.value.indeterminate = someColumnsSelected.value
+})
+
+watch(() => form.value.dateType, (dateType) => {
+  exportError.value = ''
+  if (dateType === 'any') {
+    form.value.dateFrom = ''
+    form.value.dateTo = ''
+  }
+})
+
+watch(() => [form.value.dateFrom, form.value.dateTo], () => {
+  exportError.value = ''
+})
+
+const toggleAllColumns = (event) => {
+  if (event.target.checked) {
+    form.value.columns = columnOptions.value.map((column) => column.value)
+    return
+  }
+
+  form.value.columns = []
+}
+
+const exportSubscribers = () => {
+  if (!usesAnyDate.value && form.value.dateFrom && form.value.dateTo && form.value.dateFrom > form.value.dateTo) {
+    exportError.value = 'Date From cannot be after Date To.'
+    return
+  }
+
+  const params = new URLSearchParams()
+  if (props.listId) {
+    params.set('list_id', String(props.listId))
+  }
+  params.set('date_type', form.value.dateType)
+
+  if (!usesAnyDate.value) {
+    if (form.value.dateFrom) {
+      params.set('date_from', form.value.dateFrom)
+    }
+
+    if (form.value.dateTo) {
+      params.set('date_to', form.value.dateTo)
+    }
+  }
+
+  form.value.columns.forEach((column) => {
+    params.append('columns[]', column)
+  })
+
+  window.location.href = `/subscribers/export?${params.toString()}`
+}
+</script>
diff --git a/assets/vue/components/subscribers/SubscriberDirectory.vue b/assets/vue/components/subscribers/SubscriberDirectory.vue
index d7bce38..dcb7f44 100644
--- a/assets/vue/components/subscribers/SubscriberDirectory.vue
+++ b/assets/vue/components/subscribers/SubscriberDirectory.vue
@@ -83,6 +83,8 @@
       </div>
     </div>
   </div>
+
+  <ListSubscribersExportPanel/>
 </template>
 
 <script setup>
@@ -94,6 +96,7 @@ import ImportResult from './ImportResult.vue'
 import {inject, onMounted, ref} from 'vue'
 import {subscriberFilters} from './subscriberFilters'
 import {subscribersClient} from '../../api'
+import ListSubscribersExportPanel from "../lists/ListSubscribersExportPanel.vue";
 
 const initialSubscribers = inject('subscribers', [])
 const initialPagination = inject('pagination', {
diff --git a/assets/vue/components/subscribers/SubscribersTable.vue b/assets/vue/components/subscribers/SubscribersTable.vue
deleted file mode 100644
index 790d854..0000000
--- a/assets/vue/components/subscribers/SubscribersTable.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<template>
-  <table class="w-full text-left border-collapse">
-    <thead class="border-b">
-    <tr class="uppercase text-xs text-gray-500 font-semibold">
-      <th class="py-3 pr-4">Campaign Name</th>
-      <th class="py-3 px-4">Status</th>
-      <th class="py-3 px-4">Date</th>
-      <th class="py-3 px-4">Open Rate</th>
-      <th class="py-3 pl-4">Click Rate</th>
-    </tr>
-    </thead>
-
-    <tbody>
-    <tr
-        v-for="row in rows"
-        :key="row.id"
-        class="border-b last:border-0 hover:bg-gray-50"
-    >
-      <td class="py-3 pr-4 font-medium text-gray-900">
-        {{ row.name }}
-      </td>
-
-      <td class="py-3 px-4">
-          <span
-              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold"
-              :class="statusClass(row.status)"
-          >
-            {{ row.status }}
-          </span>
-      </td>
-
-      <td class="py-3 px-4 text-sm text-gray-500">{{ row.date }}</td>
-      <td class="py-3 px-4 text-sm text-gray-500">{{ row.openRate ?? '—' }}</td>
-      <td class="py-3 pl-4 text-sm text-gray-500">{{ row.clickRate ?? '—' }}</td>
-    </tr>
-
-    <!-- empty state -->
-    <tr v-if="!rows.length">
-      <td colspan="5" class="text-center py-8 text-gray-500">
-        No subscribers yet.
-      </td>
-    </tr>
-    </tbody>
-  </table>
-</template>
-
-<script setup>
-const props = defineProps({
-  rows: {
-    type: Array,
-    default: () => [],
-  },
-})
-
-const statusClass = (status) => {
-  const s = status.toLowerCase()
-
-  return {
-    sent: 'bg-green-100 text-green-800',
-    scheduled: 'bg-blue-100 text-blue-800',
-    draft: 'bg-gray-100 text-gray-800',
-  }[s] || 'bg-gray-100 text-gray-800'
-}
-</script>
diff --git a/assets/vue/views/ListSubscribersView.vue b/assets/vue/views/ListSubscribersView.vue
index 94fe499..1a8bb3b 100644
--- a/assets/vue/views/ListSubscribersView.vue
+++ b/assets/vue/views/ListSubscribersView.vue
@@ -245,6 +245,9 @@
           </div>
         </div>
       </div>
+
+      <ListSubscribersExportPanel :list-id="listId" :list-name="listName" />
+
     </div>
   </AdminLayout>
 </template>
@@ -253,6 +256,7 @@
 import { computed, onMounted, ref, watch, watchEffect } from 'vue'
 import { useRoute } from 'vue-router'
 import AdminLayout from '../layouts/AdminLayout.vue'
+import ListSubscribersExportPanel from '../components/lists/ListSubscribersExportPanel.vue'
 import client, { subscriptionClient } from '../api'
 
 const route = useRoute()
diff --git a/package.json b/package.json
index 58b4d76..ffb1684 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "webpack-notifier": "^1.15.0"
   },
   "dependencies": {
-    "@tatevikgr/rest-api-client": "^1.2.0",
+    "@tatevikgr/rest-api-client": "^1.3.0",
     "apexcharts": "^5.10.4",
     "vue": "^3.5.16",
     "vue-router": "4",
diff --git a/src/Controller/SubscribersController.php b/src/Controller/SubscribersController.php
index 9eaccb8..a6238ec 100644
--- a/src/Controller/SubscribersController.php
+++ b/src/Controller/SubscribersController.php
@@ -7,6 +7,7 @@
 use DateTimeImmutable;
 use PhpList\RestApiClient\Endpoint\SubscribersClient;
 use PhpList\RestApiClient\Entity\Subscriber;
+use PhpList\RestApiClient\Request\Subscriber\ExportSubscriberRequest;
 use PhpList\RestApiClient\Request\Subscriber\SubscribersFilterRequest;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\JsonResponse;
@@ -92,63 +93,43 @@ public function index(Request $request): JsonResponse|Response
     #[Route('/export', name: 'export', methods: ['GET'])]
     public function export(Request $request): Response
     {
-        $filter = new SubscribersFilterRequest(
-            isConfirmed: $request->query->has('confirmed') ? true :
-                ($request->query->has('unconfirmed') ? false : null),
-            isBlacklisted: $request->query->has('blacklisted') ? true :
-                ($request->query->has('non-blacklisted') ? false : null),
-            findColumn: $request->query->get('findColumn'),
-            findValue: $request->query->get('findValue'),
+        $columns = array_values(
+            array_filter(
+                $request->query->all('columns'),
+                static fn (mixed $value): bool => is_string($value) && $value !== ''
+            )
         );
 
-        $collection = $this->subscribersClient->getSubscribers($filter, 0, $request->query->getInt('limit'));
-        $exportData = $collection->items;
-        if (empty($exportData)) {
-            return new Response('No subscribers to export.', Response::HTTP_NOT_FOUND);
-        }
-        $handle = fopen('php://temp', 'r+');
-
-        $headers = [
-            'id',
-            'email',
-            'createdAt',
-            'confirmed',
-            'blacklisted',
-            'bounceCount',
-            'uniqueId',
-            'htmlEmail',
-            'disabled',
-            'lists',
-        ];
-        fputcsv($handle, $headers);
-
-        foreach ($exportData as $data) {
-            $row = [
-                'id' => $data->id,
-                'email' => $data->email,
-                'createdAt' => (new DateTimeImmutable($data->createdAt))->format('Y-m-d H:i:s'),
-                'confirmed' => $data->confirmed,
-                'blacklisted' => $data->blacklisted,
-                'bounceCount' => $data->bounceCount,
-                'uniqueId' => $data->uniqueId,
-                'htmlEmail' => $data->htmlEmail,
-                'disabled' => $data->disabled,
-                'lists' => implode('|', array_map(fn($list) => $list['name'], $data->subscribedLists)),
-            ];
-
-            fputcsv($handle, $row);
+        $defaultRequest = new ExportSubscriberRequest();
+
+        $exportRequest = new ExportSubscriberRequest(
+            dateType: (string) $request->query->get('date_type', 'any'),
+            listId: $request->query->has('list_id') ? $request->query->getInt('list_id') : null,
+            dateFrom: $request->query->get('date_from') ?: null,
+            dateTo: $request->query->get('date_to') ?: null,
+            columns: $columns === [] ? $defaultRequest->columns : $columns
+        );
+
+        $upstreamResponse = $this->subscribersClient->exportSubscribers($exportRequest);
+
+        $content = (string) $upstreamResponse->getBody();
+
+        $contentType = $upstreamResponse->getHeaderLine('Content-Type');
+        if ($contentType === '') {
+            $contentType = 'text/csv; charset=UTF-8';
         }
 
-        rewind($handle);
-        $csvContent = stream_get_contents($handle);
-        fclose($handle);
+        $contentDisposition = $upstreamResponse->getHeaderLine('Content-Disposition');
+        if ($contentDisposition === '') {
+            $contentDisposition = sprintf(
+                'attachment; filename="subscribers_export_%s.csv"',
+                date('Y-m-d_H-i-s')
+            );
+        }
 
-        $response = new Response($csvContent);
-        $response->headers->set('Content-Type', 'text/csv');
-        $response->headers->set(
-            'Content-Disposition',
-            'attachment; filename="subscribers_export_' . date('Y-m-d_H-i-s') . '.csv"'
-        );
+        $response = new Response($content);
+        $response->headers->set('Content-Type', $contentType);
+        $response->headers->set('Content-Disposition', $contentDisposition);
 
         return $response;
     }
diff --git a/yarn.lock b/yarn.lock
index edab6a8..475cf12 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1089,10 +1089,10 @@
     postcss "^8.5.6"
     tailwindcss "4.2.1"
 
-"@tatevikgr/rest-api-client@^1.2.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@tatevikgr/rest-api-client/-/rest-api-client-1.2.0.tgz#bca4e74d8e726da578a290a1cace5145aeb6d22b"
-  integrity sha512-ScYe3PY11iSnplaF0mKuyK4B6nzA6GT2yA4rMyAvezWxAjv2Znn8kbqzbGnDE+jMvhRo3FcutKFnVtB5cr698g==
+"@tatevikgr/rest-api-client@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@tatevikgr/rest-api-client/-/rest-api-client-1.3.0.tgz#6b0aaf903539debf12fb6d91771d043d45210eb3"
+  integrity sha512-53kibnzJYiJiTmlqVF5eRltM3vdbqlp26nHV3FQRTG6rkSgKAix4yLaUy6lU4BpB0WuT0Rn7NRf5H3t37Sl/sg==
   dependencies:
     axios "^1.6.0"
 

From e6dff7d9349cb29a6c9fbc8423cc7eff80e11969 Mon Sep 17 00:00:00 2001
From: Tatevik <tatevikg1@gmail.com>
Date: Thu, 26 Mar 2026 10:57:18 +0400
Subject: [PATCH 5/6] After review 0

---
 .../components/lists/AddSubscribersModal.vue  |  83 +++---
 .../vue/components/lists/CreateListModal.vue  | 148 ++++++-----
 assets/vue/components/lists/EditListModal.vue | 174 ++++++-------
 assets/vue/components/lists/ListDirectory.vue |  69 ++++-
 .../lists/ListSubscribersExportPanel.vue      |  31 ++-
 assets/vue/views/ListSubscribersView.vue      | 241 ++++++++++--------
 src/Controller/ListsController.php            |   4 +-
 src/Controller/SubscribersController.php      |  11 +-
 8 files changed, 417 insertions(+), 344 deletions(-)

diff --git a/assets/vue/components/lists/AddSubscribersModal.vue b/assets/vue/components/lists/AddSubscribersModal.vue
index 8c26b0c..e62f20d 100644
--- a/assets/vue/components/lists/AddSubscribersModal.vue
+++ b/assets/vue/components/lists/AddSubscribersModal.vue
@@ -6,59 +6,47 @@
       role="dialog"
       aria-modal="true"
   >
-    <div
-        class="fixed inset-0 bg-slate-900/50 transition-opacity"
-        aria-hidden="true"
-        @click="close"
-    ></div>
-
-    <div
-        class="relative z-10 w-full overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:max-w-lg sm:w-full"
-    >
-      <div class="bg-white px-4 pt-5 pb-4 sm:p-6">
-        <div class="flex items-center justify-between">
-          <h3 id="add-subscribers-modal-title" class="text-lg font-medium leading-6 text-slate-900">
-            Add subscribers
-          </h3>
-
-          <button
-              type="button"
-              class="text-slate-400 hover:text-slate-500"
-              @click="close"
-          >
-            <BaseIcon name="close" class="w-5 h-5" />
-          </button>
-        </div>
-
-        <form class="mt-4 space-y-4" @submit.prevent="submitAddSubscribers">
-          <div>
-            <label for="subscriber-emails" class="block text-sm font-medium text-slate-700">
-              Email addresses
-            </label>
-            <textarea
-                id="subscriber-emails"
-                v-model.trim="addSubsForm.emails"
-                rows="8"
-                placeholder="john@example.com&#10;jane@example.com&#10;team@example.com"
-                class="mt-1 block w-full rounded-md border border-slate-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"
-            ></textarea>
-            <p class="mt-1 text-xs text-slate-500">
-              Enter one email per line, or separate multiple emails with commas.
-            </p>
+    <div class="fixed inset-0 bg-slate-900/50 transition-opacity" aria-hidden="true" @click="close"></div>
+
+    <div class="relative z-10 w-full overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:max-w-lg sm:w-full">
+      <form class="mt-4 space-y-4" @submit.prevent="submitAddSubscribers">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6">
+          <div class="flex items-center justify-between">
+            <h3 id="add-subscribers-modal-title" class="text-lg font-medium leading-6 text-slate-900">
+              Add subscribers
+            </h3>
+
+            <button type="button" class="text-slate-400 hover:text-slate-500" @click="close">
+              <BaseIcon name="close" class="w-5 h-5" />
+            </button>
           </div>
 
-          <p v-if="addSubsError" class="text-sm text-red-600">
-            {{ addSubsError }}
-          </p>
-        </form>
-      </div>
+            <div>
+              <label for="subscriber-emails" class="block text-sm font-medium text-slate-700">
+                Email addresses
+              </label>
+              <textarea
+                  id="subscriber-emails"
+                  v-model.trim="addSubsForm.emails"
+                  rows="8"
+                  placeholder="john@example.com&#10;jane@example.com&#10;team@example.com"
+                  class="mt-1 block w-full rounded-md border border-slate-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"
+              ></textarea>
+              <p class="mt-1 text-xs text-slate-500">
+                Enter one email per line, or separate multiple emails with commas.
+              </p>
+            </div>
+
+            <p v-if="addSubsError" class="text-sm text-red-600">
+              {{ addSubsError }}
+            </p>
+        </div>
 
-      <div class="bg-slate-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 gap-2">
+        <div class="bg-slate-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6 gap-2">
         <button
-            type="button"
+            type="submit"
             :disabled="addingSubscribers || !addSubsForm.emails.trim()"
             class="w-full inline-flex justify-center rounded-md border border-transparent bg-ext-wf1 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-ext-wf3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 sm:w-auto sm:text-sm disabled:opacity-50"
-            @click="submitAddSubscribers"
         >
           {{ addingSubscribers ? 'Adding...' : 'Add subscribers' }}
         </button>
@@ -71,6 +59,7 @@
           Cancel
         </button>
       </div>
+      </form>
     </div>
   </div>
 </template>
diff --git a/assets/vue/components/lists/CreateListModal.vue b/assets/vue/components/lists/CreateListModal.vue
index eaf3b06..dcd58ca 100644
--- a/assets/vue/components/lists/CreateListModal.vue
+++ b/assets/vue/components/lists/CreateListModal.vue
@@ -7,86 +7,84 @@
     aria-modal="true"
   >
     <div class="fixed inset-0 bg-slate-900/50 transition-opacity" aria-hidden="true" @click="close"></div>
-
-    <div class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full z-10">
-      <div class="bg-white px-4 pt-5 pb-4 sm:p-6">
-        <div class="flex justify-between items-center">
-          <h3 id="create-list-modal-title" class="text-lg leading-6 font-medium text-slate-900">
-            Create New List
-          </h3>
-          <button type="button" class="text-slate-400 hover:text-slate-500" @click="close">
-            <BaseIcon name="close" class="w-5 h-5" />
-          </button>
-        </div>
-
-        <form class="mt-4 space-y-4" @submit.prevent="submitCreateList">
-          <div>
-            <label for="list-name" class="block text-sm font-medium text-slate-700">Name</label>
-            <input
-              id="list-name"
-              v-model.trim="createForm.name"
-              type="text"
-              required
-              class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-            >
-          </div>
-
-          <div class="flex items-center">
-            <input
-              id="list-public"
-              v-model="createForm.public"
-              type="checkbox"
-              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded"
-            >
-            <label for="list-public" class="ml-2 block text-sm text-slate-900">
-              Public
-            </label>
-          </div>
-
-          <div>
-            <label for="list-position" class="block text-sm font-medium text-slate-700">List Position (optional)</label>
-            <input
-              id="list-position"
-              v-model="createForm.listPosition"
-              type="number"
-              min="0"
-              step="1"
-              class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-            >
+    <form class="mt-4 space-y-4" @submit.prevent="submitCreateList">
+      <div class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg md:min-w-xl sm:w-full z-10">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6">
+          <div class="flex justify-between items-center">
+            <h3 id="create-list-modal-title" class="text-lg leading-6 font-medium text-slate-900">
+              Create New List
+            </h3>
+            <button type="button" class="text-slate-400 hover:text-slate-500" @click="close">
+              <BaseIcon name="close" class="w-5 h-5" />
+            </button>
           </div>
 
-          <div>
-            <label for="list-description" class="block text-sm font-medium text-slate-700">Description (optional)</label>
-            <textarea
-              id="list-description"
-              v-model.trim="createForm.description"
-              rows="3"
-              class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-            ></textarea>
-          </div>
-
-          <p v-if="createError" class="text-sm text-red-600">{{ createError }}</p>
-        </form>
-      </div>
+            <div>
+              <label for="list-name" class="block text-sm font-medium text-slate-700">Name</label>
+              <input
+                id="list-name"
+                v-model.trim="createForm.name"
+                type="text"
+                required
+                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              >
+            </div>
+
+            <div class="flex items-center">
+              <input
+                id="list-public"
+                v-model="createForm.public"
+                type="checkbox"
+                class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded"
+              >
+              <label for="list-public" class="ml-2 block text-sm text-slate-900">
+                Public
+              </label>
+            </div>
+
+            <div>
+              <label for="list-position" class="block text-sm font-medium text-slate-700">List Position (optional)</label>
+              <input
+                id="list-position"
+                v-model="createForm.listPosition"
+                type="number"
+                min="0"
+                step="1"
+                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              >
+            </div>
+
+            <div>
+              <label for="list-description" class="block text-sm font-medium text-slate-700">Description (optional)</label>
+              <textarea
+                id="list-description"
+                v-model.trim="createForm.description"
+                rows="3"
+                class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
+              ></textarea>
+            </div>
+
+            <p v-if="createError" class="text-sm text-red-600">{{ createError }}</p>
+        </div>
 
-      <div class="bg-slate-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
-        <button
-          type="button"
-          :disabled="creatingList || !createForm.name.trim()"
-          class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-ext-wf1 text-base font-medium text-white hover:bg-ext-wf3 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm disabled:opacity-50"
-          @click="submitCreateList"
+        <div class="bg-slate-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
+          <button
+            type="submit"
+            :disabled="creatingList || !createForm.name.trim()"
+            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-ext-wf1 text-base font-medium text-white hover:bg-ext-wf3 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm disabled:opacity-50"
         >
-          {{ creatingList ? 'Creating...' : 'Create' }}
-        </button>
-        <button
-          type="button"
-          class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm"
-          @click="close"
-        >
-          Cancel
-        </button>
+            {{ creatingList ? 'Creating...' : 'Create' }}
+          </button>
+          <button
+            type="button"
+            class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm"
+            @click="close"
+          >
+            Cancel
+          </button>
+        </div>
       </div>
-    </div>
+    </form>
   </div>
 </template>
 
diff --git a/assets/vue/components/lists/EditListModal.vue b/assets/vue/components/lists/EditListModal.vue
index 640da9d..41d5981 100644
--- a/assets/vue/components/lists/EditListModal.vue
+++ b/assets/vue/components/lists/EditListModal.vue
@@ -1,137 +1,124 @@
 <template>
   <div
-      v-if="isOpen"
-      class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0"
-      aria-labelledby="edit-list-modal-title"
-      role="dialog"
-      aria-modal="true"
+    v-if="isOpen"
+    class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0"
+    aria-labelledby="edit-list-modal-title"
+    role="dialog"
+    aria-modal="true"
   >
-    <div
-        class="fixed inset-0 bg-slate-900/50 transition-opacity"
-        aria-hidden="true"
-        @click="close"
-    ></div>
-
-    <div
-        class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full z-10"
-    >
-      <div class="bg-white px-4 pt-5 pb-4 sm:p-6">
-        <div class="flex justify-between items-center">
-          <h3 id="edit-list-modal-title" class="text-lg leading-6 font-medium text-slate-900">
-            Edit List
-          </h3>
-          <button
-              type="button"
-              class="text-slate-400 hover:text-slate-500"
-              @click="close"
-          >
-            <BaseIcon name="close" class="w-5 h-5" />
-          </button>
-        </div>
+    <div class="fixed inset-0 bg-slate-900/50 transition-opacity" aria-hidden="true" @click="close"></div>
+    <form class="mt-4 space-y-4" @submit.prevent="submitEditList">
+      <div class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg md:min-w-xl sm:w-full z-10">
+        <div class="bg-white px-4 pt-5 pb-4 sm:p-6">
+          <div class="flex justify-between items-center">
+            <h3 id="edit-list-modal-title" class="text-lg leading-6 font-medium text-slate-900">
+              Edit List
+            </h3>
+            <button type="button" class="text-slate-400 hover:text-slate-500" @click="close">
+              <BaseIcon name="close" class="w-5 h-5" />
+            </button>
+          </div>
 
-        <form class="mt-4 space-y-4" @submit.prevent="submitEditList">
-          <div>
-            <label for="list-name" class="block text-sm font-medium text-slate-700">Name</label>
-            <input
+            <div>
+              <label for="list-name" class="block text-sm font-medium text-slate-700">Name</label>
+              <input
                 id="list-name"
                 v-model.trim="editForm.name"
                 type="text"
                 required
                 class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-            >
-          </div>
+              >
+            </div>
 
-          <div class="flex items-center">
-            <input
+            <div class="flex items-center">
+              <input
                 id="list-public"
                 v-model="editForm.public"
                 type="checkbox"
                 class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded"
-            >
-            <label for="list-public" class="ml-2 block text-sm text-slate-900">
-              Public
-            </label>
-          </div>
-
-          <div>
-            <label for="list-position" class="block text-sm font-medium text-slate-700">
-              List Position (optional)
-            </label>
-            <input
+              >
+              <label for="list-public" class="ml-2 block text-sm text-slate-900">
+                Public
+              </label>
+            </div>
+
+            <div>
+              <label for="list-position" class="block text-sm font-medium text-slate-700">
+                List Position (optional)
+              </label>
+              <input
                 id="list-position"
                 v-model="editForm.listPosition"
                 type="number"
                 min="0"
                 step="1"
                 class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-            >
-          </div>
-
-          <div>
-            <label for="list-description" class="block text-sm font-medium text-slate-700">
-              Description (optional)
-            </label>
-            <textarea
+              >
+            </div>
+
+            <div>
+              <label for="list-description" class="block text-sm font-medium text-slate-700">
+                Description (optional)
+              </label>
+              <textarea
                 id="list-description"
                 v-model.trim="editForm.description"
                 rows="3"
                 class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-            ></textarea>
-          </div>
+              ></textarea>
+            </div>
 
-          <div>
-            <label for="list-category" class="block text-sm font-medium text-slate-700">Category</label>
-            <input
+            <div>
+              <label for="list-category" class="block text-sm font-medium text-slate-700">Category</label>
+              <input
                 id="list-category"
                 v-model.trim="editForm.category"
                 type="text"
                 class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-            >
-          </div>
+              >
+            </div>
 
-          <div>
-            <label for="list-rssFeed" class="block text-sm font-medium text-slate-700">RssFeed url</label>
-            <input
+            <div>
+              <label for="list-rss" class="block text-sm font-medium text-slate-700">RssFeed url</label>
+              <input
                 id="list-rss"
                 v-model.trim="editForm.rssFeed"
                 type="text"
                 class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-            >
-          </div>
+              >
+            </div>
 
-          <div>
-            <label for="list-subjectPrefix" class="block text-sm font-medium text-slate-700">Subject Prefix</label>
-            <input
+            <div>
+              <label for="list-prefix" class="block text-sm font-medium text-slate-700">Subject Prefix</label>
+              <input
                 id="list-prefix"
                 v-model.trim="editForm.subjectPrefix"
                 type="text"
                 class="mt-1 block w-full border border-slate-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-            >
-          </div>
+              >
+            </div>
 
-          <p v-if="editError" class="text-sm text-red-600">{{ editError }}</p>
-        </form>
-      </div>
+            <p v-if="editError" class="text-sm text-red-600">{{ editError }}</p>
+        </div>
 
-      <div class="bg-slate-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
-        <button
-            type="button"
+        <div class="bg-slate-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2">
+          <button
+            type="submit"
             :disabled="updatingList || !editForm.name.trim()"
             class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-ext-wf1 text-base font-medium text-white hover:bg-ext-wf3 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm disabled:opacity-50"
-            @click="submitEditList"
-        >
-          {{ updatingList ? 'Saving...' : 'Save' }}
-        </button>
-
-        <button
+          >
+            {{ updatingList ? 'Saving...' : 'Save' }}
+          </button>
+          <button
             type="button"
             class="mt-3 w-full inline-flex justify-center rounded-md border border-slate-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm"
             @click="close"
-        >
-          Cancel
-        </button>
+          >
+            Cancel
+          </button>
+        </div>
       </div>
-    </div>
+    </form>
   </div>
 </template>
 
@@ -164,13 +151,12 @@ const editForm = ref({
 })
 
 const fillEditForm = () => {
+  const sourcePosition = props.list?.listPosition ?? props.list?.list_position
+
   editForm.value = {
     name: props.list?.name || '',
     public: !!props.list?.public,
-    listPosition:
-        props.list?.listPosition !== null && props.list?.list_position !== undefined
-            ? String(props.list.list_position)
-            : null,
+    listPosition: sourcePosition == null ? '' : String(sourcePosition),
     description: props.list?.description || '',
     category: props.list?.category || '',
     rssFeed: props.list?.rss_feed || '',
@@ -207,12 +193,10 @@ const submitEditList = async () => {
     editError.value = 'Name is required.'
     return
   }
-  const rawPosition = editForm.value.listPosition
 
   let parsedPosition = null
-
-  if (rawPosition != null && String(rawPosition).trim() !== '' && String(rawPosition).trim().toLowerCase() !== 'null') {
-    parsedPosition = Number(rawPosition)
+  if (String(editForm.value.listPosition).trim() !== '') {
+    parsedPosition = Number(editForm.value.listPosition)
   }
 
   if (parsedPosition !== null && (!Number.isInteger(parsedPosition) || parsedPosition < 0)) {
diff --git a/assets/vue/components/lists/ListDirectory.vue b/assets/vue/components/lists/ListDirectory.vue
index 3d55efb..5c94021 100644
--- a/assets/vue/components/lists/ListDirectory.vue
+++ b/assets/vue/components/lists/ListDirectory.vue
@@ -92,7 +92,24 @@
           </td>
         </tr>
 
-        <tr v-if="mailingLists.length === 0">
+        <tr v-if="!isLoading && !loadError && mailingLists.length === 0">
+          <td colspan="4" class="px-6 py-8 text-center text-slate-500">
+            No mailing lists found.
+          </td>
+        </tr>
+        <tr v-if="isLoading">
+          <td colspan="4" class="px-6 py-8 text-center text-slate-500">
+            Loading mailing lists...
+          </td>
+        </tr>
+
+        <tr v-else-if="loadError">
+          <td colspan="4" class="px-6 py-8 text-center text-red-600">
+            {{ loadError }}
+          </td>
+        </tr>
+
+        <tr v-else-if="mailingLists.length === 0">
           <td colspan="4" class="px-6 py-8 text-center text-slate-500">
             No mailing lists found.
           </td>
@@ -164,7 +181,21 @@
         </div>
 
         <div
-            v-if="mailingLists.length === 0"
+            v-if="isLoading"
+            class="px-4 py-8 text-center text-slate-500 text-sm"
+        >
+          Loading mailing lists...
+        </div>
+
+        <div
+            v-else-if="loadError"
+            class="px-4 py-8 text-center text-red-600 text-sm"
+        >
+          {{ loadError }}
+        </div>
+
+        <div
+            v-else-if="mailingLists.length === 0"
             class="px-4 py-8 text-center text-slate-500 text-sm"
         >
           No mailing lists found.
@@ -201,14 +232,14 @@ import BaseIcon from '../base/BaseIcon.vue'
 import CreateListModal from './CreateListModal.vue'
 import EditListModal from './EditListModal.vue'
 import AddSubscribersModal from './AddSubscribersModal.vue'
-
 import { listClient } from '../../api'
 
 const router = useRouter()
 
 const mailingLists = ref([])
+const isLoading = ref(false)
+const loadError = ref('')
 const isCreateModalOpen = ref(false)
-
 const selectedList = ref(null)
 const isEditModalOpen = ref(false)
 const isAddSubscribersModalOpen = ref(false)
@@ -216,6 +247,9 @@ const isAddSubscribersModalOpen = ref(false)
 const fetchMailingLists = async () => {
   const url = new URL('/lists', window.location.origin)
 
+  isLoading.value = true
+  loadError.value = ''
+
   try {
     const response = await fetch(url, {
       headers: {
@@ -224,10 +258,27 @@ const fetchMailingLists = async () => {
       }
     })
 
+    const contentType = response.headers.get('content-type') || ''
+
     if (response.status === 401) {
-      const data = await response.json()
-      window.location.href = data.redirect
-      return
+      if (contentType.includes('application/json')) {
+        const data = await response.json()
+
+        if (data?.redirect) {
+          window.location.href = data.redirect
+          return
+        }
+      }
+
+      throw new Error('Authentication required. Please sign in again.')
+    }
+
+    if (!response.ok) {
+      throw new Error(`Failed to load mailing lists (${response.status}).`)
+    }
+
+    if (!contentType.includes('application/json')) {
+      throw new Error('Server returned an unexpected response format.')
     }
 
     const data = await response.json()
@@ -235,6 +286,9 @@ const fetchMailingLists = async () => {
   } catch (error) {
     console.error('Failed to fetch mailing lists:', error)
     mailingLists.value = []
+    loadError.value = error?.message || 'Failed to load mailing lists.'
+  } finally {
+    isLoading.value = false
   }
 }
 
@@ -295,6 +349,7 @@ const handleListUpdated = async () => {
 }
 
 const handleStartCampaign = (list) => emit('start-campaign', list)
+
 const handleViewMembers = (list) => {
   if (!list?.id) return
 
diff --git a/assets/vue/components/lists/ListSubscribersExportPanel.vue b/assets/vue/components/lists/ListSubscribersExportPanel.vue
index b5f3075..9bb4213 100644
--- a/assets/vue/components/lists/ListSubscribersExportPanel.vue
+++ b/assets/vue/components/lists/ListSubscribersExportPanel.vue
@@ -119,9 +119,25 @@ import client, { subscriberAttributesClient } from '../../api'
 
 onMounted(async () => {
   try {
-    const queryParams = { limit: 5 };
-    const data = await client.get('attributes', queryParams)
-    const dynamicColumns = data.items.map(attr => ({
+    const allAttributes = []
+    let offset = 0
+    const limit = 100
+    let hasMore = true
+
+    while (hasMore) {
+      const data = await client.get('attributes', { limit, offset })
+      const items = Array.isArray(data?.items) ? data.items : []
+
+      allAttributes.push(...items)
+
+      if (items.length < limit) {
+        hasMore = false
+      } else {
+        offset += limit
+      }
+    }
+
+    const dynamicColumns = allAttributes.map(attr => ({
       value: attr.name,
       label: capitalizeFirst(attr.name)
     }))
@@ -131,7 +147,9 @@ onMounted(async () => {
       ...dynamicColumns
     ]
 
-    form.value.columns = columnOptions.value.map(c => c.value)
+    if (!form.value.columns?.length) {
+      form.value.columns = columnOptions.value.map(c => c.value)
+    }
   } catch (err) {
     console.error('Failed to load attribute definitions', err)
   }
@@ -186,7 +204,10 @@ const selectAllColumnsCheckbox = ref(null)
 const usesAnyDate = computed(() => form.value.dateType === 'any')
 
 const allColumnsSelected = computed(() => {
-  return form.value.columns.length === columnOptions.length
+  return (
+      columnOptions.value.length > 0 &&
+      form.value.columns.length === columnOptions.value.length
+  )
 })
 
 const someColumnsSelected = computed(() => {
diff --git a/assets/vue/views/ListSubscribersView.vue b/assets/vue/views/ListSubscribersView.vue
index 1a8bb3b..f51b621 100644
--- a/assets/vue/views/ListSubscribersView.vue
+++ b/assets/vue/views/ListSubscribersView.vue
@@ -11,8 +11,8 @@
           </div>
 
           <RouterLink
-            to="/lists"
-            class="inline-flex items-center gap-2 px-3 py-2 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50"
+              to="/lists"
+              class="inline-flex items-center gap-2 px-3 py-2 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50"
           >
             Back to Lists
           </RouterLink>
@@ -20,13 +20,14 @@
       </div>
 
       <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
-        <div class="p-4 sm:p-6 border-b border-slate-200 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+        <div
+            class="p-4 sm:p-6 border-b border-slate-200 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
           <h3 class="text-lg font-semibold text-slate-900">Subscribers</h3>
           <div class="flex flex-col sm:flex-row gap-2 sm:items-center">
             <label class="text-sm text-slate-600">Status</label>
             <select
-              v-model="statusFilter"
-              class="px-3 py-2 text-sm border border-slate-200 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 outline-none"
+                v-model="statusFilter"
+                class="px-3 py-2 text-sm border border-slate-200 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 outline-none"
             >
               <option value="all">All</option>
               <option value="confirmed">Confirmed</option>
@@ -40,10 +41,10 @@
             <div class="flex flex-wrap items-center gap-2">
               <span class="text-sm text-slate-600">Selected: {{ selectedSubscribers.length }}</span>
               <button
-                type="button"
-                class="px-3 py-2 text-xs font-medium rounded-lg border border-red-200 text-red-700 hover:bg-red-50 disabled:opacity-50"
-                :disabled="!hasSelection || actionLoading"
-                @click="deleteSelectedSubscribers"
+                  type="button"
+                  class="px-3 py-2 text-xs font-medium rounded-lg border border-red-200 text-red-700 hover:bg-red-50 disabled:opacity-50"
+                  :disabled="!hasSelection || actionLoading"
+                  @click="deleteSelectedSubscribers"
               >
                 Delete Selected
               </button>
@@ -51,34 +52,30 @@
 
             <div class="flex flex-col sm:flex-row sm:items-center gap-2 xl:ml-auto">
               <select
-                v-model="selectedTargetListId"
-                class="px-3 py-2 text-sm border border-slate-200 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 outline-none"
-                :disabled="actionLoading"
+                  v-model="selectedTargetListId"
+                  class="px-3 py-2 text-sm border border-slate-200 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 outline-none"
+                  :disabled="actionLoading"
               >
                 <option value="">Select target list</option>
-                <option
-                  v-for="list in availableLists"
-                  :key="list.id"
-                  :value="String(list.id)"
-                >
+                <option v-for="list in availableLists" :key="list.id" :value="String(list.id)">
                   {{ list.name || `List #${list.id}` }}
                 </option>
               </select>
 
               <button
-                type="button"
-                class="px-3 py-2 text-xs font-medium rounded-lg border border-blue-200 text-blue-700 hover:bg-blue-50 disabled:opacity-50"
-                :disabled="!hasSelection || !selectedTargetListId || actionLoading"
-                @click="copySelectedSubscribers"
+                  type="button"
+                  class="px-3 py-2 text-xs font-medium rounded-lg border border-blue-200 text-blue-700 hover:bg-blue-50 disabled:opacity-50"
+                  :disabled="!hasSelection || !selectedTargetListId || actionLoading"
+                  @click="copySelectedSubscribers"
               >
                 Copy Selected
               </button>
 
               <button
-                type="button"
-                class="px-3 py-2 text-xs font-medium rounded-lg border border-amber-200 text-amber-700 hover:bg-amber-50 disabled:opacity-50"
-                :disabled="!hasSelection || !selectedTargetListId || actionLoading"
-                @click="moveSelectedSubscribers"
+                  type="button"
+                  class="px-3 py-2 text-xs font-medium rounded-lg border border-amber-200 text-amber-700 hover:bg-amber-50 disabled:opacity-50"
+                  :disabled="!hasSelection || !selectedTargetListId || actionLoading"
+                  @click="moveSelectedSubscribers"
               >
                 Move Selected
               </button>
@@ -92,73 +89,73 @@
         <div class="overflow-x-auto">
           <table class="w-full text-left text-sm hidden md:table">
             <thead class="bg-slate-50 text-slate-500 font-medium">
-              <tr>
-                <th class="px-4 py-4 w-10">
-                  <input
+            <tr>
+              <th class="px-4 py-4 w-10">
+                <input
                     ref="selectAllCheckbox"
                     type="checkbox"
                     class="w-4 h-4 rounded border-slate-300"
                     :checked="allVisibleSelected"
                     :disabled="filteredSubscribers.length === 0"
                     @change="toggleSelectAllVisible"
-                  >
-                </th>
-                <th class="px-6 py-4">ID</th>
-                <th class="px-6 py-4">Email</th>
-                <th class="px-6 py-4">Status</th>
-                <th class="px-6 py-4">Created</th>
-                <th class="px-6 py-4 text-right">Actions</th>
-              </tr>
+                >
+              </th>
+              <th class="px-6 py-4">ID</th>
+              <th class="px-6 py-4">Email</th>
+              <th class="px-6 py-4">Status</th>
+              <th class="px-6 py-4">Created</th>
+              <th class="px-6 py-4 text-right">Actions</th>
+            </tr>
             </thead>
             <tbody class="divide-y divide-slate-200">
-              <tr v-if="loading">
-                <td colspan="6" class="px-6 py-8 text-center text-slate-500">Loading...</td>
-              </tr>
+            <tr v-if="loading">
+              <td colspan="6" class="px-6 py-8 text-center text-slate-500">Loading...</td>
+            </tr>
 
-              <tr v-else-if="errorMessage">
-                <td colspan="6" class="px-6 py-8 text-center text-red-600">{{ errorMessage }}</td>
-              </tr>
+            <tr v-else-if="errorMessage">
+              <td colspan="6" class="px-6 py-8 text-center text-red-600">{{ errorMessage }}</td>
+            </tr>
 
-              <tr
+            <tr
                 v-for="subscriber in filteredSubscribers"
                 v-else
                 :key="subscriber.id"
                 class="hover:bg-slate-50 transition-colors"
-              >
-                <td class="px-4 py-4">
-                  <input
+            >
+              <td class="px-4 py-4">
+                <input
                     v-model="selectedIds"
                     type="checkbox"
                     class="w-4 h-4 rounded border-slate-300"
                     :value="subscriber.id"
-                  >
-                </td>
-                <td class="px-6 py-4 text-slate-600">{{ subscriber.id }}</td>
-                <td class="px-6 py-4 font-mono text-slate-900">{{ subscriber.email }}</td>
-                <td class="px-6 py-4">
+                >
+              </td>
+              <td class="px-6 py-4 text-slate-600">{{ subscriber.id }}</td>
+              <td class="px-6 py-4 font-mono text-slate-900">{{ subscriber.email }}</td>
+              <td class="px-6 py-4">
                   <span
-                    class="px-2.5 py-0.5 rounded-full text-xs font-medium"
-                    :class="subscriber.confirmed ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700'"
+                      class="px-2.5 py-0.5 rounded-full text-xs font-medium"
+                      :class="subscriber.confirmed ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700'"
                   >
                     {{ subscriber.confirmed ? 'Confirmed' : 'Unconfirmed' }}
                   </span>
-                </td>
-                <td class="px-6 py-4 text-slate-600">{{ formatDate(subscriber.createdAt) }}</td>
-                <td class="px-6 py-4 text-right">
-                  <button
+              </td>
+              <td class="px-6 py-4 text-slate-600">{{ formatDate(subscriber.createdAt) }}</td>
+              <td class="px-6 py-4 text-right">
+                <button
                     type="button"
                     class="px-3 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-700 hover:bg-red-50 disabled:opacity-50"
                     :disabled="actionLoading"
                     @click="deleteSingleSubscriber(subscriber)"
-                  >
-                    Delete
-                  </button>
-                </td>
-              </tr>
-
-              <tr v-if="!loading && !errorMessage && filteredSubscribers.length === 0">
-                <td colspan="6" class="px-6 py-8 text-center text-slate-500">No subscribers for this filter.</td>
-              </tr>
+                >
+                  Delete
+                </button>
+              </td>
+            </tr>
+
+            <tr v-if="!loading && !errorMessage && filteredSubscribers.length === 0">
+              <td colspan="6" class="px-6 py-8 text-center text-slate-500">No subscribers for this filter.</td>
+            </tr>
             </tbody>
           </table>
 
@@ -169,44 +166,44 @@
             <div class="p-4 border-b border-slate-100" v-if="!loading && !errorMessage && filteredSubscribers.length">
               <label class="inline-flex items-center gap-2 text-sm text-slate-700">
                 <input
-                  type="checkbox"
-                  class="w-4 h-4 rounded border-slate-300"
-                  :checked="allVisibleSelected"
-                  @change="toggleSelectAllVisible"
+                    type="checkbox"
+                    class="w-4 h-4 rounded border-slate-300"
+                    :checked="allVisibleSelected"
+                    @change="toggleSelectAllVisible"
                 >
                 Select all visible
               </label>
             </div>
 
             <div
-              v-for="subscriber in filteredSubscribers"
-              :key="`mobile-${subscriber.id}`"
-              class="p-4"
+                v-for="subscriber in filteredSubscribers"
+                :key="`mobile-${subscriber.id}`"
+                class="p-4"
             >
               <div class="flex items-start gap-3">
                 <input
-                  v-model="selectedIds"
-                  type="checkbox"
-                  class="mt-1 w-4 h-4 rounded border-slate-300"
-                  :value="subscriber.id"
+                    v-model="selectedIds"
+                    type="checkbox"
+                    class="mt-1 w-4 h-4 rounded border-slate-300"
+                    :value="subscriber.id"
                 >
 
                 <div class="flex-1 min-w-0">
                   <div class="flex items-center justify-between gap-3">
                     <p class="text-sm font-medium text-slate-900 truncate">{{ subscriber.email }}</p>
                     <span
-                      class="px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap"
-                      :class="subscriber.confirmed ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700'"
+                        class="px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap"
+                        :class="subscriber.confirmed ? 'bg-emerald-100 text-emerald-700' : 'bg-amber-100 text-amber-700'"
                     >
                       {{ subscriber.confirmed ? 'Confirmed' : 'Unconfirmed' }}
                     </span>
                   </div>
-                  <p class="mt-2 text-xs text-slate-500">#{{ subscriber.id }} · {{ formatDate(subscriber.createdAt) }}</p>
+                  <p class="mt-2 text-xs text-slate-500">#{{ subscriber.id }} · {{formatDate(subscriber.createdAt) }}</p>
                   <button
-                    type="button"
-                    class="mt-3 px-3 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-700 hover:bg-red-50 disabled:opacity-50"
-                    :disabled="actionLoading"
-                    @click="deleteSingleSubscriber(subscriber)"
+                      type="button"
+                      class="mt-3 px-3 py-1.5 text-xs font-medium rounded-md border border-red-200 text-red-700 hover:bg-red-50 disabled:opacity-50"
+                      :disabled="actionLoading"
+                      @click="deleteSingleSubscriber(subscriber)"
                   >
                     Delete
                   </button>
@@ -215,30 +212,31 @@
             </div>
 
             <div
-              v-if="!loading && !errorMessage && filteredSubscribers.length === 0"
-              class="px-4 py-8 text-center text-slate-500 text-sm"
+                v-if="!loading && !errorMessage && filteredSubscribers.length === 0"
+                class="px-4 py-8 text-center text-slate-500 text-sm"
             >
               No subscribers for this filter.
             </div>
           </div>
         </div>
 
-        <div class="p-4 sm:p-6 border-t border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-3 text-sm">
+        <div
+            class="p-4 sm:p-6 border-t border-slate-200 flex flex-col sm:flex-row justify-between items-center gap-3 text-sm">
           <span class="text-slate-500">Showing {{ filteredSubscribers.length }} on page · Total: {{ total }}</span>
           <div class="flex gap-2 w-full sm:w-auto">
             <button
-              type="button"
-              class="flex-1 sm:flex-none px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
-              :disabled="!canGoPrevious || loading || actionLoading"
-              @click="previousPage"
+                type="button"
+                class="flex-1 sm:flex-none px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+                :disabled="!canGoPrevious || loading || actionLoading"
+                @click="previousPage"
             >
               Previous
             </button>
             <button
-              type="button"
-              class="flex-1 sm:flex-none px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
-              :disabled="!canGoNext || loading || actionLoading"
-              @click="nextPage"
+                type="button"
+                class="flex-1 sm:flex-none px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors disabled:opacity-50"
+                :disabled="!canGoNext || loading || actionLoading"
+                @click="nextPage"
             >
               Next
             </button>
@@ -246,18 +244,18 @@
         </div>
       </div>
 
-      <ListSubscribersExportPanel :list-id="listId" :list-name="listName" />
+      <ListSubscribersExportPanel :list-id="listId" :list-name="listName"/>
 
     </div>
   </AdminLayout>
 </template>
 
 <script setup>
-import { computed, onMounted, ref, watch, watchEffect } from 'vue'
-import { useRoute } from 'vue-router'
+import {computed, onMounted, ref, watch, watchEffect} from 'vue'
+import {useRoute} from 'vue-router'
 import AdminLayout from '../layouts/AdminLayout.vue'
 import ListSubscribersExportPanel from '../components/lists/ListSubscribersExportPanel.vue'
-import client, { subscriptionClient } from '../api'
+import client, {subscriptionClient} from '../api'
 
 const route = useRoute()
 const listId = computed(() => Number(route.params.listId))
@@ -265,7 +263,7 @@ const listName = ref(typeof route.query.listName === 'string' ? route.query.list
 
 const subscribers = ref([])
 const total = ref(0)
-const pageSize = ref(25)
+const pageSize = ref(10)
 const loading = ref(false)
 const actionLoading = ref(false)
 const errorMessage = ref('')
@@ -292,7 +290,7 @@ const filteredSubscribers = computed(() => {
 })
 
 const selectedSubscribers = computed(() => (
-  subscribers.value.filter((subscriber) => selectedIds.value.includes(subscriber.id))
+    subscribers.value.filter((subscriber) => selectedIds.value.includes(subscriber.id))
 ))
 
 const hasSelection = computed(() => selectedSubscribers.value.length > 0)
@@ -346,8 +344,8 @@ const toggleSelectAllVisible = (event) => {
 }
 
 const getSelectedEmails = () => selectedSubscribers.value
-  .map((subscriber) => subscriber.email)
-  .filter((email) => typeof email === 'string' && email.length > 0)
+    .map((subscriber) => subscriber.email)
+    .filter((email) => typeof email === 'string' && email.length > 0)
 
 const loadListMeta = async () => {
   try {
@@ -404,12 +402,14 @@ const fetchSubscribers = async (cursor = null) => {
     total.value = response.pagination?.total ?? subscribers.value.length
     nextCursor.value = response.pagination?.nextCursor ?? null
     clearSelection()
+    return true
   } catch (error) {
     console.error('Failed to load list subscribers:', error)
     errorMessage.value = 'Failed to load subscribers for this list.'
     subscribers.value = []
     nextCursor.value = null
     clearSelection()
+    return false
   } finally {
     loading.value = false
   }
@@ -422,7 +422,7 @@ const refreshCurrentPage = async () => {
 const deleteEmailsFromCurrentList = async (emails) => {
   if (emails.length === 0) return
   // todo: check why subscription client delete is not working
-  await client.delete(`lists/${listId.value}/subscribers`, { emails })
+  await client.delete(`lists/${listId.value}/subscribers`, {emails})
 }
 
 const deleteSingleSubscriber = async (subscriber) => {
@@ -504,14 +504,29 @@ const moveSelectedSubscribers = async () => {
   if (!confirmed) return
 
   actionLoading.value = true
+  let copied = false
+
   try {
     await subscriptionClient.createSubscriptions(emails, targetListId)
+    copied = true
+
     await deleteEmailsFromCurrentList(emails)
+
     actionMessage.value = `Moved ${emails.length} subscriber(s) to the selected list.`
+    selectedTargetListId.value = ''
     await refreshCurrentPage()
   } catch (error) {
     console.error('Failed to move selected subscribers:', error)
-    actionError.value = 'Failed to move selected subscribers.'
+
+    if (copied) {
+      actionError.value =
+          `Copied ${emails.length} subscriber(s) to the selected list, ` +
+          `but failed to remove them from the current list. ` +
+          `They may now exist in both lists.`
+      await refreshCurrentPage()
+    } else {
+      actionError.value = 'Failed to move selected subscribers.'
+    }
   } finally {
     actionLoading.value = false
   }
@@ -519,14 +534,22 @@ const moveSelectedSubscribers = async () => {
 
 const nextPage = async () => {
   if (nextCursor.value === null || loading.value || actionLoading.value) return
-  cursorHistory.value.push(nextCursor.value)
-  await fetchSubscribers(nextCursor.value)
+
+  const requestedCursor = nextCursor.value
+  const ok = await fetchSubscribers(requestedCursor)
+  if (ok) {
+    cursorHistory.value.push(requestedCursor)
+  }
 }
 
 const previousPage = async () => {
   if (cursorHistory.value.length <= 1 || loading.value || actionLoading.value) return
-  cursorHistory.value.pop()
-  await fetchSubscribers(getCurrentCursor())
+
+  const previousCursor = cursorHistory.value[cursorHistory.value.length - 2]
+  const ok = await fetchSubscribers(previousCursor)
+  if (ok) {
+    cursorHistory.value.pop()
+  }
 }
 
 onMounted(async () => {
diff --git a/src/Controller/ListsController.php b/src/Controller/ListsController.php
index 9bf6983..f52d49d 100644
--- a/src/Controller/ListsController.php
+++ b/src/Controller/ListsController.php
@@ -21,7 +21,9 @@ public function __construct(private readonly ListClient $listClient)
     #[Route('/', name: 'list', methods: ['GET'])]
     public function index(Request $request): JsonResponse|Response
     {
-        if (! $request->isXmlHttpRequest() && $request->headers->get('Accept') !== 'application/json') {
+        $accept = (string) $request->headers->get('Accept', '');
+        $wantsJson = $request->isXmlHttpRequest() || str_contains($accept, 'application/json');
+        if (! $wantsJson) {
             return $this->render('spa.html.twig', [
                 'page' => 'Lists',
                 'api_token' => $request->getSession()->get('auth_token'),
diff --git a/src/Controller/SubscribersController.php b/src/Controller/SubscribersController.php
index a6238ec..f8be8e3 100644
--- a/src/Controller/SubscribersController.php
+++ b/src/Controller/SubscribersController.php
@@ -29,7 +29,9 @@ public function __construct(private readonly SubscribersClient $subscribersClien
     #[Route('/', name: 'list', methods: ['GET'])]
     public function index(Request $request): JsonResponse|Response
     {
-        if (! $request->isXmlHttpRequest() && $request->headers->get('Accept') !== 'application/json') {
+        $accept = (string) $request->headers->get('Accept', '');
+        $wantsJson = $request->isXmlHttpRequest() || str_contains($accept, 'application/json');
+        if (! $wantsJson) {
             return $this->render('spa.html.twig', [
                 'page' => 'Subscribers',
                 'api_token' => $request->getSession()->get('auth_token'),
@@ -37,8 +39,7 @@ public function index(Request $request): JsonResponse|Response
             ]);
         }
 
-        $afterId = (int) $request->query->get('after_id');
-        $limit = max(1, (int) $request->query->get('limit', 10));
+        $afterId = $request->query->has('after_id') ? $request->query->getInt('after_id') : null;
 
         $filter = new SubscribersFilterRequest(
             isConfirmed: $request->query->has('confirmed') ? true :
@@ -49,7 +50,7 @@ public function index(Request $request): JsonResponse|Response
             findValue: $request->query->get('findValue'),
         );
 
-        $collection = $this->subscribersClient->getSubscribers($filter, $afterId, $limit);
+        $collection = $this->subscribersClient->getSubscribers($filter, $afterId, 10);
 
         $history = $request->getSession()->get('subscribers_history', []);
         if (!in_array($afterId, $history, true)) {
@@ -83,7 +84,7 @@ public function index(Request $request): JsonResponse|Response
                 'hasMore' => $collection->pagination->hasMore ,
                 'total' => $collection->pagination->total,
                 'prevId' => $prevId,
-                'isFirstPage' => $afterId === 0,
+                'isFirstPage' => $afterId === null,
             ],
         ];
 

From 0a341aa8b610ef93ecbe1939c6fe3a528351d45b Mon Sep 17 00:00:00 2001
From: Tatevik <tatevikg1@gmail.com>
Date: Thu, 26 Mar 2026 16:12:33 +0400
Subject: [PATCH 6/6] After review 1

---
 src/Controller/SubscribersController.php | 81 +++++++++++++-----------
 1 file changed, 45 insertions(+), 36 deletions(-)

diff --git a/src/Controller/SubscribersController.php b/src/Controller/SubscribersController.php
index f8be8e3..5284147 100644
--- a/src/Controller/SubscribersController.php
+++ b/src/Controller/SubscribersController.php
@@ -9,10 +9,12 @@
 use PhpList\RestApiClient\Entity\Subscriber;
 use PhpList\RestApiClient\Request\Subscriber\ExportSubscriberRequest;
 use PhpList\RestApiClient\Request\Subscriber\SubscribersFilterRequest;
+use PhpList\RestApiClient\Response\Subscribers\SubscriberCollection;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\HttpFoundation\StreamedResponse;
 use Symfony\Component\Routing\Attribute\Route;
 
 #[Route('/subscribers', name: 'subscriber_')]
@@ -66,55 +68,26 @@ public function index(Request $request): JsonResponse|Response
             $prevId = $history[$index - 1];
         }
 
-        $initialData = [
-            'items' => array_map(static function (Subscriber $subscriber) {
-                return [
-                    'id' => $subscriber->id,
-                    'email' => $subscriber->email,
-                    'confirmed' => $subscriber->confirmed,
-                    'blacklisted' => $subscriber->blacklisted,
-                    'createdAt' => (new DateTimeImmutable($subscriber->createdAt))->format('Y-m-d H:i:s'),
-                    'uniqueId' => $subscriber->uniqueId,
-                    'listCount' => count($subscriber->subscribedLists),
-                ];
-            }, $collection->items ?? []),
-            'pagination' => [
-                'limit' => $collection->pagination->limit,
-                'afterId' => $collection->pagination->nextCursor,
-                'hasMore' => $collection->pagination->hasMore ,
-                'total' => $collection->pagination->total,
-                'prevId' => $prevId,
-                'isFirstPage' => $afterId === null,
-            ],
-        ];
-
-        return $this->json($initialData);
+        return $this->json($this->normalize($collection, $prevId, $afterId));
     }
 
+    /**
+     * @SuppressWarnings("CyclomaticComplexity")
+     * @SuppressWarnings("NPathComplexity")
+     */
     #[Route('/export', name: 'export', methods: ['GET'])]
     public function export(Request $request): Response
     {
-        $columns = array_values(
-            array_filter(
-                $request->query->all('columns'),
-                static fn (mixed $value): bool => is_string($value) && $value !== ''
-            )
-        );
-
-        $defaultRequest = new ExportSubscriberRequest();
-
         $exportRequest = new ExportSubscriberRequest(
             dateType: (string) $request->query->get('date_type', 'any'),
             listId: $request->query->has('list_id') ? $request->query->getInt('list_id') : null,
             dateFrom: $request->query->get('date_from') ?: null,
             dateTo: $request->query->get('date_to') ?: null,
-            columns: $columns === [] ? $defaultRequest->columns : $columns
+            columns: array_values(array_filter($request->query->all('columns')))
         );
 
         $upstreamResponse = $this->subscribersClient->exportSubscribers($exportRequest);
 
-        $content = (string) $upstreamResponse->getBody();
-
         $contentType = $upstreamResponse->getHeaderLine('Content-Type');
         if ($contentType === '') {
             $contentType = 'text/csv; charset=UTF-8';
@@ -128,10 +101,46 @@ public function export(Request $request): Response
             );
         }
 
-        $response = new Response($content);
+        $body = $upstreamResponse->getBody();
+        $response = new StreamedResponse(
+            static function () use ($body): void {
+                if ($body->isSeekable()) {
+                    $body->rewind();
+                }
+                while (! $body->eof()) {
+                    echo $body->read(8192);
+                }
+            },
+            $upstreamResponse->getStatusCode()
+        );
         $response->headers->set('Content-Type', $contentType);
         $response->headers->set('Content-Disposition', $contentDisposition);
 
         return $response;
     }
+
+    private function normalize(SubscriberCollection $collection, ?int $prevId, ?int $afterId): array
+    {
+        return [
+            'items' => array_map(static function (Subscriber $subscriber) {
+                return [
+                    'id' => $subscriber->id,
+                    'email' => $subscriber->email,
+                    'confirmed' => $subscriber->confirmed,
+                    'blacklisted' => $subscriber->blacklisted,
+                    'createdAt' => (new DateTimeImmutable($subscriber->createdAt))->format('Y-m-d H:i:s'),
+                    'uniqueId' => $subscriber->uniqueId,
+                    'listCount' => count($subscriber->subscribedLists),
+                ];
+            }, $collection->items ?? []),
+            'pagination' => [
+                'limit' => $collection->pagination->limit,
+                'afterId' => $collection->pagination->nextCursor,
+                'hasMore' => $collection->pagination->hasMore ,
+                'total' => $collection->pagination->total,
+                'prevId' => $prevId,
+                'isFirstPage' => $afterId === null,
+            ],
+        ];
+    }
 }