jake/sofa
1
Fork 0
mirror of https://github.com/jakejarvis/sofa.git synced 2026-08-29 07:25:38 -04:00
Code Issues Packages Projects Releases Wiki Activity

Polish settings UI, add tooltips, replace timeAgo with date-fns

Browse Source 
Clean up settings section design: consolidate backup cards, add
hover-reveal actions with tooltips, improve icon sizing across
components, and replace custom timeAgo helper with date-fns
formatDistanceToNow in webhook card.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jake
2026-03-03 20:23:52 -05:00
co-authored by Claude Opus 4.6
parent b90129a981
commit 7d69262d0e
28 changed files with 128 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(pages)/settings/_components/backup-section.tsx
+43 -26
View File
@@ -27,6 +27,11 @@ import { Button } from "@/components/ui/button";
import { CardContent, CardDescription, CardTitle } from "@/components/ui/card";
import { Spinner } from "@/components/ui/spinner";
import { Switch } from "@/components/ui/switch";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import type { BackupInfo } from "@/lib/services/backup";
import {
createBackupAction,
@@ -208,38 +213,50 @@ export function BackupSection({
)}
</div>
<div className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
<Button
variant="ghost"
size="icon-sm"
nativeButton={false}
render={
<a
href={`/api/backup/${backup.filename}`}
download
title="Download"
aria-label="Download backup"
>
<IconCloudDownload />
</a>
}
/>
<AlertDialog>
<AlertDialogTrigger
<Tooltip>
<TooltipTrigger
render={
<Button
variant="ghost"
size="icon-sm"
disabled={deleting === backup.filename}
title="Delete"
nativeButton={false}
render={
<a
href={`/api/backup/${backup.filename}`}
download
aria-label="Download backup"
>
<IconCloudDownload />
</a>
}
/>
}
>
{deleting === backup.filename ? (
<Spinner />
) : (
<IconTrash />
)}
</AlertDialogTrigger>
/>
<TooltipContent>Download</TooltipContent>
</Tooltip>
<AlertDialog>
<Tooltip>
<AlertDialogTrigger
render={
<TooltipTrigger
render={
<Button
variant="ghost"
size="icon-sm"
disabled={deleting === backup.filename}
/>
}
/>
}
>
{deleting === backup.filename ? (
<Spinner />
) : (
<IconTrash />
)}
</AlertDialogTrigger>
<TooltipContent>Delete</TooltipContent>
</Tooltip>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Delete backup?</AlertDialogTitle>