fix: analytics events page not in admin dropdown (#6352)

* fix: analytics events page not in admin dropdown

* pnpm prepr

* fix: add clearing date picker

* fix: date picker positioning not using rendered height

apps/frontend/src/layouts/default.vue

@@ -383,6 +383,12 @@
 								action: (event) => $refs.modal_batch_credit.show(event),
 								shown: isAdmin(auth.user),
 							},
+							{
+								id: 'analytics-events',
+								color: 'primary',
+								link: '/admin/analytics/events',
+								shown: isAdmin(auth.user),
+							},
 						]"
 					>
 						<ModrinthIcon aria-hidden="true" />
@@ -417,6 +423,9 @@
 						<template #servers-nodes>
 							<ServerIcon aria-hidden="true" /> Credit server nodes
 						</template>
+						<template #analytics-events>
+							<ChartIcon aria-hidden="true" /> {{ formatMessage(messages.analyticsEvents) }}
+						</template>
 					</OverflowMenu>
 				</ButtonStyled>
 				<ButtonStyled type="transparent">
@@ -954,6 +963,10 @@ const messages = defineMessages({
 		id: 'layout.action.manage-affiliates',
 		defaultMessage: 'Manage affiliate links',
 	},
+	analyticsEvents: {
+		id: 'layout.action.analytics-events',
+		defaultMessage: 'Analytics events',
+	},
 	newProject: {
 		id: 'layout.action.new-project',
 		defaultMessage: 'New project',

apps/frontend/src/locales/en-US/index.json

@@ -2315,6 +2315,9 @@
   "landing.subheading": {
     "message": "Discover, play, and share Minecraft content through our open-source platform built for the community."
   },
+  "layout.action.analytics-events": {
+    "message": "Analytics events"
+  },
   "layout.action.change-theme": {
     "message": "Change theme"
   },

apps/frontend/src/pages/admin/analytics/events.vue

@@ -73,6 +73,7 @@
 					placeholder="Select start..."
 					input-class="w-full"
 					wrapper-class="w-full"
+					clearable
 					show-today
 				/>
 			</div>
@@ -89,6 +90,7 @@
 					placeholder="Select end..."
 					input-class="w-full"
 					wrapper-class="w-full"
+					clearable
 					show-today
 				/>
 			</div>
@@ -214,7 +216,11 @@
 
 				<template #empty-state>
 					<div class="flex h-64 items-center justify-center text-secondary">
-						{{ isLoadingEvents ? 'Loading analytics events...' : 'No results.' }}
+						<div v-if="isFetchingEvents" class="flex items-center gap-2">
+							<SpinnerIcon class="size-5 animate-spin" aria-hidden="true" />
+							Loading
+						</div>
+						<template v-else>No results.</template>
 					</div>
 				</template>
 			</Table>
@@ -224,7 +230,15 @@
 
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { EditIcon, ExternalIcon, PlusIcon, SaveIcon, SearchIcon, TrashIcon } from '@modrinth/assets'
+import {
+	EditIcon,
+	ExternalIcon,
+	PlusIcon,
+	SaveIcon,
+	SearchIcon,
+	SpinnerIcon,
+	TrashIcon,
+} from '@modrinth/assets'
 import {
 	ButtonStyled,
 	ConfirmModal,
@@ -322,7 +336,7 @@ let resetFormTimeout: ReturnType<typeof setTimeout> | null = null
 const {
 	data: analyticsEvents,
 	error: eventsError,
-	isLoading: isLoadingEvents,
+	isFetching: isFetchingEvents,
 } = useQuery({
 	queryKey: analyticsEventsQueryKey,
 	queryFn: () => client.labrinth.analytics_v3.getEvents(),
@@ -439,7 +453,7 @@ function openEditModal(event: Labrinth.Analytics.v3.AnalyticsEvent) {
 		title: event.title,
 		announcementUrl: event.announcement_url ?? '',
 		startsAt: getDateTimeInputValue(event.starts),
-		endsAt: getDateTimeInputValue(event.ends),
+		endsAt: isEventDateRange(event) ? getDateTimeInputValue(event.ends) : '',
 		metricKinds: event.for_metric_kind?.length ? [...event.for_metric_kind] : [...allMetricKinds],
 	}
 	committedAnnouncementUrl.value = event.announcement_url ?? ''