From 12ed149ffe34e63f96533fc13b8a1fc08ac06335 Mon Sep 17 00:00:00 2001
From: Nicolas Meienberger <github@thisprops.com>
Date: Wed, 24 Sep 2025 18:25:54 +0200
Subject: [PATCH] wip volume tabs

---
 apps/client/app/lib/types.ts                  |  3 ++-
 apps/client/app/modules/details/tabs/info.tsx | 22 +++++++++++++++++++
 apps/client/app/routes/details.tsx            | 22 +++++++++++--------
 3 files changed, 37 insertions(+), 10 deletions(-)
 create mode 100644 apps/client/app/modules/details/tabs/info.tsx

diff --git a/apps/client/app/lib/types.ts b/apps/client/app/lib/types.ts
index 8958931..9aea22f 100644
--- a/apps/client/app/lib/types.ts
+++ b/apps/client/app/lib/types.ts
@@ -1,3 +1,4 @@
 import type { GetVolumeResponse } from "~/api-client";
 
-export type VolumeStatus = GetVolumeResponse["status"];
+export type Volume = GetVolumeResponse;
+export type VolumeStatus = Volume["status"];
diff --git a/apps/client/app/modules/details/tabs/info.tsx b/apps/client/app/modules/details/tabs/info.tsx
new file mode 100644
index 0000000..7e4a6a0
--- /dev/null
+++ b/apps/client/app/modules/details/tabs/info.tsx
@@ -0,0 +1,22 @@
+import { CreateVolumeForm } from "~/components/create-volume-form";
+import { Card } from "~/components/ui/card";
+import { HealthchecksCard } from "../components/healthchecks-card";
+import type { Volume } from "~/lib/types";
+
+type Props = {
+	volume: Volume;
+};
+
+export const VolumeInfoTabContent = ({ volume }: Props) => {
+	return (
+		<div className="grid gap-4 grid-cols-1 lg:grid-cols-3 lg:grid-rows-[auto_1fr]">
+			<Card className="p-6 lg:col-span-2 lg:row-span-2">
+				<CreateVolumeForm initialValues={{ ...volume, ...volume.config }} onSubmit={console.log} />
+			</Card>
+			<HealthchecksCard volume={volume} />
+			<Card className="p-6 h-full">
+				<h2 className="text-lg font-medium">Volume Information</h2>
+			</Card>
+		</div>
+	);
+};
diff --git a/apps/client/app/routes/details.tsx b/apps/client/app/routes/details.tsx
index 0ce8aab..cb524fb 100644
--- a/apps/client/app/routes/details.tsx
+++ b/apps/client/app/routes/details.tsx
@@ -17,6 +17,8 @@ import { HealthchecksCard } from "~/modules/details/components/healthchecks-card
 import type { Route } from "./+types/details";
 import { cn } from "~/lib/utils";
 import { StatusDot } from "~/components/status-dot";
+import { VolumeInfoTabContent } from "~/modules/details/tabs/info";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
 
 export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
 	const volume = await getVolume({ path: { name: params.name ?? "" } });
@@ -116,15 +118,17 @@ export default function DetailsPage({ loaderData }: Route.ComponentProps) {
 					</Button>
 				</div>
 			</div>
-			<div className="grid gap-4 grid-cols-1 lg:grid-cols-3 lg:grid-rows-[auto_1fr]">
-				<Card className="p-6 lg:col-span-2 lg:row-span-2">
-					<CreateVolumeForm initialValues={{ ...data, ...data?.config }} onSubmit={console.log} />
-				</Card>
-				<HealthchecksCard volume={data} />
-				<Card className="p-6 h-full">
-					<h2 className="text-lg font-medium">Volume Information</h2>
-				</Card>
-			</div>
+			<Tabs defaultValue="info" className="mt-0">
+				<TabsList>
+					<TabsTrigger value="info">Configuration</TabsTrigger>
+					<TabsTrigger value="backups">Backups</TabsTrigger>
+					<TabsTrigger value="explorer">Eplorer</TabsTrigger>
+				</TabsList>
+				<TabsContent value="info">
+					<VolumeInfoTabContent volume={data} />
+				</TabsContent>
+				<TabsContent value="password">Change your password here.</TabsContent>
+			</Tabs>
 		</>
 	);
 }