From 0d6670053c0da999f8de19aaf5ea8be6d1b7fa71 Mon Sep 17 00:00:00 2001
From: Serhii Hordiichuk <>
Date: Thu, 27 Aug 2026 13:42:06 +0300
Subject: [PATCH 1/2] Rebuild side navigation labels on locale change

The navigation useMemo only recomputed on theme change, so the
labels kept the locale that was active at first render.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TavbPaXhouNDFXLwR6hTHy
---
 apps/web/src/components/SideNavigation.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/SideNavigation.tsx b/apps/web/src/components/SideNavigation.tsx
index c5619ed2e..7fe495f54 100644
--- a/apps/web/src/components/SideNavigation.tsx
+++ b/apps/web/src/components/SideNavigation.tsx
@@ -16,6 +16,7 @@ import type { Subscription } from "@kan/shared/utils";
 import { hasActiveSubscription } from "@kan/shared/utils";
 
 import type { KeyboardShortcut } from "~/providers/keyboard-shortcuts";
+import { useLocalisation } from "~/hooks/useLocalisation";
 import boardsIconDark from "~/assets/boards-dark.json";
 import boardsIconLight from "~/assets/boards-light.json";
 import membersIconDark from "~/assets/members-dark.json";
@@ -83,6 +84,8 @@ export default function SideNavigation({
 
   const { resolvedTheme } = useTheme();
 
+  const { locale } = useLocalisation();
+
   const isCloudEnv = env("NEXT_PUBLIC_KAN_ENV") === "cloud";
 
   const isDarkMode = resolvedTheme === "dark";
@@ -143,7 +146,8 @@ export default function SideNavigation({
         },
       },
     ],
-    [isDarkMode],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isDarkMode, locale],
   );
 
   const toggleCollapse = () => {

From 70ceb70c0073d51a4fb4e94b5864e088df859dc5 Mon Sep 17 00:00:00 2001
From: Serhii Hordiichuk <>
Date: Thu, 27 Aug 2026 13:54:16 +0300
Subject: [PATCH 2/2] Make side navigation labels react to i18n activation

The previous fix used the context locale, which changes before the
message catalog loads. Subscribe with useLingui and depend on
i18n.locale so the memo recomputes after activation.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TavbPaXhouNDFXLwR6hTHy
---
 apps/web/src/components/SideNavigation.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/SideNavigation.tsx b/apps/web/src/components/SideNavigation.tsx
index 7fe495f54..271ddfad3 100644
--- a/apps/web/src/components/SideNavigation.tsx
+++ b/apps/web/src/components/SideNavigation.tsx
@@ -2,6 +2,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { Button } from "@headlessui/react";
 import { t } from "@lingui/core/macro";
+import { useLingui } from "@lingui/react";
 import { env } from "next-runtime-env";
 import { useTheme } from "next-themes";
 import { useEffect, useMemo, useState } from "react";
@@ -16,7 +17,6 @@ import type { Subscription } from "@kan/shared/utils";
 import { hasActiveSubscription } from "@kan/shared/utils";
 
 import type { KeyboardShortcut } from "~/providers/keyboard-shortcuts";
-import { useLocalisation } from "~/hooks/useLocalisation";
 import boardsIconDark from "~/assets/boards-dark.json";
 import boardsIconLight from "~/assets/boards-light.json";
 import membersIconDark from "~/assets/members-dark.json";
@@ -84,7 +84,7 @@ export default function SideNavigation({
 
   const { resolvedTheme } = useTheme();
 
-  const { locale } = useLocalisation();
+  const { i18n } = useLingui();
 
   const isCloudEnv = env("NEXT_PUBLIC_KAN_ENV") === "cloud";
 
@@ -147,7 +147,7 @@ export default function SideNavigation({
       },
     ],
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isDarkMode, locale],
+    [isDarkMode, i18n.locale],
   );
 
   const toggleCollapse = () => {