From df371568c76aae09418ca2a8930b4a2ee3788563 Mon Sep 17 00:00:00 2001
From: Starystars67 <starystars67@gmail.com>
Date: Mon, 29 Dec 2025 18:52:34 +0000
Subject: [PATCH] add GH release points to timeline & fix padding of nav and
 logo

---
 package.json                     |  2 +-
 src/components/AppNavigation.vue | 44 ++++++++++++++++-----------
 src/views/Statistics.vue         | 52 ++++++++++++++++++++++++++++----
 3 files changed, 74 insertions(+), 24 deletions(-)

diff --git a/package.json b/package.json
index 943661b..7709c1b 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "beammp-website",
   "private": true,
-  "version": "2.4.8",
+  "version": "2.4.9",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/components/AppNavigation.vue b/src/components/AppNavigation.vue
index f2651a8..ff89cb9 100644
--- a/src/components/AppNavigation.vue
+++ b/src/components/AppNavigation.vue
@@ -33,30 +33,31 @@ function localRoute(path) {
 
 <template>
   <header
-    class="border-b border-neutral-200 dark:border-neutral-800 bg-white/80 dark:bg-neutral-900/70 backdrop-blur sticky top-0 z-20 overflow-hidden"
+    class="border-b border-neutral-200 dark:border-neutral-800 bg-white/80 dark:bg-neutral-900/70 backdrop-blur sticky top-0 z-20"
   >
-    <nav class="max-w-7xl mx-auto px-3 sm:px-4 h-16 flex items-center justify-between gap-2 sm:gap-4">
+    <nav class="max-w-6xl mx-auto px-4 h-16 flex items-center justify-between">
       <RouterLink
         :to="localRoute('')"
-        class="flex items-center gap-2 flex-shrink-0"
+        class="flex items-center gap-2 shrink-0 mr-4"
         @click="closeMobileMenu"
       >
         <!-- Light mode logo (black) -->
         <img
           src="/src/assets/BeamMP_blk.png"
           alt="BeamMP Logo"
-          class="h-12 sm:h-14 w-auto flex-shrink-0 dark:hidden"
+          class="h-16 w-auto shrink-0 dark:hidden"
         />
         <!-- Dark mode logo (white) -->
         <img
           src="/src/assets/BeamMP_wht.png"
           alt="BeamMP Logo"
-          class="h-12 sm:h-14 w-auto flex-shrink-0 hidden dark:block"
+          class="h-16 w-auto shrink-0 hidden dark:block"
         />
       </RouterLink>
 
       <!-- Desktop Navigation -->
-      <div class="hidden xl:flex items-center gap-1 flex-1 justify-end overflow-x-auto">
+      <!-- Switch to mobile earlier (avoid logo crowding) -->
+      <div class="hidden xl:flex items-center gap-4">
         <NavigationMenu>
           <NavigationMenuList>
             <NavigationMenuItem>
@@ -155,6 +156,24 @@ function localRoute(path) {
                 </a>
               </NavigationMenuLink>
             </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuLink as-child>
+                <a
+                  href="https://store.beammp.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="External link"
+                  :class="
+                    cn(
+                      navigationMenuTriggerStyle(),
+                      'bg-transparent text-neutral-900 hover:bg-neutral-100 hover:text-neutral-900 dark:bg-transparent dark:text-white dark:hover:bg-neutral-800 dark:hover:text-white'
+                    )
+                  "
+                >
+                  {{ $t('message.nav.store') }}
+                </a>
+              </NavigationMenuLink>
+            </NavigationMenuItem>
             <NavigationMenuItem>
               <NavigationMenuLink as-child>
                 <a
@@ -200,7 +219,7 @@ function localRoute(path) {
       </div>
 
       <!-- Mobile Menu Button and Theme Toggle -->
-      <div class="flex xl:hidden items-center gap-1 sm:gap-2 flex-shrink-0">
+      <div class="flex xl:hidden items-center gap-2">
         <LanguageSelector />
         <ThemeToggle />
         <button
@@ -225,7 +244,7 @@ function localRoute(path) {
     >
       <div
         v-if="mobileMenuOpen"
-        class="xl:hidden border-t border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900"
+        class="md:hidden border-t border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900"
       >
         <div class="px-4 py-3 space-y-1">
           <RouterLink
@@ -274,15 +293,6 @@ function localRoute(path) {
           >
             {{ $t('message.nav.docs') }}
           </a>
-          <a
-            href="https://store.beammp.com"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="block px-4 py-3 text-neutral-900 dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
-            @click="closeMobileMenu"
-          >
-            {{ $t('message.nav.store') }}
-          </a>
           <a
             href="https://github.com/BeamMP/BeamMP"
             target="_blank"
diff --git a/src/views/Statistics.vue b/src/views/Statistics.vue
index 099cafb..2de3bcd 100644
--- a/src/views/Statistics.vue
+++ b/src/views/Statistics.vue
@@ -7,6 +7,8 @@ const servers = ref([])
 
 // Backend endpoints (use null to fall back to synthetic data)
 const STATS_ENDPOINT = null // e.g., 'https://backend.beammp.com/stats-timeseries'
+const MOD_RELEASES_ENDPOINT = 'https://api.github.com/repos/BeamMP/BeamMP/releases' // e.g., 'https://backend.beammp.com/releases'
+const SERVER_RELEASES_ENDPOINT = 'https://api.github.com/repos/BeamMP/BeamMP-Server/releases' // e.g., 'https://backend.beammp.com/server-releases'
 
 // All-time high tracking
 const peakPlayers = ref(0)
@@ -33,14 +35,52 @@ const selectedRangeKey = ref('7d')
 const selectedRange = computed(() => ranges.find((r) => r.key === selectedRangeKey.value))
 
 // Release markers (fill with real dates/labels as desired)
-const releases = ref([
-  { date: '2025-11-24', label: 'v4.0.0' },
-  { date: '2025-11-27', label: 'v4.1.0' },
-  { date: '2025-11-29', label: 'v4.2.0' },
+const mod_releases = ref([
+  //{ date: '2025-11-24', label: 'v4.0.0' },
+  //{ date: '2025-11-27', label: 'v4.1.0' },
+  //{ date: '2025-11-29', label: 'v4.2.0' },
+])
+
+const server_releases = ref([
+  //{ date: '2025-11-25', label: 'v4.0.0' },
+  //{ date: '2025-11-28', label: 'v4.1.0' },
+  //{ date: '2025-11-30', label: 'v4.2.0' },
 ])
 
 // Load time-series from backend or generate synthetic
 async function loadTimeSeries(points, stepHours) {
+  if (MOD_RELEASES_ENDPOINT) {
+    try {
+      const res = await fetch(MOD_RELEASES_ENDPOINT)
+      if (res.ok) {
+        const r = await res.json()
+        r.forEach((rel) => {
+          const existing = mod_releases.value.find((e) => e.label === rel.tag_name)
+          if (!existing) {
+            mod_releases.value.push({ date: rel.published_at, label: rel.tag_name })
+          }
+        })
+      }
+    } catch (e) {
+      console.error('Failed to load releases:', e)
+    }
+  }
+  if (SERVER_RELEASES_ENDPOINT) {
+    try {
+      const res = await fetch(SERVER_RELEASES_ENDPOINT)
+      if (res.ok) {
+        const r = await res.json()
+        r.forEach((rel) => {
+          const existing = server_releases.value.find((e) => e.label === rel.tag_name)
+          if (!existing) {
+            server_releases.value.push({ date: rel.published_at, label: rel.tag_name })
+          }
+        })
+      }
+    } catch (e) {
+      console.error('Failed to load releases:', e)
+    }
+  }
   if (STATS_ENDPOINT) {
     try {
       const res = await fetch(STATS_ENDPOINT)
@@ -256,7 +296,7 @@ function drawPlayers() {
   ctx.strokeStyle = 'rgba(255,106,0,0.8)'
   ctx.fillStyle = 'rgba(255,106,0,0.9)'
   ctx.lineWidth = 1
-  const rels = (releases.value || [])
+  const rels = (mod_releases.value || [])
     .map((r) => ({ ...r, time: new Date(r.date).getTime() }))
     .filter((r) => !isNaN(r.time) && r.time >= minT && r.time <= maxT)
   releaseMarkersPlayers = []
@@ -380,7 +420,7 @@ function drawServers() {
   ctx.strokeStyle = 'rgba(255,106,0,0.8)'
   ctx.fillStyle = 'rgba(255,106,0,0.9)'
   ctx.lineWidth = 1
-  const rels = (releases.value || [])
+  const rels = (server_releases.value || [])
     .map((r) => ({ ...r, time: new Date(r.date).getTime() }))
     .filter((r) => !isNaN(r.time) && r.time >= minT && r.time <= maxT)
   releaseMarkersServers = []