From 71a6bf6109e185655abe752c4652c8ecdb26a11c Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 30 Jul 2024 07:12:05 +0200
Subject: [PATCH 01/30] feat: bootstrap app store app

---
 dev/docker/ocis.web.config.json               |  3 +-
 .../src/components/OcImage/OcImage.vue        |  2 +-
 packages/web-app-app-store/package.json       | 21 ++++
 packages/web-app-app-store/src/appid.ts       |  1 +
 .../src/components/AppListItem.vue            | 75 ++++++++++++++
 .../src/composables/actions/index.ts          |  1 +
 .../actions/useAppActionsDownload.ts          | 34 +++++++
 .../src/composables/index.ts                  |  1 +
 packages/web-app-app-store/src/index.ts       | 98 +++++++++++++++++++
 .../web-app-app-store/src/piniaStores/apps.ts | 41 ++++++++
 .../src/piniaStores/index.ts                  |  2 +
 .../src/piniaStores/repositories.ts           | 17 ++++
 packages/web-app-app-store/src/types.ts       | 57 +++++++++++
 .../web-app-app-store/src/views/AppList.vue   | 43 ++++++++
 .../web-pkg/src/components/BatchActions.vue   |  2 +-
 .../ContextActions/ActionMenuItem.vue         |  2 +-
 pnpm-lock.yaml                                | 36 ++++++-
 17 files changed, 431 insertions(+), 5 deletions(-)
 create mode 100644 packages/web-app-app-store/package.json
 create mode 100644 packages/web-app-app-store/src/appid.ts
 create mode 100644 packages/web-app-app-store/src/components/AppListItem.vue
 create mode 100644 packages/web-app-app-store/src/composables/actions/index.ts
 create mode 100644 packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts
 create mode 100644 packages/web-app-app-store/src/composables/index.ts
 create mode 100644 packages/web-app-app-store/src/index.ts
 create mode 100644 packages/web-app-app-store/src/piniaStores/apps.ts
 create mode 100644 packages/web-app-app-store/src/piniaStores/index.ts
 create mode 100644 packages/web-app-app-store/src/piniaStores/repositories.ts
 create mode 100644 packages/web-app-app-store/src/types.ts
 create mode 100644 packages/web-app-app-store/src/views/AppList.vue

diff --git a/dev/docker/ocis.web.config.json b/dev/docker/ocis.web.config.json
index 1bb559ba936..cfcc6cb58e0 100644
--- a/dev/docker/ocis.web.config.json
+++ b/dev/docker/ocis.web.config.json
@@ -20,7 +20,8 @@
     "admin-settings",
     "ocm",
     "webfinger",
-    "epub-reader"
+    "epub-reader",
+    "app-store"
   ],
   "external_apps": [
     {
diff --git a/packages/design-system/src/components/OcImage/OcImage.vue b/packages/design-system/src/components/OcImage/OcImage.vue
index 922f28a1553..2d87b771a20 100644
--- a/packages/design-system/src/components/OcImage/OcImage.vue
+++ b/packages/design-system/src/components/OcImage/OcImage.vue
@@ -1,5 +1,5 @@
 <template>
-  <img :src="src" :alt="alt" :aria-hidden="`${!alt}`" :title="title" :loading="loadingType" />
+  <img :src="src" :alt="alt" :aria-hidden="`${ariaHidden}`" :title="title" :loading="loadingType" />
 </template>
 <script lang="ts">
 import { PropType } from 'vue'
diff --git a/packages/web-app-app-store/package.json b/packages/web-app-app-store/package.json
new file mode 100644
index 00000000000..f71f3a11005
--- /dev/null
+++ b/packages/web-app-app-store/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "web-app-app-store",
+  "version": "0.0.0",
+  "private": true,
+  "description": "ownCloud app store",
+  "license": "AGPL-3.0",
+  "devDependencies": {
+    "web-test-helpers": "workspace:*"
+  },
+  "peerDependencies": {
+    "@ownclouders/web-client": "workspace:*",
+    "@ownclouders/web-pkg": "workspace:*",
+    "axios": "1.6.8",
+    "design-system": "workspace:@ownclouders/design-system@*",
+    "lodash-es": "4.17.21",
+    "pinia": "2.1.7",
+    "vue-concurrency": "5.0.1",
+    "web-app-app-store": "workspace:*",
+    "zod": "^3.22.4"
+  }
+}
diff --git a/packages/web-app-app-store/src/appid.ts b/packages/web-app-app-store/src/appid.ts
new file mode 100644
index 00000000000..7931422ff9e
--- /dev/null
+++ b/packages/web-app-app-store/src/appid.ts
@@ -0,0 +1 @@
+export const APPID = 'app-store'
diff --git a/packages/web-app-app-store/src/components/AppListItem.vue b/packages/web-app-app-store/src/components/AppListItem.vue
new file mode 100644
index 00000000000..82a0207ccc5
--- /dev/null
+++ b/packages/web-app-app-store/src/components/AppListItem.vue
@@ -0,0 +1,75 @@
+<template>
+  <li class="app-list-item oc-flex oc-flex-row oc-flex-middle">
+    <div class="app-cover-image">
+      <oc-img v-if="app.coverImage?.url" :src="app.coverImage?.url" />
+      <oc-icon v-else name="computer" size="xlarge" />
+    </div>
+    <div class="app-content">
+      <h3 class="oc-my-s">{{ app.name }}</h3>
+      <p class="oc-my-s">{{ app.subtitle }}</p>
+    </div>
+    <oc-list class="app-actions">
+      <action-menu-item
+        v-for="action in actions"
+        :key="`app-action-${action.name}`"
+        :action="action"
+        :action-options="{ app }"
+      />
+    </oc-list>
+  </li>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from 'vue'
+import { App } from '../types'
+import { ActionMenuItem } from '@ownclouders/web-pkg'
+import { useAppActionsDownload } from '../composables'
+
+export default defineComponent({
+  name: 'AppListItem',
+  components: { ActionMenuItem },
+  props: {
+    app: {
+      type: Object as PropType<App>,
+      required: true
+    }
+  },
+  setup() {
+    const { downloadAppAction } = useAppActionsDownload()
+
+    const actions = computed(() => {
+      return [downloadAppAction]
+    })
+    return {
+      actions
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.app-list-item {
+  gap: 1rem;
+
+  .app-cover-image {
+    width: 100px;
+    height: 80px;
+
+    img {
+      object-fit: contain;
+      width: 100%;
+      max-width: 100px;
+      height: 100%;
+      max-height: 80px;
+    }
+  }
+
+  .app-content {
+    flex-grow: 1;
+  }
+
+  .app-actions {
+    flex-shrink: 1;
+  }
+}
+</style>
diff --git a/packages/web-app-app-store/src/composables/actions/index.ts b/packages/web-app-app-store/src/composables/actions/index.ts
new file mode 100644
index 00000000000..9158614212a
--- /dev/null
+++ b/packages/web-app-app-store/src/composables/actions/index.ts
@@ -0,0 +1 @@
+export * from './useAppActionsDownload'
diff --git a/packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts b/packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts
new file mode 100644
index 00000000000..457a7e80b14
--- /dev/null
+++ b/packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts
@@ -0,0 +1,34 @@
+import { Action, triggerDownloadWithFilename } from '@ownclouders/web-pkg'
+import { useGettext } from 'vue3-gettext'
+import { App } from '../../types'
+
+export type AppActionOptions = {
+  app: App
+}
+
+export const useAppActionsDownload = () => {
+  const { $gettext } = useGettext()
+
+  const downloadAppAction: Action<AppActionOptions> = {
+    name: 'download-app',
+    icon: 'download',
+    label: () => {
+      return $gettext('Download')
+    },
+    handler: (options?) => {
+      console.log('Download App', options?.app.name)
+      const version = options.app.versions[0]
+      const filename = version.filename || version.url.split('/').pop()
+      triggerDownloadWithFilename(version.url, filename)
+    },
+    isVisible: () => {
+      return true
+    },
+    componentType: 'button',
+    appearance: 'outline'
+  }
+
+  return {
+    downloadAppAction
+  }
+}
diff --git a/packages/web-app-app-store/src/composables/index.ts b/packages/web-app-app-store/src/composables/index.ts
new file mode 100644
index 00000000000..9fef387da76
--- /dev/null
+++ b/packages/web-app-app-store/src/composables/index.ts
@@ -0,0 +1 @@
+export * from './actions'
diff --git a/packages/web-app-app-store/src/index.ts b/packages/web-app-app-store/src/index.ts
new file mode 100644
index 00000000000..9b864ac62fc
--- /dev/null
+++ b/packages/web-app-app-store/src/index.ts
@@ -0,0 +1,98 @@
+import { useGettext } from 'vue3-gettext'
+import { computed, unref } from 'vue'
+import {
+  AppMenuItemExtension,
+  defineWebApplication,
+  Extension,
+  useAbility,
+  useUserStore
+} from '@ownclouders/web-pkg'
+import { urlJoin } from '@ownclouders/web-client'
+import { RouteRecordRaw } from 'vue-router'
+import { useAppsStore, useRepositoriesStore } from './piniaStores'
+import { AppStoreConfigSchema } from './types'
+import { APPID } from './appid'
+export default defineWebApplication({
+  setup({ applicationConfig }) {
+    const { $gettext } = useGettext()
+    const { can } = useAbility()
+    const userStore = useUserStore()
+    const repositoryStore = useRepositoriesStore()
+
+    const defaultRepositories = [
+      {
+        name: 'awesome-ocis',
+        url: 'https://raw.githubusercontent.com/owncloud/awesome-ocis/main/webApps/apps.json'
+      }
+    ]
+    if (applicationConfig?.repositories) {
+      const { repositories } = AppStoreConfigSchema.parse(applicationConfig)
+      repositoryStore.setRepositories(repositories || defaultRepositories)
+    } else {
+      repositoryStore.setRepositories(defaultRepositories)
+    }
+
+    const appInfo = {
+      name: $gettext('App Store'),
+      id: APPID,
+      icon: 'store',
+      color: '#ff6961'
+    }
+
+    const hasPermission = computed(() => {
+      // TODO: which permission(s) do we need to check here?
+      return userStore.user && can('read-all', 'Setting')
+    })
+
+    const routes: RouteRecordRaw[] = [
+      {
+        path: '/',
+        redirect: urlJoin(appInfo.id, 'list')
+      },
+      {
+        path: '/list',
+        name: 'list',
+        component: () => import('./views/AppList.vue'),
+        beforeEnter: (to, from, next) => {
+          if (!unref(hasPermission)) {
+            return next({ path: '/' })
+          }
+          next()
+        },
+        meta: {
+          authContext: 'user',
+          title: $gettext('App Store')
+        }
+      }
+    ]
+
+    const menuItemExtension: AppMenuItemExtension = {
+      id: `app.${appInfo.id}.menuItem`,
+      type: 'appMenuItem',
+      label: () => appInfo.name,
+      color: appInfo.color,
+      icon: appInfo.icon,
+      priority: 30,
+      path: urlJoin(appInfo.id)
+    }
+    const extensions = computed(() => {
+      const result: Extension[] = []
+
+      if (unref(hasPermission)) {
+        result.push(menuItemExtension)
+      }
+
+      return result
+    })
+
+    return {
+      appInfo,
+      routes,
+      extensions,
+      ready: () => {
+        const appsStore = useAppsStore()
+        return appsStore.loadApps()
+      }
+    }
+  }
+})
diff --git a/packages/web-app-app-store/src/piniaStores/apps.ts b/packages/web-app-app-store/src/piniaStores/apps.ts
new file mode 100644
index 00000000000..aa22b3e1138
--- /dev/null
+++ b/packages/web-app-app-store/src/piniaStores/apps.ts
@@ -0,0 +1,41 @@
+import { defineStore } from 'pinia'
+import { App, AppStoreRepository, RawAppListSchema } from '../types'
+import { ref } from 'vue'
+import { APPID } from '../appid'
+import { useRepositoriesStore } from './repositories'
+
+export const useAppsStore = defineStore(`${APPID}-apps`, () => {
+  const apps = ref<App[]>([])
+
+  const repositoriesStore = useRepositoriesStore()
+
+  const loadApps = async () => {
+    const loadAppsByRepo = async (repo: AppStoreRepository): Promise<App[]> => {
+      try {
+        const data = await fetch(repo.url)
+        const appsListData = await data.json()
+        const appsList = RawAppListSchema.parse(appsListData)
+        return appsList.apps.map((app) => {
+          return {
+            ...app,
+            repository: repo
+          }
+        })
+      } catch (e) {
+        console.error(e)
+        return []
+      }
+    }
+
+    const loadAppsPromises: Promise<App[]>[] = []
+    for (const repo of repositoriesStore.repositories) {
+      loadAppsPromises.push(loadAppsByRepo(repo))
+    }
+    apps.value = (await Promise.all(loadAppsPromises)).flat()
+  }
+
+  return {
+    apps,
+    loadApps
+  }
+})
diff --git a/packages/web-app-app-store/src/piniaStores/index.ts b/packages/web-app-app-store/src/piniaStores/index.ts
new file mode 100644
index 00000000000..996943c305d
--- /dev/null
+++ b/packages/web-app-app-store/src/piniaStores/index.ts
@@ -0,0 +1,2 @@
+export * from './apps'
+export * from './repositories'
diff --git a/packages/web-app-app-store/src/piniaStores/repositories.ts b/packages/web-app-app-store/src/piniaStores/repositories.ts
new file mode 100644
index 00000000000..71c259be80d
--- /dev/null
+++ b/packages/web-app-app-store/src/piniaStores/repositories.ts
@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+import { AppStoreRepository } from '../types'
+import { ref } from 'vue'
+import { APPID } from '../appid'
+
+export const useRepositoriesStore = defineStore(`${APPID}-repositories`, () => {
+  const repositories = ref<AppStoreRepository[]>([])
+
+  const setRepositories = (repos: AppStoreRepository[]) => {
+    repositories.value = repos
+  }
+
+  return {
+    repositories,
+    setRepositories
+  }
+})
diff --git a/packages/web-app-app-store/src/types.ts b/packages/web-app-app-store/src/types.ts
new file mode 100644
index 00000000000..9a4587fe47a
--- /dev/null
+++ b/packages/web-app-app-store/src/types.ts
@@ -0,0 +1,57 @@
+import { z } from 'zod'
+
+export const AppStoreRepositorySchema = z.object({
+  name: z.string(),
+  url: z.string()
+})
+export type AppStoreRepository = z.infer<typeof AppStoreRepositorySchema>
+
+export const AppStoreConfigSchema = z.object({
+  repositories: z.array(AppStoreRepositorySchema)
+})
+
+export const AppVersionSchema = z.object({
+  version: z.string(),
+  url: z.string(),
+  filename: z.string().optional()
+})
+
+export const AppAuthorSchema = z.object({
+  name: z.string(),
+  email: z.string().optional(),
+  url: z.string().optional()
+})
+
+export const AppImageSchema = z.object({
+  url: z.string(),
+  caption: z.string().optional()
+})
+
+export const AppResourceSchema = z.object({
+  url: z.string(),
+  label: z.string(),
+  icon: z.string().optional()
+})
+
+export const RawAppSchema = z.object({
+  id: z.string(),
+  name: z.string(),
+  subtitle: z.string(),
+  description: z.string().optional(),
+  license: z.string(),
+  versions: z.array(AppVersionSchema),
+  authors: z.array(AppAuthorSchema),
+  tags: z.array(z.string()),
+  coverImage: AppImageSchema.optional(),
+  screenshots: z.array(AppImageSchema).optional().default([]),
+  resources: z.array(AppResourceSchema).optional().default([]) // e.g. documentation, github, etc.
+})
+
+export const AppSchema = RawAppSchema.extend({
+  repository: AppStoreRepositorySchema
+})
+export type App = z.infer<typeof AppSchema>
+
+export const RawAppListSchema = z.object({
+  apps: z.array(RawAppSchema)
+})
diff --git a/packages/web-app-app-store/src/views/AppList.vue b/packages/web-app-app-store/src/views/AppList.vue
new file mode 100644
index 00000000000..d8fcda318a1
--- /dev/null
+++ b/packages/web-app-app-store/src/views/AppList.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="app-list oc-px">
+    <h2 v-text="$gettext('Apps')" />
+    <oc-list>
+      <app-list-item
+        v-for="app in sortedApps"
+        :key="`app-${app.repository.name}-${app.id}`"
+        :app="app"
+        class="oc-my-m"
+      />
+    </oc-list>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, unref } from 'vue'
+import { useAppsStore } from '../piniaStores'
+import AppListItem from '../components/AppListItem.vue'
+import { storeToRefs } from 'pinia'
+
+export default defineComponent({
+  name: 'AppList',
+  components: { AppListItem },
+  setup() {
+    const appsStore = useAppsStore()
+    const { apps } = storeToRefs(appsStore)
+
+    const sortedApps = computed(() => {
+      return unref(apps).sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
+    })
+
+    return {
+      sortedApps
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.app-list {
+  overflow: auto;
+}
+</style>
diff --git a/packages/web-pkg/src/components/BatchActions.vue b/packages/web-pkg/src/components/BatchActions.vue
index 835c86f1a00..1fcdf6af6ff 100644
--- a/packages/web-pkg/src/components/BatchActions.vue
+++ b/packages/web-pkg/src/components/BatchActions.vue
@@ -21,7 +21,7 @@
 <script lang="ts">
 import ActionMenuItem from './ContextActions/ActionMenuItem.vue'
 import { defineComponent, PropType } from 'vue'
-import { Action, ActionOptions } from '../composables/actions'
+import { Action, ActionOptions } from '../composables'
 
 export default defineComponent({
   name: 'BatchActions',
diff --git a/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue b/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue
index 34251236711..46b4bdb1a6f 100644
--- a/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue
+++ b/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue
@@ -56,7 +56,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
-import { Action, ActionOptions } from '../../composables/actions'
+import { Action, ActionOptions } from '../../composables'
 
 export default defineComponent({
   name: 'ActionMenuItem',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b3a6aa770a0..dbe9db6b047 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -631,6 +631,40 @@ importers:
         specifier: workspace:*
         version: link:../web-test-helpers
 
+  packages/web-app-app-store:
+    dependencies:
+      '@ownclouders/web-client':
+        specifier: workspace:*
+        version: link:../web-client
+      '@ownclouders/web-pkg':
+        specifier: workspace:*
+        version: link:../web-pkg
+      axios:
+        specifier: 1.6.8
+        version: 1.6.8
+      design-system:
+        specifier: workspace:@ownclouders/design-system@*
+        version: link:../design-system
+      lodash-es:
+        specifier: 4.17.21
+        version: 4.17.21
+      pinia:
+        specifier: 2.1.7
+        version: 2.1.7(typescript@5.5.3)(vue@3.4.21(typescript@5.5.3))
+      vue-concurrency:
+        specifier: 5.0.1
+        version: 5.0.1(vue@3.4.21(typescript@5.5.3))
+      web-app-app-store:
+        specifier: workspace:*
+        version: 'link:'
+      zod:
+        specifier: ^3.22.4
+        version: 3.22.4
+    devDependencies:
+      web-test-helpers:
+        specifier: workspace:*
+        version: link:../web-test-helpers
+
   packages/web-app-epub-reader:
     dependencies:
       '@ownclouders/web-client':
@@ -16583,7 +16617,7 @@ snapshots:
     dependencies:
       '@vue/devtools-api': 6.5.1
       vue: 3.4.21(typescript@5.5.3)
-      vue-demi: 0.14.6(vue@3.4.21(typescript@5.5.3))
+      vue-demi: 0.14.10(vue@3.4.21(typescript@5.5.3))
     optionalDependencies:
       typescript: 5.5.3
 

From 075def54faf4d3c92d21548f6ef68dde9572ee2b Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Wed, 31 Jul 2024 15:32:24 +0200
Subject: [PATCH 02/30] feat: convert to tiles view

---
 .../src/components/AppListItem.vue            | 75 -----------------
 .../src/components/AppTile.vue                | 83 +++++++++++++++++++
 .../actions/useAppActionsDownload.ts          |  1 -
 .../web-app-app-store/src/views/AppList.vue   | 16 ++--
 4 files changed, 94 insertions(+), 81 deletions(-)
 delete mode 100644 packages/web-app-app-store/src/components/AppListItem.vue
 create mode 100644 packages/web-app-app-store/src/components/AppTile.vue

diff --git a/packages/web-app-app-store/src/components/AppListItem.vue b/packages/web-app-app-store/src/components/AppListItem.vue
deleted file mode 100644
index 82a0207ccc5..00000000000
--- a/packages/web-app-app-store/src/components/AppListItem.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <li class="app-list-item oc-flex oc-flex-row oc-flex-middle">
-    <div class="app-cover-image">
-      <oc-img v-if="app.coverImage?.url" :src="app.coverImage?.url" />
-      <oc-icon v-else name="computer" size="xlarge" />
-    </div>
-    <div class="app-content">
-      <h3 class="oc-my-s">{{ app.name }}</h3>
-      <p class="oc-my-s">{{ app.subtitle }}</p>
-    </div>
-    <oc-list class="app-actions">
-      <action-menu-item
-        v-for="action in actions"
-        :key="`app-action-${action.name}`"
-        :action="action"
-        :action-options="{ app }"
-      />
-    </oc-list>
-  </li>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, type PropType } from 'vue'
-import { App } from '../types'
-import { ActionMenuItem } from '@ownclouders/web-pkg'
-import { useAppActionsDownload } from '../composables'
-
-export default defineComponent({
-  name: 'AppListItem',
-  components: { ActionMenuItem },
-  props: {
-    app: {
-      type: Object as PropType<App>,
-      required: true
-    }
-  },
-  setup() {
-    const { downloadAppAction } = useAppActionsDownload()
-
-    const actions = computed(() => {
-      return [downloadAppAction]
-    })
-    return {
-      actions
-    }
-  }
-})
-</script>
-
-<style lang="scss">
-.app-list-item {
-  gap: 1rem;
-
-  .app-cover-image {
-    width: 100px;
-    height: 80px;
-
-    img {
-      object-fit: contain;
-      width: 100%;
-      max-width: 100px;
-      height: 100%;
-      max-height: 80px;
-    }
-  }
-
-  .app-content {
-    flex-grow: 1;
-  }
-
-  .app-actions {
-    flex-shrink: 1;
-  }
-}
-</style>
diff --git a/packages/web-app-app-store/src/components/AppTile.vue b/packages/web-app-app-store/src/components/AppTile.vue
new file mode 100644
index 00000000000..c4788b1f710
--- /dev/null
+++ b/packages/web-app-app-store/src/components/AppTile.vue
@@ -0,0 +1,83 @@
+<template>
+  <li class="app-tile oc-card oc-card-default oc-card-rounded">
+    <div class="app-cover-image">
+      <oc-img v-if="app.coverImage?.url" :src="app.coverImage?.url" />
+      <oc-icon v-else name="computer" size="xlarge" />
+    </div>
+    <div class="app-tile-body oc-card-body oc-p">
+      <div class="app-content">
+        <h3 class="oc-my-s">{{ app.name }}</h3>
+        <p class="oc-my-s">{{ app.subtitle }}</p>
+      </div>
+      <oc-list class="app-actions">
+        <action-menu-item
+          v-for="action in actions"
+          :key="`app-action-${action.name}`"
+          :action="action"
+          :action-options="{ app }"
+        />
+      </oc-list>
+    </div>
+  </li>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from 'vue'
+import { App } from '../types'
+import { ActionMenuItem } from '@ownclouders/web-pkg'
+import { useAppActionsDownload } from '../composables'
+
+export default defineComponent({
+  name: 'AppTile',
+  components: { ActionMenuItem },
+  props: {
+    app: {
+      type: Object as PropType<App>,
+      required: true
+    }
+  },
+  setup() {
+    const { downloadAppAction } = useAppActionsDownload()
+
+    const actions = computed(() => {
+      return [downloadAppAction]
+    })
+    return {
+      actions
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.app-tile {
+  background-color: var(--oc-color-background-highlight) !important;
+  box-shadow: none;
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  outline: 1px solid var(--oc-color-border);
+
+  .app-cover-image {
+    img {
+      object-fit: contain;
+      width: 100%;
+      height: 200px;
+      max-height: 200px;
+    }
+  }
+
+  .app-tile-body {
+    display: flex;
+    flex-flow: column;
+    justify-content: space-between;
+    height: 100%;
+
+    .app-actions {
+      display: flex;
+      justify-content: flex-start;
+      gap: 1rem;
+    }
+  }
+}
+</style>
diff --git a/packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts b/packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts
index 457a7e80b14..bac9c903fe9 100644
--- a/packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts
+++ b/packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts
@@ -16,7 +16,6 @@ export const useAppActionsDownload = () => {
       return $gettext('Download')
     },
     handler: (options?) => {
-      console.log('Download App', options?.app.name)
       const version = options.app.versions[0]
       const filename = version.filename || version.url.split('/').pop()
       triggerDownloadWithFilename(version.url, filename)
diff --git a/packages/web-app-app-store/src/views/AppList.vue b/packages/web-app-app-store/src/views/AppList.vue
index d8fcda318a1..8a5cd6b8691 100644
--- a/packages/web-app-app-store/src/views/AppList.vue
+++ b/packages/web-app-app-store/src/views/AppList.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="app-list oc-px">
-    <h2 v-text="$gettext('Apps')" />
-    <oc-list>
-      <app-list-item
+    <h2 v-text="$gettext('App Store')" />
+    <oc-list class="app-tiles">
+      <app-tile
         v-for="app in sortedApps"
         :key="`app-${app.repository.name}-${app.id}`"
         :app="app"
@@ -15,12 +15,12 @@
 <script lang="ts">
 import { computed, defineComponent, unref } from 'vue'
 import { useAppsStore } from '../piniaStores'
-import AppListItem from '../components/AppListItem.vue'
+import AppTile from '../components/AppTile.vue'
 import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   name: 'AppList',
-  components: { AppListItem },
+  components: { AppTile },
   setup() {
     const appsStore = useAppsStore()
     const { apps } = storeToRefs(appsStore)
@@ -39,5 +39,11 @@ export default defineComponent({
 <style lang="scss">
 .app-list {
   overflow: auto;
+
+  .app-tiles {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 2rem;
+  }
 }
 </style>

From bd244fa16ab1be80d52fd115a781ba55c59cf7ca Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 1 Aug 2024 09:41:51 +0200
Subject: [PATCH 03/30] fix: hide text input clear button when initialized with
 empty string

---
 .../design-system/src/components/OcTextInput/OcTextInput.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index 3a3a3c230dc..c07a37ce4a1 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -307,7 +307,7 @@ export default defineComponent({
       return this.descriptionMessage
     },
     showClearButton() {
-      return !this.disabled && this.clearButtonEnabled && this.modelValue !== null
+      return !this.disabled && this.clearButtonEnabled && !!this.modelValue
     },
     clearButtonAccessibleLabelValue() {
       return this.clearButtonAccessibleLabel || this.$gettext('Clear input')

From 5395d883b2f27b1f6c44b6b28ad170973f67988c Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 1 Aug 2024 11:04:13 +0200
Subject: [PATCH 04/30] fix: re-add mark.js to users list for display name

---
 .../src/components/Groups/GroupsList.vue      | 33 ++++++++++------
 .../src/components/Users/UsersList.vue        | 39 +++++++++++++++----
 .../src/views/Users.vue                       | 30 +-------------
 3 files changed, 54 insertions(+), 48 deletions(-)

diff --git a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
index 8e06cac43fd..d8d6c2f2ca0 100644
--- a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
@@ -108,7 +108,16 @@
 </template>
 
 <script lang="ts">
-import { ComponentPublicInstance, defineComponent, ref, unref, computed, watch } from 'vue'
+import {
+  ComponentPublicInstance,
+  computed,
+  defineComponent,
+  ref,
+  unref,
+  watch,
+  onMounted,
+  nextTick
+} from 'vue'
 import Fuse from 'fuse.js'
 import Mark from 'mark.js'
 import {
@@ -148,7 +157,6 @@ export default defineComponent({
     const filterTerm = ref('')
     const router = useRouter()
     const route = useRoute()
-    const markInstance = ref(null)
 
     const lastSelectedGroupIndex = ref(0)
     const lastSelectedGroupId = ref(null)
@@ -305,12 +313,19 @@ export default defineComponent({
       await unref(router).push({ ...unref(route), query: { ...unref(route).query, page: '1' } })
     })
 
+    const markInstance = ref(null)
+    onMounted(async () => {
+      await nextTick()
+      markInstance.value = new Mark('.mark-element')
+    })
     watch([filterTerm, paginatedItems], () => {
       unref(markInstance)?.unmark()
-      unref(markInstance)?.mark(unref(filterTerm), {
-        element: 'span',
-        className: 'mark-highlight'
-      })
+      if (unref(filterTerm)) {
+        unref(markInstance)?.mark(unref(filterTerm), {
+          element: 'span',
+          className: 'mark-highlight'
+        })
+      }
     })
 
     return {
@@ -332,7 +347,6 @@ export default defineComponent({
       totalPages,
       filter,
       orderBy,
-      markInstance,
       selectedGroups,
       unselectAllGroups,
       selectGroups,
@@ -395,11 +409,6 @@ export default defineComponent({
       return this.selectedGroups.map((group) => group.id)
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.markInstance = new Mark('.mark-element')
-    })
-  },
   methods: {
     handleSort(event: { sortBy: keyof Group; sortDir: SortDir }) {
       this.sortBy = event.sortBy
diff --git a/packages/web-app-admin-settings/src/components/Users/UsersList.vue b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
index d9ff388082c..cc2aae95171 100644
--- a/packages/web-app-admin-settings/src/components/Users/UsersList.vue
+++ b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
@@ -106,14 +106,26 @@
 
 <script lang="ts">
 import { useGettext } from 'vue3-gettext'
-import { ComponentPublicInstance, defineComponent, PropType, ref, unref, computed } from 'vue'
+import {
+  ComponentPublicInstance,
+  PropType,
+  computed,
+  defineComponent,
+  nextTick,
+  onMounted,
+  ref,
+  unref,
+  watch
+} from 'vue'
 import {
   AppLoadingSpinner,
   ContextMenuBtnClickEventData,
   displayPositionedDropdown,
   eventBus,
+  queryItemAsString,
   SortDir,
-  useKeyboardActions
+  useKeyboardActions,
+  useRouteQuery
 } from '@ownclouders/web-pkg'
 import { SideBarEventTopics } from '@ownclouders/web-pkg'
 import { AppRole, User } from '@ownclouders/web-client/graph/generated'
@@ -128,6 +140,7 @@ import {
   useKeyboardTableNavigation
 } from '../../composables/keyboardActions'
 import { findIndex } from 'lodash-es'
+import Mark from 'mark.js'
 
 export default defineComponent({
   name: 'UsersList',
@@ -314,6 +327,23 @@ export default defineComponent({
       lastSelectedUserId
     )
 
+    const markInstance = ref(null)
+    onMounted(async () => {
+      await nextTick()
+      markInstance.value = new Mark('.mark-element')
+    })
+    const displayNameQuery = useRouteQuery('q_displayName')
+    watch([displayNameQuery, paginatedItems], () => {
+      unref(markInstance)?.unmark()
+      const filterTerm = queryItemAsString(unref(displayNameQuery))
+      if (filterTerm) {
+        unref(markInstance)?.mark(filterTerm, {
+          element: 'span',
+          className: 'mark-highlight'
+        })
+      }
+    })
+
     return {
       showDetails,
       showEditPanel,
@@ -339,11 +369,6 @@ export default defineComponent({
       users
     }
   },
-  data() {
-    return {
-      markInstance: null
-    }
-  },
   computed: {
     allUsersSelected() {
       return this.paginatedItems.length === this.selectedUsers.length
diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
index 1452e260754..f7bd288be37 100644
--- a/packages/web-app-admin-settings/src/views/Users.vue
+++ b/packages/web-app-admin-settings/src/views/Users.vue
@@ -156,20 +156,9 @@ import {
   useConfigStore,
   QueryValue
 } from '@ownclouders/web-pkg'
-import {
-  computed,
-  defineComponent,
-  ref,
-  onBeforeUnmount,
-  onMounted,
-  unref,
-  watch,
-  nextTick,
-  Ref
-} from 'vue'
+import { computed, defineComponent, ref, onBeforeUnmount, onMounted, unref, watch, Ref } from 'vue'
 import { useTask } from 'vue-concurrency'
 import { useGettext } from 'vue3-gettext'
-import Mark from 'mark.js'
 import { format } from 'util'
 import { omit } from 'lodash-es'
 import { storeToRefs } from 'pinia'
@@ -228,7 +217,6 @@ export default defineComponent({
     const template = ref()
     const displayNameQuery = useRouteQuery('q_displayName')
     const filterTermDisplayName = ref(queryItemAsString(unref(displayNameQuery)))
-    const markInstance = ref(null)
 
     let editQuotaActionEventToken: string
 
@@ -419,22 +407,6 @@ export default defineComponent({
 
       await loadResourcesTask.perform()
 
-      watch(
-        [users, displayNameQuery],
-        async () => {
-          await nextTick()
-          markInstance.value = new Mark('.mark-element')
-          unref(markInstance)?.unmark()
-          unref(markInstance)?.mark(queryItemAsString(unref(displayNameQuery)) || '', {
-            element: 'span',
-            className: 'mark-highlight'
-          })
-        },
-        {
-          immediate: true
-        }
-      )
-
       editQuotaActionEventToken = eventBus.subscribe(
         'app.admin-settings.users.user.quota.updated',
         updateSpaceQuota

From f49f448a960b8c08fdaff74d3660864b31478889 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 1 Aug 2024 11:38:47 +0200
Subject: [PATCH 05/30] feat: allow default app store repo in csp.yaml

---
 dev/docker/ocis/csp.yaml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/dev/docker/ocis/csp.yaml b/dev/docker/ocis/csp.yaml
index e9a6ce3b097..6a428a7011f 100644
--- a/dev/docker/ocis/csp.yaml
+++ b/dev/docker/ocis/csp.yaml
@@ -3,6 +3,7 @@ directives:
     - '''self'''
   connect-src:
     - '''self'''
+    - 'https://raw.githubusercontent.com/owncloud/awesome-ocis/'
   default-src:
     - '''none'''
   font-src:
@@ -20,6 +21,7 @@ directives:
     - '''self'''
     - 'data:'
     - 'blob:'
+    - 'https://raw.githubusercontent.com/owncloud/awesome-ocis/'
     # In contrast to bash and docker the default is given after the | character
     - 'https://${ONLYOFFICE_DOMAIN|host.docker.internal:9981}/'
     - 'https://${COLLABORA_DOMAIN|host.docker.internal:9980}/'

From 13c1a6baee2a2995cb5ecaf0a718a15d4e50a934 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 1 Aug 2024 11:39:22 +0200
Subject: [PATCH 06/30] feat: add basic client side search to app listing

---
 packages/web-app-app-store/package.json       |  5 ++
 .../src/components/AppTile.vue                | 37 ++++++++++--
 .../actions/useAppActionsDownload.ts          |  2 +-
 .../web-app-app-store/src/piniaStores/apps.ts |  3 +-
 packages/web-app-app-store/src/types.ts       |  3 +-
 .../web-app-app-store/src/views/AppList.vue   | 58 +++++++++++++++++--
 pnpm-lock.yaml                                |  9 +++
 7 files changed, 105 insertions(+), 12 deletions(-)

diff --git a/packages/web-app-app-store/package.json b/packages/web-app-app-store/package.json
index f71f3a11005..a7d3ce71e33 100644
--- a/packages/web-app-app-store/package.json
+++ b/packages/web-app-app-store/package.json
@@ -5,13 +5,18 @@
   "description": "ownCloud app store",
   "license": "AGPL-3.0",
   "devDependencies": {
+    "@types/mark.js": "8.11.12",
     "web-test-helpers": "workspace:*"
   },
+  "dependencies": {
+    "mark.js": "^8.11.1"
+  },
   "peerDependencies": {
     "@ownclouders/web-client": "workspace:*",
     "@ownclouders/web-pkg": "workspace:*",
     "axios": "1.6.8",
     "design-system": "workspace:@ownclouders/design-system@*",
+    "fuse.js": "6.6.2",
     "lodash-es": "4.17.21",
     "pinia": "2.1.7",
     "vue-concurrency": "5.0.1",
diff --git a/packages/web-app-app-store/src/components/AppTile.vue b/packages/web-app-app-store/src/components/AppTile.vue
index c4788b1f710..70f33a3e496 100644
--- a/packages/web-app-app-store/src/components/AppTile.vue
+++ b/packages/web-app-app-store/src/components/AppTile.vue
@@ -6,8 +6,25 @@
     </div>
     <div class="app-tile-body oc-card-body oc-p">
       <div class="app-content">
-        <h3 class="oc-my-s">{{ app.name }}</h3>
-        <p class="oc-my-s">{{ app.subtitle }}</p>
+        <div class="oc-flex oc-flex-middle">
+          <h3 class="oc-my-s oc-text-truncate mark-element">{{ app.name }}</h3>
+          <span class="oc-ml-s oc-text-muted oc-text-small">
+            v{{ app.mostRecentVersion.version }}
+          </span>
+        </div>
+        <p class="oc-my-s mark-element">{{ app.subtitle }}</p>
+      </div>
+      <div class="app-tags">
+        <oc-tag
+          v-for="tag in app.tags"
+          :key="`app-tag-${app.id}-${tag}`"
+          size="small"
+          class="oc-text-nowrap"
+          type="button"
+          @click="emitSearchTerm(tag)"
+        >
+          <span class="mark-element">{{ tag }}</span>
+        </oc-tag>
       </div>
       <oc-list class="app-actions">
         <action-menu-item
@@ -36,14 +53,21 @@ export default defineComponent({
       required: true
     }
   },
-  setup() {
+  emits: ['search'],
+  setup(props, { emit }) {
     const { downloadAppAction } = useAppActionsDownload()
 
     const actions = computed(() => {
       return [downloadAppAction]
     })
+
+    const emitSearchTerm = (term: string) => {
+      emit('search', term)
+    }
+
     return {
-      actions
+      actions,
+      emitSearchTerm
     }
   }
 })
@@ -73,6 +97,11 @@ export default defineComponent({
     justify-content: space-between;
     height: 100%;
 
+    .app-tags {
+      display: flex;
+      gap: 0.5rem;
+    }
+
     .app-actions {
       display: flex;
       justify-content: flex-start;
diff --git a/packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts b/packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts
index bac9c903fe9..237a3b5d97b 100644
--- a/packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts
+++ b/packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts
@@ -16,7 +16,7 @@ export const useAppActionsDownload = () => {
       return $gettext('Download')
     },
     handler: (options?) => {
-      const version = options.app.versions[0]
+      const version = options.app.mostRecentVersion
       const filename = version.filename || version.url.split('/').pop()
       triggerDownloadWithFilename(version.url, filename)
     },
diff --git a/packages/web-app-app-store/src/piniaStores/apps.ts b/packages/web-app-app-store/src/piniaStores/apps.ts
index aa22b3e1138..ce07ab6e53b 100644
--- a/packages/web-app-app-store/src/piniaStores/apps.ts
+++ b/packages/web-app-app-store/src/piniaStores/apps.ts
@@ -18,7 +18,8 @@ export const useAppsStore = defineStore(`${APPID}-apps`, () => {
         return appsList.apps.map((app) => {
           return {
             ...app,
-            repository: repo
+            repository: repo,
+            mostRecentVersion: app.versions[0]
           }
         })
       } catch (e) {
diff --git a/packages/web-app-app-store/src/types.ts b/packages/web-app-app-store/src/types.ts
index 9a4587fe47a..ca3468f8249 100644
--- a/packages/web-app-app-store/src/types.ts
+++ b/packages/web-app-app-store/src/types.ts
@@ -48,7 +48,8 @@ export const RawAppSchema = z.object({
 })
 
 export const AppSchema = RawAppSchema.extend({
-  repository: AppStoreRepositorySchema
+  repository: AppStoreRepositorySchema,
+  mostRecentVersion: AppVersionSchema
 })
 export type App = z.infer<typeof AppSchema>
 
diff --git a/packages/web-app-app-store/src/views/AppList.vue b/packages/web-app-app-store/src/views/AppList.vue
index 8a5cd6b8691..ea062cfd93e 100644
--- a/packages/web-app-app-store/src/views/AppList.vue
+++ b/packages/web-app-app-store/src/views/AppList.vue
@@ -1,22 +1,36 @@
 <template>
   <div class="app-list oc-px">
     <h2 v-text="$gettext('App Store')" />
+    <div class="oc-flex oc-flex-middle">
+      <oc-text-input
+        id="apps-filter"
+        v-model.trim="filterTerm"
+        :label="$gettext('Search')"
+        :clear-button-enabled="true"
+        autocomplete="off"
+      />
+    </div>
     <oc-list class="app-tiles">
       <app-tile
-        v-for="app in sortedApps"
+        v-for="app in filteredApps"
         :key="`app-${app.repository.name}-${app.id}`"
         :app="app"
         class="oc-my-m"
+        @search="setFilterTerm"
       />
     </oc-list>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, unref } from 'vue'
+import { computed, defineComponent, nextTick, onMounted, ref, unref, watch } from 'vue'
+import Mark from 'mark.js'
+import Fuse from 'fuse.js'
 import { useAppsStore } from '../piniaStores'
 import AppTile from '../components/AppTile.vue'
 import { storeToRefs } from 'pinia'
+import { App } from '../types'
+import { defaultFuseOptions } from '@ownclouders/web-pkg'
 
 export default defineComponent({
   name: 'AppList',
@@ -25,12 +39,46 @@ export default defineComponent({
     const appsStore = useAppsStore()
     const { apps } = storeToRefs(appsStore)
 
-    const sortedApps = computed(() => {
-      return unref(apps).sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
+    const filterTerm = ref('')
+    const setFilterTerm = (term: string) => {
+      filterTerm.value = term.trim()
+    }
+    const filter = (apps: App[], filterTerm: string) => {
+      if (!(filterTerm || '').trim()) {
+        return apps
+      }
+      const searchEngine = new Fuse(apps, {
+        ...defaultFuseOptions,
+        keys: ['name', 'subtitle', 'tags']
+      })
+      return searchEngine.search(filterTerm).map((r) => r.item)
+    }
+    const filteredApps = computed(() => {
+      // TODO: debounce the filtering by 100-300ms
+      return filter(unref(apps), unref(filterTerm)).sort((a, b) =>
+        a.name.toLowerCase().localeCompare(b.name.toLowerCase())
+      )
+    })
+
+    const markInstance = ref(null)
+    onMounted(async () => {
+      await nextTick()
+      markInstance.value = new Mark('.mark-element')
+    })
+    watch(filterTerm, () => {
+      unref(markInstance)?.unmark()
+      if (unref(filterTerm)) {
+        unref(markInstance)?.mark(unref(filterTerm), {
+          element: 'span',
+          className: 'mark-highlight'
+        })
+      }
     })
 
     return {
-      sortedApps
+      filteredApps,
+      filterTerm,
+      setFilterTerm
     }
   }
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dbe9db6b047..6846757a434 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -645,9 +645,15 @@ importers:
       design-system:
         specifier: workspace:@ownclouders/design-system@*
         version: link:../design-system
+      fuse.js:
+        specifier: 6.6.2
+        version: 6.6.2
       lodash-es:
         specifier: 4.17.21
         version: 4.17.21
+      mark.js:
+        specifier: ^8.11.1
+        version: 8.11.1
       pinia:
         specifier: 2.1.7
         version: 2.1.7(typescript@5.5.3)(vue@3.4.21(typescript@5.5.3))
@@ -661,6 +667,9 @@ importers:
         specifier: ^3.22.4
         version: 3.22.4
     devDependencies:
+      '@types/mark.js':
+        specifier: 8.11.12
+        version: 8.11.12
       web-test-helpers:
         specifier: workspace:*
         version: link:../web-test-helpers

From 670558efd6059eda3e8a4ac6fd6699dde227df31 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 1 Aug 2024 15:37:55 +0200
Subject: [PATCH 07/30] fix: set fixed image aspect ratio and style fallback
 icon

---
 .../src/components/AppTile.vue                | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/web-app-app-store/src/components/AppTile.vue b/packages/web-app-app-store/src/components/AppTile.vue
index 70f33a3e496..bf0aa6a5dba 100644
--- a/packages/web-app-app-store/src/components/AppTile.vue
+++ b/packages/web-app-app-store/src/components/AppTile.vue
@@ -2,7 +2,9 @@
   <li class="app-tile oc-card oc-card-default oc-card-rounded">
     <div class="app-cover-image">
       <oc-img v-if="app.coverImage?.url" :src="app.coverImage?.url" />
-      <oc-icon v-else name="computer" size="xlarge" />
+      <div v-else class="fallback-icon">
+        <oc-icon name="computer" size="xxlarge" />
+      </div>
     </div>
     <div class="app-tile-body oc-card-body oc-p">
       <div class="app-content">
@@ -83,11 +85,22 @@ export default defineComponent({
   outline: 1px solid var(--oc-color-border);
 
   .app-cover-image {
+    width: 100%;
+
     img {
-      object-fit: contain;
       width: 100%;
-      height: 200px;
-      max-height: 200px;
+      max-width: 100%;
+      aspect-ratio: 3/2;
+      object-fit: cover;
+    }
+
+    .fallback-icon {
+      width: 100%;
+      aspect-ratio: 3/2;
+      background-color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
   }
 

From a121fb0b18df3e67af99263f73a25ada02cf4b94 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Thu, 1 Aug 2024 18:26:32 +0200
Subject: [PATCH 08/30] feat: add app details page

---
 .../src/components/AppActions.vue             | 52 +++++++++++
 .../src/components/AppCover.vue               | 44 ++++++++++
 .../src/components/AppTags.vue                | 45 ++++++++++
 .../src/components/AppTile.vue                | 87 ++++---------------
 .../src/components/AppVersions.vue            | 62 +++++++++++++
 .../actions/useAppActionsDownload.ts          |  5 +-
 packages/web-app-app-store/src/index.ts       | 15 ++++
 .../web-app-app-store/src/piniaStores/apps.ts | 69 ++++++++-------
 packages/web-app-app-store/src/types.ts       |  1 +
 .../src/views/AppDetails.vue                  | 78 +++++++++++++++++
 .../ContextActions/ActionMenuItem.vue         |  9 +-
 11 files changed, 363 insertions(+), 104 deletions(-)
 create mode 100644 packages/web-app-app-store/src/components/AppActions.vue
 create mode 100644 packages/web-app-app-store/src/components/AppCover.vue
 create mode 100644 packages/web-app-app-store/src/components/AppTags.vue
 create mode 100644 packages/web-app-app-store/src/components/AppVersions.vue
 create mode 100644 packages/web-app-app-store/src/views/AppDetails.vue

diff --git a/packages/web-app-app-store/src/components/AppActions.vue b/packages/web-app-app-store/src/components/AppActions.vue
new file mode 100644
index 00000000000..b3fac6a37c3
--- /dev/null
+++ b/packages/web-app-app-store/src/components/AppActions.vue
@@ -0,0 +1,52 @@
+<template>
+  <oc-list class="app-actions">
+    <action-menu-item
+      v-for="action in actions"
+      :key="`app-action-${action.name}`"
+      size="small"
+      :action="action"
+      :action-options="{ app, ...(version && version) }"
+    />
+  </oc-list>
+</template>
+<script lang="ts">
+import { ActionMenuItem } from '@ownclouders/web-pkg'
+import { useAppActionsDownload } from '../composables'
+import { computed, defineComponent, PropType } from 'vue'
+import { App, AppVersion } from '../types'
+
+export default defineComponent({
+  name: 'AppActions',
+  components: { ActionMenuItem },
+  props: {
+    app: {
+      type: Object as PropType<App>,
+      required: true
+    },
+    version: {
+      type: Object as PropType<AppVersion>,
+      required: false,
+      default: null
+    }
+  },
+  setup() {
+    const { downloadAppAction } = useAppActionsDownload()
+
+    const actions = computed(() => {
+      return [downloadAppAction]
+    })
+
+    return {
+      actions
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.app-actions {
+  display: flex;
+  justify-content: flex-start;
+  gap: 1rem;
+}
+</style>
diff --git a/packages/web-app-app-store/src/components/AppCover.vue b/packages/web-app-app-store/src/components/AppCover.vue
new file mode 100644
index 00000000000..36a7f64b99a
--- /dev/null
+++ b/packages/web-app-app-store/src/components/AppCover.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="app-cover-image">
+    <oc-img v-if="app.coverImage?.url" :src="app.coverImage?.url" />
+    <div v-else class="fallback-icon">
+      <oc-icon name="computer" size="xxlarge" />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { App } from '../types'
+
+export default defineComponent({
+  name: 'AppCover',
+  props: {
+    app: {
+      type: Object as PropType<App>,
+      required: true
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.app-cover-image {
+  width: 100%;
+
+  img {
+    width: 100%;
+    max-width: 100%;
+    aspect-ratio: 3/2;
+    object-fit: cover;
+  }
+
+  .fallback-icon {
+    width: 100%;
+    aspect-ratio: 3/2;
+    background-color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>
diff --git a/packages/web-app-app-store/src/components/AppTags.vue b/packages/web-app-app-store/src/components/AppTags.vue
new file mode 100644
index 00000000000..44f26aa47c1
--- /dev/null
+++ b/packages/web-app-app-store/src/components/AppTags.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="app-tags">
+    <oc-tag
+      v-for="tag in app.tags"
+      :key="`app-tag-${app.id}-${tag}`"
+      size="small"
+      class="oc-text-nowrap"
+      type="button"
+      @click="emitSearchTerm(tag)"
+    >
+      <span class="mark-element">{{ tag }}</span>
+    </oc-tag>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { App } from '../types'
+
+export default defineComponent({
+  name: 'AppTags',
+  props: {
+    app: {
+      type: Object as PropType<App>,
+      required: true
+    }
+  },
+  emits: ['search'],
+  setup(props, { emit }) {
+    const emitSearchTerm = (term: string) => {
+      emit('search', term)
+    }
+
+    return {
+      emitSearchTerm
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.app-tags {
+  display: flex;
+  gap: 0.5rem;
+}
+</style>
diff --git a/packages/web-app-app-store/src/components/AppTile.vue b/packages/web-app-app-store/src/components/AppTile.vue
index bf0aa6a5dba..66a41ac2ffd 100644
--- a/packages/web-app-app-store/src/components/AppTile.vue
+++ b/packages/web-app-app-store/src/components/AppTile.vue
@@ -1,54 +1,40 @@
 <template>
   <li class="app-tile oc-card oc-card-default oc-card-rounded">
-    <div class="app-cover-image">
-      <oc-img v-if="app.coverImage?.url" :src="app.coverImage?.url" />
-      <div v-else class="fallback-icon">
-        <oc-icon name="computer" size="xxlarge" />
-      </div>
-    </div>
+    <router-link :to="{ name: 'app-store-details', params: { appId: encodeURIComponent(app.id) } }">
+      <app-cover :app="app" />
+    </router-link>
     <div class="app-tile-body oc-card-body oc-p">
       <div class="app-content">
         <div class="oc-flex oc-flex-middle">
-          <h3 class="oc-my-s oc-text-truncate mark-element">{{ app.name }}</h3>
+          <h3 class="oc-my-s oc-text-truncate mark-element">
+            <router-link
+              :to="{ name: 'app-store-details', params: { appId: encodeURIComponent(app.id) } }"
+            >
+              {{ app.name }}
+            </router-link>
+          </h3>
           <span class="oc-ml-s oc-text-muted oc-text-small">
             v{{ app.mostRecentVersion.version }}
           </span>
         </div>
         <p class="oc-my-s mark-element">{{ app.subtitle }}</p>
       </div>
-      <div class="app-tags">
-        <oc-tag
-          v-for="tag in app.tags"
-          :key="`app-tag-${app.id}-${tag}`"
-          size="small"
-          class="oc-text-nowrap"
-          type="button"
-          @click="emitSearchTerm(tag)"
-        >
-          <span class="mark-element">{{ tag }}</span>
-        </oc-tag>
-      </div>
-      <oc-list class="app-actions">
-        <action-menu-item
-          v-for="action in actions"
-          :key="`app-action-${action.name}`"
-          :action="action"
-          :action-options="{ app }"
-        />
-      </oc-list>
+      <app-tags :app="app" @search="emitSearchTerm" />
+      <app-actions :app="app" />
     </div>
   </li>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from 'vue'
+import { defineComponent, type PropType } from 'vue'
 import { App } from '../types'
-import { ActionMenuItem } from '@ownclouders/web-pkg'
-import { useAppActionsDownload } from '../composables'
+import AppCover from './AppCover.vue'
+import AppTags from './AppTags.vue'
+import AppActions from './AppActions.vue'
 
 export default defineComponent({
   name: 'AppTile',
-  components: { ActionMenuItem },
+  components: { AppActions, AppTags, AppCover },
   props: {
     app: {
       type: Object as PropType<App>,
@@ -57,18 +43,11 @@ export default defineComponent({
   },
   emits: ['search'],
   setup(props, { emit }) {
-    const { downloadAppAction } = useAppActionsDownload()
-
-    const actions = computed(() => {
-      return [downloadAppAction]
-    })
-
     const emitSearchTerm = (term: string) => {
       emit('search', term)
     }
 
     return {
-      actions,
       emitSearchTerm
     }
   }
@@ -77,6 +56,7 @@ export default defineComponent({
 
 <style lang="scss">
 .app-tile {
+  overflow: hidden;
   background-color: var(--oc-color-background-highlight) !important;
   box-shadow: none;
   height: 100%;
@@ -84,42 +64,11 @@ export default defineComponent({
   flex-flow: column;
   outline: 1px solid var(--oc-color-border);
 
-  .app-cover-image {
-    width: 100%;
-
-    img {
-      width: 100%;
-      max-width: 100%;
-      aspect-ratio: 3/2;
-      object-fit: cover;
-    }
-
-    .fallback-icon {
-      width: 100%;
-      aspect-ratio: 3/2;
-      background-color: white;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
   .app-tile-body {
     display: flex;
     flex-flow: column;
     justify-content: space-between;
     height: 100%;
-
-    .app-tags {
-      display: flex;
-      gap: 0.5rem;
-    }
-
-    .app-actions {
-      display: flex;
-      justify-content: flex-start;
-      gap: 1rem;
-    }
   }
 }
 </style>
diff --git a/packages/web-app-app-store/src/components/AppVersions.vue b/packages/web-app-app-store/src/components/AppVersions.vue
new file mode 100644
index 00000000000..bfe448e954a
--- /dev/null
+++ b/packages/web-app-app-store/src/components/AppVersions.vue
@@ -0,0 +1,62 @@
+<template>
+  <oc-table class="oc-width-1-1" :data="data" :fields="fields" padding-x="remove">
+    <template #version="{ item }">
+      v{{ item.version }}
+      <oc-tag v-if="item.version === app.mostRecentVersion.version" size="small" class="oc-ml-s">
+        {{ $gettext('most recent') }}
+      </oc-tag>
+    </template>
+    <template #actions="{ item }">
+      <app-actions :app="app" :version="item" />
+    </template>
+  </oc-table>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue'
+import { App } from '../types'
+import { useGettext } from 'vue3-gettext'
+import AppActions from './AppActions.vue'
+
+export default defineComponent({
+  name: 'AppVersions',
+  components: { AppActions },
+  props: {
+    app: {
+      type: Object as PropType<App>,
+      required: true
+    }
+  },
+  setup(props) {
+    const { $gettext } = useGettext()
+
+    const data = computed(() => {
+      return props.app.versions
+    })
+    const fields = computed(() => {
+      return [
+        {
+          name: 'version',
+          title: $gettext('Version'),
+          type: 'slot',
+          width: 'expand',
+          wrap: 'truncate'
+        },
+        {
+          name: 'actions',
+          title: $gettext('Actions'),
+          type: 'slot',
+          alignH: 'right',
+          width: 'shrink',
+          wrap: 'nowrap'
+        }
+      ]
+    })
+
+    return {
+      data,
+      fields
+    }
+  }
+})
+</script>
diff --git a/packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts b/packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts
index 237a3b5d97b..760cd777c4d 100644
--- a/packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts
+++ b/packages/web-app-app-store/src/composables/actions/useAppActionsDownload.ts
@@ -1,9 +1,10 @@
 import { Action, triggerDownloadWithFilename } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
-import { App } from '../../types'
+import { App, AppVersion } from '../../types'
 
 export type AppActionOptions = {
   app: App
+  version?: AppVersion
 }
 
 export const useAppActionsDownload = () => {
@@ -16,7 +17,7 @@ export const useAppActionsDownload = () => {
       return $gettext('Download')
     },
     handler: (options?) => {
-      const version = options.app.mostRecentVersion
+      const version = options.version || options.app.mostRecentVersion
       const filename = version.filename || version.url.split('/').pop()
       triggerDownloadWithFilename(version.url, filename)
     },
diff --git a/packages/web-app-app-store/src/index.ts b/packages/web-app-app-store/src/index.ts
index 9b864ac62fc..9c4dc8582fe 100644
--- a/packages/web-app-app-store/src/index.ts
+++ b/packages/web-app-app-store/src/index.ts
@@ -63,6 +63,21 @@ export default defineWebApplication({
           authContext: 'user',
           title: $gettext('App Store')
         }
+      },
+      {
+        path: '/app/:appId',
+        name: 'details',
+        component: () => import('./views/AppDetails.vue'),
+        beforeEnter: (to, from, next) => {
+          if (!unref(hasPermission)) {
+            return next({ path: '/' })
+          }
+          next()
+        },
+        meta: {
+          authContext: 'user',
+          title: $gettext('App Details')
+        }
       }
     ]
 
diff --git a/packages/web-app-app-store/src/piniaStores/apps.ts b/packages/web-app-app-store/src/piniaStores/apps.ts
index ce07ab6e53b..befc224db1d 100644
--- a/packages/web-app-app-store/src/piniaStores/apps.ts
+++ b/packages/web-app-app-store/src/piniaStores/apps.ts
@@ -1,42 +1,49 @@
 import { defineStore } from 'pinia'
 import { App, AppStoreRepository, RawAppListSchema } from '../types'
-import { ref } from 'vue'
+import { ref, unref } from 'vue'
 import { APPID } from '../appid'
 import { useRepositoriesStore } from './repositories'
 
-export const useAppsStore = defineStore(`${APPID}-apps`, () => {
-  const apps = ref<App[]>([])
-
+export const useAppsStore = () => {
   const repositoriesStore = useRepositoriesStore()
 
-  const loadApps = async () => {
-    const loadAppsByRepo = async (repo: AppStoreRepository): Promise<App[]> => {
-      try {
-        const data = await fetch(repo.url)
-        const appsListData = await data.json()
-        const appsList = RawAppListSchema.parse(appsListData)
-        return appsList.apps.map((app) => {
-          return {
-            ...app,
-            repository: repo,
-            mostRecentVersion: app.versions[0]
-          }
-        })
-      } catch (e) {
-        console.error(e)
-        return []
-      }
+  return defineStore(`${APPID}-apps`, () => {
+    const apps = ref<App[]>([])
+
+    const getById = (id: string) => {
+      return unref(apps).find((app) => app.id === id)
     }
 
-    const loadAppsPromises: Promise<App[]>[] = []
-    for (const repo of repositoriesStore.repositories) {
-      loadAppsPromises.push(loadAppsByRepo(repo))
+    const loadApps = async () => {
+      const loadAppsByRepo = async (repo: AppStoreRepository): Promise<App[]> => {
+        try {
+          const data = await fetch(repo.url)
+          const appsListData = await data.json()
+          const appsList = RawAppListSchema.parse(appsListData)
+          return appsList.apps.map((app) => {
+            return {
+              ...app,
+              repository: repo,
+              mostRecentVersion: app.versions[0]
+            }
+          })
+        } catch (e) {
+          console.error(e)
+          return []
+        }
+      }
+
+      const loadAppsPromises: Promise<App[]>[] = []
+      for (const repo of repositoriesStore.repositories) {
+        loadAppsPromises.push(loadAppsByRepo(repo))
+      }
+      apps.value = (await Promise.all(loadAppsPromises)).flat()
     }
-    apps.value = (await Promise.all(loadAppsPromises)).flat()
-  }
 
-  return {
-    apps,
-    loadApps
-  }
-})
+    return {
+      apps,
+      getById,
+      loadApps
+    }
+  })()
+}
diff --git a/packages/web-app-app-store/src/types.ts b/packages/web-app-app-store/src/types.ts
index ca3468f8249..e308ab52d7b 100644
--- a/packages/web-app-app-store/src/types.ts
+++ b/packages/web-app-app-store/src/types.ts
@@ -15,6 +15,7 @@ export const AppVersionSchema = z.object({
   url: z.string(),
   filename: z.string().optional()
 })
+export type AppVersion = z.infer<typeof AppVersionSchema>
 
 export const AppAuthorSchema = z.object({
   name: z.string(),
diff --git a/packages/web-app-app-store/src/views/AppDetails.vue b/packages/web-app-app-store/src/views/AppDetails.vue
new file mode 100644
index 00000000000..669f0f3246f
--- /dev/null
+++ b/packages/web-app-app-store/src/views/AppDetails.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="app-details oc-p-m">
+    <div class="back-to-list">
+      <router-link :to="{ name: 'app-store-list' }" class="oc-flex oc-flex-middle">
+        <oc-icon name="arrow-left-s" fill-type="line" />
+        <span v-text="$gettext('Back to list')" />
+      </router-link>
+    </div>
+    <app-cover :app="app" />
+    <div class="app-content">
+      <div class="oc-flex oc-flex-middle">
+        <h2 class="oc-my-s oc-text-truncate">{{ app.name }}</h2>
+        <span class="oc-ml-s oc-text-muted oc-text-small">
+          v{{ app.mostRecentVersion.version }}
+        </span>
+      </div>
+      <p class="oc-my-rm">{{ app.subtitle }}</p>
+    </div>
+    <div v-if="app.description">
+      <h3>{{ $gettext('Details') }}</h3>
+      <p class="oc-my-s">{{ app.description }}</p>
+    </div>
+    <div v-if="app.tags">
+      <h3>{{ $gettext('Tags') }}</h3>
+      <app-tags :app="app" />
+    </div>
+    <div v-if="app.versions">
+      <h3>{{ $gettext('Version History') }}</h3>
+      <app-versions :app="app" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, unref } from 'vue'
+import { App } from '../types'
+import { useRouteParam } from '@ownclouders/web-pkg'
+import { useAppsStore } from '../piniaStores'
+import AppCover from '../components/AppCover.vue'
+import AppTags from '../components/AppTags.vue'
+import AppVersions from '../components/AppVersions.vue'
+
+export default defineComponent({
+  components: { AppVersions, AppTags, AppCover },
+  setup() {
+    const appIdRouteParam = useRouteParam('appId')
+    const appId = computed(() => {
+      return decodeURIComponent(unref(appIdRouteParam))
+    })
+    const appsStore = useAppsStore()
+
+    const app = computed<App>(() => {
+      return appsStore.getById(unref(appId))
+    })
+
+    return {
+      app
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.app-details {
+  overflow: auto;
+  max-width: 600px;
+  margin: 0 auto;
+
+  display: flex;
+  flex-flow: column;
+  gap: 1rem;
+
+  .back-to-list {
+    border-bottom: 1px solid var(--oc-color-border);
+    margin-bottom: var(--oc-space-medium);
+  }
+}
+</style>
diff --git a/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue b/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue
index 46b4bdb1a6f..a474ac99083 100644
--- a/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue
+++ b/packages/web-pkg/src/components/ContextActions/ActionMenuItem.vue
@@ -7,7 +7,7 @@
       :class="[action.class, 'action-menu-item', 'oc-py-s', 'oc-px-m', 'oc-width-1-1']"
       :aria-label="componentProps.disabled ? action.disabledTooltip?.(actionOptions) : ''"
       data-testid="action-handler"
-      size="small"
+      :size="size"
       justify-content="left"
       v-on="componentListeners"
     >
@@ -30,7 +30,7 @@
         data-testid="action-icon"
         :name="action.icon"
         :fill-type="action.iconFillType || 'line'"
-        size="medium"
+        :size="size"
       />
       <span
         v-if="!action.hideLabel"
@@ -69,6 +69,11 @@ export default defineComponent({
       type: Object as PropType<ActionOptions>,
       required: true
     },
+    size: {
+      type: String,
+      required: false,
+      default: 'medium'
+    },
     appearance: {
       type: String,
       default: 'raw'

From b6daee0b62ba8b5173979a2baa75cfc75b95763d Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Fri, 2 Aug 2024 07:45:15 +0200
Subject: [PATCH 09/30] feat: introduce layout component which also loads all
 apps

---
 .../web-app-app-store/src/LayoutContainer.vue | 39 +++++++++++++
 .../src/components/AppTile.vue                |  8 ++-
 .../src/components/LoadingApps.vue            | 50 +++++++++++++++++
 packages/web-app-app-store/src/index.ts       | 55 +++++++++----------
 .../src/views/AppDetails.vue                  |  6 +-
 5 files changed, 124 insertions(+), 34 deletions(-)
 create mode 100644 packages/web-app-app-store/src/LayoutContainer.vue
 create mode 100644 packages/web-app-app-store/src/components/LoadingApps.vue

diff --git a/packages/web-app-app-store/src/LayoutContainer.vue b/packages/web-app-app-store/src/LayoutContainer.vue
new file mode 100644
index 00000000000..cca17c66b51
--- /dev/null
+++ b/packages/web-app-app-store/src/LayoutContainer.vue
@@ -0,0 +1,39 @@
+<template>
+  <main>
+    <loading-apps v-if="areAppsLoading" />
+    <template v-else>
+      <router-view />
+    </template>
+  </main>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { useAppsStore } from './piniaStores'
+import { useLoadingService } from '@ownclouders/web-pkg'
+import LoadingApps from './components/LoadingApps.vue'
+
+export default defineComponent({
+  name: 'LayoutContainer',
+  components: { LoadingApps },
+  setup() {
+    const appsStore = useAppsStore()
+    const loadingService = useLoadingService()
+
+    const areAppsLoading = ref(true)
+    loadingService.addTask(async () => {
+      try {
+        await appsStore.loadApps()
+      } catch (e) {
+        console.error(e)
+      } finally {
+        areAppsLoading.value = false
+      }
+    })
+
+    return {
+      areAppsLoading
+    }
+  }
+})
+</script>
diff --git a/packages/web-app-app-store/src/components/AppTile.vue b/packages/web-app-app-store/src/components/AppTile.vue
index 66a41ac2ffd..416566e8656 100644
--- a/packages/web-app-app-store/src/components/AppTile.vue
+++ b/packages/web-app-app-store/src/components/AppTile.vue
@@ -1,6 +1,6 @@
 <template>
   <li class="app-tile oc-card oc-card-default oc-card-rounded">
-    <router-link :to="{ name: 'app-store-details', params: { appId: encodeURIComponent(app.id) } }">
+    <router-link :to="{ name: `${APPID}-details`, params: { appId: encodeURIComponent(app.id) } }">
       <app-cover :app="app" />
     </router-link>
     <div class="app-tile-body oc-card-body oc-p">
@@ -8,7 +8,7 @@
         <div class="oc-flex oc-flex-middle">
           <h3 class="oc-my-s oc-text-truncate mark-element">
             <router-link
-              :to="{ name: 'app-store-details', params: { appId: encodeURIComponent(app.id) } }"
+              :to="{ name: `${APPID}-details`, params: { appId: encodeURIComponent(app.id) } }"
             >
               {{ app.name }}
             </router-link>
@@ -28,6 +28,7 @@
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue'
 import { App } from '../types'
+import { APPID } from '../appid'
 import AppCover from './AppCover.vue'
 import AppTags from './AppTags.vue'
 import AppActions from './AppActions.vue'
@@ -48,7 +49,8 @@ export default defineComponent({
     }
 
     return {
-      emitSearchTerm
+      emitSearchTerm,
+      APPID
     }
   }
 })
diff --git a/packages/web-app-app-store/src/components/LoadingApps.vue b/packages/web-app-app-store/src/components/LoadingApps.vue
new file mode 100644
index 00000000000..6897ebe37ea
--- /dev/null
+++ b/packages/web-app-app-store/src/components/LoadingApps.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="app-loader oc-height-viewport oc-flex oc-flex-column oc-flex-center oc-flex-middle">
+    <div class="oc-card oc-text-center oc-width-large">
+      <div class="oc-card-header">
+        <h2 v-text="$gettext('Loading apps…')" />
+      </div>
+      <div class="oc-card-body">
+        <p v-text="$gettext(`Please wait a moment while we're loading all apps.`)"></p>
+      </div>
+      <div class="oc-card-footer oc-pt-rm">
+        <p>{{ footerSlogan }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { computed, defineComponent } from 'vue'
+import { useThemeStore } from '@ownclouders/web-pkg'
+import { storeToRefs } from 'pinia'
+
+export default defineComponent({
+  setup() {
+    const themeStore = useThemeStore()
+
+    const { currentTheme } = storeToRefs(themeStore)
+    const footerSlogan = computed(() => currentTheme.value.common.slogan)
+
+    return {
+      footerSlogan
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.app-loader {
+  .oc-card {
+    background: var(--oc-color-background-highlight);
+    border-radius: 15px;
+  }
+
+  .oc-text-input-message {
+    justify-content: center;
+  }
+
+  .oc-card-header h2 {
+    margin: 0;
+  }
+}
+</style>
diff --git a/packages/web-app-app-store/src/index.ts b/packages/web-app-app-store/src/index.ts
index 9c4dc8582fe..a05b567013d 100644
--- a/packages/web-app-app-store/src/index.ts
+++ b/packages/web-app-app-store/src/index.ts
@@ -9,7 +9,7 @@ import {
 } from '@ownclouders/web-pkg'
 import { urlJoin } from '@ownclouders/web-client'
 import { RouteRecordRaw } from 'vue-router'
-import { useAppsStore, useRepositoriesStore } from './piniaStores'
+import { useRepositoriesStore } from './piniaStores'
 import { AppStoreConfigSchema } from './types'
 import { APPID } from './appid'
 export default defineWebApplication({
@@ -47,12 +47,9 @@ export default defineWebApplication({
     const routes: RouteRecordRaw[] = [
       {
         path: '/',
-        redirect: urlJoin(appInfo.id, 'list')
-      },
-      {
-        path: '/list',
-        name: 'list',
-        component: () => import('./views/AppList.vue'),
+        name: 'root',
+        component: () => import('./LayoutContainer.vue'),
+        redirect: urlJoin(appInfo.id, 'list'),
         beforeEnter: (to, from, next) => {
           if (!unref(hasPermission)) {
             return next({ path: '/' })
@@ -60,24 +57,28 @@ export default defineWebApplication({
           next()
         },
         meta: {
-          authContext: 'user',
-          title: $gettext('App Store')
-        }
-      },
-      {
-        path: '/app/:appId',
-        name: 'details',
-        component: () => import('./views/AppDetails.vue'),
-        beforeEnter: (to, from, next) => {
-          if (!unref(hasPermission)) {
-            return next({ path: '/' })
-          }
-          next()
+          authContext: 'user'
         },
-        meta: {
-          authContext: 'user',
-          title: $gettext('App Details')
-        }
+        children: [
+          {
+            path: 'list',
+            name: 'list',
+            component: () => import('./views/AppList.vue'),
+            meta: {
+              authContext: 'user',
+              title: $gettext('App Store')
+            }
+          },
+          {
+            path: 'app/:appId',
+            name: 'details',
+            component: () => import('./views/AppDetails.vue'),
+            meta: {
+              authContext: 'user',
+              title: $gettext('App Details')
+            }
+          }
+        ]
       }
     ]
 
@@ -103,11 +104,7 @@ export default defineWebApplication({
     return {
       appInfo,
       routes,
-      extensions,
-      ready: () => {
-        const appsStore = useAppsStore()
-        return appsStore.loadApps()
-      }
+      extensions
     }
   }
 })
diff --git a/packages/web-app-app-store/src/views/AppDetails.vue b/packages/web-app-app-store/src/views/AppDetails.vue
index 669f0f3246f..ad297494b08 100644
--- a/packages/web-app-app-store/src/views/AppDetails.vue
+++ b/packages/web-app-app-store/src/views/AppDetails.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-details oc-p-m">
     <div class="back-to-list">
-      <router-link :to="{ name: 'app-store-list' }" class="oc-flex oc-flex-middle">
+      <router-link :to="{ name: `${APPID}-list` }" class="oc-flex oc-flex-middle">
         <oc-icon name="arrow-left-s" fill-type="line" />
         <span v-text="$gettext('Back to list')" />
       </router-link>
@@ -34,6 +34,7 @@
 <script lang="ts">
 import { computed, defineComponent, unref } from 'vue'
 import { App } from '../types'
+import { APPID } from '../appid'
 import { useRouteParam } from '@ownclouders/web-pkg'
 import { useAppsStore } from '../piniaStores'
 import AppCover from '../components/AppCover.vue'
@@ -54,7 +55,8 @@ export default defineComponent({
     })
 
     return {
-      app
+      app,
+      APPID
     }
   }
 })

From 4e1aa3376e38047fefbb0830a01aa3405c0b3678 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Fri, 2 Aug 2024 10:23:55 +0200
Subject: [PATCH 10/30] feat: styling and more details

---
 .../web-app-app-store/src/LayoutContainer.vue |  9 +++++-
 .../src/components/AppAuthors.vue             | 28 +++++++++++++++++
 .../src/components/AppResources.vue           | 30 +++++++++++++++++++
 .../src/components/AppTile.vue                |  2 +-
 .../src/components/AppVersions.vue            | 10 +++++--
 packages/web-app-app-store/src/types.ts       |  2 +-
 .../src/views/AppDetails.vue                  | 19 ++++++++----
 .../web-app-app-store/src/views/AppList.vue   |  6 ++--
 8 files changed, 91 insertions(+), 15 deletions(-)
 create mode 100644 packages/web-app-app-store/src/components/AppAuthors.vue
 create mode 100644 packages/web-app-app-store/src/components/AppResources.vue

diff --git a/packages/web-app-app-store/src/LayoutContainer.vue b/packages/web-app-app-store/src/LayoutContainer.vue
index cca17c66b51..674023e016d 100644
--- a/packages/web-app-app-store/src/LayoutContainer.vue
+++ b/packages/web-app-app-store/src/LayoutContainer.vue
@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <main id="app-store">
     <loading-apps v-if="areAppsLoading" />
     <template v-else>
       <router-view />
@@ -37,3 +37,10 @@ export default defineComponent({
   }
 })
 </script>
+
+<style lang="scss">
+#app-store {
+  overflow: auto;
+  padding: var(--oc-space-medium) !important;
+}
+</style>
diff --git a/packages/web-app-app-store/src/components/AppAuthors.vue b/packages/web-app-app-store/src/components/AppAuthors.vue
new file mode 100644
index 00000000000..bac6bb24afd
--- /dev/null
+++ b/packages/web-app-app-store/src/components/AppAuthors.vue
@@ -0,0 +1,28 @@
+<template>
+  <ul class="oc-mb-rm oc-p-rm">
+    <li v-for="author in app.authors" :key="author.name" class="app-author-item">
+      <a v-if="author.url" :href="author.url" target="_blank">{{ author.name }}</a>
+      <span v-else>{{ author.name }}</span>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { App } from '../types'
+
+export default defineComponent({
+  props: {
+    app: {
+      type: Object as PropType<App>,
+      required: true
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.app-author-item {
+  list-style: none;
+}
+</style>
diff --git a/packages/web-app-app-store/src/components/AppResources.vue b/packages/web-app-app-store/src/components/AppResources.vue
new file mode 100644
index 00000000000..f07c7c4262e
--- /dev/null
+++ b/packages/web-app-app-store/src/components/AppResources.vue
@@ -0,0 +1,30 @@
+<template>
+  <ul class="oc-mb-rm oc-p-rm">
+    <li v-for="resource in app.resources" :key="resource.label" class="app-resource-item">
+      <a :href="resource.url" target="_blank" class="oc-flex-inline oc-flex-middle">
+        <oc-icon v-if="resource.icon" :name="resource.icon" size="medium" class="oc-mr-xs" />
+        {{ resource.label }}
+      </a>
+    </li>
+  </ul>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { App } from '../types'
+
+export default defineComponent({
+  name: 'AppResources',
+  props: {
+    app: {
+      type: Object as PropType<App>,
+      required: true
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.app-resource-item {
+  list-style: none;
+}
+</style>
diff --git a/packages/web-app-app-store/src/components/AppTile.vue b/packages/web-app-app-store/src/components/AppTile.vue
index 416566e8656..60f037df3fe 100644
--- a/packages/web-app-app-store/src/components/AppTile.vue
+++ b/packages/web-app-app-store/src/components/AppTile.vue
@@ -13,7 +13,7 @@
               {{ app.name }}
             </router-link>
           </h3>
-          <span class="oc-ml-s oc-text-muted oc-text-small">
+          <span class="oc-ml-s oc-text-muted oc-text-small oc-mt-xs">
             v{{ app.mostRecentVersion.version }}
           </span>
         </div>
diff --git a/packages/web-app-app-store/src/components/AppVersions.vue b/packages/web-app-app-store/src/components/AppVersions.vue
index bfe448e954a..7b9275aab3b 100644
--- a/packages/web-app-app-store/src/components/AppVersions.vue
+++ b/packages/web-app-app-store/src/components/AppVersions.vue
@@ -1,5 +1,11 @@
 <template>
-  <oc-table class="oc-width-1-1" :data="data" :fields="fields" padding-x="remove">
+  <oc-table
+    class="oc-width-1-1"
+    :data="data"
+    :fields="fields"
+    padding-x="remove"
+    :has-header="false"
+  >
     <template #version="{ item }">
       v{{ item.version }}
       <oc-tag v-if="item.version === app.mostRecentVersion.version" size="small" class="oc-ml-s">
@@ -37,14 +43,12 @@ export default defineComponent({
       return [
         {
           name: 'version',
-          title: $gettext('Version'),
           type: 'slot',
           width: 'expand',
           wrap: 'truncate'
         },
         {
           name: 'actions',
-          title: $gettext('Actions'),
           type: 'slot',
           alignH: 'right',
           width: 'shrink',
diff --git a/packages/web-app-app-store/src/types.ts b/packages/web-app-app-store/src/types.ts
index e308ab52d7b..35a25fbdacd 100644
--- a/packages/web-app-app-store/src/types.ts
+++ b/packages/web-app-app-store/src/types.ts
@@ -40,7 +40,7 @@ export const RawAppSchema = z.object({
   subtitle: z.string(),
   description: z.string().optional(),
   license: z.string(),
-  versions: z.array(AppVersionSchema),
+  versions: z.array(AppVersionSchema), // versions are expected to be sorted from newest to oldest
   authors: z.array(AppAuthorSchema),
   tags: z.array(z.string()),
   coverImage: AppImageSchema.optional(),
diff --git a/packages/web-app-app-store/src/views/AppDetails.vue b/packages/web-app-app-store/src/views/AppDetails.vue
index ad297494b08..9c5a7b11a55 100644
--- a/packages/web-app-app-store/src/views/AppDetails.vue
+++ b/packages/web-app-app-store/src/views/AppDetails.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-details oc-p-m">
+  <div class="app-details">
     <div class="back-to-list">
       <router-link :to="{ name: `${APPID}-list` }" class="oc-flex oc-flex-middle">
         <oc-icon name="arrow-left-s" fill-type="line" />
@@ -10,7 +10,7 @@
     <div class="app-content">
       <div class="oc-flex oc-flex-middle">
         <h2 class="oc-my-s oc-text-truncate">{{ app.name }}</h2>
-        <span class="oc-ml-s oc-text-muted oc-text-small">
+        <span class="oc-ml-s oc-text-muted oc-text-small oc-mt-s">
           v{{ app.mostRecentVersion.version }}
         </span>
       </div>
@@ -24,8 +24,16 @@
       <h3>{{ $gettext('Tags') }}</h3>
       <app-tags :app="app" />
     </div>
+    <div v-if="app.authors">
+      <h3>{{ $gettext('Author') }}</h3>
+      <app-authors :app="app" />
+    </div>
+    <div v-if="app.resources">
+      <h3>{{ $gettext('Resources') }}</h3>
+      <app-resources :app="app" />
+    </div>
     <div v-if="app.versions">
-      <h3>{{ $gettext('Version History') }}</h3>
+      <h3>{{ $gettext('Releases') }}</h3>
       <app-versions :app="app" />
     </div>
   </div>
@@ -38,11 +46,13 @@ import { APPID } from '../appid'
 import { useRouteParam } from '@ownclouders/web-pkg'
 import { useAppsStore } from '../piniaStores'
 import AppCover from '../components/AppCover.vue'
+import AppResources from '../components/AppResources.vue'
 import AppTags from '../components/AppTags.vue'
 import AppVersions from '../components/AppVersions.vue'
+import AppAuthors from '../components/AppAuthors.vue'
 
 export default defineComponent({
-  components: { AppVersions, AppTags, AppCover },
+  components: { AppAuthors, AppCover, AppResources, AppTags, AppVersions },
   setup() {
     const appIdRouteParam = useRouteParam('appId')
     const appId = computed(() => {
@@ -64,7 +74,6 @@ export default defineComponent({
 
 <style lang="scss">
 .app-details {
-  overflow: auto;
   max-width: 600px;
   margin: 0 auto;
 
diff --git a/packages/web-app-app-store/src/views/AppList.vue b/packages/web-app-app-store/src/views/AppList.vue
index ea062cfd93e..d34d8e4e2f1 100644
--- a/packages/web-app-app-store/src/views/AppList.vue
+++ b/packages/web-app-app-store/src/views/AppList.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="app-list oc-px">
-    <h2 v-text="$gettext('App Store')" />
+  <div class="app-list oc-mb-m">
+    <h2 class="oc-mt-rm" v-text="$gettext('App Store')" />
     <div class="oc-flex oc-flex-middle">
       <oc-text-input
         id="apps-filter"
@@ -86,8 +86,6 @@ export default defineComponent({
 
 <style lang="scss">
 .app-list {
-  overflow: auto;
-
   .app-tiles {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

From 39d66569edceb1875d0353e77baac345d27160e8 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Sat, 3 Aug 2024 13:52:20 +0200
Subject: [PATCH 11/30] fix hilighted mark item not visible in title

---
 packages/web-app-app-store/src/components/AppTile.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-app-store/src/components/AppTile.vue b/packages/web-app-app-store/src/components/AppTile.vue
index 60f037df3fe..4b0f294d931 100644
--- a/packages/web-app-app-store/src/components/AppTile.vue
+++ b/packages/web-app-app-store/src/components/AppTile.vue
@@ -6,7 +6,7 @@
     <div class="app-tile-body oc-card-body oc-p">
       <div class="app-content">
         <div class="oc-flex oc-flex-middle">
-          <h3 class="oc-my-s oc-text-truncate mark-element">
+          <h3 class="oc-my-s oc-text-truncate mark-element app-tile-title">
             <router-link
               :to="{ name: `${APPID}-details`, params: { appId: encodeURIComponent(app.id) } }"
             >
@@ -72,5 +72,12 @@ export default defineComponent({
     justify-content: space-between;
     height: 100%;
   }
+
+  .app-tile-title {
+    .mark-highlight {
+      font-weight: var(--oc-font-weight-extrabold) !important;
+      color: var(--oc-color-text-default);
+    }
+  }
 }
 </style>

From 444c5bd067eeb2e21bde2c80fbe96f413f8f70c3 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Sat, 3 Aug 2024 14:02:05 +0200
Subject: [PATCH 12/30] Add background to app details to make it look less
 empty

---
 packages/web-app-app-store/src/views/AppDetails.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-app-store/src/views/AppDetails.vue b/packages/web-app-app-store/src/views/AppDetails.vue
index 9c5a7b11a55..eb53c2b7e51 100644
--- a/packages/web-app-app-store/src/views/AppDetails.vue
+++ b/packages/web-app-app-store/src/views/AppDetails.vue
@@ -74,6 +74,9 @@ export default defineComponent({
 
 <style lang="scss">
 .app-details {
+  background-color: var(--oc-color-background-highlight);
+  border-radius: 5px;
+  padding: var(--oc-space-large);
   max-width: 600px;
   margin: 0 auto;
 
@@ -82,7 +85,7 @@ export default defineComponent({
   gap: 1rem;
 
   .back-to-list {
-    border-bottom: 1px solid var(--oc-color-border);
+    border-bottom: 1px solid var(--oc-color-input-border);
     margin-bottom: var(--oc-space-medium);
   }
 }

From 78cb54beeb1c0278408e50a9f14269fd12251706 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Sat, 3 Aug 2024 14:52:21 +0200
Subject: [PATCH 13/30] Fix search in app details on tag click not possible

---
 .../src/views/AppDetails.vue                  | 12 +++--
 .../web-app-app-store/src/views/AppList.vue   | 51 ++++++++++++++-----
 2 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/packages/web-app-app-store/src/views/AppDetails.vue b/packages/web-app-app-store/src/views/AppDetails.vue
index eb53c2b7e51..bf25a8c7f6b 100644
--- a/packages/web-app-app-store/src/views/AppDetails.vue
+++ b/packages/web-app-app-store/src/views/AppDetails.vue
@@ -22,7 +22,7 @@
     </div>
     <div v-if="app.tags">
       <h3>{{ $gettext('Tags') }}</h3>
-      <app-tags :app="app" />
+      <app-tags :app="app" @search="onTagClicked" />
     </div>
     <div v-if="app.authors">
       <h3>{{ $gettext('Author') }}</h3>
@@ -43,7 +43,7 @@
 import { computed, defineComponent, unref } from 'vue'
 import { App } from '../types'
 import { APPID } from '../appid'
-import { useRouteParam } from '@ownclouders/web-pkg'
+import { useRouteParam, useRouter } from '@ownclouders/web-pkg'
 import { useAppsStore } from '../piniaStores'
 import AppCover from '../components/AppCover.vue'
 import AppResources from '../components/AppResources.vue'
@@ -59,14 +59,20 @@ export default defineComponent({
       return decodeURIComponent(unref(appIdRouteParam))
     })
     const appsStore = useAppsStore()
+    const router = useRouter()
 
     const app = computed<App>(() => {
       return appsStore.getById(unref(appId))
     })
 
+    const onTagClicked = (tag: string) => {
+      router.push({ name: `${APPID}-list`, query: { filter: tag } })
+    }
+
     return {
       app,
-      APPID
+      APPID,
+      onTagClicked
     }
   }
 })
diff --git a/packages/web-app-app-store/src/views/AppList.vue b/packages/web-app-app-store/src/views/AppList.vue
index d34d8e4e2f1..d2f386b5366 100644
--- a/packages/web-app-app-store/src/views/AppList.vue
+++ b/packages/web-app-app-store/src/views/AppList.vue
@@ -3,11 +3,12 @@
     <h2 class="oc-mt-rm" v-text="$gettext('App Store')" />
     <div class="oc-flex oc-flex-middle">
       <oc-text-input
+        :model-value="filterTermInput"
         id="apps-filter"
-        v-model.trim="filterTerm"
         :label="$gettext('Search')"
         :clear-button-enabled="true"
         autocomplete="off"
+        @update:model-value="setFilterTerm"
       />
     </div>
     <oc-list class="app-tiles">
@@ -30,7 +31,12 @@ import { useAppsStore } from '../piniaStores'
 import AppTile from '../components/AppTile.vue'
 import { storeToRefs } from 'pinia'
 import { App } from '../types'
-import { defaultFuseOptions } from '@ownclouders/web-pkg'
+import {
+  defaultFuseOptions,
+  queryItemAsString,
+  useRouteQuery,
+  useRouter
+} from '@ownclouders/web-pkg'
 
 export default defineComponent({
   name: 'AppList',
@@ -38,10 +44,21 @@ export default defineComponent({
   setup() {
     const appsStore = useAppsStore()
     const { apps } = storeToRefs(appsStore)
+    const router = useRouter()
+
+    const filterTermQueryItem = useRouteQuery('filter')
+    const filterTerm = computed(() => {
+      return queryItemAsString(unref(filterTermQueryItem))
+    })
+    const filterTermInput = ref('')
 
-    const filterTerm = ref('')
     const setFilterTerm = (term: string) => {
-      filterTerm.value = term.trim()
+      return router.replace({
+        query: {
+          ...unref(router.currentRoute).query,
+          filter: (term || '').trim()
+        }
+      })
     }
     const filter = (apps: App[], filterTerm: string) => {
       if (!(filterTerm || '').trim()) {
@@ -65,20 +82,26 @@ export default defineComponent({
       await nextTick()
       markInstance.value = new Mark('.mark-element')
     })
-    watch(filterTerm, () => {
-      unref(markInstance)?.unmark()
-      if (unref(filterTerm)) {
-        unref(markInstance)?.mark(unref(filterTerm), {
-          element: 'span',
-          className: 'mark-highlight'
-        })
-      }
-    })
+    watch(
+      filterTerm,
+      () => {
+        filterTermInput.value = unref(filterTerm)
+        unref(markInstance)?.unmark()
+        if (unref(filterTerm)) {
+          unref(markInstance)?.mark(unref(filterTerm), {
+            element: 'span',
+            className: 'mark-highlight'
+          })
+        }
+      },
+      { immediate: true }
+    )
 
     return {
       filteredApps,
       filterTerm,
-      setFilterTerm
+      setFilterTerm,
+      filterTermInput
     }
   }
 })

From 81c3b08b976c62e01f81ae6829dfbcaacc3fc88d Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Sat, 3 Aug 2024 14:56:21 +0200
Subject: [PATCH 14/30] Add missing types as per pr review

---
 .../src/components/Groups/GroupsList.vue                      | 2 +-
 .../web-app-admin-settings/src/components/Users/UsersList.vue | 2 +-
 packages/web-app-app-store/src/index.ts                       | 4 ++--
 packages/web-app-app-store/src/views/AppList.vue              | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
index d8d6c2f2ca0..917dcd81e01 100644
--- a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
@@ -313,7 +313,7 @@ export default defineComponent({
       await unref(router).push({ ...unref(route), query: { ...unref(route).query, page: '1' } })
     })
 
-    const markInstance = ref(null)
+    const markInstance = ref<Mark>(null)
     onMounted(async () => {
       await nextTick()
       markInstance.value = new Mark('.mark-element')
diff --git a/packages/web-app-admin-settings/src/components/Users/UsersList.vue b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
index cc2aae95171..8747c6da9c1 100644
--- a/packages/web-app-admin-settings/src/components/Users/UsersList.vue
+++ b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
@@ -327,7 +327,7 @@ export default defineComponent({
       lastSelectedUserId
     )
 
-    const markInstance = ref(null)
+    const markInstance = ref<Mark>(null)
     onMounted(async () => {
       await nextTick()
       markInstance.value = new Mark('.mark-element')
diff --git a/packages/web-app-app-store/src/index.ts b/packages/web-app-app-store/src/index.ts
index a05b567013d..9479a886e05 100644
--- a/packages/web-app-app-store/src/index.ts
+++ b/packages/web-app-app-store/src/index.ts
@@ -10,7 +10,7 @@ import {
 import { urlJoin } from '@ownclouders/web-client'
 import { RouteRecordRaw } from 'vue-router'
 import { useRepositoriesStore } from './piniaStores'
-import { AppStoreConfigSchema } from './types'
+import {AppStoreConfigSchema, AppStoreRepository} from './types'
 import { APPID } from './appid'
 export default defineWebApplication({
   setup({ applicationConfig }) {
@@ -19,7 +19,7 @@ export default defineWebApplication({
     const userStore = useUserStore()
     const repositoryStore = useRepositoriesStore()
 
-    const defaultRepositories = [
+    const defaultRepositories: AppStoreRepository[] = [
       {
         name: 'awesome-ocis',
         url: 'https://raw.githubusercontent.com/owncloud/awesome-ocis/main/webApps/apps.json'
diff --git a/packages/web-app-app-store/src/views/AppList.vue b/packages/web-app-app-store/src/views/AppList.vue
index d2f386b5366..3ddfa3ed1a3 100644
--- a/packages/web-app-app-store/src/views/AppList.vue
+++ b/packages/web-app-app-store/src/views/AppList.vue
@@ -77,7 +77,7 @@ export default defineComponent({
       )
     })
 
-    const markInstance = ref(null)
+    const markInstance = ref<Mark>(null)
     onMounted(async () => {
       await nextTick()
       markInstance.value = new Mark('.mark-element')

From be50a901a897cfeb60898281a7a4caea710c6e07 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Sat, 3 Aug 2024 15:08:38 +0200
Subject: [PATCH 15/30] fix: empty filter persists in url query

---
 packages/web-app-app-store/src/views/AppList.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-app-store/src/views/AppList.vue b/packages/web-app-app-store/src/views/AppList.vue
index 3ddfa3ed1a3..0e79d0ee9d6 100644
--- a/packages/web-app-app-store/src/views/AppList.vue
+++ b/packages/web-app-app-store/src/views/AppList.vue
@@ -46,7 +46,7 @@ export default defineComponent({
     const { apps } = storeToRefs(appsStore)
     const router = useRouter()
 
-    const filterTermQueryItem = useRouteQuery('filter')
+    const filterTermQueryItem = useRouteQuery('filter', '')
     const filterTerm = computed(() => {
       return queryItemAsString(unref(filterTermQueryItem))
     })
@@ -55,8 +55,7 @@ export default defineComponent({
     const setFilterTerm = (term: string) => {
       return router.replace({
         query: {
-          ...unref(router.currentRoute).query,
-          filter: (term || '').trim()
+          ...(term && { filter: term.trim() })
         }
       })
     }

From d4c531603bc58f8cb85cb0913194f104cec5bc40 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Sat, 3 Aug 2024 17:38:43 +0200
Subject: [PATCH 16/30] Fix: mark doesn't work when enter route with filter
 term query

---
 .../src/components/AppTile.vue                |  2 +-
 .../web-app-app-store/src/views/AppList.vue   | 24 ++++++++-----------
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/packages/web-app-app-store/src/components/AppTile.vue b/packages/web-app-app-store/src/components/AppTile.vue
index 4b0f294d931..5a75a34663d 100644
--- a/packages/web-app-app-store/src/components/AppTile.vue
+++ b/packages/web-app-app-store/src/components/AppTile.vue
@@ -75,7 +75,7 @@ export default defineComponent({
 
   .app-tile-title {
     .mark-highlight {
-      font-weight: var(--oc-font-weight-extrabold) !important;
+      font-weight: unset !important;
       color: var(--oc-color-text-default);
     }
   }
diff --git a/packages/web-app-app-store/src/views/AppList.vue b/packages/web-app-app-store/src/views/AppList.vue
index 0e79d0ee9d6..ca2f3626ca0 100644
--- a/packages/web-app-app-store/src/views/AppList.vue
+++ b/packages/web-app-app-store/src/views/AppList.vue
@@ -81,20 +81,16 @@ export default defineComponent({
       await nextTick()
       markInstance.value = new Mark('.mark-element')
     })
-    watch(
-      filterTerm,
-      () => {
-        filterTermInput.value = unref(filterTerm)
-        unref(markInstance)?.unmark()
-        if (unref(filterTerm)) {
-          unref(markInstance)?.mark(unref(filterTerm), {
-            element: 'span',
-            className: 'mark-highlight'
-          })
-        }
-      },
-      { immediate: true }
-    )
+    watch([filterTerm, markInstance], () => {
+      filterTermInput.value = unref(filterTerm)
+      unref(markInstance)?.unmark()
+      if (unref(filterTerm)) {
+        unref(markInstance)?.mark(unref(filterTerm), {
+          element: 'span',
+          className: 'mark-highlight'
+        })
+      }
+    })
 
     return {
       filteredApps,

From 89ed4c41f73bdaf9378d38364417342a623946c7 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Mon, 5 Aug 2024 08:43:59 +0200
Subject: [PATCH 17/30] feat: align details style with AppTile style

---
 .../src/views/AppDetails.vue                  | 61 +++++++++----------
 1 file changed, 29 insertions(+), 32 deletions(-)

diff --git a/packages/web-app-app-store/src/views/AppDetails.vue b/packages/web-app-app-store/src/views/AppDetails.vue
index bf25a8c7f6b..f200eb2130e 100644
--- a/packages/web-app-app-store/src/views/AppDetails.vue
+++ b/packages/web-app-app-store/src/views/AppDetails.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="app-details">
-    <div class="back-to-list">
+  <div class="app-details oc-card oc-card-default oc-card-rounded">
+    <div class="oc-p-xs">
       <router-link :to="{ name: `${APPID}-list` }" class="oc-flex oc-flex-middle">
         <oc-icon name="arrow-left-s" fill-type="line" />
         <span v-text="$gettext('Back to list')" />
       </router-link>
     </div>
     <app-cover :app="app" />
-    <div class="app-content">
+    <div class="app-content oc-card-body oc-p">
       <div class="oc-flex oc-flex-middle">
         <h2 class="oc-my-s oc-text-truncate">{{ app.name }}</h2>
         <span class="oc-ml-s oc-text-muted oc-text-small oc-mt-s">
@@ -15,26 +15,26 @@
         </span>
       </div>
       <p class="oc-my-rm">{{ app.subtitle }}</p>
-    </div>
-    <div v-if="app.description">
-      <h3>{{ $gettext('Details') }}</h3>
-      <p class="oc-my-s">{{ app.description }}</p>
-    </div>
-    <div v-if="app.tags">
-      <h3>{{ $gettext('Tags') }}</h3>
-      <app-tags :app="app" @search="onTagClicked" />
-    </div>
-    <div v-if="app.authors">
-      <h3>{{ $gettext('Author') }}</h3>
-      <app-authors :app="app" />
-    </div>
-    <div v-if="app.resources">
-      <h3>{{ $gettext('Resources') }}</h3>
-      <app-resources :app="app" />
-    </div>
-    <div v-if="app.versions">
-      <h3>{{ $gettext('Releases') }}</h3>
-      <app-versions :app="app" />
+      <div v-if="app.description">
+        <h3>{{ $gettext('Details') }}</h3>
+        <p class="oc-my-s">{{ app.description }}</p>
+      </div>
+      <div v-if="app.tags">
+        <h3>{{ $gettext('Tags') }}</h3>
+        <app-tags :app="app" @search="onTagClicked" />
+      </div>
+      <div v-if="app.authors">
+        <h3>{{ $gettext('Author') }}</h3>
+        <app-authors :app="app" />
+      </div>
+      <div v-if="app.resources">
+        <h3>{{ $gettext('Resources') }}</h3>
+        <app-resources :app="app" />
+      </div>
+      <div v-if="app.versions">
+        <h3>{{ $gettext('Releases') }}</h3>
+        <app-versions :app="app" />
+      </div>
     </div>
   </div>
 </template>
@@ -81,18 +81,15 @@ export default defineComponent({
 <style lang="scss">
 .app-details {
   background-color: var(--oc-color-background-highlight);
-  border-radius: 5px;
-  padding: var(--oc-space-large);
+  box-shadow: none;
   max-width: 600px;
   margin: 0 auto;
+  outline: 1px solid var(--oc-color-border);
 
-  display: flex;
-  flex-flow: column;
-  gap: 1rem;
-
-  .back-to-list {
-    border-bottom: 1px solid var(--oc-color-input-border);
-    margin-bottom: var(--oc-space-medium);
+  .app-content {
+    display: flex;
+    flex-flow: column;
+    gap: 1rem;
   }
 }
 </style>

From e77b97ec73679f4b18e45d1220907a16526b7dd8 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Mon, 5 Aug 2024 09:32:53 +0200
Subject: [PATCH 18/30] feat: show screenshots in app details

---
 .../src/components/AppCover.vue               |  44 -------
 .../src/components/AppImageGallery.vue        | 112 ++++++++++++++++++
 .../src/components/AppTile.vue                |   6 +-
 packages/web-app-app-store/src/types.ts       |   1 +
 .../src/views/AppDetails.vue                  |   6 +-
 5 files changed, 119 insertions(+), 50 deletions(-)
 delete mode 100644 packages/web-app-app-store/src/components/AppCover.vue
 create mode 100644 packages/web-app-app-store/src/components/AppImageGallery.vue

diff --git a/packages/web-app-app-store/src/components/AppCover.vue b/packages/web-app-app-store/src/components/AppCover.vue
deleted file mode 100644
index 36a7f64b99a..00000000000
--- a/packages/web-app-app-store/src/components/AppCover.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <div class="app-cover-image">
-    <oc-img v-if="app.coverImage?.url" :src="app.coverImage?.url" />
-    <div v-else class="fallback-icon">
-      <oc-icon name="computer" size="xxlarge" />
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent, PropType } from 'vue'
-import { App } from '../types'
-
-export default defineComponent({
-  name: 'AppCover',
-  props: {
-    app: {
-      type: Object as PropType<App>,
-      required: true
-    }
-  }
-})
-</script>
-
-<style lang="scss">
-.app-cover-image {
-  width: 100%;
-
-  img {
-    width: 100%;
-    max-width: 100%;
-    aspect-ratio: 3/2;
-    object-fit: cover;
-  }
-
-  .fallback-icon {
-    width: 100%;
-    aspect-ratio: 3/2;
-    background-color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-</style>
diff --git a/packages/web-app-app-store/src/components/AppImageGallery.vue b/packages/web-app-app-store/src/components/AppImageGallery.vue
new file mode 100644
index 00000000000..814a2a0162b
--- /dev/null
+++ b/packages/web-app-app-store/src/components/AppImageGallery.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="app-image-wrapper">
+    <div class="app-image">
+      <oc-img v-if="currentImage?.url" :src="currentImage?.url" />
+      <div v-else class="fallback-icon">
+        <oc-icon name="computer" size="xxlarge" />
+      </div>
+    </div>
+    <ol v-if="hasPagination" class="app-image-pagination">
+      <li>
+        <oc-button class="oc-p-xs" @click="previousImage">
+          <oc-icon name="arrow-left-s" />
+        </oc-button>
+      </li>
+      <li v-for="(image, index) in images" :key="`gallery-page-${index}`">
+        <oc-button
+          class="oc-py-xs"
+          :disabled="index === currentImageIndex"
+          @click="setImageIndex(index)"
+        >
+          {{ index + 1 }}
+        </oc-button>
+      </li>
+      <li>
+        <oc-button class="oc-p-xs" @click="nextImage">
+          <oc-icon name="arrow-right-s" />
+        </oc-button>
+      </li>
+    </ol>
+  </div>
+</template>
+<script lang="ts">
+import { computed, defineComponent, PropType, ref, unref } from 'vue'
+import { App, AppImage } from '../types'
+
+export default defineComponent({
+  name: 'AppImageGallery',
+  props: {
+    app: {
+      type: Object as PropType<App>,
+      required: true
+    },
+    showPagination: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  setup(props) {
+    const images = computed(() => {
+      return [props.app.coverImage, ...props.app.screenshots]
+    })
+
+    const currentImageIndex = ref<number>(0)
+    const currentImage = computed<AppImage>(() => unref(images)[unref(currentImageIndex)])
+    const hasPagination = computed(() => props.showPagination && unref(images).length > 1)
+    const nextImage = () => {
+      currentImageIndex.value = (unref(currentImageIndex) + 1) % unref(images).length
+    }
+    const previousImage = () => {
+      currentImageIndex.value =
+        (unref(currentImageIndex) - 1 + unref(images).length) % unref(images).length
+    }
+    const setImageIndex = (index: number) => {
+      currentImageIndex.value = index
+    }
+
+    return {
+      currentImage,
+      currentImageIndex,
+      images,
+      hasPagination,
+      nextImage,
+      previousImage,
+      setImageIndex
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.app-image {
+  width: 100%;
+
+  img {
+    width: 100%;
+    max-width: 100%;
+    aspect-ratio: 3/2;
+    object-fit: cover;
+  }
+
+  .fallback-icon {
+    width: 100%;
+    aspect-ratio: 3/2;
+    background-color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+.app-image-pagination {
+  width: 100%;
+  padding: 0;
+  margin-top: var(--oc-space-small);
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/packages/web-app-app-store/src/components/AppTile.vue b/packages/web-app-app-store/src/components/AppTile.vue
index 5a75a34663d..6489adca7f6 100644
--- a/packages/web-app-app-store/src/components/AppTile.vue
+++ b/packages/web-app-app-store/src/components/AppTile.vue
@@ -1,7 +1,7 @@
 <template>
   <li class="app-tile oc-card oc-card-default oc-card-rounded">
     <router-link :to="{ name: `${APPID}-details`, params: { appId: encodeURIComponent(app.id) } }">
-      <app-cover :app="app" />
+      <app-image-gallery :app="app" />
     </router-link>
     <div class="app-tile-body oc-card-body oc-p">
       <div class="app-content">
@@ -29,13 +29,13 @@
 import { defineComponent, type PropType } from 'vue'
 import { App } from '../types'
 import { APPID } from '../appid'
-import AppCover from './AppCover.vue'
 import AppTags from './AppTags.vue'
 import AppActions from './AppActions.vue'
+import AppImageGallery from './AppImageGallery.vue'
 
 export default defineComponent({
   name: 'AppTile',
-  components: { AppActions, AppTags, AppCover },
+  components: { AppImageGallery, AppActions, AppTags },
   props: {
     app: {
       type: Object as PropType<App>,
diff --git a/packages/web-app-app-store/src/types.ts b/packages/web-app-app-store/src/types.ts
index 35a25fbdacd..2bcc982f9c3 100644
--- a/packages/web-app-app-store/src/types.ts
+++ b/packages/web-app-app-store/src/types.ts
@@ -27,6 +27,7 @@ export const AppImageSchema = z.object({
   url: z.string(),
   caption: z.string().optional()
 })
+export type AppImage = z.infer<typeof AppImageSchema>
 
 export const AppResourceSchema = z.object({
   url: z.string(),
diff --git a/packages/web-app-app-store/src/views/AppDetails.vue b/packages/web-app-app-store/src/views/AppDetails.vue
index f200eb2130e..77be78da77f 100644
--- a/packages/web-app-app-store/src/views/AppDetails.vue
+++ b/packages/web-app-app-store/src/views/AppDetails.vue
@@ -6,7 +6,7 @@
         <span v-text="$gettext('Back to list')" />
       </router-link>
     </div>
-    <app-cover :app="app" />
+    <app-image-gallery :app="app" :show-pagination="true" />
     <div class="app-content oc-card-body oc-p">
       <div class="oc-flex oc-flex-middle">
         <h2 class="oc-my-s oc-text-truncate">{{ app.name }}</h2>
@@ -45,14 +45,14 @@ import { App } from '../types'
 import { APPID } from '../appid'
 import { useRouteParam, useRouter } from '@ownclouders/web-pkg'
 import { useAppsStore } from '../piniaStores'
-import AppCover from '../components/AppCover.vue'
 import AppResources from '../components/AppResources.vue'
 import AppTags from '../components/AppTags.vue'
 import AppVersions from '../components/AppVersions.vue'
 import AppAuthors from '../components/AppAuthors.vue'
+import AppImageGallery from '../components/AppImageGallery.vue'
 
 export default defineComponent({
-  components: { AppAuthors, AppCover, AppResources, AppTags, AppVersions },
+  components: { AppImageGallery, AppAuthors, AppResources, AppTags, AppVersions },
   setup() {
     const appIdRouteParam = useRouteParam('appId')
     const appId = computed(() => {

From 5c01bafe5dc844b75f1d4d159650ee28fbdfdf83 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Mon, 5 Aug 2024 10:00:34 +0200
Subject: [PATCH 19/30] Fix: make tags emit click event instead of search
 event, as it shoudn't make assumptions

---
 packages/web-app-app-store/src/components/AppTags.vue | 10 +++++-----
 packages/web-app-app-store/src/components/AppTile.vue |  2 +-
 packages/web-app-app-store/src/views/AppDetails.vue   |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/web-app-app-store/src/components/AppTags.vue b/packages/web-app-app-store/src/components/AppTags.vue
index 44f26aa47c1..3f655bc476f 100644
--- a/packages/web-app-app-store/src/components/AppTags.vue
+++ b/packages/web-app-app-store/src/components/AppTags.vue
@@ -6,7 +6,7 @@
       size="small"
       class="oc-text-nowrap"
       type="button"
-      @click="emitSearchTerm(tag)"
+      @click="emitClick(tag)"
     >
       <span class="mark-element">{{ tag }}</span>
     </oc-tag>
@@ -24,14 +24,14 @@ export default defineComponent({
       required: true
     }
   },
-  emits: ['search'],
+  emits: ['click'],
   setup(props, { emit }) {
-    const emitSearchTerm = (term: string) => {
-      emit('search', term)
+    const emitClick = (tagName: string) => {
+      emit('click', tagName)
     }
 
     return {
-      emitSearchTerm
+      emitClick
     }
   }
 })
diff --git a/packages/web-app-app-store/src/components/AppTile.vue b/packages/web-app-app-store/src/components/AppTile.vue
index 6489adca7f6..868387e3f04 100644
--- a/packages/web-app-app-store/src/components/AppTile.vue
+++ b/packages/web-app-app-store/src/components/AppTile.vue
@@ -19,7 +19,7 @@
         </div>
         <p class="oc-my-s mark-element">{{ app.subtitle }}</p>
       </div>
-      <app-tags :app="app" @search="emitSearchTerm" />
+      <app-tags :app="app" @click="emitSearchTerm" />
       <app-actions :app="app" />
     </div>
   </li>
diff --git a/packages/web-app-app-store/src/views/AppDetails.vue b/packages/web-app-app-store/src/views/AppDetails.vue
index 77be78da77f..2ae90ac4302 100644
--- a/packages/web-app-app-store/src/views/AppDetails.vue
+++ b/packages/web-app-app-store/src/views/AppDetails.vue
@@ -21,7 +21,7 @@
       </div>
       <div v-if="app.tags">
         <h3>{{ $gettext('Tags') }}</h3>
-        <app-tags :app="app" @search="onTagClicked" />
+        <app-tags :app="app" @click="onTagClicked" />
       </div>
       <div v-if="app.authors">
         <h3>{{ $gettext('Author') }}</h3>

From eb1fc0bd13aa11e658779fc5bc9ed8bf1192ce32 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 6 Aug 2024 06:11:54 +0200
Subject: [PATCH 20/30] feat: restyle image navigation

---
 .../src/components/AppImageGallery.vue        | 67 ++++++++++---------
 1 file changed, 37 insertions(+), 30 deletions(-)

diff --git a/packages/web-app-app-store/src/components/AppImageGallery.vue b/packages/web-app-app-store/src/components/AppImageGallery.vue
index 814a2a0162b..da2339f1479 100644
--- a/packages/web-app-app-store/src/components/AppImageGallery.vue
+++ b/packages/web-app-app-store/src/components/AppImageGallery.vue
@@ -6,27 +6,27 @@
         <oc-icon name="computer" size="xxlarge" />
       </div>
     </div>
-    <ol v-if="hasPagination" class="app-image-pagination">
+    <ul v-if="hasPagination" class="app-image-navigation">
       <li>
-        <oc-button class="oc-p-xs" @click="previousImage">
+        <oc-button class="oc-p-xs" appearance="raw-inverse" @click="previousImage">
           <oc-icon name="arrow-left-s" />
         </oc-button>
       </li>
       <li v-for="(image, index) in images" :key="`gallery-page-${index}`">
-        <oc-button
-          class="oc-py-xs"
-          :disabled="index === currentImageIndex"
-          @click="setImageIndex(index)"
-        >
-          {{ index + 1 }}
+        <oc-button class="oc-py-xs" appearance="raw-inverse" @click="setImageIndex(index)">
+          <oc-icon
+            name="circle"
+            size="small"
+            :fill-type="index === currentImageIndex ? 'fill' : 'line'"
+          />
         </oc-button>
       </li>
       <li>
-        <oc-button class="oc-p-xs" @click="nextImage">
+        <oc-button class="oc-p-xs" appearance="raw-inverse" @click="nextImage">
           <oc-icon name="arrow-right-s" />
         </oc-button>
       </li>
-    </ol>
+    </ul>
   </div>
 </template>
 <script lang="ts">
@@ -79,34 +79,41 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.app-image {
-  width: 100%;
+.app-image-wrapper {
+  position: relative;
 
-  img {
+  .app-image {
     width: 100%;
-    max-width: 100%;
-    aspect-ratio: 3/2;
-    object-fit: cover;
+
+    img {
+      width: 100%;
+      max-width: 100%;
+      aspect-ratio: 3/2;
+      object-fit: cover;
+    }
+
+    .fallback-icon {
+      width: 100%;
+      aspect-ratio: 3/2;
+      background-color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 
-  .fallback-icon {
+  .app-image-navigation {
+    list-style: none;
     width: 100%;
-    aspect-ratio: 3/2;
-    background-color: white;
+    position: absolute;
+    bottom: 0;
     display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
     align-items: center;
     justify-content: center;
+    padding: 0;
+    background-color: rgba(0, 0, 0, 0.3);
   }
 }
-.app-image-pagination {
-  width: 100%;
-  padding: 0;
-  margin-top: var(--oc-space-small);
-  list-style: none;
-  display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
-  align-items: center;
-  justify-content: center;
-}
 </style>

From 6b7b146d4f868ef08a08399c5e9df1346d6a550b Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 6 Aug 2024 06:17:26 +0200
Subject: [PATCH 21/30] ci: add app store url to csp.yaml files

---
 deployments/examples/ocis_web/config/ocis/csp.yaml | 2 ++
 tests/drone/csp.yaml                               | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/deployments/examples/ocis_web/config/ocis/csp.yaml b/deployments/examples/ocis_web/config/ocis/csp.yaml
index c63031f66a5..aea4ec41805 100644
--- a/deployments/examples/ocis_web/config/ocis/csp.yaml
+++ b/deployments/examples/ocis_web/config/ocis/csp.yaml
@@ -3,6 +3,7 @@ directives:
     - '''self'''
   connect-src:
     - '''self'''
+    - 'https://raw.githubusercontent.com/owncloud/awesome-ocis/'
     - 'https://${COMPANION_DOMAIN|companion.owncloud.test}/'
     - 'wss://${COMPANION_DOMAIN|companion.owncloud.test}/'
   default-src:
@@ -20,6 +21,7 @@ directives:
     - '''self'''
     - 'data:'
     - 'blob:'
+    - 'https://raw.githubusercontent.com/owncloud/awesome-ocis/'
     # In contrary to bash and docker the default is given after the | character
     - 'https://${COLLABORA_DOMAIN|collabora.owncloud.test}/'
   manifest-src:
diff --git a/tests/drone/csp.yaml b/tests/drone/csp.yaml
index 30fb4bd1ace..0b6fb2daad8 100644
--- a/tests/drone/csp.yaml
+++ b/tests/drone/csp.yaml
@@ -3,6 +3,7 @@ directives:
     - '''self'''
   connect-src:
     - '''self'''
+    - 'https://raw.githubusercontent.com/owncloud/awesome-ocis/'
     # In contrast to bash and docker the default is given after the | character
     - 'https://${KEYCLOAK_DOMAIN|keycloak:8443}/'
   default-src:
@@ -22,6 +23,7 @@ directives:
     - '''self'''
     - 'data:'
     - 'blob:'
+    - 'https://raw.githubusercontent.com/owncloud/awesome-ocis/'
     # In contrast to bash and docker the default is given after the | character
     - 'https://${ONLYOFFICE_DOMAIN|onlyoffice:443}/'
     - 'https://${COLLABORA_DOMAIN|collabora:9980}/'

From 57fa5bc1acf7089f0beac513936ad233a6ae9c6e Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 6 Aug 2024 06:26:58 +0200
Subject: [PATCH 22/30] refactor: use app-loading-spinner instead of custom
 component

---
 .../web-app-app-store/src/LayoutContainer.vue | 15 +++---
 .../src/components/LoadingApps.vue            | 50 -------------------
 2 files changed, 7 insertions(+), 58 deletions(-)
 delete mode 100644 packages/web-app-app-store/src/components/LoadingApps.vue

diff --git a/packages/web-app-app-store/src/LayoutContainer.vue b/packages/web-app-app-store/src/LayoutContainer.vue
index 674023e016d..87497b61bed 100644
--- a/packages/web-app-app-store/src/LayoutContainer.vue
+++ b/packages/web-app-app-store/src/LayoutContainer.vue
@@ -1,6 +1,6 @@
 <template>
   <main id="app-store">
-    <loading-apps v-if="areAppsLoading" />
+    <app-loading-spinner v-if="areAppsLoading" />
     <template v-else>
       <router-view />
     </template>
@@ -8,22 +8,21 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { defineComponent, onMounted, ref } from 'vue'
 import { useAppsStore } from './piniaStores'
-import { useLoadingService } from '@ownclouders/web-pkg'
-import LoadingApps from './components/LoadingApps.vue'
+import { AppLoadingSpinner } from '@ownclouders/web-pkg'
 
 export default defineComponent({
   name: 'LayoutContainer',
-  components: { LoadingApps },
+  components: { AppLoadingSpinner },
   setup() {
     const appsStore = useAppsStore()
-    const loadingService = useLoadingService()
 
     const areAppsLoading = ref(true)
-    loadingService.addTask(async () => {
+    const appsLoadingPromise = appsStore.loadApps()
+    onMounted(async () => {
       try {
-        await appsStore.loadApps()
+        await appsLoadingPromise
       } catch (e) {
         console.error(e)
       } finally {
diff --git a/packages/web-app-app-store/src/components/LoadingApps.vue b/packages/web-app-app-store/src/components/LoadingApps.vue
deleted file mode 100644
index 6897ebe37ea..00000000000
--- a/packages/web-app-app-store/src/components/LoadingApps.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <div class="app-loader oc-height-viewport oc-flex oc-flex-column oc-flex-center oc-flex-middle">
-    <div class="oc-card oc-text-center oc-width-large">
-      <div class="oc-card-header">
-        <h2 v-text="$gettext('Loading apps…')" />
-      </div>
-      <div class="oc-card-body">
-        <p v-text="$gettext(`Please wait a moment while we're loading all apps.`)"></p>
-      </div>
-      <div class="oc-card-footer oc-pt-rm">
-        <p>{{ footerSlogan }}</p>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { computed, defineComponent } from 'vue'
-import { useThemeStore } from '@ownclouders/web-pkg'
-import { storeToRefs } from 'pinia'
-
-export default defineComponent({
-  setup() {
-    const themeStore = useThemeStore()
-
-    const { currentTheme } = storeToRefs(themeStore)
-    const footerSlogan = computed(() => currentTheme.value.common.slogan)
-
-    return {
-      footerSlogan
-    }
-  }
-})
-</script>
-
-<style lang="scss">
-.app-loader {
-  .oc-card {
-    background: var(--oc-color-background-highlight);
-    border-radius: 15px;
-  }
-
-  .oc-text-input-message {
-    justify-content: center;
-  }
-
-  .oc-card-header h2 {
-    margin: 0;
-  }
-}
-</style>

From eb6e81be5a438bfe31a4e7835e8c518c6afc5f3e Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 6 Aug 2024 06:36:27 +0200
Subject: [PATCH 23/30] docs: add changelog item

---
 changelog/unreleased/enhancement-app-store | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 changelog/unreleased/enhancement-app-store

diff --git a/changelog/unreleased/enhancement-app-store b/changelog/unreleased/enhancement-app-store
new file mode 100644
index 00000000000..2619376c1fe
--- /dev/null
+++ b/changelog/unreleased/enhancement-app-store
@@ -0,0 +1,9 @@
+Enhancement: App Store app
+
+We've added a new App Store app to the platform. This app allows you to explore available apps and download them from
+our `awesome-ocis` github repository.
+
+In order to use this app, you currently need to adjust your `csp.yaml` file (only if you have it customized).
+Please add the URL `'https://raw.githubusercontent.com/owncloud/awesome-ocis/'` to the sections `connect-src` and `img-src`.
+
+https://github.com/owncloud/web/pull/11302

From d2203d9299bf83666b21a90a05741ec9e1b1007a Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 6 Aug 2024 06:39:27 +0200
Subject: [PATCH 24/30] feat: set up translations

---
 packages/web-app-app-store/l10n/.tx/config        | 9 +++++++++
 packages/web-app-app-store/l10n/translations.json | 1 +
 packages/web-app-app-store/src/index.ts           | 2 ++
 3 files changed, 12 insertions(+)
 create mode 100644 packages/web-app-app-store/l10n/.tx/config
 create mode 100644 packages/web-app-app-store/l10n/translations.json

diff --git a/packages/web-app-app-store/l10n/.tx/config b/packages/web-app-app-store/l10n/.tx/config
new file mode 100644
index 00000000000..a618cb5d77a
--- /dev/null
+++ b/packages/web-app-app-store/l10n/.tx/config
@@ -0,0 +1,9 @@
+[main]
+host = https://www.transifex.com
+
+[o:owncloud-org:p:owncloud-web:r:app-store]
+file_filter = locale/<lang>/app.po
+minimum_perc = 0
+source_file = template.pot
+source_lang = en
+type = PO
diff --git a/packages/web-app-app-store/l10n/translations.json b/packages/web-app-app-store/l10n/translations.json
new file mode 100644
index 00000000000..0967ef424bc
--- /dev/null
+++ b/packages/web-app-app-store/l10n/translations.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/web-app-app-store/src/index.ts b/packages/web-app-app-store/src/index.ts
index 9479a886e05..ef9372148be 100644
--- a/packages/web-app-app-store/src/index.ts
+++ b/packages/web-app-app-store/src/index.ts
@@ -1,3 +1,4 @@
+import translations from '../l10n/translations.json'
 import { useGettext } from 'vue3-gettext'
 import { computed, unref } from 'vue'
 import {
@@ -104,6 +105,7 @@ export default defineWebApplication({
     return {
       appInfo,
       routes,
+      translations,
       extensions
     }
   }

From 5abca407dc25bd5c7164dac327213c4036b2f99f Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 6 Aug 2024 06:42:01 +0200
Subject: [PATCH 25/30] fix: lint

---
 packages/web-app-app-store/src/index.ts          | 3 ++-
 packages/web-app-app-store/src/views/AppList.vue | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-app-store/src/index.ts b/packages/web-app-app-store/src/index.ts
index ef9372148be..3738c91e7ca 100644
--- a/packages/web-app-app-store/src/index.ts
+++ b/packages/web-app-app-store/src/index.ts
@@ -11,8 +11,9 @@ import {
 import { urlJoin } from '@ownclouders/web-client'
 import { RouteRecordRaw } from 'vue-router'
 import { useRepositoriesStore } from './piniaStores'
-import {AppStoreConfigSchema, AppStoreRepository} from './types'
+import { AppStoreConfigSchema, AppStoreRepository } from './types'
 import { APPID } from './appid'
+
 export default defineWebApplication({
   setup({ applicationConfig }) {
     const { $gettext } = useGettext()
diff --git a/packages/web-app-app-store/src/views/AppList.vue b/packages/web-app-app-store/src/views/AppList.vue
index ca2f3626ca0..49c73342843 100644
--- a/packages/web-app-app-store/src/views/AppList.vue
+++ b/packages/web-app-app-store/src/views/AppList.vue
@@ -3,8 +3,8 @@
     <h2 class="oc-mt-rm" v-text="$gettext('App Store')" />
     <div class="oc-flex oc-flex-middle">
       <oc-text-input
-        :model-value="filterTermInput"
         id="apps-filter"
+        :model-value="filterTermInput"
         :label="$gettext('Search')"
         :clear-button-enabled="true"
         autocomplete="off"

From 32f7244af277e17e8dd1e6d025ab7711d8eb56e6 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 6 Aug 2024 09:51:06 +0200
Subject: [PATCH 26/30] feat: restyle image nav background

---
 .../src/components/AppImageGallery.vue           | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/web-app-app-store/src/components/AppImageGallery.vue b/packages/web-app-app-store/src/components/AppImageGallery.vue
index da2339f1479..cd440f0ca11 100644
--- a/packages/web-app-app-store/src/components/AppImageGallery.vue
+++ b/packages/web-app-app-store/src/components/AppImageGallery.vue
@@ -8,12 +8,17 @@
     </div>
     <ul v-if="hasPagination" class="app-image-navigation">
       <li>
-        <oc-button class="oc-p-xs" appearance="raw-inverse" @click="previousImage">
+        <oc-button class="oc-p-xs" appearance="raw" variation="primary" @click="previousImage">
           <oc-icon name="arrow-left-s" />
         </oc-button>
       </li>
       <li v-for="(image, index) in images" :key="`gallery-page-${index}`">
-        <oc-button class="oc-py-xs" appearance="raw-inverse" @click="setImageIndex(index)">
+        <oc-button
+          class="oc-py-xs"
+          appearance="raw"
+          variation="primary"
+          @click="setImageIndex(index)"
+        >
           <oc-icon
             name="circle"
             size="small"
@@ -22,7 +27,7 @@
         </oc-button>
       </li>
       <li>
-        <oc-button class="oc-p-xs" appearance="raw-inverse" @click="nextImage">
+        <oc-button class="oc-p-xs" appearance="raw" variation="primary" @click="nextImage">
           <oc-icon name="arrow-right-s" />
         </oc-button>
       </li>
@@ -112,8 +117,9 @@ export default defineComponent({
     gap: 0.5rem;
     align-items: center;
     justify-content: center;
-    padding: 0;
-    background-color: rgba(0, 0, 0, 0.3);
+    padding: var(--oc-space-small) 0;
+    margin: 0;
+    background-color: rgba(255, 255, 255, 0.5);
   }
 }
 </style>

From f9d342fe8e0ff20b19126e1a788f18eb434ea81d Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 6 Aug 2024 09:54:10 +0200
Subject: [PATCH 27/30] fix: types

---
 .../web-app-app-store/src/components/AppActions.vue    |  3 ++-
 .../web-app-app-store/src/components/AppAuthors.vue    |  3 ++-
 .../src/components/AppImageGallery.vue                 |  3 ++-
 .../web-app-app-store/src/components/AppResources.vue  |  3 ++-
 packages/web-app-app-store/src/components/AppTags.vue  |  3 ++-
 packages/web-app-app-store/src/components/AppTile.vue  |  3 ++-
 .../web-app-app-store/src/components/AppVersions.vue   | 10 ++++++++--
 7 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/web-app-app-store/src/components/AppActions.vue b/packages/web-app-app-store/src/components/AppActions.vue
index b3fac6a37c3..0a0b4304af7 100644
--- a/packages/web-app-app-store/src/components/AppActions.vue
+++ b/packages/web-app-app-store/src/components/AppActions.vue
@@ -21,7 +21,8 @@ export default defineComponent({
   props: {
     app: {
       type: Object as PropType<App>,
-      required: true
+      required: true,
+      default: (): App => undefined
     },
     version: {
       type: Object as PropType<AppVersion>,
diff --git a/packages/web-app-app-store/src/components/AppAuthors.vue b/packages/web-app-app-store/src/components/AppAuthors.vue
index bac6bb24afd..f927d6cc390 100644
--- a/packages/web-app-app-store/src/components/AppAuthors.vue
+++ b/packages/web-app-app-store/src/components/AppAuthors.vue
@@ -15,7 +15,8 @@ export default defineComponent({
   props: {
     app: {
       type: Object as PropType<App>,
-      required: true
+      required: true,
+      default: (): App => undefined
     }
   }
 })
diff --git a/packages/web-app-app-store/src/components/AppImageGallery.vue b/packages/web-app-app-store/src/components/AppImageGallery.vue
index cd440f0ca11..edd626895b0 100644
--- a/packages/web-app-app-store/src/components/AppImageGallery.vue
+++ b/packages/web-app-app-store/src/components/AppImageGallery.vue
@@ -43,7 +43,8 @@ export default defineComponent({
   props: {
     app: {
       type: Object as PropType<App>,
-      required: true
+      required: true,
+      default: (): App => undefined
     },
     showPagination: {
       type: Boolean,
diff --git a/packages/web-app-app-store/src/components/AppResources.vue b/packages/web-app-app-store/src/components/AppResources.vue
index f07c7c4262e..0638f243873 100644
--- a/packages/web-app-app-store/src/components/AppResources.vue
+++ b/packages/web-app-app-store/src/components/AppResources.vue
@@ -17,7 +17,8 @@ export default defineComponent({
   props: {
     app: {
       type: Object as PropType<App>,
-      required: true
+      required: true,
+      default: (): App => undefined
     }
   }
 })
diff --git a/packages/web-app-app-store/src/components/AppTags.vue b/packages/web-app-app-store/src/components/AppTags.vue
index 3f655bc476f..db53a38adae 100644
--- a/packages/web-app-app-store/src/components/AppTags.vue
+++ b/packages/web-app-app-store/src/components/AppTags.vue
@@ -21,7 +21,8 @@ export default defineComponent({
   props: {
     app: {
       type: Object as PropType<App>,
-      required: true
+      required: true,
+      default: (): App => undefined
     }
   },
   emits: ['click'],
diff --git a/packages/web-app-app-store/src/components/AppTile.vue b/packages/web-app-app-store/src/components/AppTile.vue
index 868387e3f04..7a218007006 100644
--- a/packages/web-app-app-store/src/components/AppTile.vue
+++ b/packages/web-app-app-store/src/components/AppTile.vue
@@ -39,7 +39,8 @@ export default defineComponent({
   props: {
     app: {
       type: Object as PropType<App>,
-      required: true
+      required: true,
+      default: (): App => undefined
     }
   },
   emits: ['search'],
diff --git a/packages/web-app-app-store/src/components/AppVersions.vue b/packages/web-app-app-store/src/components/AppVersions.vue
index 7b9275aab3b..78cd341d383 100644
--- a/packages/web-app-app-store/src/components/AppVersions.vue
+++ b/packages/web-app-app-store/src/components/AppVersions.vue
@@ -30,14 +30,20 @@ export default defineComponent({
   props: {
     app: {
       type: Object as PropType<App>,
-      required: true
+      required: true,
+      default: (): App => undefined
     }
   },
   setup(props) {
     const { $gettext } = useGettext()
 
     const data = computed(() => {
-      return props.app.versions
+      return props.app.versions.map((version) => {
+        return {
+          ...version,
+          id: version.version
+        }
+      })
     })
     const fields = computed(() => {
       return [

From 637027dccec52f39a655a7f25d7a96f69cf0bf2b Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 6 Aug 2024 10:30:20 +0200
Subject: [PATCH 28/30] fix: test behaviour regarding empty string in
 OcTextInput

---
 .../src/components/OcTextInput/OcTextInput.spec.ts            | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts b/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts
index bc06704bab9..60af01e6b87 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts
@@ -325,13 +325,13 @@ describe('OcTextInput', () => {
       expect(wrapper.find(selectors.clearInputButton).exists()).toBeFalsy()
     })
 
-    it('has clear button when it is enabled but the input is an empty string but not null', () => {
+    it('has no clear button when it is enabled but the input is an empty string', () => {
       const wrapper = getShallowWrapper({
         clearButtonEnabled: true,
         modelValue: ''
       })
 
-      expect(wrapper.find(selectors.clearInputButton).exists()).toBeTruthy()
+      expect(wrapper.find(selectors.clearInputButton).exists()).toBeFalsy()
     })
 
     it('has no clear button when it is enabled but the input is null', () => {

From af6ba271565b5f8830ec2a8d502b7ca705e2bcfa Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 6 Aug 2024 10:40:26 +0200
Subject: [PATCH 29/30] feat: make image nav background more opaque

---
 packages/web-app-app-store/src/components/AppImageGallery.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-app-store/src/components/AppImageGallery.vue b/packages/web-app-app-store/src/components/AppImageGallery.vue
index edd626895b0..16046367da9 100644
--- a/packages/web-app-app-store/src/components/AppImageGallery.vue
+++ b/packages/web-app-app-store/src/components/AppImageGallery.vue
@@ -120,7 +120,7 @@ export default defineComponent({
     justify-content: center;
     padding: var(--oc-space-small) 0;
     margin: 0;
-    background-color: rgba(255, 255, 255, 0.5);
+    background-color: rgba(255, 255, 255, 0.8);
   }
 }
 </style>

From 853b4da66b73a513e3f9f1f1de8733037f14a023 Mon Sep 17 00:00:00 2001
From: Benedikt Kulmann <benedikt@kulmann.biz>
Date: Tue, 6 Aug 2024 14:42:38 +0200
Subject: [PATCH 30/30] feat: add contextual helper link to page titles

---
 .../src/components/AppContextualHelper.vue        | 11 +++++++++++
 .../web-app-app-store/src/views/AppDetails.vue    | 15 +++++++++++++--
 packages/web-app-app-store/src/views/AppList.vue  |  8 ++++++--
 3 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 packages/web-app-app-store/src/components/AppContextualHelper.vue

diff --git a/packages/web-app-app-store/src/components/AppContextualHelper.vue b/packages/web-app-app-store/src/components/AppContextualHelper.vue
new file mode 100644
index 00000000000..5e0768c4e4f
--- /dev/null
+++ b/packages/web-app-app-store/src/components/AppContextualHelper.vue
@@ -0,0 +1,11 @@
+<template>
+  <oc-contextual-helper
+    :title="$gettext('How to install?')"
+    :text="
+      $gettext(
+        'The App Store app lets you download apps as .zip files. Please follow the link below to learn how to install these apps into your oCIS.'
+      )
+    "
+    read-more-link="https://owncloud.dev/services/web/#web-apps"
+  />
+</template>
diff --git a/packages/web-app-app-store/src/views/AppDetails.vue b/packages/web-app-app-store/src/views/AppDetails.vue
index 2ae90ac4302..dc9d5be0298 100644
--- a/packages/web-app-app-store/src/views/AppDetails.vue
+++ b/packages/web-app-app-store/src/views/AppDetails.vue
@@ -32,7 +32,10 @@
         <app-resources :app="app" />
       </div>
       <div v-if="app.versions">
-        <h3>{{ $gettext('Releases') }}</h3>
+        <h3>
+          {{ $gettext('Releases') }}
+          <app-contextual-helper />
+        </h3>
         <app-versions :app="app" />
       </div>
     </div>
@@ -50,9 +53,17 @@ import AppTags from '../components/AppTags.vue'
 import AppVersions from '../components/AppVersions.vue'
 import AppAuthors from '../components/AppAuthors.vue'
 import AppImageGallery from '../components/AppImageGallery.vue'
+import AppContextualHelper from '../components/AppContextualHelper.vue'
 
 export default defineComponent({
-  components: { AppImageGallery, AppAuthors, AppResources, AppTags, AppVersions },
+  components: {
+    AppContextualHelper,
+    AppImageGallery,
+    AppAuthors,
+    AppResources,
+    AppTags,
+    AppVersions
+  },
   setup() {
     const appIdRouteParam = useRouteParam('appId')
     const appId = computed(() => {
diff --git a/packages/web-app-app-store/src/views/AppList.vue b/packages/web-app-app-store/src/views/AppList.vue
index 49c73342843..6067801a43d 100644
--- a/packages/web-app-app-store/src/views/AppList.vue
+++ b/packages/web-app-app-store/src/views/AppList.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="app-list oc-mb-m">
-    <h2 class="oc-mt-rm" v-text="$gettext('App Store')" />
+    <h2 class="oc-mt-rm">
+      {{ $gettext('App Store') }}
+      <app-contextual-helper />
+    </h2>
     <div class="oc-flex oc-flex-middle">
       <oc-text-input
         id="apps-filter"
@@ -37,10 +40,11 @@ import {
   useRouteQuery,
   useRouter
 } from '@ownclouders/web-pkg'
+import AppContextualHelper from '../components/AppContextualHelper.vue'
 
 export default defineComponent({
   name: 'AppList',
-  components: { AppTile },
+  components: { AppContextualHelper, AppTile },
   setup() {
     const appsStore = useAppsStore()
     const { apps } = storeToRefs(appsStore)