From ed1defb1da4316606dcb740dc07a49e50c6f12d7 Mon Sep 17 00:00:00 2001
From: Mathis <avnyr@yidhra.fr>
Date: Thu, 17 Oct 2024 10:26:51 +0200
Subject: [PATCH] Add NewFileModal component and implement resizable panels

Introduce a new NewFileModal component for adding files with a dialog box. Adjust page layout to use resizable panels to improve flexibility and user experience. Modify CSS variables for better dark mode color scheme.
---
 apps/frontend/src/app/global.css              |  8 +--
 apps/frontend/src/app/page.tsx                | 49 +++++++++++++++----
 .../src/components/new-file-modal.tsx         | 35 +++++++++++++
 3 files changed, 78 insertions(+), 14 deletions(-)
 create mode 100644 apps/frontend/src/components/new-file-modal.tsx

diff --git a/apps/frontend/src/app/global.css b/apps/frontend/src/app/global.css
index 8862017..1b5757f 100644
--- a/apps/frontend/src/app/global.css
+++ b/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%;
   }
diff --git a/apps/frontend/src/app/page.tsx b/apps/frontend/src/app/page.tsx
index 4d5cb64..7ab8470 100644
--- a/apps/frontend/src/app/page.tsx
+++ b/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"}>
-        <SubPageSelector/>
-      </div>
-      <SubPage currentSubPage={currentSubPage}/>
+      <ResizablePanelGroup
+        direction="horizontal">
+        <ResizablePanel
+          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>
diff --git a/apps/frontend/src/components/new-file-modal.tsx b/apps/frontend/src/components/new-file-modal.tsx
new file mode 100644
index 0000000..bcedba5
--- /dev/null
+++ b/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>
+  )
+}
\ No newline at end of file