kairos/apps/server/src/routes/_protected/bookmarks.tsx

import type { QueryClient } from '@tanstack/react-query'
import { useSuspenseQuery } from '@tanstack/react-query'
import { createFileRoute } from '@tanstack/react-router'
import { Pencil, X } from 'lucide-react'
import { AnimatePresence } from 'motion/react'
import * as motion from 'motion/react-client'
import { useEffect, useState } from 'react'
import { orpc } from '@/client/orpc'
import { Button } from '@/components/ui/button'
import { BookmarkCard } from '@/modules/bookmarks/components/BookmarkCard'
import { BookmarkManager } from '@/modules/bookmarks/components/BookmarkManager'
import { CategoryManager } from '@/modules/bookmarks/components/CategoryManager'

export const Route = createFileRoute('/_protected/bookmarks' as never)({
  loader: async ({ context }: { context: { queryClient: QueryClient } }) => {
    await context.queryClient.fetchQuery(orpc.bookmarks.category.list.queryOptions())
  },
  component: BookmarksPage,
})

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.05, delayChildren: 0.08 },
  },
}

const itemVariants = {
  hidden: { opacity: 0, y: 10 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.35, ease: [0.25, 0.46, 0.45, 0.94] as const } },
}

function BookmarksPage() {
  const { data: categories } = useSuspenseQuery(orpc.bookmarks.category.list.queryOptions())
  const [editing, setEditing] = useState(false)
  const [selectedCategoryId, setSelectedCategoryId] = useState<string | null>(null)

  useEffect(() => {
    if (selectedCategoryId === null && categories.length > 0) {
      setSelectedCategoryId(categories[0]?.id ?? null)
    }
  }, [categories, selectedCategoryId])

  useEffect(() => {
    if (selectedCategoryId && !categories.some((c: { id: string }) => c.id === selectedCategoryId)) {
      setSelectedCategoryId(categories[0]?.id ?? null)
    }
  }, [categories, selectedCategoryId])

  const selectedCategory = categories.find((c: { id: string }) => c.id === selectedCategoryId)

  return (
    <div className="flex min-h-0 flex-1 flex-col px-6 pb-6">
      <div className="mb-6 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">{editing ? '书签管理' : '书签导航'}</h1>
          <p className="mt-1 text-sm text-muted-foreground">
            {editing ? '管理你的书签分类、图标和排序' : '常用链接和网站的快速导航'}
          </p>
        </div>
        <Button variant={editing ? 'default' : 'outline'} size="sm" onClick={() => setEditing(!editing)}>
          {editing ? (
            <>
              <X className="size-4" />
              完成
            </>
          ) : (
            <>
              <Pencil className="size-4" />
              编辑
            </>
          )}
        </Button>
      </div>

      <AnimatePresence mode="wait">
        {editing ? (
          <motion.div
            key="edit"
            initial={{ opacity: 0, scale: 0.98 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.98 }}
            transition={{ duration: 0.25, ease: [0.25, 0.46, 0.45, 0.94] as const }}
            className="flex min-h-0 flex-1 gap-6"
          >
            <div className="w-80 shrink-0">
              <CategoryManager
                categories={categories}
                selectedCategoryId={selectedCategoryId}
                onSelectCategory={setSelectedCategoryId}
              />
            </div>
            <div className="min-w-0 flex-1">
              {selectedCategory ? (
                <BookmarkManager category={selectedCategory} />
              ) : (
                <div className="flex h-full items-center justify-center rounded-xl border border-dashed text-sm text-muted-foreground">
                  请选择一个分类开始管理书签
                </div>
              )}
            </div>
          </motion.div>
        ) : (
          <motion.div
            key="view"
            variants={containerVariants}
            initial="hidden"
            animate="visible"
            exit={{ opacity: 0 }}
            className="min-h-0 flex-1 overflow-y-auto"
          >
            {categories.length === 0 ? (
              <motion.div
                variants={itemVariants}
                className="flex flex-col items-center justify-center py-32 text-center"
              >
                <div className="mb-4 flex size-16 items-center justify-center rounded-2xl bg-muted">
                  <span className="text-2xl">✨</span>
                </div>
                <h3 className="mb-2 text-lg font-medium">还没有任何书签</h3>
                <p className="mb-6 text-sm text-muted-foreground">点击右上角「编辑」按钮添加你的第一个书签</p>
                <Button onClick={() => setEditing(true)}>
                  <Pencil className="size-4" />
                  开始添加
                </Button>
              </motion.div>
            ) : (
              <div className="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3">
                {categories.map(
                  (category: {
                    id: string
                    name: string
                    bookmarks: Array<{ id: string; name: string; url: string; icon: string | null }>
                  }) => (
                    <motion.div key={category.id} variants={itemVariants} className="flex flex-col gap-3.5">
                      <h2 className="px-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                        {category.name}
                      </h2>
                      {category.bookmarks.length === 0 ? (
                        <div className="rounded-xl border border-dashed py-6 text-center">
                          <span className="text-sm text-muted-foreground">暂无书签</span>
                        </div>
                      ) : (
                        <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 md:grid-cols-1 xl:grid-cols-2">
                          {category.bookmarks.map((bookmark) => (
                            <BookmarkCard key={bookmark.id} bookmark={bookmark} />
                          ))}
                        </div>
                      )}
                    </motion.div>
                  ),
                )}
              </div>
            )}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}