feat: implement feed scroll tracking in analytics and improve layout class handling

Author: medyo

src/App.tsx

@@ -84,8 +84,8 @@ export const App = () => {
 
       <div
         className={clsx(
-          'layoutLayers',
-          layout === 'cards' ? 'cardsLayout hideScrollBar' : 'gridLayout'
+          'layoutLayers hideScrollBar',
+          layout === 'cards' ? 'cardsLayout' : 'gridLayout'
         )}>
         {isDNDModeActive() && <DNDLayout />}
         <AppContentLayout />

src/features/feed/components/Feed.tsx

@@ -1,6 +1,7 @@
 import useInfiniteScroll from 'react-infinite-scroll-hook'
 import { PropagateLoader } from 'react-spinners'
 import { useGetFeed } from 'src/features/cards'
+import { trackFeedScroll } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import './feed.css'
 import { AdvFeedItem } from './feedItems/AdvFeedItem'
@@ -24,7 +25,10 @@ export const Feed = () => {
   const [infiniteRef, {rootRef}] = useInfiniteScroll({
     loading: isLoading,
     hasNextPage: Boolean(hasNextPage),
-    onLoadMore: fetchNextPage,
+    onLoadMore: () => {
+      fetchNextPage()
+      trackFeedScroll()
+    },
     disabled: Boolean(error),
     rootMargin: '0px 0px 100% 0px',
   })
@@ -46,7 +50,7 @@ export const Feed = () => {
   }
 
   return (
-    <div ref={rootRef} className="feed scrollable" style={{ overflow: 'auto', maxHeight: '100vh' }}>
+    <div ref={rootRef} className="feed scrollable" style={{ overflow: 'auto', maxHeight: '100%' }}>
 
       <div key={`adv`} className="feedItem">
         <AdvFeedItem />

src/lib/analytics.ts

@@ -22,6 +22,7 @@ enum Objects {
   RSS = 'Rss',
   DO_NOT_DISTURB = 'DND',
   DISPLAY_LAYOUT = 'Display Layout',
+  FEED = 'Feed',
 }
 
 enum Verbs {
@@ -417,6 +418,12 @@ export const trackDisplayTypeChange = (value: "grid" | "cards") => {
   })
 }
 
+export const trackFeedScroll = () => {
+  trackEvent({
+    object: Objects.FEED,
+    verb: Verbs.SCROLL
+  })
+}
 // Identification
 
 export const identifyUserLanguages = (languages: string[]) => {