display CLI & UI versions in Settings

Signed-off-by: FTCHD <144691102+FTCHD@users.noreply.github.com>

lib/rclone/api.ts

@@ -25,8 +25,39 @@ function getAuthHeader() {
 }
 
 /* DATA */
+export async function getVersion() {
+    console.log('[getVersion]')
+
+    const r = await fetch('http://localhost:5572/core/version', {
+        method: 'POST',
+        headers: getAuthHeader(),
+    })
+        .catch((e) => {
+            console.log('error', e)
+            throw e
+        })
+        .then(
+            (res) =>
+                res.json() as Promise<{
+                    version: `v${string}`
+                    decomposed: [number, number, number]
+                    isGit: boolean
+                    isBeta: boolean
+                    os: string
+                    arch: string
+                    goVersion: string
+                    linking: string
+                    goTags: string
+                }>
+        )
+
+    console.log('[getVersion] r', r)
+
+    return r
+}
+
 export async function listRemotes() {
-    console.log('[listRemotes] CALLED')
+    console.log('[listRemotes]')
 
     const r = await fetch('http://localhost:5572/config/listremotes', {
         method: 'POST',

src/pages/Settings.tsx

@@ -1,4 +1,5 @@
 import { Button, Card, CardBody, Checkbox, Chip, Input, Tab, Tabs } from '@heroui/react'
+import { getVersion as getUiVersion } from '@tauri-apps/api/app'
 import { ask, message } from '@tauri-apps/plugin-dialog'
 import { remove } from '@tauri-apps/plugin-fs'
 import { openUrl } from '@tauri-apps/plugin-opener'
@@ -17,7 +18,7 @@ import {
 } from 'lucide-react'
 import { useCallback, useEffect, useState } from 'react'
 import { revokeLicense, validateLicense } from '../../lib/license'
-import { deleteRemote, getConfigPath } from '../../lib/rclone/api'
+import { deleteRemote, getVersion as getCliVersion, getConfigPath } from '../../lib/rclone/api'
 import { usePersistedStore, useStore } from '../../lib/store'
 import { triggerTrayRebuild } from '../../lib/tray'
 import ConfigCreateDrawer from '../components/ConfigCreateDrawer'
@@ -33,6 +34,16 @@ function Settings() {
     const [passwordCheckPassed, setPasswordCheckPassed] = useState(false)
     const [passwordVisible, setPasswordVisible] = useState(false)
 
+    const [uiVersion, setUiVersion] = useState('')
+    const [cliVersion, setCliVersion] = useState('')
+
+    useEffect(() => {
+        Promise.all([getUiVersion(), getCliVersion()]).then(([uiVersion, cliVersion]) => {
+            setUiVersion(uiVersion)
+            setCliVersion(cliVersion.version.replace('v', ''))
+        })
+    }, [])
+
     if (settingsPass && !passwordCheckPassed) {
         return (
             <div className="flex flex-col items-center justify-center w-screen h-screen gap-4 overflow-hidden animate-fade-in">
@@ -165,6 +176,14 @@ function Settings() {
                     </div>
                 </Tab> */}
             </Tabs>
+            <div className="absolute bottom-0 left-0 flex flex-col w-40 h-12 gap-4 p-4 border-t border-r bg-neutral-900 border-neutral-700">
+                <p
+                    className="text-[10px] text-center text-neutral-500 hover:text-neutral-400 cursor-pointer"
+                    onClick={() => openUrl('https://github.com/rclone-ui/rclone-ui')}
+                >
+                    UI v{uiVersion}, CLI v{cliVersion}
+                </p>
+            </div>
         </div>
     )
 }