metis-desk/apps/web/src/app.tsx

import { AssetCatalogPage } from "@metis/assets/client";
import { AccessWorkspacePage, CompaniesPage } from "@metis/companies/client";
import { HomePage } from "@metis/core/client";
import { IdentityWorkspace } from "@metis/identity/client";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@repo/shadcn-ui/components/select";
import { useId, useState } from "react";
import { useTranslation } from "react-i18next";

const LANGUAGE_OPTIONS = [
  { value: "es", label: "Español" },
  { value: "en", label: "English" },
];

export function App() {
  const { t: companyTranslation } = useTranslation("companies");
  const { t: assetTranslation } = useTranslation("assets");
  const { t: accessTranslation } = useTranslation("access");
  const { t, i18n } = useTranslation("core");
  const [languageError, setLanguageError] = useState(false);
  const languageLabelId = useId();

  return (
    <div className="min-h-screen bg-background">
      <header className="border-b border-border bg-card">
        <div className="mx-auto flex max-w-5xl items-center justify-between gap-6 px-6 py-5">
          <span className="text-xl font-semibold tracking-tight text-foreground">
            Metis Desk<span className="ml-1 text-primary">.</span>
          </span>
          <div className="flex items-center gap-3 text-sm text-muted-foreground">
            <span id={languageLabelId}>{t("language")}</span>
            <Select
              items={LANGUAGE_OPTIONS}
              onValueChange={(language) => {
                if (language !== "es" && language !== "en") {
                  return;
                }
                setLanguageError(false);
                i18n
                  .changeLanguage(language)
                  .then(() => {
                    document.documentElement.lang = i18n.resolvedLanguage ?? "es";
                  })
                  .catch(() => setLanguageError(true));
              }}
              value={i18n.resolvedLanguage ?? "es"}
            >
              <SelectTrigger aria-labelledby={languageLabelId} className="min-w-28">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {LANGUAGE_OPTIONS.map((language) => (
                  <SelectItem key={language.value} value={language.value}>
                    {language.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        </div>
        {languageError && (
          <p className="px-6 pb-4 text-destructive" role="alert">
            {t("languageError")}
          </p>
        )}
      </header>
      <IdentityWorkspace
        pages={[
          {
            id: "catalogs",
            label: accessTranslation("catalogTitle"),
            render: (session) => (
              <AccessWorkspacePage csrfToken={session.csrfToken} scope="global" />
            ),
          },
          {
            id: "asset-catalog",
            label: assetTranslation("title"),
            render: (session) => <AssetCatalogPage csrfToken={session.csrfToken} scope="global" />,
          },
          {
            id: "companies",
            label: companyTranslation("title"),
            render: (session) => <CompaniesPage csrfToken={session.csrfToken} />,
          },
        ]}
      >
        <HomePage />
      </IdentityWorkspace>
    </div>
  );
}