Settings and accordion update (#217)

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>
 ));

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 };

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"