feat(auth): Make region picker prominent on sign-in

apps/code/src/renderer/features/auth/components/OAuthControls.tsx

@@ -1,7 +1,6 @@
 import { useOAuthFlow } from "@features/auth/hooks/useOAuthFlow";
 import { Callout, Flex, Spinner } from "@radix-ui/themes";
 import posthogIcon from "@renderer/assets/images/posthog-icon.svg";
-import { REGION_LABELS } from "@shared/types/regions";
 import { RegionSelect } from "./RegionSelect";
 
 export function OAuthControls() {
@@ -15,7 +14,13 @@ export function OAuthControls() {
   } = useOAuthFlow();
 
   return (
-    <>
+    <Flex direction="column" gap="3" className="w-full">
+      <RegionSelect
+        region={region}
+        onRegionChange={handleRegionChange}
+        disabled={isPending}
+      />
+
       {errorMessage && (
         <Callout.Root color="red" size="1">
           <Callout.Text>{errorMessage}</Callout.Text>
@@ -50,15 +55,6 @@ export function OAuthControls() {
         )}
         {isPending ? "Cancel" : "Sign in / sign up with PostHog"}
       </button>
-
-      <Flex direction="column" gap="2" align="center">
-        <RegionSelect
-          region={region}
-          regionLabel={REGION_LABELS[region]}
-          onRegionChange={handleRegionChange}
-          disabled={isPending}
-        />
-      </Flex>
-    </>
+    </Flex>
   );
 }

apps/code/src/renderer/features/auth/components/RegionSelect.tsx

@@ -1,82 +1,82 @@
-import { Flex, Select, Text } from "@radix-ui/themes";
+import { Flex, Text } from "@radix-ui/themes";
 import { IS_DEV } from "@shared/constants/environment";
-import type { CloudRegion } from "@shared/types/regions";
-import { useState } from "react";
+import { type CloudRegion, REGION_LABELS } from "@shared/types/regions";
 
 interface RegionSelectProps {
   region: CloudRegion;
-  regionLabel: string;
   onRegionChange: (region: CloudRegion) => void;
   disabled?: boolean;
 }
 
+const LOGIN_GRID_REGIONS: CloudRegion[] = ["us", "eu"];
+
 export function RegionSelect({
   region,
-  regionLabel,
   onRegionChange,
   disabled = false,
 }: RegionSelectProps) {
-  const [expanded, setExpanded] = useState(false);
-
-  if (!expanded) {
-    return (
-      <Text className="mt-[10px] text-sm">
-        <span className="text-(--gray-12) opacity-50">
-          {regionLabel}
-          {" \u00B7 "}
-        </span>
-        <button
-          type="button"
-          onClick={() => setExpanded(true)}
-          disabled={disabled}
-          style={{
-            cursor: disabled ? "not-allowed" : "pointer",
-            fontSize: "inherit",
-            opacity: disabled ? 0.5 : 1,
-          }}
-          className="border-0 bg-transparent p-0 font-medium text-(--accent-9)"
-        >
-          change
-        </button>
-      </Text>
-    );
-  }
-
   return (
-    <Flex direction="column" gap="2" className="mt-[10px] w-full">
+    <Flex direction="column" gap="2" className="w-full">
       <Flex justify="between" align="center">
-        <Text className="font-medium text-(--gray-12) text-sm opacity-60">
+        <Text className="font-medium text-(--gray-12) text-sm">
           PostHog region
         </Text>
-        <Text className="text-(--gray-12) text-sm opacity-50">
-          <button
-            type="button"
-            onClick={() => setExpanded(false)}
-            style={{
-              fontSize: "inherit",
-            }}
-            className="cursor-pointer border-0 bg-transparent p-0 font-medium text-(--accent-9)"
-          >
-            cancel
-          </button>
+        <Text className="text-(--gray-11) text-xs">
+          Pick where your data lives
         </Text>
       </Flex>
-      <Select.Root
-        value={region}
-        onValueChange={(value) => {
-          onRegionChange(value as CloudRegion);
-          setExpanded(false);
-        }}
-        size="2"
-        disabled={disabled}
-      >
-        <Select.Trigger />
-        <Select.Content>
-          <Select.Item value="us">US Cloud</Select.Item>
-          <Select.Item value="eu">EU Cloud</Select.Item>
-          {IS_DEV && <Select.Item value="dev">Development</Select.Item>}
-        </Select.Content>
-      </Select.Root>
+      <div className="grid w-full grid-cols-2 gap-2">
+        {LOGIN_GRID_REGIONS.map((regionKey) => (
+          <RegionPickerOptionButton
+            key={regionKey}
+            regionKey={regionKey}
+            selected={regionKey === region}
+            disabled={disabled}
+            onSelect={() => onRegionChange(regionKey)}
+          />
+        ))}
+      </div>
+      {IS_DEV && (
+        <RegionPickerOptionButton
+          regionKey="dev"
+          selected={region === "dev"}
+          disabled={disabled}
+          onSelect={() => onRegionChange("dev")}
+        />
+      )}
     </Flex>
   );
 }
+
+function RegionPickerOptionButton({
+  regionKey,
+  selected,
+  disabled,
+  onSelect,
+}: {
+  regionKey: CloudRegion;
+  selected: boolean;
+  disabled: boolean;
+  onSelect: () => void;
+}) {
+  const { flag, label, hint } = REGION_LABELS[regionKey];
+  return (
+    <button
+      type="button"
+      aria-pressed={selected}
+      onClick={onSelect}
+      disabled={disabled}
+      className={`flex w-full flex-col items-start gap-[2px] rounded-[8px] border-[1.5px] px-3 py-2 text-left transition-colors ${
+        selected
+          ? "border-(--accent-9) bg-(--accent-3) text-(--gray-12)"
+          : "border-(--gray-6) bg-transparent text-(--gray-12) hover:border-(--gray-8)"
+      } ${disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"}`}
+    >
+      <Flex align="center" gap="2" className="w-full">
+        <span className="text-[18px] leading-none">{flag}</span>
+        <Text className="font-semibold text-(--gray-12) text-sm">{label}</Text>
+      </Flex>
+      <Text className="pl-[26px] text-(--gray-11) text-xs">{hint}</Text>
+    </button>
+  );
+}

apps/code/src/renderer/features/settings/components/sections/AccountSettings.tsx

@@ -7,7 +7,7 @@ import {
 import { useSeat } from "@hooks/useSeat";
 import { SignOut } from "@phosphor-icons/react";
 import { Avatar, Badge, Button, Flex, Spinner, Text } from "@radix-ui/themes";
-import { REGION_LABELS } from "@shared/types/regions";
+import { formatRegionBadge } from "@shared/types/regions";
 
 export function AccountSettings() {
   const isAuthenticated = useAuthStateValue(
@@ -66,7 +66,7 @@ export function AccountSettings() {
             </Text>
             {cloudRegion && (
               <Badge size="1" variant="soft">
-                {REGION_LABELS[cloudRegion]}
+                {formatRegionBadge(cloudRegion)}
               </Badge>
             )}
             {seat && (

apps/code/src/shared/types/regions.ts

@@ -1,7 +1,30 @@
 export type CloudRegion = "us" | "eu" | "dev";
 
-export const REGION_LABELS: Record<CloudRegion, string> = {
-  us: "🇺🇸 US Cloud",
-  eu: "🇪🇺 EU Cloud",
-  dev: "🛠️ Development",
+export interface RegionLabel {
+  flag: string;
+  label: string;
+  hint: string;
+}
+
+export const REGION_LABELS: Record<CloudRegion, RegionLabel> = {
+  us: {
+    flag: "🇺🇸",
+    label: "US Cloud",
+    hint: "us.posthog.com",
+  },
+  eu: {
+    flag: "🇪🇺",
+    label: "EU Cloud",
+    hint: "eu.posthog.com",
+  },
+  dev: {
+    flag: "🛠️",
+    label: "Local development",
+    hint: "localhost:8010",
+  },
 };
+
+export function formatRegionBadge(region: CloudRegion): string {
+  const entry = REGION_LABELS[region];
+  return `${entry.flag} ${entry.label}`;
+}