chore: Move toaster to UI step 5

apps/dashboard/app/(app)/ratelimits/[namespaceId]/_components/identifier-dialog.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { CircleInfo } from "@unkey/icons";
@@ -14,6 +13,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
+  toast,
 } from "@unkey/ui";
 import type { PropsWithChildren } from "react";
 import { Controller, useForm } from "react-hook-form";

apps/dashboard/app/(app)/ratelimits/[namespaceId]/_components/namespace-delete-dialog.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, DialogContainer, Input } from "@unkey/ui";
+import { Button, DialogContainer, Input, toast } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";

apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/controls/components/logs-search/index.tsx

@@ -1,7 +1,5 @@
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { LLMSearch } from "@unkey/ui";
-import { transformStructuredOutputToFilters } from "@unkey/ui";
+import { LLMSearch, toast, transformStructuredOutputToFilters } from "@unkey/ui";
 import { useFilters } from "../../../../hooks/use-filters";
 
 export const LogsSearch = () => {

apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/logs-actions/index.tsx

@@ -5,8 +5,8 @@ import { DeleteDialog } from "@/app/(app)/ratelimits/[namespaceId]/_components/d
 import { IdentifierDialog } from "@/app/(app)/ratelimits/[namespaceId]/_components/identifier-dialog";
 import type { OverrideDetails } from "@/app/(app)/ratelimits/[namespaceId]/types";
 import { type MenuItem, TableActionPopover } from "@/components/logs/table-action.popover";
-import { toast } from "@/components/ui/toaster";
 import { Clone, Layers3, PenWriting3, Trash } from "@unkey/icons";
+import { toast } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useFilters } from "../../../../hooks/use-filters";
 

apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/controls/components/logs-search/index.tsx

@@ -1,7 +1,5 @@
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { LLMSearch } from "@unkey/ui";
-import { transformStructuredOutputToFilters } from "@unkey/ui";
+import { LLMSearch, toast, transformStructuredOutputToFilters } from "@unkey/ui";
 import { useFilters } from "../../../../hooks/use-filters";
 
 export const LogsSearch = () => {

apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/logs-actions/index.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { type MenuItem, TableActionPopover } from "@/components/logs/table-action.popover";
-import { toast } from "@/components/ui/toaster";
 import { Clone, InputSearch } from "@unkey/icons";
+import { toast } from "@unkey/ui";
 import { useFilters } from "../../../hooks/use-filters";
 
 export const LogsTableAction = ({ identifier }: { identifier: string }) => {

apps/dashboard/app/(app)/ratelimits/[namespaceId]/overrides/logs-actions/index.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { type MenuItem, TableActionPopover } from "@/components/logs/table-action.popover";
-import { toast } from "@/components/ui/toaster";
 import { Clone, PenWriting3, Trash } from "@unkey/icons";
+import { toast } from "@unkey/ui";
 import { DeleteDialog } from "../../_components/delete-dialog";
 import { IdentifierDialog } from "../../_components/identifier-dialog";
 import type { OverrideDetails } from "../../types";

apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/components/settings-client.tsx

@@ -1,9 +1,7 @@
 "use client";
 
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { Clone } from "@unkey/icons";
-import { Button, Input, SettingCard } from "@unkey/ui";
+import { Button, CopyButton, Input, SettingCard, toast } from "@unkey/ui";
 import { useEffect, useState } from "react";
 import { DeleteNamespaceDialog } from "../../_components/namespace-delete-dialog";
 import { SettingsClientSkeleton } from "./skeleton";
@@ -66,7 +64,6 @@ export const SettingsClient = ({ namespaceId }: Props) => {
   }
 
   const { namespace } = data;
-
   return (
     <>
       <div className="py-3 w-full flex items-center justify-center">
@@ -119,26 +116,11 @@ export const SettingsClient = ({ namespaceId }: Props) => {
                 border="bottom"
                 contentWidth="w-full lg:w-[320px] h-full justify-end items-end"
               >
-                <div className="flex flex-row justify-end items-center gap-x-2 mt-1 w-full h-9">
-                  <Input
-                    readOnly
-                    defaultValue={namespace.id}
-                    placeholder="Namespace name"
-                    className="w-full focus:ring-0 focus:ring-offset-0 h-full"
-                    rightIcon={
-                      <button
-                        type="button"
-                        onClick={() => {
-                          navigator.clipboard.writeText(namespace.id);
-                          toast.success("Copied to clipboard", {
-                            description: namespace.id,
-                          });
-                        }}
-                      >
-                        <Clone size="md-regular" />
-                      </button>
-                    }
-                  />
+                <div className="flex flex-row justify-end items-center pl-4 pr-3 w-full h-9 border border-gray-5 hover:border-gray-8 bg-gray-2 dark:bg-black rounded-lg min-w-[327px]">
+                  <pre className="flex-1 text-xs text-left overflow-x-auto">
+                    <code>{namespace.id}</code>
+                  </pre>
+                  <CopyButton value={namespace.id} variant="ghost" size="sm" />
                 </div>
               </SettingCard>
             </div>

apps/dashboard/app/(app)/ratelimits/_components/controls/components/logs-search/index.tsx

@@ -1,6 +1,5 @@
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { LLMSearch } from "@unkey/ui";
+import { LLMSearch, toast } from "@unkey/ui";
 import { useRef } from "react";
 
 type LogsSearchProps = {

apps/dashboard/app/(app)/ratelimits/_components/create-namespace-button.tsx

@@ -2,10 +2,9 @@
 
 import { revalidate } from "@/app/actions";
 import { NavbarActionButton } from "@/components/navigation/action-button";
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, DialogContainer, FormInput } from "@unkey/ui";
+import { Button, DialogContainer, FormInput, toast } from "@unkey/ui";
 import { Plus } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -47,11 +46,11 @@ export const CreateNamespaceButton = ({
 
   const create = trpc.ratelimit.namespace.create.useMutation({
     async onSuccess(res) {
-      toast.success("Your Namespace has been created");
       router.refresh();
       await revalidate("/ratelimits");
       ratelimit.namespace.query.invalidate();
       router.push(`/ratelimits/${res.id}`);
+      toast.success("Your Namespace has been created");
       setIsOpen(false);
     },
     onError(err) {

apps/dashboard/app/(app)/settings/billing/client.tsx

@@ -1,10 +1,9 @@
 "use client";
-import { toast } from "@/components/ui/toaster";
 import type { Workspace } from "@/lib/db";
 import { formatNumber } from "@/lib/fmt";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
-import { Button, Empty, SettingCard } from "@unkey/ui";
+import { Button, Empty, SettingCard, toast } from "@unkey/ui";
 import ms from "ms";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -89,7 +88,6 @@ const Mutations = () => {
 
 export const Client: React.FC<Props> = (props) => {
   const mutations = Mutations();
-
   const allowUpdate =
     props.subscription && ["active", "trialing"].includes(props.subscription.status);
   const allowCancel =

apps/dashboard/app/(app)/settings/general/update-workspace-name.tsx

@@ -1,8 +1,7 @@
 "use client";
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, FormInput, SettingCard } from "@unkey/ui";
+import { Button, FormInput, SettingCard, toast } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm } from "react-hook-form";

apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/legacy.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Alert, AlertDescription } from "@/components/ui/alert";
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import type { Permission } from "@unkey/db";
 import {
@@ -12,6 +11,7 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
+  toast,
 } from "@unkey/ui";
 import { Loader2 } from "lucide-react";
 import { useRouter } from "next/navigation";

apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/permission_toggle.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import { Label } from "@/components/ui/label";
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { Checkbox } from "@unkey/ui";
+import { Checkbox, toast } from "@unkey/ui";
 import { Loader2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";

apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx

@@ -1,9 +1,17 @@
 "use client";
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, Card, CardContent, CardFooter, CardHeader, CardTitle, FormInput } from "@unkey/ui";
+import {
+  Button,
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  FormInput,
+  toast,
+} from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";

apps/dashboard/app/(app)/settings/root-keys/components/controls/components/root-keys-search/index.tsx

@@ -1,7 +1,6 @@
 import { transformStructuredOutputToFilters } from "@/components/logs/validation/utils/transform-structured-output-filter-format";
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
-import { LLMSearch } from "@unkey/ui";
+import { LLMSearch, toast } from "@unkey/ui";
 import { useFilters } from "../../../../hooks/use-filters";
 
 export const RootKeysSearch = () => {

apps/dashboard/app/(app)/settings/root-keys/components/table/components/actions/components/hooks/use-delete-root-key.ts

@@ -1,5 +1,5 @@
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { toast } from "@unkey/ui";
 
 export const useDeleteRootKey = (
   onSuccess: (data: { keyIds: string[]; message: string }) => void,

apps/dashboard/app/(app)/settings/root-keys/new/client.tsx

@@ -4,7 +4,6 @@ import { ConfirmPopover } from "@/components/confirmation-popover";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
-import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { Check, CircleInfo, Key2 } from "@unkey/icons";
 import { type UnkeyPermission, unkeyPermissionValidation } from "@unkey/rbac";
@@ -21,6 +20,7 @@ import {
   InfoTooltip,
   Input,
   VisibleButton,
+  toast,
 } from "@unkey/ui";
 import { ArrowRight, ChevronRight } from "lucide-react";
 import { useRouter } from "next/navigation";

apps/dashboard/components/navigation/copyable-id-button.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { Button, CopyButton, toast } from "@unkey/ui";
+import { Button, CopyButton } from "@unkey/ui";
 import { useRef } from "react";
 
 type CopyableIDButtonProps = {
@@ -52,9 +52,6 @@ export const CopyableIDButton = ({ value, className = "" }: CopyableIDButtonProp
     } else {
       // Programmatically click the CopyButton if text isn't selected
       copyButtonRef.current?.click();
-      toast.success("Copied to clipboard", {
-        description: value,
-      });
     }
   };
 
@@ -76,13 +73,7 @@ export const CopyableIDButton = ({ value, className = "" }: CopyableIDButtonProp
           variant="ghost"
           value={value}
           ref={copyButtonRef}
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            toast.success("Copied to clipboard", {
-              description: value,
-            });
-          }}
+          toastMessage={value}
           className="pointer-events-none flex-shrink-0"
         />
       </div>

internal/ui/src/components/buttons/copy-button.tsx

@@ -25,7 +25,7 @@ async function copyToClipboardWithMeta(value: string, _meta?: Record<string, unk
 }
 
 export const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
-  ({ value, src, variant = "outline", className, toastMessage, ...props }, ref) => {
+  ({ value, src, variant = "outline", className, toastMessage, onClick, ...props }, ref) => {
     const [copied, setCopied] = React.useState(false);
 
     React.useEffect(() => {
@@ -63,6 +63,8 @@ export const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
               });
             }
             setCopied(true);
+            // Call the onClick prop if provided
+            onClick?.(e);
           }
         }}
         aria-label="Copy to clipboard"