refactor: cleanup & upgrade

Author: Seldszar

package-lock.json

@@ -10,42 +10,40 @@
     "test": "tsc --noEmit && eslint --ext=tsx,ts ."
   },
   "dependencies": {
-    "@tabler/icons-react": "^3.10.0",
-    "@tanstack/react-form": "^1.0.0",
-    "preact": "^10.22.0",
+    "@tabler/icons-react": "^3.31.0",
+    "preact": "^10.26.4",
     "webextension-polyfill": "^0.12.0",
-    "wouter": "^3.3.1",
-    "zod": "^3.24.2"
+    "wouter": "^3.6.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.3.0",
-    "@commitlint/config-conventional": "^19.2.2",
+    "@commitlint/cli": "^19.8.0",
+    "@commitlint/config-conventional": "^19.8.0",
     "@csstools/postcss-cascade-layers": "^4.0.6",
     "@pandacss/dev": "^0.41.0",
     "@seldszar/yael": "^2.2.0",
-    "@swc/core": "^1.4.16",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@swc/core": "^1.11.8",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "@types/webextension-polyfill": "^0.10.7",
-    "@types/webpack-env": "^1.18.4",
-    "@typescript-eslint/eslint-plugin": "^6.2.1",
-    "@typescript-eslint/parser": "^6.2.1",
+    "@types/webpack-env": "^1.18.8",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
-    "eslint": "^8.46.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "graphql": "^16.9.0",
-    "html-webpack-plugin": "^5.6.0",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.2",
-    "mini-css-extract-plugin": "^2.9.0",
-    "postcss": "^8.4.39",
+    "eslint-plugin-prettier": "^5.2.3",
+    "graphql": "^16.10.0",
+    "html-webpack-plugin": "^5.6.3",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.4.3",
+    "mini-css-extract-plugin": "^2.9.2",
+    "postcss": "^8.5.3",
     "postcss-loader": "^8.1.1",
-    "prettier": "^3.2.5",
+    "prettier": "^3.5.3",
     "swc-loader": "^0.2.6",
-    "typescript": "^5.4.5",
-    "webpack": "^5.91.0",
+    "typescript": "^5.8.2",
+    "webpack": "^5.98.0",
     "webpack-cli": "^5.1.4",
     "webpack-merge": "^5.10.0"
   },

package.json

@@ -8,6 +8,11 @@ export const Button = styled("button", {
     px: 5,
     py: 2.5,
     rounded: "md",
+
+    _disabled: {
+      cursor: "not-allowed",
+      opacity: 0.5,
+    },
   },
   variants: {
     color: {

src/browser/popup/components/Button.tsx

@@ -3,10 +3,10 @@ import { ReactNode } from "react";
 import { css, cx, sva } from "~/browser/styled-system/css";
 
 const recipe = sva({
-  slots: ["header"],
+  slots: ["label"],
 
   base: {
-    header: {
+    label: {
       color: { base: "neutral.600", _dark: "neutral.400" },
       fontSize: "sm",
       fontWeight: "bold",
@@ -18,8 +18,9 @@ const recipe = sva({
 
 export interface FormFieldProps {
   className?: string;
+
+  label?: ReactNode;
   children?: ReactNode;
-  header?: ReactNode;
 }
 
 export function FormField(props: FormFieldProps) {
@@ -29,7 +30,7 @@ export function FormField(props: FormFieldProps) {
 
   return (
     <label className={cx(css({ display: "block" }), props.className)}>
-      <div className={styles.header}>{props.header}</div>
+      {props.label && <div className={styles.label}>{props.label}</div>}
       {props.children}
     </label>
   );

src/browser/popup/components/Form.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { HTMLProps, ReactNode } from "react";
 
 import { cx, sva } from "~/browser/styled-system/css";
 import { Circle } from "~/browser/styled-system/jsx";
@@ -37,11 +37,8 @@ const recipe = sva({
   },
 });
 
-export interface SwitchProps {
+export interface SwitchProps extends HTMLProps<HTMLInputElement> {
   children?: ReactNode;
-
-  checked: boolean;
-  onChecked(checked: boolean): void;
 }
 
 export function Switch(props: SwitchProps) {
@@ -51,12 +48,7 @@ export function Switch(props: SwitchProps) {
 
   return (
     <label className={styles.root}>
-      <input
-        type="checkbox"
-        checked={props.checked}
-        onChange={() => props.onChecked(!props.checked)}
-        className={cx("peer", styles.input)}
-      />
+      <input {...props} type="checkbox" className={cx("peer", styles.input)} />
 
       <div className={styles.icon}>
         <Circle bg="white" size="14px" />