From dd681f9d07652e95ee7757969ece5e47330b74be Mon Sep 17 00:00:00 2001
From: ghosh-abhinaba <aghosh@gitlab.com>
Date: Thu, 24 Jul 2025 17:01:34 +0530
Subject: [PATCH 1/9] update: activity widget ux

---
 .../homepage/components/activity_widget.vue   | 168 +++++++++++++-----
 1 file changed, 126 insertions(+), 42 deletions(-)

diff --git a/app/assets/javascripts/homepage/components/activity_widget.vue b/app/assets/javascripts/homepage/components/activity_widget.vue
index c888f20169e8c4..1b60cc3e3e5369 100644
--- a/app/assets/javascripts/homepage/components/activity_widget.vue
+++ b/app/assets/javascripts/homepage/components/activity_widget.vue
@@ -1,17 +1,38 @@
 <script>
-import { GlAlert, GlSkeletonLoader } from '@gitlab/ui';
+import { GlAlert, GlSkeletonLoader, GlCollapsibleListbox } from '@gitlab/ui';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import axios from '~/lib/utils/axios_utils';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { localTimeAgo } from '~/lib/utils/datetime_utility';
+import { s__ } from '~/locale';
 import VisibilityChangeDetector from './visibility_change_detector.vue';
 
 const MAX_EVENTS = 10;
 
+const ACTIVITY_FILTER_OPTIONS = [
+  {
+    value: null,
+    text: s__('Activity|All'),
+  },
+  {
+    value: 'merge_request',
+    text: s__('Activity|Merge requests'),
+  },
+  {
+    value: 'issue',
+    text: s__('Activity|Issues'),
+  },
+  {
+    value: 'push',
+    text: s__('Activity|Pushes'),
+  },
+];
+
 export default {
   components: {
     GlAlert,
     GlSkeletonLoader,
+    GlCollapsibleListbox,
     VisibilityChangeDetector,
   },
   directives: {
@@ -20,26 +41,45 @@ export default {
   data() {
     return {
       activityFeedHtml: null,
+      filter: null,
       isLoading: true,
       hasError: false,
     };
   },
+  computed: {
+    filteredActivityHtml() {
+      if (!this.activityFeedHtml || !this.filter) {
+        return this.activityFeedHtml;
+      }
+
+      // Simple client-side filtering
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(this.activityFeedHtml, 'text/html');
+      const items = doc.querySelectorAll('li');
+
+      items.forEach(item => {
+        const text = item.textContent.toLowerCase();
+        let shouldShow = false;
+
+        if (this.filter === 'merge_request' && text.includes('merge request')) shouldShow = true;
+        if (this.filter === 'issue' && text.includes('issue')) shouldShow = true;
+        if (this.filter === 'push' && text.includes('pushed')) shouldShow = true;
+
+        item.style.display = shouldShow ? '' : 'none';
+      });
+
+      return doc.body.innerHTML;
+    },
+  },
   created() {
     this.reload();
   },
   methods: {
     async reload() {
       this.isLoading = true;
+      this.hasError = false;
 
       try {
-        /**
-         * As part of this widget's first iteration, we have slightly changed how the `UsersController`
-         * controller behaves so that it returns an empty response when the user has no activity and
-         * the `is_personal_homepage` param is present. This is a temporary workaround until we can
-         * move away from an HTML endpoint and handle empty states more gracefully in the client.
-         * We'll need to remove the `is_personal_homepage` logic from `UsersController` once we have
-         * a proper GraphQL endpoint here.
-         */
         const { data } = await axios.get(
           `/users/${encodeURIComponent(gon.current_username)}/activity?limit=${MAX_EVENTS}&is_personal_homepage=1`,
         );
@@ -60,42 +100,86 @@ export default {
       }
     },
   },
+
+  ACTIVITY_FILTER_OPTIONS,
 };
 </script>
 
 <template>
-  <visibility-change-detector class="gl-px-4" @visible="reload">
-    <h4 class="gl-heading-4 gl-my-4">{{ __('Activity') }}</h4>
-    <gl-skeleton-loader v-if="isLoading" :width="200">
-      <rect width="5" height="3" rx="1" y="2" />
-      <rect width="160" height="3" rx="1" x="8" y="2" />
-      <rect width="20" height="3" rx="1" x="180" y="2" />
-
-      <rect width="5" height="3" rx="1" y="9" />
-      <rect width="160" height="3" rx="1" x="8" y="9" />
-      <rect width="20" height="3" rx="1" x="180" y="9" />
-
-      <rect width="5" height="3" rx="1" y="16" />
-      <rect width="160" height="3" rx="1" x="8" y="16" />
-      <rect width="20" height="3" rx="1" x="180" y="16" />
-    </gl-skeleton-loader>
-    <gl-alert v-else-if="hasError" variant="danger">{{
-      s__(
-        'HomepageActivityWidget|The activity feed is not available. Please refresh the page to try again.',
-      )
-    }}</gl-alert>
-    <p v-else-if="!activityFeedHtml" data-testid="empty-state">
-      {{
-        s__(
-          'Homepage|Start creating merge requests, pushing code, commenting in issues, and doing other work to view a feed of your activity here.',
-        )
-      }}
-    </p>
-    <ul
-      v-else
-      v-safe-html="activityFeedHtml"
-      data-testid="events-list"
-      class="gl-list-none gl-p-0"
-    ></ul>
+  <visibility-change-detector @visible="reload">
+    <div class="gl-flex gl-items-center gl-justify-between gl-gap-2">
+      <h4 class="gl-heading-4 gl-my-4 gl-grow">{{ __('Activity') }}</h4>
+      <gl-collapsible-listbox v-model="filter" :items="$options.ACTIVITY_FILTER_OPTIONS" />
+    </div>
+
+    <div class="gl-rounded-lg gl-bg-subtle">
+      <!-- Loading State -->
+      <div v-if="isLoading" class="gl-p-4">
+        <gl-skeleton-loader v-for="i in 5" :key="i" :width="200" :height="10">
+          <rect x="0" y="0" width="16" height="8" rx="2" ry="2" />
+          <rect x="24" y="0" width="174" height="8" rx="2" ry="2" />
+          <rect x="182" y="0" width="16" height="8" rx="2" ry="2" />
+        </gl-skeleton-loader>
+      </div>
+
+      <!-- Error State -->
+      <gl-alert v-else-if="hasError" variant="danger" class="gl-m-4">
+        {{ s__('HomepageActivityWidget|The activity feed is not available. Please refresh the page to try again.') }}
+      </gl-alert>
+
+      <!-- Empty State -->
+      <div v-else-if="!activityFeedHtml" class="gl-flex gl-items-center gl-gap-5 gl-bg-subtle gl-p-4">
+        <span>
+          <strong>{{ s__('Activity|No recent activity') }}</strong>
+          {{ s__('Activity|Start creating merge requests, pushing code, commenting in issues, and doing other work to view your activity here.') }}
+        </span>
+      </div>
+
+      <!-- Activity List -->
+      <div v-else>
+        <ul
+          v-safe-html="filteredActivityHtml"
+          data-testid="events-list"
+          class="gl-list-none gl-p-0 gl-m-0"
+        ></ul>
+      </div>
+
+      <!-- Footer Link -->
+      <div v-if="activityFeedHtml" class="gl-px-5 gl-py-3">
+        <a href="/dashboard/activity">{{ __('All activity') }}</a>
+      </div>
+    </div>
   </visibility-change-detector>
 </template>
+
+<style scoped>
+:deep(li) {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--gray-100);
+  transition: background-color 0.2s;
+}
+
+:deep(li:hover) {
+  background-color: var(--gray-50);
+}
+
+:deep(li:last-child) {
+  border-bottom: none;
+}
+
+:deep(li:first-child) {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+:deep(a) {
+  color: var(--blue-600);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+:deep(a:hover) {
+  color: var(--blue-700);
+  text-decoration: underline;
+}
+</style>
-- 
GitLab


From c4ce35e0d77a9ce93812e7c578ce6e92d9e52940 Mon Sep 17 00:00:00 2001
From: ghosh-abhinaba <aghosh@gitlab.com>
Date: Thu, 24 Jul 2025 17:05:05 +0530
Subject: [PATCH 2/9] update: activity widget ux

---
 app/assets/javascripts/homepage/components/activity_widget.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/assets/javascripts/homepage/components/activity_widget.vue b/app/assets/javascripts/homepage/components/activity_widget.vue
index 1b60cc3e3e5369..31f35ce402da86 100644
--- a/app/assets/javascripts/homepage/components/activity_widget.vue
+++ b/app/assets/javascripts/homepage/components/activity_widget.vue
@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 <script>
 import { GlAlert, GlSkeletonLoader, GlCollapsibleListbox } from '@gitlab/ui';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
-- 
GitLab


From 033471ed1b1a1c27e8c12417f534841522cc64a6 Mon Sep 17 00:00:00 2001
From: ghosh-abhinaba <aghosh@gitlab.com>
Date: Thu, 24 Jul 2025 20:01:29 +0530
Subject: [PATCH 3/9] chore: updated activity widget

---
 .../homepage/components/activity_widget.vue   | 192 +++++++-----------
 1 file changed, 78 insertions(+), 114 deletions(-)

diff --git a/app/assets/javascripts/homepage/components/activity_widget.vue b/app/assets/javascripts/homepage/components/activity_widget.vue
index 31f35ce402da86..0684a76bf44020 100644
--- a/app/assets/javascripts/homepage/components/activity_widget.vue
+++ b/app/assets/javascripts/homepage/components/activity_widget.vue
@@ -1,40 +1,19 @@
-/* eslint-disable */
-
 <script>
-import { GlAlert, GlSkeletonLoader, GlCollapsibleListbox } from '@gitlab/ui';
+import { nextTick } from 'vue';
+import { GlAlert, GlSkeletonLoader } from '@gitlab/ui';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import axios from '~/lib/utils/axios_utils';
 import SafeHtml from '~/vue_shared/directives/safe_html';
+import VisibilityChangeDetector from './visibility_change_detector.vue';
 import { localTimeAgo } from '~/lib/utils/datetime_utility';
 import { s__ } from '~/locale';
-import VisibilityChangeDetector from './visibility_change_detector.vue';
 
 const MAX_EVENTS = 10;
 
-const ACTIVITY_FILTER_OPTIONS = [
-  {
-    value: null,
-    text: s__('Activity|All'),
-  },
-  {
-    value: 'merge_request',
-    text: s__('Activity|Merge requests'),
-  },
-  {
-    value: 'issue',
-    text: s__('Activity|Issues'),
-  },
-  {
-    value: 'push',
-    text: s__('Activity|Pushes'),
-  },
-];
-
 export default {
   components: {
     GlAlert,
     GlSkeletonLoader,
-    GlCollapsibleListbox,
     VisibilityChangeDetector,
   },
   directives: {
@@ -43,36 +22,11 @@ export default {
   data() {
     return {
       activityFeedHtml: null,
-      filter: null,
+      activityItems: [],
       isLoading: true,
       hasError: false,
     };
   },
-  computed: {
-    filteredActivityHtml() {
-      if (!this.activityFeedHtml || !this.filter) {
-        return this.activityFeedHtml;
-      }
-
-      // Simple client-side filtering
-      const parser = new DOMParser();
-      const doc = parser.parseFromString(this.activityFeedHtml, 'text/html');
-      const items = doc.querySelectorAll('li');
-
-      items.forEach(item => {
-        const text = item.textContent.toLowerCase();
-        let shouldShow = false;
-
-        if (this.filter === 'merge_request' && text.includes('merge request')) shouldShow = true;
-        if (this.filter === 'issue' && text.includes('issue')) shouldShow = true;
-        if (this.filter === 'push' && text.includes('pushed')) shouldShow = true;
-
-        item.style.display = shouldShow ? '' : 'none';
-      });
-
-      return doc.body.innerHTML;
-    },
-  },
   created() {
     this.reload();
   },
@@ -85,14 +39,18 @@ export default {
         const { data } = await axios.get(
           `/users/${encodeURIComponent(gon.current_username)}/activity?limit=${MAX_EVENTS}&is_personal_homepage=1`,
         );
-        if (data?.html) {
+
+        if (data.html) {
           const parser = new DOMParser();
           const resp = parser.parseFromString(data.html, 'text/html');
+
           const timestamps = resp.querySelectorAll('.js-timeago');
-          if (timestamps.length > 0) {
-            localTimeAgo(timestamps);
-          }
+          if (timestamps.length) localTimeAgo(timestamps);
+
           this.activityFeedHtml = resp.body.innerHTML;
+
+          await nextTick();
+          this.parseActivityItems(resp);
         }
       } catch (e) {
         Sentry.captureException(e);
@@ -101,21 +59,41 @@ export default {
         this.isLoading = false;
       }
     },
-  },
 
-  ACTIVITY_FILTER_OPTIONS,
+    parseActivityItems(parsedDoc) {
+      const listItems = parsedDoc.querySelectorAll('li');
+
+      this.activityItems = Array.from(listItems).map((li, index) => {
+        const timeEl = li.querySelector('.js-timeago, time, [data-original-title]');
+        const timestamp = timeEl
+          ? timeEl.getAttribute('data-original-title') || timeEl.textContent || timeEl.title
+          : '';
+
+        const iconEl = li.querySelector('svg, i, [role="img"]');
+        const iconHtml = iconEl ? iconEl.outerHTML : '';
+
+        const clone = li.cloneNode(true);
+        if (iconEl) clone.querySelectorAll('svg, i, [role="img"]').forEach((e) => e.remove());
+        clone
+          .querySelectorAll('.js-timeago, time, [data-original-title]')
+          .forEach((e) => e.remove());
+
+        return {
+          content: clone.innerHTML.trim(),
+          iconHtml,
+          timestamp,
+        };
+      });
+    },
+  },
 };
 </script>
 
 <template>
   <visibility-change-detector @visible="reload">
-    <div class="gl-flex gl-items-center gl-justify-between gl-gap-2">
-      <h4 class="gl-heading-4 gl-my-4 gl-grow">{{ __('Activity') }}</h4>
-      <gl-collapsible-listbox v-model="filter" :items="$options.ACTIVITY_FILTER_OPTIONS" />
-    </div>
+    <h4 class="gl-heading-4 gl-my-4">{{ __('Activity') }}</h4>
 
     <div class="gl-rounded-lg gl-bg-subtle">
-      <!-- Loading State -->
       <div v-if="isLoading" class="gl-p-4">
         <gl-skeleton-loader v-for="i in 5" :key="i" :width="200" :height="10">
           <rect x="0" y="0" width="16" height="8" rx="2" ry="2" />
@@ -124,64 +102,50 @@ export default {
         </gl-skeleton-loader>
       </div>
 
-      <!-- Error State -->
       <gl-alert v-else-if="hasError" variant="danger" class="gl-m-4">
-        {{ s__('HomepageActivityWidget|The activity feed is not available. Please refresh the page to try again.') }}
+        {{
+          s__(
+            'HomepageActivityWidget|The activity feed is not available. Please refresh the page to try again.',
+          )
+        }}
       </gl-alert>
 
-      <!-- Empty State -->
-      <div v-else-if="!activityFeedHtml" class="gl-flex gl-items-center gl-gap-5 gl-bg-subtle gl-p-4">
-        <span>
-          <strong>{{ s__('Activity|No recent activity') }}</strong>
-          {{ s__('Activity|Start creating merge requests, pushing code, commenting in issues, and doing other work to view your activity here.') }}
-        </span>
-      </div>
-
-      <!-- Activity List -->
-      <div v-else>
-        <ul
-          v-safe-html="filteredActivityHtml"
-          data-testid="events-list"
-          class="gl-list-none gl-p-0 gl-m-0"
-        ></ul>
-      </div>
-
-      <!-- Footer Link -->
-      <div v-if="activityFeedHtml" class="gl-px-5 gl-py-3">
+      <p v-else-if="!activityFeedHtml" class="gl-p-4 gl-text-gray-600" data-testid="empty-state">
+        {{ s__('Activity|No recent activity') }}
+      </p>
+
+      <ol v-else class="gl-m-0 gl-list-none gl-p-0">
+        <li
+          v-for="(item, index) in activityItems"
+          :key="index"
+          class="gl-border-b gl-border-subtle gl-px-6 gl-py-4 hover:!gl-bg-strong"
+          :class="{
+            'first:gl-rounded-t-lg': index === 0,
+            'last:gl-rounded-b-lg last:gl-border-b-0': index === activityItems.length - 1,
+          }"
+        >
+          <div class="gl-flex gl-items-start gl-gap-4">
+            <div
+              v-if="item.iconHtml"
+              class="gl-mt-0.5 gl-h-4 gl-w-4 gl-flex-shrink-0"
+              v-safe-html
+              v-html="item.iconHtml"
+            ></div>
+
+            <div class="gl-min-w-0 gl-flex-grow">
+              <div v-html="item.content" class="gl-text-base"></div>
+            </div>
+
+            <div class="gl-flex-shrink-0 gl-text-sm gl-text-gray-500">
+              {{ item.timestamp }}
+            </div>
+          </div>
+        </li>
+      </ol>
+
+      <div class="gl-px-6 gl-py-4">
         <a href="/dashboard/activity">{{ __('All activity') }}</a>
       </div>
     </div>
   </visibility-change-detector>
 </template>
-
-<style scoped>
-:deep(li) {
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--gray-100);
-  transition: background-color 0.2s;
-}
-
-:deep(li:hover) {
-  background-color: var(--gray-50);
-}
-
-:deep(li:last-child) {
-  border-bottom: none;
-}
-
-:deep(li:first-child) {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-}
-
-:deep(a) {
-  color: var(--blue-600);
-  text-decoration: none;
-  font-weight: 500;
-}
-
-:deep(a:hover) {
-  color: var(--blue-700);
-  text-decoration: underline;
-}
-</style>
-- 
GitLab


From 87ab26f493b0beae9512dd0d053d264a1aa29950 Mon Sep 17 00:00:00 2001
From: ghosh-abhinaba <aghosh@gitlab.com>
Date: Thu, 24 Jul 2025 20:05:21 +0530
Subject: [PATCH 4/9] chore: updated activity widget

---
 .../homepage/components/activity_widget.vue   | 73 +++++--------------
 1 file changed, 19 insertions(+), 54 deletions(-)

diff --git a/app/assets/javascripts/homepage/components/activity_widget.vue b/app/assets/javascripts/homepage/components/activity_widget.vue
index 0684a76bf44020..8882e393379341 100644
--- a/app/assets/javascripts/homepage/components/activity_widget.vue
+++ b/app/assets/javascripts/homepage/components/activity_widget.vue
@@ -4,21 +4,15 @@ import { GlAlert, GlSkeletonLoader } from '@gitlab/ui';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import axios from '~/lib/utils/axios_utils';
 import SafeHtml from '~/vue_shared/directives/safe_html';
-import VisibilityChangeDetector from './visibility_change_detector.vue';
 import { localTimeAgo } from '~/lib/utils/datetime_utility';
 import { s__ } from '~/locale';
+import VisibilityChangeDetector from './visibility_change_detector.vue';
 
 const MAX_EVENTS = 10;
 
 export default {
-  components: {
-    GlAlert,
-    GlSkeletonLoader,
-    VisibilityChangeDetector,
-  },
-  directives: {
-    SafeHtml,
-  },
+  components: { GlAlert, GlSkeletonLoader, VisibilityChangeDetector },
+  directives: { SafeHtml },
   data() {
     return {
       activityFeedHtml: null,
@@ -34,23 +28,18 @@ export default {
     async reload() {
       this.isLoading = true;
       this.hasError = false;
-
       try {
         const { data } = await axios.get(
-          `/users/${encodeURIComponent(gon.current_username)}/activity?limit=${MAX_EVENTS}&is_personal_homepage=1`,
+          `/users/${encodeURIComponent(gon.current_username)}/activity?limit=${MAX_EVENTS}&is_personal_homepage=1`
         );
-
         if (data.html) {
           const parser = new DOMParser();
-          const resp = parser.parseFromString(data.html, 'text/html');
-
-          const timestamps = resp.querySelectorAll('.js-timeago');
+          const doc = parser.parseFromString(data.html, 'text/html');
+          const timestamps = doc.querySelectorAll('.js-timeago');
           if (timestamps.length) localTimeAgo(timestamps);
-
-          this.activityFeedHtml = resp.body.innerHTML;
-
+          this.activityFeedHtml = doc.body.innerHTML;
           await nextTick();
-          this.parseActivityItems(resp);
+          this.parseActivityItems(doc);
         }
       } catch (e) {
         Sentry.captureException(e);
@@ -59,25 +48,17 @@ export default {
         this.isLoading = false;
       }
     },
-
-    parseActivityItems(parsedDoc) {
-      const listItems = parsedDoc.querySelectorAll('li');
-
-      this.activityItems = Array.from(listItems).map((li, index) => {
+    parseActivityItems(doc) {
+      this.activityItems = Array.from(doc.querySelectorAll('li')).map(li => {
         const timeEl = li.querySelector('.js-timeago, time, [data-original-title]');
         const timestamp = timeEl
-          ? timeEl.getAttribute('data-original-title') || timeEl.textContent || timeEl.title
+          ? (timeEl.dataset.originalTitle || timeEl.textContent || timeEl.title)
           : '';
-
         const iconEl = li.querySelector('svg, i, [role="img"]');
         const iconHtml = iconEl ? iconEl.outerHTML : '';
-
         const clone = li.cloneNode(true);
-        if (iconEl) clone.querySelectorAll('svg, i, [role="img"]').forEach((e) => e.remove());
-        clone
-          .querySelectorAll('.js-timeago, time, [data-original-title]')
-          .forEach((e) => e.remove());
-
+        if (iconEl) clone.querySelectorAll('svg, i, [role="img"]').forEach(e => e.remove());
+        clone.querySelectorAll('.js-timeago, time, [data-original-title]').forEach(e => e.remove());
         return {
           content: clone.innerHTML.trim(),
           iconHtml,
@@ -92,7 +73,6 @@ export default {
 <template>
   <visibility-change-detector @visible="reload">
     <h4 class="gl-heading-4 gl-my-4">{{ __('Activity') }}</h4>
-
     <div class="gl-rounded-lg gl-bg-subtle">
       <div v-if="isLoading" class="gl-p-4">
         <gl-skeleton-loader v-for="i in 5" :key="i" :width="200" :height="10">
@@ -101,48 +81,33 @@ export default {
           <rect x="182" y="0" width="16" height="8" rx="2" ry="2" />
         </gl-skeleton-loader>
       </div>
-
       <gl-alert v-else-if="hasError" variant="danger" class="gl-m-4">
-        {{
-          s__(
-            'HomepageActivityWidget|The activity feed is not available. Please refresh the page to try again.',
-          )
-        }}
+        {{ s__('HomepageActivityWidget|The activity feed is not available. Please refresh the page to try again.') }}
       </gl-alert>
-
       <p v-else-if="!activityFeedHtml" class="gl-p-4 gl-text-gray-600" data-testid="empty-state">
         {{ s__('Activity|No recent activity') }}
       </p>
-
       <ol v-else class="gl-m-0 gl-list-none gl-p-0">
         <li
           v-for="(item, index) in activityItems"
           :key="index"
-          class="gl-border-b gl-border-subtle gl-px-6 gl-py-4 hover:!gl-bg-strong"
+          class="gl-px-6 gl-py-4 gl-border-b gl-border-subtle hover:!gl-bg-strong"
           :class="{
             'first:gl-rounded-t-lg': index === 0,
-            'last:gl-rounded-b-lg last:gl-border-b-0': index === activityItems.length - 1,
+            'last:gl-border-b-0 last:gl-rounded-b-lg': index === activityItems.length - 1
           }"
         >
           <div class="gl-flex gl-items-start gl-gap-4">
-            <div
-              v-if="item.iconHtml"
-              class="gl-mt-0.5 gl-h-4 gl-w-4 gl-flex-shrink-0"
-              v-safe-html
-              v-html="item.iconHtml"
-            ></div>
-
-            <div class="gl-min-w-0 gl-flex-grow">
-              <div v-html="item.content" class="gl-text-base"></div>
+            <div v-safe-html="item.iconHtml" class="gl-flex-shrink-0 gl-mt-0.5 gl-w-4 gl-h-4"></div>
+            <div class="gl-flex-grow gl-min-w-0">
+              <div v-safe-html="item.content" class="gl-text-base"></div>
             </div>
-
             <div class="gl-flex-shrink-0 gl-text-sm gl-text-gray-500">
               {{ item.timestamp }}
             </div>
           </div>
         </li>
       </ol>
-
       <div class="gl-px-6 gl-py-4">
         <a href="/dashboard/activity">{{ __('All activity') }}</a>
       </div>
-- 
GitLab


From 01e01816b7eab7780a00eea84953173d011b8ef7 Mon Sep 17 00:00:00 2001
From: ghosh-abhinaba <aghosh@gitlab.com>
Date: Thu, 24 Jul 2025 20:10:58 +0530
Subject: [PATCH 5/9] chore: updated activity widget

---
 .../homepage/components/todos_widget.vue      | 210 ++++++++----------
 1 file changed, 93 insertions(+), 117 deletions(-)

diff --git a/app/assets/javascripts/homepage/components/todos_widget.vue b/app/assets/javascripts/homepage/components/todos_widget.vue
index ba39134de30346..52b0e198922582 100644
--- a/app/assets/javascripts/homepage/components/todos_widget.vue
+++ b/app/assets/javascripts/homepage/components/todos_widget.vue
@@ -1,117 +1,90 @@
 <script>
-import { computed } from 'vue';
-import { GlCollapsibleListbox, GlTooltipDirective, GlSkeletonLoader } from '@gitlab/ui';
-import emptyTodosAllDoneSvg from '@gitlab/svgs/dist/illustrations/status/status-success-sm.svg';
-import emptyTodosFilteredSvg from '@gitlab/svgs/dist/illustrations/search-sm.svg';
+import { nextTick } from 'vue';
 import { s__ } from '~/locale';
-import {
-  TABS_INDICES,
-  TODO_ACTION_TYPE_BUILD_FAILED,
-  TODO_ACTION_TYPE_DIRECTLY_ADDRESSED,
-  TODO_ACTION_TYPE_ASSIGNED,
-  TODO_ACTION_TYPE_MENTIONED,
-  TODO_ACTION_TYPE_REVIEW_REQUESTED,
-  TODO_ACTION_TYPE_UNMERGEABLE,
-} from '~/todos/constants';
-import TodoItem from '~/todos/components/todo_item.vue';
-import getTodosQuery from '~/todos/components/queries/get_todos.query.graphql';
-import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import VisibilityChangeDetector from './visibility_change_detector.vue';
+import { GlAlert, GlSkeletonLoader } from '@gitlab/ui';
+import * as Sentry from '~/sentry/sentry_browser_wrapper';
+import axios from '~/lib/utils/axios_utils';
+import SafeHtml from '~/vue_shared/directives/safe_html';
+import { localTimeAgo } from '~/lib/utils/datetime_utility';
 
-const N_TODOS = 5;
-
-const FILTER_OPTIONS = [
-  {
-    value: null,
-    text: s__('Todos|All'),
-  },
-  {
-    value: TODO_ACTION_TYPE_ASSIGNED,
-    text: s__('Todos|Assigned'),
-  },
-  {
-    value: `${TODO_ACTION_TYPE_MENTIONED};${TODO_ACTION_TYPE_DIRECTLY_ADDRESSED}`,
-    text: s__('Todos|Mentioned'),
-  },
-  {
-    value: TODO_ACTION_TYPE_BUILD_FAILED,
-    text: s__('Todos|Build failed'),
-  },
-  {
-    value: TODO_ACTION_TYPE_UNMERGEABLE,
-    text: s__('Todos|Unmergeable'),
-  },
-  {
-    value: TODO_ACTION_TYPE_REVIEW_REQUESTED,
-    text: s__('Todos|Review requested'),
-  },
-];
+const MAX_EVENTS = 10;
 
 export default {
-  components: { TodoItem, GlCollapsibleListbox, GlSkeletonLoader, VisibilityChangeDetector },
-  directives: {
-    GlTooltip: GlTooltipDirective,
+  components: {
+    VisibilityChangeDetector,
+    GlAlert,
+    GlSkeletonLoader,
   },
-  provide() {
-    return {
-      currentTab: TABS_INDICES.pending,
-      currentTime: new Date(),
-      currentUserId: computed(() => this.currentUserId),
-    };
+  directives: {
+    SafeHtml,
   },
   data() {
     return {
-      currentUserId: null,
-      filter: null,
-      todos: [],
-      showLoading: true,
+      activityItems: [],
+      isLoading: true,
+      hasError: false,
     };
   },
-  apollo: {
-    todos: {
-      query: getTodosQuery,
-      variables() {
-        return {
-          first: N_TODOS,
-          state: ['pending'],
-          action: this.filter ? this.filter.split(';') : null,
-        };
-      },
-      update({ currentUser: { id, todos: { nodes = [] } } = {} }) {
-        this.currentUserId = id;
-        this.showLoading = false;
-
-        return nodes;
-      },
-      error(error) {
-        Sentry.captureException(error);
-        this.showLoading = false;
-      },
-    },
+  created() {
+    this.reload();
   },
   methods: {
-    reload() {
-      this.showLoading = true;
-      this.$apollo.queries.todos.refetch();
+    async reload() {
+      this.isLoading = true;
+      this.hasError = false;
+
+      try {
+        const { data } = await axios.get(
+          `/users/${encodeURIComponent(gon.current_username)}/activity?limit=${MAX_EVENTS}&is_personal_homepage=1`
+        );
+
+        if (data.html) {
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(data.html, 'text/html');
+          const timestamps = doc.querySelectorAll('.js-timeago');
+          if (timestamps.length) localTimeAgo(timestamps);
+          await nextTick();
+          this.parseActivityItems(doc);
+        }
+      } catch (e) {
+        Sentry.captureException(e);
+        this.hasError = true;
+      } finally {
+        this.isLoading = false;
+      }
     },
-  },
 
-  emptyTodosAllDoneSvg,
-  emptyTodosFilteredSvg,
-  FILTER_OPTIONS,
+    parseActivityItems(doc) {
+      this.activityItems = Array.from(doc.querySelectorAll('li')).map(li => {
+        const timeEl = li.querySelector('.js-timeago, time, [data-original-title]');
+        const timestamp = timeEl?.dataset.originalTitle || timeEl?.textContent || '';
+        const iconEl = li.querySelector('svg, i, [role="img"]');
+        const iconHtml = iconEl?.outerHTML || '';
+        const clone = li.cloneNode(true);
+
+        if (iconEl) {
+          clone.querySelectorAll('svg, i, [role="img"]').forEach(e => e.remove());
+        }
+        clone.querySelectorAll('.js-timeago, time, [data-original-title]').forEach(e => e.remove());
+
+        return {
+          content: clone.innerHTML.trim(),
+          iconHtml,
+          timestamp,
+        };
+      });
+    },
+  },
 };
 </script>
 
 <template>
   <visibility-change-detector @visible="reload">
-    <div class="gl-flex gl-items-center gl-justify-between gl-gap-2">
-      <h4 class="gl-heading-4 gl-my-4 gl-grow">{{ __('To-do items') }}</h4>
-
-      <gl-collapsible-listbox v-model="filter" :items="$options.FILTER_OPTIONS" />
-    </div>
+    <h4 class="gl-heading-4 gl-my-4">{{ __('Activity') }}</h4>
 
     <div class="gl-rounded-lg gl-bg-subtle">
-      <div v-if="showLoading && $apollo.queries.todos.loading" class="gl-p-4">
+      <div v-if="isLoading" class="gl-p-4">
         <gl-skeleton-loader v-for="i in 5" :key="i" :width="200" :height="10">
           <rect x="0" y="0" width="16" height="8" rx="2" ry="2" />
           <rect x="24" y="0" width="174" height="8" rx="2" ry="2" />
@@ -119,35 +92,38 @@ export default {
         </gl-skeleton-loader>
       </div>
 
-      <div
-        v-else-if="!$apollo.queries.todos.loading && !todos.length && !filter"
-        class="gl-flex gl-items-center gl-gap-5 gl-bg-subtle gl-p-4"
-      >
-        <img class="gl-h-11" aria-hidden="true" :src="$options.emptyTodosAllDoneSvg" />
-        <span>
-          <strong>{{ __('Good job!') }}</strong>
-          {{ __('All your to-do items are done.') }}
-        </span>
-      </div>
-      <div
-        v-else-if="!$apollo.queries.todos.loading && !todos.length && filter"
-        class="gl-flex gl-items-center gl-gap-5 gl-bg-subtle gl-p-4"
-      >
-        <img class="gl-h-11" aria-hidden="true" :src="$options.emptyTodosFilteredSvg" />
-        <span>{{ __('Sorry, your filter produced no results') }}</span>
-      </div>
+      <gl-alert v-else-if="hasError" variant="danger" class="gl-m-4">
+        {{ s__('HomepageActivityWidget|The activity feed is not available. Please refresh the page to try again.') }}
+      </gl-alert>
+
+      <p v-else-if="!activityItems.length" class="gl-p-4 gl-text-gray-600" data-testid="empty-state">
+        {{ __('Activity|No recent activity') }}
+      </p>
+
       <ol v-else class="gl-m-0 gl-list-none gl-p-0">
-        <todo-item
-          v-for="todo in todos"
-          :key="todo.id"
-          class="first:gl-rounded-t-lg hover:!gl-bg-strong"
-          :todo="todo"
-          @change="$apollo.queries.todos.refetch()"
-        />
+        <li
+          v-for="(item, idx) in activityItems"
+          :key="idx"
+          class="gl-px-6 gl-py-4 gl-border-b gl-border-subtle hover:!gl-bg-strong"
+          :class="{
+            'first:gl-rounded-t-lg': idx === 0,
+            'last:gl-border-b-0 last:gl-rounded-b-lg': idx === activityItems.length - 1
+          }"
+        >
+          <div class="gl-flex gl-items-start gl-gap-4">
+            <div v-safe-html="item.iconHtml" class="gl-flex-shrink-0 gl-mt-0.5 gl-w-4 gl-h-4"></div>
+            <div class="gl-flex-grow gl-min-w-0">
+              <div v-safe-html="item.content" class="gl-text-base"></div>
+            </div>
+            <div class="gl-flex-shrink-0 gl-text-sm gl-text-gray-500">
+              {{ item.timestamp }}
+            </div>
+          </div>
+        </li>
       </ol>
 
-      <div class="gl-px-5 gl-py-3">
-        <a href="/dashboard/todos">{{ __('All to-do items') }}</a>
+      <div class="gl-px-6 gl-py-4">
+        <a href="/dashboard/activity">{{ __('All activity') }}</a>
       </div>
     </div>
   </visibility-change-detector>
-- 
GitLab


From b70ef10d29d0a527c24d3b6dc1eff0d1afd38db7 Mon Sep 17 00:00:00 2001
From: ghosh-abhinaba <aghosh@gitlab.com>
Date: Thu, 24 Jul 2025 20:14:00 +0530
Subject: [PATCH 6/9] chore: updated activity widget

---
 .../homepage/components/activity_widget.vue   |  48 ++--
 .../homepage/components/todos_widget.vue      | 210 ++++++++++--------
 2 files changed, 148 insertions(+), 110 deletions(-)

diff --git a/app/assets/javascripts/homepage/components/activity_widget.vue b/app/assets/javascripts/homepage/components/activity_widget.vue
index 8882e393379341..52b0e198922582 100644
--- a/app/assets/javascripts/homepage/components/activity_widget.vue
+++ b/app/assets/javascripts/homepage/components/activity_widget.vue
@@ -1,21 +1,26 @@
 <script>
 import { nextTick } from 'vue';
+import { s__ } from '~/locale';
+import VisibilityChangeDetector from './visibility_change_detector.vue';
 import { GlAlert, GlSkeletonLoader } from '@gitlab/ui';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
 import axios from '~/lib/utils/axios_utils';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import { localTimeAgo } from '~/lib/utils/datetime_utility';
-import { s__ } from '~/locale';
-import VisibilityChangeDetector from './visibility_change_detector.vue';
 
 const MAX_EVENTS = 10;
 
 export default {
-  components: { GlAlert, GlSkeletonLoader, VisibilityChangeDetector },
-  directives: { SafeHtml },
+  components: {
+    VisibilityChangeDetector,
+    GlAlert,
+    GlSkeletonLoader,
+  },
+  directives: {
+    SafeHtml,
+  },
   data() {
     return {
-      activityFeedHtml: null,
       activityItems: [],
       isLoading: true,
       hasError: false,
@@ -28,16 +33,17 @@ export default {
     async reload() {
       this.isLoading = true;
       this.hasError = false;
+
       try {
         const { data } = await axios.get(
           `/users/${encodeURIComponent(gon.current_username)}/activity?limit=${MAX_EVENTS}&is_personal_homepage=1`
         );
+
         if (data.html) {
           const parser = new DOMParser();
           const doc = parser.parseFromString(data.html, 'text/html');
           const timestamps = doc.querySelectorAll('.js-timeago');
           if (timestamps.length) localTimeAgo(timestamps);
-          this.activityFeedHtml = doc.body.innerHTML;
           await nextTick();
           this.parseActivityItems(doc);
         }
@@ -48,17 +54,20 @@ export default {
         this.isLoading = false;
       }
     },
+
     parseActivityItems(doc) {
       this.activityItems = Array.from(doc.querySelectorAll('li')).map(li => {
         const timeEl = li.querySelector('.js-timeago, time, [data-original-title]');
-        const timestamp = timeEl
-          ? (timeEl.dataset.originalTitle || timeEl.textContent || timeEl.title)
-          : '';
+        const timestamp = timeEl?.dataset.originalTitle || timeEl?.textContent || '';
         const iconEl = li.querySelector('svg, i, [role="img"]');
-        const iconHtml = iconEl ? iconEl.outerHTML : '';
+        const iconHtml = iconEl?.outerHTML || '';
         const clone = li.cloneNode(true);
-        if (iconEl) clone.querySelectorAll('svg, i, [role="img"]').forEach(e => e.remove());
+
+        if (iconEl) {
+          clone.querySelectorAll('svg, i, [role="img"]').forEach(e => e.remove());
+        }
         clone.querySelectorAll('.js-timeago, time, [data-original-title]').forEach(e => e.remove());
+
         return {
           content: clone.innerHTML.trim(),
           iconHtml,
@@ -73,6 +82,7 @@ export default {
 <template>
   <visibility-change-detector @visible="reload">
     <h4 class="gl-heading-4 gl-my-4">{{ __('Activity') }}</h4>
+
     <div class="gl-rounded-lg gl-bg-subtle">
       <div v-if="isLoading" class="gl-p-4">
         <gl-skeleton-loader v-for="i in 5" :key="i" :width="200" :height="10">
@@ -81,20 +91,23 @@ export default {
           <rect x="182" y="0" width="16" height="8" rx="2" ry="2" />
         </gl-skeleton-loader>
       </div>
+
       <gl-alert v-else-if="hasError" variant="danger" class="gl-m-4">
         {{ s__('HomepageActivityWidget|The activity feed is not available. Please refresh the page to try again.') }}
       </gl-alert>
-      <p v-else-if="!activityFeedHtml" class="gl-p-4 gl-text-gray-600" data-testid="empty-state">
-        {{ s__('Activity|No recent activity') }}
+
+      <p v-else-if="!activityItems.length" class="gl-p-4 gl-text-gray-600" data-testid="empty-state">
+        {{ __('Activity|No recent activity') }}
       </p>
+
       <ol v-else class="gl-m-0 gl-list-none gl-p-0">
         <li
-          v-for="(item, index) in activityItems"
-          :key="index"
+          v-for="(item, idx) in activityItems"
+          :key="idx"
           class="gl-px-6 gl-py-4 gl-border-b gl-border-subtle hover:!gl-bg-strong"
           :class="{
-            'first:gl-rounded-t-lg': index === 0,
-            'last:gl-border-b-0 last:gl-rounded-b-lg': index === activityItems.length - 1
+            'first:gl-rounded-t-lg': idx === 0,
+            'last:gl-border-b-0 last:gl-rounded-b-lg': idx === activityItems.length - 1
           }"
         >
           <div class="gl-flex gl-items-start gl-gap-4">
@@ -108,6 +121,7 @@ export default {
           </div>
         </li>
       </ol>
+
       <div class="gl-px-6 gl-py-4">
         <a href="/dashboard/activity">{{ __('All activity') }}</a>
       </div>
diff --git a/app/assets/javascripts/homepage/components/todos_widget.vue b/app/assets/javascripts/homepage/components/todos_widget.vue
index 52b0e198922582..ba39134de30346 100644
--- a/app/assets/javascripts/homepage/components/todos_widget.vue
+++ b/app/assets/javascripts/homepage/components/todos_widget.vue
@@ -1,90 +1,117 @@
 <script>
-import { nextTick } from 'vue';
+import { computed } from 'vue';
+import { GlCollapsibleListbox, GlTooltipDirective, GlSkeletonLoader } from '@gitlab/ui';
+import emptyTodosAllDoneSvg from '@gitlab/svgs/dist/illustrations/status/status-success-sm.svg';
+import emptyTodosFilteredSvg from '@gitlab/svgs/dist/illustrations/search-sm.svg';
 import { s__ } from '~/locale';
-import VisibilityChangeDetector from './visibility_change_detector.vue';
-import { GlAlert, GlSkeletonLoader } from '@gitlab/ui';
+import {
+  TABS_INDICES,
+  TODO_ACTION_TYPE_BUILD_FAILED,
+  TODO_ACTION_TYPE_DIRECTLY_ADDRESSED,
+  TODO_ACTION_TYPE_ASSIGNED,
+  TODO_ACTION_TYPE_MENTIONED,
+  TODO_ACTION_TYPE_REVIEW_REQUESTED,
+  TODO_ACTION_TYPE_UNMERGEABLE,
+} from '~/todos/constants';
+import TodoItem from '~/todos/components/todo_item.vue';
+import getTodosQuery from '~/todos/components/queries/get_todos.query.graphql';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
-import axios from '~/lib/utils/axios_utils';
-import SafeHtml from '~/vue_shared/directives/safe_html';
-import { localTimeAgo } from '~/lib/utils/datetime_utility';
+import VisibilityChangeDetector from './visibility_change_detector.vue';
 
-const MAX_EVENTS = 10;
+const N_TODOS = 5;
 
-export default {
-  components: {
-    VisibilityChangeDetector,
-    GlAlert,
-    GlSkeletonLoader,
+const FILTER_OPTIONS = [
+  {
+    value: null,
+    text: s__('Todos|All'),
+  },
+  {
+    value: TODO_ACTION_TYPE_ASSIGNED,
+    text: s__('Todos|Assigned'),
+  },
+  {
+    value: `${TODO_ACTION_TYPE_MENTIONED};${TODO_ACTION_TYPE_DIRECTLY_ADDRESSED}`,
+    text: s__('Todos|Mentioned'),
+  },
+  {
+    value: TODO_ACTION_TYPE_BUILD_FAILED,
+    text: s__('Todos|Build failed'),
+  },
+  {
+    value: TODO_ACTION_TYPE_UNMERGEABLE,
+    text: s__('Todos|Unmergeable'),
+  },
+  {
+    value: TODO_ACTION_TYPE_REVIEW_REQUESTED,
+    text: s__('Todos|Review requested'),
   },
+];
+
+export default {
+  components: { TodoItem, GlCollapsibleListbox, GlSkeletonLoader, VisibilityChangeDetector },
   directives: {
-    SafeHtml,
+    GlTooltip: GlTooltipDirective,
   },
-  data() {
+  provide() {
     return {
-      activityItems: [],
-      isLoading: true,
-      hasError: false,
+      currentTab: TABS_INDICES.pending,
+      currentTime: new Date(),
+      currentUserId: computed(() => this.currentUserId),
     };
   },
-  created() {
-    this.reload();
+  data() {
+    return {
+      currentUserId: null,
+      filter: null,
+      todos: [],
+      showLoading: true,
+    };
   },
-  methods: {
-    async reload() {
-      this.isLoading = true;
-      this.hasError = false;
-
-      try {
-        const { data } = await axios.get(
-          `/users/${encodeURIComponent(gon.current_username)}/activity?limit=${MAX_EVENTS}&is_personal_homepage=1`
-        );
-
-        if (data.html) {
-          const parser = new DOMParser();
-          const doc = parser.parseFromString(data.html, 'text/html');
-          const timestamps = doc.querySelectorAll('.js-timeago');
-          if (timestamps.length) localTimeAgo(timestamps);
-          await nextTick();
-          this.parseActivityItems(doc);
-        }
-      } catch (e) {
-        Sentry.captureException(e);
-        this.hasError = true;
-      } finally {
-        this.isLoading = false;
-      }
-    },
-
-    parseActivityItems(doc) {
-      this.activityItems = Array.from(doc.querySelectorAll('li')).map(li => {
-        const timeEl = li.querySelector('.js-timeago, time, [data-original-title]');
-        const timestamp = timeEl?.dataset.originalTitle || timeEl?.textContent || '';
-        const iconEl = li.querySelector('svg, i, [role="img"]');
-        const iconHtml = iconEl?.outerHTML || '';
-        const clone = li.cloneNode(true);
-
-        if (iconEl) {
-          clone.querySelectorAll('svg, i, [role="img"]').forEach(e => e.remove());
-        }
-        clone.querySelectorAll('.js-timeago, time, [data-original-title]').forEach(e => e.remove());
-
+  apollo: {
+    todos: {
+      query: getTodosQuery,
+      variables() {
         return {
-          content: clone.innerHTML.trim(),
-          iconHtml,
-          timestamp,
+          first: N_TODOS,
+          state: ['pending'],
+          action: this.filter ? this.filter.split(';') : null,
         };
-      });
+      },
+      update({ currentUser: { id, todos: { nodes = [] } } = {} }) {
+        this.currentUserId = id;
+        this.showLoading = false;
+
+        return nodes;
+      },
+      error(error) {
+        Sentry.captureException(error);
+        this.showLoading = false;
+      },
+    },
+  },
+  methods: {
+    reload() {
+      this.showLoading = true;
+      this.$apollo.queries.todos.refetch();
     },
   },
+
+  emptyTodosAllDoneSvg,
+  emptyTodosFilteredSvg,
+  FILTER_OPTIONS,
 };
 </script>
 
 <template>
   <visibility-change-detector @visible="reload">
-    <h4 class="gl-heading-4 gl-my-4">{{ __('Activity') }}</h4>
+    <div class="gl-flex gl-items-center gl-justify-between gl-gap-2">
+      <h4 class="gl-heading-4 gl-my-4 gl-grow">{{ __('To-do items') }}</h4>
+
+      <gl-collapsible-listbox v-model="filter" :items="$options.FILTER_OPTIONS" />
+    </div>
 
     <div class="gl-rounded-lg gl-bg-subtle">
-      <div v-if="isLoading" class="gl-p-4">
+      <div v-if="showLoading && $apollo.queries.todos.loading" class="gl-p-4">
         <gl-skeleton-loader v-for="i in 5" :key="i" :width="200" :height="10">
           <rect x="0" y="0" width="16" height="8" rx="2" ry="2" />
           <rect x="24" y="0" width="174" height="8" rx="2" ry="2" />
@@ -92,38 +119,35 @@ export default {
         </gl-skeleton-loader>
       </div>
 
-      <gl-alert v-else-if="hasError" variant="danger" class="gl-m-4">
-        {{ s__('HomepageActivityWidget|The activity feed is not available. Please refresh the page to try again.') }}
-      </gl-alert>
-
-      <p v-else-if="!activityItems.length" class="gl-p-4 gl-text-gray-600" data-testid="empty-state">
-        {{ __('Activity|No recent activity') }}
-      </p>
-
+      <div
+        v-else-if="!$apollo.queries.todos.loading && !todos.length && !filter"
+        class="gl-flex gl-items-center gl-gap-5 gl-bg-subtle gl-p-4"
+      >
+        <img class="gl-h-11" aria-hidden="true" :src="$options.emptyTodosAllDoneSvg" />
+        <span>
+          <strong>{{ __('Good job!') }}</strong>
+          {{ __('All your to-do items are done.') }}
+        </span>
+      </div>
+      <div
+        v-else-if="!$apollo.queries.todos.loading && !todos.length && filter"
+        class="gl-flex gl-items-center gl-gap-5 gl-bg-subtle gl-p-4"
+      >
+        <img class="gl-h-11" aria-hidden="true" :src="$options.emptyTodosFilteredSvg" />
+        <span>{{ __('Sorry, your filter produced no results') }}</span>
+      </div>
       <ol v-else class="gl-m-0 gl-list-none gl-p-0">
-        <li
-          v-for="(item, idx) in activityItems"
-          :key="idx"
-          class="gl-px-6 gl-py-4 gl-border-b gl-border-subtle hover:!gl-bg-strong"
-          :class="{
-            'first:gl-rounded-t-lg': idx === 0,
-            'last:gl-border-b-0 last:gl-rounded-b-lg': idx === activityItems.length - 1
-          }"
-        >
-          <div class="gl-flex gl-items-start gl-gap-4">
-            <div v-safe-html="item.iconHtml" class="gl-flex-shrink-0 gl-mt-0.5 gl-w-4 gl-h-4"></div>
-            <div class="gl-flex-grow gl-min-w-0">
-              <div v-safe-html="item.content" class="gl-text-base"></div>
-            </div>
-            <div class="gl-flex-shrink-0 gl-text-sm gl-text-gray-500">
-              {{ item.timestamp }}
-            </div>
-          </div>
-        </li>
+        <todo-item
+          v-for="todo in todos"
+          :key="todo.id"
+          class="first:gl-rounded-t-lg hover:!gl-bg-strong"
+          :todo="todo"
+          @change="$apollo.queries.todos.refetch()"
+        />
       </ol>
 
-      <div class="gl-px-6 gl-py-4">
-        <a href="/dashboard/activity">{{ __('All activity') }}</a>
+      <div class="gl-px-5 gl-py-3">
+        <a href="/dashboard/todos">{{ __('All to-do items') }}</a>
       </div>
     </div>
   </visibility-change-detector>
-- 
GitLab


From 2a326f28e85d1dc15ac2ea62a63027d5512c30e5 Mon Sep 17 00:00:00 2001
From: ghosh-abhinaba <aghosh@gitlab.com>
Date: Thu, 24 Jul 2025 20:34:05 +0530
Subject: [PATCH 7/9] fix: lint

---
 .../homepage/components/activity_widget.vue   | 36 +++++++++++++------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/homepage/components/activity_widget.vue b/app/assets/javascripts/homepage/components/activity_widget.vue
index 52b0e198922582..919ed143af8518 100644
--- a/app/assets/javascripts/homepage/components/activity_widget.vue
+++ b/app/assets/javascripts/homepage/components/activity_widget.vue
@@ -36,7 +36,7 @@ export default {
 
       try {
         const { data } = await axios.get(
-          `/users/${encodeURIComponent(gon.current_username)}/activity?limit=${MAX_EVENTS}&is_personal_homepage=1`
+          `/users/${encodeURIComponent(gon.current_username)}/activity?limit=${MAX_EVENTS}&is_personal_homepage=1`,
         );
 
         if (data.html) {
@@ -56,7 +56,7 @@ export default {
     },
 
     parseActivityItems(doc) {
-      this.activityItems = Array.from(doc.querySelectorAll('li')).map(li => {
+      this.activityItems = Array.from(doc.querySelectorAll('li')).map((li) => {
         const timeEl = li.querySelector('.js-timeago, time, [data-original-title]');
         const timestamp = timeEl?.dataset.originalTitle || timeEl?.textContent || '';
         const iconEl = li.querySelector('svg, i, [role="img"]');
@@ -64,9 +64,11 @@ export default {
         const clone = li.cloneNode(true);
 
         if (iconEl) {
-          clone.querySelectorAll('svg, i, [role="img"]').forEach(e => e.remove());
+          clone.querySelectorAll('svg, i, [role="img"]').forEach((e) => e.remove());
         }
-        clone.querySelectorAll('.js-timeago, time, [data-original-title]').forEach(e => e.remove());
+        clone
+          .querySelectorAll('.js-timeago, time, [data-original-title]')
+          .forEach((e) => e.remove());
 
         return {
           content: clone.innerHTML.trim(),
@@ -93,26 +95,38 @@ export default {
       </div>
 
       <gl-alert v-else-if="hasError" variant="danger" class="gl-m-4">
-        {{ s__('HomepageActivityWidget|The activity feed is not available. Please refresh the page to try again.') }}
+        {{
+          s__(
+            'HomepageActivityWidget|The activity feed is not available. Please refresh the page to try again.',
+          )
+        }}
       </gl-alert>
 
-      <p v-else-if="!activityItems.length" class="gl-p-4 gl-text-gray-600" data-testid="empty-state">
-        {{ __('Activity|No recent activity') }}
+      <p
+        v-else-if="!activityItems.length"
+        class="gl-p-4 gl-text-gray-600"
+        data-testid="empty-state"
+      >
+        {{
+          s__(
+            'Homepage|Start creating merge requests, pushing code, commenting in issues, and doing other work to view a feed of your activity here.',
+          )
+        }}
       </p>
 
       <ol v-else class="gl-m-0 gl-list-none gl-p-0">
         <li
           v-for="(item, idx) in activityItems"
           :key="idx"
-          class="gl-px-6 gl-py-4 gl-border-b gl-border-subtle hover:!gl-bg-strong"
+          class="gl-border-b gl-border-subtle gl-px-6 gl-py-4 hover:!gl-bg-strong"
           :class="{
             'first:gl-rounded-t-lg': idx === 0,
-            'last:gl-border-b-0 last:gl-rounded-b-lg': idx === activityItems.length - 1
+            'last:gl-rounded-b-lg last:gl-border-b-0': idx === activityItems.length - 1,
           }"
         >
           <div class="gl-flex gl-items-start gl-gap-4">
-            <div v-safe-html="item.iconHtml" class="gl-flex-shrink-0 gl-mt-0.5 gl-w-4 gl-h-4"></div>
-            <div class="gl-flex-grow gl-min-w-0">
+            <div v-safe-html="item.iconHtml" class="gl-mt-0.5 gl-h-4 gl-w-4 gl-flex-shrink-0"></div>
+            <div class="gl-min-w-0 gl-flex-grow">
               <div v-safe-html="item.content" class="gl-text-base"></div>
             </div>
             <div class="gl-flex-shrink-0 gl-text-sm gl-text-gray-500">
-- 
GitLab


From ae79becf974aa7378bb2f3ffcd0d10d4110463ff Mon Sep 17 00:00:00 2001
From: ghosh-abhinaba <aghosh@gitlab.com>
Date: Thu, 24 Jul 2025 20:35:17 +0530
Subject: [PATCH 8/9] fix: lint

---
 .../javascripts/homepage/components/activity_widget.vue  | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/app/assets/javascripts/homepage/components/activity_widget.vue b/app/assets/javascripts/homepage/components/activity_widget.vue
index 919ed143af8518..095a002244599f 100644
--- a/app/assets/javascripts/homepage/components/activity_widget.vue
+++ b/app/assets/javascripts/homepage/components/activity_widget.vue
@@ -34,6 +34,15 @@ export default {
       this.isLoading = true;
       this.hasError = false;
 
+      /**
+       * As part of this widget's first iteration, we have slightly changed how the `UsersController`
+       * controller behaves so that it returns an empty response when the user has no activity and
+       * the `is_personal_homepage` param is present. This is a temporary workaround until we can
+       * move away from an HTML endpoint and handle empty states more gracefully in the client.
+       * We'll need to remove the `is_personal_homepage` logic from `UsersController` once we have
+       * a proper GraphQL endpoint here.
+       */
+
       try {
         const { data } = await axios.get(
           `/users/${encodeURIComponent(gon.current_username)}/activity?limit=${MAX_EVENTS}&is_personal_homepage=1`,
-- 
GitLab


From e2441756ad461dc03b01fc7dc87e7a61da1a0ae4 Mon Sep 17 00:00:00 2001
From: ghosh-abhinaba <aghosh@gitlab.com>
Date: Thu, 24 Jul 2025 20:36:03 +0530
Subject: [PATCH 9/9] fix: lint

---
 .../homepage/components/activity_widget.vue     | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/homepage/components/activity_widget.vue b/app/assets/javascripts/homepage/components/activity_widget.vue
index 095a002244599f..d52acaa3f1fa34 100644
--- a/app/assets/javascripts/homepage/components/activity_widget.vue
+++ b/app/assets/javascripts/homepage/components/activity_widget.vue
@@ -34,16 +34,15 @@ export default {
       this.isLoading = true;
       this.hasError = false;
 
-      /**
-       * As part of this widget's first iteration, we have slightly changed how the `UsersController`
-       * controller behaves so that it returns an empty response when the user has no activity and
-       * the `is_personal_homepage` param is present. This is a temporary workaround until we can
-       * move away from an HTML endpoint and handle empty states more gracefully in the client.
-       * We'll need to remove the `is_personal_homepage` logic from `UsersController` once we have
-       * a proper GraphQL endpoint here.
-       */
-
       try {
+        /**
+         * As part of this widget's first iteration, we have slightly changed how the `UsersController`
+         * controller behaves so that it returns an empty response when the user has no activity and
+         * the `is_personal_homepage` param is present. This is a temporary workaround until we can
+         * move away from an HTML endpoint and handle empty states more gracefully in the client.
+         * We'll need to remove the `is_personal_homepage` logic from `UsersController` once we have
+         * a proper GraphQL endpoint here.
+         */
         const { data } = await axios.get(
           `/users/${encodeURIComponent(gon.current_username)}/activity?limit=${MAX_EVENTS}&is_personal_homepage=1`,
         );
-- 
GitLab