added overlay for importing tweets

apps/extension/src/App.tsx

@@ -44,7 +44,7 @@ function App() {
     getUserData();
   }, []);
 
-  // TODO: Implement getting bookmarks from API directly
+  // TODO: Implement getting bookmarks from Twitter API directly
   // const [status, setStatus] = useState('');
   // const [bookmarks, setBookmarks] = useState<TweetData[]>([]);
 
@@ -149,7 +149,7 @@ function App() {
   );
 }
 
-// TODO: Implement getting bookmarks from API directly
+// TODO: Implement getting bookmarks from Twitter API directly
 // async function fetchAllBookmarks(
 //   authorizationHeader: string,
 //   csrfToken: string,

apps/extension/src/SideBar.tsx

@@ -36,7 +36,7 @@ function sendUrlToAPI() {
 }
 
 function SideBar() {
-  // TODO: Implement getting bookmarks from API directly
+  // TODO: Implement getting bookmarks from Twitter API directly
   // chrome.runtime.onMessage.addListener(function (request) {
   //   if (request.action === 'showProgressIndicator') {
   //     // TODO: SHOW PROGRESS INDICATOR
@@ -52,6 +52,10 @@ function SideBar() {
 
   const [selectedSpaces, setSelectedSpaces] = useState<number[]>([0, 1]);
 
+  const [isImportingTweets, setIsImportingTweets] = useState(false);
+
+  const [log, setLog] = useState<string[]>([]);
+
   interface TweetData {
     tweetText: string;
     postUrl: string;
@@ -63,6 +67,9 @@ function SideBar() {
   const fetchBookmarks = () => {
     const tweets: TweetData[] = []; // Initialize an empty array to hold all tweet elements
 
+    setIsImportingTweets(true);
+    console.log("Importing tweets");
+
     const scrollInterval = 1000;
     const scrollStep = 5000; // Pixels to scroll on each step
 
@@ -75,10 +82,12 @@ function SideBar() {
       if (currentTweetCount === previousTweetCount) {
         unchangedCount++;
         if (unchangedCount >= 2) {
-          // Stop if the count has not changed 5 times
-          console.log("Scraping complete");
-          console.log("Total tweets scraped: ", tweets.length);
-          console.log("Downloading tweets as JSON...");
+          setLog([
+            ...log,
+            "Scraping complete",
+            `Total tweets scraped: ${tweets.length}`,
+            "Downloading tweets as JSON...",
+          ]);
           clearInterval(scrollToEndIntervalID); // Stop scrolling
           observer.disconnect(); // Stop observing DOM changes
           downloadTweetsAsJson(tweets); // Download the tweets list as a JSON file
@@ -128,7 +137,8 @@ function SideBar() {
               time: time ?? "",
               postUrl,
             });
-            console.log("Tweets capturados: ", tweets.length);
+
+            setLog([...log, `Scraped tweet: ${tweets.length}`]);
           }
         });
     }
@@ -149,6 +159,7 @@ function SideBar() {
     observer.observe(document.body, { childList: true, subtree: true });
 
     function downloadTweetsAsJson(tweetsArray: TweetData[]) {
+      setIsImportingTweets(false);
       const jsonData = JSON.stringify(tweetsArray); // Convert the array to JSON
 
       // TODO: SEND jsonData to server
@@ -158,6 +169,35 @@ function SideBar() {
 
   return (
     <>
+      {isImportingTweets && (
+        <div className="anycontext-overlay anycontext-fixed anycontext-font-sans anycontext-inset-0 anycontext-bg-black anycontext-bg-opacity-50">
+          <div className="anycontext-flex anycontext-items-center anycontext-justify-center anycontext-h-screen">
+            <div className="anycontext-flex anycontext-flex-col anycontext-items-center">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={2}
+                stroke="currentColor"
+                className="anycontext-w-10 anycontext-h-10 anycontext-animate-spin"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z"
+                />
+              </svg>
+              <p className="anycontext-mt-2">Importing your tweets...</p>
+              <div className="anycontext-mt-2">
+                {log.map((message, index) => (
+                  <p key={index}>{message}</p>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
       <TooltipProvider>
         <div className="anycontext-flex anycontext-group anycontext-flex-col anycontext-gap-2 anycontext-fixed anycontext-bottom-12 anycontext-right-0 anycontext-z-[99999] anycontext-font-sans">
           {window.location.href.includes("twitter.com") ||
@@ -215,6 +255,7 @@ function SideBar() {
                 <DialogTrigger asChild>
                   <button
                     onClick={() => {
+                      return;
                       sendUrlToAPI();
                       setIsSendingData(true);
                       setTimeout(() => {

apps/extension/src/background.ts

@@ -5,7 +5,7 @@ const backendUrl =
     ? "http://localhost:3000"
     : "https://supermemory.dhr.wtf";
 
-// TODO: Implement getting bookmarks from API directly
+// TODO: Implement getting bookmarks from Twitter API directly
 // let authorizationHeader: string | null = null;
 // let csrfToken: string | null = null;
 // let cookies: string | null = null;
@@ -97,7 +97,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       return true;
     })();
   }
-  // TODO: Implement getting bookmarks from API directly
+  // TODO: Implement getting bookmarks from Twitter API directly
   // else if (request.action === 'getAuthData') {
   //   sendResponse({
   //     authorizationHeader: authorizationHeader,