fix: Uncapitalize folder titles and finalize file cleanup

src/ui/desktop/apps/credentials/CredentialSelector.tsx

@@ -0,0 +1,226 @@
+import React, { useState, useEffect, useRef } from "react";
+import { Button } from "@/components/ui/button.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { FormControl, FormItem, FormLabel } from "@/components/ui/form.tsx";
+import { getCredentials } from "@/ui/main-axios.ts";
+import { useTranslation } from "react-i18next";
+import type { Credential } from "../../../../types";
+
+interface CredentialSelectorProps {
+  value?: number | null;
+  onValueChange: (credentialId: number | null) => void;
+  onCredentialSelect?: (credential: Credential | null) => void;
+}
+
+export function CredentialSelector({
+  value,
+  onValueChange,
+  onCredentialSelect,
+}: CredentialSelectorProps) {
+  const { t } = useTranslation();
+  const [credentials, setCredentials] = useState<Credential[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const fetchCredentials = async () => {
+      try {
+        setLoading(true);
+        const data = await getCredentials();
+        const credentialsArray = Array.isArray(data)
+          ? data
+          : data.credentials || data.data || [];
+        setCredentials(credentialsArray);
+      } catch {
+        const { toast } = await import("sonner");
+        toast.error(t("credentials.failedToFetchCredentials"));
+        setCredentials([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchCredentials();
+  }, []);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        setDropdownOpen(false);
+      }
+    }
+
+    if (dropdownOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [dropdownOpen]);
+
+  const selectedCredential = credentials.find((c) => c.id === value);
+
+  const filteredCredentials = credentials.filter((credential) => {
+    if (!searchQuery) return true;
+    const searchLower = searchQuery.toLowerCase();
+    return (
+      credential.name.toLowerCase().includes(searchLower) ||
+      credential.username.toLowerCase().includes(searchLower) ||
+      (credential.folder &&
+        credential.folder.toLowerCase().includes(searchLower))
+    );
+  });
+
+  const handleCredentialSelect = (credential: Credential) => {
+    onValueChange(credential.id);
+    if (onCredentialSelect) {
+      onCredentialSelect(credential);
+    }
+    setDropdownOpen(false);
+    setSearchQuery("");
+  };
+
+  const handleClear = () => {
+    onValueChange(null);
+    if (onCredentialSelect) {
+      onCredentialSelect(null);
+    }
+    setDropdownOpen(false);
+    setSearchQuery("");
+  };
+
+  return (
+    <FormItem>
+      <FormLabel>{t("hosts.selectCredential")}</FormLabel>
+      <FormControl>
+        <div className="relative">
+          <Button
+            ref={buttonRef}
+            type="button"
+            variant="outline"
+            className="w-full justify-between text-left rounded-lg px-3 py-2 bg-muted/50 focus:bg-background focus:ring-1 focus:ring-ring border border-border text-foreground transition-all duration-200"
+            onClick={() => setDropdownOpen(!dropdownOpen)}
+          >
+            {loading ? (
+              t("common.loading")
+            ) : value === "existing_credential" ? (
+              <div className="flex items-center justify-between w-full">
+                <div>
+                  <span className="font-medium">
+                    {t("hosts.existingCredential")}
+                  </span>
+                </div>
+              </div>
+            ) : selectedCredential ? (
+              <div className="flex items-center justify-between w-full">
+                <div>
+                  <span className="font-medium">{selectedCredential.name}</span>
+                  <span className="text-sm text-muted-foreground ml-2">
+                    ({selectedCredential.username} •{" "}
+                    {selectedCredential.authType})
+                  </span>
+                </div>
+              </div>
+            ) : (
+              t("hosts.selectCredentialPlaceholder")
+            )}
+            <svg
+              className="h-4 w-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 9l-7 7-7-7"
+              />
+            </svg>
+          </Button>
+
+          {dropdownOpen && (
+            <div
+              ref={dropdownRef}
+              className="absolute top-full left-0 z-50 mt-1 w-full bg-card border border-border rounded-lg shadow-lg max-h-80 overflow-hidden backdrop-blur-sm"
+            >
+              <div className="p-2 border-b border-border">
+                <Input
+                  placeholder={t("credentials.searchCredentials")}
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="h-8"
+                />
+              </div>
+
+              <div className="max-h-60 overflow-y-auto p-2">
+                {loading ? (
+                  <div className="p-3 text-center text-sm text-muted-foreground">
+                    {t("common.loading")}
+                  </div>
+                ) : filteredCredentials.length === 0 ? (
+                  <div className="p-3 text-center text-sm text-muted-foreground">
+                    {searchQuery
+                      ? t("credentials.noCredentialsMatchFilters")
+                      : t("credentials.noCredentialsYet")}
+                  </div>
+                ) : (
+                  <div className="grid grid-cols-1 gap-2.5">
+                    {value && (
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="w-full justify-start text-left rounded-lg px-3 py-2 text-destructive hover:bg-destructive/10 transition-colors duration-200"
+                        onClick={handleClear}
+                      >
+                        {t("common.clear")}
+                      </Button>
+                    )}
+                    {filteredCredentials.map((credential) => (
+                      <Button
+                        key={credential.id}
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className={`w-full justify-start text-left rounded-lg px-3 py-7 hover:bg-muted focus:bg-muted focus:outline-none transition-colors duration-200 ${
+                          credential.id === value ? "bg-muted" : ""
+                        }`}
+                        onClick={() => handleCredentialSelect(credential)}
+                      >
+                        <div className="w-full">
+                          <div className="flex items-center justify-between">
+                            <span className="font-medium">
+                              {credential.name}
+                            </span>
+                          </div>
+                          <div className="text-xs text-muted-foreground mt-0.5">
+                            {credential.username} • {credential.authType}
+                            {credential.description &&
+                              ` • ${credential.description}`}
+                          </div>
+                        </div>
+                      </Button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </FormControl>
+    </FormItem>
+  );
+}

src/ui/desktop/apps/credentials/CredentialViewer.tsx

@@ -0,0 +1,531 @@
+import React, { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import {
+  Key,
+  User,
+  Calendar,
+  Hash,
+  Folder,
+  Edit3,
+  Copy,
+  Shield,
+  Clock,
+  Server,
+  Eye,
+  EyeOff,
+  AlertTriangle,
+  CheckCircle,
+  FileText,
+} from "lucide-react";
+import { getCredentialDetails, getCredentialHosts } from "@/ui/main-axios";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import type {
+  Credential,
+  HostInfo,
+  CredentialViewerProps,
+} from "../../../types/index.js";
+
+const CredentialViewer: React.FC<CredentialViewerProps> = ({
+  credential,
+  onClose,
+  onEdit,
+}) => {
+  const { t } = useTranslation();
+  const [credentialDetails, setCredentialDetails] = useState<Credential | null>(
+    null,
+  );
+  const [hostsUsing, setHostsUsing] = useState<HostInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showSensitive, setShowSensitive] = useState<Record<string, boolean>>(
+    {},
+  );
+  const [activeTab, setActiveTab] = useState<"overview" | "security" | "usage">(
+    "overview",
+  );
+
+  useEffect(() => {
+    fetchCredentialDetails();
+    fetchHostsUsing();
+  }, [credential.id]);
+
+  const fetchCredentialDetails = async () => {
+    try {
+      const response = await getCredentialDetails(credential.id);
+      setCredentialDetails(response);
+    } catch {
+      toast.error(t("credentials.failedToFetchCredentialDetails"));
+    }
+  };
+
+  const fetchHostsUsing = async () => {
+    try {
+      const response = await getCredentialHosts(credential.id);
+      setHostsUsing(response);
+    } catch {
+      toast.error(t("credentials.failedToFetchHostsUsing"));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const toggleSensitiveVisibility = (field: string) => {
+    setShowSensitive((prev) => ({
+      ...prev,
+      [field]: !prev[field],
+    }));
+  };
+
+  const copyToClipboard = async (text: string, fieldName: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success(t("copiedToClipboard", { field: fieldName }));
+    } catch {
+      toast.error(t("credentials.failedToCopy"));
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleString();
+  };
+
+  const getAuthIcon = (authType: string) => {
+    return authType === "password" ? (
+      <Key className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
+    ) : (
+      <Shield className="h-5 w-5 text-zinc-500 dark:text-zinc-400" />
+    );
+  };
+
+  const renderSensitiveField = (
+    value: string | undefined,
+    fieldName: string,
+    label: string,
+    isMultiline = false,
+  ) => {
+    if (!value) return null;
+
+    const isVisible = showSensitive[fieldName];
+
+    return (
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
+            {label}
+          </label>
+          <div className="flex items-center space-x-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => toggleSensitiveVisibility(fieldName)}
+            >
+              {isVisible ? (
+                <EyeOff className="h-4 w-4" />
+              ) : (
+                <Eye className="h-4 w-4" />
+              )}
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => copyToClipboard(value, label)}
+            >
+              <Copy className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+        <div
+          className={`p-3 rounded-md bg-zinc-800 dark:bg-zinc-800 ${isMultiline ? "" : "min-h-[2.5rem]"}`}
+        >
+          {isVisible ? (
+            <pre
+              className={`text-sm ${isMultiline ? "whitespace-pre-wrap" : "whitespace-nowrap"} font-mono`}
+            >
+              {value}
+            </pre>
+          ) : (
+            <div className="text-sm text-zinc-500 dark:text-zinc-400">
+              {"•".repeat(isMultiline ? 50 : 20)}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  if (loading || !credentialDetails) {
+    return (
+      <Sheet open={true} onOpenChange={onClose}>
+        <SheetContent className="w-[600px] max-w-[50vw]">
+          <div className="flex items-center justify-center h-64">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-zinc-600"></div>
+          </div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <Sheet open={true} onOpenChange={onClose}>
+      <SheetContent className="w-[600px] max-w-[50vw] overflow-y-auto">
+        <SheetHeader className="space-y-6 pb-8">
+          <SheetTitle className="flex items-center space-x-4">
+            <div className="p-2 rounded-lg bg-zinc-100 dark:bg-zinc-800">
+              {getAuthIcon(credentialDetails.authType)}
+            </div>
+            <div className="flex-1">
+              <div className="text-xl font-semibold">
+                {credentialDetails.name}
+              </div>
+              <div className="text-sm font-normal text-zinc-600 dark:text-zinc-400 mt-1">
+                {credentialDetails.description}
+              </div>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Badge
+                variant="outline"
+                className="border-zinc-300 dark:border-zinc-600 text-zinc-600 dark:text-zinc-400"
+              >
+                {credentialDetails.authType}
+              </Badge>
+              {credentialDetails.keyType && (
+                <Badge
+                  variant="secondary"
+                  className="bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300"
+                >
+                  {credentialDetails.keyType}
+                </Badge>
+              )}
+            </div>
+          </SheetTitle>
+        </SheetHeader>
+
+        <div className="space-y-10">
+          <div className="flex space-x-2 p-2 bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg">
+            <Button
+              variant={activeTab === "overview" ? "default" : "ghost"}
+              size="sm"
+              onClick={() => setActiveTab("overview")}
+              className="flex-1 h-10"
+            >
+              <FileText className="h-4 w-4 mr-2" />
+              {t("credentials.overview")}
+            </Button>
+            <Button
+              variant={activeTab === "security" ? "default" : "ghost"}
+              size="sm"
+              onClick={() => setActiveTab("security")}
+              className="flex-1 h-10"
+            >
+              <Shield className="h-4 w-4 mr-2" />
+              {t("credentials.security")}
+            </Button>
+            <Button
+              variant={activeTab === "usage" ? "default" : "ghost"}
+              size="sm"
+              onClick={() => setActiveTab("usage")}
+              className="flex-1 h-10"
+            >
+              <Server className="h-4 w-4 mr-2" />
+              {t("credentials.usage")}
+            </Button>
+          </div>
+
+          {activeTab === "overview" && (
+            <div className="grid gap-10 lg:grid-cols-2">
+              <Card className="border-zinc-200 dark:border-zinc-700">
+                <CardHeader className="pb-8">
+                  <CardTitle className="text-lg font-semibold">
+                    {t("credentials.basicInformation")}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-8">
+                  <div className="flex items-center space-x-5">
+                    <div className="p-2 rounded-lg bg-zinc-100 dark:bg-zinc-800">
+                      <User className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
+                    </div>
+                    <div>
+                      <div className="text-sm text-zinc-500 dark:text-zinc-400">
+                        {t("common.username")}
+                      </div>
+                      <div className="font-medium text-zinc-800 dark:text-zinc-200">
+                        {credentialDetails.username}
+                      </div>
+                    </div>
+                  </div>
+
+                  {credentialDetails.folder && (
+                    <div className="flex items-center space-x-4">
+                      <Folder className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
+                      <div>
+                        <div className="text-sm text-zinc-500 dark:text-zinc-400">
+                          {t("common.folder")}
+                        </div>
+                        <div className="font-medium">
+                          {credentialDetails.folder}
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  {credentialDetails.tags.length > 0 && (
+                    <div className="flex items-start space-x-4">
+                      <Hash className="h-4 w-4 text-zinc-500 dark:text-zinc-400 mt-1" />
+                      <div className="flex-1">
+                        <div className="text-sm text-zinc-500 dark:text-zinc-400 mb-3">
+                          {t("hosts.tags")}
+                        </div>
+                        <div className="flex flex-wrap gap-2">
+                          {credentialDetails.tags.map((tag, index) => (
+                            <Badge
+                              key={index}
+                              variant="outline"
+                              className="text-xs"
+                            >
+                              {tag}
+                            </Badge>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  <Separator />
+
+                  <div className="flex items-center space-x-4">
+                    <Calendar className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
+                    <div>
+                      <div className="text-sm text-zinc-500 dark:text-zinc-400">
+                        {t("credentials.created")}
+                      </div>
+                      <div className="font-medium">
+                        {formatDate(credentialDetails.createdAt)}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center space-x-4">
+                    <Calendar className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
+                    <div>
+                      <div className="text-sm text-zinc-500 dark:text-zinc-400">
+                        {t("credentials.lastModified")}
+                      </div>
+                      <div className="font-medium">
+                        {formatDate(credentialDetails.updatedAt)}
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader>
+                  <CardTitle className="text-lg">
+                    {t("credentials.usageStatistics")}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-6">
+                  <div className="text-center p-6 bg-zinc-900/20 dark:bg-zinc-900/20 rounded-lg">
+                    <div className="text-3xl font-bold text-zinc-600 dark:text-zinc-400">
+                      {credentialDetails.usageCount}
+                    </div>
+                    <div className="text-sm text-zinc-600 dark:text-zinc-400">
+                      {t("credentials.timesUsed")}
+                    </div>
+                  </div>
+
+                  {credentialDetails.lastUsed && (
+                    <div className="flex items-center space-x-4 p-4 bg-zinc-900/20 dark:bg-zinc-900/20 rounded-lg">
+                      <Clock className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
+                      <div>
+                        <div className="text-sm text-zinc-500 dark:text-zinc-400">
+                          {t("credentials.lastUsed")}
+                        </div>
+                        <div className="font-medium">
+                          {formatDate(credentialDetails.lastUsed)}
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  <div className="flex items-center space-x-4 p-4 bg-zinc-900/20 dark:bg-zinc-900/20 rounded-lg">
+                    <Server className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
+                    <div>
+                      <div className="text-sm text-zinc-500 dark:text-zinc-400">
+                        {t("credentials.connectedHosts")}
+                      </div>
+                      <div className="font-medium">{hostsUsing.length}</div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          )}
+
+          {activeTab === "security" && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg flex items-center space-x-2">
+                  <Shield className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
+                  <span>{t("credentials.securityDetails")}</span>
+                </CardTitle>
+                <CardDescription>
+                  {t("credentials.securityDetailsDescription")}
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-6">
+                <div className="flex items-center space-x-4 p-6 bg-zinc-900/20 dark:bg-zinc-900/20 rounded-lg">
+                  <CheckCircle className="h-6 w-6 text-zinc-600 dark:text-zinc-400" />
+                  <div>
+                    <div className="font-medium text-zinc-800 dark:text-zinc-200">
+                      {t("credentials.credentialSecured")}
+                    </div>
+                    <div className="text-sm text-zinc-700 dark:text-zinc-300">
+                      {t("credentials.credentialSecuredDescription")}
+                    </div>
+                  </div>
+                </div>
+
+                {credentialDetails.authType === "password" && (
+                  <div>
+                    <h3 className="font-semibold mb-4">
+                      {t("credentials.passwordAuthentication")}
+                    </h3>
+                    {renderSensitiveField(
+                      credentialDetails.password,
+                      "password",
+                      t("common.password"),
+                    )}
+                  </div>
+                )}
+
+                {credentialDetails.authType === "key" && (
+                  <div className="space-y-6">
+                    <h3 className="font-semibold mb-2">
+                      {t("credentials.keyAuthentication")}
+                    </h3>
+
+                    <div className="grid gap-6 md:grid-cols-2">
+                      <div>
+                        <div className="text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-3">
+                          {t("credentials.keyType")}
+                        </div>
+                        <Badge variant="outline" className="text-sm">
+                          {credentialDetails.keyType?.toUpperCase() ||
+                            t("unknown").toUpperCase()}
+                        </Badge>
+                      </div>
+                    </div>
+
+                    {renderSensitiveField(
+                      credentialDetails.key,
+                      "key",
+                      t("credentials.privateKey"),
+                      true,
+                    )}
+
+                    {credentialDetails.keyPassword &&
+                      renderSensitiveField(
+                        credentialDetails.keyPassword,
+                        "keyPassword",
+                        t("credentials.keyPassphrase"),
+                      )}
+                  </div>
+                )}
+
+                <div className="flex items-start space-x-4 p-6 bg-zinc-900/20 dark:bg-zinc-900/20 rounded-lg">
+                  <AlertTriangle className="h-5 w-5 text-zinc-600 dark:text-zinc-400 mt-0.5" />
+                  <div className="text-sm">
+                    <div className="font-medium text-zinc-800 dark:text-zinc-200 mb-2">
+                      {t("credentials.securityReminder")}
+                    </div>
+                    <div className="text-zinc-700 dark:text-zinc-300">
+                      {t("credentials.securityReminderText")}
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {activeTab === "usage" && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg flex items-center space-x-2">
+                  <Server className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
+                  <span>{t("credentials.hostsUsingCredential")}</span>
+                  <Badge variant="secondary">{hostsUsing.length}</Badge>
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                {hostsUsing.length === 0 ? (
+                  <div className="text-center py-10 text-zinc-500 dark:text-zinc-400">
+                    <Server className="h-12 w-12 mx-auto mb-6 text-zinc-300 dark:text-zinc-600" />
+                    <p>{t("credentials.noHostsUsingCredential")}</p>
+                  </div>
+                ) : (
+                  <ScrollArea className="h-64">
+                    <div className="space-y-3">
+                      {hostsUsing.map((host) => (
+                        <div
+                          key={host.id}
+                          className="flex items-center justify-between p-4 border rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-800"
+                        >
+                          <div className="flex items-center space-x-3">
+                            <div className="p-2 bg-zinc-100 dark:bg-zinc-800 rounded">
+                              <Server className="h-4 w-4 text-zinc-600 dark:text-zinc-400" />
+                            </div>
+                            <div>
+                              <div className="font-medium">
+                                {host.name || `${host.ip}:${host.port}`}
+                              </div>
+                              <div className="text-sm text-zinc-500 dark:text-zinc-400">
+                                {host.ip}:{host.port}
+                              </div>
+                            </div>
+                          </div>
+                          <div className="text-right text-sm text-zinc-500 dark:text-zinc-400">
+                            {formatDate(host.createdAt)}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </ScrollArea>
+                )}
+              </CardContent>
+            </Card>
+          )}
+        </div>
+
+        <SheetFooter>
+          <Button variant="outline" onClick={onClose}>
+            {t("common.close")}
+          </Button>
+          <Button onClick={onEdit}>
+            <Edit3 className="h-4 w-4 mr-2" />
+            {t("credentials.editCredential")}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export default CredentialViewer;