From 2386b4df0901bcbd5a3e6b420a9c2c59ef1bd8ba Mon Sep 17 00:00:00 2001 From: tdgao Date: Tue, 17 Mar 2026 20:09:42 -0600 Subject: [PATCH] start status/player count info label, more style updates and fixes --- apps/app-frontend/src/App.vue | 14 ++++----- .../src/pages/hosting/manage/[id].vue | 5 ++-- .../manage/[id]/options/properties.vue | 2 +- packages/ui/.storybook/preview.ts | 8 +++++ .../src/components/servers/ServerListing.vue | 29 ++++++++++++++----- .../components/servers/labels/Separator.vue | 3 ++ .../servers/labels/ServerGameLabel.vue | 8 +++-- .../servers/labels/ServerInfoLabels.vue | 9 ++++++ .../servers/labels/ServerLoaderLabel.vue | 9 +++--- .../servers/labels/ServerPlayerCount.vue | 17 +++++++++++ .../servers/labels/ServerSubdomainLabel.vue | 10 ++++--- .../servers/labels/ServerUptimeLabel.vue | 9 +++--- .../servers/marketing/MedalServerListing.vue | 2 +- .../stories/servers/ServerListing.stories.ts | 2 +- 14 files changed, 93 insertions(+), 34 deletions(-) create mode 100644 packages/ui/src/components/servers/labels/Separator.vue create mode 100644 packages/ui/src/components/servers/labels/ServerPlayerCount.vue diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue index a4bc69aafc..06e392bf3d 100644 --- a/apps/app-frontend/src/App.vue +++ b/apps/app-frontend/src/App.vue @@ -970,13 +970,6 @@ provideAppUpdateDownloadProgress(appUpdateDownload) - - - + + +
diff --git a/apps/frontend/src/pages/hosting/manage/[id].vue b/apps/frontend/src/pages/hosting/manage/[id].vue index bcf3667fcf..87e799c124 100644 --- a/apps/frontend/src/pages/hosting/manage/[id].vue +++ b/apps/frontend/src/pages/hosting/manage/[id].vue @@ -160,7 +160,7 @@ :show-loader-label="showLoaderLabel" :uptime-seconds="uptimeSeconds" :linked="true" - class="server-action-buttons-anim flex min-w-0 flex-col flex-wrap items-center gap-4 text-secondary *:hidden sm:flex-row sm:*:flex" + class="server-action-buttons-anim flex min-w-0 flex-col flex-wrap items-center gap-2 text-primary *:hidden sm:flex-row sm:*:flex" /> @@ -1135,7 +1135,8 @@ const handleInstallationResult = async (data: Archon.Websocket.v0.WSInstallation } const updateStats = (currentStats: Stats['current']) => { - isConnected.value = true + if (!isMounted.value) return + if (!isConnected.value) isConnected.value = true stats.value = { current: currentStats, past: { ...stats.value.current }, diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue index 81c957ea2d..c074e1373e 100644 --- a/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue +++ b/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue @@ -118,7 +118,7 @@ import { StyledInput, Toggle, } from '@modrinth/ui' -import { useMutation, useQueryClient } from '@tanstack/vue-query' +import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query' import Fuse from 'fuse.js' import { computed, ref, watch } from 'vue' diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts index a98e2efae1..9b340008eb 100644 --- a/packages/ui/.storybook/preview.ts +++ b/packages/ui/.storybook/preview.ts @@ -16,6 +16,7 @@ import { QueryClient, VueQueryPlugin } from '@tanstack/vue-query' import FloatingVue from 'floating-vue' import { computed, defineComponent, h, ref } from 'vue' import { createI18n } from 'vue-i18n' +import { createMemoryHistory, createRouter } from 'vue-router' import NotificationPanel from '../src/components/nav/NotificationPanel.vue' import PopupNotificationPanel from '../src/components/nav/PopupNotificationPanel.vue' @@ -166,6 +167,13 @@ setup((app) => { }) app.use(VueQueryPlugin, { queryClient }) app.use(i18n) + + const router = createRouter({ + history: createMemoryHistory(), + routes: [{ path: '/:pathMatch(.*)*', component: { render: () => null } }], + }) + app.use(router) + app.component('NuxtLink', StorybookLink) app.component('RouterLink', StorybookLink) app.component('ClientOnly', StorybookClientOnly) diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue index 7fff880840..473c0ca90f 100644 --- a/packages/ui/src/components/servers/ServerListing.vue +++ b/packages/ui/src/components/servers/ServerListing.vue @@ -5,7 +5,7 @@ class="flex flex-row items-center overflow-x-hidden rounded-2xl border-[1px] border-solid border-surface-5 bg-bg-raised p-4 transition-transform duration-100" :class="{ '!rounded-b-none border-b-0': status === 'suspended' || !!pendingChange, - 'opacity-75': status === 'suspended', + 'opacity-50 bg-surface-2': status === 'suspended', 'active:scale-95': status !== 'suspended' && !pendingChange, }" data-pyro-server-listing @@ -23,9 +23,9 @@

{{ name }}

- New + New
@@ -44,12 +44,25 @@ @@ -146,11 +159,10 @@ type ServerListingProps = { upstream?: Archon.Servers.v0.Upstream | null flows?: Archon.Servers.v0.Flows pendingChange?: PendingChange - ip?: string online?: boolean playerCount?: { - currentPlayerCount?: number - maxPlayerCount?: number + current?: number + max?: number } } @@ -160,6 +172,7 @@ const { kyros, labrinth } = injectModrinthClient() const showGameLabel = computed(() => !!props.game && !isConfiguring.value) const showLoaderLabel = computed(() => !!props.loader && !isConfiguring.value) +const showPlayerCount = computed(() => !!props.playerCount && !isConfiguring.value) const { data: projectData } = useQuery({ queryKey: ['project', props.upstream?.project_id] as const, diff --git a/packages/ui/src/components/servers/labels/Separator.vue b/packages/ui/src/components/servers/labels/Separator.vue new file mode 100644 index 0000000000..f434629a32 --- /dev/null +++ b/packages/ui/src/components/servers/labels/Separator.vue @@ -0,0 +1,3 @@ + diff --git a/packages/ui/src/components/servers/labels/ServerGameLabel.vue b/packages/ui/src/components/servers/labels/ServerGameLabel.vue index 6bbbbdec5f..5f64f66381 100644 --- a/packages/ui/src/components/servers/labels/ServerGameLabel.vue +++ b/packages/ui/src/components/servers/labels/ServerGameLabel.vue @@ -2,9 +2,11 @@
-