feat: added about modal

Author: dastrong-codiga

src/main/main.ts

@@ -31,6 +31,10 @@ ipcMain.on('ipc-example', async (event, arg) => {
   event.reply('ipc-example', msgTemplate('pong'));
 });
 
+ipcMain.on('app-version', async (event) => {
+  event.reply('app-version', app.getVersion());
+});
+
 if (process.env.NODE_ENV === 'production') {
   const sourceMapSupport = require('source-map-support');
   sourceMapSupport.install();

src/main/preload.ts

@@ -2,6 +2,7 @@ import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';
 
 export type Channels =
   | 'ipc-example'
+  | 'app-version'
   | 'minimizeApp'
   | 'maximizeApp'
   | 'closeApp';

src/renderer/components/AboutApp/AboutApp.tsx

@@ -0,0 +1,100 @@
+import { useEffect, useState } from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  Text,
+  Link,
+  IconButton,
+  useDisclosure,
+  Image,
+} from '@chakra-ui/react';
+import { QuestionMarkCircleIcon } from '@codiga/components';
+import CodigaLogo from '../Layout/CodigaIcon.png';
+
+export default function AboutApp() {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [appVersion, setAppVersion] = useState('0.0.0');
+
+  useEffect(() => {
+    window.electron.ipcRenderer.once('app-version', (arg) => {
+      setAppVersion(arg as string);
+    });
+    window.electron.ipcRenderer.sendMessage('app-version', ['']);
+  }, []);
+
+  return (
+    <>
+      <IconButton
+        aria-label="about-app"
+        onClick={onOpen}
+        variant="ghost"
+        h="28px"
+        minW="28px"
+        fontSize="12px"
+        icon={<QuestionMarkCircleIcon />}
+        _focus={{
+          boxShadow: 'none',
+        }}
+      />
+
+      <Modal isOpen={isOpen} onClose={onClose} isCentered>
+        <ModalOverlay
+          bg="neutral.0"
+          _dark={{ bg: 'base.dark' }}
+          opacity="0.8 !important"
+        />
+
+        <ModalContent>
+          <ModalHeader justifyContent="flex-end">
+            <ModalCloseButton />
+          </ModalHeader>
+
+          <ModalBody
+            d="flex"
+            flexDir="column"
+            alignItems="center"
+            gridGap="space_16"
+          >
+            <Link
+              isExternal
+              _focus={{ boxShadow: 'none' }}
+              href="https://www.codiga.io/"
+            >
+              <Image src={CodigaLogo} h="48px" mx="auto" />
+            </Link>
+
+            <Text size="sm">
+              <Link
+                isExternal
+                variant="subtle"
+                color="inherit"
+                _focus={{ boxShadow: 'none' }}
+                href="https://github.com/codiga/code-snippets-manager"
+              >
+                Codiga Code Snippets Manager
+              </Link>
+            </Text>
+
+            <Text size="sm">
+              <Link
+                isExternal
+                variant="subtle"
+                color="inherit"
+                _focus={{ boxShadow: 'none' }}
+                href="https://github.com/codiga/code-snippets-manager/releases/latest"
+              >
+                Version {appVersion}
+              </Link>
+            </Text>
+
+            <Text size="sm">Copyright © 2022 Codiga</Text>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}

src/renderer/components/AboutApp/index.tsx

@@ -0,0 +1 @@
+export { default } from './AboutApp';

src/renderer/components/Layout/Titlebar.tsx

@@ -10,6 +10,7 @@ import { getAvatarUrl } from '../../utils/userUtils';
 
 import TitlebarButtonsMac from './TitlebarButtonsMac';
 import TitlebarButtonsWin from './TitlebarButtonsWin';
+import AboutApp from '../AboutApp';
 
 type TitlebarProps = {
   openLoginModal: () => void;
@@ -38,6 +39,8 @@ export default function Titlebar({ openLoginModal, isOnline }: TitlebarProps) {
       {/* we show windows buttons, connecting text or CTA/Avatar here */}
       <Flex sx={{ '-webkit-app-region': 'no-drag' }}>
         <Flex alignItems="center" gridGap="space_16" mr="space_16">
+          <AboutApp />
+
           {isOnline ? (
             <>
               <Link