feat: link field with application

components/dashboard/settings/ssh-keys/add-ssh-key.tsx

@@ -127,6 +127,7 @@ export const AddSSHKey = ({ children }: Props) => {
 									<FormControl>
 										<Textarea
 											placeholder={"-----BEGIN RSA PRIVATE KEY-----"}
+											rows={5}
 											{...field}
 										/>
 									</FormControl>
@@ -143,16 +144,13 @@ export const AddSSHKey = ({ children }: Props) => {
 										<FormLabel>Public Key</FormLabel>
 									</div>
 									<FormControl>
-										<Textarea
-											placeholder={"ssh-rsa AAAAB3NzaC1yc2E"}
-											{...field}
-										/>
+										<Input placeholder={"ssh-rsa AAAAB3NzaC1yc2E"} {...field} />
 									</FormControl>
 									<FormMessage />
 								</FormItem>
 							)}
 						/>
-						<DialogFooter className="flex w-full flex-row !justify-between pt-3">
+						<DialogFooter>
 							<Button isLoading={isLoading} type="submit">
 								Create
 							</Button>

components/dashboard/settings/ssh-keys/show-ssh-keys.tsx

@@ -39,54 +39,54 @@ export const ShowDestinations = () => {
 							</AddSSHKey>
 						</div>
 					) : (
-						<div className="flex flex-col gap-4">
-							<div className="flex gap-4 text-xs px-3.5">
-								<div className="col-span-2 basis-4/12">Key</div>
-								<div className="basis-3/12">Added</div>
-								<div>Last Used</div>
-							</div>
-							{data?.map((sshKey) => (
-								<div
-									key={sshKey.sshKeyId}
-									className="flex gap-4 items-center border p-3.5 rounded-lg text-sm"
-								>
-									<div className="flex flex-col basis-4/12">
-										<span>{sshKey.name}</span>
-										{sshKey.description && (
-											<span className="text-xs text-muted-foreground">
-												{sshKey.description}
-											</span>
-										)}
-									</div>
-									<div className="basis-3/12">
-										{formatDistanceToNow(new Date(sshKey.createdAt), {
-											addSuffix: true,
-										})}
-									</div>
-									<div className="grow">
-										{sshKey.lastUsedAt
-											? formatDistanceToNow(new Date(sshKey.lastUsedAt), {
-													addSuffix: true,
-												})
-											: "Never"}
-									</div>
-									<div className="flex flex-row gap-1">
-										<UpdateSSHKey sshKeyId={sshKey.sshKeyId}>
-											<Button variant="ghost">
-												<PenBoxIcon className="size-4 text-muted-foreground" />
-											</Button>
-										</UpdateSSHKey>
-										<DeleteSSHKey sshKeyId={sshKey.sshKeyId} />
-									</div>
+						<div className="space-y-8">
+							<div className="flex flex-col gap-4">
+								<div className="flex gap-4 text-xs px-3.5">
+									<div className="col-span-2 basis-4/12">Key</div>
+									<div className="basis-3/12">Added</div>
+									<div>Last Used</div>
 								</div>
-							))}
-							<div>
-								<AddSSHKey>
-									<Button>
-										<KeyRoundIcon className="size-4" /> Add SSH Key
-									</Button>
-								</AddSSHKey>
+								{data?.map((sshKey) => (
+									<div
+										key={sshKey.sshKeyId}
+										className="flex gap-4 items-center border p-3.5 rounded-lg text-sm"
+									>
+										<div className="flex flex-col basis-4/12">
+											<span>{sshKey.name}</span>
+											{sshKey.description && (
+												<span className="text-xs text-muted-foreground">
+													{sshKey.description}
+												</span>
+											)}
+										</div>
+										<div className="basis-3/12">
+											{formatDistanceToNow(new Date(sshKey.createdAt), {
+												addSuffix: true,
+											})}
+										</div>
+										<div className="grow">
+											{sshKey.lastUsedAt
+												? formatDistanceToNow(new Date(sshKey.lastUsedAt), {
+														addSuffix: true,
+													})
+												: "Never"}
+										</div>
+										<div className="flex flex-row gap-1">
+											<UpdateSSHKey sshKeyId={sshKey.sshKeyId}>
+												<Button variant="ghost">
+													<PenBoxIcon className="size-4 text-muted-foreground" />
+												</Button>
+											</UpdateSSHKey>
+											<DeleteSSHKey sshKeyId={sshKey.sshKeyId} />
+										</div>
+									</div>
+								))}
 							</div>
+							<AddSSHKey>
+								<Button>
+									<KeyRoundIcon className="size-4" /> Add SSH Key
+								</Button>
+							</AddSSHKey>
 						</div>
 					)}
 				</CardContent>

components/dashboard/settings/ssh-keys/update-ssh-key.tsx

@@ -1,3 +1,4 @@
+import { DeleteSSHKey } from "@/components/dashboard/settings/ssh-keys/delete-ssh-key";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
@@ -135,7 +136,7 @@ export const UpdateSSHKey = ({ children, sshKeyId = "" }: Props) => {
 							<FormMessage />
 						</FormItem>
 
-						<DialogFooter className="flex w-full flex-row !justify-between pt-3">
+						<DialogFooter>
 							<Button isLoading={isLoading} type="submit">
 								Update
 							</Button>