fix: remove medium theme, fix navbar re-render, fix Node.js env loading

- Remove 'medium' theme from dashboard and marketplace; keep only light/dark
- Marketplace: move public pages into (public)/ route group so header/footer
  persist across navigations without re-rendering (eliminates usePathname)
- MarketplaceShell is now a pure context provider; chrome lives in
  (public)/layout.tsx which Next.js holds stable across navigations
- WorkspaceFrame: remove history.replaceState and standalone-route logic
- Docker API: bypass npm run dev to avoid node --env-file in containers
- Add scripts/run-with-env-file.cjs for Node.js < 20.6 compatibility;
  update apps/api/package.json dev script to use it

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/marketplace/src/app/(public)/layout.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import MarketplaceHeader from '@/components/MarketplaceHeader'
+import MarketplaceFooter from '@/components/MarketplaceFooter'
+import { useMarketplacePreferences, getFooterContent, localeOptions } from '@/components/MarketplaceShell'
+import { resolveBrowserAppUrl } from '@/lib/appUrls'
+
+export default function PublicLayout({ children }: { children: React.ReactNode }) {
+  const { language, theme, dict, companyName, setLanguage, setTheme } = useMarketplacePreferences()
+  const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001/dashboard')
+  const footerContent = getFooterContent(language)
+  const available = localeOptions.filter((o) => o.value !== language)
+  const current = localeOptions.find((o) => o.value === language) ?? localeOptions[0]
+
+  return (
+    <div className="flex min-h-screen flex-col bg-stone-50 text-stone-900 transition-colors dark:bg-stone-950 dark:text-stone-100">
+      <MarketplaceHeader
+        dict={dict}
+        theme={theme}
+        setTheme={setTheme}
+        companyName={companyName}
+        dashboardUrl={dashboardUrl}
+        currentLanguage={{ value: current.value, flag: current.flag, shortLabel: current.value.toUpperCase() }}
+        localeOptions={available.map((o) => ({ value: o.value, flag: o.flag, shortLabel: o.value.toUpperCase() }))}
+        onSelectLanguage={setLanguage}
+      />
+      <div className="flex flex-1 flex-col">
+        <div className="flex-1">{children}</div>
+        <MarketplaceFooter
+          primaryItems={footerContent.primary}
+          secondaryItems={footerContent.secondary}
+          localeLabel={footerContent.localeLabel}
+          rightsLabel={footerContent.rightsLabel}
+          localeOptions={available}
+          currentLocale={current}
+          onSelectLanguage={setLanguage}
+        />
+      </div>
+    </div>
+  )
+}

apps/marketplace/src/components/MarketplaceHeader.tsx

@@ -5,7 +5,7 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { useEffect, useRef, useState } from 'react'
 
-type Theme = 'light' | 'medium' | 'dark'
+type Theme = 'light' | 'dark'
 type Language = 'en' | 'fr' | 'ar'
 
 type Dictionary = {
@@ -15,7 +15,6 @@ type Dictionary = {
   ownerSignIn: string
   theme: string
   light: string
-  medium: string
   dark: string
 }
 
@@ -50,7 +49,6 @@ export default function MarketplaceHeader({
   const [themeMenuOpen, setThemeMenuOpen] = useState(false)
   const themeOptions = [
     { value: 'light' as const, label: dict.light },
-    { value: 'medium' as const, label: dict.medium },
     { value: 'dark' as const, label: dict.dark },
   ]
   const currentTheme = themeOptions.find((option) => option.value === theme) ?? themeOptions[0]

apps/marketplace/src/components/MarketplaceShell.tsx

@@ -1,15 +1,12 @@
 'use client'
 
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'
-import { usePathname, useRouter } from 'next/navigation'
-import MarketplaceFooter from '@/components/MarketplaceFooter'
-import MarketplaceHeader from '@/components/MarketplaceHeader'
+import { useRouter } from 'next/navigation'
 import { footerPageHref } from '@/lib/footerContent'
 import { MARKETPLACE_LANGUAGE_COOKIE, SHARED_LANGUAGE_COOKIE, isMarketplaceLanguage, type MarketplaceLanguage } from '@/lib/i18n'
-import { resolveBrowserAppUrl } from '@/lib/appUrls'
 import { SHARED_LANGUAGE_KEY, SHARED_THEME_KEY, readCurrentUserScopedPreference, readScopedPreference, writeScopedPreference } from '@/lib/preferences'
 
-type Theme = 'light' | 'medium' | 'dark'
+type Theme = 'light' | 'dark'
 
 type Dictionary = {
   marketplace: string
@@ -19,7 +16,6 @@ type Dictionary = {
   language: string
   theme: string
   light: string
-  medium: string
   dark: string
   preferences: string
 }
@@ -33,7 +29,6 @@ const dictionaries: Record<MarketplaceLanguage, Dictionary> = {
     language: 'Language',
     theme: 'Theme',
     light: 'Light',
-    medium: 'Medium',
     dark: 'Dark',
     preferences: 'Marketplace preferences',
   },
@@ -41,11 +36,10 @@ const dictionaries: Record<MarketplaceLanguage, Dictionary> = {
     marketplace: 'Accueil',
     explore: 'Marketplace',
     signIn: 'Connexion',
-    ownerSignIn: 'Créer un espace d’agence',
+    ownerSignIn: "Créer un espace d'agence",
     language: 'Langue',
     theme: 'Mode',
     light: 'Clair',
-    medium: 'Moyen',
     dark: 'Sombre',
     preferences: 'Préférences marketplace',
   },
@@ -57,29 +51,18 @@ const dictionaries: Record<MarketplaceLanguage, Dictionary> = {
     language: 'اللغة',
     theme: 'الوضع',
     light: 'فاتح',
-    medium: 'متوسط',
     dark: 'داكن',
     preferences: 'تفضيلات السوق',
   },
 }
 
-type PreferencesContextValue = {
-  language: MarketplaceLanguage
-  theme: Theme
-  dict: Dictionary
-  setLanguage: (language: MarketplaceLanguage) => void
-  setTheme: (theme: Theme) => void
-}
-
-const PreferencesContext = createContext<PreferencesContextValue | null>(null)
-
-const localeOptions: Array<{ value: MarketplaceLanguage; label: string; flag: string }> = [
+export const localeOptions: Array<{ value: MarketplaceLanguage; label: string; flag: string }> = [
   { value: 'en', label: 'Global (English)', flag: '🇺🇸' },
   { value: 'ar', label: 'North Africa (Arabic)', flag: '🇲🇦' },
   { value: 'fr', label: 'Europe (French)', flag: '🇫🇷' },
 ]
 
-function getFooterContent(language: MarketplaceLanguage): {
+export function getFooterContent(language: MarketplaceLanguage): {
   primary: Array<{ label: string; href?: string }>
   secondary: Array<{ label: string; href?: string }>
   localeLabel: string
@@ -90,7 +73,7 @@ function getFooterContent(language: MarketplaceLanguage): {
       return {
         primary: [
           { label: 'À propos de nous', href: footerPageHref['about-us'] },
-          { label: 'Conditions d’utilisation', href: footerPageHref['terms-of-service'] },
+          { label: "Conditions d'utilisation", href: footerPageHref['terms-of-service'] },
           { label: 'Sécurité', href: footerPageHref.security },
           { label: 'Conformité', href: footerPageHref.compliance },
           { label: 'Politique de confidentialité', href: footerPageHref['privacy-policy'] },
@@ -154,6 +137,17 @@ function detectBrowserLanguage(): string | null {
   return null
 }
 
+type PreferencesContextValue = {
+  language: MarketplaceLanguage
+  theme: Theme
+  dict: Dictionary
+  companyName: string | null
+  setLanguage: (language: MarketplaceLanguage) => void
+  setTheme: (theme: Theme) => void
+}
+
+const PreferencesContext = createContext<PreferencesContextValue | null>(null)
+
 export function useMarketplacePreferences() {
   const context = useContext(PreferencesContext)
   if (!context) throw new Error('useMarketplacePreferences must be used within MarketplaceShell')
@@ -167,9 +161,7 @@ export default function MarketplaceShell({
   children: React.ReactNode
   initialLanguage?: MarketplaceLanguage
 }) {
-  const pathname = usePathname()
   const router = useRouter()
-  const dashboardUrl = resolveBrowserAppUrl(process.env.NEXT_PUBLIC_DASHBOARD_URL ?? 'http://localhost:3001/dashboard')
   const apiUrl = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:4000/api/v1'
   const [language, setLanguageState] = useState<MarketplaceLanguage>(initialLanguage)
   const [theme, setThemeState] = useState<Theme>('light')
@@ -196,7 +188,7 @@ export default function MarketplaceShell({
     if (nextTheme === theme) return
 
     if (typeof window !== 'undefined') {
-      document.documentElement.classList.toggle('dark', nextTheme === 'dark' || nextTheme === 'medium')
+      document.documentElement.classList.toggle('dark', nextTheme === 'dark')
       document.documentElement.style.colorScheme = nextTheme === 'light' ? 'light' : 'dark'
       document.body.dataset.theme = nextTheme
       writeScopedPreference(SHARED_THEME_KEY, nextTheme, ['marketplace-theme'])
@@ -245,8 +237,6 @@ export default function MarketplaceShell({
   }
 
   function syncScopedPreferencesForSession() {
-    // Tab-session choice always wins — never let an employee-scoped cookie override
-    // a language the user explicitly picked during this browsing session.
     const sessionLang = readSessionLanguage()
     if (sessionLang) {
       if (sessionLang !== language) setLanguageState(sessionLang)
@@ -258,7 +248,7 @@ export default function MarketplaceShell({
     }
 
     const scopedTheme = readCurrentUserScopedPreference(SHARED_THEME_KEY)
-    if ((scopedTheme === 'light' || scopedTheme === 'medium' || scopedTheme === 'dark') && scopedTheme !== theme) {
+    if ((scopedTheme === 'light' || scopedTheme === 'dark') && scopedTheme !== theme) {
       setThemeState(scopedTheme)
     } else {
       writeScopedPreference(SHARED_THEME_KEY, theme, ['marketplace-theme'])
@@ -266,14 +256,9 @@ export default function MarketplaceShell({
   }
 
   useEffect(() => {
-    // sessionStorage is tab-local — check it first so a selection made earlier in
-    // this tab is honoured even after a server refresh.
     const sessionLang = readSessionLanguage()
     if (sessionLang) {
       setLanguageState(sessionLang)
-      // Write the persistent cookie immediately so any subsequent RSC request
-      // (e.g. router.refresh or next navigation) sees the correct language
-      // without waiting for the language effect's render cycle.
       writeScopedPreference(SHARED_LANGUAGE_KEY, sessionLang, ['marketplace-language'])
     } else {
       const storedLanguage = readScopedPreference(SHARED_LANGUAGE_KEY, ['marketplace-language'])
@@ -290,7 +275,7 @@ export default function MarketplaceShell({
     }
 
     const storedTheme = readScopedPreference(SHARED_THEME_KEY, ['marketplace-theme']) as Theme | null
-    if (storedTheme === 'light' || storedTheme === 'medium' || storedTheme === 'dark') {
+    if (storedTheme === 'light' || storedTheme === 'dark') {
       setThemeState(storedTheme)
     }
 
@@ -330,9 +315,6 @@ export default function MarketplaceShell({
     document.documentElement.lang = language
     document.documentElement.dir = language === 'ar' ? 'rtl' : 'ltr'
 
-    // Don't write to storage on the initial render (language='en' default) — wait
-    // until hydration has resolved the correct stored preference.  Writing 'en'
-    // here before hydration would overwrite a previously-saved 'ar' preference.
     if (!hydrated) return
 
     try { sessionStorage.setItem('marketplace-language', language) } catch {}
@@ -342,64 +324,18 @@ export default function MarketplaceShell({
       router.refresh()
     }
     previousLanguage.current = language
-  }, [hydrated, language, pathname, router])
+  }, [hydrated, language, router])
 
   useEffect(() => {
-    document.documentElement.classList.toggle('dark', theme === 'dark' || theme === 'medium')
+    document.documentElement.classList.toggle('dark', theme === 'dark')
     document.body.dataset.theme = theme
     writeScopedPreference(SHARED_THEME_KEY, theme, ['marketplace-theme'])
   }, [theme])
 
-  const dict = dictionaries[language]
-  const footerContent = getFooterContent(language)
-  const availableLocaleOptions = localeOptions.filter((option) => option.value !== language)
-  const currentLocale = localeOptions.find((option) => option.value === language) ?? localeOptions[0]
-  const isRenterApp = pathname.startsWith('/renter/')
-  const isAuthFrameRoute = pathname === '/sign-in'
   const value = useMemo(
-    () => ({ language, theme, dict, setLanguage: applyLanguage, setTheme: applyTheme }),
-    [dict, language, theme],
+    () => ({ language, theme, dict: dictionaries[language], companyName, setLanguage: applyLanguage, setTheme: applyTheme }),
+    [language, theme, companyName],
   )
 
-  return (
-    <PreferencesContext.Provider value={value}>
-      <div className="flex min-h-screen flex-col bg-stone-50 text-stone-900 transition-colors dark:bg-stone-950 dark:text-stone-100">
-        {isRenterApp || isAuthFrameRoute ? null : (
-          <MarketplaceHeader
-            dict={dict}
-            theme={theme}
-            setTheme={applyTheme}
-            companyName={companyName}
-            dashboardUrl={dashboardUrl}
-            currentLanguage={{
-              value: currentLocale.value,
-              flag: currentLocale.flag,
-              shortLabel: currentLocale.value.toUpperCase(),
-            }}
-            localeOptions={availableLocaleOptions.map((option) => ({
-              value: option.value,
-              flag: option.flag,
-              shortLabel: option.value.toUpperCase(),
-            }))}
-            onSelectLanguage={applyLanguage}
-          />
-        )}
-
-        <div className="flex flex-1 flex-col">
-          <div className="flex-1">{children}</div>
-          {isRenterApp || isAuthFrameRoute ? null : (
-            <MarketplaceFooter
-              primaryItems={footerContent.primary}
-              secondaryItems={footerContent.secondary}
-              localeLabel={footerContent.localeLabel}
-              rightsLabel={footerContent.rightsLabel}
-              localeOptions={availableLocaleOptions}
-              currentLocale={currentLocale}
-              onSelectLanguage={applyLanguage}
-            />
-          )}
-        </div>
-      </div>
-    </PreferencesContext.Provider>
-  )
+  return <PreferencesContext.Provider value={value}>{children}</PreferencesContext.Provider>
 }

apps/marketplace/src/components/WorkspaceFrame.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { usePathname } from 'next/navigation'
 import { resolveBrowserAppUrl } from '@/lib/appUrls'
 import { useMarketplacePreferences } from './MarketplaceShell'
 
@@ -44,14 +43,13 @@ function buildFrameUrl(appUrl: string, path: string) {
   return appBase.toString()
 }
 
+const FRAME_HEIGHT = 'calc(100vh - 56px)'
+
 export default function WorkspaceFrame({ target }: { target: FrameId }) {
-  const pathname = usePathname()
   const { language, theme } = useMarketplacePreferences()
   const [src, setSrc] = useState('')
   const [framePath, setFramePath] = useState(() => getDefaultFramePath(target))
   const config = frameConfig[target]
-  const isStandaloneAuthRoute = target === 'sign-in' && pathname === '/sign-in'
-  const frameHeight = isStandaloneAuthRoute ? '100vh' : 'calc(100vh - 56px)'
   const loadingLabel = {
     en: 'Loading',
     fr: 'Chargement',
@@ -62,13 +60,6 @@ export default function WorkspaceFrame({ target }: { target: FrameId }) {
     setFramePath(getDefaultFramePath(target))
   }, [target])
 
-  useEffect(() => {
-    if (!isStandaloneAuthRoute || typeof window === 'undefined') return
-    if (window.location.pathname !== '/sign-in') return
-
-    window.history.replaceState(window.history.state, '', '/')
-  }, [isStandaloneAuthRoute])
-
   useEffect(() => {
     function handleFrameMessage(event: MessageEvent) {
       if (!event.data || typeof event.data !== 'object') return
@@ -88,25 +79,21 @@ export default function WorkspaceFrame({ target }: { target: FrameId }) {
     const nextUrl = new URL(buildFrameUrl(config.appUrl, framePath))
     nextUrl.searchParams.set('theme', theme)
     nextUrl.searchParams.set('lang', language)
-    if (isStandaloneAuthRoute) {
-      nextUrl.searchParams.delete('embedded')
-    } else {
-      nextUrl.searchParams.set('embedded', '1')
-    }
+    nextUrl.searchParams.set('embedded', '1')
     setSrc(nextUrl.toString())
-  }, [config.appUrl, framePath, isStandaloneAuthRoute, language, theme])
+  }, [config.appUrl, framePath, language, theme])
 
   return (
-    <main className="bg-stone-950" style={{ minHeight: frameHeight }}>
+    <main className="bg-stone-950" style={{ minHeight: FRAME_HEIGHT }}>
       {src ? (
         <iframe
           title={config.label}
           src={src}
           className="w-full border-0 bg-white"
-          style={{ height: frameHeight }}
+          style={{ height: FRAME_HEIGHT }}
         />
       ) : (
-        <div className="flex items-center justify-center text-sm text-stone-300" style={{ height: frameHeight }}>
+        <div className="flex items-center justify-center text-sm text-stone-300" style={{ height: FRAME_HEIGHT }}>
           {loadingLabel} {config.label}…
         </div>
       )}