organize directory

package.json

@@ -41,6 +41,7 @@
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.2.0",
     "@types/react-scroll-to-bottom": "^4.2.1",
     "@types/react-syntax-highlighter": "^15.5.7",
     "@types/uuid": "^9.0.3",

prettier.config.js

@@ -1,3 +1,25 @@
 module.exports = {
-  plugins: ["prettier-plugin-tailwindcss"],
+  importOrder: [
+    "^(react/(.*)$)|^(react$)",
+    "^(next/(.*)$)|^(next$)",
+    "<THIRD_PARTY_MODULES>",
+    "",
+    "^types$",
+    "^@local/(.*)$",
+    "^@/config/(.*)$",
+    "^@/lib/(.*)$",
+    "^@/components/(.*)$",
+    "^@/styles/(.*)$",
+    "^[./]",
+  ],
+  importOrderSeparation: false,
+  importOrderSortSpecifiers: true,
+  importOrderBuiltinModulesToTop: true,
+  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
+  importOrderMergeDuplicateImports: true,
+  importOrderCombineTypeAndValueImports: true,
+  plugins: [
+    "prettier-plugin-tailwindcss",
+    "@trivago/prettier-plugin-sort-imports",
+  ],
 };

src/app/c/[chatId]/page.tsx → src/app/(routes)/c/[chatId]/page.tsx

@@ -1,33 +1,32 @@
 "use client";
-import Header from "../../CommonHeader";
-import PromptForm from "../../components/PromptForm";
-import Help from "../../components/Help";
+
+import { useContext, useLayoutEffect, useRef } from "react";
+import CommonHeader from "@app/_components/elements/CommonHeader";
+import Help from "@app/_components/elements/Help";
+import MessageItem from "@app/_components/elements/MessageItem";
+import PromptForm from "@app/_components/elements/PromptForm";
+import PromptHelpers from "@app/_components/elements/PromptHelpers";
+import PromptingManageButton from "@app/_components/elements/PromptingManageButton";
+import SideMenu from "@app/_components/elements/SideMenu";
+import SpHeader from "@app/_components/elements/SpHeader";
+import { SvgIcon } from "@app/_components/elements/SvgIcon";
+import { IsOpenSideMenuContext } from "@app/_components/providers/IsOpenSideMenuProvider";
 import {
   ASSIGNABLE_MODEL,
-  CHAT_TITLE_PREFIX,
   CreateMessageRole,
   IMessage,
   StreamChatDTO,
-} from "../../../constants";
-import React, { useContext, useLayoutEffect, useRef, useState } from "react";
-import { useStreamChatCompletion } from "../../hooks/useStreamChatCompletion";
-import { v4 as uuidv4 } from "uuid";
-import PromptHelpers from "../../components/PromptHelpers";
-import { twMerge } from "tailwind-merge";
-import MessageItem from "../../components/MessageItem";
-import PromptingManageButton from "../../components/PromptingManageButton";
-import { useSession } from "next-auth/react";
-import useCreateMessage from "../../hooks/messages/useCreateMessage";
-import { useFetchMessages } from "../../hooks/messages/useFetchMessages";
-import useDeleteMessage from "../../hooks/messages/useDeleteMessage";
-import { SvgIcon } from "../../components/SvgIcon";
-import SideMenu from "../../components/SideMenu";
+} from "@app/_config";
+import useUpdateChat from "@app/_hooks/chats/useUpdateChat";
+import useCreateMessage from "@app/_hooks/messages/useCreateMessage";
+import useDeleteMessage from "@app/_hooks/messages/useDeleteMessage";
+import { useFetchMessages } from "@app/_hooks/messages/useFetchMessages";
+import { useStreamChatCompletion } from "@app/_hooks/useStreamChatCompletion";
+import { createChatTitle } from "@app/_utils/createChatTitle";
 import { Transition } from "@headlessui/react";
-import useUpdateChat from "../../hooks/chats/useUpdateChat";
-import { createChatTitle } from "../../utils/createChatTitle";
-import { IsOpenSideMenuContext } from "../../components/providers/IsOpenSideMenuProvider";
-import SpHeader from "../../components/SpHeader";
-import CommonHeader from "../../CommonHeader";
+import { useSession } from "next-auth/react";
+import { twMerge } from "tailwind-merge";
+import { v4 as uuidv4 } from "uuid";
 
 export default function Page({ params }: { params: { chatId: string } }) {
   const streamChatCompletionMutation = useStreamChatCompletion();

src/app/layout.tsx → src/app/(routes)/layout.tsx

@@ -1,12 +1,12 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./global.css";
-import ThemeProvider from "./components/providers/ThemeProvider";
 import { Suspense } from "react";
+import type { Metadata } from "next";
 import dynamic from "next/dynamic";
-import AuthProvider from "./components/providers/AuthProvider";
-import QueryClientProvider from "./components/providers/QueryClientProvider";
-import IsOpenSideMenuProvider from "./components/providers/IsOpenSideMenuProvider";
+import { Inter } from "next/font/google";
+import AuthProvider from "@app/_components/providers/AuthProvider";
+import IsOpenSideMenuProvider from "@app/_components/providers/IsOpenSideMenuProvider";
+import QueryClientProvider from "@app/_components/providers/QueryClientProvider";
+import ThemeProvider from "@app/_components/providers/ThemeProvider";
+import "@app/_styles/global.css";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -16,7 +16,7 @@ export const metadata: Metadata = {
 };
 
 const DisableSsrWrapper = dynamic(
-  () => import("./components/DisableSsrWrapper"),
+  () => import("@app/_components/elements/DisableSsrWrapper"),
   { ssr: false },
 );
 

src/app/page.tsx → src/app/(routes)/page.tsx

@@ -1,7 +1,7 @@
-import { getServerSession } from "next-auth";
-import { authOptions } from "./api/auth/[...nextauth]/route";
 import { redirect } from "next/navigation";
-import fetchChats from "./utils/fetchChat";
+import fetchChats from "@app/_utils/fetchChat";
+import { authOptions } from "@app/api/auth/[...nextauth]/route";
+import { getServerSession } from "next-auth";
 
 export default async function Page({ params }: { params: { chatId: string } }) {
   const session = await getServerSession(authOptions);

src/app/signin/page.tsx → src/app/(routes)/signin/page.tsx

@@ -1,6 +1,7 @@
 "use client";
+
+import { SvgIcon } from "@app/_components/elements/SvgIcon";
 import { signIn, useSession } from "next-auth/react";
-import { SvgIcon } from "../components/SvgIcon";
 
 const Page = () => {
   return (

src/app/components/ChatList.tsx → src/app/_components/elements/ChatList.tsx

@@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge";
 import { SvgIcon } from "./SvgIcon";
 import { Chat } from "@prisma/client";
 import { listItemStyle } from "./SideMenu";
-import { useFetchChats } from "../hooks/chats/useFetchChats";
+import { useFetchChats } from "@app/_hooks/chats/useFetchChats";
 
 type Props = {
   userId: string;

src/app/CommonHeader.tsx → src/app/_components/elements/CommonHeader.tsx

@@ -1,6 +1,7 @@
 "use client";
+
 import Image from "next/image";
-import { SvgIcon } from "./components/SvgIcon";
+import { SvgIcon } from "@app/_components/elements/SvgIcon";
 
 type Props = {
   hasMessageInCurrentChat: boolean;

src/app/components/MessageItem.tsx → src/app/_components/elements/MessageItem.tsx

@@ -1,11 +1,12 @@
 "use client";
+
 import React from "react";
+import Image from "next/image";
 import { MarkdownRenderer } from "./MarkdownRenderer";
-import { twMerge } from "tailwind-merge";
 import { SvgIcon } from "./SvgIcon";
-import { useSession } from "next-auth/react";
-import Image from "next/image";
 import { Message } from "@prisma/client";
+import { useSession } from "next-auth/react";
+import { twMerge } from "tailwind-merge";
 
 type Props = {
   message: Pick<Message, "id" | "role" | "content" | "chatId">;

src/app/components/PromptForm.tsx → src/app/_components/elements/PromptForm.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { useRef, useState } from "react";
-import useAutosizeTextArea from "../hooks/useAutosizeTextArea";
-import { twMerge } from "tailwind-merge";
 import { SvgIcon } from "./SvgIcon";
+import useAutosizeTextArea from "@app/_hooks/useAutosizeTextArea";
+import { twMerge } from "tailwind-merge";
 
 type Props = {
   onSubmit: (content: string) => void;

src/app/components/SideMenu.tsx → src/app/_components/elements/SideMenu.tsx

@@ -1,12 +1,13 @@
 "use client";
+
 import React, { Suspense, useContext } from "react";
-import { twMerge } from "tailwind-merge";
-import { SvgIcon } from "./SvgIcon";
-import { useSession } from "next-auth/react";
 import Image from "next/image";
 import ChatList from "./ChatList";
-import { IsOpenSideMenuContext } from "./providers/IsOpenSideMenuProvider";
-import useCreateChat from "../hooks/chats/useCreateChat";
+import { SvgIcon } from "./SvgIcon";
+import { IsOpenSideMenuContext } from "@app/_components/providers/IsOpenSideMenuProvider";
+import useCreateChat from "@app/_hooks/chats/useCreateChat";
+import { useSession } from "next-auth/react";
+import { twMerge } from "tailwind-merge";
 
 type Props = {
   isOpen: boolean;