feat(search-filters): modernize results cards UI with member details, owner badges, and project metadata rows

Author: Diogo-Ferraz

src/app/features/search/components/search-filters/search-filters.component.html

@@ -52,7 +52,6 @@ <h2>Search & Filters</h2>
           <i class="pi pi-sliders-h"></i>
           <span>Filter Workspace</span>
         </div>
-        <small>Tune project, user, ownership, and task state in one place.</small>
       </div>
 
       <div class="search-controls">
@@ -127,26 +126,52 @@ <h2>Search & Filters</h2>
 
   <div class="results-grid">
     <p-card styleClass="results-card">
-      <div class="results-card__title">Users In Project</div>
+      <div class="results-card__title">
+        <h3>Users In Project</h3>
+        <p>Members available in the selected project.</p>
+      </div>
       <div class="results-card__body">
         <ul class="simple-list">
           <li *ngFor="let member of projectMembers">
-            <p-avatar [label]="member.displayName.charAt(0)" shape="circle"></p-avatar>
-            <span>{{ member.displayName }}</span>
+            <div class="simple-list__meta">
+              <p-avatar [label]="member.displayName.charAt(0)" shape="circle"></p-avatar>
+              <div class="simple-list__text">
+                <span>{{ member.displayName }}</span>
+                <small>{{ member.email || 'No email available' }}</small>
+              </div>
+            </div>
+            <p-tag *ngIf="member.isOwner" value="Owner" severity="info"></p-tag>
           </li>
           <li *ngIf="projectMembers.length === 0" class="muted">No users found.</li>
         </ul>
       </div>
     </p-card>
 
     <p-card styleClass="results-card">
-      <div class="results-card__title">Projects For User</div>
-      <div class="muted mb-2" *ngIf="selectedUserId">Showing projects for {{ selectedUserName }}</div>
+      <div class="results-card__title">
+        <h3>Projects For User</h3>
+        <p *ngIf="selectedUserId; else projectsHint">Showing projects for {{ selectedUserName }}.</p>
+        <ng-template #projectsHint>
+          <p>Select a user to list matching projects.</p>
+        </ng-template>
+      </div>
       <div class="results-card__body">
         <ul class="simple-list">
-          <li *ngFor="let project of userProjects">
-            <i class="pi pi-folder text-color-secondary"></i>
-            <span>{{ project.name }}</span>
+          <li *ngFor="let project of userProjects" class="project-list-item">
+            <div class="simple-list__meta simple-list__meta--top">
+              <i class="pi pi-folder text-color-secondary"></i>
+              <div class="simple-list__text">
+                <span>{{ project.name }}</span>
+              </div>
+            </div>
+            <div class="project-meta-chips project-meta-chips--below-icon">
+              <span class="project-meta-chip">
+                Created {{ project.createdAt | date: 'mediumDate' }} by {{ project.createdByUserName || 'Unknown' }}
+              </span>
+              <span class="project-meta-chip">
+                Updated {{ project.lastModifiedAt | date: 'mediumDate' }} by {{ project.lastModifiedByUserName || 'Unknown' }}
+              </span>
+            </div>
           </li>
           <li *ngIf="userProjects.length === 0" class="muted">No matching projects.</li>
         </ul>

src/app/features/search/components/search-filters/search-filters.component.scss

@@ -53,23 +53,17 @@
 
 .filters-shell__header {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.6rem;
+  align-items: flex-start;
+  gap: 0.5rem;
   margin-bottom: 0.75rem;
 }
 
 .filters-shell__title {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
-  font-weight: 600;
-}
-
-.filters-shell__header small {
-  color: var(--text-color-secondary);
 }
+.filters-shell__title span { font-weight: 600; }
 
 .search-controls {
   display: grid;
@@ -128,13 +122,23 @@
 }
 
 .results-card__title {
+  margin-bottom: 0.75rem;
+}
+
+.results-card__title h3 {
+  margin: 0;
   font-size: 1rem;
   font-weight: 600;
-  margin-bottom: 0.5rem;
+}
+
+.results-card__title p {
+  margin: 0.25rem 0 0;
+  color: var(--text-color-secondary);
+  font-size: 0.82rem;
 }
 
 .results-card__body {
-  max-height: 11.5rem;
+  max-height: 12.2rem;
   overflow-y: auto;
   padding-right: 0.2rem;
 }
@@ -149,11 +153,79 @@
 }
 
 .simple-list li {
+  border: 1px solid var(--surface-border);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--surface-100) 65%, transparent);
+  padding: 0.62rem 0.72rem;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.6rem;
+}
+
+.project-list-item {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 0.45rem;
+}
+
+.simple-list__meta {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
 }
 
+.simple-list__meta--top {
+  align-items: flex-start;
+}
+
+.simple-list__text {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.simple-list__text span {
+  color: var(--text-color);
+  line-height: 1.2;
+}
+
+.simple-list__text small {
+  color: var(--text-color-secondary);
+  font-size: 0.76rem;
+  line-height: 1.2;
+}
+
+.project-meta-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.project-meta-chips--below-icon {
+  width: 100%;
+  justify-content: flex-start;
+}
+
+.project-meta-chip {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--surface-border);
+  border-radius: 999px;
+  padding: 0.16rem 0.46rem;
+  font-size: 0.72rem;
+  color: var(--text-color-secondary);
+  background: color-mix(in srgb, var(--surface-100) 75%, transparent);
+  line-height: 1.25;
+}
+
+.simple-list li.muted {
+  border-style: dashed;
+  justify-content: center;
+}
+
 .tasks-meta {
   display: flex;
   justify-content: space-between;