fix: add disabled state icons

Author: sm17p

.changeset/kind-candies-doubt.md

@@ -0,0 +1,5 @@
+---
+"amgiflol": patch
+---
+
+fix: sync action icon state disabled state

README.md

@@ -10,21 +10,16 @@
 
 **LOGO BY** - [b3an33](https://github.com/b3an33)
 
-</div>
-
 A browser extension that helps with design audit. Match web layouts with Figma designs through real-time element inspection, measurements, and visual overlays.
 
-## Marketplace
-
-### Supported Browsers
-
-| Chromium                               | Firefox      |
-| -------------------------------------- | ------------ |
-| Chrome, Edge, Brave, Vivaldi, Arc, Dia | Firefox, Zen |
+</div>
 
-### Users
+## Marketplace
 
-[![Chrome Web Store Users](https://img.shields.io/chrome-web-store/users/kpkpcekkflbmmmhjlnkbkfkdjfjnnonl?style=for-the-badge&logo=GoogleChrome&label=Chromium)](https://chromewebstore.google.com/detail/amgiflol/kpkpcekkflbmmmhjlnkbkfkdjfjnnonl) [![Mozilla Add-on Users](https://img.shields.io/amo/users/amgiflol?style=for-the-badge&logo=Firefox-Browser&label=Firefox)](https://addons.mozilla.org/en-US/firefox/addon/amgiflol/)
+| Flavour  | Browsers                               | Web Store Links & Stats                                                                                                                                                                                                                              |
+| -------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Chromium | Chrome, Edge, Brave, Vivaldi, Arc, Dia | [![Chrome Web Store Users](https://img.shields.io/chrome-web-store/users/kpkpcekkflbmmmhjlnkbkfkdjfjnnonl?style=for-the-badge&logo=GoogleChrome&label=Chromium)](https://chromewebstore.google.com/detail/amgiflol/kpkpcekkflbmmmhjlnkbkfkdjfjnnonl) |
+| Firefox  | Firefox, Zen                           | [![Mozilla Add-on Users](https://img.shields.io/amo/users/amgiflol?style=for-the-badge&logo=Firefox-Browser&label=Firefox)](https://addons.mozilla.org/en-US/firefox/addon/amgiflol/)                                                                |
 
 ## Target Audience
 

public/icons/icon-off-128.png

@@ -1,5 +1,17 @@
-import IconOn from "@/assets/icon.png";
-import IconOff from "@/assets/icon.png";
+const IconOff = {
+	16: "icons/icon-off-16.png",
+	32: "icons/icon-off-32.png",
+	48: "icons/icon-off-48.png",
+	64: "icons/icon-off-64.png",
+	128: "icons/icon-off-128.png",
+};
+
+const IconOn = {
+	16: "icons/16.png",
+	32: "icons/32.png",
+	48: "icons/48.png",
+	128: "icons/128.png",
+};
 
 export default defineBackground(() => {
 	browser.runtime.onMessage.addListener(async (event, sender) => {
@@ -12,19 +24,98 @@ export default defineBackground(() => {
 		console.log(
 			`Extension installed, reason: ${reason}, browser: ${import.meta.env.BROWSER}`,
 		);
-		iconActions();
 		analytics.setEnabled(true);
+		updateIconForActiveTab();
+	});
+
+	browser.runtime.onStartup.addListener(async () => {
+		console.log("Extension started");
+		await updateIconForActiveTab();
+	});
+
+	// Update icon when switching tabs
+	browser.tabs.onActivated.addListener(async () => {
+		updateIconForActiveTab();
+	});
+
+	// Update icon when tab URL changes
+	browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
+		if (changeInfo.status === "complete" && tab.active) {
+			updateIconForActiveTab();
+		}
+	});
+
+	// Listen for storage changes to update icon
+	browser.storage.onChanged.addListener(async (changes, areaName) => {
+		if (areaName === "local") {
+			updateIconForActiveTab();
+		}
 	});
 });
 
-function iconActions() {
-	storage.watch<boolean>(
-		"local:isExtensionEnabled",
-		isEnabled =>
-			browser.action.setIcon({
-				path: isEnabled! ? IconOn : IconOff,
-			}),
-	);
+/**
+ * Get the current active tab's domain
+ */
+async function getCurrentDomain(): Promise<string | null> {
+	try {
+		const [tab] = await browser.tabs.query({
+			active: true,
+			currentWindow: true,
+		});
+
+		if (!tab.url) return null;
+
+		const url = new URL(tab.url);
+		return url.host;
+	} catch (error) {
+		console.error("Failed to get current domain:", error);
+		return null;
+	}
+}
+
+/**
+ * Check if extension is active for a specific domain
+ */
+async function isDomainActive(domain: string): Promise<boolean> {
+	try {
+		const result = await browser.storage.local.get([domain]);
+		return Boolean(result[domain]);
+	} catch (error) {
+		console.error("Failed to check domain state:", error);
+		return true;
+	}
+}
+
+/**
+ * Update extension icon based on current active tab's domain state
+ */
+async function updateIconForActiveTab() {
+	try {
+		const domain = await getCurrentDomain();
+
+		if (!domain) {
+			// No valid domain, show disabled state
+			await (browser.action ?? browser.browserAction).setIcon({
+				path: IconOff,
+			});
+			console.log("No valid domain, icon set to disabled");
+			return;
+		}
+
+		const isActive = await isDomainActive(domain);
+
+		await (browser.action ?? browser.browserAction).setIcon({
+			path: isActive ? IconOn : IconOff,
+		});
+
+		console.log(
+			`Icon updated for domain "${domain}": ${
+				isActive ? "active" : "inactive"
+			}`,
+		);
+	} catch (error: unknown) {
+		console.error("Failed to update icon for active tab:", error);
+	}
 }
 
 async function captureHandler(tab: Browser.tabs.Tab) {