Files
api/web/components/UserProfile/ServerState.vue
Eli Bosley 88087d5201 feat: mount vue apps, not web components (#1639)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Standalone web bundle with auto-mount utilities and a self-contained
test page.
* New responsive modal components for consistent mobile/desktop dialogs.
  * Header actions to copy OS/API versions.

* **Improvements**
* Refreshed UI styles (muted borders), accessibility and animation
refinements.
  * Theming updates and Tailwind v4–aligned, component-scoped styles.
  * Runtime GraphQL endpoint override and CSRF header support.

* **Bug Fixes**
* Safer network fetching and improved manifest/asset loading with
duplicate protection.

* **Tests/Chores**
* Parallel plugin tests, new extractor test suite, and updated
build/test scripts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-09-03 15:42:21 -04:00

46 lines
1.6 KiB
Vue

<script setup lang="ts">
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
import { useServerStore } from '~/store/server';
import type { ServerStateDataAction } from '~/types/server';
import UpcServerStateBuy from './ServerStateBuy.vue';
const { t } = useI18n();
const { state, stateData } = storeToRefs(useServerStore());
const purchaseAction = computed((): ServerStateDataAction | undefined => {
return stateData.value.actions && stateData.value.actions.find(action => action.name === 'purchase');
});
const upgradeAction = computed((): ServerStateDataAction | undefined => {
return stateData.value.actions && stateData.value.actions.find(action => action.name === 'upgrade');
});
</script>
<template>
<span class="flex flex-row items-center gap-x-2">
<template v-if="upgradeAction">
<UpcServerStateBuy
class="text-header-text-secondary"
:title="t('Upgrade Key')"
@click="upgradeAction.click?.()"
>
<span class="font-semibold">Unraid OS <em><strong>{{ t(stateData.humanReadable) }}</strong></em></span>
</UpcServerStateBuy>
</template>
<span v-else class="font-semibold">
Unraid OS <em :class="{ 'text-unraid-red': stateData.error || state === 'EEXPIRED' }"><strong>{{ t(stateData.humanReadable) }}</strong></em>
</span>
<template v-if="purchaseAction">
<UpcServerStateBuy
class="text-orange-dark relative top-px hidden sm:!block"
:title="t('Purchase Key')"
@click="purchaseAction.click?.()"
>{{ t('Purchase') }}</UpcServerStateBuy>
</template>
</span>
</template>