feat: Enable Fullscreen Mode for LoginPage #45

This change implements a fullscreen experience specifically for the login page. Upon loading, the login page will seamlessly transition to fullscreen mode, providing a more immersive and focused login process. Once the login process is completed, the application will gracefully revert to its default windowed mode. This enhancement aims to create a more user-friendly and visually appealing login experience.

electron/main.ts

@@ -159,3 +159,12 @@ ipcMain.on("reload-app", () => {
   }
   win?.reload();
 });
+
+// Listen for toggling FullScreen
+ipcMain.on("setFullScreen", () => {
+  win?.setFullScreen(true);
+});
+
+ipcMain.on("escFullScreen", () => {
+  win?.setFullScreen(false);
+});

frontend/pages/LogInPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import "./style/LogInPage.css";
 
 interface LogInPagePrompt {
@@ -12,6 +12,12 @@ export const LogInPage: React.FC<LogInPagePrompt> = ({ changeLogInStatus }) => {
   const [openaiKey, setOpenaiKey] = useState<string>("");
   const [geminiKey, setGeminiKey] = useState<string>("");
 
+  //
+  // switch to full screen for LoginPage
+  useEffect(() => {
+    window.ipcRenderer.send("setFullScreen");
+  }, []);
+
   //
   const submit = () => {
     window.ipcRenderer.send("request-to-backend", {
@@ -31,6 +37,8 @@ export const LogInPage: React.FC<LogInPagePrompt> = ({ changeLogInStatus }) => {
       request_type: "start-server",
     });
     changeLogInStatus();
+    // escape full screen for LoginPage
+    window.ipcRenderer.send("escFullScreen");
   };
 
   return (