fix: Unauthenticated shared document should default to user preferred language

closes #4384

app/scenes/Document/Shared.tsx

@@ -17,6 +17,7 @@ import useStores from "~/hooks/useStores";
 import { NavigationNode } from "~/types";
 import { AuthorizationError, OfflineError } from "~/utils/errors";
 import isCloudHosted from "~/utils/isCloudHosted";
+import { changeLanguage, detectLanguage } from "~/utils/language";
 import Login from "../Login";
 import Document from "./components/Document";
 import Loading from "./components/Loading";
@@ -76,14 +77,14 @@ function useDocumentId(documentSlug: string, response?: Response) {
 }
 
 function SharedDocumentScene(props: Props) {
-  const { ui } = useStores();
+  const { ui, auth } = useStores();
   const theme = useTheme();
   const location = useLocation();
   const searchParams = React.useMemo(
     () => new URLSearchParams(location.search),
     [location.search]
   );
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const [response, setResponse] = React.useState<Response>();
   const [error, setError] = React.useState<Error | null | undefined>();
   const { documents } = useStores();
@@ -91,6 +92,12 @@ function SharedDocumentScene(props: Props) {
   const documentId = useDocumentId(documentSlug, response);
   const can = usePolicy(response?.document.id ?? "");
 
+  React.useEffect(() => {
+    if (!auth.user) {
+      changeLanguage(detectLanguage(), i18n);
+    }
+  }, [auth, i18n]);
+
   // ensure the wider page color always matches the theme
   React.useEffect(() => {
     window.document.body.style.background = theme.background;