style(icon for addon): custom icon added

public/manifest.json

@@ -4,13 +4,15 @@
   "version": "1.0.0",
   "short_name": "Tg Downloader",
   "manifest_version": 2,
-  "permissions": [
-    "activeTab",
-    "tabs"
-  ],
+  "permissions": ["activeTab", "tabs"],
   "icons": {
-    "48": "tg.jpg"
+    "48": "48x48.png",
+    "128": "128x128.png",
+    "16": "16x16.png",
+    "256": "256x256.png"
   },
+  "background_color": "#78c2ad",
+
   "content_scripts": [
     {
       "matches": ["https://*.web.telegram.org/*"],
@@ -25,7 +27,7 @@
     "default_popup": "index.html",
     "default_title": "Telegram downloader",
     "default_icon": {
-      "48": "tg.jpg"
+      "48": "48x48.png"
     }
   }
 }

src/App.tsx

@@ -1,43 +1,32 @@
-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 Gallery from "./structure/Gallery";
 
 function App() {
   const hook = useAddOn();
 
-  const key = useRef(`${window.crypto.randomUUID()}`);
-
   return (
     <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>
+      <Gallery items={hook.state} />
 
-      <footer>
-        <p className="m-0">
-          Pictures found
-          <span className="mx-2 badge bg-info">{hook.state.length}</span>{" "}
-        </p>
+      {hook.state.length >= 1 ? (
+        <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={async () => await hook.handleDownloadAll()}
-        >
-          Download all
-        </button>
-      </footer>
+          <button
+            className="btn btn-primary"
+            onClick={async () => await hook.handleDownloadAll()}
+          >
+            Download all
+          </button>
+        </footer>
+      ) : null}
     </main>
   );
 }

src/structure/Gallery/index.tsx

@@ -0,0 +1,38 @@
+import { useRef } from "react";
+import { PropsGallery } from "./types";
+import ImageDetected from "../../molescules/ImageDetected";
+import ui from "./styles.module.scss";
+
+export default function Gallery({ items = [] }: PropsGallery) {
+  const key = useRef(`${window.crypto.randomUUID()}`);
+
+  if (items.length <= 0)
+    return (
+      <div className="p-5">
+        <p>1. Scroll throught your chat</p>
+        <p>2. Once you find media, re-open this popup</p>
+
+        <hr />
+
+        <p>Thanks for the comprehesion 😁</p>
+        <p>The extension must work like this for performance issues</p>
+        <small className="font-weight-bold">
+          <b>Blame Telegram for anti-download media feature 😡</b>
+        </small>
+      </div>
+    );
+
+  return (
+    <div className={ui.gallery}>
+      {items.map((image, i) => (
+        <ImageDetected
+          key={`${key.current}-${i}`}
+          blobSrc={image.blob}
+          sentAt={1}
+          height={image.height}
+          width={image.width}
+        />
+      ))}
+    </div>
+  );
+}

src/structure/Gallery/styles.module.scss

@@ -0,0 +1,8 @@
+.gallery {
+  display: grid;
+  grid-template-columns: repeat(3, 25%);
+  justify-content: space-around;
+  gap: 10px;
+  padding: 10px 0;
+  background-color: transparent;
+}

src/structure/Gallery/types.d.ts

@@ -0,0 +1,5 @@
+import { CrawledImageDom } from "../../typesContentScript";
+
+export interface PropsGallery {
+  items: CrawledImageDom[];
+}