CodeFox-Repo · Sma1lboy · Mar 2, 2025 · Feb 28, 2025 · Feb 28, 2025 · Feb 28, 2025
diff --git a/frontend/package.json b/frontend/package.json
@@ -42,7 +42,7 @@
     "clsx": "^2.1.1",
     "codefox-common": "workspace:*",
     "emoji-mart": "^5.6.0",
-    "framer-motion": "^11.5.6",
+    "framer-motion": "^11.18.2",
     "graphql": "^16.9.0",
     "graphql-ws": "^5.16.0",
     "lucide-react": "^0.445.0",

diff --git a/frontend/public/lightbulb.svg b/frontend/public/lightbulb.svg
diff --git a/frontend/src/app/(main)/layout.tsx b/frontend/src/app/(main)/layout.tsx
@@ -0,0 +1,19 @@
+import type { Metadata, Viewport } from 'next';
+import { Inter } from 'next/font/google';
+import NavLayout from '@/components/root/navLayout';
+
+export const metadata: Metadata = {
+  title: 'Codefox - The best dev project generator',
+  description: 'The best dev project generator',
+};
+
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <NavLayout>{children}</NavLayout>;
+}
diff --git a/frontend/src/app/page.tsx → frontend/src/app/(main)/page.tsx b/frontend/src/app/page.tsx → frontend/src/app/(main)/page.tsx
@@ -42,7 +42,7 @@ export default function HomePage() {
   };
 
   return (
-    <>
+    <div className="pt-32 pb-24 px-6 ">
       <motion.div
         className="flex flex-col items-center"
         initial={{ opacity: 0, y: 20 }}
@@ -96,6 +96,22 @@ export default function HomePage() {
           setShowAuthChoice(false);
         }}
       />
-    </>
+
+      {/* Add this to your global CSS for the subtle pulse animation */}
+      <style jsx global>{`
+        .animate-pulse-subtle {
+          animation: pulse-subtle 2s infinite;
+        }
+        @keyframes pulse-subtle {
+          0%,
+          100% {
+            opacity: 1;
+          }
+          50% {
+            opacity: 0.85;
+          }
+        }
+      `}</style>
+    </div>
   );
 }
diff --git a/frontend/src/app/chat/layout.tsx b/frontend/src/app/chat/layout.tsx
@@ -1,3 +1,4 @@
+//frontend/src/app/chat/layout.tsx
 import ChatLayout from '../../components/chat/chat-layout';
 
 export default function Layout({

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,8 +1,10 @@
+//frontend/src/app/layout.tsx
 import type { Metadata, Viewport } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
 import { BaseProviders } from '@/providers/BaseProvider';
 import NavLayout from '@/components/root/navLayout';
+import RootLayout from '@/components/root/root-layout';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -18,17 +20,13 @@ export const viewport: Viewport = {
   userScalable: false,
 };
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
         <BaseProviders>
           <div className="min-h-screen w-full bg-gray-50 dark:bg-gray-900 transition-colors">
-            <NavLayout>{children}</NavLayout>
+            <RootLayout>{children}</RootLayout>
           </div>
         </BaseProviders>
       </body>

diff --git a/frontend/src/components/chat/chat-layout.tsx b/frontend/src/components/chat/chat-layout.tsx
@@ -1,13 +1,8 @@
 'use client';
 import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
-import { SidebarProvider } from '@/components/ui/sidebar';
-import { ChatSideBar } from '@/components/sidebar';
-
 import ProjectModal from '@/components/chat/project-modal';
 import { useQuery } from '@apollo/client';
-import { useChatList } from '@/hooks/useChatList';
 import { GET_USER_PROJECTS } from '@/graphql/request';
 import { useAuthContext } from '@/providers/AuthProvider';
 import { ProjectProvider } from './code-engine/project-context';
@@ -17,113 +12,32 @@ export default function ChatLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const { isAuthorized, isChecking } = useAuthContext();
+  const { isAuthorized } = useAuthContext();
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isCollapsed, setIsCollapsed] = useState(false);
-  const [isMobile, setIsMobile] = useState(false);
-
-  const defaultLayout = [25, 75]; // [sidebar, main]
-  const navCollapsedSize = 5;
 
   const { refetch } = useQuery(GET_USER_PROJECTS);
-  const {
-    chats,
-    loading,
-    error,
-    chatListUpdated,
-    setChatListUpdated,
-    refetchChats,
-  } = useChatList();
-
   const router = useRouter();
 
   useEffect(() => {
-    if (isChecking || !isAuthorized) {
+    if (!isAuthorized) {
       router.push('/');
     }
-  }, [isChecking, isAuthorized, router]);
-
-  useEffect(() => {
-    document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(
-      isCollapsed
-    )}; path=/; max-age=604800`;
-  }, [isCollapsed]);
-
-  useEffect(() => {
-    const checkScreenWidth = () => {
-      setIsMobile(window.innerWidth <= 1023);
-    };
-    checkScreenWidth();
-    window.addEventListener('resize', checkScreenWidth);
-    return () => window.removeEventListener('resize', checkScreenWidth);
-  }, []);
-
-  if (isChecking) {
-    return (
-      <div className="flex h-screen items-center justify-center">
-        Loading...
-      </div>
-    );
-  }
+  }, [isAuthorized, router]);
 
   if (!isAuthorized) {
     return null;
   }
 
   return (
-    <ProjectProvider>
-      <main className="flex h-[calc(100dvh)] flex-col items-center">
-        <ResizablePanelGroup
-          direction="horizontal"
-          autoSaveId="main-layout"
-          onLayout={(sizes: number[]) => {
-            const sidebarSize = sizes[0];
-            const isNowCollapsed = sidebarSize < 10;
-            setIsCollapsed(isNowCollapsed);
-
-            if (isNowCollapsed && sizes.length > 1) {
-              const newSizes = [navCollapsedSize, 100 - navCollapsedSize];
-              document.cookie = `react-resizable-panels:layout=${JSON.stringify(
-                newSizes
-              )}; path=/; max-age=604800`;
-              return newSizes;
-            }
-
-            document.cookie = `react-resizable-panels:layout=${JSON.stringify(
-              sizes
-            )}; path=/; max-age=604800`;
-            return sizes;
-          }}
-          className="h-screen items-stretch w-full"
-        >
-          <SidebarProvider>
-            <ProjectModal
-              isOpen={isModalOpen}
-              onClose={() => setIsModalOpen(false)}
-              refetchProjects={refetch}
-            />
-            <ChatSideBar
-              setIsModalOpen={setIsModalOpen}
-              isCollapsed={isCollapsed}
-              setIsCollapsed={setIsCollapsed}
-              isMobile={isMobile}
-              chatListUpdated={chatListUpdated}
-              setChatListUpdated={setChatListUpdated}
-              chats={chats}
-              loading={loading}
-              error={error}
-              onRefetch={refetchChats}
-            />
-
-            <ResizablePanel
-              className="h-full w-full flex justify-center"
-              defaultSize={defaultLayout[1]}
-            >
-              {children}
-            </ResizablePanel>
-          </SidebarProvider>
-        </ResizablePanelGroup>
-      </main>
-    </ProjectProvider>
+    <main className="flex h-[calc(100dvh)] flex-col items-center">
+      <ProjectProvider>
+        <ProjectModal
+          isOpen={isModalOpen}
+          onClose={() => setIsModalOpen(false)}
+          refetchProjects={refetch}
+        />
+        <div className="w-full h-full">{children}</div>
+      </ProjectProvider>
+    </main>
   );
 }
diff --git a/frontend/src/components/chat/chat-list.tsx b/frontend/src/components/chat/chat-list.tsx
@@ -10,7 +10,7 @@ import CodeDisplayBlock from '../code-display-block';
 import { Message } from '../../const/MessageType';
 import { Button } from '../ui/button';
 import { Pencil } from 'lucide-react';
-import { useAuth } from '@/hooks/useAuth';
+import { useAuthContext } from '@/providers/AuthProvider';
 
 interface ChatListProps {
   messages: Message[];
@@ -26,7 +26,7 @@ export default function ChatList({
   onMessageEdit,
 }: ChatListProps) {
   const bottomRef = useRef<HTMLDivElement>(null);
-  const { user } = useAuth();
+  const { user } = useAuthContext();
 
   const [editingMessageId, setEditingMessageId] = React.useState<string | null>(
     null

diff --git a/frontend/src/components/chat/code-engine/project-context.tsx b/frontend/src/components/chat/code-engine/project-context.tsx
@@ -8,7 +8,6 @@ import React, {
   useEffect,
 } from 'react';
 import { useLazyQuery, useMutation, useQuery } from '@apollo/client';
-import { useAuth } from '@/hooks/useAuth';
 import {
   CREATE_PROJECT,
   FORK_PROJECT,
@@ -49,7 +48,7 @@ export const ProjectContext = createContext<ProjectContextType | undefined>(
 
 export function ProjectProvider({ children }: { children: ReactNode }) {
   const router = useRouter();
-  const { validateToken } = useAuth();
+
   const [projects, setProjects] = useState<Project[]>([]);
   const [curProject, setCurProject] = useState<Project | undefined>(undefined);
   const [filePath, setFilePath] = useState<string | null>(null);