feat(about): display dynamic version number in About page

src/app/features/settings/about/About.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Box, Text, IconButton, Icon, Icons, Scroll, Button, config, toRem } from 'folds';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
@@ -7,12 +7,18 @@ import { SettingTile } from '../../../components/setting-tile';
 import PaarrotSVG from '../../../../../public/res/svg/paarrot.svg';
 import { clearCacheAndReload } from '../../../../client/initMatrix';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { getVersion } from '@tauri-apps/api/app';
 
 type AboutProps = {
   requestClose: () => void;
 };
 export function About({ requestClose }: AboutProps) {
   const mx = useMatrixClient();
+  const [version, setVersion] = useState<string>('');
+
+  useEffect(() => {
+    getVersion().then(setVersion).catch(() => setVersion('unknown'));
+  }, []);
 
   return (
     <Page>
@@ -46,7 +52,7 @@ export function About({ requestClose }: AboutProps) {
                   <Box direction="Column" gap="100">
                     <Box gap="100" alignItems="End">
                       <Text size="H3">Paarrot</Text>
-                      <Text size="T200">v4.10.2</Text>
+                      <Text size="T200">v{version}</Text>
                     </Box>
                     <Text>Yet another matrix client.</Text>
                   </Box>