Convert history button to React

.eslintrc.json

@@ -4,7 +4,7 @@
         "react"
     ],
     "parserOptions": {
-        "ecmaVersion": 11,
+        "ecmaVersion": 2024,
         "sourceType": "module",
         "ecmaFeatures": {
             "jsx": true

extension/chrome_manifest.json

@@ -63,7 +63,6 @@
                 "data/styles/old_queuetools.css",
                 "data/styles/achievements.css",
                 "data/styles/modbar.css",
-                "data/styles/historybutton.css",
                 "data/styles/notifier.css",
                 "data/styles/usernotes.css",
                 "data/styles/config.css",

extension/data/base.css

@@ -20,3 +20,12 @@
 	font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
 }
+
+/*
+ * emulates old Reddit's style; it's comfy for toolbox too since so much of our
+ * style is based on that look
+ */
+a {
+	color: #369;
+	text-decoration: none;
+}

extension/data/hooks.ts

@@ -1,6 +1,8 @@
 import {useEffect, useState} from 'react';
 import {useSelector} from 'react-redux';
+
 import {RootState} from './store';
+import {drawPosition} from './tbui';
 
 /** Hook to get the return value of a promise. */
 export const useFetched = <T>(promise: Promise<T>) => {
@@ -36,3 +38,33 @@ export const useSetting = (moduleName: string, settingName: string, defaultValue
 
     return savedValue;
 };
+
+/**
+ * Helper hook for managing the visibility of "popups"/draggable windows which
+ * are shown in response to pointer events.
+ * Provides functions to show and hide the window in response to events, and
+ * automatically computes an appropriate initial position for the window when
+ * it's first shown based on the click event that triggered it.
+ */
+export function usePopupState<T extends HTMLElement> () {
+    const [initialPosition, setInitialPosition] = useState<{top: number; left: number}>();
+
+    return {
+        /** The popup's initial position. */
+        initialPosition,
+        /** Whether the popup should currently be shown. */
+        shown: !!initialPosition,
+        /** Shows the window in response to a pointer event (like a click). */
+        show: (event: React.MouseEvent<T>) => {
+            // NOTE: i don't know the details of comparing between
+            // React.MouseEvent and other mouse events but it's whatever for now
+            const positions = drawPosition(event as unknown as PointerEvent);
+            setInitialPosition({
+                top: positions.topPosition,
+                left: positions.leftPosition,
+            });
+        },
+        /** Hides the window. */
+        hide: () => setInitialPosition(undefined),
+    };
+}