feat(v2): add about page (#128)

* feat(v2): add about page

* fix app icon when app is built

* fix typo in label

src/components/AppMenu/AppMenu.tsx

@@ -1,4 +1,4 @@
-import { HomeIcon, SettingsIcon } from 'lucide-react';
+import { HelpCircleIcon, HomeIcon, SettingsIcon } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { NavigationMenu, NavigationMenuList } from '../ui/NavigationMenu';
 import { AppMenuItem } from './AppMenuItem';
@@ -14,6 +14,9 @@ export const AppMenu = () => {
         </AppMenuItem>
       </NavigationMenuList>
       <NavigationMenuList className="flex-col">
+        <AppMenuItem label={t('appMenu.about')} to="/about">
+          <HelpCircleIcon size="16" />
+        </AppMenuItem>
         <AppMenuItem label={t('appMenu.settings')} to="/settings">
           <SettingsIcon size="16" />
         </AppMenuItem>

src/components/ExternalLink.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+type ExternalLinkProps = {
+  href: string;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+
+export const ExternalLink = React.forwardRef<HTMLAnchorElement, ExternalLinkProps>(
+  ({ children, href, ...otherProps }, ref) => {
+    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+      event.preventDefault();
+      window.electron.openExternalLink(href);
+    };
+
+    return (
+      <a href={href} ref={ref} {...otherProps} onClick={handleClick}>
+        {children}
+      </a>
+    );
+  },
+);
+
+ExternalLink.displayName = 'ExternalLink';

src/components/UpdateAvailableModal.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { APP_WEBSITE_URL } from 'src/constants';
 import { version } from '../../package.json';
 import {
   AlertDialog,
@@ -13,7 +14,6 @@ import {
 } from './ui/AlertDialog';
 
 const GITHUB_API_URL = 'https://api.github.com/repos/murgatt/recode-converter/releases/latest';
-const APP_WEBSITE_URL = 'https://murgatt.github.io/recode-converter/';
 
 export const UpdateAvailableModal = () => {
   const { t } = useTranslation();

src/constants.ts

@@ -0,0 +1,3 @@
+export const APP_WEBSITE_URL = 'https://murgatt.github.io/recode-converter/';
+export const AUTHOR_GITHUB_URL = 'https://github.com/murgatt/';
+export const GITHUB_REPOSITORY_URL = 'https://github.com/murgatt/recode-converter';

src/i18n/locales/en.json

@@ -1,6 +1,13 @@
 {
   "translation": {
+    "about": {
+      "appIconAlt": "Recode Converter icon",
+      "developedBy": "Developed by",
+      "githubLabel": "GitHub repository",
+      "websiteLabel": "Website"
+    },
     "appMenu": {
+      "about": "About",
       "home": "Converter",
       "settings": "Settings"
     },

src/i18n/locales/fr.json

@@ -1,6 +1,13 @@
 {
   "translation": {
+    "about": {
+      "appIconAlt": "Icône de Recode Converter",
+      "developedBy": "Développé par",
+      "githubLabel": "Dépôt GitHub",
+      "websiteLabel": "Site web"
+    },
     "appMenu": {
+      "about": "A propos",
       "home": "Convertisseur",
       "settings": "Paramètres"
     },

src/router.tsx

@@ -1,5 +1,6 @@
 import { createHashRouter } from 'react-router-dom';
 import { App } from './App';
+import { About } from './routes/About';
 import { Converter } from './routes/Converter';
 import { Settings } from './routes/Settings';
 
@@ -15,6 +16,10 @@ export const router = createHashRouter([
         path: '/settings',
         element: <Settings />,
       },
+      {
+        path: '/about',
+        element: <About />,
+      },
     ],
   },
 ]);

src/routes/About.tsx

@@ -0,0 +1,43 @@
+import { GithubIcon, LinkIcon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { ExternalLink } from 'src/components/ExternalLink';
+import { Button } from 'src/components/ui/Button';
+import { Tooltip } from 'src/components/ui/Tooltip';
+import { APP_WEBSITE_URL, AUTHOR_GITHUB_URL, GITHUB_REPOSITORY_URL } from 'src/constants';
+import { version } from '../../package.json';
+
+export const About = () => {
+  const { t } = useTranslation();
+
+  return (
+    <section className="flex h-screen flex-col items-center overflow-y-auto p-6">
+      <img alt={t('about.appIconAlt')} className="w-48 max-w-full" src="./icon.png" />
+      <div className="flex w-full flex-col items-center gap-3">
+        <h1 className="title-lg w-full text-center">Recode Converter</h1>
+        <p className="caption-sm">v{version}</p>
+        <p className="paragraph-sm">
+          {t('about.developedBy')}{' '}
+          <ExternalLink className="underline underline-offset-4" href={AUTHOR_GITHUB_URL}>
+            @murgatt
+          </ExternalLink>
+        </p>
+        <div className="flex gap-1">
+          <Tooltip content={t('about.githubLabel')} position="bottom">
+            <Button aria-label={t('about.githubLabel')} asChild size="icon" variant="ghost">
+              <ExternalLink href={GITHUB_REPOSITORY_URL}>
+                <GithubIcon size="16" />
+              </ExternalLink>
+            </Button>
+          </Tooltip>
+          <Tooltip content={t('about.websiteLabel')} position="bottom">
+            <Button aria-label={t('about.websiteLabel')} asChild size="icon" variant="ghost">
+              <ExternalLink href={APP_WEBSITE_URL}>
+                <LinkIcon size="16" />
+              </ExternalLink>
+            </Button>
+          </Tooltip>
+        </div>
+      </div>
+    </section>
+  );
+};