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>

1 files changed, 35 insertions, 0 deletions

diff --git a/apps/web/src/hooks/use-infinite-scroll.ts b/apps/web/src/hooks/use-infinite-scroll.ts
new file mode 100644
index 00000000..0f8db198
--- /dev/null
+++ b/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 };

+}