Merge remote-tracking branch 'origin/main' into fix/v4-misc

Author: nicktrn

apps/webapp/app/assets/icons/ConnectionIcons.tsx

@@ -46,3 +46,28 @@ export function DisconnectedIcon({ className }: { className?: string }) {
     </svg>
   );
 }
+
+export function CheckingConnectionIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect
+        x="0.5"
+        y="-0.5"
+        width="19"
+        height="1"
+        rx="0.5"
+        transform="matrix(1 0 0 -1 1.99998 20)"
+        stroke="#878C99"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M18 6.5L6.00001 6.5C5.72387 6.5 5.50001 6.72386 5.50001 7L5.50001 15C5.50001 15.2761 5.72387 15.5 6.00001 15.5L18 15.5C18.2762 15.5 18.5 15.2761 18.5 15V7C18.5 6.72386 18.2762 6.5 18 6.5ZM6.00001 5C4.89545 5 4.00001 5.89543 4.00001 7L4.00001 15C4.00001 16.1046 4.89545 17 6.00001 17L18 17C19.1046 17 20 16.1046 20 15V7C20 5.89543 19.1046 5 18 5L6.00001 5Z"
+        fill="#878C99"
+      />
+      <circle cx="9" cy="11" r="1" fill="#878C99" />
+      <circle cx="12" cy="11" r="1" fill="#878C99" />
+      <circle cx="15" cy="11" r="1" fill="#878C99" />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/PythonLogoIcon.tsx

@@ -0,0 +1,21 @@
+export function PythonLogoIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_16722_101857)">
+        <path
+          d="M11.9281 2C6.85063 2 7.1675 4.20188 7.1675 4.20188L7.17375 6.48313H12.0187V7.1675H5.24813C5.24813 7.1675 2 6.79875 2 11.9225C2 17.045 4.83563 16.8638 4.83563 16.8638H6.52813V14.4863C6.52813 14.4863 6.43687 11.6506 9.31875 11.6506H14.1237C14.1237 11.6506 16.8237 11.6944 16.8237 9.04125V4.65438C16.8237 4.65438 17.2338 2 11.9281 2ZM9.25625 3.53375C9.73813 3.53375 10.1281 3.92375 10.1281 4.40563C10.1281 4.8875 9.73813 5.2775 9.25625 5.2775C9.14171 5.27766 9.02826 5.25523 8.9224 5.21147C8.81655 5.16771 8.72037 5.10349 8.63937 5.0225C8.55838 4.94151 8.49417 4.84533 8.45041 4.73947C8.40665 4.63362 8.38421 4.52017 8.38438 4.40563C8.38438 3.92375 8.77438 3.53375 9.25625 3.53375Z"
+          fill="#387EB8"
+        />
+        <path
+          d="M12.0719 21.9839C17.1494 21.9839 16.8325 19.782 16.8325 19.782L16.8263 17.5008H11.9813V16.8164H18.7513C18.7513 16.8164 22 17.1852 22 12.062C22 6.93892 19.1644 7.12079 19.1644 7.12079H17.4719V9.49767C17.4719 9.49767 17.5631 12.3333 14.6813 12.3333H9.87626C9.87626 12.3333 7.17626 12.2895 7.17626 14.9427V19.3295C7.17626 19.3295 6.76626 21.9839 12.0719 21.9839ZM14.7438 20.4502C14.6292 20.4503 14.5158 20.4279 14.4099 20.3841C14.3041 20.3404 14.2079 20.2762 14.1269 20.1952C14.0459 20.1142 13.9817 20.018 13.9379 19.9121C13.8942 19.8063 13.8717 19.6928 13.8719 19.5783C13.8719 19.097 14.2619 18.707 14.7438 18.707C15.2256 18.707 15.6156 19.0964 15.6156 19.5783C15.6156 20.0608 15.2256 20.4502 14.7438 20.4502Z"
+          fill="#F4D441"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_16722_101857">
+          <rect width="20" height="20" fill="white" transform="translate(2 2)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

apps/webapp/app/components/BlankStatePanels.tsx

@@ -59,8 +59,8 @@ export function HasNoTasksDev() {
           <InitCommandV3 />
           <Paragraph spacing>
             You'll notice a new folder in your project called{" "}
-            <InlineCode variant="small">trigger</InlineCode>. We've added a very simple example task
-            in here to help you get started.
+            <InlineCode variant="small">trigger</InlineCode>. We've added a few simple example tasks
+            in there to help you get started.
           </Paragraph>
         </StepContentContainer>
         <StepNumber stepNumber="2" title="Run the CLI 'dev' command" />

apps/webapp/app/components/DevPresence.tsx

@@ -1,20 +1,17 @@
 import { createContext, type ReactNode, useContext, useEffect, useMemo, useState } from "react";
-import { useDebounce } from "~/hooks/useDebounce";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { useEventSource } from "~/hooks/useEventSource";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 
 // Define Context types
 type DevPresenceContextType = {
-  lastSeen: Date | null;
-  isConnected: boolean;
+  isConnected: boolean | undefined;
 };
 
 // Create Context with default values
 const DevPresenceContext = createContext<DevPresenceContextType>({
-  lastSeen: null,
-  isConnected: false,
+  isConnected: undefined,
 });
 
 // Provider component with enabled prop
@@ -30,50 +27,44 @@ export function DevPresenceProvider({ children, enabled = true }: DevPresencePro
 
   // Only subscribe to event source if enabled is true
   const streamedEvents = useEventSource(
-    `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/dev/presence`,
+    `/resources/orgs/${organization.slug}/projects/${project.slug}/dev/presence`,
     {
       event: "presence",
       disabled: !enabled,
     }
   );
 
-  const [lastSeen, setLastSeen] = useState<Date | null>(null);
-
-  const debouncer = useDebounce((seen: Date | null) => {
-    setLastSeen(seen);
-  }, 3_000);
+  const [isConnected, setIsConnected] = useState<boolean | undefined>(undefined);
 
   useEffect(() => {
-    // If disabled or no events, set lastSeen to null
+    // If disabled or no events
     if (!enabled || streamedEvents === null) {
-      debouncer(null);
+      setIsConnected(undefined);
       return;
     }
 
     try {
       const data = JSON.parse(streamedEvents) as any;
-      if ("lastSeen" in data && data.lastSeen) {
+      if ("isConnected" in data && data.isConnected) {
         try {
-          const lastSeenDate = new Date(data.lastSeen);
-          debouncer(lastSeenDate);
+          setIsConnected(true);
         } catch (error) {
           console.log("DevPresence: Failed to parse lastSeen timestamp", { error });
-          debouncer(null);
+          setIsConnected(false);
         }
       } else {
-        debouncer(null);
+        setIsConnected(false);
       }
     } catch (error) {
       console.log("DevPresence: Failed to parse presence message", { error });
-      debouncer(null);
+      setIsConnected(false);
     }
   }, [streamedEvents, enabled]);
 
   // Calculate isConnected and memoize the context value
   const contextValue = useMemo(() => {
-    const isConnected = enabled && lastSeen !== null && lastSeen > new Date(Date.now() - 120_000);
-    return { lastSeen, isConnected };
-  }, [lastSeen, enabled]);
+    return { isConnected };
+  }, [isConnected, enabled]);
 
   return <DevPresenceContext.Provider value={contextValue}>{children}</DevPresenceContext.Provider>;
 }

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -20,7 +20,11 @@ import {
 import { useNavigation } from "@remix-run/react";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import simplur from "simplur";
-import { ConnectedIcon, DisconnectedIcon } from "~/assets/icons/ConnectionIcons";
+import {
+  CheckingConnectionIcon,
+  ConnectedIcon,
+  DisconnectedIcon,
+} from "~/assets/icons/ConnectionIcons";
 import { RunsIconExtraSmall, RunsIconSmall } from "~/assets/icons/RunsIcon";
 import { TaskIconSmall } from "~/assets/icons/TaskIcon";
 import { Avatar } from "~/components/primitives/Avatar";
@@ -82,6 +86,7 @@ import { SideMenuHeader } from "./SideMenuHeader";
 import { SideMenuItem } from "./SideMenuItem";
 import { SideMenuSection } from "./SideMenuSection";
 import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
+import { Spinner } from "../primitives/Spinner";
 
 type SideMenuUser = Pick<User, "email" | "admin"> & { isImpersonating: boolean };
 export type SideMenuProject = Pick<
@@ -532,7 +537,9 @@ export function DevConnection() {
                   variant="minimal/small"
                   className="aspect-square h-7 p-1"
                   LeadingIcon={
-                    isConnected ? (
+                    isConnected === undefined ? (
+                      <CheckingConnectionIcon className="size-5" />
+                    ) : isConnected ? (
                       <ConnectedIcon className="size-5" />
                     ) : (
                       <DisconnectedIcon className="size-5" />
@@ -543,24 +550,34 @@ export function DevConnection() {
             </div>
           </TooltipTrigger>
           <TooltipContent side="right" className={"text-xs"}>
-            {isConnected ? "Your dev server is connected" : "Your dev server is not connected"}
+            {isConnected === undefined
+              ? "Checking connection..."
+              : isConnected
+              ? "Your dev server is connected"
+              : "Your dev server is not connected"}
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>
       <DialogContent>
         <DialogHeader>
-          {isConnected ? "Your dev server is connected" : "Your dev server is not connected"}
+          {isConnected === undefined
+            ? "Checking connection..."
+            : isConnected
+            ? "Your dev server is connected"
+            : "Your dev server is not connected"}
         </DialogHeader>
         <div className="mt-2 flex flex-col gap-3 px-2">
           <div className="flex flex-col items-center justify-center gap-6 px-6 py-10">
             <img
-              src={isConnected ? connectedImage : disconnectedImage}
-              alt={isConnected ? "Connected" : "Disconnected"}
+              src={isConnected === true ? connectedImage : disconnectedImage}
+              alt={isConnected === true ? "Connected" : "Disconnected"}
               width={282}
               height={45}
             />
             <Paragraph variant="small" className={isConnected ? "text-success" : "text-error"}>
-              {isConnected
+              {isConnected === undefined
+                ? "Checking connection..."
+                : isConnected
                 ? "Your local dev server is connected to Trigger.dev"
                 : "Your local dev server is not connected to Trigger.dev"}
             </Paragraph>

apps/webapp/app/components/primitives/AppliedFilter.tsx

@@ -34,7 +34,14 @@ export function AppliedFilter({
 }: AppliedFilterProps) {
   const variantClassName = variants[variant];
   return (
-    <div className={cn("flex items-center transition", variantClassName.box, className)}>
+    <div
+      className={cn(
+        "flex items-center transition",
+        variantClassName.box,
+        !removable && "pr-2",
+        className
+      )}
+    >
       <div className="flex items-center gap-0.5">
         <div className="text-text-dimmed">
           <span>{label}</span>:

apps/webapp/app/components/primitives/DateField.tsx

@@ -10,12 +10,12 @@ import { Button } from "./Buttons";
 
 const variants = {
   small: {
-    fieldStyles: "h-5 text-sm rounded-sm px-0.5",
+    fieldStyles: "h-5 text-xs rounded-sm px-0.5",
     nowButtonVariant: "tertiary/small" as const,
     clearButtonVariant: "tertiary/small" as const,
   },
   medium: {
-    fieldStyles: "h-7 text-base rounded px-1",
+    fieldStyles: "h-7 text-sm rounded px-1",
     nowButtonVariant: "tertiary/medium" as const,
     clearButtonVariant: "minimal/medium" as const,
   },

apps/webapp/app/components/primitives/Select.tsx

@@ -1,14 +1,14 @@
 import * as Ariakit from "@ariakit/react";
-import { SelectProps as AriaSelectProps } from "@ariakit/react";
+import { type SelectProps as AriaSelectProps } from "@ariakit/react";
 import { SelectValue } from "@ariakit/react-core/select/select-value";
 import { Link } from "@remix-run/react";
 import * as React from "react";
 import { Fragment, useMemo, useState } from "react";
-import { ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys";
+import { type ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { cn } from "~/utils/cn";
 import { ShortcutKey } from "./ShortcutKey";
 import { ChevronDown } from "lucide-react";
-import { MatchSorterOptions, matchSorter } from "match-sorter";
+import { type MatchSorterOptions, matchSorter } from "match-sorter";
 
 const sizes = {
   small: {

apps/webapp/app/components/primitives/Switch.tsx

@@ -3,7 +3,15 @@
 import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { cn } from "~/utils/cn";
-import { ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys";
+import { type ShortcutDefinition, useShortcutKeys } from "~/hooks/useShortcutKeys";
+
+const small = {
+  container:
+    "flex items-center h-[1.5rem] gap-x-1.5 rounded hover:bg-tertiary pr-1 py-[0.1rem] pl-1.5 hover:disabled:bg-charcoal-700 transition focus-custom disabled:opacity-50 text-text-dimmed hover:text-text-bright disabled:hover:cursor-not-allowed hover:cursor-pointer disabled:hover:text-rose-500",
+  root: "h-3 w-6",
+  thumb: "size-2.5 data-[state=checked]:translate-x-2.5 data-[state=unchecked]:translate-x-0",
+  text: "text-xs text-text-dimmed",
+};
 
 const variations = {
   large: {
@@ -12,12 +20,18 @@ const variations = {
     thumb: "size-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
     text: "text-sm text-text-dimmed",
   },
-  small: {
-    container:
-      "flex items-center h-[1.5rem] gap-x-1.5 rounded hover:bg-tertiary disabled:hover:bg-transparent pr-1 py-[0.1rem] pl-1.5 transition focus-custom disabled:hover:text-charcoal-400 disabled:opacity-50 text-charcoal-400 hover:text-charcoal-200 disabled:hover:cursor-not-allowed hover:cursor-pointer",
-    root: "h-3 w-6",
-    thumb: "size-2.5 data-[state=checked]:translate-x-2.5 data-[state=unchecked]:translate-x-0",
-    text: "text-xs text-text-dimmed",
+  small,
+  "tertiary/small": {
+    container: small.container,
+    root: cn(
+      small.root,
+      "group-data-[state=unchecked]:bg-charcoal-600 group-data-[state=unchecked]:group-hover:bg-charcoal-500/50"
+    ),
+    thumb: small.thumb,
+    text: cn(
+      small.text,
+      "transition group-hover:text-text-bright group-disabled:group-hover:text-text-dimmed"
+    ),
   },
 };
 
@@ -53,7 +67,12 @@ export const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.
         ref={innerRef}
       >
         {label ? (
-          <label className={cn("whitespace-nowrap", text)}>
+          <label
+            className={cn(
+              "cursor-pointer whitespace-nowrap group-disabled:cursor-not-allowed",
+              text
+            )}
+          >
             {typeof label === "string" ? <span>{label}</span> : label}
           </label>
         ) : null}

apps/webapp/app/components/primitives/Table.tsx

@@ -1,6 +1,6 @@
 import { ChevronRightIcon } from "@heroicons/react/24/solid";
 import { Link } from "@remix-run/react";
-import React, { ReactNode, forwardRef, useState, useContext, createContext } from "react";
+import React, { type ReactNode, forwardRef, useState, useContext, createContext } from "react";
 import { cn } from "~/utils/cn";
 import { Popover, PopoverContent, PopoverVerticalEllipseTrigger } from "./Popover";
 import { InfoIconTooltip } from "./Tooltip";
@@ -21,7 +21,7 @@ const variants = {
     stickyCell: "group-hover/table-row:bg-charcoal-800",
     menuButton:
       "bg-background-dimmed group-hover/table-row:bg-charcoal-800 group-hover/table-row:ring-grid-bright group-has-[[tabindex='0']:focus]/table-row:bg-background-bright",
-    menuButtonDivider: "group-hover/table-row:border-grid-dimmed",
+    menuButtonDivider: "group-hover/table-row:border-grid-bright",
     rowSelected: "bg-charcoal-750 group-hover/table-row:bg-charcoal-750",
   },
 } as const;
@@ -344,11 +344,12 @@ export const TableCellMenu = forwardRef<
             {hiddenButtons && (
               <div
                 className={cn(
-                  "hidden pr-0.5 group-hover/table-row:block group-hover/table-row:border-r",
+                  "hidden group-hover/table-row:block",
+                  popoverContent && "pr-0.5 group-hover/table-row:border-r",
                   variants[variant].menuButtonDivider
                 )}
               >
-                {hiddenButtons}
+                <div className={cn("flex items-center gap-x-0.5")}>{hiddenButtons}</div>
               </div>
             )}
             {/* Always visible buttons  */}
@@ -368,18 +369,6 @@ export const TableCellMenu = forwardRef<
                 </PopoverContent>
               </Popover>
             )}
-            {/* Optionally pass in children to render in a popover */}
-            {!visibleButtons && !hiddenButtons && !popoverContent && (
-              <Popover onOpenChange={(open) => setIsOpen(open)}>
-                <PopoverVerticalEllipseTrigger isOpen={isOpen} />
-                <PopoverContent
-                  className="w-fit max-w-[10rem] overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
-                  align="end"
-                >
-                  <div className="flex flex-col gap-1 p-1">{children}</div>
-                </PopoverContent>
-              </Popover>
-            )}
           </div>
         </div>
       </TableCell>