doo-boilerplate 0.1.12 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doo-boilerplate",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "CLI to scaffold Pila portal frontend projects",
   "type": "module",
   "bin": {

package/templates/template-nextjs/src/components/common/theme-toggle.tsx

@@ -1,18 +1,30 @@
 'use client'
 
+import { useCallback } from 'react'
 import { useTheme } from 'next-themes'
 import { Moon, Sun } from 'lucide-react'
 
 import { Button } from '@/components/ui/button'
 
 export function ThemeToggle() {
-  const { theme, setTheme } = useTheme()
+  const { resolvedTheme, setTheme } = useTheme()
+
+  const toggle = useCallback((e: React.MouseEvent) => {
+    const next = resolvedTheme === 'dark' ? 'light' : 'dark'
+    const root = document.documentElement
+
+    if (!document.startViewTransition) {
+      setTheme(next)
+      return
+    }
+
+    root.style.setProperty('--x', `${e.clientX}px`)
+    root.style.setProperty('--y', `${e.clientY}px`)
+    document.startViewTransition(() => setTheme(next))
+  }, [resolvedTheme, setTheme])
+
   return (
-    <Button
-      variant='ghost'
-      size='icon'
-      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-    >
+    <Button variant='ghost' size='icon' onClick={toggle} aria-label='Toggle theme'>
       <Sun className='h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0' />
       <Moon className='absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' />
       <span className='sr-only'>Toggle theme</span>

package/templates/template-nextjs/src/components/layout/header.tsx

@@ -8,6 +8,13 @@ import { useRouter } from 'next/navigation'
 import { useSignOut } from '@/features/auth/hooks/use-auth'
 import { useAuthStore } from '@/stores/auth-store'
 import { ThemeToggle } from '@/components/common/theme-toggle'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 
 import { Avatar, AvatarFallback } from '../ui/avatar'
 import { Button } from '../ui/button'
@@ -22,8 +29,8 @@ import {
 import { useSidebarStore } from './sidebar'
 
 const LANGUAGES = [
-  { code: 'en', label: 'EN' },
-  { code: 'vi', label: 'VI' },
+  { code: 'en', name: 'English', flag: '🇬🇧' },
+  { code: 'vi', name: 'Tiếng Việt', flag: '🇻🇳' },
 ]
 
 function getLangFromCookie(): string {
@@ -35,6 +42,7 @@ function getLangFromCookie(): string {
 function LangSwitcher() {
   const [locale, setLocale] = useState(getLangFromCookie)
   const router = useRouter()
+  const current = LANGUAGES.find((l) => l.code === locale) ?? LANGUAGES[0]
 
   function switchLocale(code: string) {
     document.cookie = `NEXT_LOCALE=${code}; path=/; max-age=${365 * 24 * 60 * 60}`
@@ -43,24 +51,23 @@ function LangSwitcher() {
   }
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="sm" className="w-10 px-0 font-medium">
-          {locale.toUpperCase().slice(0, 2)}
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        {LANGUAGES.map(({ code, label }) => (
-          <DropdownMenuItem
-            key={code}
-            onClick={() => switchLocale(code)}
-            className={locale === code ? 'font-semibold' : ''}
-          >
-            {label}
-          </DropdownMenuItem>
+    <Select value={current.code} onValueChange={switchLocale}>
+      <SelectTrigger className='h-8 w-auto gap-1 border-0 bg-transparent px-2 shadow-none focus:ring-0'>
+        <SelectValue>
+          <span>{current.flag}</span>
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent align='end'>
+        {LANGUAGES.map(({ code, name, flag }) => (
+          <SelectItem key={code} value={code}>
+            <div className='flex items-center gap-2'>
+              <span>{flag}</span>
+              <span>{name}</span>
+            </div>
+          </SelectItem>
         ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
+      </SelectContent>
+    </Select>
   )
 }
 

package/templates/template-nextjs/src/styles/globals.css

@@ -63,3 +63,24 @@ body {
   color: var(--color-foreground);
   font-family: var(--font-sans);
 }
+
+/* View transition: circular reveal for theme toggle */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+.dark::view-transition-old(root) {
+  z-index: 1;
+}
+.dark::view-transition-new(root) {
+  z-index: 999;
+}
+::view-transition-new(root) {
+  clip-path: circle(0% at var(--x, 50%) var(--y, 50%));
+  animation: theme-reveal 0.45s ease-in-out;
+}
+@keyframes theme-reveal {
+  from { clip-path: circle(0% at var(--x, 50%) var(--y, 50%)); }
+  to   { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); }
+}

package/templates/template-vite/src/components/common/theme-toggle.tsx

@@ -1,16 +1,28 @@
+import { useCallback } from 'react'
 import { useTheme } from 'next-themes'
 import { Moon, Sun } from 'lucide-react'
 
 import { Button } from '@/components/ui/button'
 
 export function ThemeToggle() {
-  const { theme, setTheme } = useTheme()
+  const { resolvedTheme, setTheme } = useTheme()
+
+  const toggle = useCallback((e: React.MouseEvent) => {
+    const next = resolvedTheme === 'dark' ? 'light' : 'dark'
+    const root = document.documentElement
+
+    if (!document.startViewTransition) {
+      setTheme(next)
+      return
+    }
+
+    root.style.setProperty('--x', `${e.clientX}px`)
+    root.style.setProperty('--y', `${e.clientY}px`)
+    document.startViewTransition(() => setTheme(next))
+  }, [resolvedTheme, setTheme])
+
   return (
-    <Button
-      variant='ghost'
-      size='icon'
-      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-    >
+    <Button variant='ghost' size='icon' onClick={toggle} aria-label='Toggle theme'>
       <Sun className='h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0' />
       <Moon className='absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' />
       <span className='sr-only'>Toggle theme</span>

package/templates/template-vite/src/components/layout/header.tsx

@@ -1,3 +1,4 @@
+import { useTransition } from 'react'
 import { LogOut, User } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 
@@ -14,33 +15,46 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
 
 const LANGUAGES = [
-  { code: 'en', label: 'EN' },
-  { code: 'vi', label: 'VI' },
+  { code: 'en', name: 'English', flag: '🇬🇧' },
+  { code: 'vi', name: 'Tiếng Việt', flag: '🇻🇳' },
 ]
 
 function LangSwitcher() {
   const { i18n } = useTranslation()
+  const [isPending, startTransition] = useTransition()
+  const current = LANGUAGES.find((l) => l.code === i18n.language) ?? LANGUAGES[0]
+
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant='ghost' size='sm' className='w-10 px-0 font-medium'>
-          {i18n.language.toUpperCase().slice(0, 2)}
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align='end'>
-        {LANGUAGES.map(({ code, label }) => (
-          <DropdownMenuItem
-            key={code}
-            onClick={() => i18n.changeLanguage(code)}
-            className={i18n.language === code ? 'font-semibold' : ''}
-          >
-            {label}
-          </DropdownMenuItem>
+    <Select
+      value={current.code}
+      onValueChange={(v) => startTransition(() => i18n.changeLanguage(v))}
+      disabled={isPending}
+    >
+      <SelectTrigger className='h-8 w-auto gap-1 border-0 bg-transparent px-2 shadow-none focus:ring-0'>
+        <SelectValue>
+          <span>{current.flag}</span>
+        </SelectValue>
+      </SelectTrigger>
+      <SelectContent align='end'>
+        {LANGUAGES.map(({ code, name, flag }) => (
+          <SelectItem key={code} value={code}>
+            <div className='flex items-center gap-2'>
+              <span>{flag}</span>
+              <span>{name}</span>
+            </div>
+          </SelectItem>
         ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
+      </SelectContent>
+    </Select>
   )
 }
 

package/templates/template-vite/src/styles/globals.css

@@ -79,3 +79,24 @@
     @apply bg-background text-foreground;
   }
 }
+
+/* View transition: circular reveal for theme toggle */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+.dark::view-transition-old(root) {
+  z-index: 1;
+}
+.dark::view-transition-new(root) {
+  z-index: 999;
+}
+::view-transition-new(root) {
+  clip-path: circle(0% at var(--x, 50%) var(--y, 50%));
+  animation: theme-reveal 0.45s ease-in-out;
+}
+@keyframes theme-reveal {
+  from { clip-path: circle(0% at var(--x, 50%) var(--y, 50%)); }
+  to   { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); }
+}