Filter System Revamp

src/app/app.component.html

@@ -158,7 +158,7 @@ <h2>SYCL.tech is a community driven, open source effort to help developers keep
           projects, news, events and more. If you have something to share, please do so using the buttons below. If
           you would like to help with the site, please get involved!</h2>
         <div class="buttons">
-          <a class="button" href="https://github.com/codeplaysoftware/sycl.tech-content"target="_blank" rel="noopener">
+          <a class="button" href="https://github.com/codeplaysoftware/sycl.tech-content" target="_blank" rel="noopener">
             <span class="material-symbols-outlined">update</span>Contribute Content</a>
           <a class="button" href="https://github.com/codeplaysoftware/sycl.tech-website" target="_blank" rel="noopener">
             <span class="material-symbols-outlined">update</span>Edit Page</a>

src/app/app.component.scss

@@ -241,7 +241,6 @@ nav {
 
 footer {
   padding: 0;
-  font-size: 1rem;
   background: linear-gradient(90deg, transparent 50%, #ffeae5 100%);
 
   .top {
@@ -267,7 +266,7 @@ footer {
 
       h2 {
         font-weight: normal;
-        font-size: 1.2rem;
+        font-size: 1rem;
         opacity: .6;
       }
 

src/app/pages/calendar/shared/event-calendar/event-viewer-popup/event-viewer-popup.component.html

@@ -17,7 +17,7 @@ <h1 [innerHTML]="calendarItem.event.title"></h1>
         </li>
         <li title="End Time">
           <div><span class="material-symbols-outlined">stop_circle</span></div>
-          <div>{{ calendarItem.event.ends.toDateString() | date:'MMM d, y, h:mm a z' }}</div>
+          <div>{{ calendarItem.event.ends | date:'MMM d, y, h:mm a z' }}</div>
         </li>
         @if (calendarItem.event.location) {
           <li title="Location">

src/app/pages/changed/change-start-date-popup/change-start-date.component.html

@@ -1,13 +1,13 @@
 <header>
   <div>
     <span class="material-symbols-outlined popup-icon">event</span>
-    <h1>Set Start Date</h1>
+    <h1>When Were You Last Here?</h1>
 
     @if (noLastVisit()) {
       <h2>You've not been here before.</h2>
     }
 
-    <h2>Please set a start date that we can use to determine what has changed.</h2>
+    <h2>Please set the date that you were last here so we can show you what has changed.</h2>
   </div>
 </header>
 

src/app/pages/changed/changed.component.ts

@@ -113,7 +113,7 @@ export class ChangedComponent implements OnInit {
     protected platformService: PlatformService,
     protected popupService: PopupService
   ) {
-    this.title.setTitle('Digest - SYCL.tech');
+    this.title.setTitle('What Has Changed - SYCL.tech');
 
     // Compute the quick links signal
     this.quickLinks = computed(() => {

src/app/pages/cookies/cookies.component.ts

@@ -21,7 +21,6 @@ import { CommonModule } from '@angular/common';
 import { environment } from '../../../environments/environment';
 import { Title } from '@angular/platform-browser';
 import { SafeStorageService } from '../../shared/services/safe-storage.service';
-import { CookieAcceptanceComponent } from './shared/cookie-acceptance-popup/cookie-acceptance.component';
 import { RouterLink } from '@angular/router';
 
 @Component({

src/app/pages/ecosystem/projects/projects.component.html

@@ -2,8 +2,8 @@
   <div class="wrapper">
     <st-filter-container
         collectionName="Project"
-        [(filterGroups)]="filtersGroups"
-        (filterGroupsChange)="onFiltersGroupsChanged()"
+        [(filterGroups)]="filters"
+        (filterGroupsChange)="onFiltersChanged()"
         [state]="state()"
         [totalResultCount]="totalItemCount"
         [filteredResultCount]="filteredItemCount"

src/app/pages/ecosystem/projects/shared/project-widget/project-view-popup/project-view-popup.component.html

@@ -10,7 +10,8 @@ <h2>{{ project.description }}</h2>
           <st-tag
               [title]="tag"
               [selected]="true"
-              [allowSelection]="false"></st-tag>
+              [allowSelection]="false"
+              (click)="onTagClicked(tag)"></st-tag>
         }
       </div>
     </div>

src/app/pages/ecosystem/projects/shared/project-widget/project-view-popup/project-view-popup.component.ts

@@ -29,12 +29,13 @@ import {
 import { MarkdownComponent } from 'ngx-markdown';
 import { LoadingState } from '../../../../../../shared/LoadingState';
 import { LoadingComponent } from '../../../../../../shared/components/loading/loading.component';
-import { RouterLink } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { CopyInputComponent } from '../../../../../../shared/components/copy-input/copy-input.component';
 import {
   ContributorAvatarComponent
 } from '../../../../../../shared/components/contributor-avatar/contributor-avatar.component';
 import { MultiDateComponent } from '../../../../../../shared/components/multi-date/multi-date.component';
+import { FilterManager, UITagGroup } from '../../../../../../shared/components/filter-result-layout/FilterManager';
 
 @Component({
   selector: 'st-project-view-popup',
@@ -70,10 +71,14 @@ export class ProjectViewPopupComponent {
    * Constructor.
    * @param popupReference
    * @param projectService
+   * @param activatedRoute
+   * @param router
    */
   constructor(
     @Inject('POPUP_DATA') protected popupReference: PopupReference,
     protected projectService: ProjectService,
+    protected activatedRoute: ActivatedRoute,
+    protected router: Router
   ) {
     this.project = popupReference.data['project'];
 
@@ -89,4 +94,17 @@ export class ProjectViewPopupComponent {
       take(1)
     ).subscribe()
   }
+
+  /**
+   * Called when a user clicks a tag.
+   */
+  protected onTagClicked(tag: string) {
+    const tagFilter = new UITagGroup('tags');
+    tagFilter.add(tag, true);
+
+    this.router.navigate(['/ecosystem/projects'], {
+      relativeTo: this.activatedRoute,
+      queryParams: FilterManager.convertFiltersToParams([tagFilter])
+    }).then();
+  }
 }

src/app/pages/ecosystem/projects/shared/project-widget/project-widget.component.scss

@@ -1,5 +1,7 @@
 :host {
   --header-color: #fff0ed;
+  all: initial;
+  font: inherit;
 
   :host-context(.dark-mode) {
     --header-color: #2d2a29;

src/app/pages/ecosystem/research/research.component.html

@@ -2,8 +2,8 @@
   <div class="wrapper">
     <st-filter-container
         collectionName="Research Paper"
-        [(filterGroups)]="filtersGroups"
-        (filterGroupsChange)="onFiltersGroupsChanged()"
+        [(filterGroups)]="filters"
+        (filterGroupsChange)="onFiltersChanged()"
         [state]="state()"
         [totalResultCount]="totalItemCount"
         [filteredResultCount]="filteredItemCount"