From 5b6a86331e9063b4dd89681182e5468f03ff5cd6 Mon Sep 17 00:00:00 2001
From: Nicolas Meienberger <github@thisprops.com>
Date: Fri, 17 Oct 2025 23:26:58 +0200
Subject: [PATCH] fix(list): copy path to clipboard

---
 apps/client/app/routes/home.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/client/app/routes/home.tsx b/apps/client/app/routes/home.tsx
index 92070a5..a8460de 100644
--- a/apps/client/app/routes/home.tsx
+++ b/apps/client/app/routes/home.tsx
@@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { Copy, RotateCcw } from "lucide-react";
 import { useState } from "react";
 import { useNavigate } from "react-router";
+import { toast } from "sonner";
 import { listVolumes } from "~/api-client";
 import { listVolumesOptions } from "~/api-client/@tanstack/react-query.gen";
 import { CreateVolumeDialog } from "~/components/create-volume-dialog";
@@ -13,6 +14,7 @@ import { Input } from "~/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
 import { VolumeIcon } from "~/components/volume-icon";
+import { copyToClipboard } from "~/utils/clipboard";
 import type { Route } from "./+types/home";
 
 export function meta(_: Route.MetaArgs) {
@@ -145,12 +147,20 @@ export default function Home({ loaderData }: Route.ComponentProps) {
 										<VolumeIcon backend={volume.type} />
 									</TableCell>
 									<TableCell className="hidden sm:table-cell">
-										<span className="flex items-center gap-2">
+										<button
+											type="button"
+											className="flex items-center gap-2 cursor-pointer hover:opacity-70 transition-opacity"
+											onClick={(e) => {
+												e.stopPropagation();
+												copyToClipboard(volume.path);
+												toast.success("Path copied to clipboard");
+											}}
+										>
 											<span className="text-muted-foreground text-xs truncate bg-primary/10 rounded-md px-2 py-1">
 												{volume.path}
 											</span>
 											<Copy size={10} />
-										</span>
+										</button>
 									</TableCell>
 									<TableCell className="text-center">
 										<StatusDot status={volume.status} />