From 0e8f7d5a15e1904ac337a92ed7471eb9709e6570 Mon Sep 17 00:00:00 2001
From: 0xFirekeeper <0xFirekeeper@gmail.com>
Date: Thu, 27 Aug 2026 08:22:35 +0700
Subject: [PATCH] [Dashboard] Close the unlock dialog on Enter and accept
 className

Pressing Enter in the vault unlock dialog set the key but left the dialog
open; the button path closed it. Both now behave the same.

Adds a className prop to ListAccessTokens and RotateAdminKeyButton so parents
can style them.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../vault/components/list-access-tokens.client.tsx | 14 ++++++++++++--
 .../vault/components/rotate-admin-key.client.tsx   |  6 +++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/vault/components/list-access-tokens.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/vault/components/list-access-tokens.client.tsx
index e474c726f71..e27e136dc05 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/vault/components/list-access-tokens.client.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/vault/components/list-access-tokens.client.tsx
@@ -20,9 +20,13 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
 import { toDateTimeLocal } from "@/utils/date-utils";
 
-export default function ListAccessTokens(props: { project: Project }) {
+export default function ListAccessTokens(props: {
+  project: Project;
+  className?: string;
+}) {
   const [modalOpen, setModalOpen] = useState(false);
   const [typedUnlockKey, setTypedUnlockKey] = useState("");
   const [unlockKey, setUnlockKey] = useState("");
@@ -99,7 +103,12 @@ export default function ListAccessTokens(props: { project: Project }) {
   };
 
   return (
-    <div className="flex flex-col gap-6 overflow-hidden rounded-lg border border-border bg-card">
+    <div
+      className={cn(
+        "flex flex-col gap-6 overflow-hidden rounded-lg border border-border bg-card",
+        props.className,
+      )}
+    >
       <div className="flex flex-col px-6 pt-6">
         <div className="flex flex-row items-center justify-between">
           <div className="flex flex-col">
@@ -252,6 +261,7 @@ export default function ListAccessTokens(props: { project: Project }) {
                   onKeyDown={(e) => {
                     if (e.key === "Enter") {
                       setUnlockKey(typedUnlockKey);
+                      handleCloseModal();
                     }
                   }}
                   placeholder={
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/vault/components/rotate-admin-key.client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/vault/components/rotate-admin-key.client.tsx
index 9795e75eb69..dcc8b831f23 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/vault/components/rotate-admin-key.client.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/vault/components/rotate-admin-key.client.tsx
@@ -33,6 +33,7 @@ import { maskSecret } from "../../transactions/lib/vault.client";
 export default function RotateAdminKeyButton(props: {
   project: Project;
   isManagedVault: boolean;
+  className?: string;
 }) {
   const [modalOpen, setModalOpen] = useState(false);
   const [keysConfirmed, setKeysConfirmed] = useState(false);
@@ -110,7 +111,10 @@ export default function RotateAdminKeyButton(props: {
   return (
     <>
       <Button
-        className="h-auto gap-2 rounded-lg bg-background px-4 py-3"
+        className={cn(
+          "h-auto gap-2 rounded-lg bg-background px-4 py-3",
+          props.className,
+        )}
         disabled={isLoading}
         onClick={() => setModalOpen(true)}
         variant="outline"