refactor(my-activity): restyle filters card with settings-style row layout and responsive controls

Author: Diogo-Ferraz

src/app/features/activity/components/my-activity/my-activity.component.html

@@ -74,13 +74,19 @@ <h3>Activity Timeline</h3>
 
     <p-card class="activity-filters-card">
       <div class="activity-filters-card__header">
-        <h3>Filters</h3>
+        <div>
+          <h3>Filters</h3>
+          <p>Narrow activity by type or keywords.</p>
+        </div>
         <button pButton type="button" class="p-button-text p-button-sm" icon="pi pi-filter-slash" label="Clear" (click)="clearFilters()"></button>
       </div>
 
       <div class="filters-form">
-        <div class="field">
-          <label for="typeFilter">Event Type</label>
+        <div class="filter-row">
+          <div class="filter-row__meta">
+            <label for="typeFilter">Event Type</label>
+            <small>Pick an activity category.</small>
+          </div>
           <p-dropdown
             inputId="typeFilter"
             [options]="typeOptions"
@@ -91,15 +97,24 @@ <h3>Filters</h3>
           </p-dropdown>
         </div>
 
-        <div class="field">
-          <label for="searchFilter">Search</label>
-          <span class="filter-search">
+        <div class="filter-row">
+          <div class="filter-row__meta">
+            <label for="searchFilter">Search</label>
+            <small>Project, task, or action keywords.</small>
+          </div>
+          <span class="filter-search filter-search--row">
             <i class="pi pi-search"></i>
             <input id="searchFilter" pInputText type="text" [(ngModel)]="search" placeholder="Project, task, or action" />
           </span>
         </div>
 
-        <button pButton type="button" icon="pi pi-refresh" label="Refresh" class="p-button-outlined" [loading]="isLoading" (click)="refresh()"></button>
+        <div class="filter-row filter-row--action">
+          <div class="filter-row__meta">
+            <label>Data</label>
+            <small>Reload timeline from server.</small>
+          </div>
+          <button pButton type="button" icon="pi pi-refresh" label="Refresh" class="p-button-outlined" [loading]="isLoading" (click)="refresh()"></button>
+        </div>
       </div>
     </p-card>
   </div>

src/app/features/activity/components/my-activity/my-activity.component.scss

@@ -107,14 +107,21 @@
   color: var(--text-color-secondary);
 }
 
+.activity-filters-card__header p {
+  margin: 0.25rem 0 0;
+  color: var(--text-color-secondary);
+  font-size: 0.82rem;
+}
+
 .activity-feed-card__header,
 .activity-filters-card__header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   padding-bottom: 0.85rem;
   border-bottom: 1px solid var(--surface-border);
   margin-bottom: 0.2rem;
+  gap: 0.75rem;
 }
 
 .activity-error {
@@ -181,18 +188,41 @@
 .filters-form {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.75rem;
 }
 
-.field {
+.filter-row {
+  border: 1px solid var(--surface-border);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--surface-100) 65%, transparent);
+  padding: 0.72rem 0.78rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.85rem;
+}
+
+.filter-row--action {
+  background: color-mix(in srgb, var(--surface-100) 58%, transparent);
+}
+
+.filter-row__meta {
   display: flex;
   flex-direction: column;
-  gap: 0.35rem;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+.filter-row__meta label {
+  color: var(--text-color);
+  font-size: 0.86rem;
+  font-weight: 600;
 }
 
-.field label {
-  font-size: 0.85rem;
+.filter-row__meta small {
   color: var(--text-color-secondary);
+  font-size: 0.76rem;
+  line-height: 1.3;
 }
 
 .filter-search {
@@ -201,6 +231,11 @@
   align-items: center;
 }
 
+.filter-search--row {
+  width: min(17rem, 100%);
+  flex: 0 0 min(17rem, 100%);
+}
+
 .filter-search i {
   position: absolute;
   left: 0.6rem;
@@ -212,6 +247,11 @@
   padding-left: 2rem;
 }
 
+:host ::ng-deep .filters-form .p-dropdown {
+  width: min(17rem, 100%);
+  flex: 0 0 min(17rem, 100%);
+}
+
 .empty-state {
   flex: 1;
   min-height: 10rem;
@@ -262,4 +302,20 @@
   .activity-kpis {
     grid-template-columns: 1fr;
   }
+
+  .filter-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.65rem;
+  }
+
+  .filter-search--row {
+    width: 100%;
+    flex: 0 0 auto;
+  }
+
+  :host ::ng-deep .filters-form .p-dropdown {
+    width: 100%;
+    flex: 0 0 auto;
+  }
 }