Repository: IraSoro/peri (ts)

Issue:
Add link to github page
Add a link to the GitHub page to the bottom of the menu page

Pull request:
Link to GitHub
Closed #271 

The link looks like this:
![image](https://github.com/user-attachments/assets/28c52b2d-ef59-4278-ab9a-ba4b02c5a372)

I made the window open on click. And added translation for the text.

Patch:
diff --git a/src/data/AppVersion.ts b/src/data/AppVersion.ts
index 71ab3fd..d9e6c72 100644
--- a/src/data/AppVersion.ts
+++ b/src/data/AppVersion.ts
@@ -70,3 +70,12 @@ export async function downloadLatestRelease() {
   const latestRelease = await getLatestReleaseInfo();
   window.open(latestRelease.htmlUrl, "_system", "location=yes");
 }
+
+export const homepageURL = "https://github.com/IraSoro/peri";
+export function openGitHubPage() {
+  if (isPlatform("desktop")) {
+    window.open(homepageURL, "_blank")?.focus();
+    return;
+  }
+  window.open(homepageURL, "_system", "location=yes");
+}
diff --git a/src/modals/Menu.tsx b/src/modals/Menu.tsx
index 7285773..5192c7b 100644
--- a/src/modals/Menu.tsx
+++ b/src/modals/Menu.tsx
@@ -1,5 +1,6 @@
 import { useContext, useEffect, useState } from "react";
 import {
+  IonChip,
   IonIcon,
   IonItem,
   IonLabel,
@@ -16,6 +17,7 @@ import {
   cloudUploadOutline,
   globeOutline,
   colorFillOutline,
+  logoGithub,
 } from "ionicons/icons";
 import { useTranslation } from "react-i18next";
 import { storage } from "../data/Storage";
@@ -24,6 +26,7 @@ import { exportConfig, importConfig } from "../data/Config";
 import {
   downloadLatestRelease,
   isNewVersionAvailable,
+  openGitHubPage,
 } from "../data/AppVersion";
 import { CyclesContext, ThemeContext } from "../state/Context";
 import {
@@ -267,24 +270,44 @@ export const Menu = (props: MenuProps) => {
           </IonItem>
         )}
       </IonList>
-      <IonItem
-        color="none"
-        lines="none"
+      <IonList
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}
       >
-        <IonLabel
-          style={{ fontSize: "13px" }}
-          color="medium"
+        <IonChip
+          outline
+          color={`text-${theme}`}
+          onClick={() => openGitHubPage()}
         >
-          Peri - The Period Tracker App
-        </IonLabel>
-        <IonLabel
-          style={{ fontSize: "13px" }}
-          color="medium"
-          slot="end"
+          <IonIcon
+            icon={logoGithub}
+            color={`text-${theme}`}
+          />
+          <IonLabel>{t("We are on GitHub")}</IonLabel>
+        </IonChip>
+        <IonItem
+          color="none"
+          lines="none"
+          style={{ width: "100%" }}
         >
-          {configuration.app.version}
-        </IonLabel>
-      </IonItem>
+          <IonLabel
+            style={{ fontSize: "13px" }}
+            color="medium"
+          >
+            Peri - The Period Tracker App
+          </IonLabel>
+          <IonLabel
+            style={{ fontSize: "13px" }}
+            color="medium"
+            slot="end"
+          >
+            {configuration.app.version}
+          </IonLabel>
+        </IonItem>
+      </IonList>
     </IonMenu>
   );
 };
diff --git a/src/utils/translations/es.ts b/src/utils/translations/es.ts
index 39a7cef..4e85443 100644
--- a/src/utils/translations/es.ts
+++ b/src/utils/translations/es.ts
@@ -91,6 +91,7 @@ const es = {
   "This is just a demo": "Esto es solo una demostración",
   "You can download the application ": "Puedes descargar la aplicación ",
   here: "Aquí",
+  "We are on GitHub": "Estamos en GitHub",
 };
 
 export default es;
diff --git a/src/utils/translations/ru.ts b/src/utils/translations/ru.ts
index d151fcc..5030ffe 100644
--- a/src/utils/translations/ru.ts
+++ b/src/utils/translations/ru.ts
@@ -89,6 +89,7 @@ const ru = {
   "This is just a demo": "Это только demo",
   "You can download the application ": "Загрузить приложение можно ",
   here: "тут",
+  "We are on GitHub": "Мы в GitHub",
 };
 
 export default ru;


Test patch:
diff --git a/src/tests/AppVersion.test.ts b/src/tests/AppVersion.test.ts
index a8dbe3c..ce31c19 100644
--- a/src/tests/AppVersion.test.ts
+++ b/src/tests/AppVersion.test.ts
@@ -3,7 +3,9 @@ import {
   GithubReleaseAsset,
   GithubReleaseInfo,
   downloadLatestRelease,
+  homepageURL,
   isNewVersionAvailable,
+  openGitHubPage,
 } from "../data/AppVersion";
 import { configuration } from "../data/AppConfiguration";
 
@@ -153,3 +155,28 @@ test("Download latest release", async () => {
     "location=yes",
   );
 });
+
+test("Open Github page on desktop", () => {
+  jest.spyOn(mockedIonicCore, "isPlatform").mockReturnValueOnce(true);
+  // @ts-expect-error Mock
+  const mockedWindowOpen = jest.spyOn(window, "open").mockReturnValue({
+    focus: jest.fn().mockReturnValue(0),
+  });
+
+  openGitHubPage();
+  expect(mockedWindowOpen).toHaveBeenNthCalledWith(1, homepageURL, "_blank");
+});
+
+test("Open Github page on android", () => {
+  jest.spyOn(mockedIonicCore, "isPlatform").mockReturnValueOnce(false);
+  // @ts-expect-error Mock
+  const mockedWindowOpen = jest.spyOn(window, "open").mockReturnValue({});
+
+  openGitHubPage();
+  expect(mockedWindowOpen).toHaveBeenNthCalledWith(
+    1,
+    homepageURL,
+    "_system",
+    "location=yes",
+  );
+});