From 35e144e25cea62617a9ec9383fa678b29c192751 Mon Sep 17 00:00:00 2001
From: Aman Ganapathy <84686202+nams1570@users.noreply.github.com>
Date: Wed, 10 Jun 2026 13:22:01 -0700
Subject: [PATCH] feat(emails): disable unavailable email server options for
 local (#1576)

### Context
When working with local install, we can't send emails with resend keys/
managed domain/ custom smtp as of yet.
So, we disable those buttons and indicate to the user what's going on.

<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Disables unsupported email server options when running the dashboard
locally. Only the `shared` provider is selectable; others are disabled
with a clear tooltip.

- **New Features**
- In local development, disables Resend, Managed Domain, and Custom
SMTP; only `shared` remains enabled.
- Shows tooltip: "These email server options are not supported when
running dashboard locally." and applies disabled, non-interactive styles
without changing the card layout.

<sup>Written for commit 49828fd6877e1f2f25c4e2455b6f5a103089117e.
Summary will update on new commits.</sup>

<a
href="https://cubic.dev/pr/hexclave/hexclave/pull/1576?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>

<!-- End of auto-generated description by cubic. -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Email provider selection UI now disables non-shared providers when the
dashboard is running in a local development/emulator environment, and
shows explanatory tooltips on the disabled provider cards. A
shared-environment tooltip string was added to clarify which option is
supported locally, improving clarity when configuring email settings.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../email-settings/domain-settings.tsx           | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-settings/domain-settings.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-settings/domain-settings.tsx
index 2d23edf8b..3e508f1c5 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-settings/domain-settings.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-settings/domain-settings.tsx
@@ -34,7 +34,7 @@ import {
 } from "@phosphor-icons/react";
 import { throwErr } from "@hexclave/shared/dist/utils/errors";
 import { runAsynchronously, runAsynchronouslyWithAlert } from "@hexclave/shared/dist/utils/promises";
-import { ActionDialog, Dialog, DialogContent, DialogTitle, Label, Popover, PopoverContent, PopoverTrigger, Typography, useToast } from "@/components/ui";
+import { ActionDialog, Dialog, DialogContent, DialogTitle, Label, Popover, PopoverContent, PopoverTrigger, SimpleTooltip, Typography, useToast } from "@/components/ui";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import * as yup from "yup";
 import Image from "next/image";
@@ -178,6 +178,8 @@ const PROVIDERS: ProviderMeta[] = [
   },
 ];
 
+const REMOTE_DEVELOPMENT_ENVIRONMENT_EMAIL_PROVIDER_TOOLTIP = "These email server options are not supported when running dashboard locally.";
+
 function TestSendingDialog(props: { trigger: React.ReactNode }) {
   const hexclaveAdminApp = useAdminApp();
   const project = hexclaveAdminApp.useProject();
@@ -960,18 +962,21 @@ export function DomainSettings() {
               const isSelected = serverType === p.value;
               const isSaved = savedServerType === p.value;
               const isDraft = isSelected && !isSaved;
+              const isDisabledInDevelopmentEnvironment = project.isDevelopmentEnvironment && p.value !== "shared";
               const Icon = p.icon;
-              return (
+              const button = (
                 <button
                   key={p.value}
                   type="button"
+                  disabled={isDisabledInDevelopmentEnvironment}
                   onClick={() => handleSelectProvider(p.value)}
                   className={cn(
-                    "relative text-left rounded-xl border p-4 transition-all",
+                    "relative h-full w-full text-left rounded-xl border p-4 transition-all disabled:pointer-events-none",
                     isSaved && "border-green-500/40 bg-green-500/[0.04]",
                     isDraft && "border-amber-500/50 bg-amber-500/[0.04] ring-1 ring-amber-500/20 border-dashed",
                     !isSaved && !isDraft && "border-border/60 hover:border-foreground/20 hover:bg-foreground/[0.02]",
                     isSelected && !isDraft && !isSaved && "border-foreground/40 bg-foreground/[0.03] shadow-sm ring-1 ring-foreground/10",
+                    isDisabledInDevelopmentEnvironment && "cursor-not-allowed opacity-50 hover:border-border/60 hover:bg-transparent",
                   )}
                 >
                   <div className="absolute top-2 right-2 flex items-center gap-1">
@@ -994,6 +999,11 @@ export function DomainSettings() {
                   <div className="text-xs text-muted-foreground mt-1 leading-relaxed">{p.tagline}</div>
                 </button>
               );
+              return isDisabledInDevelopmentEnvironment ? (
+                <SimpleTooltip key={p.value} tooltip={REMOTE_DEVELOPMENT_ENVIRONMENT_EMAIL_PROVIDER_TOOLTIP} inline className="block h-full">
+                  {button}
+                </SimpleTooltip>
+              ) : button;
             })}
           </div>