Migrate to HeroUI v3 and Tailwind CSS v4

- Upgrade from Tailwind CSS v3 to v4 with CSS-first configuration
- Install HeroUI v3 beta packages (@heroui/react, @heroui/styles)
- Migrate PostCSS config to new @tailwindcss/postcss plugin
- Convert tailwind.config.cjs to CSS @theme directive in globals.css
- Replace @tailwindcss/typography with custom prose styles

Component migrations:
- theme-toggle, back-to-top: HeroUI Button with onPress
- post-card, post-list-item: HeroUI Card compound components
- right-sidebar: HeroUI Card, Avatar, Chip
- search-modal: HeroUI Modal with compound structure
- nav-menu: HeroUI Button for mobile controls
- post-list-with-controls: HeroUI Button for sorting/pagination

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

components/right-sidebar.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Link from 'next/link';
 import Image from 'next/image';
 import { FaGithub, FaMastodon, FaLinkedin } from 'react-icons/fa';
@@ -6,6 +8,7 @@ import { siteConfig } from '@/lib/config';
 import { getAllTagsWithCount } from '@/lib/posts';
 import { allPages } from 'contentlayer2/generated';
 import { MastodonFeed } from './mastodon-feed';
+import { Card, Avatar, Chip } from '@heroui/react';
 
 export function RightSidebar() {
   const tags = getAllTagsWithCount().slice(0, 5);
@@ -35,38 +38,41 @@ export function RightSidebar() {
       icon: FaLinkedin,
       label: 'LinkedIn'
     }
-  ].filter(Boolean) as { key: string; href: string; icon: any; label: string }[];
+  ].filter(Boolean) as { key: string; href: string; icon: React.ComponentType<{ className?: string }>; label: string }[];
 
   return (
     <aside className="hidden lg:block">
       <div className="sticky top-20 flex flex-col gap-4">
-        <section className="motion-card group relative overflow-hidden rounded-xl border bg-white px-4 py-4 shadow-sm hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100">
+        <Card className="motion-card group relative overflow-hidden rounded-xl border px-4 py-4 dark:border-slate-800">
           <div className="pointer-events-none absolute -left-10 -top-10 h-24 w-24 rounded-full bg-sky-300/35 blur-3xl mix-blend-soft-light motion-safe:animate-float-soft dark:bg-sky-500/25" />
           <div className="pointer-events-none absolute -bottom-12 right-[-2.5rem] h-28 w-28 rounded-full bg-indigo-300/30 blur-3xl mix-blend-soft-light motion-safe:animate-float-soft dark:bg-indigo-500/20" />
 
-          <div className="relative flex flex-col items-center">
+          <Card.Content className="relative flex flex-col items-center p-0">
             <Link
               href={aboutPage?.url || '/pages/關於作者'}
               aria-label="關於作者"
               className="mb-2 inline-block transition-transform duration-300 ease-out group-hover:-translate-y-0.5"
             >
-              {avatarSrc ? (
-                <Image
-                  src={avatarSrc}
-                  alt={siteConfig.name}
-                  width={96}
-                  height={96}
-                  unoptimized
-                  className="h-24 w-24 rounded-full border border-slate-200 object-cover shadow-sm transition-transform duration-300 ease-out group-hover:scale-105 dark:border-slate-700"
-                />
-              ) : (
-                <div className="flex h-24 w-24 items-center justify-center rounded-full bg-slate-900 text-lg font-semibold text-slate-50 shadow-sm transition-transform duration-300 ease-out group-hover:scale-105 dark:bg-slate-100 dark:text-slate-900">
+              <Avatar className="h-24 w-24 border border-slate-200 shadow-sm transition-transform duration-300 ease-out group-hover:scale-105 dark:border-slate-700">
+                {avatarSrc ? (
+                  <Avatar.Image asChild>
+                    <Image
+                      src={avatarSrc}
+                      alt={siteConfig.name}
+                      width={96}
+                      height={96}
+                      unoptimized
+                      className="h-full w-full object-cover"
+                    />
+                  </Avatar.Image>
+                ) : null}
+                <Avatar.Fallback className="text-lg font-semibold">
                   {siteConfig.name.charAt(0).toUpperCase()}
-                </div>
-              )}
+                </Avatar.Fallback>
+              </Avatar>
             </Link>
             {socialItems.length > 0 && (
-              <div className="mt-2 flex items-center gap-3 text-lg text-accent-textLight dark:text-accent-textDark">
+              <div className="mt-2 flex items-center gap-3 text-lg text-[var(--color-accent-text-light)] dark:text-[var(--color-accent-text-dark)]">
                 {socialItems.map((item) => (
                   <a
                     key={item.key}
@@ -74,7 +80,7 @@ export function RightSidebar() {
                     target="_blank"
                     rel="noopener noreferrer"
                     aria-label={item.label}
-                    className="motion-link inline-flex h-8 w-8 items-center justify-center rounded-full bg-slate-100 text-slate-600 hover:-translate-y-0.5 hover:bg-accent-soft hover:text-accent dark:bg-slate-800 dark:text-slate-200"
+                    className="motion-link inline-flex h-8 w-8 items-center justify-center rounded-full bg-slate-100 text-slate-600 hover:-translate-y-0.5 hover:bg-[var(--color-accent-soft)] hover:text-[var(--color-accent)] dark:bg-slate-800 dark:text-slate-200"
                   >
                     <item.icon className="h-4 w-4" />
                   </a>
@@ -88,48 +94,55 @@ export function RightSidebar() {
                 ))}
               </div>
             )}
-          </div>
-        </section>
+          </Card.Content>
+        </Card>
 
         {/* Mastodon Feed */}
         <MastodonFeed />
 
         {tags.length > 0 && (
-          <section className="motion-card rounded-xl border bg-white px-4 py-3 shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100">
-            <h2 className="type-small flex items-center gap-2 font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400">
-              <FiTrendingUp className="h-3 w-3 text-orange-400" />
-              熱門標籤
-            </h2>
-            <div className="mt-2 flex flex-wrap gap-2 text-base">
-              {tags.map(({ tag, slug, count }) => {
-                let sizeClass = '';
-                if (count >= 5) sizeClass = 'font-semibold';
-                else if (count >= 3) sizeClass = 'font-medium';
+          <Card className="motion-card rounded-xl border px-4 py-3 dark:border-slate-800">
+            <Card.Header className="p-0">
+              <Card.Title className="type-small flex items-center gap-2 font-semibold uppercase tracking-[0.35em] text-slate-500 dark:text-slate-400">
+                <FiTrendingUp className="h-3 w-3 text-orange-400" />
+                熱門標籤
+              </Card.Title>
+            </Card.Header>
+            <Card.Content className="p-0">
+              <div className="mt-2 flex flex-wrap gap-2 text-base">
+                {tags.map(({ tag, slug, count }) => {
+                  let fontWeight = 'font-normal';
+                  if (count >= 5) fontWeight = 'font-semibold';
+                  else if (count >= 3) fontWeight = 'font-medium';
 
-                return (
-                  <Link
-                    key={tag}
-                    href={`/tags/${slug}`}
-                    className={`${sizeClass} tag-chip rounded-full bg-accent-soft px-2 py-0.5 text-accent-textLight transition hover:bg-accent hover:text-white dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700`}
-                  >
-                    {tag}
-                  </Link>
-                );
-              })}
-            </div>
-            <div className="mt-3 flex items-center justify-between type-small text-slate-500 dark:text-slate-400">
+                  return (
+                    <Link key={tag} href={`/tags/${slug}`}>
+                      <Chip
+                        color="accent"
+                        variant="soft"
+                        size="sm"
+                        className={`${fontWeight} tag-chip cursor-pointer rounded-full bg-[var(--color-accent-soft)] px-2 py-0.5 text-[var(--color-accent-text-light)] transition hover:bg-[var(--color-accent)] hover:text-white dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700`}
+                      >
+                        {tag}
+                      </Chip>
+                    </Link>
+                  );
+                })}
+              </div>
+            </Card.Content>
+            <Card.Footer className="mt-3 flex items-center justify-between p-0 type-small text-slate-500 dark:text-slate-400">
               <span className="inline-flex items-center gap-1">
                 <FiArrowRight className="h-3 w-3" />
                 一覽所有標籤
               </span>
               <Link
                 href="/tags"
-                className="motion-link text-accent-textLight hover:text-accent dark:text-accent-textDark"
+                className="motion-link text-[var(--color-accent-text-light)] hover:text-[var(--color-accent)] dark:text-[var(--color-accent-text-dark)]"
               >
                 前往
               </Link>
-            </div>
-          </section>
+            </Card.Footer>
+          </Card>
         )}
       </div>
     </aside>