AI: address issue #455

frontend/src/components/TopNav.tsx

@@ -4,7 +4,7 @@ import { Globe } from 'lucide-react'
 import { Fragment, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { useLocation } from 'react-router-dom'
 
-import { useLocale, useLocaleNavigate, useVerticalPreview } from '@/lib/useLocale'
+import { useLocale, useLocaleNavigate, useUILocale, useVerticalPreview } from '@/lib/useLocale'
 import LocalisedText, { formatUIString } from '@/components/LocalisedText'
 import Separator from '@/components/MenuSeparator'
 import PrefetchLink from '@/components/PrefetchLink'
@@ -13,8 +13,10 @@ import TranslatedText from '@/components/TranslatedText'
 import { toast } from '@/components/ui/use-toast'
 import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
 import { isLocaleCode,
-	 localeFromPath,
+	 isUILocaleCode,
+	 MONGOLIAN_LOCALE,
 	 switchLocalePath,
+	 uiLocaleFromPath,
 	 unlocalisedPath } from '@/lib/locales'
 import { uiMessage, uiMessageLanguage } from '@/lib/messages'
 import { useUITranslation } from '@/lib/useUITranslation'
@@ -28,13 +30,13 @@ import { fetchWikiPage } from '@/lib/wiki'
 
 import type { FC, MouseEvent } from 'react'
 
-import type { AvailableLocale, LocaleCode } from '@/lib/locales'
+import type { AvailableLocale, UILocaleCode } from '@/lib/locales'
 import type { Material, Menu, MenuVisibleItem, Tag, User } from '@/types'
 
 type Props = {
     user: User | null
     locales: AvailableLocale[]
-    resolveLocaleSwitch?: (locale: LocaleCode) => Promise<string> }
+    resolveLocaleSwitch?: (locale: UILocaleCode) => Promise<string> }
 type NavDensity = 'auto' | 'comfortable' | 'compact'
 
 
@@ -47,7 +49,7 @@ export const menuOutline = (
 	pathName: string },
 ): Menu => {
   const pathName = unlocalisedPath (fullPathname)
-  const locale = localeFromPath (fullPathname) ?? 'ja'
+  const locale = uiLocaleFromPath (fullPathname)
 
   const message = (
       key: Parameters<typeof uiMessage>[1],
@@ -137,8 +139,11 @@ export const menuOutline = (
 const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
   const { message, label } = useUITranslation ('shared')
   const locale = useLocale ()
+  const uiLocale = useUILocale ()
   const verticalPreview = useVerticalPreview ()
-  const localeName = locales.find (entry => entry.code === locale)?.name
+  const uiLocales = [...locales.filter (entry => isLocaleCode (entry.code)),
+      ...(locales.some (entry => entry.code === 'ja') ? [MONGOLIAN_LOCALE] : [])]
+  const localeName = uiLocales.find (entry => entry.code === uiLocale)?.name
   const navigate = useLocaleNavigate ()
   const location = useLocation ()
   const currentLocation = useRef (location)
@@ -443,17 +448,18 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
 			rounded px-1 focus-within:ring-2">
 	<Globe aria-hidden="true" size={16}/>
 	<span className="top-nav-locale-name whitespace-nowrap text-sm">
-	  <LocalisedText language={locale}>{localeName}</LocalisedText>
+	  <LocalisedText language={uiLocale}>{localeName}</LocalisedText>
 	</span>
 	<select
-	    aria-label={formatUIString (localeName ?? '', locale)}
-	    value={locale}
+	    aria-label={formatUIString (localeName ?? '', uiLocale)}
+	    lang={uiLocale}
+	    value={uiLocale}
 	    disabled={switchingLocale}
 	    className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
 	    onChange={async event => {
 	      const nextLocale = event.target.value
-	      if (isLocaleCode (nextLocale)
-		  && locales.some (entry => entry.code === nextLocale))
+	      if (isUILocaleCode (nextLocale)
+		  && uiLocales.some (entry => entry.code === nextLocale))
 	      {
 		const request = ++localeSwitchRequest.current
 		setSwitchingLocale (true)
@@ -478,8 +484,8 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
 		}
 	      }
 	    }}>
-	  {locales.map (entry => isLocaleCode (entry.code) && (
-	      <option key={entry.code} value={entry.code}>
+	  {uiLocales.map (entry => (
+	      <option key={entry.code} value={entry.code} lang={entry.code}>
 		{formatUIString (entry.name, entry.code)}
 	      </option>))}
 	</select>
@@ -489,7 +495,7 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
       <div ref={layoutRef} className="top-nav-layout w-full min-w-0 shrink-0"
 	  data-desktop={desktop ?? undefined} data-density={density}
 	  data-layout-ready={layoutReady}>
-	<nav ref={barRef} lang={uiMessageLanguage (locale, 'posts')}
+	<nav ref={barRef} lang={uiMessageLanguage (uiLocale, 'posts')}
 	    className="top-nav-root top-nav-bar flex justify-between items-center w-full">
 	  <div className="top-nav-primary flex shrink-0 items-center h-12">
 	    <PrefetchLink
@@ -560,18 +566,10 @@ const TopNav: FC<Props> = ({ user, locales, resolveLocaleSwitch }) => {
 	  <div className="top-nav-account ml-auto flex min-w-0 items-center gap-2">
 	    <TopNavUser user={user}/>
 	    {localeSelector}
-	    {verticalPreview && (
-		<span className="vertical-preview-sample" lang="mn-Mong">
-		  ᠮᠣᠩᠭᠣᠯ
-		</span>)}
 	  </div>
 
 	  <div className="top-nav-mobile-controls ml-auto flex shrink-0 items-center gap-2">
 	    {menuOpen && localeSelector}
-	    {verticalPreview && (
-		<span className="vertical-preview-sample" lang="mn-Mong">
-		  ᠮᠣᠩᠭᠣᠯ
-		</span>)}
 	    <button
 		type="button"
 		className="top-nav-mobile-toggle shrink-0 whitespace-nowrap

frontend/src/components/common/Form.tsx

@@ -8,7 +8,7 @@ type Props = {
 
 
 const Form: FC<Props> = ({ children, className }) => (
-    <div className={cn ('mx-auto max-w-xl space-y-4 p-4', className)}>
+    <div className={cn ('form-layout mx-auto max-w-xl space-y-4 p-4', className)}>
       {children}
     </div>)
 

frontend/src/components/layout/MainArea.tsx

@@ -17,7 +17,7 @@ type Props = {
 
 
 const MainArea: FC<Props> = (
-    { children, className, animateLayout = true, verticalContent = false },
+    { children, className, animateLayout = true, verticalContent = true },
 ) => {
   const behaviourSettings = useClientBehaviourSettings ()
   const verticalPreview = useVerticalPreview ()