User inactivity can be defined as a period during which a user does not interact with the application. Tracking this inactivity helps in various scenarios, such as optimizing resource usage, enhancing security, and providing a better user experience.

// inactivity.service.ts

import { Injectable } from '@angular/core';
import { Observable, fromEvent, timer } from 'rxjs';
import { mergeMap, mapTo } from 'rxjs/operators';

@Injectable({ providedIn: 'root'})
export class InactivityService {

  public trackInactivity(
    duration: number
  ): Observable<boolean> {
    const mouseMove$ = fromEvent(document,'mousemove')
          .pipe(mapTo(true));

    const keyDown$ = fromEvent(document,'keydown')
          .pipe(mapTo(true));

    return timer(0, duration)
     .pipe(
       mergeMap(() => mouseMove$ || keyDown$)
     );
  }
}

Explanation:
— `public readonly isSticky$ = fromEvent(window, 'scroll').pipe(...):` This defines the isSticky$ observable using RxJS operators. It listens for scroll events on the window, maps them to the vertical scroll position (window.scrollY), filters out consecutive duplicate values, and then maps the scroll position to a boolean value indicating whether the scroll position is greater than 24 (assuming 24 is a threshold value for determining when the navigation bar should become sticky).

— `distinctUntilChanged()`: This operator filters out consecutive duplicate values emitted by the observable.

— `map((scrollTop: number) => scrollTop > 24)`: This operator maps the scroll position (scrollTop) to a boolean value, indicating whether the user has scrolled past a certain threshold (24 in this case).

— `(isSticky$ | async) === true`: This condition checks if the value emitted by the isSticky$ is true or not. Which makes it convenient since you don’t have to unsubscribe the observable.

— `sticky top-0 z-10 shadow-lg opacity-95 bg-white`: These classes from TailWind will help enhance the sticky experience when the users scroll down.

The idea of the Asynchronous State Handler is to combine asynchronous operations with an explicit loading and error state. While an asynchronous operation is running, the status is loading. It ends either in an error state or with the actual result of the operation. Thinking of a generic operation result T, the Asynchronous State Handler is a function that returns T | 'loading' | 'error'. Using a union type underlines that the result is always exactly one state. Using string literal types for loading and error state is simple but descriptive. They can be replaced by other types if required.