From 9b540b941679d6225a10461597e33aa336640a0b Mon Sep 17 00:00:00 2001
From: Kerem Yilmaz <kerem@skyvern.com>
Date: Tue, 23 Apr 2024 12:21:45 -0700
Subject: [PATCH] Settings and accordion update (#217)

---
 .../src/components/ui/accordion.tsx           |  6 +--
 .../components/ui/hidden-copyable-input.tsx   | 44 +++++++++++++++++++
 .../src/routes/root/RootLayout.tsx            |  2 +-
 3 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 skyvern-frontend/src/components/ui/hidden-copyable-input.tsx

diff --git a/skyvern-frontend/src/components/ui/accordion.tsx b/skyvern-frontend/src/components/ui/accordion.tsx
index 1d8d2478..4b63b250 100644
--- a/skyvern-frontend/src/components/ui/accordion.tsx
+++ b/skyvern-frontend/src/components/ui/accordion.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { ChevronRightIcon } from "@radix-ui/react-icons";
 
 import { cn } from "@/util/utils";
 
@@ -26,13 +26,13 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center gap-2 py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-90",
         className,
       )}
       {...props}
     >
+      <ChevronRightIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
       {children}
-      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));
diff --git a/skyvern-frontend/src/components/ui/hidden-copyable-input.tsx b/skyvern-frontend/src/components/ui/hidden-copyable-input.tsx
new file mode 100644
index 00000000..78b7a25d
--- /dev/null
+++ b/skyvern-frontend/src/components/ui/hidden-copyable-input.tsx
@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { Button } from "./button";
+import { Input } from "./input";
+import { CheckIcon, CopyIcon } from "@radix-ui/react-icons";
+
+type Props = {
+  value: string;
+};
+
+function HiddenCopyableInput({ value }: Props) {
+  const [hidden, setHidden] = useState(true);
+  const [copied, setCopied] = useState(false);
+
+  const buttonText = hidden ? "Reveal" : copied ? "Copied" : "Copy";
+  const inputValue = hidden ? "**** **** **** ****" : value;
+
+  return (
+    <div className="relative w-full">
+      <Input value={inputValue} className="h-10" readOnly />
+      <div className="absolute flex inset-y-0 items-center right-1">
+        <Button
+          size="sm"
+          variant="secondary"
+          className="cursor-pointer"
+          onClick={async () => {
+            if (hidden) {
+              setHidden(false);
+              return;
+            }
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 3000);
+          }}
+        >
+          {!hidden && !copied && <CopyIcon className="mr-2 h-4 w-4" />}
+          {!hidden && copied && <CheckIcon className="mr-2 h-4 w-4" />}
+          {buttonText}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export { HiddenCopyableInput };
diff --git a/skyvern-frontend/src/routes/root/RootLayout.tsx b/skyvern-frontend/src/routes/root/RootLayout.tsx
index 24fa3c21..01ca6241 100644
--- a/skyvern-frontend/src/routes/root/RootLayout.tsx
+++ b/skyvern-frontend/src/routes/root/RootLayout.tsx
@@ -18,7 +18,7 @@ function RootLayout({ onLogout }: Props) {
   return (
     <>
       <div className="w-full h-full px-4">
-        <aside className="fixed w-72 px-6 shrink-0 min-h-screen">
+        <aside className="fixed w-72 px-6 shrink-0 min-h-screen border-r-2">
           <Link
             to="https://skyvern.com"
             target="_blank"