fix(web): fix localization of overview headers (#1645)

## Problem

Related to #1629.

Overview headers are not translated.

## Solution

Do not call `_()` at module level (see #1643).

## Testing

- Tested manually

web/package/agama-web-ui.changes

@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Fri Sep 27 14:54:46 UTC 2024 - Imobach Gonzalez Sosa <[email protected]>
+
+- Translate overview page headers and a missing text in the
+  networking page (gh#agama-project/agama#1629).
+
 -------------------------------------------------------------------
 Fri Sep 27 13:00:05 UTC 2024 - Imobach Gonzalez Sosa <[email protected]>
 

web/src/components/network/WifiNetworksListPage.tsx

@@ -264,7 +264,7 @@ function WifiNetworksListPage() {
             <DrawerContentBody>
               <Stack hasGutter>
                 {networks.length === 0 ? (
-                  <EmptyState title="No visible Wi-Fi networks found" icon="error" />
+                  <EmptyState title={_("No visible Wi-Fi networks found")} icon="error" />
                 ) : (
                   // @ts-expect-error: related to https://github.com/patternfly/patternfly-react/issues/9823
                   <DataList

web/src/components/overview/OverviewPage.tsx

@@ -44,12 +44,6 @@ import { _ } from "~/i18n";
 import { useAllIssues } from "~/queries/issues";
 import { IssuesList as IssuesListType, IssueSeverity } from "~/types/issues";
 
-const SCOPE_HEADERS = {
-  users: _("Users"),
-  storage: _("Storage"),
-  software: _("Software"),
-};
-
 const ReadyForInstallation = () => (
   <Center>
     <EmptyState title={_("Ready for installation")} icon="check_circle" color="success-color-100">
@@ -59,6 +53,12 @@ const ReadyForInstallation = () => (
 );
 
 const IssuesList = ({ issues }: { issues: IssuesListType }) => {
+  const scopeHeaders = {
+    users: _("Users"),
+    storage: _("Storage"),
+    software: _("Software"),
+  };
+
   const { issues: issuesByScope } = issues;
   const list = [];
   Object.entries(issuesByScope).forEach(([scope, issues], idx) => {
@@ -68,7 +68,7 @@ const IssuesList = ({ issues }: { issues: IssuesListType }) => {
       const link = (
         <NotificationDrawerListItem key={`${idx}-${subIdx}`} variant={variant} isHoverable={false}>
           <NotificationDrawerListItemHeader
-            title={SCOPE_HEADERS[scope]}
+            title={scopeHeaders[scope]}
             variant={variant}
             headingLevel="h4"
           />
@@ -109,7 +109,7 @@ const ResultSection = () => {
 
 const OverviewSection = () => (
   <Page.Section
-    title="Overview"
+    title={_("Overview")}
     description={_(
       "These are the most relevant installation settings. Feel free to browse the sections in the menu for further details.",
     )}