frontend: fix windows titlebar + versions info

seed-hypermedia · Sep 21, 2023 · ae42091 · ae42091
1 parent 580cc73
commit ae42091
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 11 deletions.
diff --git a/.envrc b/.envrc
@@ -32,7 +32,7 @@ export MINTTER_IS_GATEWAY="1"
 
 export VITE_MINTTER_GATEWAY_URL="https://mintter.com"
 
-export APP_VERSION="0.0.100"
+export VITE_APP_VERSION="0.0.100"
 
 # Needed for the Go extension in VS Code to find the right toolchain.
 export GOROOT="$(go env GOROOT)"

diff --git a/.github/workflows/desktop-release.yml b/.github/workflows/desktop-release.yml
@@ -125,7 +125,7 @@ jobs:
           yarn desktop:make --arch=${{ matrix.config.arch }}
         env:
           DAEMON_NAME: "${{ matrix.config.daemon_name }}.exe"
-          APP_VERSION: "${{ needs.get-version.outputs.version }}"
+          VITE_APP_VERSION: "${{ needs.get-version.outputs.version }}"
           GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
 

diff --git a/frontend/apps/desktop/src/preload.ts b/frontend/apps/desktop/src/preload.ts
@@ -64,4 +64,7 @@ contextBridge.exposeInMainWorld('ipc', {
       ipcRenderer.removeListener(cmd, innerHandler)
     }
   },
+  versions: () => {
+    return process.versions
+  },
 })
diff --git a/frontend/packages/app/src/components/footer.tsx b/frontend/packages/app/src/components/footer.tsx
@@ -16,6 +16,7 @@ import {
 } from '@mintter/ui'
 import {ReactNode} from 'react'
 import {OnlineIndicator} from './indicator'
+import {APP_VERSION} from '@mintter/shared'
 
 export function FooterButton({
   active,
@@ -102,7 +103,7 @@ export default function Footer({children}: {children?: ReactNode}) {
           }}
           color="$color8"
         >
-          {`Mintter Alpha`}
+          {`Mintter Alpha (${APP_VERSION})`}
           {/* To do: include release date of this version. when this is clicked, we should help the user upgrade  */}
         </SizableText>
       </XStack>

diff --git a/frontend/packages/app/src/components/titlebar/windows.tsx b/frontend/packages/app/src/components/titlebar/windows.tsx
@@ -1,6 +1,5 @@
 import {useIPC, useWindowUtils} from '@mintter/app/src/app-context'
 import {TitleBarProps} from '@mintter/app/src/components/titlebar'
-import {useNavRoute} from '@mintter/app/src/utils/navigation'
 import {useNavigate} from '@mintter/app/src/utils/useNavigate'
 
 import {
@@ -101,14 +100,15 @@ export default function TitleBarWindows(props: TitleBarProps) {
             paddingHorizontal={0}
             padding="$2"
           >
-            <XStack>
+            <XStack className="no-window-drag">
               <NavMenu />
               <PageContextButtons {...props} />
             </XStack>
           </XStack>
         </XStack>
         <XStack flex={1} />
         <XStack
+          className="no-window-drag"
           flex={1}
           justifyContent="flex-end"
           minWidth={'min-content'}
@@ -124,7 +124,6 @@ export default function TitleBarWindows(props: TitleBarProps) {
 }
 
 function SystemMenu() {
-  const route = useNavRoute()
   const {hide, close} = useWindowUtils()
   const spawn = useNavigate('spawn')
   const {invoke, send} = useIPC()

diff --git a/frontend/packages/app/src/pages/settings.tsx b/frontend/packages/app/src/pages/settings.tsx
@@ -5,7 +5,8 @@ import {useDaemonInfo} from '@mintter/app/src/models/daemon'
 import {usePeerInfo} from '@mintter/app/src/models/networking'
 import {useInvoicesBywallet, useWallets} from '@mintter/app/src/models/payments'
 import {ObjectKeys} from '@mintter/app/src/utils/object-keys'
-import {LightningWallet, Profile} from '@mintter/shared'
+import {APP_VERSION, LightningWallet, Profile} from '@mintter/shared'
+import {process} from 'electron'
 import {
   Back,
   Button,
@@ -37,7 +38,7 @@ import {ArrowDownRight} from '@tamagui/lucide-icons'
 import copyTextToClipboard from 'copy-text-to-clipboard'
 import {ComponentProps, useMemo, useState} from 'react'
 import toast from 'react-hot-toast'
-import {useGRPCClient} from '../app-context'
+import {useGRPCClient, useIPC} from '../app-context'
 import {getAvatarUrl} from '../utils/account-url'
 
 export default function Settings() {
@@ -307,6 +308,8 @@ function DeviceItem({id}: {id: string}) {
 
 function AppSettings() {
   const grpcClient = useGRPCClient()
+  const ipc = useIPC()
+  const versions = useMemo(() => ipc.versions(), [ipc])
   async function onReloadSync() {
     await grpcClient.daemon.forceSync({})
     toast.success('reload sync successful!')
@@ -323,11 +326,11 @@ function AppSettings() {
           <SizableText
             size="$1"
             flex={0}
-            width={80}
+            width={140}
             flexShrink={0}
             flexGrow={0}
           >
-            Version:
+            App Version:
           </SizableText>
           <SizableText
             size="$1"
@@ -336,7 +339,70 @@ function AppSettings() {
             textOverflow="ellipsis"
             userSelect="text"
           >
-            {import.meta.env.APP_VERSION}
+            {APP_VERSION}
+          </SizableText>
+        </TableList.Item>
+        <Separator />
+        <TableList.Item>
+          <SizableText
+            size="$1"
+            flex={0}
+            width={140}
+            flexShrink={0}
+            flexGrow={0}
+          >
+            Electron Version:
+          </SizableText>
+          <SizableText
+            size="$1"
+            flex={1}
+            overflow="hidden"
+            textOverflow="ellipsis"
+            userSelect="text"
+          >
+            {versions.electron}
+          </SizableText>
+        </TableList.Item>
+        <Separator />
+        <TableList.Item>
+          <SizableText
+            size="$1"
+            flex={0}
+            width={140}
+            flexShrink={0}
+            flexGrow={0}
+          >
+            Chrome Version:
+          </SizableText>
+          <SizableText
+            size="$1"
+            flex={1}
+            overflow="hidden"
+            textOverflow="ellipsis"
+            userSelect="text"
+          >
+            {versions.chrome}
+          </SizableText>
+        </TableList.Item>
+        <Separator />
+        <TableList.Item>
+          <SizableText
+            size="$1"
+            flex={0}
+            width={140}
+            flexShrink={0}
+            flexGrow={0}
+          >
+            Node Version:
+          </SizableText>
+          <SizableText
+            size="$1"
+            flex={1}
+            overflow="hidden"
+            textOverflow="ellipsis"
+            userSelect="text"
+          >
+            {versions.node}
           </SizableText>
         </TableList.Item>
       </TableList>

diff --git a/frontend/packages/shared/src/constants.ts b/frontend/packages/shared/src/constants.ts
@@ -26,6 +26,11 @@ export const BACKEND_HOSTNAME =
   process.env.VITE_BACKEND_HOSTNAME ||
   'http://localhost'
 
+export const APP_VERSION =
+  (import.meta.env && import.meta.env.VITE_APP_VERSION) ||
+  process.env.VITE_APP_VERSION ||
+  '0.0.0'
+
 export const BACKEND_HTTP_URL = `${BACKEND_HOSTNAME}:${BACKEND_HTTP_PORT}`
 export const BACKEND_GRPC_URL = `${BACKEND_HOSTNAME}:${BACKEND_GRPC_PORT}`
 export const BACKEND_P2P_URL = `${BACKEND_HOSTNAME}:${BACKEND_P2P_PORT}`