9a772d6abe
**Overview** - Integrates next-intl (App Router, no i18n routing) with cookie-based locale and Accept-Language fallback. - Adds message bundles and regional variants; sets en-US as the default. **Key changes** - i18n foundation - Adds request-scoped config to load messages per locale and injects NextIntlClientProvider in [layout.tsx] - Adds/updates messages for: en-US, en-GB, zh-TW, zh-HK, zh-CN, ja, ko, fr-FR, fr-CA, de. Centralizes LOCALES, LOCALE_LABELS, and DEFAULT_LOCALE in [locales.ts] - Adds LocaleSwitcher (cookie-based) and [LocaleBootstrap] - Pages and components - Localizes Sidebar, Home (including metadata/manifest), Settings, Discover, Library. - Localizes common components: MessageInput, Attach, Focus, Optimization, MessageBox, MessageSources, SearchImages, SearchVideos, EmptyChat, NewsArticleWidget, WeatherWidget. - APIs - Weather API returns localized condition strings server-side. - UX and quality - Converts all remaining <img> to Next Image. - Updates browserslist/caniuse DB to silence warnings. - Security: Settings API Key inputs are now password fields and placeholders were removed.
101 lines
3.2 KiB
TypeScript
101 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
import { BookOpenText, Home, Search, SquarePen, Settings } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { useSelectedLayoutSegments } from 'next/navigation';
|
|
import React, { useState, type ReactNode } from 'react';
|
|
import Layout from './Layout';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
const VerticalIconContainer = ({ children }: { children: ReactNode }) => {
|
|
return (
|
|
<div className="flex flex-col items-center gap-y-3 w-full">{children}</div>
|
|
);
|
|
};
|
|
|
|
const Sidebar = ({ children }: { children: React.ReactNode }) => {
|
|
const segments = useSelectedLayoutSegments();
|
|
const t = useTranslations('navigation');
|
|
|
|
const navLinks = [
|
|
{
|
|
icon: Home,
|
|
href: '/',
|
|
active: segments.length === 0 || segments.includes('c'),
|
|
label: t('home'),
|
|
},
|
|
{
|
|
icon: Search,
|
|
href: '/discover',
|
|
active: segments.includes('discover'),
|
|
label: t('discover'),
|
|
},
|
|
{
|
|
icon: BookOpenText,
|
|
href: '/library',
|
|
active: segments.includes('library'),
|
|
label: t('library'),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
<div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-20 lg:flex-col">
|
|
<div className="flex grow flex-col items-center justify-between gap-y-5 overflow-y-auto bg-light-secondary dark:bg-dark-secondary px-2 py-8">
|
|
<a href="/">
|
|
<SquarePen className="cursor-pointer" />
|
|
</a>
|
|
<VerticalIconContainer>
|
|
{navLinks.map((link, i) => (
|
|
<Link
|
|
key={i}
|
|
href={link.href}
|
|
className={cn(
|
|
'relative flex flex-row items-center justify-center cursor-pointer hover:bg-black/10 dark:hover:bg-white/10 duration-150 transition w-full py-2 rounded-lg',
|
|
link.active
|
|
? 'text-black dark:text-white'
|
|
: 'text-black/70 dark:text-white/70',
|
|
)}
|
|
>
|
|
<link.icon />
|
|
{link.active && (
|
|
<div className="absolute right-0 -mr-2 h-full w-1 rounded-l-lg bg-black dark:bg-white" />
|
|
)}
|
|
</Link>
|
|
))}
|
|
</VerticalIconContainer>
|
|
|
|
<Link href="/settings">
|
|
<Settings className="cursor-pointer" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="fixed bottom-0 w-full z-50 flex flex-row items-center gap-x-6 bg-light-primary dark:bg-dark-primary px-4 py-4 shadow-sm lg:hidden">
|
|
{navLinks.map((link, i) => (
|
|
<Link
|
|
href={link.href}
|
|
key={i}
|
|
className={cn(
|
|
'relative flex flex-col items-center space-y-1 text-center w-full',
|
|
link.active
|
|
? 'text-black dark:text-white'
|
|
: 'text-black dark:text-white/70',
|
|
)}
|
|
>
|
|
{link.active && (
|
|
<div className="absolute top-0 -mt-4 h-1 w-full rounded-b-lg bg-black dark:bg-white" />
|
|
)}
|
|
<link.icon />
|
|
<p className="text-xs">{link.label}</p>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
<Layout>{children}</Layout>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|