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.

thoughts-frontend/components/api-keys-list.tsx

@@ -0,0 +1,214 @@
+// thoughts-frontend/components/api-key-list.tsx
+"use client";
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { toast } from "sonner";
+import { useAuth } from "@/hooks/use-auth";
+import {
+  ApiKey,
+  CreateApiKeySchema,
+  createApiKey,
+  deleteApiKey,
+} from "@/lib/api";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Copy, KeyRound, Plus, Trash2 } from "lucide-react";
+import { format } from "date-fns";
+
+interface ApiKeyListProps {
+  initialApiKeys: ApiKey[];
+}
+
+export function ApiKeyList({ initialApiKeys }: ApiKeyListProps) {
+  const [keys, setKeys] = useState<ApiKey[]>(initialApiKeys);
+  const [newKey, setNewKey] = useState<string | null>(null);
+  const { token } = useAuth();
+
+  const form = useForm<z.infer<typeof CreateApiKeySchema>>({
+    resolver: zodResolver(CreateApiKeySchema),
+    defaultValues: { name: "" },
+  });
+
+  async function onSubmit(values: z.infer<typeof CreateApiKeySchema>) {
+    if (!token) return;
+    try {
+      const newKeyResponse = await createApiKey(values, token);
+      setKeys((prev) => [...prev, newKeyResponse]);
+      setNewKey(newKeyResponse.plaintextKey ?? null);
+      form.reset();
+      toast.success("API Key created successfully.");
+    } catch {
+      toast.error("Failed to create API key.");
+    }
+  }
+
+  const handleDelete = async (keyId: string) => {
+    if (!token) return;
+    try {
+      await deleteApiKey(keyId, token);
+      setKeys((prev) => prev.filter((key) => key.id !== keyId));
+      toast.success("API Key deleted successfully.");
+    } catch {
+      toast.error("Failed to delete API key.");
+    }
+  };
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+    toast.success("Key copied to clipboard!");
+  };
+
+  return (
+    <div className="space-y-8">
+      <Card>
+        <CardHeader>
+          <CardTitle>Existing Keys</CardTitle>
+          <CardDescription>
+            These are the API keys associated with your account.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {keys.length > 0 ? (
+            <ul className="divide-y">
+              {keys.map((key) => (
+                <li
+                  key={key.id}
+                  className="flex items-center justify-between p-4 glass-effect rounded-md shadow-fa-sm glossy-effect bottom"
+                >
+                  <div className="flex items-center gap-4">
+                    <KeyRound className="h-6 w-6 text-muted-foreground" />
+                    <div>
+                      <p className="font-semibold">{key.name}</p>
+                      <p className="text-sm text-muted-foreground">
+                        {`Created on ${format(key.createdAt, "PPP")}`}
+                      </p>
+                      <p className="text-xs font-mono text-muted-foreground mt-1">
+                        {`${key.keyPrefix}...`}
+                      </p>
+                    </div>
+                  </div>
+                  <AlertDialog>
+                    <AlertDialogTrigger asChild>
+                      <Button variant="outline" size="icon">
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </AlertDialogTrigger>
+                    <AlertDialogContent>
+                      <AlertDialogHeader>
+                        <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+                        <AlertDialogDescription>
+                          This will permanently delete the key &quot;{key.name}
+                          &quot;. This action cannot be undone.
+                        </AlertDialogDescription>
+                      </AlertDialogHeader>
+                      <AlertDialogFooter>
+                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+                        <AlertDialogAction onClick={() => handleDelete(key.id)}>
+                          Delete
+                        </AlertDialogAction>
+                      </AlertDialogFooter>
+                    </AlertDialogContent>
+                  </AlertDialog>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              You have no API keys.
+            </p>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Display New Key */}
+      {newKey && (
+        <Card>
+          <CardHeader>
+            <CardTitle>New API Key Generated</CardTitle>
+            <CardDescription>
+              Please copy this key and store it securely. You will not be able
+              to see it again.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex items-center gap-4">
+            <Input readOnly value={newKey} className="font-mono" />
+            <Button
+              size="icon"
+              variant="outline"
+              onClick={() => copyToClipboard(newKey)}
+            >
+              <Copy className="h-4 w-4" />
+            </Button>
+          </CardContent>
+          <CardFooter>
+            <Button onClick={() => setNewKey(null)}>Done</Button>
+          </CardFooter>
+        </Card>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Create New API Key</CardTitle>
+          <CardDescription>
+            Give your new key a descriptive name.
+          </CardDescription>
+        </CardHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)}>
+            <CardContent>
+              <FormField
+                name="name"
+                control={form.control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Key Name</FormLabel>
+                    <FormControl>
+                      <Input placeholder="e.g., My Cool App" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </CardContent>
+            <CardFooter className="px-6 py-4">
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                <Plus className="mr-2 h-4 w-4" />
+                {form.formState.isSubmitting ? "Creating..." : "Create Key"}
+              </Button>
+            </CardFooter>
+          </form>
+        </Form>
+      </Card>
+    </div>
+  );
+}

thoughts-frontend/components/popular-tags.tsx

@@ -25,7 +25,7 @@ export async function PopularTags() {
   return (
     <Card className="p-4">
       <CardHeader className="p-0 pb-2">
-        <CardTitle className="text-lg text-shadow-md">Popular Tags</CardTitle>
+        <CardTitle className="text-lg">Popular Tags</CardTitle>
       </CardHeader>
       <CardContent className="flex flex-wrap gap-2 p-0">
         {tags.map((tag) => (

thoughts-frontend/components/settings-nav.tsx

@@ -29,10 +29,8 @@ export function SettingsNav({ className, items, ...props }: SettingsNavProps) {
           href={item.href}
           className={cn(
             buttonVariants({ variant: "ghost" }),
-            pathname === item.href
-              ? "bg-muted hover:bg-muted"
-              : "hover:bg-transparent hover:underline",
-            "justify-start"
+            pathname === item.href ? "bg-muted" : "hover:underline",
+            "justify-start glass-effect glossy-effect bottom shadow-fa-md"
           )}
         >
           {item.title}

thoughts-frontend/components/user-nav.tsx

@@ -61,7 +61,11 @@ export function UserNav() {
           <UserAvatar src={user.avatarUrl} alt={user.displayName} />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56" align="end" forceMount>
+      <DropdownMenuContent
+        className="w-56 glossy-effect bottom shadow-fa-md"
+        align="end"
+        forceMount
+      >
         <DropdownMenuLabel className="font-normal">
           <div className="flex flex-col space-y-1">
             <p className="text-sm font-medium leading-none">

thoughts-frontend/lib/api.ts

@@ -65,11 +65,32 @@ export const SearchResultsSchema = z.object({
   thoughts: z.object({ thoughts: z.array(ThoughtSchema) }),
 });
 
+export const ApiKeySchema = z.object({
+  id: z.uuid(),
+  name: z.string(),
+  keyPrefix: z.string(),
+  createdAt: z.coerce.date(),
+});
+
+export const ApiKeyResponseSchema = ApiKeySchema.extend({
+  plaintextKey: z.string().optional(),
+});
+
+export const ApiKeyListSchema = z.object({
+  apiKeys: z.array(ApiKeySchema),
+});
+
+export const CreateApiKeySchema = z.object({
+  name: z.string().min(1, "Key name cannot be empty."),
+});
+
 export type User = z.infer<typeof UserSchema>;
 export type Me = z.infer<typeof MeSchema>;
 export type Thought = z.infer<typeof ThoughtSchema>;
 export type Register = z.infer<typeof RegisterSchema>;
 export type Login = z.infer<typeof LoginSchema>;
+export type ApiKey = z.infer<typeof ApiKeySchema>;
+export type ApiKeyResponse = z.infer<typeof ApiKeyResponseSchema>;
 
 const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
 
@@ -247,4 +268,30 @@ export const search = (query: string, token: string | null) =>
     {},
     SearchResultsSchema,
     token
+  );
+
+
+export const getApiKeys = (token: string) =>
+  apiFetch(`/users/me/api-keys`, {}, ApiKeyListSchema, token);
+
+export const createApiKey = (
+  data: z.infer<typeof CreateApiKeySchema>,
+  token: string
+) =>
+  apiFetch(
+    `/users/me/api-keys`,
+    {
+      method: "POST",
+      body: JSON.stringify(data),
+    },
+    ApiKeyResponseSchema,
+    token
+  );
+
+export const deleteApiKey = (keyId: string, token: string) =>
+  apiFetch(
+    `/users/me/api-keys/${keyId}`,
+    { method: "DELETE" },
+    z.null(),
+    token
   );