Improved search result rendering and icon search

src/assets/javascripts/browser/element/offset/index.ts

@@ -21,7 +21,9 @@
  */
 
 import { Observable, fromEvent, merge } from "rxjs"
-import { map, startWith } from "rxjs/operators"
+import { distinctUntilChanged, map, startWith } from "rxjs/operators"
+
+import { getElementContentSize, getElementSize } from "../size"
 
 /* ----------------------------------------------------------------------------
  * Types
@@ -74,3 +76,30 @@ export function watchElementOffset(
       startWith(getElementOffset(el))
     )
 }
+
+/**
+ * Watch element threshold
+ *
+ * This function returns an observable which emits whether the bottom scroll
+ * offset of an elements is within a certain threshold.
+ *
+ * @param el - Element
+ * @param threshold - Threshold
+ *
+ * @returns Element threshold observable
+ */
+export function watchElementThreshold(
+  el: HTMLElement, threshold = 16
+): Observable<boolean> {
+  return watchElementOffset(el)
+    .pipe(
+      map(({ y }) => {
+        const visible = getElementSize(el)
+        const content = getElementContentSize(el)
+        return y >= (
+          content.height - visible.height - threshold
+        )
+      }),
+      distinctUntilChanged()
+    )
+}

src/assets/javascripts/browser/element/size/index.ts

@@ -120,7 +120,7 @@ export function getElementContentSize(el: HTMLElement): ElementSize {
 /**
  * Watch element size
  *
- * This function returns an observable that will subscribe to a single internal
+ * This function returns an observable that subscribes to a single internal
  * instance of `ResizeObserver` upon subscription, and emit resize events until
  * termination. Note that this function should not be called with the same
  * element twice, as the first unsubscription will terminate observation.

src/assets/javascripts/browser/worker/index.ts

@@ -73,7 +73,7 @@ interface WatchOptions<T extends WorkerMessage> {
 /**
  * Watch a web worker
  *
- * This function returns an observable that will send all values emitted by the
+ * This function returns an observable that sends all values emitted by the
  * message observable to the web worker. Web worker communication is expected
  * to be bidirectional (request-response) and synchronous. Messages that are
  * emitted during a pending request are throttled, the last one is emitted.