feat First implementation of plugins system

feat: Added PCSX2 integration
feat: Revamped UI a bit made it look better on light mode

src/mainview/components/FocusTooltip.tsx

@@ -0,0 +1,36 @@
+import { Ref, RefObject, useEffect, useState } from "react";
+import { useFocusEventListener } from "../scripts/spatialNavigation";
+import useActiveControl from "../scripts/gamepads";
+import { twMerge } from "tailwind-merge";
+
+export default function FocusTooltip (data: { parentRef: RefObject<any>; visible?: boolean; })
+{
+    const [hoverText, setHoverText] = useState<string | undefined>(undefined);
+    const [hoverTextType, setHoverTextType] = useState<string>('accent');
+
+    const handleTooltipSet = (e: HTMLElement) =>
+    {
+        const dataTooltip = e.getAttribute('data-tooltip');
+        setHoverText(dataTooltip ?? undefined);
+        setHoverTextType(e.getAttribute('data-tooltip_type') ?? 'accent');
+    };
+
+    const { isPointer } = useActiveControl();
+
+    useFocusEventListener('focuschanged', (e) =>
+    {
+        if (e.target instanceof HTMLElement)
+        {
+            handleTooltipSet(e.target);
+        }
+
+    }, data.parentRef);
+
+    const tooltipStyles = {
+        base: 'bg-base-100 text-base-content',
+        accent: 'bg-accent text-accent-content',
+        error: 'bg-error text-error-content'
+    };
+
+    return !!hoverText && (data.visible ?? true) && !isPointer && <p className={twMerge("flex sm:hidden md:inline py-1 md:py-2 md:px-4 rounded-4xl text-wrap wrap-anywhere text-base", (tooltipStyles as any)[hoverTextType])}>{hoverText}</p>;
+}