From 96edc771815b5a2bb6b610c57bff1a6f909da1de Mon Sep 17 00:00:00 2001
From: nicktrn <55853254+nicktrn@users.noreply.github.com>
Date: Fri, 13 Feb 2026 18:21:47 +0000
Subject: [PATCH] fix(dashboard): apply time filter preset periods immediately
 on click

Extract applyPeriod callback from applySelection so preset period buttons
("Created in the last X") apply immediately when clicked instead of
requiring a separate apply step.
---
 .../app/components/runs/v3/SharedFilters.tsx  | 54 +++++++++++--------
 1 file changed, 33 insertions(+), 21 deletions(-)

diff --git a/apps/webapp/app/components/runs/v3/SharedFilters.tsx b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
index 3ccda692ce..7a5c4fdba9 100644
--- a/apps/webapp/app/components/runs/v3/SharedFilters.tsx
+++ b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
@@ -500,28 +500,17 @@ export function TimeDropdown({
     }
   })();
 
-  const applySelection = useCallback(() => {
-    setValidationError(null);
-
-    if (exceedsMaxPeriod) {
-      setValidationError(
-        `Your plan allows a maximum of ${maxPeriodDays} days. Upgrade for longer retention.`
-      );
-      return;
-    }
+  const applyPeriod = useCallback(
+    (periodToApply: string) => {
+      setValidationError(null);
 
-    if (activeSection === "duration") {
-      // Validate custom duration
-      if (selectedPeriod === "custom" && !isCustomDurationValid) {
-        setValidationError("Please enter a valid custom duration");
+      if (maxPeriodDays && periodToDays(periodToApply) > maxPeriodDays) {
+        setValidationError(
+          `Your plan allows a maximum of ${maxPeriodDays} days. Upgrade for longer retention.`
+        );
         return;
       }
 
-      let periodToApply = selectedPeriod;
-      if (selectedPeriod === "custom") {
-        periodToApply = `${customValue}${customUnit}`;
-      }
-
       const values: TimeFilterApplyValues = {
         period: periodToApply,
         from: undefined,
@@ -529,10 +518,8 @@ export function TimeDropdown({
       };
 
       if (onValueChange) {
-        // Controlled mode - just call the handler
         onValueChange(values);
       } else {
-        // URL mode - navigate
         replace({
           period: periodToApply,
           cursor: undefined,
@@ -546,6 +533,30 @@ export function TimeDropdown({
       setToValue(undefined);
       setOpen(false);
       onApply?.(values);
+    },
+    [maxPeriodDays, onValueChange, replace, onApply]
+  );
+
+  const applySelection = useCallback(() => {
+    setValidationError(null);
+
+    if (exceedsMaxPeriod) {
+      setValidationError(
+        `Your plan allows a maximum of ${maxPeriodDays} days. Upgrade for longer retention.`
+      );
+      return;
+    }
+
+    if (activeSection === "duration") {
+      // Validate custom duration
+      if (selectedPeriod === "custom" && !isCustomDurationValid) {
+        setValidationError("Please enter a valid custom duration");
+        return;
+      }
+
+      const periodToApply =
+        selectedPeriod === "custom" ? `${customValue}${customUnit}` : selectedPeriod;
+      applyPeriod(periodToApply);
     } else {
       // Validate date range
       if (!fromValue && !toValue) {
@@ -593,6 +604,7 @@ export function TimeDropdown({
     onValueChange,
     exceedsMaxPeriod,
     maxPeriodDays,
+    applyPeriod,
   ]);
 
   return (
@@ -703,7 +715,7 @@ export function TimeDropdown({
                           setCustomValue(parsed.value.toString());
                           setCustomUnit(parsed.unit);
                         }
-                        setValidationError(null);
+                        applyPeriod(p.value);
                       }}
                       fullWidth
                       type="button"