From c3f3345d7b1ac820b411a5adbca3172378642953 Mon Sep 17 00:00:00 2001
From: enkei64 <imenkei64@gmail.com>
Date: Fri, 15 Aug 2025 10:11:21 +1000
Subject: 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 | 35 +++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 apps/web/src/hooks/use-infinite-scroll.ts

(limited to 'apps/web/src/hooks')

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 };
+}
-- 
cgit v1.3.1