ApiKeyList

1"use client";
2 
3import {
4  Alert02Icon,
5  Building01Icon,
6  Copy01Icon,
7  Delete02Icon,
8  Key01Icon,
9  PlusSignIcon,
10  Tick02Icon,
11} from "@hugeicons/core-free-icons";
12import { HugeiconsIcon } from "@hugeicons/react";
13import { useEffect, useRef, useState } from "react";
14import type { ComponentProps, FormEvent, ReactNode } from "react";
15 
16import { Button } from "@/components/ui/button";
17import { Input } from "@/components/ui/input";
18import {
19  Select,
20  SelectContent,
21  SelectItem,
22  SelectTrigger,
23  SelectValue,
24} from "@/components/ui/select";
25import { Skeleton } from "@/components/ui/skeleton";
26import {
27  Tooltip,
28  TooltipContent,
29  TooltipProvider,
30  TooltipTrigger,
31} from "@/components/ui/tooltip";
32import { cn } from "@/lib/utils";
33 
34const COPY_FLASH_MS = 1500;
35 
36/** Where the key lives: a personal account key or an organization key. */
37export type ApiKeyScope = "personal" | "organization";
38 
39export interface ApiKey {
40  id: string;
41  name: string;
42  scope: ApiKeyScope;
43  /** Preformatted creation date, e.g. "Jul 12, 2026". */
44  createdAt: string;
45  /** Preformatted last use, e.g. "2h ago". Omit for a never-used key. */
46  lastUsedAt?: string;
47}
48 
49const SCOPE_ICON = {
50  organization: Building01Icon,
51  personal: Key01Icon,
52} as const;
53 
54const SCOPE_SUBLABEL: Record<ApiKeyScope, string> = {
55  organization: "Organization",
56  personal: "Personal",
57};
58 
59const SCOPES: { value: ApiKeyScope; label: string }[] = [
60  { label: "personal", value: "personal" },
61  { label: "org", value: "organization" },
62];
63 
64/* ─────────────────────────────────────────────────────────
65 * A copy that carries the real token and flashes a primary
66 * check, announcing through a polite live region. The
67 * "Copied" note masks the value under a gradient so the row
68 * never breaks.
69 * ───────────────────────────────────────────────────────── */
70const CopyButton = ({ value, label }: { value: string; label: string }) => {
71  const [copied, setCopied] = useState(false);
72 
73  const copy = async () => {
74    setCopied(true);
75    window.setTimeout(() => setCopied(false), COPY_FLASH_MS);
76 
77    try {
78      await navigator.clipboard.writeText(value);
79    } catch {
80      // Clipboard unavailable (blur, permissions); the feedback still shows.
81    }
82  };
83 
84  return (
85// … truncated