feat: stickers panel (#539)

* Stickers panel base complete

* Improve dark mode stickers background for visibility

* Prevent stickers from being too small or too big

* Improve UI, added credit for Iconify API

* Allow manually loading more collections

* Add a maximum width of 200px so stickers aren't too big

* cleanup

* style: hover state of button

* refactor: input component

* fix: mark input component as client

* so much stuff

---------

Co-authored-by: Maze Winther <mazewinther@gmail.com>

apps/web/src/hooks/use-infinite-scroll.ts

@@ -0,0 +1,35 @@
+import { useRef, useCallback } from "react";
+
+interface UseInfiniteScrollOptions {
+  onLoadMore: () => void;
+  hasMore: boolean;
+  isLoading: boolean;
+  threshold?: number;
+  enabled?: boolean;
+}
+
+export function useInfiniteScroll({
+  onLoadMore,
+  hasMore,
+  isLoading,
+  threshold = 200,
+  enabled = true,
+}: UseInfiniteScrollOptions) {
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+
+  const handleScroll = useCallback(
+    (event: React.UIEvent<HTMLDivElement>) => {
+      if (!enabled) return;
+
+      const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
+      const nearBottom = scrollTop + clientHeight >= scrollHeight - threshold;
+
+      if (nearBottom && hasMore && !isLoading) {
+        onLoadMore();
+      }
+    },
+    [onLoadMore, hasMore, isLoading, threshold, enabled]
+  );
+
+  return { scrollAreaRef, handleScroll };
+}