Show version on sidebar (#85)

* Show version on sidebar

* Remove build info file

* Generate version during build

* Generate version info in docker

* Load version from API

.gitignore

@@ -25,3 +25,6 @@ dist-ssr
 
 # env
 .env
+
+# build info
+/web/src/utils/info.ts

Dockerfile

@@ -19,6 +19,8 @@ RUN set -ex && \
 
 FROM node:18.13.0-alpine3.17 as web-builder
 
+ARG BUILD_VERSION
+
 WORKDIR /app
 
 ENV NPM_VERSION 9.2.0
@@ -28,6 +30,7 @@ RUN npm install -g npm@${NPM_VERSION} && npm -g install pnpm@${PNPM_VERSION}
 COPY web ./
 RUN pnpm fetch && \
   pnpm install -r --offline && \
+  echo "export const browserVersion = \"${BUILD_VERSION}\"" > src/utils/info.ts && \
   pnpm run build
 
 FROM alpine:3.17.1

Makefile

@@ -12,6 +12,7 @@ DOCKER_BUILD_ARGS = $(ARG_BUILD_COMMIT) $(ARG_BUILD_DATE) $(ARG_BUILD_VERSION)
 .PHONY: web
 web:
 	@echo "Building web..."
+	@echo "export const browserVersion = \"$(BUILD_VERSION)\"" > web/src/utils/info.ts
 	@cd web && pnpm run build
 
 .PHONY: docker

web/src/components/Sidebar.tsx

@@ -1,10 +1,12 @@
-import { ReactElement } from 'react'
+import { ReactElement, useEffect, useState } from 'react'
 import { NavLink } from 'react-router-dom'
 import {
   DocumentTextIcon,
   InboxIcon,
   PaperAirplaneIcon
 } from '@heroicons/react/24/outline'
+import { browserVersion } from '../utils/info'
+import { getInfo } from '../services/info'
 
 export default function Sidebar() {
   const navItems: [string, string, ReactElement][] = [
@@ -13,33 +15,47 @@ export default function Sidebar() {
     ['Sent', '/sent', <PaperAirplaneIcon />]
   ]
 
+  const [mailboxVersion, setMailboxVersion] = useState('')
+  useEffect(() => {
+    getInfo().then((info) => setMailboxVersion(info.version))
+  }, [])
+
   return (
-    <aside className="sidebar flex-none h-screen md:w-60 text-base select-none">
-      <div className="title-group flex flex-col content-center md:p-6">
-        <h1 className="text-center font-light tracking-wide dark:text-neutral-100">
-          Mailbox Browser
-        </h1>
+    <aside className="flex-none flex flex-col justify-between h-screen md:w-60 text-base select-none">
+      <div>
+        <div className="flex flex-col content-center md:p-6">
+          <h1 className="text-center font-light tracking-wide dark:text-neutral-100">
+            Mailbox Browser
+          </h1>
+        </div>
+        <nav className="pl-6 pr-8 pt-1">
+          {navItems.map(([name, path, icon]) => {
+            return (
+              <NavLink
+                key={path}
+                to={path}
+                className={({ isActive }) =>
+                  `flex items-center px-4 py-2 mb-1 space-x-2 cursor-pointer rounded hover:bg-neutral-300 hover:text-black dark:hover:bg-neutral-700 dark:hover:text-neutral-100 ${
+                    isActive
+                      ? 'text-neutral-900 dark:text-neutral-200 bg-neutral-200 dark:bg-neutral-800'
+                      : 'text-neutral-700 dark:text-neutral-400 bg-transparent'
+                  }`
+                }
+              >
+                <span className="h-4 w-4">{icon}</span>
+                <span>{name}</span>
+              </NavLink>
+            )
+          })}
+        </nav>
+      </div>
+
+      <div className="grid grid-cols-2 space-x-1 items-center justify-center text-gray-400 dark:text-neutral-500 text-xs py-2 md:py-6">
+        <span className="justify-self-end">Mailbox</span>
+        <span>{mailboxVersion}</span>
+        <span className="justify-self-end">Browser</span>
+        <span>{browserVersion}</span>
       </div>
-      <nav className="pl-6 pr-8 pt-1">
-        {navItems.map(([name, path, icon]) => {
-          return (
-            <NavLink
-              key={path}
-              to={path}
-              className={({ isActive }) =>
-                `flex items-center px-4 py-2 mb-1 space-x-2 cursor-pointer rounded hover:bg-neutral-300 hover:text-black dark:hover:bg-neutral-700 dark:hover:text-neutral-100 ${
-                  isActive
-                    ? 'text-neutral-900 dark:text-neutral-200 bg-neutral-200 dark:bg-neutral-800'
-                    : 'text-neutral-700 dark:text-neutral-400 bg-transparent'
-                }`
-              }
-            >
-              <span className="h-4 w-4">{icon}</span>
-              <span>{name}</span>
-            </NavLink>
-          )
-        })}
-      </nav>
     </aside>
   )
 }

web/src/services/info.ts

@@ -0,0 +1,10 @@
+interface Info {
+  build: string
+  commit: string
+  version: string
+}
+
+export async function getInfo(): Promise<Info> {
+  const response = await fetch('/web/info')
+  return response.json()
+}