Show checkmark on icon instead

src/pages/Background/index.ts

@@ -2,6 +2,7 @@ import { getBrowser, getCurrentTabInfo } from '../../@/lib/utils.ts';
 // import BookmarkTreeNode = chrome.bookmarks.BookmarkTreeNode;
 import { getConfig, isConfigured } from '../../@/lib/config.ts';
 import {
+  checkLinkExists,
   // deleteLinkFetch,
   // updateLinkFetch,
   postLinkFetch,
@@ -297,6 +298,20 @@ browser.runtime.onInstalled.addListener(function () {
   });
 });
 
+browser.tabs.onActivated.addListener(async (_tabInfo) => {
+  const cachedConfig = await getConfig();
+  const linkExists = await checkLinkExists(
+    cachedConfig.baseUrl,
+    cachedConfig.apiKey
+  );
+  if (linkExists) {
+    browser.browserAction.setBadgeText({ text: '✓' });
+    browser.browserAction.setBadgeBackgroundColor({ color: '#4688F1' });
+  } else {
+    browser.browserAction.setBadgeText({ text: '' });
+  }
+});
+
 // Omnibox implementation
 
 browser.omnibox.onInputStarted.addListener(async () => {

src/pages/Popup/App.tsx

@@ -6,13 +6,10 @@ import { useEffect, useState } from 'react';
 import { getConfig, isConfigured } from '../../@/lib/config.ts';
 import Modal from '../../@/components/Modal.tsx';
 import { ModeToggle } from '../../@/components/ModeToggle.tsx';
-import { checkLinkExists } from '../../@/lib/actions/links.ts';
 
 function App() {
   const [isAllConfigured, setIsAllConfigured] = useState<boolean>();
   const [baseUrl, setBaseUrl] = useState<string>();
-  const [alreadyAdded, setAlreadyAdded] = useState<boolean>(false);
-  const [dismissedAlreadyAdded, setDismissedAlreadyAdded] = useState<boolean>(false);
 
   useEffect(() => {
     (async () => {
@@ -20,11 +17,9 @@ function App() {
       const cachedConfig = await getConfig();
       setBaseUrl(cachedConfig.baseUrl);
       setIsAllConfigured(cachedOptions);
-      setAlreadyAdded(await checkLinkExists(cachedConfig.baseUrl, cachedConfig.apiKey));
     })();
   }, []);
 
-
   return (
     <WholeContainer>
       <Container>
@@ -45,7 +40,7 @@ function App() {
                 alt="Linkwarden Logo"
               />
             </a>
-            { alreadyAdded ? (<h1 className="text-lg">Link already added</h1>) : (<h1 className="text-lg">Add Link</h1>) }
+            <h1 className="text-lg">Add Link</h1>
           </div>
           <div className="flex items-center justify-center space-x-2">
             <ModeToggle />
@@ -57,7 +52,7 @@ function App() {
             </p>
           </div>
         </div>
-        { alreadyAdded && !dismissedAlreadyAdded ? (<button onClick={() => setDismissedAlreadyAdded(true)}>Dismiss</button>) : (<BookmarkForm />) }
+        <BookmarkForm />
         <Modal open={!isAllConfigured} />
       </Container>
     </WholeContainer>