From 72bb2ddadbfd83ad62f51b3479630e76c1df3760 Mon Sep 17 00:00:00 2001
From: martylukyy <35452459+martylukyy@users.noreply.github.com>
Date: Fri, 21 Jul 2023 17:24:43 +0200
Subject: [PATCH] feat(web): fullscreen view for irc announce logs (#994)

* fullscreen view for announce logs

* cleanup functions and classes

* some css touches

---------

Co-authored-by: Fabricio Silva <hi@fabricio.dev>
---
 web/src/screens/settings/Irc.tsx | 40 +++++++++++++++++++++++++++++---
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/web/src/screens/settings/Irc.tsx b/web/src/screens/settings/Irc.tsx
index 41578d2..d26a303 100644
--- a/web/src/screens/settings/Irc.tsx
+++ b/web/src/screens/settings/Irc.tsx
@@ -612,6 +612,21 @@ export const Events = ({ network, channel }: EventsProps) => {
   const [settings] = SettingsContext.use();
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
+  const [isFullscreen, toggleFullscreen] = useToggle(false);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && isFullscreen) {
+        toggleFullscreen();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isFullscreen, toggleFullscreen]);
 
   const [logs, setLogs] = useState<IrcEvent[]>([]);
 
@@ -661,11 +676,30 @@ export const Events = ({ network, channel }: EventsProps) => {
   }, [settings]);
 
   return (
-    <div className="dark:bg-gray-800 rounded-lg shadow-lg p-1.5">
+    <div
+      className={classNames(
+        "dark:bg-gray-800 rounded-lg shadow-lg p-2",
+        isFullscreen ? "fixed top-0 left-0 w-screen h-screen z-50" : ""
+      )}
+    >
       <div className="flex relative">
+        <button
+          className={classNames(
+            "dark:bg-gray-800 p-2 absolute top-2 right-2 mr-2 bg-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 hover:cursor-pointer rounded-md"
+          )}
+          onClick={toggleFullscreen}
+        >
+          {isFullscreen
+            ? <span className="flex items-center"><ArrowsPointingInIcon className="w-5 h-5"/></span>
+            : <span className="flex items-center"><ArrowsPointingOutIcon className="w-5 h-5"/></span>}
+        </button>
       </div>
-
-      <div className="overflow-y-auto px-2 rounded-lg min-w-full aspect-[2/1] bg-gray-100 dark:bg-gray-900 overflow-auto">
+      <div
+        className={classNames(
+          "overflow-y-auto rounded-lg min-w-full bg-gray-100 dark:bg-gray-900 overflow-auto",
+          isFullscreen ? "max-w-full h-full p-2 border-gray-300 dark:border-gray-700" : "px-2 py-1 aspect-[2/1]"
+        )}
+      >
         {logs.map((entry, idx) => (
           <div
             key={idx}