Handle error on modals

frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte

@@ -57,8 +57,14 @@
 	} from '$lib/components/workspaceSettings/DucklakeSettings.svelte'
 	import { AIMode } from '$lib/components/copilot/chat/AIChatManager.svelte'
 	import UnsavedConfirmationModal from '$lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte'
+	import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte'
 	import TextInput from '$lib/components/text_input/TextInput.svelte'
 
+	let archiveModalOpen = $state(false)
+	let deleteModalOpen = $state(false)
+	let isProcessingArchive = $state(false)
+	let isProcessingDelete = $state(false)
+
 	let slackInitialPath: string = $state('')
 	let slackScriptPath: string = $state('')
 	let teamsInitialPath: string = $state('')
@@ -742,30 +748,18 @@
 					disabled={$workspaceStore === 'admins' || $workspaceStore === 'starter'}
 					unifiedSize="md"
 					btnClasses="mt-2"
-					on:click={async () => {
-						await WorkspaceService.archiveWorkspace({ workspace: $workspaceStore ?? '' })
-						sendUserToast(`Archived workspace ${$workspaceStore}`)
-						workspaceStore.set(undefined)
-						usersWorkspaceStore.set(undefined)
-						goto('/user/workspaces')
-					}}
+					on:click={() => (archiveModalOpen = true)}
 				>
 					Archive workspace
 				</Button>
 
 				{#if $superadmin}
 					<Button
-						color="red"
+						destructive
 						disabled={$workspaceStore === 'admins' || $workspaceStore === 'starter'}
 						size="sm"
 						btnClasses="mt-2"
-						on:click={async () => {
-							await WorkspaceService.deleteWorkspace({ workspace: $workspaceStore ?? '' })
-							sendUserToast(`Deleted workspace ${$workspaceStore}`)
-							workspaceStore.set(undefined)
-							usersWorkspaceStore.set(undefined)
-							goto('/user/workspaces')
-						}}
+						on:click={() => (deleteModalOpen = true)}
 					>
 						Delete workspace (superadmin)
 					</Button>
@@ -1050,5 +1044,64 @@
 	tabMode={true}
 />
 
+<ConfirmationModal
+	open={archiveModalOpen}
+	title="Archive workspace"
+	confirmationText="Archive"
+	type="danger"
+	loading={isProcessingArchive}
+	onConfirmed={async () => {
+		isProcessingArchive = true
+		try {
+			await WorkspaceService.archiveWorkspace({ workspace: $workspaceStore ?? '' })
+			sendUserToast(`Archived workspace ${$workspaceStore}`)
+			workspaceStore.set(undefined)
+			usersWorkspaceStore.set(undefined)
+			goto('/user/workspaces')
+			archiveModalOpen = false
+		} catch (error) {
+			sendUserToast(`Failed to archive workspace: ${error}`, true)
+		} finally {
+			isProcessingArchive = false
+		}
+	}}
+	onCanceled={() => (archiveModalOpen = false)}
+>
+	<span>
+		Are you sure you want to archive workspace <b class='text-emphasis font-semibold'>{$workspaceStore}</b>? This action can be reversed by a superadmin.
+	</span>
+</ConfirmationModal>
+
+<ConfirmationModal
+	open={deleteModalOpen}
+	title="Delete workspace permanently"
+	confirmationText="Delete"
+	type="danger"
+	loading={isProcessingDelete}
+	onConfirmed={async () => {
+		isProcessingDelete = true
+		try {
+			await WorkspaceService.deleteWorkspace({ workspace: $workspaceStore ?? '' })
+			sendUserToast(`Deleted workspace ${$workspaceStore}`)
+			workspaceStore.set(undefined)
+			usersWorkspaceStore.set(undefined)
+			goto('/user/workspaces')
+			deleteModalOpen = false
+		} catch (error) {
+			sendUserToast(`Failed to delete workspace: ${error}`, true)
+		} finally {
+			isProcessingDelete = false
+		}
+	}}
+	onCanceled={() => (deleteModalOpen = false)}
+>
+	<span>
+		Are you sure you want to permanently delete workspace <b class='text-emphasis font-semibold'>{$workspaceStore}</b>?
+	</span>
+	<p class="mt-2 text-emphasis text-red-600 font-semibold">
+		This action is irreversible and will permanently delete all data in this workspace.
+	</p>
+</ConfirmationModal>
+
 <style>
 </style>