Display web version number

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-template-solid",
-  "version": "1.0.0",
+  "version": "0.71.8",
   "description": "",
   "scripts": {
     "start": "vite",

src/pages/Settings/Menu.tsx

@@ -10,6 +10,8 @@ const Menu: Component = () => {
 
   const intl = useIntl();
 
+  const version = import.meta.env.PRIMAL_VERSION;
+
   return (
     <div>
       <PageCaption title={intl.formatMessage(t.title)} />
@@ -40,6 +42,11 @@ const Menu: Component = () => {
           <div class={styles.chevron}></div>
         </Link>
       </div>
+
+      <div class={styles.webVersion}>
+        <div class={styles.title}>version</div>
+        <div class={styles.value}>{version}</div>
+      </div>
     </div>
   )
 }

src/pages/Settings/Settings.module.scss

@@ -419,3 +419,27 @@
   line-height: 20px;
   text-align: left;
 }
+
+.webVersion {
+  width: fit-content;
+  margin-top: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .title {
+    color: var(--text-secondary);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    text-transform: uppercase;
+  }
+
+  .value {
+    color: var(--text-primary);
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 28px;
+  }
+}

vite.config.ts

@@ -1,5 +1,7 @@
 import { defineConfig } from 'vite';
 import solidPlugin from 'vite-plugin-solid';
+import packageJson from './package.json';
+
 
 export default defineConfig({
   plugins: [solidPlugin()],
@@ -11,4 +13,7 @@ export default defineConfig({
     sourcemap: true,
   },
   envPrefix: 'PRIMAL_',
+  define: {
+    'import.meta.env.PRIMAL_VERSION': JSON.stringify(packageJson.version),
+  },
 });