Implement breaking changes or non breaking changes

frontend/src/lib/components/AddonCard.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 	import { GetAddonLocalVersion, GetAddonRemoteVersion, UpdateAddon } from "$wails/main/App";
 	import { type main } from "$wails/models";
+	import { toast } from "svelte-sonner";
 	export let addon: main.Addon;
 	let localVersion = "0.0.0";
 	let remoteVersion = "0.0.0";
 	let upToDate = true;
-	let breakingChanges = false;
-	let wasUpdated = false;
+	let isUpdating = false;
+
 	GetAddonLocalVersion(addon.name).then((res) => {
 		localVersion = res.data;
 	});
@@ -14,14 +15,23 @@
 		remoteVersion = res.data;
 	});
 	$: upToDate = localVersion === remoteVersion;
-	
+
 	async function updateAddon() {
+		isUpdating = true;
 		const res = await UpdateAddon(addon.name);
 		if (res.error) {
 			console.error(res.error);
+			toast.error(`Failed to update ${addon.name}`);
 		} else {
-			breakingChanges = res.data;
-			wasUpdated = true;
+			if (res.data) {
+				toast.warning(`${addon.name} updated with breaking changes!`, {
+					duration: 5000
+				});
+			} else {
+				toast.success(`${addon.name} updated successfully!`, {
+					duration: 3000
+				});
+			}
 		}
 		GetAddonLocalVersion(addon.name).then((res) => {
 			localVersion = res.data;
@@ -29,16 +39,29 @@
 		GetAddonRemoteVersion(addon.name).then((res) => {
 			remoteVersion = res.data;
 		});
+		isUpdating = false;
 	}
 </script>
 
-<div class="bg-gray-900 text-white p-4 m-3 mx-2 rounded-lg">
+<div class="text-white p-4 m-3 mx-2 rounded-lg bg-gray-900">
 	<h2 class="text-2xl font-bold">{addon.name}</h2>
 	<p class="text-gray-300">Local Version: {localVersion}</p>
 	<p class="text-gray-300">Remote Version: {remoteVersion}</p>
 	{#if upToDate}
-		<button class="bg-green-500 disabled text-white p-2 my-2 cursor-default rounded-lg">Up to date</button>
+		<button class="bg-green-400 disabled text-white p-2 my-2 cursor-default rounded-lg w-32 h-10">
+			Up to date
+		</button>
 	{:else}
-		<button class="bg-blue-500 text-white p-2 my-2 rounded-lg" on:click={updateAddon}>Update</button>
+		<button
+			class="bg-blue-500 text-white p-2 my-2 rounded-lg w-32 h-10 hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
+			on:click={updateAddon}
+			disabled={isUpdating}
+		>
+			{#if isUpdating}
+				Updating...
+			{:else}
+				Update
+			{/if}
+		</button>
 	{/if}
 </div>