ondra/ironmount
1
1
Fork 0
mirror of https://github.com/nicotsx/ironmount.git synced 2025-12-10 12:10:51 +01:00
Code Issues Packages Projects Releases 1 Wiki Activity

feat: add icons to buttons and alerts for improved UI clarity

Browse Source
This commit is contained in:
Jakub Trávník
2025-12-03 17:31:44 +01:00
parent 7ff38f0128
commit ff4c1404a6
20 changed files with 131 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/client/modules/volumes/components/healthchecks-card.tsx
View File

@@ -1,6 +1,6 @@
import { useMutation } from "@tanstack/react-query";
import { formatDistanceToNow } from "date-fns";
import { HeartIcon } from "lucide-react";
import { Activity, HeartIcon } from "lucide-react";
import { toast } from "sonner";
import { healthCheckVolumeMutation, updateVolumeMutation } from "~/client/api-client/@tanstack/react-query.gen";
import { OnOff } from "~/client/components/onoff";
@@ -80,6 +80,7 @@ export const HealthchecksCard = ({ volume }: Props) => {
loading={healthcheck.isPending}
onClick={() => healthcheck.mutate({ path: { name: volume.name } })}
>
<Activity className="h-4 w-4 mr-2" />
Run Health Check
</Button>
</div>

4
app/client/modules/volumes/routes/create-volume.tsx
View File

@@ -1,5 +1,5 @@
import { useMutation } from "@tanstack/react-query";
import { HardDrive } from "lucide-react";
import { HardDrive, Plus, X } from "lucide-react";
import { useId } from "react";
import { useNavigate } from "react-router";
import { toast } from "sonner";
@@ -70,9 +70,11 @@ export default function CreateVolume() {
<CreateVolumeForm mode="create" formId={formId} onSubmit={handleSubmit} loading={createVolume.isPending} />
<div className="flex justify-end gap-2 pt-4 border-t">
<Button type="button" variant="secondary" onClick={() => navigate("/volumes")}>
<X className="h-4 w-4 mr-2" />
Cancel
</Button>
<Button type="submit" form={formId} loading={createVolume.isPending}>
<Plus className="h-4 w-4 mr-2" />
Create Volume
</Button>
</div>

10
app/client/modules/volumes/routes/volume-details.tsx
View File

@@ -2,6 +2,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
import { useNavigate, useParams, useSearchParams } from "react-router";
import { toast } from "sonner";
import { useState } from "react";
import { CircleStop, Play, Trash2, X } from "lucide-react";
import { StatusDot } from "~/client/components/status-dot";
import { Button } from "~/client/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/client/components/ui/tabs";
@@ -148,6 +149,7 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
loading={mountVol.isPending}
className={cn({ hidden: volume.status === "mounted" })}
>
<Play className="h-4 w-4 mr-2" />
Mount
</Button>
<Button
@@ -156,9 +158,11 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
loading={unmountVol.isPending}
className={cn({ hidden: volume.status !== "mounted" })}
>
<CircleStop className="h-4 w-4 mr-2" />
Unmount
</Button>
<Button variant="destructive" onClick={() => setShowDeleteConfirm(true)} disabled={deleteVol.isPending}>
<Trash2 className="h-4 w-4 mr-2" />
Delete
</Button>
</div>
@@ -200,11 +204,15 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
</AlertDialogDescription>
</AlertDialogHeader>
<div className="flex gap-3 justify-end">
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogCancel>
<X className="h-4 w-4 mr-2" />
Cancel
</AlertDialogCancel>
<AlertDialogAction
onClick={handleConfirmDelete}
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
>
<Trash2 className="h-4 w-4 mr-2" />
Delete volume
</AlertDialogAction>
</div>

11
app/client/modules/volumes/tabs/info.tsx
View File

@@ -2,6 +2,7 @@ import { useMutation } from "@tanstack/react-query";
import { useState } from "react";
import { useNavigate } from "react-router";
import { toast } from "sonner";
import { Check, X } from "lucide-react";
import { CreateVolumeForm, type FormValues } from "~/client/components/create-volume-form";
import {
AlertDialog,
@@ -93,8 +94,14 @@ export const VolumeInfoTabContent = ({ volume, statfs }: Props) => {
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={confirmUpdate}>Update</AlertDialogAction>
<AlertDialogCancel>
<X className="h-4 w-4 mr-2" />
Cancel
</AlertDialogCancel>
<AlertDialogAction onClick={confirmUpdate}>
<Check className="h-4 w-4 mr-2" />
Update
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>