From cd12d4dbecee6f34e91fe44351b1f9e0555f34fa Mon Sep 17 00:00:00 2001
From: Hikari <hikari@nhcarrigan.com>
Date: Sat, 7 Mar 2026 11:38:26 -0800
Subject: [PATCH] feat: show app version in sidebar, remove version from about
 page

Displays the app version below the Elysium title in the sidebar.
Removes the separate client/API version cards from the About panel.
Also fixes the Vite dev proxy port to match the API server.
---
 apps/web/src/components/game/AboutPanel.tsx | 11 -----------
 apps/web/src/components/game/ClickArea.tsx  |  1 +
 apps/web/src/styles.css                     |  7 +++++++
 apps/web/vite.config.ts                     |  2 +-
 4 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/components/game/AboutPanel.tsx b/apps/web/src/components/game/AboutPanel.tsx
index 36d8b1a..2eff148 100644
--- a/apps/web/src/components/game/AboutPanel.tsx
+++ b/apps/web/src/components/game/AboutPanel.tsx
@@ -101,17 +101,6 @@ export const AboutPanel = (): React.JSX.Element => {
     <section className="panel about-panel">
       <h2>ℹ️ About</h2>
 
-      <div className="about-versions">
-        <div className="about-version-card">
-          <span className="about-version-label">🌐 Client Version</span>
-          <span className="about-version-value">{__WEB_VERSION__}</span>
-        </div>
-        <div className="about-version-card">
-          <span className="about-version-label">⚙️ API Version</span>
-          <span className="about-version-value">{about?.apiVersion ?? "Loading..."}</span>
-        </div>
-      </div>
-
       <h3 className="stats-section-header">📋 Changelog</h3>
       {error !== null && <p className="about-error">{error}</p>}
       {about === null && error === null && <p className="about-loading">Loading changelog...</p>}
diff --git a/apps/web/src/components/game/ClickArea.tsx b/apps/web/src/components/game/ClickArea.tsx
index 9a82927..b4a8421 100644
--- a/apps/web/src/components/game/ClickArea.tsx
+++ b/apps/web/src/components/game/ClickArea.tsx
@@ -40,6 +40,7 @@ export const ClickArea = (): React.JSX.Element => {
   return (
     <section className="click-area">
       <h1 className="game-title">Elysium</h1>
+      <p className="game-version">v{__WEB_VERSION__}</p>
       <h2>Guild Hall</h2>
       <div className="click-button-wrapper">
         <button
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 6005fff..87340a2 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -173,6 +173,13 @@ body {
   -webkit-text-fill-color: transparent;
   background-clip: text;
   letter-spacing: 0.05em;
+  margin-bottom: 0.1rem;
+}
+
+.game-version {
+  font-size: 0.65rem;
+  color: var(--colour-text-muted);
+  opacity: 0.7;
   margin-bottom: 0.5rem;
 }
 
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
index a26d4ce..d964968 100644
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -15,7 +15,7 @@ export default defineConfig({
     port: 5173,
     proxy: {
       "/api": {
-        target: "http://localhost:3001",
+        target: "http://localhost:3898",
         rewrite: (path) => path.replace(/^\/api/, ""),
       },
     },