Refactor Portuguese locale key and update ResetSettingsButton to conditionally hide label; add custom error page

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

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 = () => {

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 () => {

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."
         }
       }
     },

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;