fix(dashboard): hydration warnings

apps/dashboard/app/(app)/authorization/permissions/[permissionId]/delete-permission.tsx

@@ -67,7 +67,7 @@ export const DeletePermission: React.FC<Props> = ({ trigger, permission }) => {
 
   return (
     <Dialog open={open} onOpenChange={(o) => setOpen(o)}>
-      <DialogTrigger>{trigger}</DialogTrigger>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
       <DialogContent className="border-alert p-4 max-w-md mx-auto">
         <DialogHeader>
           <DialogTitle>Delete Permission</DialogTitle>

apps/dashboard/app/(app)/authorization/permissions/[permissionId]/page.tsx

@@ -84,10 +84,12 @@ export default async function RolesPage(props: Props) {
             className="w-40 font-mono font-medium ph-no-capture"
           >
             <Tooltip>
-              <TooltipTrigger className="flex items-center justify-between gap-2 truncate">
-                <span className="truncate">{permission.name}</span>
-                <div>
-                  <CopyButton value={permission.name} />
+              <TooltipTrigger asChild>
+                <div className="flex items-center justify-between gap-2 truncate">
+                  <span className="truncate">{permission.name}</span>
+                  <div>
+                    <CopyButton value={permission.name} />
+                  </div>
                 </div>
               </TooltipTrigger>
               {shouldShowTooltip && (

apps/dashboard/app/(app)/authorization/permissions/create-new-permission.tsx

@@ -75,7 +75,7 @@ export const CreateNewPermission: React.FC<Props> = ({ trigger }) => {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger>{trigger}</DialogTrigger>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Create a new permission</DialogTitle>

apps/dashboard/app/(app)/authorization/roles/[roleId]/delete-role.tsx

@@ -68,7 +68,7 @@ export const DeleteRole: React.FC<Props> = ({ trigger, role }) => {
 
   return (
     <Dialog open={open} onOpenChange={(o) => setOpen(o)}>
-      <DialogTrigger>{trigger}</DialogTrigger>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
       <DialogContent className="border-alert">
         <DialogHeader>
           <DialogTitle>Delete Role</DialogTitle>

apps/dashboard/app/(app)/authorization/roles/[roleId]/update-role.tsx

@@ -74,7 +74,7 @@ export const UpdateRole: React.FC<Props> = ({ trigger, role }) => {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger>{trigger}</DialogTrigger>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Update Role</DialogTitle>

apps/dashboard/app/(app)/authorization/roles/create-new-role.tsx

@@ -95,7 +95,7 @@ export const CreateNewRole: React.FC<Props> = ({ trigger, permissions }) => {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger>{trigger}</DialogTrigger>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Create a new role</DialogTitle>

apps/dashboard/app/(app)/ratelimits/[namespaceId]/page.tsx

@@ -228,11 +228,11 @@ export default async function RatelimitNamespacePage(props: {
           <EmptyPlaceholder.Title>No usage</EmptyPlaceholder.Title>
           <EmptyPlaceholder.Description>
             Ratelimit something or change the range
-            <Code className="flex items-start gap-8 p-4 my-8 text-xs text-left">
-              {snippet}
-              <CopyButton value={snippet} />
-            </Code>
           </EmptyPlaceholder.Description>
+          <Code className="flex items-start gap-8 p-4 my-8 text-xs text-left">
+            {snippet}
+            <CopyButton value={snippet} />
+          </Code>
         </EmptyPlaceholder>
       )}
 
@@ -272,11 +272,11 @@ export default async function RatelimitNamespacePage(props: {
           <EmptyPlaceholder.Title>No usage</EmptyPlaceholder.Title>
           <EmptyPlaceholder.Description>
             Ratelimit something or change the range
-            <Code className="flex items-start gap-8 p-4 my-8 text-xs text-left">
-              {snippet}
-              <CopyButton value={snippet} />
-            </Code>
           </EmptyPlaceholder.Description>
+          <Code className="flex items-start gap-8 p-4 my-8 text-xs text-left">
+            {snippet}
+            <CopyButton value={snippet} />
+          </Code>
         </EmptyPlaceholder>
       )}
     </div>

apps/dashboard/app/(app)/ratelimits/sparkline.tsx

@@ -12,7 +12,7 @@ type Props = {
   }[];
 };
 
-export const Sparkline: React.FC<Props> = async ({ data }) => {
+export const Sparkline: React.FC<Props> = ({ data }) => {
   const data2 = data.map((d) => ({
     date: new Date(d.time),
     values: d.values,

apps/dashboard/app/(app)/semantic-cache/[gatewayId]/analytics/page.tsx

@@ -6,11 +6,7 @@ import { Code } from "@/components/ui/code";
 import { Separator } from "@/components/ui/separator";
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
-import {
-  getAllSemanticCacheLogs,
-  getSemanticCachesDaily,
-  getSemanticCachesHourly,
-} from "@/lib/tinybird";
+import { getSemanticCachesDaily, getSemanticCachesHourly } from "@/lib/tinybird";
 import { BarChart } from "lucide-react";
 import ms from "ms";
 import { redirect } from "next/navigation";
@@ -220,11 +216,11 @@ export default async function SemanticCacheAnalyticsPage(props: {
           <EmptyPlaceholder.Title>No usage</EmptyPlaceholder.Title>
           <EmptyPlaceholder.Description>
             Use the snippet below to start using the semantic cache.
-            <Code className="flex items-start gap-8 p-4 my-8 text-xs text-left">
-              {snippet}
-              <CopyButton value={snippet} />
-            </Code>
           </EmptyPlaceholder.Description>
+          <Code className="flex items-start gap-8 p-4 my-8 text-xs text-left">
+            {snippet}
+            <CopyButton value={snippet} />
+          </Code>
         </EmptyPlaceholder>
       )}
     </div>

apps/dashboard/app/(app)/settings/billing/plans/button.tsx

@@ -60,7 +60,7 @@ export const ChangePlanButton: React.FC<Props> = ({ workspace, newPlan, label })
   const isSamePlan = workspace.plan === newPlan;
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger disabled={isSamePlan && !workspace.planDowngradeRequest}>
+      <DialogTrigger asChild disabled={isSamePlan && !workspace.planDowngradeRequest}>
         <Button
           className="w-full"
           variant={

apps/dashboard/app/(app)/settings/billing/stripe/success/page.tsx

@@ -55,9 +55,10 @@ export default async function StripeSuccess(props: Props) {
     return (
       <EmptyPlaceholder>
         <EmptyPlaceholder.Title>Stripe session not found</EmptyPlaceholder.Title>
+        <EmptyPlaceholder.Description>The Stripe session</EmptyPlaceholder.Description>
+        <Code>{session_id}</Code>
         <EmptyPlaceholder.Description>
-          The Stripe session <Code>{session_id}</Code> you are trying to access does not exist.
-          Please contact support@unkey.dev.
+          you are trying to access does not exist. Please contact support@unkey.dev.
         </EmptyPlaceholder.Description>
       </EmptyPlaceholder>
     );
@@ -66,10 +67,11 @@ export default async function StripeSuccess(props: Props) {
   if (!customer) {
     return (
       <EmptyPlaceholder>
-        <EmptyPlaceholder.Title>Stripe session not found</EmptyPlaceholder.Title>
+        <EmptyPlaceholder.Title>Stripe customer not found</EmptyPlaceholder.Title>
+        <EmptyPlaceholder.Description>The Stripe customer</EmptyPlaceholder.Description>
+        <Code>{session.customer as string}</Code>
         <EmptyPlaceholder.Description>
-          The Stripe customer <Code>{session.customer as string}</Code> you are trying to access
-          does not exist. Please contact support@unkey.dev.
+          you are trying to access does not exist. Please contact support@unkey.dev.
         </EmptyPlaceholder.Description>
       </EmptyPlaceholder>
     );

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

@@ -12,7 +12,7 @@ import {
 import { Label } from "@/components/ui/label";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import type { Permission } from "@unkey/db";
-import { Check, Pencil } from "lucide-react";
+import { Check } from "lucide-react";
 import { PermissionToggle } from "./permission_toggle";
 import type { UnkeyPermissions } from "./permissions";
 
@@ -62,7 +62,7 @@ export function PermissionManagerCard(props: PermissionManagerCardProps) {
 
               <div className="flex flex-col w-full gap-4">
                 {Object.entries(props.permissionsStructure).map(([category, allPermissions]) => (
-                  <div className="flex flex-col gap-2">
+                  <div key={category} className="flex flex-col gap-2">
                     <span className="font-medium">{category}</span>{" "}
                     <div className="flex flex-col gap-1">
                       {Object.entries(allPermissions).map(
@@ -96,7 +96,7 @@ export function PermissionManagerCard(props: PermissionManagerCardProps) {
             </p>
           )}
           {activePermissions.map(([category, allPermissions]) => (
-            <div className="flex flex-col gap-2">
+            <div key={category} className="flex flex-col gap-2">
               <span className="font-medium">{category}</span>{" "}
               <div className="flex flex-col gap-1">
                 {Object.entries(allPermissions)
@@ -105,7 +105,7 @@ export function PermissionManagerCard(props: PermissionManagerCardProps) {
                   })
                   .map(([action, { description, permission }]) => {
                     return (
-                      <div className="flex items-center gap-8">
+                      <div key={action} className="flex items-center gap-8">
                         <div className="w-1/3 ">
                           <Tooltip>
                             <TooltipTrigger className="flex items-center gap-2">

apps/dashboard/app/(app)/settings/vercel/page.tsx

@@ -66,8 +66,8 @@ export default async function Page(props: Props) {
         <EmptyPlaceholder.Title>Error</EmptyPlaceholder.Title>
         <EmptyPlaceholder.Description>
           We couldn't load your projects from Vercel. Please try again or contact support.
-          <Code className="text-left">{JSON.stringify(err, null, 2)}</Code>
         </EmptyPlaceholder.Description>
+        <Code className="text-left">{JSON.stringify(err, null, 2)}</Code>
       </EmptyPlaceholder>
     );
   }

apps/dashboard/app/(app)/team-switcher.tsx

@@ -80,7 +80,7 @@ export const WorkspaceSwitcher: React.FC = (): JSX.Element => {
             <Loading />
           ) : (
             <Tooltip>
-              <TooltipTrigger className="w-full overflow-hidden text-ellipsis">
+              <TooltipTrigger asChild>
                 <span className="overflow-hidden text-sm font-medium text-ellipsis">
                   {currentOrg?.name ?? "Personal Workspace"}
                 </span>

apps/dashboard/app/(app)/user-button.tsx

@@ -35,7 +35,7 @@ export const UserButton: React.FC = () => {
           </Avatar>
 
           <Tooltip>
-            <TooltipTrigger className="w-full overflow-hidden text-ellipsis">
+            <TooltipTrigger asChild>
               <span className="overflow-hidden text-ellipsis text-sm font-medium">
                 {user.username ?? user.fullName ?? user.primaryEmailAddress?.emailAddress}
               </span>

apps/dashboard/components/dashboard/empty-placeholder.tsx

@@ -48,7 +48,7 @@ EmptyPlaceholder.Description = function EmptyPlaceholderDescription({
   return (
     <p
       className={cn(
-        "text-content-subtle mb-8 mt-2 text-center text-sm font-normal leading-6",
+        "text-content-subtle mb-2 mt-2 text-center text-sm font-normal leading-6",
         className,
       )}
       {...props}