feat: footer with desktop and daemon versions

SiaFoundation · May 13, 2024 · 67ae916 · 67ae916
1 parent c2ed1b0
commit 67ae916
Show file tree

Hide file tree

Showing 13 changed files with 94 additions and 18 deletions.
diff --git a/.changeset/great-pants-hammer.md b/.changeset/great-pants-hammer.md
@@ -0,0 +1,6 @@
+---
+'renterd': minor
+'hostd': minor
+---
+
+Added a footer with desktop and daemon version information.
diff --git a/hostd/main/asset.ts b/hostd/main/asset.ts
@@ -1,14 +1,24 @@
+import electronIsDev from 'electron-is-dev'
 import path from 'path'
 
 export function getResourcePath(name: string) {
+  if (electronIsDev) {
+    return path.join(process.cwd(), name)
+  }
   return path.join(process.resourcesPath, name)
 }
 
 export function getResourceAsarPath(name: string) {
+  if (electronIsDev) {
+    return path.join(process.cwd(), name)
+  }
   return getResourcePath(path.join('app.asar', name))
 }
 
 export function getResourceAsarUnpackedPath(name: string) {
+  if (electronIsDev) {
+    return path.join(process.cwd(), name)
+  }
   return getResourcePath(path.join('app.asar.unpacked', name))
 }
 

diff --git a/hostd/renderer/components/App.tsx b/hostd/renderer/components/App.tsx
@@ -16,10 +16,9 @@ export function App() {
       <AppBackdrop />
       <div className="flex flex-col w-full h-screen justify-center items-center">
         <ScrollArea className="flex-1">
-          <div className="flex flex-col gap-3 w-full justify-center items-center pb-4">
+          <div className="flex flex-col gap-3 w-full justify-center items-center">
             <Header />
             <ConfigForm />
-            <ThemeRadio className="pt-1" />
           </div>
         </ScrollArea>
       </div>

diff --git a/hostd/renderer/components/ConfigForm.tsx b/hostd/renderer/components/ConfigForm.tsx
@@ -13,6 +13,7 @@ import {
 import { useConfig } from '../contexts/config'
 import { SeedField } from './SeedField'
 import { ConfigValues } from '../contexts/config/types'
+import { Footer } from './Footer'
 
 export function ConfigForm() {
   const { form, fields, showAdvanced, setShowAdvanced, notConfiguredYet } =
@@ -71,8 +72,12 @@ export function ConfigForm() {
                 <FieldText form={form} fields={fields} name="rhp3AddressTcp" />
               </div>
             </div>
+            <div className="pt-2 pb-1">
+              <Separator className="w-full" />
+            </div>
           </>
         )}
+        <Footer />
       </div>
     </Panel>
   )

diff --git a/hostd/renderer/components/Footer.tsx b/hostd/renderer/components/Footer.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import { Text, ThemeRadio } from '@siafoundation/design-system'
+import { useInstalledVersion } from './useInstalledVersion'
+
+export function Footer() {
+  const installedVersion = useInstalledVersion()
+  return (
+    <div className="flex gap-2 justify-center items-center w-full">
+      <div className="flex gap-3">
+        <Text color="verySubtle" size="10">
+          desktop v{process.env.version}
+        </Text>
+        <Text color="verySubtle" size="10">
+          daemon {installedVersion.data}
+        </Text>
+      </div>
+      <div className="flex-1" />
+      <ThemeRadio className="!gap-2" />
+    </div>
+  )
+}
diff --git a/hostd/renderer/components/Header.tsx b/hostd/renderer/components/Header.tsx
@@ -10,14 +10,12 @@ import { Launch16, Reset16 } from '@siafoundation/react-icons'
 import { useDaemon } from './useDaemon'
 import { useConfig } from '../contexts/config'
 import { useConfigData } from './useConfigData'
-import { useInstalledVersion } from './useInstalledVersion'
 
 export function Header() {
   const { isRunning, startDaemon, stopDaemon } = useDaemon()
   const { form, isConfigured, changeCount, revalidateAndResetForm } =
     useConfig()
   const config = useConfigData()
-  const installedVersion = useInstalledVersion()
   return (
     <Panel
       className="sticky z-10 top-0 w-full h-10 flex gap-2 justify-center items-center px-3 max-w-[500px] rounded-t-none"
@@ -58,11 +56,6 @@ export function Header() {
           </Text>
         </div>
       )}
-      <div className="flex gap-2">
-        <Text font="mono" size="12" weight="bold" color="verySubtle">
-          {installedVersion.data}
-        </Text>
-      </div>
       <div className="flex-1" />
       <div className="flex gap-1 items-center">
         {isRunning.data ? (

diff --git a/hostd/renderer/next.config.js b/hostd/renderer/next.config.js
@@ -1,6 +1,11 @@
+const { version } = require('../package.json')
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'export',
+  env: {
+    version,
+  },
 }
 
 module.exports = nextConfig
diff --git a/renterd/main/asset.ts b/renterd/main/asset.ts
@@ -1,14 +1,24 @@
+import electronIsDev from 'electron-is-dev'
 import path from 'path'
 
 export function getResourcePath(name: string) {
+  if (electronIsDev) {
+    return path.join(process.cwd(), name)
+  }
   return path.join(process.resourcesPath, name)
 }
 
 export function getResourceAsarPath(name: string) {
+  if (electronIsDev) {
+    return path.join(process.cwd(), name)
+  }
   return getResourcePath(path.join('app.asar', name))
 }
 
 export function getResourceAsarUnpackedPath(name: string) {
+  if (electronIsDev) {
+    return path.join(process.cwd(), name)
+  }
   return getResourcePath(path.join('app.asar.unpacked', name))
 }
 

diff --git a/renterd/renderer/components/App.tsx b/renterd/renderer/components/App.tsx
@@ -2,7 +2,9 @@
 
 import {
   AppBackdrop,
+  Panel,
   ScrollArea,
+  Text,
   ThemeRadio,
 } from '@siafoundation/design-system'
 import { ConfigForm } from './ConfigForm'
@@ -16,10 +18,9 @@ export function App() {
       <AppBackdrop />
       <div className="flex flex-col w-full h-screen justify-center items-center">
         <ScrollArea className="flex-1">
-          <div className="flex flex-col gap-3 w-full justify-center items-center pb-4">
+          <div className="flex flex-col gap-3 w-full justify-center items-center">
             <Header />
             <ConfigForm />
-            <ThemeRadio className="pt-1" />
           </div>
         </ScrollArea>
       </div>

diff --git a/renterd/renderer/components/ConfigForm.tsx b/renterd/renderer/components/ConfigForm.tsx
@@ -14,6 +14,7 @@ import {
 import { useConfig } from '../contexts/config'
 import { SeedField } from './SeedField'
 import { ConfigValues } from '../contexts/config/types'
+import { Footer } from './Footer'
 
 export function ConfigForm() {
   const { form, fields, showAdvanced, setShowAdvanced, notConfiguredYet } =
@@ -72,8 +73,12 @@ export function ConfigForm() {
                 name="s3HostBucketEnabled"
               />
             </div>
+            <div className="pt-2 pb-1">
+              <Separator className="w-full" />
+            </div>
           </>
         )}
+        <Footer />
       </div>
     </Panel>
   )

diff --git a/renterd/renderer/components/Footer.tsx b/renterd/renderer/components/Footer.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import { Text, ThemeRadio } from '@siafoundation/design-system'
+import { useInstalledVersion } from './useInstalledVersion'
+
+export function Footer() {
+  const installedVersion = useInstalledVersion()
+  return (
+    <div className="flex gap-2 justify-center items-center w-full">
+      <div className="flex gap-3">
+        <Text color="verySubtle" size="10">
+          desktop v{process.env.version}
+        </Text>
+        <Text color="verySubtle" size="10">
+          daemon {installedVersion.data}
+        </Text>
+      </div>
+      <div className="flex-1" />
+      <ThemeRadio className="!gap-2" />
+    </div>
+  )
+}
diff --git a/renterd/renderer/components/Header.tsx b/renterd/renderer/components/Header.tsx
@@ -10,14 +10,12 @@ import { Launch16, Reset16 } from '@siafoundation/react-icons'
 import { useDaemon } from './useDaemon'
 import { useConfig } from '../contexts/config'
 import { useConfigData } from './useConfigData'
-import { useInstalledVersion } from './useInstalledVersion'
 
 export function Header() {
   const { isRunning, startDaemon, stopDaemon } = useDaemon()
   const { form, isConfigured, changeCount, revalidateAndResetForm } =
     useConfig()
   const config = useConfigData()
-  const installedVersion = useInstalledVersion()
   return (
     <Panel
       className="sticky z-10 top-0 w-full h-10 flex gap-2 justify-center items-center px-3 max-w-[500px] rounded-t-none"
@@ -58,11 +56,6 @@ export function Header() {
           </Text>
         </div>
       )}
-      <div className="flex gap-2">
-        <Text font="mono" size="12" weight="bold" color="verySubtle">
-          {installedVersion.data}
-        </Text>
-      </div>
       <div className="flex-1" />
       <div className="flex gap-1 items-center">
         {isRunning.data ? (

diff --git a/renterd/renderer/next.config.js b/renterd/renderer/next.config.js
@@ -1,6 +1,11 @@
+const { version } = require('../package.json')
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'export',
+  env: {
+    version,
+  },
 }
 
 module.exports = nextConfig