backup page fixes and new impls for new apis (#3437)

* wip: backup page fixes and new impls for new apis

* wip: more progress on backup fixes, almost done

* lint

* Backups cleanup

* Don't show create warning if creating

* Fix ongoing state

* Download support

* Support ready

* Disable auto backup button

* Use auth param for download of backups

* Disable install buttons when backup is in progress, add retrying

* Make prepare button have immediate feedback, don't refresh backups in all cases

* Intl:extract & rebase fixes

* Updated changelog and fix lint

---------

Co-authored-by: Prospector <prospectordev@gmail.com>

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

@@ -195,7 +195,7 @@ const colorVariables = computed(() => {
   > *:first-child
   > *:first-child
   > :is(button, a, .button-like):first-child {
-  @apply flex cursor-pointer flex-row items-center justify-center border-solid border-2 border-transparent bg-[--_bg] text-[--_text] h-[--_height] min-w-[--_width] rounded-[--_radius] px-[--_padding-x] py-[--_padding-y] gap-[--_gap] font-[--_font-weight];
+  @apply flex cursor-pointer flex-row items-center justify-center border-solid border-2 border-transparent bg-[--_bg] text-[--_text] h-[--_height] min-w-[--_width] rounded-[--_radius] px-[--_padding-x] py-[--_padding-y] gap-[--_gap] font-[--_font-weight] whitespace-nowrap;
   transition:
     scale 0.125s ease-in-out,
     background-color 0.25s ease-in-out,
@@ -204,6 +204,7 @@ const colorVariables = computed(() => {
   svg:first-child {
     color: var(--_icon, var(--_text));
     transition: color 0.25s ease-in-out;
+    flex-shrink: 0;
   }
 
   &[disabled],

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

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    progress: number
+    max?: number
+    color?: 'brand' | 'green' | 'red' | 'orange' | 'blue' | 'purple' | 'gray'
+    waiting?: boolean
+  }>(),
+  {
+    max: 1,
+    color: 'brand',
+    waiting: false,
+  },
+)
+
+const colors = {
+  brand: {
+    fg: 'bg-brand',
+    bg: 'bg-brand-highlight',
+  },
+  green: {
+    fg: 'bg-green',
+    bg: 'bg-bg-green',
+  },
+  red: {
+    fg: 'bg-red',
+    bg: 'bg-bg-red',
+  },
+  orange: {
+    fg: 'bg-orange',
+    bg: 'bg-bg-orange',
+  },
+  blue: {
+    fg: 'bg-blue',
+    bg: 'bg-bg-blue',
+  },
+  purple: {
+    fg: 'bg-purple',
+    bg: 'bg-bg-purple',
+  },
+  gray: {
+    fg: 'bg-gray',
+    bg: 'bg-bg-gray',
+  },
+}
+
+const percent = computed(() => props.progress / props.max)
+</script>
+<template>
+  <div class="flex w-[15rem] h-1 rounded-full overflow-hidden" :class="colors[props.color].bg">
+    <div
+      class="rounded-full progress-bar"
+      :class="[colors[props.color].fg, { 'progress-bar--waiting': waiting }]"
+      :style="!waiting ? { width: `${percent * 100}%` } : {}"
+    ></div>
+  </div>
+</template>
+<style scoped lang="scss">
+.progress-bar {
+  transition: width 0.2s ease-in-out;
+}
+
+.progress-bar--waiting {
+  animation: progress-bar-waiting 1s linear infinite;
+  position: relative;
+}
+
+@keyframes progress-bar-waiting {
+  0% {
+    left: -50%;
+    width: 20%;
+  }
+  50% {
+    width: 60%;
+  }
+  100% {
+    left: 100%;
+    width: 20%;
+  }
+}
+</style>