feat: ws client & new backups frontend (#4813)

* feat: ws client

* feat: v1 backups endpoints

* feat: migrate backups page to api-client and new DI ctx

* feat: switch to ws client via api-client

* fix: disgust

* fix: stats

* fix: console

* feat: v0 backups api

* feat: migrate backups.vue to page system w/ components to ui pkgs

* feat: polish backups frontend

* feat: pending refactor for ws handling of backups

* fix: vue shit

* fix: cancel logic fix

* fix: qa issues

* fix: alignment issues for backups page

* fix: bar positioning

* feat: finish QA

* fix: icons

* fix: lint & i18n

* fix: clear comment

* lint

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

packages/ui/src/components/base/Button.vue

@@ -43,6 +43,10 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
 })
 
 const accentedButton = computed(() =>
@@ -69,6 +73,7 @@ const classes = computed(() => {
 		'btn-hover-filled-only': props.hoverFilledOnly,
 		'btn-outline': props.outline,
 		'color-accent-contrast': accentedButton,
+		disabled: props.disabled,
 	}
 })
 </script>
@@ -78,10 +83,14 @@ const classes = computed(() => {
 		v-if="link && link.startsWith('/')"
 		class="btn"
 		:class="classes"
-		:to="link"
+		:to="disabled ? '' : link"
 		:target="external ? '_blank' : '_self'"
 		@click="
 			(event) => {
+				if (disabled) {
+					event.preventDefault()
+					return
+				}
 				if (action) {
 					action(event)
 				}
@@ -96,10 +105,14 @@ const classes = computed(() => {
 		v-else-if="link"
 		class="btn"
 		:class="classes"
-		:href="link"
+		:href="disabled ? undefined : link"
 		:target="external ? '_blank' : '_self'"
 		@click="
 			(event) => {
+				if (disabled) {
+					event.preventDefault()
+					return
+				}
 				if (action) {
 					action(event)
 				}
@@ -110,7 +123,7 @@ const classes = computed(() => {
 		<ExternalIcon v-if="external && !iconOnly" class="external-icon" />
 		<UnknownIcon v-if="!$slots.default" />
 	</a>
-	<button v-else class="btn" :class="classes" @click="action">
+	<button v-else class="btn" :class="classes" :disabled="disabled" @click="action">
 		<slot />
 		<UnknownIcon v-if="!$slots.default" />
 	</button>