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>
This commit is contained in:
Calum H.
2025-12-04 02:32:03 +00:00
committed by GitHub
parent e3444a3456
commit 8eff939039
43 changed files with 2466 additions and 1177 deletions

View File

@@ -10,12 +10,14 @@
@click="() => (closeOnClickOutside && closable ? hide() : {})"
/>
<div
:class="{
shown: visible,
noblur: props.noblur,
danger: danger,
}"
class="modal-overlay"
:class="[
'modal-overlay',
{
shown: visible,
noblur: props.noblur,
},
computedFade,
]"
@click="() => (closeOnClickOutside && closable ? hide() : {})"
/>
<div class="modal-container experimental-styles-within" :class="{ shown: visible }">
@@ -106,7 +108,7 @@
<script setup lang="ts">
import { XIcon } from '@modrinth/assets'
import { ref } from 'vue'
import { computed, ref } from 'vue'
import { useScrollIndicator } from '../../composables/scroll-indicator'
import ButtonStyled from '../base/ButtonStyled.vue'
@@ -115,7 +117,9 @@ const props = withDefaults(
defineProps<{
noblur?: boolean
closable?: boolean
/** @deprecated Use `fade="danger"` instead */
danger?: boolean
fade?: 'standard' | 'warning' | 'danger'
closeOnEsc?: boolean
closeOnClickOutside?: boolean
warnOnClose?: boolean
@@ -131,6 +135,7 @@ const props = withDefaults(
type: true,
closable: true,
danger: false,
fade: undefined,
closeOnClickOutside: true,
closeOnEsc: true,
warnOnClose: false,
@@ -145,6 +150,12 @@ const props = withDefaults(
},
)
const computedFade = computed(() => {
if (props.fade) return props.fade
if (props.danger) return 'danger'
return 'standard'
})
const open = ref(false)
const visible = ref(false)
@@ -225,7 +236,6 @@ function handleKeyDown(event: KeyboardEvent) {
z-index: 19;
opacity: 0;
transition: all 0.2s ease-out;
background: linear-gradient(to bottom, rgba(29, 48, 43, 0.52) 0%, rgba(14, 21, 26, 0.95) 100%);
//transform: translate(
// calc((-50vw + var(--_mouse-x, 50vw) * 1px) / 2),
// calc((-50vh + var(--_mouse-y, 50vh) * 1px) / 2)
@@ -234,6 +244,19 @@ function handleKeyDown(event: KeyboardEvent) {
border-radius: 180px;
//filter: blur(5px);
// Fade variants
&.standard {
background: linear-gradient(to bottom, rgba(29, 48, 43, 0.52) 0%, rgba(14, 21, 26, 0.95) 100%);
}
&.warning {
background: linear-gradient(to bottom, rgba(48, 38, 29, 0.52) 0%, rgba(26, 20, 14, 0.95) 100%);
}
&.danger {
background: linear-gradient(to bottom, rgba(43, 18, 26, 0.52) 0%, rgba(49, 10, 15, 0.95) 100%);
}
@media (prefers-reduced-motion) {
transition: none !important;
}
@@ -248,10 +271,6 @@ function handleKeyDown(event: KeyboardEvent) {
backdrop-filter: none;
filter: none;
}
&.danger {
background: linear-gradient(to bottom, rgba(43, 18, 26, 0.52) 0%, rgba(49, 10, 15, 0.95) 100%);
}
}
.modrinth-parent__no-modal-blurs {