From 4d7cf468e9486db7edbcd68b5eb0a709a815d30f Mon Sep 17 00:00:00 2001
From: Nayam Amarshe <25067102+NayamAmarshe@users.noreply.github.com>
Date: Wed, 25 Dec 2024 18:07:33 +0530
Subject: [PATCH] Refactor Portuguese locale key and update ResetSettingsButton
 to conditionally hide label; add custom error page

---
 renderer/atoms/translations-atom.ts           |  6 ++--
 .../settings-tab/language-switcher.tsx        |  2 +-
 .../settings-tab/reset-settings-button.tsx    | 14 ++++++---
 renderer/locales/{pt_PT.json => pt.json}      |  7 +++++
 renderer/pages/_error.tsx                     | 30 +++++++++++++++++++
 5 files changed, 51 insertions(+), 8 deletions(-)
 rename renderer/locales/{pt_PT.json => pt.json} (98%)
 create mode 100644 renderer/pages/_error.tsx

diff --git a/renderer/atoms/translations-atom.ts b/renderer/atoms/translations-atom.ts
index cbeee1b..265a468 100644
--- a/renderer/atoms/translations-atom.ts
+++ b/renderer/atoms/translations-atom.ts
@@ -7,12 +7,12 @@ import es from "../locales/es.json";
 import fr from "../locales/fr.json";
 import vi from "../locales/vi.json";
 import id from "../locales/id.json";
-import pt_PT from "../locales/pt_PT.json";
+import pt from "../locales/pt.json";
 import { atomWithStorage } from "jotai/utils";
 
 // Define the shape of the translations
 type Translations = typeof en;
-type Locales = "en" | "ru" | "ja" | "zh" | "es" | "fr" | "vi" | "pt_PT" | "id";
+type Locales = "en" | "ru" | "ja" | "zh" | "es" | "fr" | "vi" | "pt" | "id";
 
 const translations: Record<Locales, Translations> = {
   en,
@@ -23,7 +23,7 @@ const translations: Record<Locales, Translations> = {
   fr,
   vi,
   id,
-  pt_PT,
+  pt,
 };
 
 // Create a type for nested key paths
diff --git a/renderer/components/sidebar/settings-tab/language-switcher.tsx b/renderer/components/sidebar/settings-tab/language-switcher.tsx
index ef9d3d2..c9785db 100644
--- a/renderer/components/sidebar/settings-tab/language-switcher.tsx
+++ b/renderer/components/sidebar/settings-tab/language-switcher.tsx
@@ -10,7 +10,7 @@ const locales = {
   fr: "Français",
   vi: "Tiếng Việt",
   id: "Bahasa Indonesia",
-  pt_PT: "Português (Portugal)"
+  pt: "Português (Portugal)",
 };
 
 const LanguageSwitcher = () => {
diff --git a/renderer/components/sidebar/settings-tab/reset-settings-button.tsx b/renderer/components/sidebar/settings-tab/reset-settings-button.tsx
index 66ffd6a..4df2ee4 100644
--- a/renderer/components/sidebar/settings-tab/reset-settings-button.tsx
+++ b/renderer/components/sidebar/settings-tab/reset-settings-button.tsx
@@ -2,13 +2,19 @@ import { translationAtom } from "@/atoms/translations-atom";
 import { useAtomValue } from "jotai";
 import React from "react";
 
-export function ResetSettingsButton() {
+export function ResetSettingsButton({
+  hideLabel = false,
+}: {
+  hideLabel?: boolean;
+}) {
   const t = useAtomValue(translationAtom);
   return (
     <div className="flex flex-col items-start gap-2">
-      <p className="text-sm font-medium">
-        {t("SETTINGS.RESET_SETTINGS.BUTTON_TITLE")}
-      </p>
+      {!hideLabel && (
+        <p className="text-sm font-medium">
+          {t("SETTINGS.RESET_SETTINGS.BUTTON_TITLE")}
+        </p>
+      )}
       <button
         className="btn btn-primary"
         onClick={async () => {
diff --git a/renderer/locales/pt_PT.json b/renderer/locales/pt.json
similarity index 98%
rename from renderer/locales/pt_PT.json
rename to renderer/locales/pt.json
index 7638837..26bac1a 100644
--- a/renderer/locales/pt_PT.json
+++ b/renderer/locales/pt.json
@@ -97,6 +97,9 @@
     "TTA_MODE": {
       "TITLE": "Modo ATT",
       "DESCRIPTION": "Ative o Aumento do tempo de teste para obter melhores resultados, como a remoção de artefactos. Note que isto aumentará o tempo de processamento em 8x!"
+    },
+    "SYSTEM_INFO": {
+      "TITLE": "Informações do Sistema"
     }
   },
   "APP": {
@@ -141,6 +144,10 @@
         "digital-art-4x": {
           "NAME": "Arte digital",
           "DESCRIPTION": "Para arte digital e ilustrações."
+        },
+        "high-fidelity-4x": {
+          "NAME": "Alta Fidelidade",
+          "DESCRIPTION": "Para todos os tipos de imagens com foco em detalhes realistas e texturas suaves."
         }
       }
     },
diff --git a/renderer/pages/_error.tsx b/renderer/pages/_error.tsx
new file mode 100644
index 0000000..04b77d1
--- /dev/null
+++ b/renderer/pages/_error.tsx
@@ -0,0 +1,30 @@
+import ResetButton from "@/components/main-content/reset-button";
+import { ResetSettingsButton } from "@/components/sidebar/settings-tab/reset-settings-button";
+import { SkullIcon } from "lucide-react";
+
+function Error({ statusCode }) {
+  return (
+    <div className="flex h-screen w-screen flex-col items-center justify-center overflow-hidden bg-base-300">
+      <div className="flex flex-col items-center justify-center gap-2">
+        <SkullIcon className="h-10 w-10" />
+        <p className="max-w-lg text-balance text-center text-lg font-semibold">
+          {statusCode
+            ? `An error ${statusCode} occurred on server.`
+            : "An error occurred in the app."}{" "}
+        </p>
+        <p className="mb-2 max-w-sm text-balance text-center">
+          Please check the console for more information by pressing F12 or
+          Ctrl/⌘+Option+I.
+        </p>
+        <ResetSettingsButton hideLabel />
+      </div>
+    </div>
+  );
+}
+
+Error.getInitialProps = ({ res, err }) => {
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
+  return { statusCode };
+};
+
+export default Error;