[CORE-8055] Add activities search bar for filtering by name and description

projects/v3/src/app/pages/home/home.page.html

@@ -135,11 +135,42 @@
 <ng-template #activityList>
   <h3 class="for-accessibility"
     i18n>Activity list</h3>
+
+  <div class="activity-search-container">
+    <ion-searchbar [(ngModel)]="activitySearchText"
+      (ionInput)="filterActivities()"
+      (ionClear)="clearSearch()"
+      placeholder="Filter by activity title or description"
+      i18n-placeholder
+      mode="md"
+      debounce="300"
+      animated="true"
+      aria-label="Filter activities by title or description"
+      i18n-aria-label>
+    </ion-searchbar>
+
+    <div *ngIf="activitySearchText && filteredMilestones"
+      class="search-results-info"
+      role="status"
+      aria-live="polite">
+      <ion-text color="medium"
+        class="caption">
+        <ng-container *ngIf="getFilteredActivityCount() > 0"
+          i18n>
+          Showing {{ getFilteredActivityCount() }} {{ getFilteredActivityCount() === 1 ? 'activity' : 'activities' }}
+        </ng-container>
+      </ion-text>
+    </div>
+  </div>
+
   <div #activities
     id="activity-list-item"
-    *ngIf="milestones !== null; else loadingMilestones">
-    <ng-container *ngIf="milestones?.length > 0; else emptyMilestones">
-      <ng-container *ngFor="let milestone of milestones">
+    *ngIf="milestones !== null; else loadingMilestones"
+    role="region"
+    [attr.aria-label]="activitySearchText ? 'Filtered activity list' : 'Activity list'"
+    i18n-aria-label>
+    <ng-container *ngIf="filteredMilestones?.length > 0; else emptyMilestones">
+      <ng-container *ngFor="let milestone of filteredMilestones">
         <ion-item class="headline-4 milestone-name"
           [ngClass]="{'locked': milestone.isLocked}"
           lines="none"
@@ -347,8 +378,13 @@ <h4 class="headline-4" i18n>Skill Strength</h4>
     aria-live="polite">
     <ion-label>
       <p class="body-1"
+        *ngIf="!activitySearchText"
         i18n>No activities available at the moment.</p>
-      <ion-button (click)="updateDashboard()"
+      <p class="body-1"
+        *ngIf="activitySearchText"
+        i18n>No activities found matching "{{ activitySearchText }}".</p>
+      <ion-button *ngIf="!activitySearchText"
+        (click)="updateDashboard()"
         fill="clear"
         size="small"
         aria-label="Retry loading activities" i18n-aria-label>
@@ -357,6 +393,16 @@ <h4 class="headline-4" i18n>Skill Strength</h4>
           aria-hidden="true"></ion-icon>
         <span i18n>Retry</span>
       </ion-button>
+      <ion-button *ngIf="activitySearchText"
+        (click)="clearSearch()"
+        fill="clear"
+        size="small"
+        aria-label="Clear search filter" i18n-aria-label>
+        <ion-icon name="close"
+          slot="start"
+          aria-hidden="true"></ion-icon>
+        <span i18n>Clear Filter</span>
+      </ion-button>
     </ion-label>
   </ion-item>
 </ng-template>

projects/v3/src/app/pages/home/home.page.scss

@@ -76,6 +76,31 @@ ion-content.scrollable-desktop {
   display: block;
 }
 
+.activity-search-container {
+  padding: 8px 0;
+  margin-bottom: 8px;
+
+  ion-searchbar {
+    --background: var(--ion-color-light);
+    --border-radius: 8px;
+    --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    padding: 0;
+
+    &::part(clear-button) {
+      color: var(--ion-color-primary);
+    }
+  }
+
+  .search-results-info {
+    padding: 4px 16px;
+    text-align: center;
+
+    ion-text {
+      font-size: 0.875rem;
+    }
+  }
+}
+
 
 
 .ontrack-header {