[6.x] Activity UI

.github/workflows/js-ci.yml

@@ -45,7 +45,7 @@ jobs:
         # `testbench typescript:transform` and `testbench wayfinder:generate`
         # derive their output from controllers, DTOs, and routes in src/.
         run: |
-          echo "value=js-ci-v3-${{ runner.os }}-${{ hashFiles('package-lock.json', 'composer.lock', 'package.json', 'packages/*/package.json', 'packages/craftcms-ui/src/**', 'packages/craftcms-ui/tsconfig*.json', 'packages/craftcms-ui/vite.config.*', 'packages/craftcms-ui/tsdown.config.*', 'packages/craftcms-garnish/src/**', 'packages/craftcms-garnish/tsconfig*.json', 'packages/craftcms-garnish/vite.config.*', 'routes/**/*.php', 'src/**/*.php', 'workbench/**/*.php') }}" >> "$GITHUB_OUTPUT"
+          echo "value=js-ci-v4-${{ runner.os }}-${{ hashFiles('package-lock.json', 'composer.lock', 'package.json', 'packages/*/package.json', 'packages/craftcms-ui/src/**', 'packages/craftcms-ui/tsconfig*.json', 'packages/craftcms-ui/vite.config.*', 'packages/craftcms-ui/tsdown.config.*', 'packages/craftcms-garnish/src/**', 'packages/craftcms-garnish/tsconfig*.json', 'packages/craftcms-garnish/vite.config.*', 'routes/**/*.php', 'src/**/*.php', 'workbench/**/*.php') }}" >> "$GITHUB_OUTPUT"
 
       - name: Restore install + build + generated cache
         id: cache
@@ -57,6 +57,7 @@ jobs:
             packages/craftcms-ui/dist
             packages/craftcms-garnish/dist
             vendor
+            cms-assets/resources/icons
             resources/js/actions
             resources/js/routes
             resources/js/wayfinder
@@ -74,6 +75,10 @@ jobs:
             env:
               CRAFT_FONTAWESOME_TOKEN: ${{ secrets.CRAFT_FONTAWESOME_TOKEN }}
 
+      - name: Copy icons
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: composer copy-icons
+
       # Build the garnish package so its `dist/*.d.ts` exist — `vue-tsc` resolves
       # `@craftcms/garnish` from `dist` (its `types`), and dist is gitignored.
       # Without this the typecheck job fails to resolve the module.

.github/workflows/storybook.yml

@@ -59,7 +59,7 @@ jobs:
         # Keep this in sync with .github/workflows/js-ci.yml so the built assets
         # and generated files are shared between the two workflows.
         run: |
-          echo "value=js-ci-v3-${{ runner.os }}-${{ hashFiles('package-lock.json', 'composer.lock', 'package.json', 'packages/*/package.json', 'packages/craftcms-ui/src/**', 'packages/craftcms-ui/tsconfig*.json', 'packages/craftcms-ui/vite.config.*', 'packages/craftcms-ui/tsdown.config.*', 'packages/craftcms-garnish/src/**', 'packages/craftcms-garnish/tsconfig*.json', 'packages/craftcms-garnish/vite.config.*', 'routes/**/*.php', 'src/**/*.php', 'workbench/**/*.php') }}" >> "$GITHUB_OUTPUT"
+          echo "value=js-ci-v4-${{ runner.os }}-${{ hashFiles('package-lock.json', 'composer.lock', 'package.json', 'packages/*/package.json', 'packages/craftcms-ui/src/**', 'packages/craftcms-ui/tsconfig*.json', 'packages/craftcms-ui/vite.config.*', 'packages/craftcms-ui/tsdown.config.*', 'packages/craftcms-garnish/src/**', 'packages/craftcms-garnish/tsconfig*.json', 'packages/craftcms-garnish/vite.config.*', 'routes/**/*.php', 'src/**/*.php', 'workbench/**/*.php') }}" >> "$GITHUB_OUTPUT"
 
       - name: Restore install + build + generated cache
         id: cache
@@ -71,6 +71,7 @@ jobs:
             packages/craftcms-ui/dist
             packages/craftcms-garnish/dist
             vendor
+            cms-assets/resources/icons
             resources/js/actions
             resources/js/routes
             resources/js/wayfinder
@@ -88,6 +89,10 @@ jobs:
             env:
               CRAFT_FONTAWESOME_TOKEN: ${{ secrets.CRAFT_FONTAWESOME_TOKEN }}
 
+      - name: Copy icons
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: composer copy-icons
+
       # Build the garnish package so its `dist/*.d.ts` exist — `vue-tsc` resolves
       # `@craftcms/garnish` from `dist` (its `types`), and dist is gitignored.
       - name: Build @craftcms/garnish
@@ -141,6 +146,7 @@ jobs:
             packages/craftcms-ui/dist
             packages/craftcms-garnish/dist
             vendor
+            cms-assets/resources/icons
             resources/js/actions
             resources/js/routes
             resources/js/wayfinder
@@ -184,6 +190,7 @@ jobs:
             packages/craftcms-ui/dist
             packages/craftcms-garnish/dist
             vendor
+            cms-assets/resources/icons
             resources/js/actions
             resources/js/routes
             resources/js/wayfinder

CHANGELOG.md

@@ -8,6 +8,7 @@
 - Fixed a bug where validating filesystem attributes could resolve `CraftCms\Cms\Filesystem\Filesystems\Filesystem::getRootUrl()`. ([#19535](https://github.com/craftcms/cms/pull/19535))
 - Fixed `CraftCms\Cms\Support\Env::parse()` to preserve unknown aliases rather than throw an exception. ([#19535](https://github.com/craftcms/cms/pull/19535))
 - Fixed a bug where nested Content Block fields’ content could be lost during a batched resave that included revisions. ([#19543](https://github.com/craftcms/cms/issues/19543))
+- Added Markdown comments to element activity timelines, with support for editing, removing, structured user mentions, and email notifications.
 
 ## 6.0.0-alpha.18 - 2026-09-01
 

resources/js/modules/activity/components/ActivityTimeline.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+  import {t} from '@craftcms/ui';
+  import {ref} from 'vue';
+  import CpLink from '@/common/components/CpLink.vue';
+  import ActivityTimelineComment from './ActivityTimelineComment.vue';
+  import ActivityTimelineEvent from './ActivityTimelineEvent.vue';
+  import {
+    type ActivityEvent,
+    useActivityTimeline,
+    type ActivityTimelineProps,
+  } from '@/modules/activity/composables/useActivityTimeline';
+
+  const props = defineProps<ActivityTimelineProps>();
+  const timeline = ref<HTMLElement | null>(null);
+  const {
+    addOrUpdateEvent,
+    dayGroups,
+    events,
+    hasLoaded,
+    load,
+    scrollToEnd,
+    status,
+  } = useActivityTimeline(props, timeline);
+
+  async function commentCreated(event: ActivityEvent): Promise<void> {
+    addOrUpdateEvent(event);
+    await scrollToEnd();
+  }
+</script>
+
+<template>
+  <div class="activity-timeline">
+    <div ref="timeline" class="activity-timeline__scroll" scroll-region>
+      <div
+        v-if="!hasLoaded && status === 'loading'"
+        class="activity-timeline__status"
+        role="status"
+      >
+        <craft-spinner />
+        <span class="visually-hidden">{{ t('Loading activity') }}</span>
+      </div>
+
+      <div
+        v-else-if="!hasLoaded && status === 'error'"
+        class="activity-timeline__status"
+        role="alert"
+      >
+        <p>{{ t('Couldn’t load activity.') }}</p>
+        <craft-button
+          type="button"
+          size="small"
+          variant="outline"
+          data-activity-retry
+          @click="load"
+        >
+          {{ t('Retry') }}
+        </craft-button>
+      </div>
+
+      <p
+        v-else-if="hasLoaded && events.length === 0"
+        class="activity-timeline__status"
+      >
+        {{ t('No activity has been recorded yet.') }}
+      </p>
+
+      <div v-else-if="hasLoaded" class="activity-timeline__rail">
+        <div v-if="pageUrl" class="activity-timeline__full-link">
+          <CpLink :href="pageUrl">
+            {{ t('View all activity') }}
+            <craft-icon name="circle-arrow-right" />
+          </CpLink>
+        </div>
+
+        <section
+          v-for="group in dayGroups"
+          :key="group.key"
+          :data-activity-day="group.key"
+        >
+          <h4 class="activity-timeline__day">{{ group.label }}</h4>
+          <ActivityTimelineEvent
+            v-for="(event, index) in group.events"
+            :key="event.id"
+            :event="event"
+            :element-type="elementType"
+            :element-id="elementId"
+            :site-id="siteId"
+            :last="index === group.events.length - 1"
+            @updated="addOrUpdateEvent"
+          />
+        </section>
+      </div>
+    </div>
+
+    <div
+      v-if="hasLoaded"
+      class="activity-timeline__composer"
+      data-activity-comment-composer
+    >
+      <ActivityTimelineComment
+        :element-type="elementType"
+        :element-id="elementId"
+        :site-id="siteId"
+        @created="commentCreated"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .activity-timeline {
+    display: flex;
+    flex-direction: column;
+    max-height: 60vh;
+  }
+
+  .activity-timeline__scroll {
+    min-height: 8rem;
+    overflow-y: auto;
+  }
+
+  .activity-timeline__status {
+    display: grid;
+    justify-items: center;
+    gap: var(--c-spacing-sm);
+    padding: var(--c-spacing-xl) var(--c-spacing-md);
+    text-align: center;
+    color: var(--c-text-quiet);
+  }
+
+  .activity-timeline__status p {
+    margin: 0;
+  }
+
+  .activity-timeline__rail,
+  .activity-timeline__composer {
+    padding: var(--c-spacing-md);
+  }
+
+  .activity-timeline__full-link {
+    display: flex;
+    align-items: center;
+    margin-block-end: var(--c-spacing-md);
+  }
+
+  .activity-timeline__day {
+    margin-block: var(--c-spacing-lg) var(--c-spacing-xs);
+    color: var(--c-text-quiet);
+    font-size: var(--c-text-xs);
+    font-weight: 600;
+  }
+
+  section:first-of-type .activity-timeline__day {
+    margin-block-start: 0;
+  }
+
+  .activity-timeline__composer {
+    flex: none;
+    border-block-start: 1px solid var(--c-color-neutral-border-quiet);
+    background: var(--c-bg);
+  }
+</style>

resources/js/modules/activity/components/ActivityTimelineActor.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+  import {t} from '@craftcms/ui';
+  import {computed} from 'vue';
+  import type {ActivityTarget} from '@/modules/activity/composables/useActivityTimeline';
+
+  const props = defineProps<{
+    actor: ActivityTarget;
+    impersonator: ActivityTarget | null;
+  }>();
+
+  const identities = computed(() => [
+    ...(props.impersonator
+      ? [{role: 'impersonator', target: props.impersonator}]
+      : []),
+    {role: 'actor', target: props.actor},
+  ]);
+</script>
+
+<template>
+  <template v-for="(identity, index) in identities" :key="identity.role">
+    <span v-if="index" class="activity-timeline__as">{{ t('as') }}</span>
+    <a
+      v-if="identity.target.url"
+      :href="identity.target.url"
+      class="font-semibold"
+    >
+      {{ identity.target.label }}
+    </a>
+    <span v-else class="font-semibold">
+      {{ identity.target.label }}
+      <span v-if="identity.target.deleted">({{ t('deleted') }})</span>
+    </span>
+  </template>
+</template>
+
+<style scoped>
+  .activity-timeline__as {
+    margin-inline: 0.25em;
+  }
+</style>

resources/js/modules/activity/components/ActivityTimelineChangeList.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+  import {t} from '@craftcms/ui';
+  import ActivityTimelineChangeValue from './ActivityTimelineChangeValue.vue';
+  import type {ActivityChange} from '@/modules/activity/composables/useActivityTimeline';
+
+  defineProps<{
+    changes: ActivityChange[];
+  }>();
+</script>
+
+<template>
+  <ul class="activity-timeline__change-list">
+    <li
+      v-for="(change, index) in changes"
+      :key="index"
+      class="activity-timeline__change"
+    >
+      <strong class="activity-timeline__change-label">
+        {{ change.label }}
+      </strong>
+      <dl class="activity-timeline__change-comparison">
+        <div>
+          <dt>{{ t('Before') }}</dt>
+          <dd><ActivityTimelineChangeValue :value="change.old" /></dd>
+        </div>
+        <div>
+          <dt>{{ t('After') }}</dt>
+          <dd><ActivityTimelineChangeValue :value="change.new" /></dd>
+        </div>
+      </dl>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+  .activity-timeline__change-list {
+    container-type: inline-size;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .activity-timeline__change {
+    padding-block: var(--c-spacing-sm);
+    border-block-start: 1px solid var(--c-color-neutral-border-quiet);
+  }
+
+  .activity-timeline__change:first-child {
+    border-block-start: 0;
+  }
+
+  .activity-timeline__change-label,
+  .activity-timeline__change-comparison dd {
+    overflow-wrap: anywhere;
+  }
+
+  .activity-timeline__change-comparison {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--c-spacing-sm);
+    margin-block: var(--c-spacing-xs) 0;
+  }
+
+  .activity-timeline__change-comparison div {
+    min-width: 0;
+  }
+
+  .activity-timeline__change-comparison dt {
+    color: var(--c-text-quiet);
+    font-size: var(--c-text-xs);
+    font-weight: 600;
+  }
+
+  .activity-timeline__change-comparison dd {
+    margin: var(--c-spacing-xs) 0 0;
+  }
+
+  @container (min-width: 32rem) {
+    .activity-timeline__change {
+      display: grid;
+      grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr);
+      gap: var(--c-spacing-md);
+    }
+
+    .activity-timeline__change-comparison {
+      margin-block-start: 0;
+    }
+  }
+</style>