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/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>
+  )
+}