refactor(ui): replace modal implementation with Dialog component in R…

crates/agent-gateway/test/webui/markdown-image-policy.test.mjs

@@ -32,11 +32,6 @@ const loader = createWebModuleLoader({
     "../lib/shared/utils": {
       cn: (...parts) => parts.filter(Boolean).join(" "),
     },
-    "../lib/shared/modalMotion": {
-      useModalMotion(onClose) {
-        return { modalState: "open", requestClose: onClose };
-      },
-    },
   },
 });
 

crates/agent-gateway/web/src/app/AgentSelector.tsx

@@ -1,6 +1,7 @@
 import { Check } from "@liveagent/ui/components/IconSet";
 import { DropdownMenuItem, DropdownMenuLabel } from "@liveagent/ui/components/ui/dropdown-menu";
 import { useLocale } from "@liveagent/ui/i18n/index";
+import { cn } from "@liveagent/ui/lib/shared/utils";
 import { useEffect, useState } from "react";
 import type { GatewayWebSocketClientLike } from "@/lib/gatewaySocket";
 import type { AgentStatus } from "@/lib/gatewayTypes";
@@ -86,11 +87,12 @@ export function AgentSelector({
         <div className="px-2.5 pb-2.5 pt-1">
           <div className="flex min-w-0 items-center gap-2.5">
             <span
-              className={`h-2 w-2 shrink-0 rounded-full ${
+              className={cn(
+                "h-2 w-2 shrink-0 rounded-full",
                 agent.online
                   ? "bg-emerald-500 shadow-[0_0_0_3px_rgb(16_185_129_/_0.12)]"
-                  : "bg-rose-500 shadow-[0_0_0_3px_rgb(244_63_94_/_0.10)]"
-              }`}
+                  : "bg-rose-500 shadow-[0_0_0_3px_rgb(244_63_94_/_0.10)]",
+              )}
               title={statusLabel}
             >
               <span className="sr-only">{statusLabel}</span>
@@ -104,11 +106,12 @@ export function AgentSelector({
               </span>
             </span>
             <span
-              className={`shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium ${
+              className={cn(
+                "shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium",
                 agent.online
                   ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
-                  : "bg-rose-500/10 text-rose-600 dark:text-rose-400"
-              }`}
+                  : "bg-rose-500/10 text-rose-600 dark:text-rose-400",
+              )}
             >
               {statusLabel}
             </span>
@@ -139,11 +142,12 @@ export function AgentSelector({
               onSelect={() => handleChange(agentID)}
             >
               <span
-                className={`h-2 w-2 shrink-0 rounded-full ${
+                className={cn(
+                  "h-2 w-2 shrink-0 rounded-full",
                   agent.online
                     ? "bg-emerald-500 shadow-[0_0_0_3px_rgb(16_185_129_/_0.12)]"
-                    : "bg-rose-500 shadow-[0_0_0_3px_rgb(244_63_94_/_0.10)]"
-                }`}
+                    : "bg-rose-500 shadow-[0_0_0_3px_rgb(244_63_94_/_0.10)]",
+                )}
                 title={statusLabel}
               >
                 <span className="sr-only">{statusLabel}</span>

crates/agent-gateway/web/src/app/GatewayAppView.tsx

@@ -18,6 +18,7 @@ import { WorkspaceOverlayHost } from "@liveagent/ui/components/workspace-editor/
 import { LocaleContext, t as translate } from "@liveagent/ui/i18n/index";
 import type { PendingUploadedFile } from "@liveagent/ui/lib/chat/uploadedFiles";
 import { mergePendingUploadedFiles } from "@liveagent/ui/lib/chat/uploadedFiles";
+import { cn } from "@liveagent/ui/lib/shared/utils";
 import { ChatComposerBar } from "@liveagent/ui/pages/chat/ChatComposerBar";
 import { FloorNavRail } from "@liveagent/ui/pages/chat/transcript/FloorNavRail";
 import {
@@ -892,9 +893,10 @@ export function GatewayAppView({ viewModel }: { viewModel: GatewayAppViewModel }
 
           {settingsOpen ? (
             <div
-              className={`gateway-settings-overlay ${
-                overlay === "open" ? "gateway-settings-overlay-open" : ""
-              }`}
+              className={cn(
+                "gateway-settings-overlay",
+                overlay === "open" ? "gateway-settings-overlay-open" : "",
+              )}
               onTransitionEnd={handleSettingsTransitionEnd}
             >
               <SettingsPage

crates/agent-gateway/web/src/app/UserMenu.tsx

@@ -8,6 +8,7 @@ import {
   DropdownMenuTrigger,
 } from "@liveagent/ui/components/ui/dropdown-menu";
 import { useLocale } from "@liveagent/ui/i18n/index";
+import { cn } from "@liveagent/ui/lib/shared/utils";
 import type { ReactNode } from "react";
 
 type UserMenuProps = {
@@ -58,7 +59,10 @@ export function UserMenu(props: UserMenuProps) {
         <span className="relative flex h-6 w-6 items-center justify-center rounded-full bg-gradient-to-br from-emerald-500/90 to-sky-500/90 text-[calc(11px*var(--zone-font-scale,1))] font-semibold text-white">
           {userAvatarLabel || <User className="h-3.5 w-3.5" />}
           <span
-            className={`absolute -bottom-1 -right-1 h-3 w-3 rounded-full shadow-sm ring-2 ring-background ${statusDotClass}`}
+            className={cn(
+              "absolute -bottom-1 -right-1 h-3 w-3 rounded-full shadow-sm ring-2 ring-background",
+              statusDotClass,
+            )}
           >
             <span className="sr-only">{statusLabel}</span>
           </span>