chore: upgrade from remix to react router v7

.gitignore

@@ -34,6 +34,9 @@ _worker.bundle
 Modelfile
 modelfiles
 
+# react router
+.react-router/
+
 # docs ignore
 site
 

app/.client/components/Home.tsx

@@ -1,28 +1,27 @@
 import * as Tooltip from '@radix-ui/react-tooltip';
-import { useNavigate } from '@remix-run/react';
 import { generateId } from 'ai';
 import classNames from 'classnames';
 import { AnimatePresence, motion, useAnimate } from 'framer-motion';
 import { startTransition, useState } from 'react';
+import { useNavigate, useNavigation } from 'react-router';
 import { ChatTextarea } from './chat/ChatTextarea';
 import { ExamplePrompts } from './chat/ExamplePrompts';
 import FilePreview from './chat/FilePreview';
 import { ScreenshotStateManager } from './chat/ScreenshotStateManager';
 
 export function Home({ className }: { className?: string }) {
   const navigate = useNavigate();
+  const navigation = useNavigation();
+  const isNavigating = Boolean(navigation.location);
 
   const [animationScope] = useAnimate();
   const [uploadFiles, setUploadFiles] = useState<File[]>([]);
-  const [isNavigating, setIsNavigating] = useState(false);
 
   const handleSendMessage = (message?: string) => {
     if (!message) {
       return;
     }
 
-    setIsNavigating(true);
-
     const id = generateId();
 
     startTransition(() => {

app/.client/components/auth/AuthButtons.tsx

@@ -1,5 +1,5 @@
-import { useNavigate } from '@remix-run/react';
 import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
 import { Button } from '~/.client/components/ui/Button';
 import { useAuth } from '~/.client/hooks/useAuth';
 

app/.client/components/chat/Chat.tsx

@@ -1,15 +1,15 @@
+import type { Route } from '.react-router/types/app/routes/+types/chat';
 import { useStore } from '@nanostores/react';
 import * as Tooltip from '@radix-ui/react-tooltip';
-import { useLoaderData, useLocation, useNavigate } from '@remix-run/react';
 import classNames from 'classnames';
 import { useAnimate } from 'framer-motion';
 import { useEffect, useRef, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router';
 import { useSnapScroll } from '~/.client/hooks';
 import { useChatMessage } from '~/.client/hooks/useChatMessage';
 import { aiState, setChatId, setChatStarted } from '~/.client/stores/ai-state';
 import { webBuilderStore } from '~/.client/stores/web-builder';
-import { renderLogger } from '~/.client/utils/logger';
-import type { ChatMessage, ChatWithMessages } from '~/types/chat';
+import type { ChatMessage } from '~/types/chat';
 import { WebBuilder } from '../webbuilder/WebBuilder';
 import styles from './BaseChat.module.scss';
 import ChatAlert from './ChatAlert';
@@ -24,12 +24,11 @@ export type ImageData = {
   base64?: string;
 };
 
-export function Chat({ className }: { className?: string }) {
-  renderLogger.trace('Chat');
+export function Chat({ loaderData, className }: Route.ComponentProps & { className?: string }) {
+  const { id, chat } = loaderData;
+
   const location = useLocation();
   const locationState = location.state as { message?: string; files?: File[] };
-
-  const { id, chat } = useLoaderData<{ id: string; chat?: ChatWithMessages }>();
   const navigate = useNavigate();
   const { showChat } = useStore(aiState);
   const actionAlert = useStore(webBuilderStore.chatStore.alert);

app/.client/components/chat/Messages.tsx

@@ -1,8 +1,8 @@
 import { useStore } from '@nanostores/react';
-import { useLocation } from '@remix-run/react';
 import classNames from 'classnames';
 import type { ForwardedRef } from 'react';
 import { Fragment, forwardRef, memo, useEffect, useMemo, useRef } from 'react';
+import { useLocation } from 'react-router';
 import { toast } from 'sonner';
 import WithTooltip from '~/.client/components/ui/Tooltip';
 import { useAuth } from '~/.client/hooks/useAuth';

app/.client/components/header/HeaderActionButtons.tsx

@@ -1,8 +1,8 @@
 import { useStore } from '@nanostores/react';
-import { useFetcher } from '@remix-run/react';
 import classNames from 'classnames';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
+import { useFetcher } from 'react-router';
 import { toast } from 'sonner';
 import { NetlifyDeploymentLink } from '~/.client/components/chat/NetlifyDeploymentLink.client';
 import useViewport from '~/.client/hooks';

app/.client/components/header/MinimalAvatarDropdown.tsx

@@ -29,7 +29,7 @@ export const MinimalAvatarDropdown = ({}: MinimalAvatarDropdownProps) => {
       return 'Guest User';
     }
 
-    return userInfo.name || userInfo.username;
+    return userInfo.name || userInfo.username || '';
   }, [userInfo]);
 
   const contactInfo = useMemo(() => {

app/.client/components/header/PushToGitHubDialog/index.tsx

@@ -1,12 +1,12 @@
+import type { Route } from '.react-router/types/app/+types/root';
 import { useStore } from '@nanostores/react';
-import { useFetcher, useRouteLoaderData } from '@remix-run/react';
 import { useEffect, useMemo, useState } from 'react';
+import { useFetcher, useRouteLoaderData } from 'react-router';
 import { toast } from 'sonner';
 import { aiState } from '~/.client/stores/ai-state';
 import { githubConnection, updateGitHubConnection } from '~/.client/stores/github';
 import { webBuilderStore } from '~/.client/stores/web-builder';
 import { logger } from '~/.client/utils/logger';
-import type { ConnectionSettings } from '~/root';
 import type { ApiResponse } from '~/types/global';
 import { DialogContainer } from './DialogContainer';
 import { GitHubConnectionView } from './GitHubConnectionView';
@@ -19,7 +19,7 @@ interface PushToGitHubDialogProps {
 }
 
 export function PushToGitHubDialog({ isOpen, onClose }: PushToGitHubDialogProps) {
-  const rootData = useRouteLoaderData<{ connectionSettings?: ConnectionSettings }>('root');
+  const rootData = useRouteLoaderData<Route.ComponentProps['loaderData']>('root');
   const isGitHubConfigured = rootData?.connectionSettings?.githubConnection || false;
   const connection = useStore(githubConnection);
   const { chatId } = useStore(aiState);

app/.client/components/header/connections/GithubConnection.tsx

@@ -1,7 +1,7 @@
 import { useStore } from '@nanostores/react';
-import { useRevalidator } from '@remix-run/react';
 import classNames from 'classnames';
 import { useEffect, useState } from 'react';
+import { useRevalidator } from 'react-router';
 import { toast } from 'sonner';
 import { Button } from '~/.client/components/ui/Button';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '~/.client/components/ui/Collapsible';

app/.client/components/header/connections/NetlifyConnection.tsx

@@ -1,9 +1,10 @@
+import type { Route } from '.react-router/types/app/+types/root';
 import { useStore } from '@nanostores/react';
-import { useFetcher, useRouteLoaderData } from '@remix-run/react';
 import classNames from 'classnames';
 import { formatDistanceToNow } from 'date-fns';
 import { zhCN } from 'date-fns/locale/zh-CN';
 import { useEffect, useMemo, useState } from 'react';
+import { useFetcher, useRouteLoaderData } from 'react-router';
 import { toast } from 'sonner';
 import { Badge } from '~/.client/components/ui/Badge';
 import { Button } from '~/.client/components/ui/Button';
@@ -15,7 +16,6 @@ import {
   updateNetlifyConnection,
 } from '~/.client/stores/netlify';
 import { logger } from '~/.client/utils/logger';
-import type { ConnectionSettings } from '~/root';
 import type { ApiResponse } from '~/types/global';
 import type { NetlifyBuild, NetlifyDeploy, NetlifySite } from '~/types/netlify';
 import ConnectionBorder from './components/ConnectionBorder';
@@ -30,7 +30,7 @@ interface SiteAction {
 }
 
 export default function NetlifyConnection() {
-  const rootData = useRouteLoaderData<{ connectionSettings?: ConnectionSettings }>('root');
+  const rootData = useRouteLoaderData<Route.ComponentProps['loaderData']>('root');
   const connectFetcher = useFetcher<ApiResponse>();
   const settingsFetcher = useFetcher<ApiResponse>();
 
@@ -112,7 +112,7 @@ export default function NetlifyConnection() {
     try {
       setIsActionLoading(true);
 
-      const response = await fetch(`/api/netlify/deploys/${deployId}/${action}`, {
+      const response = await fetch(`/api/netlify/actions/${deployId}/${action}`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',

app/.client/components/header/connections/VercelConnection.tsx

@@ -1,12 +1,12 @@
+import type { Route } from '.react-router/types/app/+types/root';
 import { useStore } from '@nanostores/react';
-import { useFetcher, useRouteLoaderData } from '@remix-run/react';
 import classNames from 'classnames';
 import React, { useEffect, useMemo, useState } from 'react';
+import { useFetcher, useRouteLoaderData } from 'react-router';
 import { toast } from 'sonner';
 import { logStore } from '~/.client/stores/logs';
 import { fetchVercelStats, isFetchingStats, updateVercelConnection, vercelConnection } from '~/.client/stores/vercel';
 import { logger } from '~/.client/utils/logger';
-import type { ConnectionSettings } from '~/root';
 import ConnectionBorder from './components/ConnectionBorder';
 
 interface ApiResponse {
@@ -16,7 +16,7 @@ interface ApiResponse {
 }
 
 export default function VercelConnection() {
-  const rootData = useRouteLoaderData<{ connectionSettings?: ConnectionSettings }>('root');
+  const rootData = useRouteLoaderData<Route.ComponentProps['loaderData']>('root');
   const settingsFetcher = useFetcher<ApiResponse>();
   const connectFetcher = useFetcher<ApiResponse>();
 

app/.client/components/header/connections/_1PanelConnection.tsx

@@ -1,10 +1,11 @@
+import type { Route } from '.react-router/types/app/+types/root';
 import { useStore } from '@nanostores/react';
-import { useFetcher, useRouteLoaderData } from '@remix-run/react';
 import classNames from 'classnames';
 import { format, formatDistanceToNow } from 'date-fns';
 import { zhCN } from 'date-fns/locale/zh-CN';
 import { motion } from 'framer-motion';
 import React, { useEffect, useMemo, useState } from 'react';
+import { useFetcher, useRouteLoaderData } from 'react-router';
 import { toast } from 'sonner';
 import { Badge } from '~/.client/components/ui/Badge';
 import { Button } from '~/.client/components/ui/Button';
@@ -16,7 +17,6 @@ import {
   update1PanelConnection,
 } from '~/.client/stores/1panel';
 import { getChatId } from '~/.client/stores/ai-state';
-import type { ConnectionSettings } from '~/root';
 import type { _1PanelWebsite } from '~/types/1panel';
 import type { ApiResponse } from '~/types/global';
 import ConnectionBorder from './components/ConnectionBorder';
@@ -28,7 +28,7 @@ export default function _1PanelConnection({
   isDeploying: boolean;
   onDeploy: (siteId: number) => void;
 }) {
-  const rootData = useRouteLoaderData<{ connectionSettings?: ConnectionSettings }>('root');
+  const rootData = useRouteLoaderData<Route.ComponentProps['loaderData']>('root');
   const connectFetcher = useFetcher<ApiResponse>();
   const settingsFetcher = useFetcher<ApiResponse>();
 

app/.client/components/sidebar/HistoryItem.client.tsx

@@ -1,6 +1,6 @@
-import { useParams } from '@remix-run/react';
 import classNames from 'classnames';
 import { type ForwardedRef, forwardRef, useCallback } from 'react';
+import { useParams } from 'react-router';
 import { Checkbox } from '~/.client/components/ui/Checkbox';
 import WithTooltip from '~/.client/components/ui/Tooltip';
 import { useEditChatDescription } from '~/.client/hooks';

app/.client/components/ui/Badge.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { cva, type VariantProps } from 'class-variance-authority';
 import classNames from 'classnames';
 import * as React from 'react';

app/.client/components/ui/Collapsible.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 
 const Collapsible = CollapsiblePrimitive.Root;

app/.client/hooks/useAuth.ts

@@ -1,21 +1,11 @@
-import { useFetcher, useRouteLoaderData } from '@remix-run/react';
 /*
  * 用户认证Hook
  */
+import type { Route } from '.react-router/types/app/+types/root';
 import { useCallback, useEffect, useState } from 'react';
+import { useFetcher, useRouteLoaderData } from 'react-router';
 
-export interface UserInfo {
-  sub?: string;
-  name?: string;
-  // 用户登录名，如果未启用用户名登录则可能为空
-  username?: string;
-  picture?: string;
-  // 用户邮箱，可能为空
-  email?: string;
-  // 用户手机号，可能为空
-  phone_number?: string;
-  [key: string]: any;
-}
+type UserInfo = Route.ComponentProps['loaderData']['auth']['userInfo'];
 
 interface AuthUserResponse {
   isAuthenticated: boolean;
@@ -29,7 +19,7 @@ interface AuthUserResponse {
  */
 export function useAuth() {
   // 尝试从根加载器获取数据
-  const rootData = useRouteLoaderData<{ auth?: { isAuthenticated: boolean; userInfo: UserInfo | null } }>('root');
+  const rootData = useRouteLoaderData<Route.ComponentProps['loaderData']>('root');
 
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(rootData?.auth?.isAuthenticated || false);
   const [userInfo, setUserInfo] = useState<UserInfo | null>(rootData?.auth?.userInfo || null);

app/.client/hooks/useChatDeployment.ts

@@ -1,13 +1,14 @@
+import type { Route } from '.react-router/types/app/routes/+types/chat';
 import type { Deployment } from '@prisma/client';
-import { useRouteLoaderData } from '@remix-run/react';
 import { useCallback, useMemo } from 'react';
+import { useRouteLoaderData } from 'react-router';
 import type { DeploymentPlatform } from '~/types/deployment';
 
 /**
  * 获取 Chat 路由中的部署记录
  */
 export function useChatDeployment() {
-  const chatRouteData = useRouteLoaderData<{ deployments?: Deployment[] }>('routes/_layout.chat.$id');
+  const chatRouteData = useRouteLoaderData<Route.ComponentProps['loaderData']>('chat');
   const deployments = useMemo(() => {
     if (chatRouteData?.deployments) {
       return chatRouteData.deployments;

app/.client/hooks/useChatEntries.ts

@@ -1,5 +1,5 @@
-import { useFetcher } from '@remix-run/react';
 import { useCallback, useEffect, useState } from 'react';
+import { useFetcher } from 'react-router';
 import { debounce } from '~/.client/utils/debounce';
 import type { ApiResponse } from '~/types/global';
 

app/.client/hooks/useChatHistory.ts

@@ -1,7 +1,7 @@
-import { useRouteLoaderData, useSearchParams } from '@remix-run/react';
+import type { Route } from '.react-router/types/app/routes/+types/chat';
 import { useCallback } from 'react';
+import { useRouteLoaderData, useSearchParams } from 'react-router';
 import type { Section } from '~/types/actions';
-import type { ChatWithMessages } from '~/types/chat';
 import type { PageAssetData, PageData } from '~/types/pages';
 import { useEditorStorage } from '../persistence/editor';
 
@@ -13,7 +13,7 @@ export interface ProjectData {
 }
 
 export function useChatHistory() {
-  const routeData = useRouteLoaderData<{ chat?: ChatWithMessages }>('routes/_layout.chat.$id');
+  const routeData = useRouteLoaderData<Route.ComponentProps['loaderData']>('chat');
   if (!routeData) {
     return;
   }

app/.client/hooks/useChatMessage.ts

@@ -1,7 +1,7 @@
 import { useChat } from '@ai-sdk/react';
-import { useSearchParams } from '@remix-run/react';
 import { DefaultChatTransport, type FileUIPart } from 'ai';
 import { useEffect, useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router';
 import { toast } from 'sonner';
 import { createScopedLogger } from '~/.client/utils/logger';
 import { pagesToArtifacts } from '~/.client/utils/page';

app/.client/hooks/useChatOperate.ts

@@ -1,5 +1,5 @@
-import { useFetcher, useNavigate } from '@remix-run/react';
 import { useCallback } from 'react';
+import { useFetcher, useNavigate } from 'react-router';
 import { toast } from 'sonner';
 import {
   deleteEditorProject,