2.3.0 (#795)

* 2.3.0

* Update session replay API endpoint path for consistency

- Changed the session replay recording endpoint from `/sites/:siteId/session-replay/record` to `/session-replay/record/:siteId` to align with the standardized path structure.
- This update enhances clarity and consistency across the API routes.

* Refactor Sidebar component to improve layout consistency

- Moved the API Playground item out of the conditional rendering block to ensure it is always displayed on larger screens.
- This change enhances the visibility of the API Playground option in the Sidebar, improving user experience.

* Refactor EventLog component to utilize Intersection Observer for infinite scrolling

- Replaced manual scroll event handling with the Intersection Observer API to improve performance and simplify the code.
- Updated session replay API endpoint paths for consistency across components.
- Enhanced the SpinningGlobe component to use the correct API endpoint format for fetching session data.

* Remove deprecated 'Get Organization Sites' endpoint and update API documentation

- Deleted the 'Get Organization Sites' endpoint from the endpoint configuration to streamline the API.
- Updated the API documentation to reflect the removal of the endpoint and added details for the 'sites' array in the organization response.
- Enhanced the 'getMyOrganizations' API to include associated sites for each organization, improving the data returned to users.

* Update Weekdays component color class and refactor Footer component to use Button

- Changed the default color class in the Weekdays component for better visual consistency.
- Refactored the Footer component to replace the anchor tag with a Button component for improved styling and user interaction.

Author: goldflag

client/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3002 --turbopack",

client/package.json

@@ -95,7 +95,7 @@ export async function fetchSessionReplays(
     ...toQueryParams(params),
     limit: params.limit,
     offset: params.offset,
-    min_duration: params.minDuration,
+    minDuration: params.minDuration,
   };
 
   const response = await authedFetch<SessionReplayListResponse>(`/sites/${site}/session-replay/list`, queryParams);

client/src/api/analytics/endpoints/sessionReplay.ts

@@ -93,14 +93,6 @@ export const endpointCategories: EndpointCategory[] = [
         description: "Returns all organizations the authenticated user is a member of, including all members for each organization",
         hasCommonParams: false,
       },
-      {
-        method: "GET",
-        path: "/organizations/:organizationId/sites",
-        name: "Get Organization Sites",
-        description: "Returns all sites within an organization with session counts and subscription info",
-        hasCommonParams: false,
-        pathParams: ["organizationId"],
-      },
       {
         method: "POST",
         path: "/organizations/:organizationId/sites",

client/src/app/[site]/api-playground/utils/endpointConfig.ts

@@ -105,16 +105,14 @@ function SidebarContent() {
           href={getTabPath("goals")}
           icon={<Target className="w-4 h-4" />}
         />
-        {IS_CLOUD && (
-          <div className="hidden md:block">
-            <SidebarComponents.Item
-              label="API Playground"
-              active={isActiveTab("api-playground")}
-              href={getTabPath("api-playground")}
-              icon={<Code className="w-4 h-4" />}
-            />
-          </div>
-        )}
+        <div className="hidden md:block">
+          <SidebarComponents.Item
+            label="API Playground"
+            active={isActiveTab("api-playground")}
+            href={getTabPath("api-playground")}
+            icon={<Code className="w-4 h-4" />}
+          />
+        </div>
         <SidebarComponents.SectionHeader>Product Analytics</SidebarComponents.SectionHeader>
         <div className="hidden md:block">
           {!subscription?.planName?.startsWith("appsumo") && !isSubscriptionLoading && (

client/src/app/[site]/components/Sidebar/Sidebar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from "react";
+import { useIntersectionObserver } from "@uidotdev/usehooks";
+import { useEffect } from "react";
 import { useGetEventsInfinite } from "../../../../api/analytics/hooks/events/useGetEvents";
 import { NothingFound } from "../../../../components/NothingFound";
 import { formatter } from "../../../../lib/utils";
@@ -9,41 +10,24 @@ import { ErrorState } from "../../../../components/ErrorState";
 import { ScrollArea } from "../../../../components/ui/scroll-area";
 
 export function EventLog() {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const loadMoreRef = useRef<HTMLDivElement>(null);
-
   // Fetch events with infinite scrolling
   const { data, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = useGetEventsInfinite({
     pageSize: 100,
   });
 
-  // Handle scroll for infinite loading
-  const handleScroll = useCallback(() => {
-    if (!loadMoreRef.current || !containerRef.current || !hasNextPage || isFetchingNextPage) {
-      return;
-    }
-
-    const container = containerRef.current;
-    const loadMoreElement = loadMoreRef.current;
-    const containerRect = container.getBoundingClientRect();
-    const loadMoreRect = loadMoreElement.getBoundingClientRect();
+  // Use the intersection observer hook
+  const [ref, entry] = useIntersectionObserver({
+    threshold: 0,
+    root: null,
+    rootMargin: "0px 0px 100px 0px",
+  });
 
-    // Check if the load more element is visible in the viewport
-    if (loadMoreRect.top <= containerRect.bottom + 100) {
+  // Fetch next page when intersection observer detects the target is visible
+  useEffect(() => {
+    if (entry?.isIntersecting && hasNextPage && !isFetchingNextPage && !isLoading) {
       fetchNextPage();
     }
-  }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
-
-  // Set up scroll event listener
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    container.addEventListener("scroll", handleScroll);
-    return () => {
-      container.removeEventListener("scroll", handleScroll);
-    };
-  }, [handleScroll]);
+  }, [entry?.isIntersecting, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading]);
 
   // Flatten all pages of data
   const allEvents = data?.pages.flatMap(page => page.data) || [];
@@ -73,22 +57,19 @@ export function EventLog() {
 
   return (
     <ScrollArea className="h-[80vh]">
-      <div ref={containerRef} className="h-full pr-2 overflow-x-hidden">
+      <div className="h-full pr-2 overflow-x-hidden">
         {allEvents.map((event, index) => (
           <EventLogItem key={`${event.timestamp}-${index}`} event={event} />
         ))}
 
-        {/* Loading state for next page */}
-        {hasNextPage && (
-          <div className="py-2">
-            {Array.from({ length: 3 }).map((_, index) => (
+        {/* Infinite scroll sentinel */}
+        <div ref={ref} className="py-2">
+          {isFetchingNextPage && (
+            Array.from({ length: 3 }).map((_, index) => (
               <EventLogItemSkeleton key={`next-page-${index}`} />
-            ))}
-          </div>
-        )}
-
-        {/* Invisible element for scroll detection */}
-        {hasNextPage && <div ref={loadMoreRef} className="h-1" />}
+            ))
+          )}
+        </div>
       </div>
       {/* Pagination info */}
       {data?.pages[0]?.pagination && (

client/src/app/[site]/events/components/EventLog.tsx

@@ -208,7 +208,7 @@ export function Weekdays() {
                         heatmapData[day].length > hour
                           ? heatmapData[day][hour]
                           : 0;
-                      const colorClass = value > 0 ? getColorIntensity(value) : "bg-neutral-200 dark:bg-neutral-800";
+                      const colorClass = value > 0 ? getColorIntensity(value) : "bg-neutral-50 dark:bg-neutral-850";
                       return (
                         <Tooltip key={day}>
                           <TooltipTrigger asChild>