Change default port from 3000 to 3333

Updated the main application file to change the default port used when the environment variable PORT is not set from 3000 to 3333. This ensures the backend operates on a different port to avoid conflicts with other services running on port 3000.

apps/backend/src/main.ts

@@ -16,7 +16,7 @@ async function bootstrap() {
 	const globalPrefix = "api";
 	app.setGlobalPrefix(globalPrefix);
 	app.use(helmet());
-	const port = process.env.PORT || 3000;
+	const port = process.env.PORT || 3333;
 
 	const document = SwaggerModule.createDocument(app, config);
 	SwaggerModule.setup("api", app, document);

apps/frontend/src/app/global.css

@@ -31,9 +31,9 @@
   }
 
   .dark {
-    --background: 20 12.91% 14%;
+    --background: 20 14.3% 4.1%;
     --foreground: 0 0% 92.55%;
-    --muted: 12 6.83% 26.64%;
+    --muted: 12 6.5% 15.1%;
     --muted-foreground: 24 5.4% 63.9%;
     --popover: 20 14.3% 4.1%;
     --popover-foreground: 60 9.1% 97.8%;
@@ -41,13 +41,13 @@
     --card-foreground: 0 0% 92.55%;
     --border: 12 6.19% 17.63%;
     --input: 12 6.5% 15.1%;
-    --primary: 60 96.56% 44.61%;
+    --primary: 60 96.08% 41.3%;
     --primary-foreground: 26 90.03% 12.55%;
     --secondary: 12 26.8% 16.18%;
     --secondary-foreground: 0 0% 92.55%;
     --accent: 12 5.7% 26.68%;
     --accent-foreground: 0 0% 92.55%;
-    --destructive: 0 60.83% 54.18%;
+    --destructive: 0 76.12% 38%;
     --destructive-foreground: 0 0% 92.55%;
     --ring: 47.95 95.82% 53.14%;
   }

apps/frontend/src/app/page.tsx

@@ -1,9 +1,13 @@
 "use client"
-import { useState } from 'react';
+import { Dispatch, SetStateAction, useState } from 'react';
 import { Button } from '../components/ui/button';
 import { Home, NotepadTextDashed } from 'lucide-react';
-
+import { NewFileModal } from 'apps/frontend/src/components/new-file-modal';
-
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup
+} from 'apps/frontend/src/components/ui/resizable';
 
 export enum ESubPage {
   Home,
@@ -14,22 +18,47 @@ export default function HomePage() {
   const [currentSubPage, setCurrentSubPage] = useState<ESubPage>(0)
   return (
     <main className="w-full h-full bg-background border border-muted p-2 rounded-md flex flex-row justify-stretch items-stretch">
-      <div className={"w-1/5 h-full p-1 flex flex-col items-center"}>
+      <ResizablePanelGroup
-        <SubPageSelector/>
+        direction="horizontal">
-      </div>
+        <ResizablePanel
-      <SubPage currentSubPage={currentSubPage}/>
+          defaultSize={20}
+          minSize={15}
+          maxSize={25}
+          className={"w-1/5 h-full p-1 flex flex-col items-center"}>
+          <SubPageSelector
+            currentSubPage={currentSubPage}
+            setCurrentSubPage={setCurrentSubPage}
+          />
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel
+        className={"w-full flex justify-center items-center"}>
+          <SubPage currentSubPage={currentSubPage}/>
+        </ResizablePanel>
+      </ResizablePanelGroup>
     </main>
   );
 }
 
-function SubPageSelector() {
+interface SubPageSelectorProps {
+  currentSubPage: ESubPage
+  setCurrentSubPage: Dispatch<SetStateAction<ESubPage>>
+}
+
+function SubPageSelector(props: SubPageSelectorProps) {
   return (
     <div className={"w-full flex flex-col justify-center items-stretch pt-4 p-4 gap-2"}>
-      <Button className={"gap-1 font-bold"}>
+      <Button
+        onClick={()=>props.setCurrentSubPage(ESubPage.Home)}
+        disabled={props.currentSubPage === ESubPage.Home}
+        className={"gap-1 font-bold"}>
         <Home/>
         Accueil
       </Button>
-      <Button>
+      <NewFileModal/>
+      <Button
+        onClick={()=>props.setCurrentSubPage(ESubPage.Documentation)}
+        disabled={props.currentSubPage === ESubPage.Documentation}>
         <NotepadTextDashed />
         Documentation
       </Button>

apps/frontend/src/components/new-file-modal.tsx

@@ -0,0 +1,35 @@
+import { Button } from './ui/button';
+import {
+  Dialog,
+  DialogContent, DialogDescription,
+  DialogHeader, DialogTitle,
+  DialogTrigger
+} from './ui/dialog';
+import { FileInput } from 'lucide-react';
+
+export interface NewFileModalProps {
+  classname?: string;
+}
+
+export function NewFileModal(props: NewFileModalProps) {
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button  className={"flex gap-2 items-center bg-secondary text-secondary-foreground"}>
+          <FileInput />
+          Ajouter un fichier
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Are you absolutely sure?</DialogTitle>
+          <DialogDescription>
+            This action cannot be undone. This will permanently delete your account
+            and remove your data from our servers.
+          </DialogDescription>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  )
+}