feat(ux): dark/light theme + en/ja i18n + user preferences
UX全体にテーマと言語設定を追加。 - lib/db/migrations/004_user_prefs.sql: users に theme/locale 列を追加(既定 dark/en) - lib/i18n/: dictionary(en/ja) + I18nProvider(クライアントcontext: locale/theme/t/setLocale/setTheme) + server.ts(SSR用 getLocale/getTheme/translate) + constants.ts - app/layout.tsx: theme/locale Cookie を読み <html class/lang> をSSR、I18nProvider でラップ(フラッシュなし) - tailwind darkMode:'class' + 全画面に dark: バリアントを一括付与(Nodeスクリプト lookbehind で安全に変換) - components/layout/ThemeToggle: 即時クラス切替+Cookie+永続化 - app/profile: テーマ/言語セレクタ、chrome翻訳(Header/ProjectNav/login/dashboard/profile) - PATCH /api/users/me: theme/locale を受理(バリデーション→400)、Cookieを設定 - E2E: locale=ja storageState で既存JAアサーションを維持、theme-i18n.spec で既定en/darkと切替を検証
This commit is contained in:
Ken Yasue
@ -3,9 +3,12 @@
|
||||
import { useRouter } from 'next/navigation';
|
||||
import type { PublicUser } from '@/lib/auth/getCurrentUser';
|
||||
import { NotificationBadge } from '@/components/notifications/NotificationBadge';
|
||||
import { ThemeToggle } from '@/components/layout/ThemeToggle';
|
||||
import { useI18n } from '@/lib/i18n/I18nProvider';
|
||||
|
||||
export function Header({ user }: { user: PublicUser }) {
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
|
||||
async function handleLogout() {
|
||||
await fetch('/api/auth/logout', { method: 'POST' });
|
||||
@ -14,24 +17,34 @@ export function Header({ user }: { user: PublicUser }) {
|
||||
}
|
||||
|
||||
return (
|
||||
<header className="flex items-center justify-between border-b bg-white px-6 py-3">
|
||||
<a href="/dashboard" className="font-bold text-gray-800">
|
||||
シンプルグループウェア
|
||||
<header className="flex items-center justify-between border-b bg-white px-6 py-3 dark:border-gray-700 dark:bg-gray-800">
|
||||
<a
|
||||
href="/dashboard"
|
||||
className="font-bold text-gray-800 dark:text-gray-100"
|
||||
>
|
||||
{t('app.name')}
|
||||
</a>
|
||||
<nav className="flex items-center gap-4 text-sm">
|
||||
<a href="/dashboard" className="text-gray-600 hover:underline">
|
||||
ダッシュボード
|
||||
<a
|
||||
href="/dashboard"
|
||||
className="text-gray-600 hover:underline dark:text-gray-300"
|
||||
>
|
||||
{t('nav.dashboard')}
|
||||
</a>
|
||||
<ThemeToggle />
|
||||
<NotificationBadge />
|
||||
<a href="/profile" className="text-gray-600 hover:underline">
|
||||
{user.name} さん
|
||||
<a
|
||||
href="/profile"
|
||||
className="text-gray-600 hover:underline dark:text-gray-300"
|
||||
>
|
||||
{user.name}
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleLogout}
|
||||
className="text-blue-600 hover:underline"
|
||||
className="text-blue-600 hover:underline dark:text-blue-400"
|
||||
>
|
||||
ログアウト
|
||||
{t('header.logout')}
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
@ -1,18 +1,23 @@
|
||||
const NAV_ITEMS = [
|
||||
{ href: '', label: '概要' },
|
||||
{ href: '/board', label: '掲示板' },
|
||||
{ href: '/notes', label: 'メモ' },
|
||||
{ href: '/chat', label: 'チャット' },
|
||||
{ href: '/todos', label: 'ToDo' },
|
||||
{ href: '/files', label: 'ファイル' },
|
||||
{ href: '/calendar', label: 'カレンダー' },
|
||||
{ href: '/milestones', label: 'マイルストーン' },
|
||||
{ href: '/meetings', label: 'ミーティング' },
|
||||
{ href: '/search', label: '検索' },
|
||||
{ href: '/members', label: 'メンバー' },
|
||||
{ href: '/activity', label: 'アクティビティ' },
|
||||
{ href: '/settings', label: '設定' },
|
||||
] as const;
|
||||
'use client';
|
||||
|
||||
import { useI18n } from '@/lib/i18n/I18nProvider';
|
||||
import type { MessageKey } from '@/lib/i18n/dictionary';
|
||||
|
||||
const NAV_ITEMS: { href: string; key: MessageKey; activeKey: string }[] = [
|
||||
{ href: '', key: 'nav.overview', activeKey: 'overview' },
|
||||
{ href: '/board', key: 'nav.board', activeKey: 'board' },
|
||||
{ href: '/notes', key: 'nav.notes', activeKey: 'notes' },
|
||||
{ href: '/chat', key: 'nav.chat', activeKey: 'chat' },
|
||||
{ href: '/todos', key: 'nav.todos', activeKey: 'todos' },
|
||||
{ href: '/files', key: 'nav.files', activeKey: 'files' },
|
||||
{ href: '/calendar', key: 'nav.calendar', activeKey: 'calendar' },
|
||||
{ href: '/milestones', key: 'nav.milestones', activeKey: 'milestones' },
|
||||
{ href: '/meetings', key: 'nav.meetings', activeKey: 'meetings' },
|
||||
{ href: '/search', key: 'nav.search', activeKey: 'search' },
|
||||
{ href: '/members', key: 'nav.members', activeKey: 'members' },
|
||||
{ href: '/activity', key: 'nav.activity', activeKey: 'activity' },
|
||||
{ href: '/settings', key: 'nav.settings', activeKey: 'settings' },
|
||||
];
|
||||
|
||||
/**
|
||||
* プロジェクト内サブナビゲーション。
|
||||
@ -38,38 +43,23 @@ export function ProjectNav({
|
||||
| 'activity'
|
||||
| 'settings';
|
||||
}) {
|
||||
const activeMap: Record<string, boolean> = {
|
||||
overview: active === 'overview',
|
||||
board: active === 'board',
|
||||
notes: active === 'notes',
|
||||
chat: active === 'chat',
|
||||
todos: active === 'todos',
|
||||
files: active === 'files',
|
||||
calendar: active === 'calendar',
|
||||
milestones: active === 'milestones',
|
||||
meetings: active === 'meetings',
|
||||
search: active === 'search',
|
||||
members: active === 'members',
|
||||
activity: active === 'activity',
|
||||
settings: active === 'settings',
|
||||
};
|
||||
const { t } = useI18n();
|
||||
|
||||
return (
|
||||
<nav className="flex gap-4 border-b bg-white px-6 py-2 text-sm">
|
||||
<nav className="flex gap-4 border-b bg-white px-6 py-2 text-sm dark:border-gray-700 dark:bg-gray-800">
|
||||
{NAV_ITEMS.map((item) => {
|
||||
const key = item.href === '' ? 'overview' : item.href.slice(1);
|
||||
const href = `/projects/${projectId}${item.href}`;
|
||||
return (
|
||||
<a
|
||||
key={item.href}
|
||||
href={href}
|
||||
className={
|
||||
activeMap[key]
|
||||
? 'font-medium text-blue-600'
|
||||
: 'text-gray-600 hover:underline'
|
||||
active === item.activeKey
|
||||
? 'font-medium text-blue-600 dark:text-blue-400'
|
||||
: 'text-gray-600 hover:underline dark:text-gray-300'
|
||||
}
|
||||
>
|
||||
{item.label}
|
||||
{t(item.key)}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -4,6 +4,8 @@
|
||||
*/
|
||||
export function Sidebar({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<aside className="w-48 shrink-0 border-r bg-gray-50 p-4">{children}</aside>
|
||||
<aside className="w-48 shrink-0 border-r bg-gray-50 dark:bg-gray-900 p-4">
|
||||
{children}
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
24
components/layout/ThemeToggle.tsx
Normal file
24
components/layout/ThemeToggle.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
'use client';
|
||||
|
||||
import { useI18n } from '@/lib/i18n/I18nProvider';
|
||||
|
||||
/**
|
||||
* ヘッダー等に置くテーマ切替ボタン。
|
||||
* クリックで dark/light を即時切替(Cookie + ユーザー設定へ永続化)。
|
||||
*/
|
||||
export function ThemeToggle() {
|
||||
const { theme, setTheme } = useI18n();
|
||||
const next = theme === 'dark' ? 'light' : 'dark';
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void setTheme(next)}
|
||||
aria-label={theme === 'dark' ? 'Switch to light' : 'Switch to dark'}
|
||||
data-testid="theme-toggle"
|
||||
className="rounded px-2 py-1 text-sm text-gray-600 hover:underline dark:text-gray-300"
|
||||
>
|
||||
{theme === 'dark' ? '☀️' : '🌙'}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user