feat: add API keys management page, including API key creation and deletion functionality

thoughts-frontend/app/settings/api-keys/page.tsx

@@ -0,0 +1,27 @@
+import { cookies } from "next/headers";
+import { redirect } from "next/navigation";
+import { getApiKeys } from "@/lib/api";
+import { ApiKeyList } from "@/components/api-keys-list";
+
+export default async function ApiKeysPage() {
+  const token = (await cookies()).get("auth_token")?.value;
+  if (!token) {
+    redirect("/login");
+  }
+
+  const initialApiKeys = await getApiKeys(token).catch(() => ({
+    apiKeys: [],
+  }));
+
+  return (
+    <div className="space-y-6">
+      <div className="glass-effect glossy-effect bottom rounded-md shadow-fa-lg p-4">
+        <h3 className="text-lg font-medium">API Keys</h3>
+        <p className="text-sm text-muted-foreground">
+          Manage API keys for third-party applications.
+        </p>
+      </div>
+      <ApiKeyList initialApiKeys={initialApiKeys.apiKeys} />
+    </div>
+  );
+}

thoughts-frontend/app/settings/layout.tsx

@@ -7,7 +7,10 @@ const sidebarNavItems = [
     title: "Profile",
     href: "/settings/profile",
   },
-  // You can add more links here later, e.g., "Account", "API Keys"
+  {
+    title: "API Keys",
+    href: "/settings/api-keys",
+  },
 ];
 
 export default function SettingsLayout({
@@ -17,7 +20,7 @@ export default function SettingsLayout({
 }) {
   return (
     <div className="container mx-auto max-w-5xl space-y-6 p-10 pb-16">
-      <div className="space-y-0.5">
+      <div className="space-y-0.5 p-4 glass-effect rounded-md shadow-fa-lg">
         <h2 className="text-2xl font-bold tracking-tight">Settings</h2>
         <p className="text-muted-foreground">
           Manage your account settings and profile.

thoughts-frontend/app/settings/profile/page.tsx

@@ -18,8 +18,8 @@ export default async function EditProfilePage() {
   }
 
   return (
-    <div className="space-y-6">
-      <div>
+    <div className="space-y-6 ">
+      <div className="glass-effect glossy-effect bottom rounded-md shadow-fa-lg p-4">
         <h3 className="text-lg font-medium">Profile</h3>
         <p className="text-sm text-muted-foreground">
           This is how others will see you on the site.