From 98452ad99ca6136427004ce9dc277fa25939c7a4 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Fri, 17 Jul 2026 02:15:25 +0200
Subject: [PATCH 1/4] feat(admin-settings): enable name sorting for extension
 overview

---
 AGENTS.md                                     |  1 +
 .../components/Extensions/ExtensionsList.vue  | 24 +++++++++++++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 786f239c14..11fb142fc6 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -72,6 +72,7 @@ Enforced via ESLint (`packages/eslint-config`). Run `pnpm lint` to check.
 - **TypeScript everywhere** – use types to catch bugs at compile time and support IDE tooling.
 - **Composables over services** – encapsulate reusable logic in composables. Avoid services.
 - **Early returns** – prefer early returns to keep code readable and performant.
+- **Arrow functions** – Prefer arrow functions for concise, modern, and readable code.
 - **Translations** – use `$gettext` (or its variants) for all user-facing strings. Don't manually edit the generated `l10n/translations.json` files inside a package.
 - **Minimal dependencies** – avoid adding new dependencies unless necessary, to keep bundle size small and reduce security surface.
 - **Vue unref() vs .value** – prefer `unref()` for accessing Ref values for better readability. Use `.value` only when setting values (e.g. `foo.value = 'bar'` or `foo.value.push('bar')`).
diff --git a/packages/web-app-admin-settings/src/components/Extensions/ExtensionsList.vue b/packages/web-app-admin-settings/src/components/Extensions/ExtensionsList.vue
index 7ef81c496c..24c8fe64c1 100644
--- a/packages/web-app-admin-settings/src/components/Extensions/ExtensionsList.vue
+++ b/packages/web-app-admin-settings/src/components/Extensions/ExtensionsList.vue
@@ -14,11 +14,14 @@
   <oc-table
     v-else
     :data-testid="'extensions-table'"
+    :sort-by="sortBy"
+    :sort-dir="sortDir"
     :fields="fields"
-    :data="filteredExtensions"
+    :data="items"
     :hover="true"
     :sticky="true"
     class="extensions-table"
+    @sort="handleSort"
   >
     <template #name="{ item }">
       <div class="flex items-center gap-2">
@@ -52,7 +55,8 @@
 
 <script setup lang="ts">
 import { NoContentMessage } from '@opencloud-eu/web-pkg'
-import { computed, unref } from 'vue'
+import { SortDir } from '@opencloud-eu/design-system/helpers'
+import { computed, ref, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 
 interface ExtensionInfo {
@@ -68,6 +72,8 @@ const { extensions, filterTerm = '' } = defineProps<{
 }>()
 
 const { $gettext } = useGettext()
+const sortBy = ref<keyof ExtensionInfo>('name')
+const sortDir = ref<SortDir>(SortDir.Asc)
 
 const filteredExtensions = computed(() => {
   const term = unref(filterTerm).toLowerCase()
@@ -81,11 +87,25 @@ const filteredExtensions = computed(() => {
   })
 })
 
+const items = computed(() => {
+  return [...unref(filteredExtensions)].sort((a, b) => {
+    const c = (a[unref(sortBy)] || '').toString()
+    const d = (b[unref(sortBy)] || '').toString()
+    return unref(sortDir) === SortDir.Desc ? d.localeCompare(c) : c.localeCompare(d)
+  })
+})
+
+function handleSort(event: { sortBy: string; sortDir: SortDir }) {
+  sortBy.value = event.sortBy as keyof ExtensionInfo
+  sortDir.value = event.sortDir
+}
+
 const fields = computed(() => [
   {
     name: 'name',
     title: $gettext('Name'),
     type: 'slot',
+    sortable: true,
     thClass: 'pl-4',
     tdClass: 'pl-4',
     width: 'expand' as const

From 19a729a2722deed78d077281eee4235c25c2be44 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Fri, 17 Jul 2026 02:18:23 +0200
Subject: [PATCH 2/4] add unit tests

---
 .../Extensions/ExtensionsList.spec.ts         | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-admin-settings/tests/unit/components/Extensions/ExtensionsList.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Extensions/ExtensionsList.spec.ts
index b92261773f..35afd012d0 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Extensions/ExtensionsList.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Extensions/ExtensionsList.spec.ts
@@ -1,4 +1,5 @@
 import ExtensionsList from '../../../../src/components/Extensions/ExtensionsList.vue'
+import { SortDir } from '@opencloud-eu/design-system/helpers'
 import { defaultPlugins, mount } from '@opencloud-eu/web-test-helpers'
 
 const extensions = [
@@ -29,15 +30,36 @@ describe('ExtensionsList', () => {
     expect(wrapper.find('no-content-message-stub').exists()).toBeTruthy()
     expect(wrapper.find('oc-table-stub').exists()).toBeFalsy()
   })
+
+  it('sorts by name ascending and descending', () => {
+    const { wrapper } = getWrapper({
+      extensions: [
+        { name: 'Zulu', version: '1.0.0', loaded: true },
+        { name: 'Alpha', version: '2.0.0', loaded: true }
+      ]
+    })
+
+    ;(wrapper.vm as any).handleSort({ sortBy: 'name', sortDir: SortDir.Asc })
+    expect((wrapper.vm as any).items.map((item: { name: string }) => item.name)).toEqual([
+      'Alpha',
+      'Zulu'
+    ])
+
+    ;(wrapper.vm as any).handleSort({ sortBy: 'name', sortDir: SortDir.Desc })
+    expect((wrapper.vm as any).items.map((item: { name: string }) => item.name)).toEqual([
+      'Zulu',
+      'Alpha'
+    ])
+  })
 })
 
-function getWrapper({
+const getWrapper = ({
   extensions: extensionData = extensions,
   filterTerm = ''
 }: {
   extensions?: { name: string; version?: string; loaded: boolean }[]
   filterTerm?: string
-} = {}) {
+} = {}) => {
   return {
     wrapper: mount(ExtensionsList, {
       props: {

From 4c4c0fdd08f05ff6635ebab358f65de9b28a38b0 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Fri, 17 Jul 2026 05:12:26 +0200
Subject: [PATCH 3/4] format

---
 .../tests/unit/components/Extensions/ExtensionsList.spec.ts      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web-app-admin-settings/tests/unit/components/Extensions/ExtensionsList.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Extensions/ExtensionsList.spec.ts
index 35afd012d0..9d07116eed 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Extensions/ExtensionsList.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Extensions/ExtensionsList.spec.ts
@@ -44,7 +44,6 @@ describe('ExtensionsList', () => {
       'Alpha',
       'Zulu'
     ])
-
     ;(wrapper.vm as any).handleSort({ sortBy: 'name', sortDir: SortDir.Desc })
     expect((wrapper.vm as any).items.map((item: { name: string }) => item.name)).toEqual([
       'Zulu',

From 31bf55900bb8a00b4d404a161a67b921ec58a053 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Fri, 17 Jul 2026 09:21:08 +0200
Subject: [PATCH 4/4] undo AGENTS.md changes

---
 AGENTS.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/AGENTS.md b/AGENTS.md
index 11fb142fc6..786f239c14 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -72,7 +72,6 @@ Enforced via ESLint (`packages/eslint-config`). Run `pnpm lint` to check.
 - **TypeScript everywhere** – use types to catch bugs at compile time and support IDE tooling.
 - **Composables over services** – encapsulate reusable logic in composables. Avoid services.
 - **Early returns** – prefer early returns to keep code readable and performant.
-- **Arrow functions** – Prefer arrow functions for concise, modern, and readable code.
 - **Translations** – use `$gettext` (or its variants) for all user-facing strings. Don't manually edit the generated `l10n/translations.json` files inside a package.
 - **Minimal dependencies** – avoid adding new dependencies unless necessary, to keep bundle size small and reduce security surface.
 - **Vue unref() vs .value** – prefer `unref()` for accessing Ref values for better readability. Use `.value` only when setting values (e.g. `foo.value = 'bar'` or `foo.value.push('bar')`).