From 10a8675814bc5c6ea2c48d471259faacf7f49d26 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Wed, 11 Sep 2024 08:49:54 +0200
Subject: [PATCH 01/16] Add skeleton

---
 dev/docker/ocis.web.config.json               |   9 +-
 packages/web-app-activities/l10n/.tx/config   |   9 ++
 .../web-app-activities/l10n/translations.json |   1 +
 packages/web-app-activities/package.json      |  22 ++++
 .../src/LayoutContainer.vue                   |  20 +++
 packages/web-app-activities/src/appid.ts      |   1 +
 .../src/components/ActivityItem.vue           |  85 +++++++++++++
 packages/web-app-activities/src/index.ts      |  67 ++++++++++
 .../src/views/ActivityList.vue                |  86 +++++++++++++
 packages/web-app-activities/src/views/App.vue | 117 ++++++++++++++++++
 pnpm-lock.yaml                                |  43 ++++++-
 11 files changed, 455 insertions(+), 5 deletions(-)
 create mode 100644 packages/web-app-activities/l10n/.tx/config
 create mode 100644 packages/web-app-activities/l10n/translations.json
 create mode 100644 packages/web-app-activities/package.json
 create mode 100644 packages/web-app-activities/src/LayoutContainer.vue
 create mode 100644 packages/web-app-activities/src/appid.ts
 create mode 100644 packages/web-app-activities/src/components/ActivityItem.vue
 create mode 100644 packages/web-app-activities/src/index.ts
 create mode 100644 packages/web-app-activities/src/views/ActivityList.vue
 create mode 100644 packages/web-app-activities/src/views/App.vue

diff --git a/dev/docker/ocis.web.config.json b/dev/docker/ocis.web.config.json
index abcb088fe8d..b6e680d769b 100644
--- a/dev/docker/ocis.web.config.json
+++ b/dev/docker/ocis.web.config.json
@@ -20,14 +20,19 @@
     "ocm",
     "webfinger",
     "epub-reader",
-    "app-store"
+    "app-store",
+    "activities"
   ],
   "external_apps": [
     {
       "id": "preview",
       "path": "web-app-preview",
       "config": {
-        "mimeTypes": ["image/tiff", "image/bmp", "image/x-ms-bmp"]
+        "mimeTypes": [
+          "image/tiff",
+          "image/bmp",
+          "image/x-ms-bmp"
+        ]
       }
     },
     {
diff --git a/packages/web-app-activities/l10n/.tx/config b/packages/web-app-activities/l10n/.tx/config
new file mode 100644
index 00000000000..e786cede485
--- /dev/null
+++ b/packages/web-app-activities/l10n/.tx/config
@@ -0,0 +1,9 @@
+[main]
+host = https://www.transifex.com
+
+[o:owncloud-org:p:owncloud-web:r:app-activities]
+file_filter = locale/<lang>/app.po
+minimum_perc = 0
+source_file = template.pot
+source_lang = en
+type = PO
diff --git a/packages/web-app-activities/l10n/translations.json b/packages/web-app-activities/l10n/translations.json
new file mode 100644
index 00000000000..0967ef424bc
--- /dev/null
+++ b/packages/web-app-activities/l10n/translations.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/web-app-activities/package.json b/packages/web-app-activities/package.json
new file mode 100644
index 00000000000..62825345c41
--- /dev/null
+++ b/packages/web-app-activities/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "web-app-activities",
+  "version": "0.0.0",
+  "private": true,
+  "description": "ownCloud activities app",
+  "license": "AGPL-3.0",
+  "devDependencies": {
+    "web-test-helpers": "workspace:*"
+  },
+  "peerDependencies": {
+    "@ownclouders/web-client": "workspace:*",
+    "@ownclouders/web-pkg": "workspace:*",
+    "design-system": "workspace:@ownclouders/design-system@*",
+    "fuse.js": "7.0.0",
+    "lodash-es": "4.17.21",
+    "mark.js": "^8.11.1",
+    "pinia": "2.2.2",
+    "vue-concurrency": "5.0.1",
+    "vue-router": "4.2.5",
+    "zod": "3.23.8"
+  }
+}
diff --git a/packages/web-app-activities/src/LayoutContainer.vue b/packages/web-app-activities/src/LayoutContainer.vue
new file mode 100644
index 00000000000..be0d6a77012
--- /dev/null
+++ b/packages/web-app-activities/src/LayoutContainer.vue
@@ -0,0 +1,20 @@
+<template>
+  <main id="activities">
+    <router-view />
+  </main>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'LayoutContainer'
+})
+</script>
+
+<style lang="scss">
+#activities {
+  overflow: auto;
+  padding: var(--oc-space-medium) !important;
+}
+</style>
diff --git a/packages/web-app-activities/src/appid.ts b/packages/web-app-activities/src/appid.ts
new file mode 100644
index 00000000000..f6dd373072f
--- /dev/null
+++ b/packages/web-app-activities/src/appid.ts
@@ -0,0 +1 @@
+export const APPID = 'activities'
diff --git a/packages/web-app-activities/src/components/ActivityItem.vue b/packages/web-app-activities/src/components/ActivityItem.vue
new file mode 100644
index 00000000000..3c25c6871ce
--- /dev/null
+++ b/packages/web-app-activities/src/components/ActivityItem.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="oc-flex oc-flex-middle activity-item">
+    <div class="oc-flex oc-flex-middle">
+      <oc-avatar :width="36" :user-name="activity.template.variables.user.displayName" />
+      <span class="oc-ml-s" v-text="activity.template.variables.user.displayName" />
+    </div>
+    <div>activity unknown</div>
+    <div class="oc-text-truncate">
+      <resource-list-item v-if="resource" :resource="resource" :is-resource-clickable="false" />
+      <div v-if="resourceDeleted" class="oc-text-muted oc-flex oc-flex-middle oc-p-xs">
+        <oc-icon name="delete-bin" />
+        <span class="oc-ml-s" v-text="activity.template.variables.resource.name" />
+      </div>
+    </div>
+    <div><span v-text="modifiedDateTime"></span></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, PropType, ref, unref } from 'vue'
+import { Activity } from '@ownclouders/web-client/src/graph/generated'
+import { DateTime } from 'luxon'
+import { formatDateFromDateTime, ResourceListItem, useClientService } from '@ownclouders/web-pkg'
+import { useGettext } from 'vue3-gettext'
+import { Resource } from '@ownclouders/web-client'
+
+export default defineComponent({
+  name: 'ActivityList',
+  components: { ResourceListItem },
+  props: {
+    activity: {
+      type: Object as PropType<Activity>,
+      required: true
+    }
+  },
+  setup(props) {
+    const clientService = useClientService()
+    const { current: currentLanguage } = useGettext()
+    const resource = ref<Resource>()
+    const resourceDeleted = ref(false)
+
+    const modifiedDateTime = computed(() => {
+      const dateTime = DateTime.fromISO(props.activity.times.recordedTime)
+      return formatDateFromDateTime(dateTime, currentLanguage)
+    })
+
+    onMounted(async () => {
+      try {
+        resource.value = await clientService.webdav.getFileInfo(
+          unref(props.activity.template.variables.space.id),
+          { fileId: props.activity.template.variables.resource.id }
+        )
+      } catch (e) {
+        resourceDeleted.value = true
+      }
+    })
+
+    return {
+      modifiedDateTime,
+      resource,
+      resourceDeleted
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.activity-item {
+  .oc-resource-name {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+    overflow: hidden;
+  }
+}
+
+.activity-item > * {
+  flex: 1;
+  text-align: left;
+}
+
+.activity-item > *:last-child {
+  text-align: right !important;
+}
+</style>
diff --git a/packages/web-app-activities/src/index.ts b/packages/web-app-activities/src/index.ts
new file mode 100644
index 00000000000..98b9cd7df8b
--- /dev/null
+++ b/packages/web-app-activities/src/index.ts
@@ -0,0 +1,67 @@
+import translations from '../l10n/translations.json'
+import { useGettext } from 'vue3-gettext'
+import { computed } from 'vue'
+import { AppMenuItemExtension, defineWebApplication, Extension } from '@ownclouders/web-pkg'
+import { urlJoin } from '@ownclouders/web-client'
+import { RouteRecordRaw } from 'vue-router'
+import { APPID } from './appid'
+
+export default defineWebApplication({
+  setup() {
+    const { $gettext } = useGettext()
+
+    const appInfo = {
+      name: $gettext('Activities'),
+      id: APPID,
+      icon: 'pulse',
+      color: '#ff6961'
+    }
+
+    const routes: RouteRecordRaw[] = [
+      {
+        path: '/',
+        name: 'root',
+        component: () => import('./LayoutContainer.vue'),
+        redirect: urlJoin(appInfo.id, 'list'),
+        meta: {
+          authContext: 'user'
+        },
+        children: [
+          {
+            path: 'list',
+            name: 'list',
+            component: () => import('./views/App.vue'),
+            meta: {
+              authContext: 'user',
+              title: $gettext('Activities')
+            }
+          }
+        ]
+      }
+    ]
+
+    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[] = []
+
+      result.push(menuItemExtension)
+
+      return result
+    })
+
+    return {
+      appInfo,
+      routes,
+      translations,
+      extensions
+    }
+  }
+})
diff --git a/packages/web-app-activities/src/views/ActivityList.vue b/packages/web-app-activities/src/views/ActivityList.vue
new file mode 100644
index 00000000000..e7c04ee887a
--- /dev/null
+++ b/packages/web-app-activities/src/views/ActivityList.vue
@@ -0,0 +1,86 @@
+<template>
+  <ul class="oc-list activity-list">
+    <li v-for="(activities, date) in activitiesDateCategorized" :key="date" class="oc-mb-l">
+      <span class="oc-text-bold oc-text-muted activity-list-date" v-text="getListDate(date)" />
+      <ul class="oc-ml-s oc-mt-s timeline">
+        <li v-for="activityItem in activities" :key="activityItem">
+          <ActivityItem :activity="activityItem" />
+        </li>
+      </ul>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue'
+import { Activity } from '@ownclouders/web-client/graph/generated'
+import { DateTime } from 'luxon'
+import ActivityItem from '../components/ActivityItem.vue'
+import { formatDateFromDateTime } from '@ownclouders/web-pkg'
+import { useGettext } from 'vue3-gettext'
+
+export default defineComponent({
+  name: 'ActivityList',
+  components: { ActivityItem },
+  props: {
+    activities: {
+      type: Array as PropType<Activity[]>,
+      required: true
+    }
+  },
+  setup(props) {
+    const { current: currentLanguage } = useGettext()
+
+    const activitiesDateCategorized = computed(() => {
+      return props.activities.reduce((acc, activity) => {
+        const date = DateTime.fromISO(activity.times.recordedTime).toISODate()
+
+        if (!acc[date]) {
+          acc[date] = []
+        }
+        acc[date].push(activity)
+
+        // TODO: Remove mock data
+        const date2 = DateTime.fromISO(activity.times.recordedTime).minus({ day: 1 }).toISODate()
+        if (!acc[date2]) {
+          acc[date2] = []
+        }
+        acc[date2].push(activity)
+
+        const date3 = DateTime.fromISO(activity.times.recordedTime).minus({ day: 2 }).toISODate()
+        if (!acc[date3]) {
+          acc[date3] = []
+        }
+        acc[date3].push(activity)
+
+        return acc
+      }, {})
+    })
+
+    const getListDate = (dateISO: string) => {
+      const dateTime = DateTime.fromISO(dateISO)
+
+      if (
+        dateTime.hasSame(DateTime.now(), 'day') ||
+        dateTime.hasSame(DateTime.now().minus({ day: 1 }), 'day')
+      ) {
+        return dateTime.toRelativeCalendar({ locale: currentLanguage })
+      }
+
+      return formatDateFromDateTime(dateTime, currentLanguage, DateTime.DATE_MED_WITH_WEEKDAY)
+    }
+
+    return { activitiesDateCategorized, getListDate }
+  }
+})
+</script>
+
+<style lang="scss">
+.activity-list {
+  max-width: 1000px;
+
+  &-date {
+    text-transform: capitalize;
+  }
+}
+</style>
diff --git a/packages/web-app-activities/src/views/App.vue b/packages/web-app-activities/src/views/App.vue
new file mode 100644
index 00000000000..b58377a4b9d
--- /dev/null
+++ b/packages/web-app-activities/src/views/App.vue
@@ -0,0 +1,117 @@
+<template>
+  <h2 v-text="$gettext('Activities')"></h2>
+  <div class="oc-width-1-1 oc-mb-m">
+    <item-filter
+      ref="mediaTypeFilter"
+      :allow-multiple="false"
+      :filter-label="$gettext('Location')"
+      :filterable-attributes="['name']"
+      :option-filter-label="$gettext('Filter location')"
+      :show-option-filter="true"
+      :items="filterableSpaces"
+      :close-on-click="true"
+      class="files-search-filter-file-type oc-mr-s"
+      display-name-attribute="name"
+      filter-name="location"
+    >
+      <template #image="{ item }">
+        <oc-icon :name="getLocationFilterIcon(item)" />
+      </template>
+      <template #item="{ item }">
+        <div v-text="item.name" />
+      </template>
+    </item-filter>
+  </div>
+  <app-loading-spinner v-if="isLoading" />
+  <template v-else>
+    <no-content-message v-if="!activities.length" icon="pulse">
+      <template #message>
+        <span v-text="$gettext('No activities found')" />
+      </template>
+    </no-content-message>
+    <ActivityList v-else :activities="activities" />
+  </template>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, ref, unref, watch } from 'vue'
+import {
+  AppLoadingSpinner,
+  ItemFilter,
+  NoContentMessage,
+  useClientService,
+  useRouteQuery,
+  useSpacesStore
+} from '@ownclouders/web-pkg'
+import { storeToRefs } from 'pinia'
+import {
+  call,
+  isPersonalSpaceResource,
+  isProjectSpaceResource,
+  SpaceResource
+} from '@ownclouders/web-client'
+import { useTask } from 'vue-concurrency'
+import { Activity } from '@ownclouders/web-client/graph/generated'
+import ActivityList from './ActivityList.vue'
+
+export default defineComponent({
+  name: 'App',
+  components: { ActivityList, NoContentMessage, ItemFilter, AppLoadingSpinner },
+  setup() {
+    const spacesStore = useSpacesStore()
+    const { spaces } = storeToRefs(spacesStore)
+    const clientService = useClientService()
+    const activities = ref<Activity[]>([])
+
+    const locationQuery = useRouteQuery('q_location')
+
+    const filterableSpaces = computed(() => {
+      return [...unref(spaces)]
+        .filter(
+          (space) =>
+            !space.disabled && (isProjectSpaceResource(space) || isPersonalSpaceResource(space))
+        )
+        .sort((a, b) => {
+          if (isPersonalSpaceResource(a) === isPersonalSpaceResource(b)) {
+            return a.name.localeCompare(b.name)
+          }
+          return isPersonalSpaceResource(a) ? -1 : 1
+        })
+    })
+
+    const loadActivitiesTask = useTask(function* (signal) {
+      const filters = []
+
+      if (unref(locationQuery)) {
+        filters.push(`itemid:${unref(locationQuery)}`)
+      }
+
+      activities.value = yield* call(
+        clientService.graphAuthenticated.activities.listActivities(filters.join(' AND '), {
+          signal
+        })
+      )
+    })
+
+    const isLoading = computed(() => loadActivitiesTask.isRunning || !loadActivitiesTask.last)
+
+    const getLocationFilterIcon = (space: SpaceResource) => {
+      if (isPersonalSpaceResource(space)) {
+        return 'folder'
+      }
+
+      return 'layout-grid'
+    }
+
+    onMounted(() => {
+      loadActivitiesTask.perform()
+    })
+
+    watch(locationQuery, () => {
+      loadActivitiesTask.perform()
+    })
+
+    return { activities, filterableSpaces, getLocationFilterIcon, isLoading }
+  }
+})
+</script>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a910d01af5c..b30a041f14f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -510,6 +510,43 @@ importers:
 
   packages/tsconfig: {}
 
+  packages/web-app-activities:
+    dependencies:
+      '@ownclouders/web-client':
+        specifier: workspace:*
+        version: link:../web-client
+      '@ownclouders/web-pkg':
+        specifier: workspace:*
+        version: link:../web-pkg
+      design-system:
+        specifier: workspace:@ownclouders/design-system@*
+        version: link:../design-system
+      fuse.js:
+        specifier: 7.0.0
+        version: 7.0.0
+      lodash-es:
+        specifier: 4.17.21
+        version: 4.17.21
+      mark.js:
+        specifier: ^8.11.1
+        version: 8.11.1
+      pinia:
+        specifier: 2.2.2
+        version: 2.2.2(typescript@5.6.2)(vue@3.5.6(typescript@5.6.2))
+      vue-concurrency:
+        specifier: 5.0.1
+        version: 5.0.1(vue@3.5.6(typescript@5.6.2))
+      vue-router:
+        specifier: 4.2.5
+        version: 4.2.5(vue@3.5.6(typescript@5.6.2))
+      zod:
+        specifier: 3.23.8
+        version: 3.23.8
+    devDependencies:
+      web-test-helpers:
+        specifier: workspace:*
+        version: link:../web-test-helpers
+
   packages/web-app-admin-settings:
     dependencies:
       '@ownclouders/web-client':
@@ -4875,7 +4912,7 @@ packages:
     resolution: {integrity: sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==}
     engines: {node: '>= 4.0'}
     os: [darwin]
-    deprecated: Upgrade to fsevents v2 to mitigate potential security issues
+    deprecated: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
 
   fsevents@2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
@@ -10248,7 +10285,7 @@ snapshots:
       '@cucumber/ci-environment': 9.1.0
       '@cucumber/cucumber-expressions': 16.1.1
       '@cucumber/gherkin': 26.0.3
-      '@cucumber/gherkin-streams': 5.0.1(@cucumber/gherkin@26.0.3)(@cucumber/message-streams@4.0.1(@cucumber/messages@21.0.1))(@cucumber/messages@21.0.1)
+      '@cucumber/gherkin-streams': 5.0.1(@cucumber/gherkin@26.0.3)(@cucumber/message-streams@4.0.1(@cucumber/messages@26.0.0))(@cucumber/messages@21.0.1)
       '@cucumber/gherkin-utils': 8.0.2
       '@cucumber/html-formatter': 20.2.1(@cucumber/messages@21.0.1)
       '@cucumber/message-streams': 4.0.1(@cucumber/messages@21.0.1)
@@ -10286,7 +10323,7 @@ snapshots:
       yaml: 2.5.1
       yup: 0.32.11
 
-  '@cucumber/gherkin-streams@5.0.1(@cucumber/gherkin@26.0.3)(@cucumber/message-streams@4.0.1(@cucumber/messages@21.0.1))(@cucumber/messages@21.0.1)':
+  '@cucumber/gherkin-streams@5.0.1(@cucumber/gherkin@26.0.3)(@cucumber/message-streams@4.0.1(@cucumber/messages@26.0.0))(@cucumber/messages@21.0.1)':
     dependencies:
       '@cucumber/gherkin': 26.0.3
       '@cucumber/message-streams': 4.0.1(@cucumber/messages@21.0.1)

From bdc93cff70ee0ffe8c932eebbafbc114ffec938a Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Mon, 23 Sep 2024 22:09:29 +0200
Subject: [PATCH 02/16] wip

---
 .../src/components/ActivityItem.vue           | 33 ++++++++++++++-----
 packages/web-app-activities/src/index.ts      |  2 +-
 .../src/views/ActivityList.vue                | 13 --------
 packages/web-app-activities/src/views/App.vue |  4 +--
 4 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/packages/web-app-activities/src/components/ActivityItem.vue b/packages/web-app-activities/src/components/ActivityItem.vue
index 3c25c6871ce..d0a076fdb9c 100644
--- a/packages/web-app-activities/src/components/ActivityItem.vue
+++ b/packages/web-app-activities/src/components/ActivityItem.vue
@@ -7,12 +7,16 @@
     <div>activity unknown</div>
     <div class="oc-text-truncate">
       <resource-list-item v-if="resource" :resource="resource" :is-resource-clickable="false" />
-      <div v-if="resourceDeleted" class="oc-text-muted oc-flex oc-flex-middle oc-p-xs">
-        <oc-icon name="delete-bin" />
+      <div
+        v-if="resourceNotAccessible"
+        class="oc-text-muted oc-flex oc-flex-middle oc-p-xs"
+        v-oc-tooltip="$gettext('The resource is unavailable, it may have been deleted.')"
+      >
+        <oc-icon name="eye-off" />
         <span class="oc-ml-s" v-text="activity.template.variables.resource.name" />
       </div>
     </div>
-    <div><span v-text="modifiedDateTime"></span></div>
+    <div><span v-text="recordedDateTime" /></div>
   </div>
 </template>
 
@@ -20,7 +24,12 @@
 import { computed, defineComponent, onMounted, PropType, ref, unref } from 'vue'
 import { Activity } from '@ownclouders/web-client/src/graph/generated'
 import { DateTime } from 'luxon'
-import { formatDateFromDateTime, ResourceListItem, useClientService } from '@ownclouders/web-pkg'
+import {
+  formatDateFromDateTime,
+  formatRelativeDateFromDateTime,
+  ResourceListItem,
+  useClientService
+} from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { Resource } from '@ownclouders/web-client'
 
@@ -37,10 +46,16 @@ export default defineComponent({
     const clientService = useClientService()
     const { current: currentLanguage } = useGettext()
     const resource = ref<Resource>()
-    const resourceDeleted = ref(false)
+    const resourceNotAccessible = ref(false)
 
-    const modifiedDateTime = computed(() => {
+    const recordedDateTime = computed(() => {
       const dateTime = DateTime.fromISO(props.activity.times.recordedTime)
+
+      const isWithinLastHour = dateTime > DateTime.now().minus({ hour: 1 })
+      if (isWithinLastHour) {
+        return formatRelativeDateFromDateTime(dateTime, currentLanguage)
+      }
+
       return formatDateFromDateTime(dateTime, currentLanguage)
     })
 
@@ -51,14 +66,14 @@ export default defineComponent({
           { fileId: props.activity.template.variables.resource.id }
         )
       } catch (e) {
-        resourceDeleted.value = true
+        resourceNotAccessible.value = true
       }
     })
 
     return {
-      modifiedDateTime,
+      recordedDateTime,
       resource,
-      resourceDeleted
+      resourceNotAccessible
     }
   }
 })
diff --git a/packages/web-app-activities/src/index.ts b/packages/web-app-activities/src/index.ts
index 98b9cd7df8b..eaec50a8655 100644
--- a/packages/web-app-activities/src/index.ts
+++ b/packages/web-app-activities/src/index.ts
@@ -14,7 +14,7 @@ export default defineWebApplication({
       name: $gettext('Activities'),
       id: APPID,
       icon: 'pulse',
-      color: '#ff6961'
+      color: '#887ef1'
     }
 
     const routes: RouteRecordRaw[] = [
diff --git a/packages/web-app-activities/src/views/ActivityList.vue b/packages/web-app-activities/src/views/ActivityList.vue
index e7c04ee887a..e7970f2e0f8 100644
--- a/packages/web-app-activities/src/views/ActivityList.vue
+++ b/packages/web-app-activities/src/views/ActivityList.vue
@@ -40,19 +40,6 @@ export default defineComponent({
         }
         acc[date].push(activity)
 
-        // TODO: Remove mock data
-        const date2 = DateTime.fromISO(activity.times.recordedTime).minus({ day: 1 }).toISODate()
-        if (!acc[date2]) {
-          acc[date2] = []
-        }
-        acc[date2].push(activity)
-
-        const date3 = DateTime.fromISO(activity.times.recordedTime).minus({ day: 2 }).toISODate()
-        if (!acc[date3]) {
-          acc[date3] = []
-        }
-        acc[date3].push(activity)
-
         return acc
       }, {})
     })
diff --git a/packages/web-app-activities/src/views/App.vue b/packages/web-app-activities/src/views/App.vue
index b58377a4b9d..ab8298d0ef7 100644
--- a/packages/web-app-activities/src/views/App.vue
+++ b/packages/web-app-activities/src/views/App.vue
@@ -80,14 +80,14 @@ export default defineComponent({
     })
 
     const loadActivitiesTask = useTask(function* (signal) {
-      const filters = []
+      const filters = ['sort:desc']
 
       if (unref(locationQuery)) {
         filters.push(`itemid:${unref(locationQuery)}`)
       }
 
       activities.value = yield* call(
-        clientService.graphAuthenticated.activities.listActivities(filters.join(' AND '), {
+        clientService.graphAuthenticated.activities.listActivities(`${filters.join(' AND ')}`, {
           signal
         })
       )

From 36b04fadb676c5716a86408d2abb99e8696d673f Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 24 Sep 2024 13:29:56 +0200
Subject: [PATCH 03/16] Add limit

---
 packages/web-app-activities/src/views/App.vue |  4 ++--
 pnpm-lock.yaml                                | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/web-app-activities/src/views/App.vue b/packages/web-app-activities/src/views/App.vue
index ab8298d0ef7..6075f931b66 100644
--- a/packages/web-app-activities/src/views/App.vue
+++ b/packages/web-app-activities/src/views/App.vue
@@ -80,14 +80,14 @@ export default defineComponent({
     })
 
     const loadActivitiesTask = useTask(function* (signal) {
-      const filters = ['sort:desc']
+      const filters = ['sort:desc', 'limit:100']
 
       if (unref(locationQuery)) {
         filters.push(`itemid:${unref(locationQuery)}`)
       }
 
       activities.value = yield* call(
-        clientService.graphAuthenticated.activities.listActivities(`${filters.join(' AND ')}`, {
+        clientService.graphAuthenticated.activities.listActivities(filters.join(' AND '), {
           signal
         })
       )
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b30a041f14f..be8c05f5c0e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -532,13 +532,13 @@ importers:
         version: 8.11.1
       pinia:
         specifier: 2.2.2
-        version: 2.2.2(typescript@5.6.2)(vue@3.5.6(typescript@5.6.2))
+        version: 2.2.2(typescript@5.6.2)(vue@3.5.8(typescript@5.6.2))
       vue-concurrency:
         specifier: 5.0.1
-        version: 5.0.1(vue@3.5.6(typescript@5.6.2))
+        version: 5.0.1(vue@3.5.8(typescript@5.6.2))
       vue-router:
         specifier: 4.2.5
-        version: 4.2.5(vue@3.5.6(typescript@5.6.2))
+        version: 4.2.5(vue@3.5.8(typescript@5.6.2))
       zod:
         specifier: 3.23.8
         version: 3.23.8
@@ -10285,7 +10285,7 @@ snapshots:
       '@cucumber/ci-environment': 9.1.0
       '@cucumber/cucumber-expressions': 16.1.1
       '@cucumber/gherkin': 26.0.3
-      '@cucumber/gherkin-streams': 5.0.1(@cucumber/gherkin@26.0.3)(@cucumber/message-streams@4.0.1(@cucumber/messages@26.0.0))(@cucumber/messages@21.0.1)
+      '@cucumber/gherkin-streams': 5.0.1(@cucumber/gherkin@26.0.3)(@cucumber/message-streams@4.0.1(@cucumber/messages@26.0.1))(@cucumber/messages@21.0.1)
       '@cucumber/gherkin-utils': 8.0.2
       '@cucumber/html-formatter': 20.2.1(@cucumber/messages@21.0.1)
       '@cucumber/message-streams': 4.0.1(@cucumber/messages@21.0.1)
@@ -10323,7 +10323,7 @@ snapshots:
       yaml: 2.5.1
       yup: 0.32.11
 
-  '@cucumber/gherkin-streams@5.0.1(@cucumber/gherkin@26.0.3)(@cucumber/message-streams@4.0.1(@cucumber/messages@26.0.0))(@cucumber/messages@21.0.1)':
+  '@cucumber/gherkin-streams@5.0.1(@cucumber/gherkin@26.0.3)(@cucumber/message-streams@4.0.1(@cucumber/messages@26.0.1))(@cucumber/messages@21.0.1)':
     dependencies:
       '@cucumber/gherkin': 26.0.3
       '@cucumber/message-streams': 4.0.1(@cucumber/messages@21.0.1)

From 25472dcf0570c4743b2fbdc2d9a12bd575cd50cc Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 24 Sep 2024 13:37:17 +0200
Subject: [PATCH 04/16] lint

---
 packages/web-app-activities/src/components/ActivityItem.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-activities/src/components/ActivityItem.vue b/packages/web-app-activities/src/components/ActivityItem.vue
index d0a076fdb9c..ba0fba40419 100644
--- a/packages/web-app-activities/src/components/ActivityItem.vue
+++ b/packages/web-app-activities/src/components/ActivityItem.vue
@@ -22,7 +22,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, PropType, ref, unref } from 'vue'
-import { Activity } from '@ownclouders/web-client/src/graph/generated'
+import { Activity } from '@ownclouders/web-client/graph/generated'
 import { DateTime } from 'luxon'
 import {
   formatDateFromDateTime,
@@ -32,6 +32,7 @@ import {
 } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { Resource } from '@ownclouders/web-client'
+import { DavProperty } from '@ownclouders/web-client/webdav'
 
 export default defineComponent({
   name: 'ActivityList',
@@ -63,7 +64,8 @@ export default defineComponent({
       try {
         resource.value = await clientService.webdav.getFileInfo(
           unref(props.activity.template.variables.space.id),
-          { fileId: props.activity.template.variables.resource.id }
+          { fileId: props.activity.template.variables.resource.id },
+          { davProperties: DavProperty.name }
         )
       } catch (e) {
         resourceNotAccessible.value = true

From 8dbaa392cdc40ff67e8029a48bef603aec0ccf99 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 24 Sep 2024 13:41:24 +0200
Subject: [PATCH 05/16] Fix transifex config

---
 packages/web-app-activities/l10n/.tx/config | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-activities/l10n/.tx/config b/packages/web-app-activities/l10n/.tx/config
index e786cede485..fa4b15f12ad 100644
--- a/packages/web-app-activities/l10n/.tx/config
+++ b/packages/web-app-activities/l10n/.tx/config
@@ -1,7 +1,7 @@
 [main]
 host = https://www.transifex.com
 
-[o:owncloud-org:p:owncloud-web:r:app-activities]
+[o:owncloud-org:p:owncloud-web:r:activities]
 file_filter = locale/<lang>/app.po
 minimum_perc = 0
 source_file = template.pot

From 37c265530ebe9446cb52c550821a83ffe5ce0d13 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 24 Sep 2024 13:43:39 +0200
Subject: [PATCH 06/16] cleanup package.json

---
 packages/web-app-activities/package.json |  8 +-------
 pnpm-lock.yaml                           | 20 +-------------------
 2 files changed, 2 insertions(+), 26 deletions(-)

diff --git a/packages/web-app-activities/package.json b/packages/web-app-activities/package.json
index 62825345c41..dc9d9714c7e 100644
--- a/packages/web-app-activities/package.json
+++ b/packages/web-app-activities/package.json
@@ -11,12 +11,6 @@
     "@ownclouders/web-client": "workspace:*",
     "@ownclouders/web-pkg": "workspace:*",
     "design-system": "workspace:@ownclouders/design-system@*",
-    "fuse.js": "7.0.0",
-    "lodash-es": "4.17.21",
-    "mark.js": "^8.11.1",
-    "pinia": "2.2.2",
-    "vue-concurrency": "5.0.1",
-    "vue-router": "4.2.5",
-    "zod": "3.23.8"
+    "vue-router": "^4.2.5"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index be8c05f5c0e..9dc723047f3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -521,27 +521,9 @@ importers:
       design-system:
         specifier: workspace:@ownclouders/design-system@*
         version: link:../design-system
-      fuse.js:
-        specifier: 7.0.0
-        version: 7.0.0
-      lodash-es:
-        specifier: 4.17.21
-        version: 4.17.21
-      mark.js:
-        specifier: ^8.11.1
-        version: 8.11.1
-      pinia:
-        specifier: 2.2.2
-        version: 2.2.2(typescript@5.6.2)(vue@3.5.8(typescript@5.6.2))
-      vue-concurrency:
-        specifier: 5.0.1
-        version: 5.0.1(vue@3.5.8(typescript@5.6.2))
       vue-router:
-        specifier: 4.2.5
+        specifier: ^4.2.5
         version: 4.2.5(vue@3.5.8(typescript@5.6.2))
-      zod:
-        specifier: 3.23.8
-        version: 3.23.8
     devDependencies:
       web-test-helpers:
         specifier: workspace:*

From bcb0c0c9f2ac27a9dac679b2f8a067ac12a279d0 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 24 Sep 2024 13:49:44 +0200
Subject: [PATCH 07/16] fix h2

---
 packages/web-app-activities/src/views/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-activities/src/views/App.vue b/packages/web-app-activities/src/views/App.vue
index 6075f931b66..6e8ebe684d2 100644
--- a/packages/web-app-activities/src/views/App.vue
+++ b/packages/web-app-activities/src/views/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <h2 v-text="$gettext('Activities')"></h2>
+  <h1 v-text="$gettext('Activities')"/>
   <div class="oc-width-1-1 oc-mb-m">
     <item-filter
       ref="mediaTypeFilter"

From 3e5081769709fd0afe27f74ebea768e43369ecec Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 24 Sep 2024 13:52:12 +0200
Subject: [PATCH 08/16] Add pinia

---
 packages/web-app-activities/package.json | 3 ++-
 pnpm-lock.yaml                           | 3 +++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/web-app-activities/package.json b/packages/web-app-activities/package.json
index dc9d9714c7e..0baf33083e6 100644
--- a/packages/web-app-activities/package.json
+++ b/packages/web-app-activities/package.json
@@ -11,6 +11,7 @@
     "@ownclouders/web-client": "workspace:*",
     "@ownclouders/web-pkg": "workspace:*",
     "design-system": "workspace:@ownclouders/design-system@*",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "pinia": "^2.2.2"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9dc723047f3..5cea48563d5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -521,6 +521,9 @@ importers:
       design-system:
         specifier: workspace:@ownclouders/design-system@*
         version: link:../design-system
+      pinia:
+        specifier: ^2.2.2
+        version: 2.2.2(typescript@5.6.2)(vue@3.5.8(typescript@5.6.2))
       vue-router:
         specifier: ^4.2.5
         version: 4.2.5(vue@3.5.8(typescript@5.6.2))

From 846c843f2428e11bea8f708bbf4eaa928e1ca059 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 24 Sep 2024 14:01:39 +0200
Subject: [PATCH 09/16] fix dependencies

---
 packages/web-app-activities/package.json | 4 +++-
 packages/web-app-app-store/package.json  | 3 ++-
 pnpm-lock.yaml                           | 9 +++++++++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-activities/package.json b/packages/web-app-activities/package.json
index 0baf33083e6..c9cc5628b52 100644
--- a/packages/web-app-activities/package.json
+++ b/packages/web-app-activities/package.json
@@ -11,7 +11,9 @@
     "@ownclouders/web-client": "workspace:*",
     "@ownclouders/web-pkg": "workspace:*",
     "design-system": "workspace:@ownclouders/design-system@*",
+    "pinia": "^2.2.2",
+    "vue-concurrency": "^5.0.1",
     "vue-router": "^4.2.5",
-    "pinia": "^2.2.2"
+    "vue3-gettext": "^2.4.0"
   }
 }
diff --git a/packages/web-app-app-store/package.json b/packages/web-app-app-store/package.json
index 2481a8f49fa..74ff2030ad0 100644
--- a/packages/web-app-app-store/package.json
+++ b/packages/web-app-app-store/package.json
@@ -18,6 +18,7 @@
     "pinia": "2.2.2",
     "vue-concurrency": "5.0.1",
     "vue-router": "4.2.5",
-    "zod": "3.23.8"
+    "zod": "3.23.8",
+    "vue3-gettext": "2.4.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5cea48563d5..a2eef02e482 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -524,9 +524,15 @@ importers:
       pinia:
         specifier: ^2.2.2
         version: 2.2.2(typescript@5.6.2)(vue@3.5.8(typescript@5.6.2))
+      vue-concurrency:
+        specifier: ^5.0.1
+        version: 5.0.1(vue@3.5.8(typescript@5.6.2))
       vue-router:
         specifier: ^4.2.5
         version: 4.2.5(vue@3.5.8(typescript@5.6.2))
+      vue3-gettext:
+        specifier: ^2.4.0
+        version: 2.4.0(patch_hash=x32qkm4z6srz5xuveescagpdyu)(@vue/compiler-sfc@3.5.8)(vue@3.5.8(typescript@5.6.2))
     devDependencies:
       web-test-helpers:
         specifier: workspace:*
@@ -610,6 +616,9 @@ importers:
       vue-router:
         specifier: 4.2.5
         version: 4.2.5(vue@3.5.8(typescript@5.6.2))
+      vue3-gettext:
+        specifier: 2.4.0
+        version: 2.4.0(patch_hash=x32qkm4z6srz5xuveescagpdyu)(@vue/compiler-sfc@3.5.8)(vue@3.5.8(typescript@5.6.2))
       zod:
         specifier: 3.23.8
         version: 3.23.8

From c77a1196bee749d9df4f0d81d3ea658d8014329c Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 24 Sep 2024 14:04:39 +0200
Subject: [PATCH 10/16] fix list component

---
 packages/web-app-activities/src/views/ActivityList.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-activities/src/views/ActivityList.vue b/packages/web-app-activities/src/views/ActivityList.vue
index e7970f2e0f8..a763e7c8e13 100644
--- a/packages/web-app-activities/src/views/ActivityList.vue
+++ b/packages/web-app-activities/src/views/ActivityList.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul class="oc-list activity-list">
+  <oc-list class="activity-list">
     <li v-for="(activities, date) in activitiesDateCategorized" :key="date" class="oc-mb-l">
       <span class="oc-text-bold oc-text-muted activity-list-date" v-text="getListDate(date)" />
       <ul class="oc-ml-s oc-mt-s timeline">
@@ -8,7 +8,7 @@
         </li>
       </ul>
     </li>
-  </ul>
+  </oc-list>
 </template>
 
 <script lang="ts">

From 30f29355113f30f6df227aadced25654ff4aa908 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 24 Sep 2024 14:09:26 +0200
Subject: [PATCH 11/16] add headline for date

---
 packages/web-app-activities/src/views/ActivityList.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-activities/src/views/ActivityList.vue b/packages/web-app-activities/src/views/ActivityList.vue
index a763e7c8e13..616d47d58d4 100644
--- a/packages/web-app-activities/src/views/ActivityList.vue
+++ b/packages/web-app-activities/src/views/ActivityList.vue
@@ -1,7 +1,7 @@
 <template>
   <oc-list class="activity-list">
     <li v-for="(activities, date) in activitiesDateCategorized" :key="date" class="oc-mb-l">
-      <span class="oc-text-bold oc-text-muted activity-list-date" v-text="getListDate(date)" />
+      <h2 class="oc-text-bold oc-text-muted activity-list-date oc-text-medium" v-text="getDateHeadline(date)" />
       <ul class="oc-ml-s oc-mt-s timeline">
         <li v-for="activityItem in activities" :key="activityItem">
           <ActivityItem :activity="activityItem" />
@@ -44,7 +44,7 @@ export default defineComponent({
       }, {})
     })
 
-    const getListDate = (dateISO: string) => {
+    const getDateHeadline = (dateISO: string) => {
       const dateTime = DateTime.fromISO(dateISO)
 
       if (
@@ -57,7 +57,7 @@ export default defineComponent({
       return formatDateFromDateTime(dateTime, currentLanguage, DateTime.DATE_MED_WITH_WEEKDAY)
     }
 
-    return { activitiesDateCategorized, getListDate }
+    return { activitiesDateCategorized, getDateHeadline }
   }
 })
 </script>

From 4ed461e7b7f01024ee375d1988267c552c2ea2c7 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 24 Sep 2024 19:55:51 +0200
Subject: [PATCH 12/16] Make us of oc-list component

---
 .../web-app-activities/src/components/ActivityItem.vue   | 2 +-
 packages/web-app-activities/src/views/ActivityList.vue   | 9 ++++++---
 packages/web-app-activities/src/views/App.vue            | 2 +-
 .../src/components/SideBar/ActivitiesPanel.vue           | 4 ++--
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/web-app-activities/src/components/ActivityItem.vue b/packages/web-app-activities/src/components/ActivityItem.vue
index ba0fba40419..940e814db70 100644
--- a/packages/web-app-activities/src/components/ActivityItem.vue
+++ b/packages/web-app-activities/src/components/ActivityItem.vue
@@ -9,8 +9,8 @@
       <resource-list-item v-if="resource" :resource="resource" :is-resource-clickable="false" />
       <div
         v-if="resourceNotAccessible"
-        class="oc-text-muted oc-flex oc-flex-middle oc-p-xs"
         v-oc-tooltip="$gettext('The resource is unavailable, it may have been deleted.')"
+        class="oc-text-muted oc-flex oc-flex-middle oc-p-xs"
       >
         <oc-icon name="eye-off" />
         <span class="oc-ml-s" v-text="activity.template.variables.resource.name" />
diff --git a/packages/web-app-activities/src/views/ActivityList.vue b/packages/web-app-activities/src/views/ActivityList.vue
index 616d47d58d4..af3ee68886f 100644
--- a/packages/web-app-activities/src/views/ActivityList.vue
+++ b/packages/web-app-activities/src/views/ActivityList.vue
@@ -1,12 +1,15 @@
 <template>
   <oc-list class="activity-list">
     <li v-for="(activities, date) in activitiesDateCategorized" :key="date" class="oc-mb-l">
-      <h2 class="oc-text-bold oc-text-muted activity-list-date oc-text-medium" v-text="getDateHeadline(date)" />
-      <ul class="oc-ml-s oc-mt-s timeline">
+      <h2
+        class="oc-text-bold oc-text-muted activity-list-date oc-text-medium"
+        v-text="getDateHeadline(date)"
+      />
+      <oc-list class="oc-ml-s oc-mt-s timeline">
         <li v-for="activityItem in activities" :key="activityItem">
           <ActivityItem :activity="activityItem" />
         </li>
-      </ul>
+      </oc-list>
     </li>
   </oc-list>
 </template>
diff --git a/packages/web-app-activities/src/views/App.vue b/packages/web-app-activities/src/views/App.vue
index 6e8ebe684d2..9b301d7ec4a 100644
--- a/packages/web-app-activities/src/views/App.vue
+++ b/packages/web-app-activities/src/views/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <h1 v-text="$gettext('Activities')"/>
+  <h1 v-text="$gettext('Activities')" />
   <div class="oc-width-1-1 oc-mb-m">
     <item-filter
       ref="mediaTypeFilter"
diff --git a/packages/web-app-files/src/components/SideBar/ActivitiesPanel.vue b/packages/web-app-files/src/components/SideBar/ActivitiesPanel.vue
index ac039bd6f54..1d58f00f027 100644
--- a/packages/web-app-files/src/components/SideBar/ActivitiesPanel.vue
+++ b/packages/web-app-files/src/components/SideBar/ActivitiesPanel.vue
@@ -4,7 +4,7 @@
     <template v-else>
       <p v-if="!activities.length" v-text="$gettext('No activities')" />
       <div v-else class="oc-ml-s">
-        <ul class="timeline">
+        <oc-list class="timeline">
           <li v-for="activity in activities" :key="activity.id">
             <span v-html="getHtmlFromActivity(activity)" />
             <span
@@ -12,7 +12,7 @@
               v-text="getTimeFromActivity(activity)"
             />
           </li>
-        </ul>
+        </oc-list>
         <p class="oc-text-muted oc-text-small" v-text="activitiesFooterText" />
       </div>
     </template>

From fe965cc2e2d6382917c82e8f7006ef81e2f1066c Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 24 Sep 2024 21:02:26 +0200
Subject: [PATCH 13/16] Fix typing issues

---
 .../src/components/ActivityItem.vue           | 26 ++++++++++++-------
 .../src/views/ActivityList.vue                | 10 +++----
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/packages/web-app-activities/src/components/ActivityItem.vue b/packages/web-app-activities/src/components/ActivityItem.vue
index 940e814db70..d45244d450f 100644
--- a/packages/web-app-activities/src/components/ActivityItem.vue
+++ b/packages/web-app-activities/src/components/ActivityItem.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="oc-flex oc-flex-middle activity-item">
     <div class="oc-flex oc-flex-middle">
-      <oc-avatar :width="36" :user-name="activity.template.variables.user.displayName" />
-      <span class="oc-ml-s" v-text="activity.template.variables.user.displayName" />
+      <oc-avatar :width="36" :user-name="activity.template.variables?.user?.displayName" />
+      <span class="oc-ml-s" v-text="activity.template.variables?.user?.displayName" />
     </div>
     <div>activity unknown</div>
     <div class="oc-text-truncate">
@@ -13,7 +13,7 @@
         class="oc-text-muted oc-flex oc-flex-middle oc-p-xs"
       >
         <oc-icon name="eye-off" />
-        <span class="oc-ml-s" v-text="activity.template.variables.resource.name" />
+        <span class="oc-ml-s" v-text="activity.template.variables?.resource?.name" />
       </div>
     </div>
     <div><span v-text="recordedDateTime" /></div>
@@ -22,7 +22,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, onMounted, PropType, ref, unref } from 'vue'
-import { Activity } from '@ownclouders/web-client/graph/generated'
+import { Activity as GraphActivity, User } from '@ownclouders/web-client/graph/generated'
 import { DateTime } from 'luxon'
 import {
   formatDateFromDateTime,
@@ -31,9 +31,18 @@ import {
   useClientService
 } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
-import { Resource } from '@ownclouders/web-client'
-import { DavProperty } from '@ownclouders/web-client/webdav'
+import { Resource, SpaceResource } from '@ownclouders/web-client'
 
+//TODO: Use original type Activity from web-client when it's corrected
+type Activity = GraphActivity & {
+  template: {
+    variables?: {
+      space?: SpaceResource
+      resource?: Resource
+      user?: User
+    }
+  }
+}
 export default defineComponent({
   name: 'ActivityList',
   components: { ResourceListItem },
@@ -63,9 +72,8 @@ export default defineComponent({
     onMounted(async () => {
       try {
         resource.value = await clientService.webdav.getFileInfo(
-          unref(props.activity.template.variables.space.id),
-          { fileId: props.activity.template.variables.resource.id },
-          { davProperties: DavProperty.name }
+          unref(props.activity.template.variables?.space),
+          { fileId: props.activity.template.variables?.resource?.id }
         )
       } catch (e) {
         resourceNotAccessible.value = true
diff --git a/packages/web-app-activities/src/views/ActivityList.vue b/packages/web-app-activities/src/views/ActivityList.vue
index af3ee68886f..8973ea698f0 100644
--- a/packages/web-app-activities/src/views/ActivityList.vue
+++ b/packages/web-app-activities/src/views/ActivityList.vue
@@ -6,7 +6,7 @@
         v-text="getDateHeadline(date)"
       />
       <oc-list class="oc-ml-s oc-mt-s timeline">
-        <li v-for="activityItem in activities" :key="activityItem">
+        <li v-for="activityItem in activities" :key="activityItem.id">
           <ActivityItem :activity="activityItem" />
         </li>
       </oc-list>
@@ -22,6 +22,7 @@ import ActivityItem from '../components/ActivityItem.vue'
 import { formatDateFromDateTime } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
 
+type DateActivityCollection = Record<string, Activity[]>
 export default defineComponent({
   name: 'ActivityList',
   components: { ActivityItem },
@@ -34,8 +35,8 @@ export default defineComponent({
   setup(props) {
     const { current: currentLanguage } = useGettext()
 
-    const activitiesDateCategorized = computed(() => {
-      return props.activities.reduce((acc, activity) => {
+    const activitiesDateCategorized = computed<DateActivityCollection>(() => {
+      return props.activities.reduce((acc: DateActivityCollection, activity) => {
         const date = DateTime.fromISO(activity.times.recordedTime).toISODate()
 
         if (!acc[date]) {
@@ -44,9 +45,8 @@ export default defineComponent({
         acc[date].push(activity)
 
         return acc
-      }, {})
+      }, {} as DateActivityCollection)
     })
-
     const getDateHeadline = (dateISO: string) => {
       const dateTime = DateTime.fromISO(dateISO)
 

From d5f3bb0eb6ee612d750d1100c748eecca3e87c69 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 24 Sep 2024 21:13:55 +0200
Subject: [PATCH 14/16] Add luxon lib

---
 packages/web-app-activities/package.json | 1 +
 pnpm-lock.yaml                           | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/packages/web-app-activities/package.json b/packages/web-app-activities/package.json
index c9cc5628b52..04dd8fd4c1b 100644
--- a/packages/web-app-activities/package.json
+++ b/packages/web-app-activities/package.json
@@ -12,6 +12,7 @@
     "@ownclouders/web-pkg": "workspace:*",
     "design-system": "workspace:@ownclouders/design-system@*",
     "pinia": "^2.2.2",
+    "luxon": "^3.5.0",
     "vue-concurrency": "^5.0.1",
     "vue-router": "^4.2.5",
     "vue3-gettext": "^2.4.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a2eef02e482..1c19a7ff709 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -521,6 +521,9 @@ importers:
       design-system:
         specifier: workspace:@ownclouders/design-system@*
         version: link:../design-system
+      luxon:
+        specifier: ^3.5.0
+        version: 3.5.0
       pinia:
         specifier: ^2.2.2
         version: 2.2.2(typescript@5.6.2)(vue@3.5.8(typescript@5.6.2))

From 6ad391e3a3e3298976bcec15dc4311bfff904b1d Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Tue, 24 Sep 2024 21:30:55 +0200
Subject: [PATCH 15/16] Update snapshots

---
 .../SideBar/__snapshots__/ActivitiesPanel.spec.ts.snap          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/ActivitiesPanel.spec.ts.snap b/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/ActivitiesPanel.spec.ts.snap
index 2d1b5cfd57e..145d885868b 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/ActivitiesPanel.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/SideBar/__snapshots__/ActivitiesPanel.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`ActivitiesPanel > should render a list of activities when data is present 1`] = `
 "<div>
   <div class="oc-ml-s">
-    <ul class="timeline">
+    <ul class="oc-list oc-my-rm oc-mx-rm timeline">
       <li><span><strong>Marie Curie</strong> created <strong>new folder</strong>.</span> <span class="oc-text-muted oc-text-small oc-mt-s">Jul 29, 2024, 6:34 PM</span></li>
       <li><span><strong>Albert Einstein</strong> moved <strong>textfile.txt</strong>.</span> <span class="oc-text-muted oc-text-small oc-mt-s">Jul 29, 2023, 6:34 PM</span></li>
       <li><span><strong>Robert Oppenheimer</strong> deleted <strong>atom plans.pdf</strong>.</span> <span class="oc-text-muted oc-text-small oc-mt-s">Jul 29, 2022, 6:34 PM</span></li>

From aa18b186a8dacc53ceb827b40a9f0ca622961598 Mon Sep 17 00:00:00 2001
From: Jan Ackermann <jan.alexander.ackermann@outlook.com>
Date: Wed, 25 Sep 2024 13:07:28 +0200
Subject: [PATCH 16/16] Add fixme comment

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

diff --git a/packages/web-app-activities/src/components/ActivityItem.vue b/packages/web-app-activities/src/components/ActivityItem.vue
index d45244d450f..4e16f0d636e 100644
--- a/packages/web-app-activities/src/components/ActivityItem.vue
+++ b/packages/web-app-activities/src/components/ActivityItem.vue
@@ -33,7 +33,7 @@ import {
 import { useGettext } from 'vue3-gettext'
 import { Resource, SpaceResource } from '@ownclouders/web-client'
 
-//TODO: Use original type Activity from web-client when it's corrected
+//FIXME: Use original type Activity from web-client when it's corrected https://github.com/owncloud/ocis/issues/10151
 type Activity = GraphActivity & {
   template: {
     variables?: {