chore: routine improvements

Author: ttttonyhe

apps/main/next.config.js

@@ -26,6 +26,14 @@ const NextConfigs = {
 			{
 				protocol: "https",
 				hostname: "luneresearch.com",
+				pathname: "/lune-logo.svg",
+				search: "",
+			},
+			{
+				protocol: "https",
+				hostname: "retroguard.ai",
+				pathname: "/logo.svg",
+				search: "",
 			},
 			{
 				protocol: "https",

apps/main/src/components/Card/Page/index.tsx

@@ -1,12 +1,12 @@
-import { OffsetTransition } from "../Motion"
 import { Icon } from "@twilight-toolkit/ui"
-import { useTheme } from "next-themes"
 import { useRouter } from "next/router"
+import { useTheme } from "next-themes"
 import { useEffect, useRef, useState } from "react"
 import smoothScroll from "smoothscroll-polyfill"
 import { useDispatch, useSelector } from "~/hooks"
 import { deactivateKbar } from "~/store/kbar/actions"
 import { selectKbar } from "~/store/kbar/selectors"
+import { OffsetTransition } from "../Motion"
 
 const themes = ["system", "dark", "light"]
 const icons = [
@@ -23,67 +23,72 @@ export default function Footer() {
 	const { pathname } = useRouter()
 	const [mounted, setMounted] = useState(false)
 	const backToTopRef = useRef<HTMLButtonElement>(null)
+	const previousPathnameRef = useRef(pathname)
 
 	useEffect(() => {
 		smoothScroll.polyfill()
 		setMounted(true)
 	}, [])
 
 	useEffect(() => {
-		// Cursor glowing effect
-		if (mounted && resolvedTheme === "dark") {
-			const glowingArea = document.querySelector(".glowing-area")
-			const glowingDivs = document.querySelectorAll(".glowing-div")
+		if (!mounted || resolvedTheme !== "dark") return
+
+		const glowingArea = document.querySelector<HTMLElement>(".glowing-area")
+		const glowingDivs = document.querySelectorAll<HTMLElement>(".glowing-div")
 
-			if (glowingArea) {
-				const handler = (ev: any) => {
-					glowingDivs.forEach((featureEl: any) => {
-						const rect = featureEl.getBoundingClientRect()
-						featureEl.style.setProperty("--x", ev.clientX - rect.left)
-						featureEl.style.setProperty("--y", ev.clientY - rect.top)
-					})
-				}
-				glowingArea.addEventListener("pointermove", handler)
+		if (!glowingArea) return
 
-				return () => {
-					glowingArea.removeEventListener("pointermove", handler)
-				}
-			}
+		const handler = (ev: PointerEvent) => {
+			glowingDivs.forEach((featureEl) => {
+				const rect = featureEl.getBoundingClientRect()
+				featureEl.style.setProperty("--x", `${ev.clientX - rect.left}`)
+				featureEl.style.setProperty("--y", `${ev.clientY - rect.top}`)
+			})
 		}
-		// Hide kbar on route change
-		visible && dispatch(deactivateKbar())
-	}, [resolvedTheme, mounted, pathname])
+		glowingArea.addEventListener("pointermove", handler)
+
+		return () => {
+			glowingArea.removeEventListener("pointermove", handler)
+		}
+	}, [mounted, pathname, resolvedTheme])
+
+	useEffect(() => {
+		if (previousPathnameRef.current === pathname) return
+
+		previousPathnameRef.current = pathname
+		if (visible) dispatch(deactivateKbar())
+	}, [dispatch, pathname, visible])
 
 	if (!mounted) return null
 
 	return (
-		<footer className="mt-20 border-b border-t border-gray-200 bg-white py-4 text-center dark:border-gray-700 dark:bg-gray-800">
+		<footer className="mt-20 border-gray-200 border-t border-b bg-white py-4 text-center dark:border-gray-700 dark:bg-gray-800">
 			<div className="fixed bottom-8 left-8 text-gray-500 dark:text-gray-300">
 				<button
 					aria-label="change theme"
 					onClick={() => {
 						setTheme(targetThemes[themes.indexOf(theme)])
 					}}
-					className="effect-pressing p-3! shadow-xs focus:outline-hidden flex w-full cursor-pointer items-center justify-center rounded-md border border-gray-300 bg-white text-xl tracking-wider hover:shadow-inner dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700">
+					className="effect-pressing flex w-full cursor-pointer items-center justify-center rounded-md border border-gray-300 bg-white p-3! text-xl tracking-wider shadow-xs hover:shadow-inner focus:outline-hidden dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700">
 					<span className="h-7 w-7">{icons[themes.indexOf(theme)]}</span>
 				</button>
 			</div>
-			<div className="fixed bottom-8 right-8 text-gray-500 dark:text-gray-300">
+			<div className="fixed right-8 bottom-8 text-gray-500 dark:text-gray-300">
 				<OffsetTransition componentRef={backToTopRef}>
 					<button
 						ref={backToTopRef}
 						aria-label="change theme"
 						onClick={() => {
 							window.scrollTo({ top: 0, behavior: "smooth" })
 						}}
-						className="effect-pressing shadow-xs focus:outline-hidden flex w-full cursor-pointer items-center justify-center rounded-md border border-gray-300 bg-white p-3 text-xl tracking-wider opacity-0 hover:shadow-inner dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700">
+						className="effect-pressing flex w-full cursor-pointer items-center justify-center rounded-md border border-gray-300 bg-white p-3 text-xl tracking-wider opacity-0 shadow-xs hover:shadow-inner focus:outline-hidden dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700">
 						<span className="h-7 w-7">
 							<Icon name="arrowUp" />
 						</span>
 					</button>
 				</OffsetTransition>
 			</div>
-			<p className="text-4 tracking-wide text-gray-500 dark:text-gray-400">
+			<p className="text-4 text-gray-500 tracking-wide dark:text-gray-400">
 				<a
 					href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
 					target="_blank"

apps/main/src/components/Footer/index.tsx

@@ -1,29 +1,28 @@
-import type { KbarListItem } from "../Kbar"
 import { useHotkeys } from "react-hotkeys-hook"
 
-/**
- *  Helper component to use react-hotkeys-hook to register hotkeys
- *  for Kbar list items
- *
- * @param {{ item: KbarListItem }} { item }
- * @return {*}
- */
-const HotkeyHelper = ({ item }: { item: KbarListItem }) => {
+const HotkeyHelper = ({
+	onTrigger,
+	shortcut,
+}: {
+	onTrigger: () => void
+	shortcut: string[]
+}) => {
+	const hotkey = `shift+${shortcut.join("+")}`
+
 	useHotkeys(
-		`shift+${item.shortcut.join("+")}`,
+		hotkey,
 		(e) => {
-			// Only trigger if shift key is actually pressed
 			if (e.shiftKey) {
 				e.preventDefault()
-				item.action()
+				onTrigger()
 			}
 		},
 		{
 			enableOnFormTags: ["INPUT"],
 			useKey: true,
-		}
+		},
+		[onTrigger]
 	)
-	// render nothing
 	return null
 }
 

apps/main/src/components/Helpers/hotKey.tsx

@@ -1,19 +1,18 @@
-import type { KbarProps } from "."
-import { KbarContextProvider } from "./context"
-import KbarPanel from "./panel"
 import { useEffect, useState } from "react"
 import { useHotkeys } from "react-hotkeys-hook"
 import {
 	useBodyPointerEvents,
 	useBodyScroll,
-	useDebounce,
 	useDispatch,
 	useSelector,
 } from "~/hooks"
 import useAnalytics from "~/hooks/analytics"
 import { activateKbar, deactivateKbar, updateKbar } from "~/store/kbar/actions"
 import { searchLocation } from "~/store/kbar/sagas/updateKbarToSearch"
 import { selectKbar } from "~/store/kbar/selectors"
+import type { KbarProps } from "."
+import { KbarContextProvider } from "./context"
+import KbarPanel from "./panel"
 
 const Kbar = (props: KbarProps) => {
 	const dispatch = useDispatch()
@@ -67,18 +66,19 @@ const Kbar = (props: KbarProps) => {
 			setBodyPointerEvents(true)
 			setBodyScroll(true)
 		}
-	}, [visible])
+	}, [visible, setBodyPointerEvents, setBodyScroll])
 
-	// Input effects
-	useDebounce(
-		() => {
-			if (location === searchLocation && kbarInputValueChangeHandler) {
-				kbarInputValueChangeHandler(kbarInputValue)
-			}
-		},
-		300,
-		[location, kbarInputValueChangeHandler, kbarInputValue]
-	)
+	useEffect(() => {
+		if (location !== searchLocation || !kbarInputValueChangeHandler) return
+
+		const timeout = window.setTimeout(() => {
+			kbarInputValueChangeHandler(kbarInputValue)
+		}, 300)
+
+		return () => {
+			window.clearTimeout(timeout)
+		}
+	}, [location, kbarInputValueChangeHandler, kbarInputValue])
 
 	return (
 		visible && (
@@ -91,7 +91,7 @@ const Kbar = (props: KbarProps) => {
 				}}>
 				<div
 					data-cy="kbar-bg"
-					className={`bg-gray-50/90 pointer-events-auto absolute z-40 h-screen w-full dark:bg-black/70 ${
+					className={`pointer-events-auto absolute z-40 h-screen w-full bg-gray-50/90 dark:bg-black/70 ${
 						animation === "out" ? "animate-kbar-bg-out" : "animate-kbar-bg"
 					}`}
 					onClick={() => dispatch(deactivateKbar())}