Use new UI (#8983)

* fixup build

* swap frontends

web-old/src/hooks/index.jsx

@@ -0,0 +1,59 @@
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+
+export function useResizeObserver(...refs) {
+  const [dimensions, setDimensions] = useState(
+    new Array(refs.length).fill({ width: 0, height: 0, x: -Infinity, y: -Infinity })
+  );
+  const resizeObserver = useMemo(
+    () =>
+      new ResizeObserver((entries) => {
+        window.requestAnimationFrame(() => {
+          setDimensions(entries.map((entry) => entry.contentRect));
+        });
+      }),
+    []
+  );
+
+  useEffect(() => {
+    refs.forEach((ref) => {
+      resizeObserver.observe(ref.current);
+    });
+
+    return () => {
+      refs.forEach((ref) => {
+        resizeObserver.unobserve(ref.current);
+      });
+    };
+  }, [refs, resizeObserver]);
+
+  return dimensions;
+}
+
+export function useIntersectionObserver() {
+  const [entry, setEntry] = useState({});
+  const [node, setNode] = useState(null);
+
+  const observer = useRef(null);
+
+  useEffect(() => {
+    if (observer.current) {
+      observer.current.disconnect();
+    }
+
+    observer.current = new IntersectionObserver((entries) => {
+      window.requestAnimationFrame(() => {
+        setEntry(entries[0]);
+      });
+    });
+
+    if (node) {
+      observer.current.observe(node);
+    }
+
+    return () => {
+      observer.current.disconnect();
+    };
+  }, [node]);
+
+  return [entry, setNode];
+}

web-old/src/hooks/useClickOutside.jsx

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'preact/hooks';
+
+// https://stackoverflow.com/a/54292872/2693528
+export const useClickOutside = (callback) => {
+  const callbackRef = useRef(); // initialize mutable ref, which stores callback
+  const innerRef = useRef(); // returned to client, who marks "border" element
+
+  // update cb on each render, so second useEffect has access to current value
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  useEffect(() => {
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+    function handleClick(e) {
+      if (innerRef.current && callbackRef.current && !innerRef.current.contains(e.target)) callbackRef.current(e);
+    }
+  }, []);
+
+  return innerRef; // convenience for client (doesn't need to init ref himself)
+};

web-old/src/hooks/useSearchString.jsx

@@ -0,0 +1,26 @@
+import { useState, useCallback } from 'preact/hooks';
+
+const defaultSearchString = (limit) => `include_thumbnails=0&limit=${limit}`;
+
+export const useSearchString = (limit, searchParams) => {
+  const { searchParams: initialSearchParams } = new URL(window.location);
+  const _searchParams = searchParams || initialSearchParams.toString();
+
+  const [searchString, changeSearchString] = useState(`${defaultSearchString(limit)}&${_searchParams}`);
+
+  const setSearchString = useCallback(
+    (limit, searchString) => {
+      changeSearchString(`${defaultSearchString(limit)}&${searchString}`);
+    },
+    [changeSearchString]
+  );
+
+  const removeDefaultSearchKeys = useCallback((searchParams) => {
+    searchParams.delete('limit');
+    searchParams.delete('include_thumbnails');
+    // removed deletion of "before" as its used by DatePicker
+    // searchParams.delete('before');
+  }, []);
+
+  return { searchString, setSearchString, removeDefaultSearchKeys };
+};