UI improvements (#5479)

Author: chitalian

web/components/shared/themed/themedTimeFilterShadCN.tsx

@@ -145,8 +145,9 @@ export function ThemedTimeFilterShadCN({
   };
 
   const formatDateDisplay = (from: Date, to: Date) => {
-    if (isLive && !hasCustomTimeFilter) {
-      if (from.toDateString() === to.toDateString()) {
+    // When live mode is on, always show "Now" as the end time
+    if (isLive) {
+      if (from.toDateString() === new Date().toDateString()) {
         return `${format(from, "LLL d, yyyy")} ${format(from, "HH:mm")} - Now`;
       } else {
         return `${format(from, "LLL d, yyyy HH:mm")} - Now`;

web/components/templates/requests/RequestsPage.tsx

@@ -189,28 +189,44 @@ export default function RequestsPage(props: RequestsPageV2Props) {
     if (currentTimeFilter && currentTimeFilter.split("_")[0] === "custom") {
       const [_, start, end] = currentTimeFilter.split("_");
 
-      const filter: FilterNode = {
-        left: {
-          request_response_rmt: {
-            request_created_at: {
-              gte: new Date(start),
+      // When live mode is on, don't set an upper bound so new data can appear
+      if (isLive) {
+        const filter: FilterNode = {
+          left: {
+            request_response_rmt: {
+              request_created_at: {
+                gte: new Date(start),
+              },
             },
           },
-        },
-        operator: "and",
-        right: {
+          operator: "and",
+          right: cacheFilter,
+        };
+        return filter;
+      } else {
+        const filter: FilterNode = {
           left: {
             request_response_rmt: {
               request_created_at: {
-                lte: new Date(end),
+                gte: new Date(start),
               },
             },
           },
           operator: "and",
-          right: cacheFilter,
-        },
-      };
-      return filter;
+          right: {
+            left: {
+              request_response_rmt: {
+                request_created_at: {
+                  lte: new Date(end),
+                },
+              },
+            },
+            operator: "and",
+            right: cacheFilter,
+          },
+        };
+        return filter;
+      }
     } else {
       return defaultFilter;
     }
@@ -529,28 +545,44 @@ export default function RequestsPage(props: RequestsPageV2Props) {
     (key: TimeInterval, value: string) => {
       if (key === "custom") {
         const [start, end] = value.split("_");
-        const filter: FilterNode = {
-          left: {
-            request_response_rmt: {
-              request_created_at: {
-                gte: new Date(start),
+        // When live mode is on, don't set an upper bound so new data can appear
+        if (isLive) {
+          const filter: FilterNode = {
+            left: {
+              request_response_rmt: {
+                request_created_at: {
+                  gte: new Date(start),
+                },
               },
             },
-          },
-          operator: "and",
-          right: {
+            operator: "and",
+            right: cacheFilter,
+          };
+          setTimeFilter(filter);
+        } else {
+          const filter: FilterNode = {
             left: {
               request_response_rmt: {
                 request_created_at: {
-                  lte: new Date(end),
+                  gte: new Date(start),
                 },
               },
             },
             operator: "and",
-            right: cacheFilter,
-          },
-        };
-        setTimeFilter(filter);
+            right: {
+              left: {
+                request_response_rmt: {
+                  request_created_at: {
+                    lte: new Date(end),
+                  },
+                },
+              },
+              operator: "and",
+              right: cacheFilter,
+            },
+          };
+          setTimeFilter(filter);
+        }
       } else {
         setTimeFilter({
           request_response_rmt: {
@@ -561,7 +593,7 @@ export default function RequestsPage(props: RequestsPageV2Props) {
         });
       }
     },
-    [isCached, setTimeFilter],
+    [isCached, isLive, setTimeFilter],
   );
 
   // if shift is pressed, we select the rows in the highlighted range
@@ -610,6 +642,15 @@ export default function RequestsPage(props: RequestsPageV2Props) {
   /* -------------------------------------------------------------------------- */
   /*                                   EFFECTS                                  */
   /* -------------------------------------------------------------------------- */
+  // When isLive changes, re-apply the time filter to add/remove upper bound
+  useEffect(() => {
+    const currentTimeFilter = searchParams.get("t");
+    if (currentTimeFilter && currentTimeFilter.split("_")[0] === "custom") {
+      const [, start, end] = currentTimeFilter.split("_");
+      onTimeSelectHandler("custom" as TimeInterval, `${start}_${end}`);
+    }
+  }, [isLive]);
+
   // Synchronize page state from URL query parameters
   useEffect(() => {
     const pageFromQuery = router.query.page;

web/lib/freeTierLimits.ts

@@ -132,12 +132,9 @@ export const FREE_TIER_CONFIG: FreeTierConfig = {
     },
     properties: {
       main: {
-        getLimit: () => 1,
-        description: (limit) =>
-          `You can have up to ${limit} properties with the free tier`,
+        getLimit: () => Infinity, // Unlimited properties for free tier
+        description: () => `Unlimited properties`,
         upgradeFeatureName: FEATURE_DISPLAY_NAMES.properties,
-        upgradeMessage: (limit, used) =>
-          `You've used ${used}/${limit} properties. Upgrade for unlimited access.`,
       },
     },
     users: {

web/lib/timeCalculations/time.ts

@@ -96,7 +96,8 @@ export const getTimeInterval = ({
 }): TimeIncrement => {
   const diff = end.getTime() - start.getTime();
 
-  if (diff < 1000 * 60 * 60 * 2) {
+  if (diff < 1000 * 60 * 60 * 6) {
+    // Use minute granularity for ranges up to 6 hours
     return "min";
   } else if (diff < 1000 * 60 * 60 * 24 * 3) {
     // Use hourly granularity for ranges up to 3 days