Remove next-view-transitions and use native View Transition API

- Remove external next-view-transitions dependency
- Use Next.js 16 native navigation and Safari 18+ native View Transition API
- Add ViewTransitionProvider for minimal wrapping with Safari 18+ detection
- Updated all Link imports from external package to next/link
- Removed link-wrapper.tsx and view-transitions-wrapper.tsx

This resolves Safari compatibility issues while maintaining transitions on modern browsers.
This commit is contained in:
2026-03-14 23:00:21 +08:00
parent efb57b691b
commit 1b495d2d2d
33 changed files with 1124 additions and 830 deletions

View File

@@ -57,7 +57,7 @@ export function SidebarLayout({ children }: { children: React.ReactNode }) {
<button
type="button"
onClick={() => setMobileSidebarOpen(false)}
className="rounded-full p-1 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800"
className="rounded-full p-1 text-slate-500 hover:bg-slate-100 hover:text-accent dark:hover:bg-slate-800 dark:hover:text-accent"
aria-label="關閉側邊欄"
>
<FiX className="h-5 w-5" />
@@ -76,10 +76,10 @@ export function SidebarLayout({ children }: { children: React.ReactNode }) {
<button
type="button"
onClick={() => setMobileSidebarOpen(true)}
className={clsx(
'fixed bottom-6 left-6 z-40 flex h-11 w-11 items-center justify-center rounded-full border border-slate-200 bg-white/90 text-slate-600 shadow-md backdrop-blur-sm transition hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900/90 dark:text-slate-300 dark:hover:bg-slate-800 lg:hidden',
className={clsx(
'fixed bottom-6 left-6 z-40 flex h-11 w-11 items-center justify-center rounded-full border border-slate-200 bg-white/90 text-slate-600 shadow-md backdrop-blur-sm transition hover:bg-slate-50 hover:text-accent dark:border-slate-700 dark:bg-slate-900/90 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-accent lg:hidden',
mobileSidebarOpen ? 'opacity-0 pointer-events-none' : 'opacity-100'
)}
)}
aria-label="開啟側邊欄"
>
<FiLayout className="h-5 w-5" />