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

app/client/modules/repositories/routes/create-repository.tsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@tanstack/react-query";
-import { Database } from "lucide-react";
+import { Database, Plus, X } from "lucide-react";
 import { useId } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
@@ -76,9 +76,11 @@ export default function CreateRepository() {
 					/>
 					<div className="flex justify-end gap-2 pt-4 border-t">
 						<Button type="button" variant="secondary" onClick={() => navigate("/repositories")}>
+							<X className="h-4 w-4 mr-2" />
 							Cancel
 						</Button>
 						<Button type="submit" form={formId} loading={createRepository.isPending}>
+							<Plus className="h-4 w-4 mr-2" />
 							Create Repository
 						</Button>
 					</div>

app/client/modules/repositories/routes/repository-details.tsx

@@ -25,7 +25,7 @@ import { cn } from "~/client/lib/utils";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/client/components/ui/tabs";
 import { RepositoryInfoTabContent } from "../tabs/info";
 import { RepositorySnapshotsTabContent } from "../tabs/snapshots";
-import { Loader2 } from "lucide-react";
+import { Loader2, Stethoscope, Trash2, X } from "lucide-react";
 
 export const handle = {
 	breadcrumb: (match: Route.MetaArgs) => [
@@ -152,10 +152,14 @@ export default function RepositoryDetailsPage({ loaderData }: Route.ComponentPro
 								Running Doctor...
 							</>
 						) : (
-							"Run Doctor"
+							<>
+								<Stethoscope className="h-4 w-4 mr-2" />
+								Run Doctor
+							</>
 						)}
 					</Button>
 					<Button variant="destructive" onClick={() => setShowDeleteConfirm(true)} disabled={deleteRepo.isPending}>
+						<Trash2 className="h-4 w-4 mr-2" />
 						Delete
 					</Button>
 				</div>
@@ -184,11 +188,15 @@ export default function RepositoryDetailsPage({ loaderData }: Route.ComponentPro
 						</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 repository
 						</AlertDialogAction>
 					</div>
@@ -230,7 +238,10 @@ export default function RepositoryDetailsPage({ loaderData }: Route.ComponentPro
 					)}
 
 					<div className="flex justify-end">
-						<Button onClick={() => setShowDoctorResults(false)}>Close</Button>
+						<Button onClick={() => setShowDoctorResults(false)}>
+							<X className="h-4 w-4 mr-2" />
+							Close
+						</Button>
 					</div>
 				</AlertDialogContent>
 			</AlertDialog>

app/client/modules/repositories/tabs/info.tsx

@@ -2,6 +2,7 @@ import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { toast } from "sonner";
 import { useNavigate } from "react-router";
+import { Check, Save, X } from "lucide-react";
 import { Card } from "~/client/components/ui/card";
 import { Button } from "~/client/components/ui/button";
 import { Input } from "~/client/components/ui/input";
@@ -146,6 +147,7 @@ export const RepositoryInfoTabContent = ({ repository }: Props) => {
 
 					<div className="flex justify-end pt-4 border-t">
 						<Button type="submit" disabled={!hasChanges || updateMutation.isPending} loading={updateMutation.isPending}>
+							<Save className="h-4 w-4 mr-2" />
 							Save Changes
 						</Button>
 					</div>
@@ -159,8 +161,14 @@ export const RepositoryInfoTabContent = ({ repository }: Props) => {
 						<AlertDialogDescription>Are you sure you want to update the repository settings?</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>

app/client/modules/repositories/tabs/snapshots.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { Database } from "lucide-react";
+import { Database, X } from "lucide-react";
 import { useState } from "react";
 import { listSnapshotsOptions } from "~/client/api-client/@tanstack/react-query.gen";
 import { SnapshotsTable } from "~/client/components/snapshots-table";
@@ -124,6 +124,7 @@ export const RepositorySnapshotsTabContent = ({ repository }: Props) => {
 								<div className="flex flex-col items-center gap-3">
 									<p className="text-muted-foreground">No snapshots match your search.</p>
 									<Button onClick={() => setSearchQuery("")} variant="outline" size="sm">
+										<X className="h-4 w-4 mr-2" />
 										Clear search
 									</Button>
 								</div>