create-fate 1.5.2 → 1.6.0

package/templates/fate/cloudflare/client/src/lib/LocaleContext.tsx

@@ -1,61 +0,0 @@
-/// <reference types="fbtee/ReactTypes.d.ts" />
-
-import { createLocaleContext, useLocaleContext } from 'fbtee';
-import { ReactNode, startTransition, useEffect, useState } from 'react';
-import AvailableLanguages from './AvailableLanguages.tsx';
-
-const Context = createLocaleContext({
-  availableLanguages: AvailableLanguages,
-  // Keep the server and first client render identical; restore preferences after hydration.
-  clientLocales: ['en-US'],
-  fallbackLocale: 'en-US',
-  loadLocale: async (locale) => {
-    if (locale !== 'en-US' && AvailableLanguages.has(locale)) {
-      return (await import(`../translations/${locale}.json`)).default[locale];
-    }
-    return {};
-  },
-});
-
-function RestoreLocale({ restored, onRestore }: { restored: boolean; onRestore: () => void }) {
-  const { locale, setLocale } = useLocaleContext();
-  useEffect(() => {
-    if (restored) return;
-    onRestore();
-    let savedLocale: string | null = null;
-    try {
-      savedLocale = localStorage.getItem('fbtee:locale');
-    } catch {
-      // Browser storage can be unavailable.
-    }
-    const preferred = [savedLocale, ...navigator.languages, navigator.language]
-      .filter((value): value is string => !!value)
-      .map((value) => value.replaceAll('_', '-'));
-    const nextLocale = preferred
-      .map((value) =>
-        AvailableLanguages.has(value)
-          ? value
-          : [...AvailableLanguages.keys()].find(
-              (available) => available.split('-')[0] === value.split('-')[0],
-            ),
-      )
-      .find(Boolean);
-    if (nextLocale && nextLocale !== locale) {
-      startTransition(() => setLocale(nextLocale));
-    }
-  }, [locale, setLocale, restored, onRestore]);
-  useEffect(() => {
-    document.documentElement.lang = locale;
-  }, [locale]);
-  return null;
-}
-
-export default function LocaleContext({ children }: { children: ReactNode }) {
-  const [restored, setRestored] = useState(false);
-  return (
-    <Context>
-      <RestoreLocale restored={restored} onRestore={() => setRestored(true)} />
-      {children}
-    </Context>
-  );
-}

package/templates/fate/cloudflare/client/src/lib/cx.tsx

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export default function cx(...inputs: Array<ClassValue>) {
-  return twMerge(clsx(inputs));
-}

package/templates/fate/cloudflare/client/src/lib/env.tsx

@@ -1,5 +0,0 @@
-import defineEnv from '@nkzw/define-env';
-
-export default defineEnv(['SERVER_URL'], {
-  SERVER_URL: import.meta.env.VITE_SERVER_URL,
-});

package/templates/fate/cloudflare/client/src/ui/Badge.tsx

@@ -1,31 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import { HTMLAttributes } from 'react';
-import cx from '../lib/cx.tsx';
-
-const badgeVariants = cva(
-  'inline-flex items-center squircle border px-1.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-  {
-    defaultVariants: {
-      variant: 'default',
-    },
-    variants: {
-      variant: {
-        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
-        destructive:
-          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-        outline: 'text-foreground',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-      },
-    },
-  },
-);
-
-export interface BadgeProps
-  extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cx(badgeVariants({ variant }), className)} {...props} />;
-}
-
-export { Badge, badgeVariants };

package/templates/fate/cloudflare/client/src/ui/Button.tsx

@@ -1,108 +0,0 @@
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { type ButtonHTMLAttributes, type ReactNode, useOptimistic, useTransition } from 'react';
-import { useFormStatus } from 'react-dom';
-import cx from '../lib/cx.tsx';
-
-const buttonVariants = cva(
-  'inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap squircle text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-  {
-    defaultVariants: {
-      size: 'default',
-      variant: 'default',
-    },
-    variants: {
-      size: {
-        default: 'h-10 px-3 py-2 active:pt-[11px] active:pb-[9px]',
-        icon: 'h-10 w-10',
-        lg: 'h-11 squircle px-6 active:pt-[11px] active:pb-[9px]',
-        sm: 'h-9 squircle px-2 active:pt-[11px] active:pb-[9px]',
-      },
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-      },
-    },
-  },
-);
-
-const Button = ({
-  action,
-  asChild = false,
-  className,
-  disabled,
-  onClick: initialOnClick,
-  size,
-  variant,
-  ...props
-}: ButtonHTMLAttributes<HTMLButtonElement> &
-  VariantProps<typeof buttonVariants> & {
-    action?: () => void;
-    asChild?: boolean;
-  }) => {
-  const Component = asChild ? Slot : 'button';
-
-  const [isPending, startTransition] = useTransition();
-
-  const onClick = initialOnClick || (action ? () => startTransition(action) : undefined);
-
-  return (
-    <Component
-      className={cx(buttonVariants({ className, size, variant }))}
-      disabled={disabled !== undefined ? disabled : isPending}
-      onClick={onClick}
-      {...props}
-    />
-  );
-};
-
-const AsyncButton = ({
-  action,
-  asChild = false,
-  children,
-  className,
-  disabled,
-  pendingPlaceholder = '...',
-  size,
-  variant,
-  ...props
-}: ButtonHTMLAttributes<HTMLButtonElement> &
-  VariantProps<typeof buttonVariants> & {
-    action?: () => Promise<unknown> | void;
-    asChild?: boolean;
-    pendingPlaceholder?: ReactNode;
-  }) => {
-  const Component = asChild ? Slot : 'button';
-
-  const [optimisticIsPending, setOptimisticIsPending] = useOptimistic(false);
-  const [transitionIsPending, startTransition] = useTransition();
-  const { pending: formIsPending } = useFormStatus();
-
-  const isPending = transitionIsPending || optimisticIsPending || formIsPending;
-
-  const onClick = action
-    ? () => {
-        startTransition(async () => {
-          setOptimisticIsPending(true);
-          await action();
-        });
-      }
-    : undefined;
-
-  return (
-    <Component
-      className={cx(buttonVariants({ className, size, variant }))}
-      disabled={disabled || isPending || undefined}
-      onClick={onClick}
-      {...props}
-    >
-      {isPending ? pendingPlaceholder : children}
-    </Component>
-  );
-};
-
-export { AsyncButton, Button, buttonVariants };

package/templates/fate/cloudflare/client/src/ui/Card.tsx

@@ -1,32 +0,0 @@
-import { VStack } from '@nkzw/stack';
-import { HTMLAttributes } from 'react';
-import cx from '../lib/cx.tsx';
-
-export default function Card({
-  children,
-  className,
-  ...props
-}: {
-  children: React.ReactNode;
-  className?: string;
-} & HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cx(
-        'relative overflow-hidden squircle border border-gray-200/70 bg-white/85 shadow-[0_16px_70px_-32px_rgba(15,23,42,0.45)] dark:border-neutral-800 dark:bg-neutral-900/80 transition duration-200 ease-out hover:shadow-[0_24px_80px_-38px_rgba(15,23,42,0.55)]',
-        className,
-      )}
-      {...props}
-    >
-      <div className="pointer-events-none absolute inset-0 bg-linear-to-br from-blue-500/10 via-transparent to-indigo-500/15 opacity-30 transition duration-200" />
-      <VStack
-        className="relative z-10 flex h-full w-full"
-        gap={16}
-        horizontalPadding={20}
-        verticalPadding={16}
-      >
-        {children}
-      </VStack>
-    </div>
-  );
-}

package/templates/fate/cloudflare/client/src/ui/CommentCard.tsx

@@ -1,75 +0,0 @@
-import type { Comment } from '@app/server/src/router.ts';
-import Stack from '@nkzw/stack';
-import { X } from 'lucide-react';
-import { useView, view, ViewRef } from 'react-fate';
-import { useFateClient } from 'react-fate';
-import { Button } from './Button.tsx';
-import Link from './Link.tsx';
-
-export const CommentView = view<Comment>()({
-  author: {
-    id: true,
-    name: true,
-    username: true,
-  },
-  content: true,
-  id: true,
-});
-
-export const CommentViewWithPostCount = view<Comment>()({
-  ...CommentView,
-  post: { commentCount: true },
-});
-
-export default function CommentCard({
-  comment: commentRef,
-  link,
-  post,
-}: {
-  comment: ViewRef<'Comment'>;
-  link?: boolean;
-  post: { commentCount: number; id: string; title: string };
-}) {
-  const fate = useFateClient();
-  const comment = useView(CommentView, commentRef);
-  const { author } = comment;
-
-  return (
-    <div
-      className="group squircle border border-gray-200/80 bg-gray-100/50 p-3 text-sm dark:border-neutral-800 dark:bg-neutral-900/40"
-      key={comment.id}
-    >
-      <Stack between gap={16}>
-        <p className="font-medium text-gray-900 dark:text-gray-200">
-          {author?.name ?? 'Anonymous'}
-        </p>
-        <Button
-          className="opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100"
-          onClick={async () => {
-            await fate.mutations.comment.delete({
-              delete: true,
-              input: { id: comment.id },
-              optimistic: {
-                post: { commentCount: post.commentCount - 1, id: post.id },
-              },
-              view: view<Comment>()({
-                id: true,
-                post: { commentCount: true },
-              }),
-            });
-          }}
-          size="sm"
-          variant="ghost"
-        >
-          <X size={14} />
-        </Button>
-      </Stack>
-      <p className="text-foreground/80">{comment.content}</p>
-      {link && (
-        <Link className="text-blue-500 underline hover:no-underline" to={`/post/${post.id}`}>
-          {post.title}
-        </Link>
-      )}
-    </div>
-  );
-}

package/templates/fate/cloudflare/client/src/ui/Error.tsx

@@ -1,19 +0,0 @@
-import { VStack } from '@nkzw/stack';
-
-export default function Error({ error: initialError }: { error: unknown }) {
-  const error = initialError instanceof Error ? (initialError as Error) : null;
-  return (
-    <VStack gap={12}>
-      <h3 className="text-xl font-semibold text-red-700">Error</h3>
-      <code>{error ? error.stack || `fate Error: ${error.message}` : String(initialError)}</code>
-      <div>
-        <a
-          className="cursor-pointer underline decoration-gray-300 hover:no-underline"
-          onClick={() => window.location.reload()}
-        >
-          <fbt desc="Try again button">Try again</fbt>
-        </a>
-      </div>
-    </VStack>
-  );
-}

package/templates/fate/cloudflare/client/src/ui/H2.tsx

@@ -1,15 +0,0 @@
-import cx from '../lib/cx.tsx';
-
-export default function H2({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <h2 className={cx('text-2xl font-semibold text-gray-900 dark:text-gray-50', className)}>
-      {children}
-    </h2>
-  );
-}

package/templates/fate/cloudflare/client/src/ui/H3.tsx

@@ -1,20 +0,0 @@
-import cx from '../lib/cx.tsx';
-
-export default function H2({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <h3
-      className={cx(
-        'bg-linear-to-r from-slate-900 to-slate-600 bg-clip-text text-lg font-semibold text-transparent transition dark:from-white dark:to-slate-200 uppercase tracking-widest duration-150 opacity-100 hover:opacity-70 active:translate-y-[1.5px]',
-        className,
-      )}
-    >
-      {children}
-    </h3>
-  );
-}

package/templates/fate/cloudflare/client/src/ui/Header.tsx

@@ -1,98 +0,0 @@
-import Stack from '@nkzw/stack';
-import { useRouter } from '@void/react';
-import { ChevronLeft, LogIn, LogOut, Search } from 'lucide-react';
-import AuthClient from '../user/AuthClient.tsx';
-import { Button } from './Button.tsx';
-import Link from './Link.tsx';
-import LocaleSwitcher from './LocaleSwitcher.tsx';
-
-export default function Header() {
-  const router = useRouter();
-  const pathname = router.path;
-  const { data: session, isPending } = AuthClient.useSession();
-
-  return (
-    <header className="sticky top-0 z-50 border-b border-white/60 bg-white/60 backdrop-blur dark:border-neutral-800 dark:bg-neutral-950/70">
-      <Stack
-        alignCenter
-        between
-        className="max-w-8xl relative container mx-auto h-16 px-6 lg:px-8"
-        gap={16}
-      >
-        <Link
-          href="/"
-          onClick={() =>
-            pathname !== '/' && history.state?.idx > 0 ? history.back() : router.visit('/')
-          }
-        >
-          <Stack alignCenter gap={12}>
-            <div className="squircle relative flex h-10 w-10 items-center justify-center bg-linear-to-br from-gray-100 to-gray-200 text-white shadow-lg shadow-gray-500/20 transition duration-250 hover:scale-110 active:scale-90">
-              {pathname === '/' ? (
-                <svg
-                  className="h-6 w-6 text-gray-500"
-                  preserveAspectRatio="xMidYMax"
-                  viewBox="0 0 160 160"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M108.301 17.465h.272c1.797-.005 3.563.177 5.331.496l.349.063c5.588 1.02 10.731 3.447 15.201 6.933l.347.267c1.579 1.26 3.083 2.684 4.386 4.227l.161.186c4.018 4.719 6.924 10.686 7.767 16.852l.033.239c.262 1.848.351 3.688.352 5.551l.001.307c-.001 1.623-.092 3.188-.386 4.788l-.05.292c-1.003 5.874-3.476 11.447-7.286 16.034l-.29.358c-1.422 1.721-3.011 3.382-4.797 4.729l-.444.354c-3.046 2.405-6.436 4.147-10.084 5.442l-.497.186c-1.766.627-3.615.974-5.465 1.266l-.364.058c-1.591.238-3.185.286-4.791.281h-.499l-1.339-.002h-1.408c-.886-.001-1.772-.001-2.656-.003-3.085-.001-6.163-.005-9.247-.008v-12.78l3.606-.006 2.282-.007c1.205-.006 2.407-.01 3.611-.011.878 0 1.754-.003 2.63-.007.462-.002.928-.005 1.389-.002 6.302.01 12.003-1.72 16.65-6.117l.291-.272c3.951-3.807 6.097-9.302 6.241-14.736.04-3.078-.476-6.048-1.68-8.892l-.104-.244c-2.382-5.559-6.98-9.439-12.504-11.675-2.204-.816-4.522-1.16-6.863-1.134-.301.004-.606.004-.909.001-1.677.003-3.304.127-4.924.591l-.331.098c-2.625.758-5.093 1.928-7.254 3.607l-.323.249c-1.046.817-2.031 1.682-2.873 2.71l-.154.179c-2.354 2.782-3.9 5.988-4.727 9.529l-.054.229c-.391 1.8-.423 3.633-.42 5.471l-.001.74c.002 1.4.001 2.801-.004 4.201l-.004 3.779c0 1.824-.001 3.649-.003 5.473l-.006 2.813-.005 6.076-.001.267-.008 8.614c-.001 2.023-.004 4.045-.006 6.066v.259l-.004 2.55-.006 5.46c0 1.331-.001 2.658-.003 3.985-.002.72-.002 1.438-.002 2.156 0 .658 0 1.317-.002 1.978v.708c.004 2.098-.07 4.214-.545 6.263l-.077.359-.161.716c-.071.302-.136.605-.199.909-.55 2.538-1.6 5.067-2.832 7.348l-.214.42c-.965 1.921-2.22 3.714-3.574 5.38l-.152.183c-.78.973-1.639 1.866-2.519 2.751l-.308.313a25.81 25.81 0 0 1-2.226 1.955l-.22.179c-3.698 2.953-7.975 5.044-12.538 6.262-.212.056-.422.115-.631.176-8.366 2.287-17.8.738-25.278-3.512-3.639-2.122-7.171-4.945-9.721-8.307-.121-.15-.241-.298-.356-.448a36.247 36.247 0 0 1-2.605-3.814l-.144-.234c-.889-1.466-1.562-3.034-2.222-4.617l-.11-.265c-3.253-7.791-2.911-17.367.184-25.133.865-2.069 1.869-4.089 3.123-5.951l.172-.261a31.91 31.91 0 0 1 2.547-3.29l.229-.263c.13-.152.266-.304.396-.452l.425-.493c1.216-1.389 2.593-2.615 4.068-3.723.208-.157.414-.315.62-.476 1.184-.901 2.437-1.665 3.729-2.4l.272-.159c1.586-.893 3.235-1.573 4.934-2.21l.253-.097c4.232-1.567 8.615-1.836 13.079-1.82 1.359 0 2.732.002 4.093.007 1.209.005 2.417.006 3.621.006 1.899.002 3.794.007 5.688.012v12.78l-3.612.013-2.282.011c-1.201.005-2.401.012-3.61.016-.876.003-1.751.005-2.629.013-.463.002-.924.005-1.387.006-4.322.005-8.193.592-12.033 2.662l-.217.114c-1.458.773-2.697 1.731-3.908 2.849-.206.185-.413.362-.63.535-.435.376-.794.788-1.16 1.232l-.153.18a21.18 21.18 0 0 0-4.474 8.651l-.094.342c-.42 1.682-.54 3.395-.536 5.127v.272c.019 5.672 2.392 10.671 6.206 14.769l.215.237c3.296 3.453 8.483 5.917 13.247 6.046.448.008.896.01 1.345.01.276 0 .553.003.835.005 4.917.019 9.864-1.73 13.577-4.995l.303-.267c.299-.263.592-.527.881-.799l.262-.247c.787-.756 1.451-1.599 2.104-2.474l.151-.201c1.929-2.606 3.117-5.723 3.635-8.909l.059-.362c.194-1.296.21-2.573.207-3.883l.003-.74v-2.02c0-.73 0-1.459.005-2.188v-3.782c0-1.827.004-3.654.007-5.481 0-.939 0-1.877.004-2.816l.003-6.082v-.268c.005-2.876.008-5.75.008-8.627l.013-8.883c.004-1.823.004-3.646.004-5.469 0-1.33.004-2.659.004-3.989.003-.721.003-1.442.003-2.159v-1.98c.005-.237.005-.473 0-.711-.011-8.523 3.072-17.023 8.941-23.268.244-.263.483-.531.717-.805.416-.48.861-.918 1.324-1.352l.252-.232a26.259 26.259 0 0 1 2.184-1.812l.46-.349c1.39-1.058 2.837-1.951 4.375-2.775l.318-.172c5.005-2.666 10.5-3.877 16.15-3.889Z"
-                    fill="currentColor"
-                    style={{ transformBox: 'fill-box', transformOrigin: '50% 50%' }}
-                    transform="rotate(-31 0 0)"
-                  />
-                </svg>
-              ) : (
-                <ChevronLeft className="h-6 w-6 text-gray-500" />
-              )}
-            </div>
-            <div className="opacity-100 transition-opacity duration-250 hover:opacity-70">
-              <span className="bg-linear-to-r from-gray-500 to-gray-900 bg-clip-text text-xl font-semibold text-transparent dark:from-gray-200 dark:to-white">
-                <span className="italic">fate</span>
-              </span>
-              <p className="hidden text-xs text-muted-foreground sm:block">
-                <fbt desc="fate library tagline">A modern data client for React.</fbt>
-              </p>
-            </div>
-          </Stack>
-        </Link>
-        <Stack alignCenter>
-          <LocaleSwitcher />
-          <Button asChild size="sm" variant="ghost">
-            <Link to="/search">
-              <Search className="h-4 w-4" />
-              <span className="hidden sm:inline">
-                <fbt desc="Search button">Search</fbt>
-              </span>
-            </Link>
-          </Button>
-          <div className="flex w-9 justify-end sm:w-24">
-            {session ? (
-              <Button asChild className="w-full" size="sm" variant="ghost">
-                <Stack
-                  alignCenter
-                  as="a"
-                  className="text-sm font-medium text-gray-700 transition hover:text-gray-900 dark:text-gray-200 dark:hover:text-white"
-                  gap={4}
-                  onClick={() => AuthClient.signOut()}
-                >
-                  <LogOut className="h-4 w-4" />
-                  <span className="hidden sm:inline">
-                    <fbt desc="Logout button">Logout</fbt>
-                  </span>
-                </Stack>
-              </Button>
-            ) : !isPending ? (
-              <Button asChild className="w-full" size="sm" variant="ghost">
-                <Link to="/login">
-                  <LogIn className="h-4 w-4" /> <fbt desc="Login button">Login</fbt>
-                </Link>
-              </Button>
-            ) : (
-              <div aria-hidden className="h-9 w-full" />
-            )}
-          </div>
-        </Stack>
-      </Stack>
-    </header>
-  );
-}

package/templates/fate/cloudflare/client/src/ui/Input.tsx

@@ -1,17 +0,0 @@
-import { InputHTMLAttributes, Ref } from 'react';
-import cx from '../lib/cx.tsx';
-
-export default function Input({
-  className,
-  ...props
-}: InputHTMLAttributes<HTMLInputElement> & { ref?: Ref<HTMLInputElement> }) {
-  return (
-    <input
-      className={cx(
-        'border-input bg-background text-foreground focus-visible:ring-ring focus-visible:ring-offset-background flex w-32 squircle border px-3 py-2 text-sm shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-900/40',
-        className,
-      )}
-      {...props}
-    />
-  );
-}

package/templates/fate/cloudflare/client/src/ui/Link.tsx

@@ -1,11 +0,0 @@
-import { Link as VoidLink } from '@void/react';
-import type { ComponentProps } from 'react';
-
-export type LinkProps = Omit<ComponentProps<typeof VoidLink>, 'href'> & {
-  href?: string;
-  to?: string;
-};
-
-export default function Link({ href, to, ...props }: LinkProps) {
-  return <VoidLink href={href ?? to ?? '/'} {...props} />;
-}

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

@@ -1,34 +0,0 @@
-import { useLocaleContext } from 'fbtee';
-import { startTransition } from 'react';
-import AvailableLanguages from '../lib/AvailableLanguages.tsx';
-
-export default function LocaleSwitcher() {
-  const { locale, localeChangeIsPending, setLocale } = useLocaleContext();
-  return (
-    <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}
-      >
-        {[...AvailableLanguages].map(([value, name]) => (
-          <option key={value} value={value}>
-            {name}
-          </option>
-        ))}
-      </select>
-    </label>
-  );
-}