feat: show current version (#5)

src/Footer.tsx

@@ -1,4 +1,4 @@
-import { Center, Link, Text } from '@chakra-ui/react';
+import { Center, Flex, Link, Text } from '@chakra-ui/react';
 import { Suspense } from 'react';
 import { SDKVersion } from './SDKVersion';
 
@@ -17,13 +17,13 @@ export function Footer() {
         left="0"
         flexDir="column"
       >
-        <Text>
-          {'音乐解锁 (x.x.x) '}
+        <Flex as={Text}>
+          {'音乐解锁 (__APP_VERSION_SHORT__'}
           <Suspense>
             <SDKVersion />
           </Suspense>
-          {' - 移除已购音乐的加密保护。'}
-        </Text>
+          {') - 移除已购音乐的加密保护。'}
+        </Flex>
         <Text>
           {'Copyright © 2019 - 2023 '}
           <Link href="https://git.unlock-music.dev/um" isExternal>

src/SDKVersion.tsx

@@ -1,20 +1,32 @@
 import { InfoOutlineIcon } from '@chakra-ui/icons';
-import { Tooltip } from '@chakra-ui/react';
+import { Tooltip, VStack, Text, Box, Flex } from '@chakra-ui/react';
 import { workerClientBus } from './decrypt-worker/client';
 import { DECRYPTION_WORKER_ACTION_NAME } from './decrypt-worker/constants';
 
 import usePromise from 'react-promise-suspense';
 
 const getSDKVersion = async () => {
-  const version = workerClientBus.request(DECRYPTION_WORKER_ACTION_NAME.VERSION, null);
-  return `SDK: ${version}`;
+  return workerClientBus.request(DECRYPTION_WORKER_ACTION_NAME.VERSION, null);
 };
 
 export function SDKVersion() {
   const sdkVersion = usePromise(getSDKVersion, []);
   return (
-    <Tooltip hasArrow placement="top" label={sdkVersion} bg="gray.300" color="black">
-      <InfoOutlineIcon />
-    </Tooltip>
+    <Flex pl="1" alignItems="center">
+      <Tooltip
+        hasArrow
+        placement="top"
+        label={
+          <VStack>
+            <Text>App: __APP_VERSION__</Text>
+            <Text>SDK: {sdkVersion}</Text>
+          </VStack>
+        }
+        bg="gray.300"
+        color="black"
+      >
+        <InfoOutlineIcon />
+      </Tooltip>
+    </Flex>
   );
 }