feat(library): clickable list-view column headers for sorting (#625)

fe/src/__tests__/AudiobooksView.spec.ts

@@ -796,3 +796,94 @@ describe('AudiobooksView Grouping', () => {
     expect(wrapper.find('.series-bottom-placard').exists()).toBe(true)
   })
 })
+
+describe('AudiobooksView list header sorting', () => {
+  beforeEach(() => {
+    const pinia = createPinia()
+    setActivePinia(pinia)
+  })
+
+  it('sorts on column header click, toggles direction, and exposes ARIA sort state', async () => {
+    if (
+      typeof (globalThis as unknown as { ResizeObserver?: unknown }).ResizeObserver === 'undefined'
+    ) {
+      ;(globalThis as unknown as Record<string, unknown>).ResizeObserver = class {
+        observe() {}
+        disconnect() {}
+      }
+    }
+    if (typeof (globalThis as unknown as { WebSocket?: unknown }).WebSocket === 'undefined') {
+      ;(globalThis as unknown as Record<string, unknown>).WebSocket = function () {
+        /* noop */
+      }
+    }
+
+    const pinia = createPinia()
+    setActivePinia(pinia)
+    const router = createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        { path: '/', name: 'home', component: { template: '<div />' } },
+        { path: '/audiobooks', name: 'audiobooks', component: AudiobooksView },
+      ],
+    })
+    await router.push('/audiobooks')
+    await router.isReady().catch(() => {})
+
+    const store = useLibraryStore()
+    store.audiobooks = [
+      { id: 1, title: 'Book 1', authors: ['Author A'], imageUrl: 'cover1.jpg', files: [] },
+      { id: 2, title: 'Book 2', authors: ['Author B'], imageUrl: 'cover2.jpg', files: [] },
+    ] as unknown as import('@/types').Audiobook[]
+
+    store.fetchLibrary = vi.fn(async () => undefined)
+    // List view, books grouping so the sortable list header renders
+    localStorage.setItem('listenarr.groupBy', 'books')
+    localStorage.setItem('listenarr.viewMode', 'list')
+    const wrapper = mount(AudiobooksView, {
+      global: {
+        plugins: [pinia, router],
+        stubs: [
+          'BulkEditModal',
+          'EditAudiobookModal',
+          'CustomFilterModal',
+          'FiltersDropdown',
+          'CustomSelect',
+        ],
+      },
+    })
+    await new Promise((r) => setTimeout(r, 0))
+
+    const vm = wrapper.vm as unknown
+    vm.viewMode = 'list'
+    await wrapper.vm.$nextTick()
+
+    const titleHeader = wrapper.find('.col-title.col-sortable')
+    const statusHeader = wrapper.find('.col-status.col-sortable')
+    expect(titleHeader.exists()).toBe(true)
+    expect(statusHeader.exists()).toBe(true)
+    // Keyboard accessibility attributes are present
+    expect(statusHeader.attributes('role')).toBe('button')
+    expect(statusHeader.attributes('tabindex')).toBe('0')
+    // Books default sort is title/asc, so the title header starts active and status is inactive
+    expect(titleHeader.attributes('aria-sort')).toBe('ascending')
+    expect(statusHeader.attributes('aria-sort')).toBe('none')
+
+    // Click a new (inactive) header → sorts by it, ascending, with a direction icon
+    await statusHeader.trigger('click')
+    expect(vm.sortKey).toBe('status')
+    expect(vm.sortOrder).toBe('asc')
+    expect(wrapper.find('.col-status.col-sortable').attributes('aria-sort')).toBe('ascending')
+    expect(wrapper.find('.col-status.col-sortable .sort-icon').exists()).toBe(true)
+
+    // Click the same header again → reverses direction
+    await wrapper.find('.col-status.col-sortable').trigger('click')
+    expect(vm.sortOrder).toBe('desc')
+    expect(wrapper.find('.col-status.col-sortable').attributes('aria-sort')).toBe('descending')
+
+    // Keyboard activation (Enter) on a different header sorts by it, resetting to ascending
+    await wrapper.find('.col-title.col-sortable').trigger('keydown.enter')
+    expect(vm.sortKey).toBe('title')
+    expect(vm.sortOrder).toBe('asc')
+  })
+})

fe/src/views/library/AudiobooksView.vue

@@ -532,8 +532,38 @@
           <div v-if="audiobooks.length > 0" class="list-header">
             <div class="col-select"></div>
             <div class="col-cover">Cover</div>
-            <div class="col-title">Title / Author</div>
-            <div class="col-status">Status</div>
+            <div
+              class="col-title col-sortable"
+              role="button"
+              tabindex="0"
+              aria-label="Sort by title"
+              :aria-sort="
+                sortKey === 'title' ? (sortOrder === 'asc' ? 'ascending' : 'descending') : 'none'
+              "
+              @click="sortKeyProxy = 'title'"
+              @keydown.enter.prevent="sortKeyProxy = 'title'"
+              @keydown.space.prevent="sortKeyProxy = 'title'"
+            >
+              Title / Author
+              <PhArrowUp v-if="sortKey === 'title' && sortOrder === 'asc'" class="sort-icon" />
+              <PhArrowDown v-if="sortKey === 'title' && sortOrder === 'desc'" class="sort-icon" />
+            </div>
+            <div
+              class="col-status col-sortable"
+              role="button"
+              tabindex="0"
+              aria-label="Sort by status"
+              :aria-sort="
+                sortKey === 'status' ? (sortOrder === 'asc' ? 'ascending' : 'descending') : 'none'
+              "
+              @click="sortKeyProxy = 'status'"
+              @keydown.enter.prevent="sortKeyProxy = 'status'"
+              @keydown.space.prevent="sortKeyProxy = 'status'"
+            >
+              Status
+              <PhArrowUp v-if="sortKey === 'status' && sortOrder === 'asc'" class="sort-icon" />
+              <PhArrowDown v-if="sortKey === 'status' && sortOrder === 'desc'" class="sort-icon" />
+            </div>
             <div class="col-actions">Actions</div>
           </div>
           <div
@@ -809,6 +839,8 @@ import {
   PhUser,
   PhBooks,
   PhFolderOpen,
+  PhArrowUp,
+  PhArrowDown,
 } from '@phosphor-icons/vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useLibraryStore } from '@/stores/library'
@@ -3881,6 +3913,27 @@ defineExpose({
 .list-header .col-actions {
   text-align: right;
 }
+.list-header .col-sortable {
+  cursor: pointer;
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.list-header .col-sortable:hover {
+  color: #fff;
+  opacity: 1;
+}
+.list-header .col-sortable:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+.sort-icon {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
 
 /* Position badges between details and actions */
 .list-badges {