Add What's New/Digest Functionality & Storage Updates

src/app/app.component.html

@@ -145,6 +145,7 @@
   </div>
 </nav>
 <main>
+  <st-alerts></st-alerts>
   <router-outlet></router-outlet>
   <st-cookie-acceptance></st-cookie-acceptance>
 </main>
@@ -173,6 +174,7 @@ <h1>Network</h1>
       <div>
         <h1>Useful Links</h1>
         <ul>
+          <li><a routerLink="/changed">What's Changed?</a></li>
           <li><a routerLink="/cookies">Cookie Policy</a></li>
           <li><a routerLink="/privacy">Privacy Policy</a></li>
           <li><a routerLink="/settings">Settings</a></li>

src/app/app.component.scss

@@ -4,6 +4,7 @@ nav {
   box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, .1);
   padding: 0 2rem;
   position: relative;
+  z-index: 999;
 
   input {
     display: none;

src/app/app.component.ts

@@ -33,11 +33,12 @@ import { SiteWideSearchComponent } from './shared/components/site-wide-search/si
 import { environment } from '../environments/environment';
 import { PopupService } from './shared/components/popup/popup.service';
 import { SearchComponent } from './shared/components/search/search.component';
-import { StateService } from './shared/services/state.service';
 import { map, Subscription } from 'rxjs';
 import { CookieAcceptanceComponent } from './pages/cookies/shared/cookie-acceptance-popup/cookie-acceptance.component';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { PlatformService } from './shared/services/platform.service';
+import { SafeStorageService } from './shared/services/safe-storage.service';
+import { AlertsComponent } from './shared/components/site-wide-alert/alerts.component';
 
 @Component({
   selector: 'app-root',
@@ -50,7 +51,8 @@ import { PlatformService } from './shared/services/platform.service';
     NgOptimizedImage,
     SearchComponent,
     CookieAcceptanceComponent,
-    NgClass
+    NgClass,
+    AlertsComponent
   ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
@@ -84,24 +86,29 @@ export class AppComponent implements OnDestroy {
   protected enableDarkModeSwitch: WritableSignal<boolean> = signal(false);
 
   /**
-   * State service subscription.
+   * Subscription used for storage changes.
    * @protected
    */
-  protected state$: Subscription | undefined;
+  protected storageSubscription: Subscription | undefined;
 
   /**
    * Constructor.
+   * @param document
+   * @param renderer
+   * @param popupService
+   * @param safeStorageService
+   * @param platformService
    */
   constructor(
     @Inject(DOCUMENT) protected document: Document,
     protected renderer: Renderer2,
     protected popupService: PopupService,
-    protected stateService: StateService,
+    protected safeStorageService: SafeStorageService,
     protected platformService: PlatformService,
   ) {
     if (this.platformService.isClient()) {
-      this.darkModeEnabled = toSignal(this.stateService.getObservable().pipe(
-        map((state) => state.darkModeEnabled),
+      this.darkModeEnabled = toSignal(this.safeStorageService.observe().pipe(
+        map((state) => state['st-dark-mode-enabled']),
       ), { initialValue: false });
 
       effect(() => {
@@ -112,10 +119,10 @@ export class AppComponent implements OnDestroy {
         }
       });
 
-      this.state$ = this.stateService.getObservable().subscribe((state) => {
+      this.storageSubscription = this.safeStorageService.observe().subscribe((state) => {
         const fathomTrackers = this.document.documentElement.getElementsByClassName('fathom-tracking-script');
 
-        if (state.enableTracking && fathomTrackers.length === 0) {
+        if (state['st-enable-tracking'] && fathomTrackers.length === 0) {
           // Add fathom Analytics
           const fathom = document.createElement('script');
           fathom.setAttribute('class', 'fathom-tracking-script');
@@ -126,16 +133,16 @@ export class AppComponent implements OnDestroy {
 
           // Add to dom
           this.document.head.appendChild(fathom);
-        } else if (!state.enableTracking && fathomTrackers.length > 0) {
+        } else if (!state['st-enable-tracking'] && fathomTrackers.length > 0) {
           fathomTrackers[0].remove();
         }
 
-        this.enableDarkModeSwitch.set(state.cookiesAccepted ? state.cookiesAccepted : false);
+        this.enableDarkModeSwitch.set(this.safeStorageService.allowed());
       });
     }
 
-    this.darkModeEnabled = toSignal(this.stateService.getObservable().pipe(
-      map((state) => state.darkModeEnabled)
+    this.darkModeEnabled = toSignal(this.safeStorageService.observe().pipe(
+      map((state) => state['st-dark-mode-enabled'])
     ), { initialValue: false });
 
     effect(() => {
@@ -151,7 +158,7 @@ export class AppComponent implements OnDestroy {
    * @inheritDoc
    */
   ngOnDestroy() {
-    this.state$?.unsubscribe();
+    this.storageSubscription?.unsubscribe();
   }
 
   /**
@@ -163,7 +170,7 @@ export class AppComponent implements OnDestroy {
       return ;
     }
 
-    this.stateService.setDarkMode(!this.darkModeEnabled());
+    this.safeStorageService.save('st-dark-mode-enabled', !this.darkModeEnabled());
   }
 
   /**

src/app/app.config.ts

@@ -32,6 +32,7 @@ import { TitleCasePipe } from '@angular/common';
 import { httpCacheInterceptor } from './http-cache.interceptor';
 import { appLegacyRoutes } from './app.legacy-routes';
 import { provideMarkdown } from 'ngx-markdown';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
 const scrollConfig: InMemoryScrollingOptions = {
   scrollPositionRestoration: 'top',
@@ -88,5 +89,6 @@ export const appConfig: ApplicationConfig = {
     ),
     TitleCasePipe,
     provideMarkdown(),
+    provideAnimations()
   ]
 };

src/app/app.routes.ts

@@ -36,6 +36,7 @@ import { CookiesComponent } from './pages/cookies/cookies.component';
 import { PrivacyComponent } from './pages/privacy/privacy.component';
 import { SettingsComponent } from './pages/settings/settings.component';
 import { Error404Component } from './pages/404/error-404.component';
+import { ChangedComponent } from './pages/changed/changed.component';
 
 export const routes: Routes = [
   {
@@ -47,6 +48,10 @@ export const routes: Routes = [
     path: 'playground',
     component: PlaygroundComponent
   },
+  {
+    path: 'changed',
+    component: ChangedComponent
+  },
   {
     path: 'getting-started',
     component: GettingStartedComponent

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

@@ -0,0 +1,30 @@
+<header>
+  <div>
+    <span class="material-symbols-outlined popup-icon">event</span>
+    <h1>Set Start Date</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>
+  </div>
+</header>
+
+<main>
+  <article>
+    <div>
+      <input type="date"
+             value="{{ startDate() | date: 'yyyy-MM-dd' }}"
+             (change)="onDateChanged($event)" />
+    </div>
+    @if (errorMessage(); as message) {
+      <div class="error" [innerHTML]="message"></div>
+    }
+  </article>
+  <footer>
+    <a class="button centered cancel" (click)="onClose()">
+      <span class="material-symbols-outlined">close</span> Close
+    </a>
+  </footer>
+</main>

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

@@ -0,0 +1,37 @@
+:host {
+  @media screen and (min-width: 800px) {
+    width: 100vw !important;
+  }
+
+  header {
+    h2 {
+      font-weight: normal;
+      opacity: .7;
+    }
+
+    div {
+      text-align: center;
+    }
+  }
+
+  input {
+    display: block;
+    width: 100%;
+    padding: 1.5rem;
+    border: var(--border-default);
+    border-radius: var(--border-radius);
+    background-color: transparent;
+    color: var(--text-color);
+    font-family: inherit;
+    font-size: 1.2rem;
+  }
+
+  .error {
+    background-color: #ffd2d2;
+    padding: 2rem;
+    text-align: center;
+    color: red;
+    margin-top: 1rem;
+    border-radius: var(--border-radius);
+  }
+}

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

@@ -0,0 +1,106 @@
+/*---------------------------------------------------------------------------------------------
+ *
+ *  Copyright (C) Codeplay Software Ltd.
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ *
+ *--------------------------------------------------------------------------------------------*/
+
+import { ChangeDetectionStrategy, Component, Inject, signal, Signal, WritableSignal } from '@angular/core';
+import { DatePipe, NgOptimizedImage } from '@angular/common';
+import { PopupReference } from '../../../shared/components/popup/popup.service';
+
+@Component({
+  selector: 'st-change-start-date',
+  standalone: true,
+  templateUrl: './change-start-date.component.html',
+  imports: [
+    NgOptimizedImage,
+    DatePipe
+  ],
+  styleUrls: [
+    '../../../shared/components/popup/layouts/large-top-header.scss',
+    './change-start-date.component.scss'
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ChangeStartDateComponent {
+  protected readonly noLastVisit: Signal<boolean>;
+  protected readonly errorMessage: WritableSignal<string> = signal('');
+  protected readonly startDate: Signal<Date>;
+
+  /**
+   * Constructor.
+   * @param popupReference
+   */
+  constructor(
+    @Inject('POPUP_DATA') protected popupReference: PopupReference,
+  ) {
+    if (this.popupReference.data) {
+      this.noLastVisit = signal(false);
+      this.startDate = signal(new Date(this.popupReference.data));
+    } else {
+      this.noLastVisit = signal(true);
+
+      const dateDateTime = new Date();
+      dateDateTime.setMonth(dateDateTime.getMonth() - 5);
+      dateDateTime.setDate(1);
+
+      // Set a default date, just in case we can't load one successfully
+      this.startDate = signal(dateDateTime);
+    }
+  }
+
+  /**
+   * Called when the date selector changes.
+   * @param event
+   */
+  onDateChanged(event: any) {
+    const selectedDate: any = new Date(event.target.value);
+    const currentDate = new Date();
+
+    if (isNaN(selectedDate)) {
+      this.errorMessage.set('Please ensure that the date is in a correct format.');
+      return;
+    }
+
+    if (ChangeStartDateComponent.monthDifference(selectedDate, currentDate) > 6) {
+      this.errorMessage.set('You cannot pick a date that is more than six months from the current date.');
+      return;
+    }
+
+    if (selectedDate > currentDate) {
+      this.errorMessage.set('You cannot set a date that is in the future, please choose an earlier date.');
+      return;
+    }
+
+    this.popupReference.close(selectedDate);
+  }
+
+  /**
+   * Called when the user clicks on the cancel button.
+   */
+  onClose() {
+    this.popupReference.close(this.startDate());
+  }
+
+  /**
+   * Calculate the month difference between two dates.
+   * @param dateFrom
+   * @param dateTo
+   */
+  public static monthDifference(dateFrom: Date, dateTo: Date): number {
+    return dateTo.getMonth() - dateFrom.getMonth() +
+      (12 * (dateTo.getFullYear() - dateFrom.getFullYear()))
+  }
+}