Got rid of stupid extra /dev, added a connecting state with icon

Author: matt-aitken

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

@@ -46,3 +46,25 @@ 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"
+      />
+    </svg>
+  );
+}

apps/webapp/app/components/DevPresence.tsx

@@ -6,12 +6,12 @@ import { useProject } from "~/hooks/useProject";
 
 // Define Context types
 type DevPresenceContextType = {
-  isConnected: boolean;
+  isConnected: boolean | undefined;
 };
 
 // Create Context with default values
 const DevPresenceContext = createContext<DevPresenceContextType>({
-  isConnected: false,
+  isConnected: undefined,
 });
 
 // Provider component with enabled prop
@@ -27,19 +27,19 @@ 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 [isConnected, setIsConnected] = useState<boolean>(false);
+  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) {
-      setIsConnected(false);
+      setIsConnected(undefined);
       return;
     }
 

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/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dev.presence.tsx renamed to apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.dev.presence.tsx

@@ -3,7 +3,7 @@ import { env } from "~/env.server";
 import { devPresence } from "~/presenters/v3/DevPresence.server";
 import { logger } from "~/services/logger.server";
 import { requireUserId } from "~/services/session.server";
-import { EnvironmentParamSchema } from "~/utils/pathBuilder";
+import { ProjectParamSchema } from "~/utils/pathBuilder";
 import { createSSELoader, type SendFunction } from "~/utils/sse";
 
 export const loader = createSSELoader({
@@ -12,11 +12,10 @@ export const loader = createSSELoader({
   debug: true,
   handler: async ({ id, controller, debug, request, params }) => {
     const userId = await requireUserId(request);
-    const { organizationSlug, projectParam, envParam } = EnvironmentParamSchema.parse(params);
+    const { organizationSlug, projectParam } = ProjectParamSchema.parse(params);
 
     const environment = await $replica.runtimeEnvironment.findFirst({
       where: {
-        slug: envParam,
         type: "DEVELOPMENT",
         orgMember: {
           userId,