refactor(created a global state to handle entire pop ui): state

package.json

@@ -91,6 +91,7 @@
     "byte-size": "^8.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "sass": "^1.72.0"
   },
   "plugins": [

src/App.tsx

@@ -2,46 +2,46 @@ import { useRef } from "react";
 import ImageDetected from "./molescules/ImageDetected";
 import ui from "./styles.module.scss";
 import useAddOn from "./customHooks/useAddOn";
+import Header from "./molescules/Header";
+import Global from "./structure/configuration/Global";
 
 function App() {
   const hook = useAddOn();
 
   const key = useRef(`${window.crypto.randomUUID()}`);
 
   return (
-    <main className={ui.addOn}>
-      <h1>Telegram Downloader 1.0.0</h1>
+    <Global>
+      <main className={ui.addOn}>
+        <Header />
 
-      <div className={ui.gallery}>
-        {hook.state.map((image, i) => (
-          <ImageDetected
-            key={`${key.current}-${i}`}
-            blobSrc={image.blob}
-            sentAt={1}
-            height={image.height}
-            width={image.width}
-          />
-        ))}
-      </div>
+        <div className={ui.gallery}>
+          {hook.state.map((image, i) => (
+            <ImageDetected
+              key={`${key.current}-${i}`}
+              blobSrc={image.blob}
+              sentAt={1}
+              height={image.height}
+              width={image.width}
+            />
+          ))}
+        </div>
 
-      <footer>
-        <p className="m-0">
-          Pictures found{" "}
-          <span className="badge bg-info">{hook.state.length}</span>{" "}
-        </p>
-        {/* <div className="d-flex m-0">
-          <p className="m-0">Render download button</p>
-          <input type="checkbox" className="form-check-input" />
-        </div> */}
+        <footer>
+          <p className="m-0">
+            Pictures found
+            <span className="mx-2 badge bg-info">{hook.state.length}</span>{" "}
+          </p>
 
-        <button
-          className="btn btn-primary"
-          onClick={() => hook.handleDownloadAll()}
-        >
-          Download all
-        </button>
-      </footer>
-    </main>
+          <button
+            className="btn btn-primary"
+            onClick={() => hook.handleDownloadAll()}
+          >
+            Download all
+          </button>
+        </footer>
+      </main>
+    </Global>
   );
 }
 

src/customHooks/useAddOn/index.ts

@@ -9,8 +9,6 @@ export default function useAddOn() {
 
 
   useEffect(() => {
-    console.log('Hello world :)')
-
     browser.runtime.onMessage.addListener(function (
       message: MessageBrowserActions<"crawledContent">
     ) {

src/customHooks/useGlobal/index.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+import { GlobalStateI, ReturnUseGlobal } from "./types";
+
+const INITIAL_STATE: GlobalStateI = {
+  showThumbnails: false,
+  zipBulkDownloads: false,
+  displayDownloadOnChat: true,
+};
+
+export default function useGlobal():ReturnUseGlobal {
+  const [state, setState] = useState<GlobalStateI>(INITIAL_STATE);
+
+  useEffect(() => {
+    const data = window.localStorage.getItem("configuration");
+
+    const parsedData: GlobalStateI =
+      data === null ? INITIAL_STATE : JSON.parse(data);
+
+    setState(parsedData);
+
+    console.log(parsedData);
+  }, []);
+
+  return {
+    ...state,
+  };
+}

src/customHooks/useGlobal/types.ts

@@ -0,0 +1,9 @@
+export interface GlobalStateI{
+    showThumbnails:boolean;
+    zipBulkDownloads:boolean;
+    displayDownloadOnChat:boolean;
+}
+
+export interface ReturnUseGlobal extends GlobalStateI{
+
+}

src/error-page.tsx

@@ -0,0 +1,16 @@
+import ui from "./styles.module.scss";
+
+export default function ErrorPage() {
+  return (
+    <div className={ui.errorContainer}>
+      <h1>Hello stranger</h1>
+      <p>
+        You shouldn't be seeing this, i don't know how you did this but. Get in
+        touch with me cause this is a bug 😸
+      </p>
+      <a href="https://t.me/pptronix" target="_blank">
+        @pptronix
+      </a>
+    </div>
+  );
+}

src/index.css

@@ -112,11 +112,19 @@ textarea {
   background-color: transparent;
 }
 
+svg{
+  height: 20px;
+}
+
 @media (prefers-color-scheme: light) {
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --primaryBackground: rgb(50, 50, 50);
   }
+
+  *:not(label, input) {
+    color: white !important;
+  }
 }

src/main.tsx

@@ -1,11 +1,27 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
-import 'bootswatch/dist/minty/bootstrap.min.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+import "bootswatch/dist/minty/bootstrap.min.css";
+import { RouterProvider, createMemoryRouter } from "react-router-dom";
+import ErrorPage from "./error-page.tsx";
+import ConfigurationAddOn from "./structure/configuration/index.tsx";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+const router = createMemoryRouter([
+  {
+    path: "/",
+    element: <App />,
+    errorElement: <ErrorPage />,
+  },
+  {
+    path: "/configuration",
+    element: <ConfigurationAddOn />,
+    errorElement: <ErrorPage />,
+  },
+]);
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+    <RouterProvider router={router} />
+  </React.StrictMode>
+);

src/molescules/Header/index.tsx

@@ -0,0 +1,11 @@
+import SettingsNav from "../SettingsNav";
+import ui from "./styles.module.scss";
+
+export default function Header() {
+  return (
+    <div className={ui.header}>
+      <SettingsNav />
+      <h1>Telegram Downloader 1.0.0</h1>
+    </div>
+  );
+}

src/molescules/Header/styles.module.scss

@@ -0,0 +1,11 @@
+.header {
+  display: grid;
+  grid-template-columns: 10% 85%;
+  justify-content: space-around;
+  align-items: center;
+  > * {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}

src/molescules/ImageDetected/index.tsx

@@ -53,20 +53,46 @@ export default function ImageDetected({
 
       <p>{state.labelSize}</p>
 
-      <button
-        className="btn btn-primary btn-sm"
-        disabled={state.isDownloading}
-        onClick={handleDownload}
-      >
-        {state.isDownloading ? "Downloading" : "Download"}
-      </button>
+      <div className={ui.downloadOptions}>
+        <button
+          className="btn btn-primary btn-sm"
+          disabled={state.isDownloading}
+          onClick={handleDownload}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            className="w-6 h-6"
+          >
+            <path
+              fillRule="evenodd"
+              d="M9.75 6.75h-3a3 3 0 0 0-3 3v7.5a3 3 0 0 0 3 3h7.5a3 3 0 0 0 3-3v-7.5a3 3 0 0 0-3-3h-3V1.5a.75.75 0 0 0-1.5 0v5.25Zm0 0h1.5v5.69l1.72-1.72a.75.75 0 1 1 1.06 1.06l-3 3a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 1 1 1.06-1.06l1.72 1.72V6.75Z"
+              clipRule="evenodd"
+            />
+            <path d="M7.151 21.75a2.999 2.999 0 0 0 2.599 1.5h7.5a3 3 0 0 0 3-3v-7.5c0-1.11-.603-2.08-1.5-2.599v7.099a4.5 4.5 0 0 1-4.5 4.5H7.151Z" />
+          </svg>
+        </button>
 
-      <button
-        onClick={() => openInNewTab(blobSrc)}
-        className="btn btn-info btn-sm"
-      >
-        Preview
-      </button>
+        <button
+          onClick={() => openInNewTab(blobSrc)}
+          className="btn btn-info btn-sm"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            className="w-6 h-6"
+          >
+            <path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
+            <path
+              fillRule="evenodd"
+              d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 0 1 0-1.113ZM17.25 12a5.25 5.25 0 1 1-10.5 0 5.25 5.25 0 0 1 10.5 0Z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
     </div>
   );
 }

src/molescules/ImageDetected/styles.module.scss

@@ -17,8 +17,9 @@
     background: #80808014;
   }
 
-  span,p{
-    margin:0;
+  span,
+  p {
+    margin: 0;
   }
 
   img {
@@ -27,3 +28,14 @@
     width: 100%;
   }
 }
+
+.downloadOptions {
+  display: grid;
+  grid-template-columns: 45% 45%;
+  justify-content: space-between;
+  * {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}

src/molescules/SettingsNav/index.tsx

@@ -0,0 +1,20 @@
+import { Link } from "react-router-dom";
+
+export default function SettingsNav() {
+  return (
+    <Link className="btn btn-primary btn-sm" to={`configuration`}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        className="w-6 h-6"
+      >
+        <path
+          fillRule="evenodd"
+          d="M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 0 0-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 0 0-2.282.819l-.922 1.597a1.875 1.875 0 0 0 .432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 0 0 0 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 0 0-.432 2.385l.922 1.597a1.875 1.875 0 0 0 2.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 0 0 2.28-.819l.923-1.597a1.875 1.875 0 0 0-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 0 0 0-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 0 0-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 0 0-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 0 0-1.85-1.567h-1.843ZM12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z"
+          clipRule="evenodd"
+        />
+      </svg>
+    </Link>
+  );
+}