feat: bring back button to full-screen

src/components/navigation/buttons/button-navbar.tsx

@@ -20,6 +20,7 @@ import {
   CircleIcon,
   CubeIcon,
   DesktopIcon,
+  EnterFullScreenIcon,
   FileIcon,
   GearIcon,
   MixerHorizontalIcon,
@@ -36,6 +37,7 @@ import { useRouter } from "next/navigation";
 import { useTheme } from "next-themes";
 import genId from "@/lib/genId";
 import { useTranslations } from "next-intl";
+import { useFullScreen } from "@/hooks/useFullScreen";
 
 interface ListItem {
   icon: React.ReactNode;
@@ -52,6 +54,7 @@ export default function ButtonNavbar() {
   const t = useTranslations("Index");
   const [open, setOpen] = React.useState(false);
   const { setTheme } = useTheme();
+  const { toggleFullScreen } = useFullScreen();
   React.useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
@@ -221,6 +224,10 @@ export default function ButtonNavbar() {
                 />
               );
             })}
+            <CommandItem onSelect={() => toggleFullScreen()}>
+              <EnterFullScreenIcon />
+              Fullscreen
+            </CommandItem>
           </CommandGroup>
           <CommandSeparator />
           <CommandGroup heading={t("SettingsPage.account")}>

src/hooks/useFullScreen.ts

@@ -1,37 +1,4 @@
-import { useState, useEffect } from "react";
-
 export function useFullScreen() {
-  const [isFullScreen, setIsFullScreen] = useState<boolean>(true);
-
-  useEffect(() => {
-    const handleFullScreenChange = () => {
-      setIsFullScreen(!!document.fullscreenElement);
-    };
-
-    handleFullScreenChange();
-
-    document.addEventListener("fullscreenchange", handleFullScreenChange);
-    document.addEventListener("mozfullscreenchange", handleFullScreenChange);
-    document.addEventListener("webkitfullscreenchange", handleFullScreenChange);
-    document.addEventListener("msfullscreenchange", handleFullScreenChange);
-
-    return () => {
-      document.removeEventListener("fullscreenchange", handleFullScreenChange);
-      document.removeEventListener(
-        "mozfullscreenchange",
-        handleFullScreenChange
-      );
-      document.removeEventListener(
-        "webkitfullscreenchange",
-        handleFullScreenChange
-      );
-      document.removeEventListener(
-        "msfullscreenchange",
-        handleFullScreenChange
-      );
-    };
-  }, []);
-
   const toggleFullScreen = () => {
     const element = document.documentElement;
 
@@ -62,5 +29,5 @@ export function useFullScreen() {
     }
   };
 
-  return { isFullScreen, toggleFullScreen };
+  return { toggleFullScreen };
 }