create-fate 1.4.0 → 1.5.0

package/templates/fate/prisma/client/src/ui/LocaleSwitcher.tsx

@@ -1,52 +1,34 @@
-import { VStack } from '@nkzw/stack';
-import { cx } from 'class-variance-authority';
 import { useLocaleContext } from 'fbtee';
-import { Languages } from 'lucide-react';
+import { startTransition } from 'react';
 import AvailableLanguages from '../lib/AvailableLanguages.tsx';
-import { Button } from './Button.tsx';
-import Card from './Card.tsx';
 
 export default function LocaleSwitcher() {
-  const { locale: currentLocale, setLocale } = useLocaleContext();
-
+  const { locale, localeChangeIsPending, setLocale } = useLocaleContext();
   return (
-    <>
-      <Button asChild size="sm" variant="ghost">
-        <button popoverTarget="locale-switcher" popoverTargetAction="show" type="button">
-          <Languages className="h-4 w-4" />
-          <span className="hidden sm:inline">
-            <fbt desc="Locale switcher button">Change Language</fbt>
-          </span>
-        </button>
-      </Button>
-      <Card
-        className="translate-y-50 justify-self-center border-slate-100 bg-white shadow transition-all dark:bg-black"
-        id="locale-switcher"
-        popover="auto"
+    <label className="inline-flex items-center gap-2 text-sm">
+      <span className="sr-only">
+        <fbt desc="Locale switcher button">Change Language</fbt>
+      </span>
+      <select
+        className="rounded-md border border-gray-300 bg-background px-2 py-1 text-foreground"
+        disabled={localeChangeIsPending}
+        onChange={(event) => {
+          const nextLocale = event.target.value;
+          try {
+            localStorage.setItem('fbtee:locale', nextLocale);
+          } catch {
+            // Changing the language still works without browser storage.
+          }
+          startTransition(() => setLocale(nextLocale));
+        }}
+        value={locale}
       >
-        <VStack alignCenter center className="w-64" gap={12} padding={16}>
-          {[...AvailableLanguages.entries()].map(([locale, name]) => (
-            <Button
-              action={() => {
-                setLocale(locale);
-                localStorage.setItem('fbtee:locale', locale);
-              }}
-              asChild
-              className={cx(
-                'transition-background border-slate-200 bg-transparent duration-150 hover:border-slate-300 hover:bg-slate-200 dark:hover:bg-slate-900 dark:text-white active:py-2',
-                {
-                  'bg-slate-100 dark:bg-slate-900': currentLocale === locale,
-                },
-              )}
-              key={locale}
-              size="sm"
-              variant="outline"
-            >
-              <a className="w-full flex-1 cursor-pointer p-2">{name}</a>
-            </Button>
-          ))}
-        </VStack>
-      </Card>
-    </>
+        {[...AvailableLanguages].map(([value, name]) => (
+          <option key={value} value={value}>
+            {name}
+          </option>
+        ))}
+      </select>
+    </label>
   );
 }

package/templates/fate/prisma/client/start.mjs

@@ -0,0 +1,11 @@
+import { readFileSync } from 'node:fs';
+import process from 'node:process';
+import { fileURLToPath, URL } from 'node:url';
+
+const dist = new URL('./dist/', import.meta.url);
+// Void's Node renderer reads this manifest to emit client scripts and styles.
+globalThis.__VITE_MANIFEST__ = JSON.parse(
+  readFileSync(new URL('client/.vite/manifest.json', dist), 'utf8'),
+);
+process.chdir(fileURLToPath(dist));
+await import(new URL('ssr/index.js', dist).href);