Migrate apps/web to shadcn/ui with preset b2D1F1IZv

Replace custom CSS module UI with shadcn radix-luma components,
Tailwind v4, and Manrope font. Remove packages/ui.

apps/web/app/copy-field.tsx

@@ -1,29 +1,38 @@
 "use client";
 
-import { Button } from "@betternas/ui/button";
-import { Code } from "@betternas/ui/code";
+import { Check, Copy } from "@phosphor-icons/react";
 import { useState } from "react";
-import styles from "./copy-field.module.css";
+import { Button } from "@/components/ui/button";
 
 export function CopyField({ label, value }: { label: string; value: string }) {
   const [copied, setCopied] = useState(false);
 
   return (
-    <div className={styles.field}>
-      <div className={styles.header}>
-        <span className={styles.label}>{label}</span>
+    <div className="flex flex-col gap-1.5">
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+          {label}
+        </span>
         <Button
-          className={styles.button}
+          size="xs"
+          variant="outline"
           onClick={async () => {
             await navigator.clipboard.writeText(value);
             setCopied(true);
             window.setTimeout(() => setCopied(false), 1500);
           }}
         >
+          {copied ? (
+            <Check data-icon="inline-start" weight="bold" />
+          ) : (
+            <Copy data-icon="inline-start" />
+          )}
           {copied ? "Copied" : "Copy"}
         </Button>
       </div>
-      <Code className={styles.value}>{value}</Code>
+      <code className="block break-all rounded-lg bg-muted px-3 py-2 font-mono text-xs text-foreground">
+        {value}
+      </code>
     </div>
   );
 }