create-nextjs-cms 0.8.10 → 0.9.1

package/templates/default/components/{locale-picker.tsx → language-picker.tsx}

@@ -1,85 +1,85 @@
-'use client'
-
-import { Languages } from 'lucide-react'
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { Spinner } from '@/components/ui/spinner'
-import { RTL_LOCALES } from 'nextjs-cms/translations'
-
-const LOCALE_DISPLAY_NAMES: Record<string, string> = {
-    en: 'English',
-    ar: 'العربية',
-}
-
-function displayName(code: string): string {
-    return LOCALE_DISPLAY_NAMES[code] ?? code
-}
-
-export interface LocalePickerProps {
-    supportedLanguages: readonly string[]
-    currentLocale: string
-    onLocaleChange: (locale: string) => void
-    disabled?: boolean
-    loading?: boolean
-    ariaLabel: string
-}
-
-/**
- * Shared locale dropdown UI. Use in Navbar (app) or Login page.
- * Parent controls data source and onSelect behavior (tRPC + refresh vs cookie + refresh).
- */
-export default function LocalePicker({
-    supportedLanguages,
-    currentLocale,
-    onLocaleChange,
-    disabled = false,
-    loading = false,
-    ariaLabel,
-}: LocalePickerProps) {
-    if (supportedLanguages.length < 2) return null
-
-    const isRTL = RTL_LOCALES.has(currentLocale)
-
-    return (
-        <DropdownMenu>
-            <DropdownMenuTrigger
-                asChild
-                className='text-foreground hover:text-foreground/90 relative rounded-full focus:outline-hidden cursor-pointer'
-            >
-                <button
-                    type='button'
-                    className='flex h-10 items-center justify-center'
-                    aria-label={ariaLabel}
-                    disabled={disabled}
-                >
-                    {loading ? (
-                        <Spinner className='size-5' />
-                    ) : (
-                        <Languages className='h-5 w-5' aria-hidden='true' />
-                    )}
-                </button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-                align={'end'}
-                sideOffset={12}
-                className='ring-1 ring-sky-400/80 dark:ring-amber-900'
-            >
-                {supportedLanguages.map((code) => (
-                    <DropdownMenuItem
-                        key={code}
-                        onClick={() => onLocaleChange(code)}
-                        disabled={disabled}
-                        className='cursor-pointer'
-                    >
-                        {displayName(code)}
-                        {code === currentLocale ? ' ✓' : ''}
-                    </DropdownMenuItem>
-                ))}
-            </DropdownMenuContent>
-        </DropdownMenu>
-    )
-}
+'use client'
+
+import { Languages } from 'lucide-react'
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Spinner } from '@/components/ui/spinner'
+import { RTL_LANGUAGES } from 'nextjs-cms/translations'
+
+const LANGUAGE_DISPLAY_NAMES: Record<string, string> = {
+    en: 'English',
+    ar: 'العربية',
+}
+
+function displayName(code: string): string {
+    return LANGUAGE_DISPLAY_NAMES[code] ?? code
+}
+
+export interface LanguagePickerProps {
+    supportedLanguages: readonly string[]
+    currentLanguage: string
+    onLanguageChange: (language: string) => void
+    disabled?: boolean
+    loading?: boolean
+    ariaLabel: string
+}
+
+/**
+ * Shared language dropdown UI. Use in Navbar (app) or Login page.
+ * Parent controls data source and onSelect behavior (tRPC + refresh vs cookie + refresh).
+ */
+export default function LanguagePicker({
+    supportedLanguages,
+    currentLanguage,
+    onLanguageChange,
+    disabled = false,
+    loading = false,
+    ariaLabel,
+}: LanguagePickerProps) {
+    if (supportedLanguages.length < 2) return null
+
+    const isRTL = RTL_LANGUAGES.has(currentLanguage)
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger
+                asChild
+                className='text-foreground hover:text-foreground/90 relative rounded-full focus:outline-hidden cursor-pointer'
+            >
+                <button
+                    type='button'
+                    className='flex h-10 items-center justify-center'
+                    aria-label={ariaLabel}
+                    disabled={disabled}
+                >
+                    {loading ? (
+                        <Spinner className='size-5' />
+                    ) : (
+                        <Languages className='h-5 w-5' aria-hidden='true' />
+                    )}
+                </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+                align={'end'}
+                sideOffset={12}
+                className='ring-1 ring-sky-400/80 dark:ring-amber-900'
+            >
+                {supportedLanguages.map((code) => (
+                    <DropdownMenuItem
+                        key={code}
+                        onClick={() => onLanguageChange(code)}
+                        disabled={disabled}
+                        className='cursor-pointer'
+                    >
+                        {displayName(code)}
+                        {code === currentLanguage ? ' ✓' : ''}
+                    </DropdownMenuItem>
+                ))}
+            </DropdownMenuContent>
+        </DropdownMenu>
+    )
+}

package/templates/default/components/login-language-dropdown.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { useCallback } from 'react'
+import { useRouter } from 'next/navigation'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { setLoginPageLanguageCookie, markLanguageChangedOnLogin } from 'nextjs-cms/translations'
+import LanguagePicker from './language-picker'
+
+export interface LoginLanguageDropdownProps {
+    supportedLanguages: readonly string[]
+    fallbackLanguage: string
+    initialLanguage: string
+}
+
+/**
+ * Language dropdown for the login page (unauthenticated).
+ * Persists via nextjs-cms-locale cookie; auth layout reads it when no session.
+ */
+export default function LoginLanguageDropdown({
+    supportedLanguages,
+    fallbackLanguage,
+    initialLanguage,
+}: LoginLanguageDropdownProps) {
+    const t = useI18n()
+    const router = useRouter()
+    const currentLanguage = initialLanguage || fallbackLanguage
+
+    const handleSelect = useCallback(
+        (language: string) => {
+            if (language === currentLanguage) return
+            setLoginPageLanguageCookie(language)
+            markLanguageChangedOnLogin()
+            router.refresh()
+        },
+        [currentLanguage, router],
+    )
+
+    return (
+        <LanguagePicker
+            supportedLanguages={supportedLanguages}
+            currentLanguage={currentLanguage}
+            onLanguageChange={handleSelect}
+            ariaLabel={t('language')}
+        />
+    )
+}

package/templates/default/components/ui/alert.tsx

@@ -12,7 +12,8 @@ const alertVariants = cva(
                 destructive:
                     'border-destructive/90 bg-destructive/10 text-destructive dark:border-destructive [&>svg]:text-destructive',
                 light: 'bg-gray-100 text-gray-900 dark:bg-gray-950 dark:text-gray-100',
-                info: 'bg-info text-info dark:bg-info dark:text-info',
+                info: 'border-info bg-info/10 text-info-foreground [&>svg]:text-info',
+                warning: 'bg-warning text-warning dark:bg-warning dark:text-warning',
             },
         },
         defaultVariants: {