fix(dashboard): apply time filter preset periods immediately on click (#3053)

Extract `applyPeriod` callback from `applySelection` so preset period
buttons ("Created in the last X") apply immediately when clicked,
instead of only updating the selection state and requiring a separate
apply step.

Also validates `maxPeriodDays` on instant-apply so the upgrade prompt
still works correctly for plan-limited periods.

Author: nicktrn

apps/webapp/app/components/runs/v3/SharedFilters.tsx

@@ -500,39 +500,26 @@ 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,
         to: undefined,
       };
 
       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"