From d419af0fb9afb02bff73a683a8f437879479d2a9 Mon Sep 17 00:00:00 2001 From: voldemort <5692900+yell0wsuit@users.noreply.github.com> Date: Thu, 24 Jul 2025 23:04:05 +0700 Subject: [PATCH] UI overhaul --- frontend/.prettierrc.json | 9 + frontend/package-lock.json | 137 +++++++++++++ frontend/package.json | 4 + frontend/src/App.jsx | 72 +++---- .../assets/fonts/InterVariable-Italic.woff2 | Bin 0 -> 387976 bytes frontend/src/assets/fonts/InterVariable.woff2 | Bin 0 -> 352240 bytes frontend/src/assets/fonts/font-face.css | 15 ++ frontend/src/components/about.jsx | 57 ++++++ frontend/src/components/container.jsx | 9 + frontend/src/components/injectionmenu.jsx | 72 +++++++ frontend/src/components/results.jsx | 187 ++++++++++++------ frontend/src/components/settings.jsx | 97 +++++---- frontend/src/components/sidenav.jsx | 48 ----- frontend/src/components/tabnavigation.jsx | 51 +++++ frontend/src/components/topnav.jsx | 82 -------- frontend/src/index.css | 37 +++- frontend/src/main.jsx | 11 +- src/inject.js | 9 +- 18 files changed, 622 insertions(+), 275 deletions(-) create mode 100644 frontend/.prettierrc.json create mode 100644 frontend/src/assets/fonts/InterVariable-Italic.woff2 create mode 100644 frontend/src/assets/fonts/InterVariable.woff2 create mode 100644 frontend/src/assets/fonts/font-face.css create mode 100644 frontend/src/components/about.jsx create mode 100644 frontend/src/components/container.jsx create mode 100644 frontend/src/components/injectionmenu.jsx delete mode 100644 frontend/src/components/sidenav.jsx create mode 100644 frontend/src/components/tabnavigation.jsx delete mode 100644 frontend/src/components/topnav.jsx diff --git a/frontend/.prettierrc.json b/frontend/.prettierrc.json new file mode 100644 index 0000000..13040da --- /dev/null +++ b/frontend/.prettierrc.json @@ -0,0 +1,9 @@ +{ + "trailingComma": "es5", + "tabWidth": 4, + "semi": true, + "singleQuote": false, + "useTabs": false, + "printWidth": 100, + "plugins": ["prettier-plugin-tailwindcss"] +} diff --git a/frontend/package-lock.json b/frontend/package-lock.json index e1d1c23..96a6f1f 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -11,7 +11,9 @@ "@tailwindcss/vite": "^4.1.11", "react": "^19.1.0", "react-dom": "^19.1.0", + "react-icons": "^5.5.0", "react-router-dom": "^7.7.0", + "sonner": "^2.0.6", "tailwindcss": "^4.1.11" }, "devDependencies": { @@ -20,10 +22,12 @@ "@types/react-dom": "^19.1.6", "@vitejs/plugin-react": "^4.7.0", "@vitejs/plugin-react-swc": "^3.11.0", + "daisyui": "^5.0.46", "eslint": "^9.31.0", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.20", "globals": "^16.3.0", + "prettier-plugin-tailwindcss": "^0.6.14", "vite": "^7.0.5" } }, @@ -2093,6 +2097,16 @@ "dev": true, "license": "MIT" }, + "node_modules/daisyui": { + "version": "5.0.46", + "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.0.46.tgz", + "integrity": "sha512-vMDZK1tI/bOb2Mc3Mk5WpquBG3ZqBz1YKZ0xDlvpOvey60dOS4/5Qhdowq1HndbQl7PgDLDYysxAjjUjwR7/eQ==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/saadeghi/daisyui?sponsor=1" + } + }, "node_modules/debug": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz", @@ -3204,6 +3218,110 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.6.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz", + "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==", + "dev": true, + "license": "MIT", + "peer": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, + "node_modules/prettier-plugin-tailwindcss": { + "version": "0.6.14", + "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.14.tgz", + "integrity": "sha512-pi2e/+ZygeIqntN+vC573BcW5Cve8zUB0SSAGxqpB4f96boZF4M3phPVoOFCeypwkpRYdi7+jQ5YJJUwrkGUAg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14.21.3" + }, + "peerDependencies": { + "@ianvs/prettier-plugin-sort-imports": "*", + "@prettier/plugin-hermes": "*", + "@prettier/plugin-oxc": "*", + "@prettier/plugin-pug": "*", + "@shopify/prettier-plugin-liquid": "*", + "@trivago/prettier-plugin-sort-imports": "*", + "@zackad/prettier-plugin-twig": "*", + "prettier": "^3.0", + "prettier-plugin-astro": "*", + "prettier-plugin-css-order": "*", + "prettier-plugin-import-sort": "*", + "prettier-plugin-jsdoc": "*", + "prettier-plugin-marko": "*", + "prettier-plugin-multiline-arrays": "*", + "prettier-plugin-organize-attributes": "*", + "prettier-plugin-organize-imports": "*", + "prettier-plugin-sort-imports": "*", + "prettier-plugin-style-order": "*", + "prettier-plugin-svelte": "*" + }, + "peerDependenciesMeta": { + "@ianvs/prettier-plugin-sort-imports": { + "optional": true + }, + "@prettier/plugin-hermes": { + "optional": true + }, + "@prettier/plugin-oxc": { + "optional": true + }, + "@prettier/plugin-pug": { + "optional": true + }, + "@shopify/prettier-plugin-liquid": { + "optional": true + }, + "@trivago/prettier-plugin-sort-imports": { + "optional": true + }, + "@zackad/prettier-plugin-twig": { + "optional": true + }, + "prettier-plugin-astro": { + "optional": true + }, + "prettier-plugin-css-order": { + "optional": true + }, + "prettier-plugin-import-sort": { + "optional": true + }, + "prettier-plugin-jsdoc": { + "optional": true + }, + "prettier-plugin-marko": { + "optional": true + }, + "prettier-plugin-multiline-arrays": { + "optional": true + }, + "prettier-plugin-organize-attributes": { + "optional": true + }, + "prettier-plugin-organize-imports": { + "optional": true + }, + "prettier-plugin-sort-imports": { + "optional": true + }, + "prettier-plugin-style-order": { + "optional": true + }, + "prettier-plugin-svelte": { + "optional": true + } + } + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -3235,6 +3353,15 @@ "react": "^19.1.0" } }, + "node_modules/react-icons": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz", + "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-refresh": { "version": "0.17.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", @@ -3377,6 +3504,16 @@ "node": ">=8" } }, + "node_modules/sonner": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.6.tgz", + "integrity": "sha512-yHFhk8T/DK3YxjFQXIrcHT1rGEeTLliVzWbO0xN8GberVun2RiBnxAjXAYpZrqwEVHBG9asI/Li8TAAhN9m59Q==", + "license": "MIT", + "peerDependencies": { + "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", + "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" + } + }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 3e0425e..9826443 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,7 +13,9 @@ "@tailwindcss/vite": "^4.1.11", "react": "^19.1.0", "react-dom": "^19.1.0", + "react-icons": "^5.5.0", "react-router-dom": "^7.7.0", + "sonner": "^2.0.6", "tailwindcss": "^4.1.11" }, "devDependencies": { @@ -22,10 +24,12 @@ "@types/react-dom": "^19.1.6", "@vitejs/plugin-react": "^4.7.0", "@vitejs/plugin-react-swc": "^3.11.0", + "daisyui": "^5.0.46", "eslint": "^9.31.0", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.20", "globals": "^16.3.0", + "prettier-plugin-tailwindcss": "^0.6.14", "vite": "^7.0.5" } } diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 4b5b5ae..fb648e2 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,28 +1,41 @@ -import { useState, useEffect } from "react"; -import { HashRouter as Router, Routes, Route, Navigate } from "react-router-dom"; -import TopNav from "./components/topnav"; -import SideNav from "./components/sidenav"; +import { useEffect, useState } from "react"; +import { Navigate, Route, HashRouter as Router, Routes } from "react-router-dom"; +import About from "./components/about"; +import Container from "./components/container"; import Results from "./components/results"; import Settings from "./components/settings"; +import TabNavigation from "./components/tabnavigation"; -function App() { - const [isSideNavOpen, setIsSideNavOpen] = useState(false); - const [validConfig, setValidConfig] = useState(null); // null = loading +const App = () => { + const [validConfig, setValidConfig] = useState(null); useEffect(() => { - chrome.storage.local.get("valid_config", (result) => { - if (chrome.runtime.lastError) { - console.error("Error reading valid_config:", chrome.runtime.lastError); - setValidConfig(false); // fallback - } else { - setValidConfig(result.valid_config === true); - } - }); + // Fix: Access chrome API properly for browser extensions + if (typeof chrome !== "undefined" && chrome.storage) { + chrome.storage.local.get("valid_config", (result) => { + if (chrome.runtime.lastError) { + console.error("Error reading valid_config:", chrome.runtime.lastError); + setValidConfig(false); + } else { + setValidConfig(result.valid_config === true); + } + }); + } else { + // Fallback for development/testing + setValidConfig(false); + } }, []); + const handleConfigSaved = () => { + setValidConfig(true); + // Navigate to main tab after config is saved + window.location.hash = "#/results"; + }; + if (validConfig === null) { return ( -
+#H?eno9ZYK}k7-{0G&a8~;wOYhB#SGLD{D^MNR7%C_5hq^ySD@sPcZbW+^OuW
zM&1J}vhRLnx0ciX=~8Hp{bP_KuPhk|S?n8M{Q7E8mnNrDEBnDi`~~7B0uQl-A!b3B
zWb(Q6OCZz7wm~+fd}@c7!USuIg~$#SrlDv)dBW2VLPb-^t3x*MLf}906S3k y@+s?Ye`aXmvk^sW? -%TC4umzP=1j
zbOfej7Up6Rma5b$gKADSuUb;QQh7b#8xxKFf!V*TA5G9BCC2CZ2U@a^1jF~a>oXIx
z(N$e@J|HyiG%~}Q>6}r*Cm4}WYo{MiTc#JLoztH1O*H-mf$?RGU>uiOy)!fxdAf9o
zAVLZ|8WAQ Huw_G7kFdC&ElI
z<5cM)0&`InV!k!>)yP93eiahMQ21zCN`)RHIbp&dHsK>!%0&&KiiS`}OK74!fi_m-
ziY`870$2Pe2zNrt1i^frZ-f$2L@ZGsk$B=K!OJ8~vRBENTvEv|h5YOD_Y`7mpp;+g
zX=?1Cl`g(9?etDRoea(h{frNiaTaHrP4?!5`|I!b*2dq(?c)3&@-AZ5X87ZB5c`A-
zlC7Ub>iiHHo8e&CEDy^f{OpS%P)p$OOVOn*GC$(dHf=BCm&WHcU;Pzsad>cDT_$)m
z+#N9USolIIJp1N5U&(X9JeF7GoiW)am&fL938uw++G2yx;)rJO`I`+4@MWZsucIR0
z#Lk=e7KBCZpoC_pM@xO53Bxg(Ue7 r=Y_>PE|0
z;nR`7;NWW1=xf^)rA9xByG8MQWsfQInR$he>BuA<(KHE1=4Y0~sDutXu36XzX7as<
zPYXEABuEwcDntyw#vGzk!$;&wMdAT3hwsQK){umRz#swHw>dwtAECqSM88*X1ovu}
z^Du}~ef4L6py?tm?VS>uE8sDSLzS#mv6`2+ewNA?V821h<5fZja?i)HO_LFF0>F7O
zW&=1OB=8<0B<=0%XSiaOE7nibx5mBaeduLmB+R8#@Y6nYY8;T?&nMuO-N3b$05IY+
z5PtQUATa`vv*3V!JrdKs5u2BI!nFLmsQ*e1xanytl4@4$?`W^cxUKUN+{th60De$5
zoF3eXF63O*kIMA+mWvavc
dY
zG+}Vmzv+>op=tIhv5NM&QA8qIa*wQ-T);s%N;Pk|`5xBJcl1ElMpu%(3~~q@QWGPd
z7xvcZ|M{+{(+345HA)-ZEP^j^r`VEuB}k4jXnq63gKD78jm*2JPK|D@Vg!5<{IpX0
zhM+^w6crmn9?2{l5kUMNmpzpWYpK2FI87uAFY|lU-f|M{L0i|pHn~N&u7)Q62Sq@-
zzm4w
#;BU?McxrxmSJb=do_;Wwv_zDl;@xb@UX-|sVj%kjvrdG{B
zLAR&C{j82#@T@!6M<*fDg|%63JRRD(+9(RL*ozlNpjJTmA}t}E0W$Vx;>jFVu;aiP
zt|M+d_!4%#BqgQMQfqxsOYQS8C&O*AnExg!6e#^@7jDy8c6wO5{k39%8_VY&g2F=(
zLOV9kJq|eG#R_X|u*Cr3X$U0Gy77oM`a19nee3}b
z+G2O~Wg+XCIboj72}{bIf$EOHnG@>GZQu&v+5Pq<7vm31HT$8gIekc&^ppXX;#kiY<8p}_%CzBmOPQ%p4oMVa6H
z^5SZsV4?)_CNOBh
a$lT0opQSU>1@r)a