Feat optimzation render speed (#39)

- optimiztion speed
- prevent see anything in auth provider 


https://github.com/user-attachments/assets/d3f4e2e5-1147-43e3-9b04-1af703979aed



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

- **New Features**
- Introduced `LoadingPage` component for a full-screen loading overlay
with theme adaptability.
- Added `SideBarItem` component for managing chat functionalities in the
sidebar.
- New `ScrollArea` and `ScrollBar` components for customizable scroll
areas.
- Introduced `Separator` component for rendering horizontal and vertical
separators.
	- Added `AuthProvider` for managing user authentication state.
	- New `BaseProviders` component to wrap essential context providers.

- **Enhancements**
	- Improved `ChatList` component with message editing capabilities.
	- Enhanced `ChatTopbar` for a simplified model selection interface.
- Refactored `Sidebar` to utilize props for chat management, improving
performance.

- **Bug Fixes**
	- Fixed styling and transition effects on the `LoginPage` component.
  
- **Chores**
- Updated various package dependencies for improved functionality and
performance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: Sma1lboy

.eslintignore

@@ -3,4 +3,4 @@ dist
 coverage
 .github
 .husky
-*.config.js
+*.config.js

backend/package.json

@@ -5,7 +5,7 @@
   "author": "",
   "private": true,
   "license": "UNLICENSED",
-  "packageManager": "pnpm@9.1.2",
+  "packageManager": "pnpm@9.1.0",
   "scripts": {
     "build": "nest build",
     "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",

frontend/.eslintrc.json

@@ -1,4 +1,8 @@
 {
   "extends": "next/core-web-vitals",
-  "ignorePatterns": ["src/graphql/type.ts", "src/graphql/**/*"]
+  "ignorePatterns": [
+    "src/graphql/type.ts",
+    "src/graphql/**/*",
+    "src/components/ui/**/*"
+  ]
 }

frontend/next.config.mjs

@@ -1,29 +1,28 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   output: 'standalone',
+  reactStrictMode: true,
   webpack: (config, { isServer }) => {
-        // Fixes npm packages that depend on `fs` module
-        if (!isServer) {
-          config.resolve.fallback = {
-            ...config.resolve.fallback, // if you miss it, all the other options in fallback, specified
-              // by next.js will be dropped. Doesn't make much sense, but how it is
-            fs: false, // the solution
-            module: false,
-            perf_hooks: false,
-          };
-        }
-    
-        return config
-      },
-      typescript: {
-        // !! WARN !!
-        // Dangerously allow production builds to successfully complete even if
-        // your project has type errors.
-        // !! WARN !!
-        ignoreBuildErrors: true,
-      },
-};
-
+    // Fixes npm packages that depend on `fs` module
+    if (!isServer) {
+      config.resolve.fallback = {
+        ...config.resolve.fallback, // if you miss it, all the other options in fallback, specified
+        // by next.js will be dropped. Doesn't make much sense, but how it is
+        fs: false, // the solution
+        module: false,
+        perf_hooks: false,
+      };
+    }
 
+    return config;
+  },
+  typescript: {
+    // !! WARN !!
+    // Dangerously allow production builds to successfully complete even if
+    // your project has type errors.
+    // !! WARN !!
+    ignoreBuildErrors: true,
+  },
+};
 
 export default nextConfig;

frontend/package.json

@@ -27,8 +27,9 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
-    "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@types/dom-speech-recognition": "^0.0.4",

frontend/public/codefox.png

@@ -1,4 +1,5 @@
 'use client';
+
 import React, { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -18,6 +19,12 @@ const LoginPage = () => {
     password: '',
   });
   const [error, setError] = useState<string | null>(null);
+  const [mounted, setMounted] = useState(false);
+  const router = useRouter();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
@@ -27,7 +34,6 @@ const LoginPage = () => {
     }));
   };
 
-  const router = useRouter();
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError(null);
@@ -57,16 +63,21 @@ const LoginPage = () => {
 
   return (
     <div className="flex items-center justify-center min-h-screen bg-light-background dark:bg-dark-background">
-      <div className="w-full max-w-md px-8">
+      <div
+        className={`w-full max-w-md px-8 transition-all duration-1000 ease-in-out
+          ${mounted ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'}`}
+      >
         <div className="space-y-2 mb-8">
-          <h1 className="text-2xl font-semibold">Sign In</h1>
+          <h1 className="text-2xl font-semibold text-light-text-primary dark:text-dark-text-primary">
+            Sign In
+          </h1>
           <p className="text-gray-500">
             Enter credentials to login to your account
           </p>
         </div>
 
         {error && (
-          <div className="mb-4 p-3 text-sm text-red-500 bg-red-50 rounded-lg">
+          <div className="mb-4 p-3 text-sm text-red-500 bg-red-50 dark:bg-red-900/20 rounded-lg">
             {error}
           </div>
         )}
@@ -83,7 +94,10 @@ const LoginPage = () => {
               value={formData.username}
               onChange={handleChange}
               required
-              className="h-12 rounded-lg border-gray-200 focus:border-gray-300 focus:ring-0"
+              className="h-12 rounded-lg border-light-border dark:border-dark-border 
+                       bg-light-surface dark:bg-dark-surface
+                       text-light-text-primary dark:text-dark-text-primary
+                       focus:outline-none focus:ring-2 focus:ring-primary-400 dark:focus:ring-primary-500 focus:border-transparent"
               placeholder="Enter your username"
               disabled={isLoading}
             />
@@ -100,15 +114,19 @@ const LoginPage = () => {
               value={formData.password}
               onChange={handleChange}
               required
-              className="h-12 rounded-lg border-gray-200 focus:border-gray-300 focus:ring-0"
+              className="h-12 rounded-lg border-light-border dark:border-dark-border 
+                       bg-light-surface dark:bg-dark-surface
+                       text-light-text-primary dark:text-dark-text-primary
+                       focus:outline-none focus:ring-2 focus:ring-primary-400 dark:focus:ring-primary-500 focus:border-transparent"
               placeholder="Enter your password"
               disabled={isLoading}
             />
           </div>
 
           <Button
             type="submit"
-            className="w-full h-12 bg-primary-500 hover:bg-primary-600 text-white rounded-lg font-medium"
+            className="w-full h-12 bg-primary-500 hover:bg-primary-600 dark:bg-primary-600 dark:hover:bg-primary-700 
+                     text-white rounded-lg font-medium"
             disabled={isLoading}
           >
             {isLoading ? 'Signing In...' : 'Sign In'}

frontend/public/codefox.svg

@@ -0,0 +1,98 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@/components/ui/resizable';
+import { cn } from '@/lib/utils';
+import { usePathname } from 'next/navigation';
+import Sidebar from '@/components/sidebar';
+import { useChatList } from '../hooks/useChatList';
+
+export default function MainLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const defaultLayout = [30, 160];
+  const navCollapsedSize = 10;
+
+  const pathname = usePathname();
+  const currentChatId = pathname.split('/')[1] || '';
+
+  const {
+    chats,
+    loading,
+    error,
+    chatListUpdated,
+    setChatListUpdated,
+    refetchChats,
+  } = useChatList();
+
+  useEffect(() => {
+    const checkScreenWidth = () => {
+      setIsMobile(window.innerWidth <= 1023);
+    };
+    checkScreenWidth();
+    window.addEventListener('resize', checkScreenWidth);
+    return () => {
+      window.removeEventListener('resize', checkScreenWidth);
+    };
+  }, []);
+
+  return (
+    <main className="flex h-[calc(100dvh)] flex-col items-center">
+      <ResizablePanelGroup
+        direction="horizontal"
+        onLayout={(sizes: number[]) => {
+          document.cookie = `react-resizable-panels:layout=${JSON.stringify(sizes)}`;
+        }}
+        className="h-screen items-stretch"
+      >
+        <ResizablePanel
+          defaultSize={defaultLayout[0]}
+          collapsedSize={navCollapsedSize}
+          collapsible={true}
+          minSize={isMobile ? 0 : 12}
+          maxSize={isMobile ? 0 : 16}
+          onCollapse={() => {
+            setIsCollapsed(true);
+            document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(true)}`;
+          }}
+          onExpand={() => {
+            setIsCollapsed(false);
+            document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(false)}`;
+          }}
+          className={cn(
+            isCollapsed
+              ? 'min-w-[50px] md:min-w-[70px] transition-all duration-300 ease-in-out'
+              : 'hidden md:block'
+          )}
+        >
+          <Sidebar
+            isCollapsed={isCollapsed}
+            isMobile={isMobile}
+            currentChatId={currentChatId}
+            chatListUpdated={chatListUpdated}
+            setChatListUpdated={setChatListUpdated}
+            chats={chats}
+            loading={loading}
+            error={error}
+            onRefetch={refetchChats}
+          />
+        </ResizablePanel>
+        <ResizableHandle className={cn('hidden md:flex')} withHandle />
+        <ResizablePanel
+          className="h-full w-full flex justify-center"
+          defaultSize={defaultLayout[1]}
+        >
+          {children}
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </main>
+  );
+}