danvics/zerobyte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

chore: stylistic changes

Browse source
This commit is contained in:
Nicolas Meienberger 2026-04-02 22:20:19 +02:00 committed by Nico
parent 1b780ed127
commit 19e0a950fd
4 changed files with 61 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/client/modules/repositories/components/compression-stats-chart.tsx
View file

@ -64,7 +64,7 @@ export function CompressionStatsChart({ repositoryShortId, initialStats }: Props
const hasStats = !!stats && (storedSize > 0 || uncompressedSize > 0 || snapshotsCount > 0);
const storedPercent = uncompressedSize > 0 ? (storedSize / uncompressedSize) * 100 : 0;
const storedPercent = Math.min(100, Math.max(0, uncompressedSize > 0 ? (storedSize / uncompressedSize) * 100 : 0));
return (
<Card className="flex flex-col px-6 py-6">

16
app/client/modules/repositories/routes/repository-details.tsx
View file

@ -1,5 +1,5 @@
import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
import { Suspense, useState } from "react";
import { useState } from "react";
import { useNavigate, useSearch } from "@tanstack/react-router";
import { toast } from "sonner";
import { ChevronDown, Database, Pencil, Square, Stethoscope, Trash2, Unlock } from "lucide-react";
@ -134,7 +134,7 @@ export default function RepositoryDetailsPage({
{repository.provisioningId && <Badge variant="secondary">Managed</Badge>}
</div>
<p className="text-sm text-muted-foreground mt-0.5">
Created {formatDateTime(repository.createdAt)} &middot; Last checked{" "}
Created {formatDateTime(repository.createdAt)} &middot; Last checked&nbsp;
{formatTimeAgo(repository.lastChecked)}
</p>
</div>
@ -222,13 +222,11 @@ export default function RepositoryDetailsPage({
<RepositoryInfoTabContent repository={repository} initialStats={initialStats} />
</TabsContent>
<TabsContent value="snapshots">
<Suspense>
<RepositorySnapshotsTabContent
repository={repository}
initialSnapshots={initialSnapshots}
initialBackupSchedules={initialBackupSchedules}
/>
</Suspense>
<RepositorySnapshotsTabContent
repository={repository}
initialSnapshots={initialSnapshots}
initialBackupSchedules={initialBackupSchedules}
/>
</TabsContent>
</Tabs>
</div>

98
app/client/modules/volumes/routes/volume-details.tsx
View file

@ -140,36 +140,35 @@ export function VolumeDetails({ volumeId }: { volumeId: string }) {
</div>
</div>
<div className="flex items-center gap-2">
{isMounted ? (
<Button
variant="secondary"
onClick={() =>
toast.promise(unmountVol.mutateAsync({ path: { shortId: volume.shortId } }), {
loading: "Unmounting volume...",
success: "Volume unmounted successfully",
error: (error) => parseError(error)?.message || "Failed to unmount volume",
})
}
loading={unmountVol.isPending}
>
<Unplug className="h-4 w-4 mr-2" />
Unmount
</Button>
) : (
<Button
onClick={() =>
toast.promise(mountVol.mutateAsync({ path: { shortId: volume.shortId } }), {
loading: "Mounting volume...",
success: "Volume mounted successfully",
error: (error) => parseError(error)?.message || "Failed to mount volume",
})
}
loading={mountVol.isPending}
>
<Plug className="h-4 w-4 mr-2" />
Mount
</Button>
)}
<Button
className={cn({ hidden: !isMounted })}
variant="secondary"
onClick={() =>
toast.promise(unmountVol.mutateAsync({ path: { shortId: volume.shortId } }), {
loading: "Unmounting volume...",
success: "Volume unmounted successfully",
error: (error) => parseError(error)?.message || "Failed to unmount volume",
})
}
loading={unmountVol.isPending}
>
<Unplug className="h-4 w-4 mr-2" />
Unmount
</Button>
<Button
className={cn({ hidden: isMounted })}
onClick={() =>
toast.promise(mountVol.mutateAsync({ path: { shortId: volume.shortId } }), {
loading: "Mounting volume...",
success: "Volume mounted successfully",
error: (error) => parseError(error)?.message || "Failed to mount volume",
})
}
loading={mountVol.isPending}
>
<Plug className="h-4 w-4 mr-2" />
Mount
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">
@ -203,19 +202,18 @@ export function VolumeDetails({ volumeId }: { volumeId: string }) {
<div className="flex items-center gap-2">
<HeartIcon className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">Health</span>
{isError ? (
<Badge variant="destructive" className="ml-1">
Error
</Badge>
) : isMounted ? (
<Badge variant="outline" className="text-success border-success/30 bg-success/10 ml-1">
Healthy
</Badge>
) : (
<Badge variant="secondary" className="ml-1">
Unmounted
</Badge>
)}
<Badge variant="destructive" className={cn("ml-1", { hidden: !isError })}>
Error
</Badge>
<Badge
variant="outline"
className={cn("text-success border-success/30 bg-success/10 ml-1", { hidden: !isMounted })}
>
Healthy
</Badge>
<Badge variant="secondary" className={cn("ml-1", { hidden: isMounted || isError })}>
Unmounted
</Badge>
</div>
<Separator orientation="vertical" className="h-4 hidden @lg:block" />
<span className="text-sm text-muted-foreground">Checked {formatTimeAgo(volume.lastHealthCheck)}</span>
@ -248,14 +246,12 @@ export function VolumeDetails({ volumeId }: { volumeId: string }) {
</div>
</Card>
{volume.lastError && (
<Card className="px-6 py-6">
<div className="space-y-2">
<p className="text-sm font-medium text-destructive">Last Error</p>
<p className="text-sm text-muted-foreground wrap-break-word">{volume.lastError}</p>
</div>
</Card>
)}
<Card className={cn("px-6 py-6", { hidden: !volume.lastError })}>
<div className="space-y-2">
<p className="text-sm font-medium text-destructive">Last Error</p>
<p className="text-sm text-muted-foreground wrap-break-word">{volume.lastError}</p>
</div>
</Card>
<Tabs value={activeTab} onValueChange={(value) => navigate({ to: ".", search: () => ({ tab: value }) })}>
<TabsList className="mb-2">

17
app/client/modules/volumes/tabs/info.tsx
View file

@ -3,7 +3,7 @@ import { FolderOpen, HardDrive, Settings, Unplug } from "lucide-react";
import { Label, Pie, PieChart } from "recharts";
import { ByteSize } from "~/client/components/bytes-size";
import { Card, CardTitle } from "~/client/components/ui/card";
import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "~/client/components/ui/chart";
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "~/client/components/ui/chart";
import type { StatFs, Volume } from "~/client/lib/types";
import { cn } from "~/client/lib/utils";
@ -21,17 +21,14 @@ const backendLabels: Record<Volume["type"], string> = {
sftp: "SFTP",
};
function ConfigRow({
icon,
label,
value,
mono,
}: {
type ConfigRowProps = {
icon: React.ReactNode;
label: string;
value: string;
mono?: boolean;
}) {
};
function ConfigRow({ icon, label, value, mono }: ConfigRowProps) {
return (
<div className="flex items-center gap-3 py-3 first:pt-0 last:pb-0">
<span className="text-muted-foreground shrink-0">{icon}</span>
@ -95,14 +92,12 @@ function DonutChart({ statfs }: { statfs: StatFs }) {
[statfs],
);
const chartConfig = {} satisfies ChartConfig;
const usagePercentage = useMemo(() => {
return Math.round((statfs.used / statfs.total) * 100);
}, [statfs]);
return (
<ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[200px]">
<ChartContainer config={{}} className="mx-auto aspect-square max-h-[200px]">
<PieChart>
<ChartTooltip
cursor={false}