refactor: remove icons where it was making the context worse

app/client/components/create-repository-form.tsx

@@ -280,7 +280,7 @@ export const CreateRepositoryForm = ({
 								<AlertDialogHeader>
 									<AlertDialogTitle className="flex items-center gap-2">
 										<AlertTriangle className="h-5 w-5 text-yellow-500" />
-										Important: Host Mount Required
+										Important: Host mount required
 									</AlertDialogTitle>
 									<AlertDialogDescription className="space-y-3">
 										<p>When selecting a custom path, ensure it is mounted from the host machine into the container.</p>
@@ -294,17 +294,13 @@ export const CreateRepositoryForm = ({
 									</AlertDialogDescription>
 								</AlertDialogHeader>
 								<AlertDialogFooter>
-									<AlertDialogCancel>
+									<AlertDialogCancel>Cancel</AlertDialogCancel>
-										<X className="h-4 w-4 mr-2" />
-										Cancel
-									</AlertDialogCancel>
 									<AlertDialogAction
 										onClick={() => {
 											setShowPathBrowser(true);
 											setShowPathWarning(false);
 										}}
 									>
-										<Check className="h-4 w-4 mr-2" />
 										I Understand, Continue
 									</AlertDialogAction>
 								</AlertDialogFooter>

app/client/components/restore-form.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
-import { ChevronDown, FileIcon, FolderOpen, RotateCcw, X } from "lucide-react";
+import { ChevronDown, FileIcon, FolderOpen, RotateCcw } from "lucide-react";
 import { Button } from "~/client/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card";
 import { Checkbox } from "~/client/components/ui/checkbox";
@@ -161,7 +161,6 @@ export function RestoreForm({ snapshot, repositoryName, snapshotId, returnPath }
 				</div>
 				<div className="flex gap-2">
 					<Button variant="outline" onClick={() => navigate(returnPath)}>
-						<X className="h-4 w-4 mr-2" />
 						Cancel
 					</Button>
 					<Button variant="primary" onClick={handleRestore} disabled={isRestoring || !canRestore}>

app/client/components/snapshots-table.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Calendar, Clock, Database, FolderTree, HardDrive, Trash2, X } from "lucide-react";
+import { Calendar, Clock, Database, FolderTree, HardDrive, Trash2 } from "lucide-react";
 import { Link, useNavigate } from "react-router";
 import { toast } from "sonner";
 import { ByteSize } from "~/client/components/bytes-size";
@@ -183,16 +183,12 @@ export const SnapshotsTable = ({ snapshots, repositoryName, backups }: Props) =>
 						</AlertDialogDescription>
 					</AlertDialogHeader>
 					<AlertDialogFooter>
-						<AlertDialogCancel>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
-							<X className="h-4 w-4 mr-2" />
-							Cancel
-						</AlertDialogCancel>
 						<AlertDialogAction
 							onClick={handleConfirmDelete}
 							disabled={deleteSnapshot.isPending}
 							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
 						>
-							<Trash2 className="h-4 w-4 mr-2" />
 							Delete snapshot
 						</AlertDialogAction>
 					</AlertDialogFooter>

app/client/modules/backups/components/schedule-notifications-config.tsx

@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { Bell, Plus, Save, Trash2, X } from "lucide-react";
+import { Bell, Plus, Trash2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { Button } from "~/client/components/ui/button";
@@ -174,7 +174,6 @@ export const ScheduleNotificationsConfig = ({ scheduleId, destinations }: Props)
 							</SelectContent>
 						</Select>
 						<Button variant="ghost" size="sm" onClick={() => setIsAddingNew(false)}>
-							<X className="h-4 w-4 mr-2" />
 							Cancel
 						</Button>
 					</div>
@@ -255,11 +254,9 @@ export const ScheduleNotificationsConfig = ({ scheduleId, destinations }: Props)
 				{hasChanges && (
 					<div className="flex gap-2 justify-end mt-4 pt-4">
 						<Button variant="outline" size="sm" onClick={handleReset}>
-							<X className="h-4 w-4 mr-2" />
 							Cancel
 						</Button>
 						<Button variant="default" size="sm" onClick={handleSave} loading={updateNotifications.isPending}>
-							<Save className="h-4 w-4 mr-2" />
 							Save changes
 						</Button>
 					</div>

app/client/modules/backups/components/schedule-summary.tsx

@@ -207,15 +207,11 @@ export const ScheduleSummary = (props: Props) => {
 						</AlertDialogDescription>
 					</AlertDialogHeader>
 					<div className="flex gap-3 justify-end">
-						<AlertDialogCancel>
+						<AlertDialogCancel>Cancel</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 schedule
 						</AlertDialogAction>
 					</div>

app/client/modules/backups/components/snapshot-file-browser.tsx

@@ -98,7 +98,7 @@ export const SnapshotFileBrowser = (props: Props) => {
 								}
 								className={buttonVariants({ variant: "primary", size: "sm" })}
 							>
-								<RotateCcw className="h-4 w-4 mr-2" />
+								<RotateCcw className="h-4 w-4" />
 								Restore
 							</Link>
 							{onDeleteSnapshot && (

app/client/modules/backups/routes/backup-details.tsx

@@ -2,7 +2,7 @@ import { useId, useState } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { redirect, useNavigate } from "react-router";
 import { toast } from "sonner";
-import { Save, Trash2, X } from "lucide-react";
+import { Save, X } from "lucide-react";
 import { Button } from "~/client/components/ui/button";
 import {
 	AlertDialog,
@@ -269,16 +269,12 @@ export default function ScheduleDetailsPage({ params, loaderData }: Route.Compon
 						</AlertDialogDescription>
 					</AlertDialogHeader>
 					<AlertDialogFooter>
-						<AlertDialogCancel>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
-							<X className="h-4 w-4 mr-2" />
-							Cancel
-						</AlertDialogCancel>
 						<AlertDialogAction
 							onClick={handleConfirmDelete}
 							disabled={deleteSnapshot.isPending}
 							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
 						>
-							<Trash2 className="h-4 w-4 mr-2" />
 							Delete snapshot
 						</AlertDialogAction>
 					</AlertDialogFooter>

app/client/modules/notifications/routes/create-notification.tsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@tanstack/react-query";
-import { Bell, Plus, X } from "lucide-react";
+import { Bell, Plus } from "lucide-react";
 import { useId } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
@@ -65,7 +65,6 @@ export default function CreateNotification() {
 					<CreateNotificationForm mode="create" formId={formId} onSubmit={handleSubmit} />
 					<div className="flex justify-end gap-2 pt-4 border-t">
 						<Button type="button" variant="secondary" onClick={() => navigate("/notifications")}>
-							<X className="h-4 w-4 mr-2" />
 							Cancel
 						</Button>
 						<Button type="submit" form={formId} loading={createNotification.isPending}>

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

@@ -1,5 +1,5 @@
 import { useMutation } from "@tanstack/react-query";
-import { Database, Plus, X } from "lucide-react";
+import { Database, Plus } from "lucide-react";
 import { useId } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
@@ -76,12 +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
+							Create repository
 						</Button>
 					</div>
 				</CardContent>

app/client/modules/repositories/routes/repositories.tsx

@@ -72,7 +72,7 @@ export default function Repositories({ loaderData }: Route.ComponentProps) {
 				button={
 					<Button onClick={() => navigate("/repositories/create")}>
 						<Plus size={16} className="mr-2" />
-						Create Repository
+						Create repository
 					</Button>
 				}
 			/>

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

@@ -149,12 +149,12 @@ export default function RepositoryDetailsPage({ loaderData }: Route.ComponentPro
 						{doctorMutation.isPending ? (
 							<>
 								<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-								Running Doctor...
+								Running doctor...
 							</>
 						) : (
 							<>
 								<Stethoscope className="h-4 w-4 mr-2" />
-								Run Doctor
+								Run doctor
 							</>
 						)}
 					</Button>
@@ -206,7 +206,7 @@ export default function RepositoryDetailsPage({ loaderData }: Route.ComponentPro
 			<AlertDialog open={showDoctorResults} onOpenChange={setShowDoctorResults}>
 				<AlertDialogContent className="max-w-2xl">
 					<AlertDialogHeader>
-						<AlertDialogTitle>Doctor Results</AlertDialogTitle>
+						<AlertDialogTitle>Doctor results</AlertDialogTitle>
 						<AlertDialogDescription>Repository doctor operation completed</AlertDialogDescription>
 					</AlertDialogHeader>
 
@@ -238,10 +238,7 @@ export default function RepositoryDetailsPage({ loaderData }: Route.ComponentPro
 					)}
 
 					<div className="flex justify-end">
-						<Button onClick={() => setShowDoctorResults(false)}>
+						<Button onClick={() => setShowDoctorResults(false)}>Close</Button>
-							<X className="h-4 w-4 mr-2" />
-							Close
-						</Button>
 					</div>
 				</AlertDialogContent>
 			</AlertDialog>

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

@@ -2,7 +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 { Check, Save } from "lucide-react";
 import { Card } from "~/client/components/ui/card";
 import { Button } from "~/client/components/ui/button";
 import { Input } from "~/client/components/ui/input";
@@ -157,16 +157,13 @@ export const RepositoryInfoTabContent = ({ repository }: Props) => {
 			<AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
 				<AlertDialogContent>
 					<AlertDialogHeader>
-						<AlertDialogTitle>Update Repository</AlertDialogTitle>
+						<AlertDialogTitle>Update repository</AlertDialogTitle>
 						<AlertDialogDescription>Are you sure you want to update the repository settings?</AlertDialogDescription>
 					</AlertDialogHeader>
 					<AlertDialogFooter>
-						<AlertDialogCancel>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
-							<X className="h-4 w-4 mr-2" />
-							Cancel
-						</AlertDialogCancel>
 						<AlertDialogAction onClick={confirmUpdate}>
-							<Check className="h-4 w-4 mr-2" />
+							<Check className="h-4 w-4" />
 							Update
 						</AlertDialogAction>
 					</AlertDialogFooter>

app/client/modules/volumes/routes/create-volume.tsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@tanstack/react-query";
-import { HardDrive, Plus, X } from "lucide-react";
+import { HardDrive, Plus } from "lucide-react";
 import { useId } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "sonner";
@@ -70,7 +70,6 @@ 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}>

app/client/modules/volumes/routes/volume-details.tsx

@@ -2,7 +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 { Plug, Unplug } 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";
@@ -149,7 +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" />
+						<Plug className="h-4 w-4 mr-2" />
 						Mount
 					</Button>
 					<Button
@@ -158,11 +158,10 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
 						loading={unmountVol.isPending}
 						className={cn({ hidden: volume.status !== "mounted" })}
 					>
-						<CircleStop className="h-4 w-4 mr-2" />
+						<Unplug 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>
@@ -204,15 +203,11 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
 						</AlertDialogDescription>
 					</AlertDialogHeader>
 					<div className="flex gap-3 justify-end">
-						<AlertDialogCancel>
+						<AlertDialogCancel>Cancel</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>

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

@@ -2,7 +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 { Check } from "lucide-react";
 import { CreateVolumeForm, type FormValues } from "~/client/components/create-volume-form";
 import {
 	AlertDialog,
@@ -94,12 +94,9 @@ export const VolumeInfoTabContent = ({ volume, statfs }: Props) => {
 						</AlertDialogDescription>
 					</AlertDialogHeader>
 					<AlertDialogFooter>
-						<AlertDialogCancel>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
-							<X className="h-4 w-4 mr-2" />
-							Cancel
-						</AlertDialogCancel>
 						<AlertDialogAction onClick={confirmUpdate}>
-							<Check className="h-4 w-4 mr-2" />
+							<Check className="h-4 w-4" />
 							Update
 						</AlertDialogAction>
 					</AlertDialogFooter>

biome.json

@@ -1,8 +1,9 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.3.5/schema.json",
+	"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
 	"vcs": {
 		"enabled": true,
 		"clientKind": "git",
+		"defaultBranch": "origin/main",
 		"useIgnoreFile": true
 	},
 	"files": {

package.json

@@ -9,7 +9,7 @@
 		"start": "bun ./dist/server/index.js",
 		"tsc": "react-router typegen && tsc",
 		"lint": "biome check .",
-		"lint:ci": "biome check . --ci",
+		"lint:ci": "biome ci . --changed --error-on-warnings --no-errors-on-unmatched",
 		"start:dev": "docker compose down && docker compose up --build zerobyte-dev",
 		"start:prod": "docker compose down && docker compose up --build zerobyte-prod",
 		"gen:api-client": "openapi-ts",