Updated secrets, fixed hooks, and changed XmbContext to handle menu changes

Author: syntax-tm

package.json

@@ -17,6 +17,7 @@
     "prebuild": "node ./scripts/prebuild.mjs"
   },
   "dependencies": {
+    "@fireworks-js/react": "^2.10.8",
     "@fortawesome/fontawesome-svg-core": "^7.3.1",
     "@fortawesome/free-brands-svg-icons": "^7.3.1",
     "@fortawesome/free-regular-svg-icons": "^7.3.1",

public/svg/couple.svg

@@ -7,6 +7,7 @@ import { BackgroundView, BrixBackground } from "@components/background";
 import { Menu } from "@components/xmb-menu";
 // import { useRouter } from "next/navigation";
 import { useSettingStore } from "@stores";
+import BrixBootNew from "@components/boot/brix-boot";
 
 export function BrixPage() {
 
@@ -35,10 +36,10 @@ export function BrixPage() {
       {
         isBootVisible
           ?
-          <BootView />
+          <BrixBootNew />
           :
           <>
-            <BackgroundView />
+            <BrixBackground />
             {clock}
             <Menu />
           </>

src/app/brix/page.tsx

@@ -2,8 +2,8 @@ import { BackgroundView } from "@components/background/background-view";
 import { useBoot, useTheme } from "@context";
 import { Boot } from "./boot";
 import { useEffect } from "react";
-import useKeyboard from "@hooks/useKeyboard";
 import { KeyPressAction } from "types";
+import { useKeyboard, useDoubleTap } from "@hooks";
 
 export function BootView() {
   const { currentTheme, font, boot } = useTheme();
@@ -14,6 +14,11 @@ export function BootView() {
     ['enter', { repeat: false, onKeyPress: hideBootScreen }],
   ]);
 
+  useDoubleTap({
+    onDoubleTap: hideBootScreen,
+    delay: 500,
+  });
+
   useKeyboard({
     actions: actions,
     enabledOnModal: false,

src/components/boot/boot-view.tsx

@@ -0,0 +1,37 @@
+.brix-boot {
+  background-color: #161616;
+}
+
+.brix-boot-fg {
+  animation: keyframes-fg 10s ease-in-out 0s 1 normal both;
+}
+
+.brix-boot-fireworks {
+  z-index: 100;
+  animation: keyframes-fireworks 9.5s ease-in-out 0.5s 1 normal both;
+}
+
+@keyframes keyframes-fireworks {
+  0% {
+    opacity: 0;
+  }
+  20%, 75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes keyframes-fg {
+  0% {
+    opacity: 0;
+  }
+  10%, 80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+