Improve the Vercel & Slack integration settings pages (#4848)

## What

Updated layout for the **Vercel** and **Slack** organization integration
settings pages to match the rest of the settings UI. Layout & UI only —
no loader/action/logic changes.

### Blank states (no integration)
- Added the app title bar (it was missing on the Vercel page)
- Centered logo + heading + copy, with the two pages mirroring each
other
- A **project picker CTA** that deep-links to where each integration is
configured for the chosen project — Vercel → the project's integrations
page; Slack → the Errors page alerts sheet (`?alerts=true`) — styled
like the side-menu project switcher

### Connected states
- Rebuilt on `SettingsContainer` / `SettingsSection` / `SettingsHeader`
/ `SettingsRow`
- An **Overview** section with detail rows + a **Remove integration**
row (confirmation dialog kept)
- A connected **projects / alert channels** table that fits the settings
column
- **Vercel:** copyable Team/Installation IDs (`CopyableText`), a sticky
**Configure** cog action per row
- **Slack:** mirrors the same layout (Workspace / Installed / Remove +
alert channels table)

<img width="752" height="708" alt="CleanShot 2026-08-31 at 10 47 37"
src="https://github.com/user-attachments/assets/21170e53-cda9-42ee-836d-1850f857dbfe"
/>
<img width="3446" height="2300" alt="CleanShot 2026-09-01 at 19 40
18@2x"
src="https://github.com/user-attachments/assets/7874f71c-9219-4b28-9081-8f442e587b70"
/>
<img width="3438" height="2302" alt="CleanShot 2026-09-01 at 19 40
28@2x"
src="https://github.com/user-attachments/assets/117335e0-b201-45d3-825b-22f3c434366f"
/>


🤖 Generated with [Claude Code](https://claude.com/claude-code)

<!-- conductor-workspace-link -->

---

[Open workspace in
Conductor](https://app.conductor.build/workspace/6267255e-d21c-4106-8b5f-90b06d2c7fd6)

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: samejr

apps/webapp/app/components/integrations/ProjectConnectSelect.tsx

@@ -0,0 +1,67 @@
+import { useNavigation } from "@remix-run/react";
+import { useEffect, useState } from "react";
+import { ChevronExtraSmallDown } from "~/assets/icons/ChevronExtraSmallDown";
+import { DropdownIcon } from "~/assets/icons/DropdownIcon";
+import { FolderClosedIcon } from "~/assets/icons/FolderClosedIcon";
+import {
+  Popover,
+  PopoverContent,
+  PopoverMenuItem,
+  PopoverTrigger,
+} from "~/components/primitives/Popover";
+
+type ConnectableProject = { id: string; slug: string; name: string };
+
+const MENU_LABEL = "text-[0.90625rem] font-medium tracking-[-0.01em]";
+
+export function ProjectConnectSelect({
+  projects,
+  configurePathFor,
+}: {
+  projects: ConnectableProject[];
+  configurePathFor: (project: ConnectableProject) => string;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    // oxlint-disable-next-line react/set-state-in-effect -- sync menu state after navigation.
+    setIsOpen(false);
+  }, [navigation.location?.pathname]);
+
+  if (projects.length === 0) {
+    return null;
+  }
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger className="group mt-2 flex h-8 w-fit cursor-pointer items-center gap-2 rounded border border-grid-bright pl-2.5 pr-2 hover:bg-background-hover focus-custom">
+        <span className={`${MENU_LABEL} text-text-bright`}>Select project to configure</span>
+        <DropdownIcon className="size-4 min-w-4 text-text-dimmed group-hover:text-text-bright" />
+      </PopoverTrigger>
+      <PopoverContent
+        className="min-w-56 overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control"
+        align="center"
+        sideOffset={4}
+      >
+        <div className="flex flex-col gap-1 p-1">
+          {projects.map((project) => (
+            <PopoverMenuItem
+              key={project.id}
+              to={configurePathFor(project)}
+              title={
+                <span className="flex w-full items-center justify-between gap-2 text-text-bright">
+                  <span className="min-w-0 grow truncate text-left">{project.name}</span>
+                  <ChevronExtraSmallDown className="size-3.5 shrink-0 -rotate-90 text-text-dimmed opacity-0 transition-opacity group-hover/button:opacity-100" />
+                </span>
+              }
+              icon={FolderClosedIcon}
+              leadingIconClassName="h-5 w-5 text-indigo-500"
+              className={MENU_LABEL}
+            />
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -112,6 +112,7 @@ export const DateTime = ({
       }
       side="right"
       asChild={true}
+      delayDuration={500}
     />
   );
 };
@@ -291,6 +292,7 @@ const DateTimeAccurateInner = ({
       content={tooltipContent}
       side="right"
       asChild={true}
+      delayDuration={500}
     />
   );
 };
@@ -389,6 +391,7 @@ export const RelativeDateTime = ({ date, timeZone, capitalize = true }: Relative
       }
       side="right"
       asChild={true}
+      delayDuration={500}
     />
   );
 };