feat(app): new details footer appearance

src/hooks/index.ts

@@ -0,0 +1,9 @@
+export { default as useDebounce } from "./useDebounce";
+export { default as useEvent } from "./useEvent";
+export { default as useIconParameters } from "./useIconParameters";
+export { default as usePersistSettings } from "./usePersistSettings";
+export { default as useThrottle } from "./useThrottle";
+export { default as useThrottled } from "./useThrottled";
+export { default as useTimeoutFn } from "./useTimeoutFn";
+export { default as useTransientState } from "./useTransientState";
+export { default as useUnmount } from "./useUnmount";

src/hooks/useEvent.ts

@@ -0,0 +1,45 @@
+import { useEffect } from "react";
+
+export type UseEventTarget = HTMLElement | SVGElement | Document | Window;
+
+export type UseEventMap<E extends UseEventTarget> = E extends HTMLElement
+  ? HTMLElementEventMap
+  : E extends SVGElement
+  ? SVGElementEventMap
+  : E extends Document
+  ? DocumentEventMap
+  : WindowEventMap;
+
+export type UseEventType<E extends UseEventTarget> = keyof UseEventMap<E>;
+
+/**
+ * Attach event listeners to arbitrary targets, and perform necessary cleanup
+ * when unmounting. Provides type inference for the listener based on the
+ * provided event name (currently supports {@link Window}, {@link Document},
+ * and subclasses of {@link HTMLElement} and {@link SVGElement}).
+ *
+ * @param type an {@link https://developer.mozilla.org/en-US/docs/Web/Events#event_listing  event type}
+ * @param listener a callback to be fired on the event
+ * @param options {@link AddEventListenerOptions}
+ * @param el the target element to attack the listener. Defaults to
+ * {@link Document} when omitted.
+ */
+export default function useEvent<
+  K extends UseEventType<T>,
+  M extends UseEventMap<T>,
+  T extends UseEventTarget = Document
+>(
+  type: K,
+  listener: (this: T, ev: M[K]) => any,
+  options?: boolean | AddEventListenerOptions,
+  el?: T
+) {
+  useEffect(() => {
+    const target = el ?? document;
+    // @ts-ignore
+    target.addEventListener(type, listener, options);
+
+    // @ts-ignore
+    return () => target.removeEventListener(type, listener);
+  }, [el, type]);
+}