From aa8c0b657d6d274311f70196fe5c2dd5c634f92f Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <mom@variant.no>
Date: Fri, 27 Sep 2024 14:11:33 +0200
Subject: [PATCH 1/4] feat(i18n): language switcher + translated legal links

---
 src/app/(main)/{ => [lang]}/layout.module.css |   0
 src/app/(main)/{ => [lang]}/layout.tsx        |   8 +-
 .../languageSwitcher/LanguageSwitcher.tsx     |  32 +++++
 .../languageSwitcher.module.css               |  11 ++
 src/components/navigation/footer/Footer.tsx   |   3 +-
 .../navigation/footer/FooterPreview.tsx       |  21 +++-
 src/components/navigation/header/Header.tsx   |   5 +
 .../navigation/header/header.module.css       |   8 ++
 src/utils/get.tsx                             |   2 +-
 src/utils/hooks/useLanguage.ts                | 110 ++++++++++++++++++
 studio/lib/interfaces/legalDocuments.ts       |   1 +
 studio/lib/interfaces/navigation.ts           |   1 +
 studio/lib/interfaces/slugTranslations.ts     |  10 +-
 13 files changed, 201 insertions(+), 11 deletions(-)
 rename src/app/(main)/{ => [lang]}/layout.module.css (100%)
 rename src/app/(main)/{ => [lang]}/layout.tsx (95%)
 create mode 100644 src/components/languageSwitcher/LanguageSwitcher.tsx
 create mode 100644 src/components/languageSwitcher/languageSwitcher.module.css
 create mode 100644 src/utils/hooks/useLanguage.ts

diff --git a/src/app/(main)/layout.module.css b/src/app/(main)/[lang]/layout.module.css
similarity index 100%
rename from src/app/(main)/layout.module.css
rename to src/app/(main)/[lang]/layout.module.css
diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/[lang]/layout.tsx
similarity index 95%
rename from src/app/(main)/layout.tsx
rename to src/app/(main)/[lang]/layout.tsx
index 1e54246fe..c33decf46 100644
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/[lang]/layout.tsx
@@ -26,8 +26,12 @@ const hasValidData = (data: unknown) => data && Object.keys(data).length > 0;
 
 export default async function Layout({
   children,
+  params,
 }: Readonly<{
   children: React.ReactNode;
+  params: {
+    lang: string;
+  };
 }>) {
   const { perspective, isDraftMode } = getDraftModeInfo();
 
@@ -47,7 +51,7 @@ export default async function Layout({
     ),
     loadStudioQuery<LegalDocument[]>(
       LEGAL_DOCUMENTS_BY_LANG_QUERY,
-      { language: "en" }, //TODO: replace this with selected language for the page
+      { language: params.lang },
       { perspective },
     ),
     loadStudioQuery<BrandAssets>(BRAND_ASSETS_QUERY, {}, { perspective }),
@@ -90,6 +94,8 @@ export default async function Layout({
           initialCompanyInfo={initialCompanyInfo}
           initialBrandAssets={initialBrandAssets}
           initialSoMe={initialSoMe}
+          initialLegal={initialLegal}
+          language={params.lang}
         />
       ) : (
         <Footer
diff --git a/src/components/languageSwitcher/LanguageSwitcher.tsx b/src/components/languageSwitcher/LanguageSwitcher.tsx
new file mode 100644
index 000000000..609d10f48
--- /dev/null
+++ b/src/components/languageSwitcher/LanguageSwitcher.tsx
@@ -0,0 +1,32 @@
+import Link from "next/link";
+import { Fragment } from "react";
+
+import Text from "src/components/text/Text";
+import useLanguage from "src/utils/hooks/useLanguage";
+
+import styles from "./languageSwitcher.module.css";
+
+export default function LanguageSwitcher() {
+  const { slugTranslations } = useLanguage();
+  return (
+    <ul className={styles.list}>
+      {slugTranslations?.map(
+        (slugTranslation, index) =>
+          slugTranslation?.language && (
+            <Fragment key={slugTranslation.language.id}>
+              <li>
+                <Link href={slugTranslation.slug}>
+                  <Text type={"small"}>
+                    {slugTranslation.language.id.toUpperCase()}
+                  </Text>
+                </Link>
+              </li>
+              {index < slugTranslations.length - 1 && (
+                <span className={styles.divider}></span>
+              )}
+            </Fragment>
+          ),
+      )}
+    </ul>
+  );
+}
diff --git a/src/components/languageSwitcher/languageSwitcher.module.css b/src/components/languageSwitcher/languageSwitcher.module.css
new file mode 100644
index 000000000..a5e6b5773
--- /dev/null
+++ b/src/components/languageSwitcher/languageSwitcher.module.css
@@ -0,0 +1,11 @@
+.list {
+  display: flex;
+  gap: 1rem;
+  list-style: none;
+  padding: 0;
+}
+
+.divider {
+  border-left: 1px solid var(--primary-black);
+  flex-grow: 1;
+}
diff --git a/src/components/navigation/footer/Footer.tsx b/src/components/navigation/footer/Footer.tsx
index 2d227bd8e..6ac67c2fe 100644
--- a/src/components/navigation/footer/Footer.tsx
+++ b/src/components/navigation/footer/Footer.tsx
@@ -52,7 +52,7 @@ const Footer = ({
           </Text>
         </li>
         {legalData?.map((legal) => {
-          const link = {
+          const link: ILink = {
             _key: legal._id,
             _type: legal._type,
             linkTitle: legal.basicTitle,
@@ -60,6 +60,7 @@ const Footer = ({
             internalLink: {
               _ref: legal.slug.current,
             },
+            language: legal.language,
           };
           return (
             <li key={legal._id}>
diff --git a/src/components/navigation/footer/FooterPreview.tsx b/src/components/navigation/footer/FooterPreview.tsx
index a7c38a8bc..9659ef439 100644
--- a/src/components/navigation/footer/FooterPreview.tsx
+++ b/src/components/navigation/footer/FooterPreview.tsx
@@ -3,9 +3,13 @@ import { QueryResponseInitial, useQuery } from "@sanity/react-loader";
 
 import { BrandAssets } from "studio/lib/interfaces/brandAssets";
 import { CompanyInfo } from "studio/lib/interfaces/companyDetails";
+import { LegalDocument } from "studio/lib/interfaces/legalDocuments";
 import { Navigation } from "studio/lib/interfaces/navigation";
 import { SocialMediaProfiles } from "studio/lib/interfaces/socialMedia";
-import { COMPANY_INFO_QUERY } from "studio/lib/queries/admin";
+import {
+  COMPANY_INFO_QUERY,
+  LEGAL_DOCUMENTS_BY_LANG_QUERY,
+} from "studio/lib/queries/admin";
 import {
   BRAND_ASSETS_QUERY,
   NAV_QUERY,
@@ -27,28 +31,37 @@ export default function FooterPreview({
   initialCompanyInfo,
   initialBrandAssets,
   initialSoMe,
+  initialLegal,
+  language,
 }: {
   initialNav: QueryResponseInitial<Navigation>;
   initialCompanyInfo: QueryResponseInitial<CompanyInfo>;
   initialBrandAssets: QueryResponseInitial<BrandAssets>;
   initialSoMe: QueryResponseInitial<SocialMediaProfiles | null>;
+  initialLegal: QueryResponseInitial<LegalDocument[] | null>;
+  language: string;
 }) {
   const newNav = useInitialData(NAV_QUERY, initialNav);
   const newCompanyInfo = useInitialData(COMPANY_INFO_QUERY, initialCompanyInfo);
   const newBrandAssets = useInitialData(BRAND_ASSETS_QUERY, initialBrandAssets);
   const newSoMedata = useInitialData(SOME_PROFILES_QUERY, initialSoMe);
-  // TODO: add legal preview
+  const { data: newLegal } = useQuery(
+    LEGAL_DOCUMENTS_BY_LANG_QUERY,
+    { language },
+    { initial: initialLegal },
+  );
   return (
     newNav &&
     newCompanyInfo &&
     newBrandAssets &&
-    newSoMedata && (
+    newSoMedata &&
+    newLegal && (
       <Footer
         navigationData={newNav}
         companyInfo={newCompanyInfo}
         brandAssets={newBrandAssets}
         soMeData={newSoMedata}
-        legalData={[]}
+        legalData={newLegal}
       />
     )
   );
diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx
index 259cf7291..72dd90fcb 100644
--- a/src/components/navigation/header/Header.tsx
+++ b/src/components/navigation/header/Header.tsx
@@ -5,6 +5,7 @@ import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 import { FocusOn } from "react-focus-on";
 
+import LanguageSwitcher from "src/components/languageSwitcher/LanguageSwitcher";
 import CustomLink from "src/components/link/CustomLink";
 import LinkButton from "src/components/linkButton/LinkButton";
 import { getHref } from "src/utils/get";
@@ -85,6 +86,9 @@ export const Header = ({ data, assets }: IHeader) => {
             )}
             {renderPageLinks(links, false, pathname)}
             {renderPageCTAs(ctas, false)}
+            <div className={styles.languageSwitcher}>
+              <LanguageSwitcher />
+            </div>
             <button
               aria-haspopup="true"
               aria-controls={sidebarID}
@@ -102,6 +106,7 @@ export const Header = ({ data, assets }: IHeader) => {
             >
               {renderPageLinks(sidebarLinks, true, pathname)}
               {renderPageCTAs(sidebarCtas, true)}
+              <LanguageSwitcher />
             </div>
           )}
         </nav>
diff --git a/src/components/navigation/header/header.module.css b/src/components/navigation/header/header.module.css
index 181627a8b..78ba3daaf 100644
--- a/src/components/navigation/header/header.module.css
+++ b/src/components/navigation/header/header.module.css
@@ -106,6 +106,14 @@
   justify-content: flex-end;
 }
 
+.languageSwitcher {
+  display: none;
+
+  @media (min-width: 1024px) {
+    display: flex;
+  }
+}
+
 .mobileMenu {
   flex: 1;
 
diff --git a/src/utils/get.tsx b/src/utils/get.tsx
index 443661d77..b281c4e34 100644
--- a/src/utils/get.tsx
+++ b/src/utils/get.tsx
@@ -7,7 +7,7 @@ export const getHref = (link: ILink): string => {
     case LinkType.Internal:
       if (link.internalLink?._ref) {
         try {
-          return `/${link.internalLink._ref}${link.anchor ? `#${link.anchor}` : ""}`;
+          return `${link.language ? `/${link.language}` : ""}/${link.internalLink._ref}${link.anchor ? `#${link.anchor}` : ""}`;
         } catch (error) {
           console.error("Error fetching page:", error);
           return hash;
diff --git a/src/utils/hooks/useLanguage.ts b/src/utils/hooks/useLanguage.ts
new file mode 100644
index 000000000..289553385
--- /dev/null
+++ b/src/utils/hooks/useLanguage.ts
@@ -0,0 +1,110 @@
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+
+import { fetchWithToken } from "studio/lib/fetchWithToken";
+import { SlugTranslations } from "studio/lib/interfaces/slugTranslations";
+import { LanguageObject } from "studio/lib/interfaces/supportedLanguages";
+import { LANGUAGES_QUERY } from "studio/lib/queries/languages";
+import { SLUG_TRANSLATIONS_FROM_LANGUAGE_QUERY } from "studio/lib/queries/slugTranslations";
+
+/**
+ * Client hook providing access to the available Sanity translations for the given slug
+ *
+ * @param currentLanguage the language of the given slug
+ * @param slug slug to translate
+ * @param availableLanguages languages with possible slug translation
+ */
+function useSlugTranslations(
+  currentLanguage: LanguageObject | undefined,
+  slug: string,
+  availableLanguages: LanguageObject[] | null,
+) {
+  const [slugTranslationsData, setSlugTranslationsData] =
+    useState<SlugTranslations | null>(null);
+
+  useEffect(() => {
+    if (currentLanguage === undefined) {
+      return;
+    }
+    fetchWithToken<SlugTranslations | null>(
+      SLUG_TRANSLATIONS_FROM_LANGUAGE_QUERY,
+      {
+        slug,
+        language: currentLanguage?.id,
+      },
+    ).then(setSlugTranslationsData);
+  }, [currentLanguage, slug]);
+
+  const allSlugTranslations =
+    slug === ""
+      ? availableLanguages?.map((lang) => ({
+          slug: "",
+          language: lang.id,
+        }))
+      : slugTranslationsData?._translations;
+
+  const otherSlugTranslations = allSlugTranslations?.filter(
+    (translation) =>
+      translation && translation.language !== currentLanguage?.id,
+  );
+
+  // include full language object, not just id, in slug translation
+  return otherSlugTranslations?.map(
+    (translation) =>
+      translation && {
+        slug: `/${translation.language}/${translation.slug}`,
+        language: availableLanguages?.find(
+          (lang) => lang.id === translation.language,
+        ),
+      },
+  );
+}
+
+/**
+ * Client hook providing access to:
+ * - the currently selected language from URL
+ * - all enabled languages in Sanity
+ * - default language selected in Sanity
+ * - available translations of the current page slug
+ */
+export default function useLanguage() {
+  const pathname = usePathname();
+
+  const [availableLanguages, setAvailableLanguages] = useState<
+    LanguageObject[] | null
+  >(null);
+
+  const defaultLanguage = availableLanguages?.find(
+    (language) => language.default,
+  );
+
+  const language = availableLanguages?.find(
+    ({ id }) => pathname.startsWith(`/${id}/`) || pathname === `/${id}`,
+  );
+
+  const currentLanguage = language ?? defaultLanguage;
+
+  const slug = pathname
+    .split("/")
+    .slice(language !== undefined ? 2 : 1)
+    .join("/");
+
+  const slugTranslations = useSlugTranslations(
+    currentLanguage,
+    slug,
+    availableLanguages,
+  );
+
+  useEffect(() => {
+    fetchWithToken<LanguageObject[] | null>(LANGUAGES_QUERY).then((data) =>
+      setAvailableLanguages(data),
+    );
+  }, []);
+
+  return {
+    language,
+    defaultLanguage,
+    availableLanguages,
+    slugTranslations,
+  };
+}
diff --git a/studio/lib/interfaces/legalDocuments.ts b/studio/lib/interfaces/legalDocuments.ts
index ac02152e7..2b230a81c 100644
--- a/studio/lib/interfaces/legalDocuments.ts
+++ b/studio/lib/interfaces/legalDocuments.ts
@@ -8,6 +8,7 @@ export interface LegalDocument {
   slug: Slug;
   basicTitle: string;
   richText: PortableTextBlock[];
+  language: string;
   _translations: Translations[];
 }
 
diff --git a/studio/lib/interfaces/navigation.ts b/studio/lib/interfaces/navigation.ts
index 394f3e946..f1cc5e179 100644
--- a/studio/lib/interfaces/navigation.ts
+++ b/studio/lib/interfaces/navigation.ts
@@ -23,6 +23,7 @@ export interface ILink {
   anchor?: string;
   newTab?: boolean;
   ariaLabel?: string;
+  language?: string;
 }
 
 export enum LinkType {
diff --git a/studio/lib/interfaces/slugTranslations.ts b/studio/lib/interfaces/slugTranslations.ts
index 3c68882aa..5dc9f221c 100644
--- a/studio/lib/interfaces/slugTranslations.ts
+++ b/studio/lib/interfaces/slugTranslations.ts
@@ -1,6 +1,8 @@
+export interface SlugTranslation {
+  language: string;
+  slug: string;
+}
+
 export interface SlugTranslations {
-  _translations: ({
-    language: string;
-    slug: string;
-  } | null)[];
+  _translations: (SlugTranslation | null)[];
 }

From fbf88864da3e84d84f56db955e0d94412dbf4fcd Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <mom@variant.no>
Date: Sun, 29 Sep 2024 13:02:27 +0200
Subject: [PATCH 2/4] refactor(queries): deduplicate DEFAULT_LANGUAGE_QUERY

---
 src/app/(main)/[lang]/page.tsx        | 6 ++++--
 src/middlewares/languageMiddleware.ts | 2 +-
 src/utils/hooks/useLanguage.ts        | 2 +-
 studio/lib/queries/languages.ts       | 5 -----
 studio/lib/queries/siteSettings.ts    | 1 +
 5 files changed, 7 insertions(+), 9 deletions(-)
 delete mode 100644 studio/lib/queries/languages.ts

diff --git a/src/app/(main)/[lang]/page.tsx b/src/app/(main)/[lang]/page.tsx
index 4ae510129..e63a51439 100644
--- a/src/app/(main)/[lang]/page.tsx
+++ b/src/app/(main)/[lang]/page.tsx
@@ -10,9 +10,11 @@ import { client } from "studio/lib/client";
 import { LinkType } from "studio/lib/interfaces/navigation";
 import { PageBuilder } from "studio/lib/interfaces/pages";
 import { LanguageObject } from "studio/lib/interfaces/supportedLanguages";
-import { LANGUAGES_QUERY } from "studio/lib/queries/languages";
 import { PAGE_QUERY, SEO_PAGE_QUERY } from "studio/lib/queries/pages";
-import { LANDING_PAGE_REF_QUERY } from "studio/lib/queries/siteSettings";
+import {
+  LANDING_PAGE_REF_QUERY,
+  LANGUAGES_QUERY,
+} from "studio/lib/queries/siteSettings";
 import { loadStudioQuery } from "studio/lib/store";
 
 export async function generateMetadata(): Promise<Metadata> {
diff --git a/src/middlewares/languageMiddleware.ts b/src/middlewares/languageMiddleware.ts
index 3fca40f71..f9d4f7f58 100644
--- a/src/middlewares/languageMiddleware.ts
+++ b/src/middlewares/languageMiddleware.ts
@@ -8,7 +8,7 @@ import { LanguageObject } from "studio/lib/interfaces/supportedLanguages";
 import {
   DEFAULT_LANGUAGE_QUERY,
   LANGUAGES_QUERY,
-} from "studio/lib/queries/languages";
+} from "studio/lib/queries/siteSettings";
 import {
   SLUG_TRANSLATIONS_FROM_LANGUAGE_QUERY,
   SLUG_TRANSLATIONS_TO_LANGUAGE_QUERY,
diff --git a/src/utils/hooks/useLanguage.ts b/src/utils/hooks/useLanguage.ts
index 289553385..b230dbb5f 100644
--- a/src/utils/hooks/useLanguage.ts
+++ b/src/utils/hooks/useLanguage.ts
@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { fetchWithToken } from "studio/lib/fetchWithToken";
 import { SlugTranslations } from "studio/lib/interfaces/slugTranslations";
 import { LanguageObject } from "studio/lib/interfaces/supportedLanguages";
-import { LANGUAGES_QUERY } from "studio/lib/queries/languages";
+import { LANGUAGES_QUERY } from "studio/lib/queries/siteSettings";
 import { SLUG_TRANSLATIONS_FROM_LANGUAGE_QUERY } from "studio/lib/queries/slugTranslations";
 
 /**
diff --git a/studio/lib/queries/languages.ts b/studio/lib/queries/languages.ts
deleted file mode 100644
index 9903a54a1..000000000
--- a/studio/lib/queries/languages.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { groq } from "next-sanity";
-
-export const DEFAULT_LANGUAGE_QUERY = groq`*[_type == "languageSettings" && _id == "languageSettings"][0].languages[default][0]`;
-
-export const LANGUAGES_QUERY = groq`*[_type == "languageSettings" && _id == "languageSettings"][0].languages`;
diff --git a/studio/lib/queries/siteSettings.ts b/studio/lib/queries/siteSettings.ts
index f704416f8..12f185523 100644
--- a/studio/lib/queries/siteSettings.ts
+++ b/studio/lib/queries/siteSettings.ts
@@ -60,6 +60,7 @@ export const SOME_PROFILES_QUERY = groq`
 `;
 
 //Languages
+export const LANGUAGES_QUERY = groq`*[_type == "languageSettings" && _id == "languageSettings"][0].languages`;
 export const DEFAULT_LANGUAGE_QUERY = groq`*[_type == "languageSettings" && _id == "languageSettings"][0].languages[default][0]`;
 
 //Default SEO

From 156bf7abcab6510fda0aeb6f668000537581dbd1 Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <mom@variant.no>
Date: Mon, 30 Sep 2024 07:59:35 +0200
Subject: [PATCH 3/4] fix(siteSettings): inline document id in groq query

attempt to fix following error at build:
> The error was caused by importing 'sanity/lib/index.mjs' in './studio/schemas/documents/siteSettings/brandAssets.ts'.
---
 studio/lib/queries/siteSettings.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/studio/lib/queries/siteSettings.ts b/studio/lib/queries/siteSettings.ts
index 12f185523..99cab8822 100644
--- a/studio/lib/queries/siteSettings.ts
+++ b/studio/lib/queries/siteSettings.ts
@@ -1,10 +1,8 @@
 import { groq } from "next-sanity";
 
-import { brandAssetsID } from "studio/schemas/documents/siteSettings/brandAssets";
-
 //Brand Assets
 export const BRAND_ASSETS_QUERY = groq`
-  *[_type == "${brandAssetsID}" && _id == "${brandAssetsID}"][0]
+  *[_type == "brandAssets" && _id == "brandAssets"][0]
 `;
 
 //Navigation Manager

From a1586a3f4fb2b11d3faca3d98dd8e96ed8934ee4 Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <mom@variant.no>
Date: Mon, 7 Oct 2024 09:08:40 +0200
Subject: [PATCH 4/4] feat(LanguageSwitcher): include current language

---
 .../languageSwitcher/LanguageSwitcher.tsx     | 54 +++++++++++++------
 src/utils/hooks/useLanguage.ts                | 11 ++--
 2 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/src/components/languageSwitcher/LanguageSwitcher.tsx b/src/components/languageSwitcher/LanguageSwitcher.tsx
index 609d10f48..dfdff5485 100644
--- a/src/components/languageSwitcher/LanguageSwitcher.tsx
+++ b/src/components/languageSwitcher/LanguageSwitcher.tsx
@@ -7,26 +7,46 @@ import useLanguage from "src/utils/hooks/useLanguage";
 import styles from "./languageSwitcher.module.css";
 
 export default function LanguageSwitcher() {
-  const { slugTranslations } = useLanguage();
+  const { slugTranslations, language, defaultLanguage } = useLanguage();
+
+  const currentLanguage = language ?? defaultLanguage;
+
+  // make sure the current language is the first item in the languages list
+  const sortedTranslations = slugTranslations?.toSorted((a, b) =>
+    a?.language?.id === currentLanguage?.id
+      ? -1
+      : b?.language?.id === currentLanguage?.id
+        ? 1
+        : 0,
+  );
+
   return (
     <ul className={styles.list}>
-      {slugTranslations?.map(
-        (slugTranslation, index) =>
-          slugTranslation?.language && (
-            <Fragment key={slugTranslation.language.id}>
-              <li>
-                <Link href={slugTranslation.slug}>
-                  <Text type={"small"}>
-                    {slugTranslation.language.id.toUpperCase()}
-                  </Text>
-                </Link>
-              </li>
-              {index < slugTranslations.length - 1 && (
-                <span className={styles.divider}></span>
+      {sortedTranslations?.map((slugTranslation, index) => {
+        if (slugTranslation?.language === undefined) {
+          return null;
+        }
+        const linkText = (
+          <Text type={"small"}>
+            {slugTranslation.language.id.toUpperCase()}
+          </Text>
+        );
+        return (
+          <Fragment key={slugTranslation.language.id}>
+            <li>
+              {currentLanguage === undefined ||
+              slugTranslation.language.id !== currentLanguage.id ? (
+                <Link href={slugTranslation.slug}>{linkText}</Link>
+              ) : (
+                linkText
               )}
-            </Fragment>
-          ),
-      )}
+            </li>
+            {index < sortedTranslations.length - 1 && (
+              <span className={styles.divider}></span>
+            )}
+          </Fragment>
+        );
+      })}
     </ul>
   );
 }
diff --git a/src/utils/hooks/useLanguage.ts b/src/utils/hooks/useLanguage.ts
index b230dbb5f..ffdeafd38 100644
--- a/src/utils/hooks/useLanguage.ts
+++ b/src/utils/hooks/useLanguage.ts
@@ -10,6 +10,8 @@ import { SLUG_TRANSLATIONS_FROM_LANGUAGE_QUERY } from "studio/lib/queries/slugTr
 /**
  * Client hook providing access to the available Sanity translations for the given slug
  *
+ * Includes the trivial translation for the current language
+ *
  * @param currentLanguage the language of the given slug
  * @param slug slug to translate
  * @param availableLanguages languages with possible slug translation
@@ -35,7 +37,7 @@ function useSlugTranslations(
     ).then(setSlugTranslationsData);
   }, [currentLanguage, slug]);
 
-  const allSlugTranslations =
+  const slugTranslations =
     slug === ""
       ? availableLanguages?.map((lang) => ({
           slug: "",
@@ -43,13 +45,8 @@ function useSlugTranslations(
         }))
       : slugTranslationsData?._translations;
 
-  const otherSlugTranslations = allSlugTranslations?.filter(
-    (translation) =>
-      translation && translation.language !== currentLanguage?.id,
-  );
-
   // include full language object, not just id, in slug translation
-  return otherSlugTranslations?.map(
+  return slugTranslations?.map(
     (translation) =>
       translation && {
         slug: `/${translation.language}/${translation.slug}`,