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/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>
 }