switch to local file sharing

src/background.ts

@@ -72,14 +72,6 @@ function reloadSeqtaPages() {
   result.then(open, onError)
 }
 
-browser.tabs.onUpdated.addListener((tabId, _, tab) => {
-  if (tab.url?.includes('share.betterseqta')) {
-    const id = new URL(tab.url).searchParams.get('id');
-    const justCreated = new URL(tab.url).searchParams.get('justCreated');
-    browser.tabs.update(tabId, { url: `${browser.runtime.getURL('src/interface/index.html')}?id=${id}&justCreated=${justCreated}#theme` });
-  }
-});
-
 // Main message listener
 browser.runtime.onMessage.addListener((request: any, _sender: any, sendResponse: any) => {
   switch (request.type) {

src/interface/components/ThemeCover.tsx

@@ -46,9 +46,8 @@ export const ThemeCover: React.FC<ThemeCoverProps> = ({
   const handleShareClick = (event: React.MouseEvent) => {
     event?.preventDefault();
     setUploading(true);
-    browser.runtime.sendMessage({ type: 'currentTab', info: 'ShareTheme', body: { themeID: theme.id } }).then((response) => {
+    browser.runtime.sendMessage({ type: 'currentTab', info: 'ShareTheme', body: { themeID: theme.id } }).then(() => {
       setUploading(false);
-      browser.tabs.create({ url: `https://share.betterseqta/theme?id=${response.id}&justCreated=true` });
     });
   };
 
@@ -68,7 +67,7 @@ export const ThemeCover: React.FC<ThemeCoverProps> = ({
         </div>
       )}
       
-      { ( !isEditMode ) && !downloaded && !theme.webURL ? (
+      { ( !isEditMode ) && !downloaded && !theme.webURL || true ? (
       <>
         <div
           className="absolute z-20 flex w-8 h-8 p-2 text-white transition-all rounded-full delay-[20ms] opacity-0 top-1 right-2 bg-black/50 place-items-center group-hover:opacity-100 group-hover:top-[1.25rem]"

src/interface/main.tsx

@@ -10,7 +10,6 @@ import font from '../resources/fonts/IconFamily.woff'
 
 import ThemeCreator from './pages/ThemeCreator';
 import Store from './pages/Store';
-import Theme from './pages/Theme';
 
 browser.storage.local.get().then(({ telemetry, DarkMode }) => {
   if (DarkMode) document.documentElement.classList.add('dark');
@@ -54,7 +53,6 @@ root.render(
           <Route path="/settings/embedded" element={<SettingsPage standalone={false} />} />
           <Route path="/store" element={<Store />} />
           <Route path="/themeCreator" element={<ThemeCreator />} />
-          <Route path="/theme" element={<Theme />} />
         </Routes>
       </HashRouter>
     </ErrorBoundary>

src/interface/pages/Theme.tsx

@@ -1,131 +0,0 @@
-import { useEffect, useState } from "react";
-import PocketBase from 'pocketbase';
-import { ThemesRecord } from "../types/pocketbase-types";
-import ConfettiExplosion from 'react-confetti-explosion';
-import { LinkIcon } from "@heroicons/react/24/outline";
-import { ToastContainer, toast } from 'react-toastify';
-import browser from 'webextension-polyfill';
-import 'react-toastify/dist/ReactToastify.css';
-import localforage from "localforage";
-
-const pb = new PocketBase('https://betterseqta.pockethost.io');
-
-const Theme = () => {
-  const [isLoading, setIsLoading] = useState<boolean>(true);
-  const [theme, setTheme] = useState<ThemesRecord | null>(null);
-  const [themeID, setThemeID] = useState<string>('');
-  const [justCreated, setJustCreated] = useState(false);
-  const [displayConfetti, setDisplayConfetti] = useState(true);
-  const [currentThemes, setCurrentThemes] = useState<string[]>([]);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDisplayConfetti(false);
-    }, 5000);
-    return () => clearTimeout(timer);
-  }, []);
-
-  useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    document.title = 'BetterSEQTA+' // Reset the title
-    const themeID = urlParams.get('id');
-    const justCreated = urlParams.get('justCreated');
-    if (themeID) setThemeID(themeID);
-    
-    const getTheme = async (themeID: string) => {
-      const theme = await pb.collection<ThemesRecord>('themes').getOne(themeID);
-      console.debug(theme);
-      setIsLoading(false);
-      setTheme(theme);
-      document.title = theme.name;
-
-      const availableThemes = await localforage.getItem('availableThemes') as string[];
-      setCurrentThemes(availableThemes)  
-    }
-
-    if (themeID && themeID !== 'null') {
-      getTheme(themeID);
-      setJustCreated(justCreated === 'true');
-    }
-  }, [])
-
-  return (
-    <>
-      { isLoading && (
-        <div className="flex items-center justify-center min-h-screen">
-          <div className="w-32 h-32 border-t-2 border-b-2 border-blue-500 rounded-full animate-spin"></div>
-        </div>
-      )}
-      { theme && (
-        <div className="flex flex-col items-center justify-center min-h-screen dark:text-white">
-          <div className="p-8 text-center shadow-xl rounded-2xl bg-zinc-800 min-w-96">
-            { justCreated ? (
-              <>
-                {
-                  displayConfetti && (
-                    <ConfettiExplosion
-                      className="absolute"
-                      colors={['#FF0000', '#FF7F50', '#DE3163', '#40E0D0', '#6495ED']}
-                      duration={5000}
-                      width={1500}
-                      force={1}
-                    />
-                  )
-                }
-                <>
-                  <h2 className="mb-2 text-2xl font-bold">Theme Created Successfully!</h2>
-                  <p className="mb-8">Share the install link below with your friends to install the theme!</p>
-                  <div
-                    className="flex gap-2 py-2 pl-3 pr-2 text-white backdrop-blur-sm rounded-3xl ring-white/20 ring-1 bg-zinc-950/50"
-                  >
-                    <span className="my-auto">
-                      {`https://share.betterseqta/theme?id=${themeID}`}
-                    </span>
-                    
-                    <button
-                      className="flex gap-1 px-3 py-2 text-white transition cursor-pointer rounded-2xl ring-white/20 ring-1 bg-zinc-950/20 hover:bg-black/85"
-                      onClick={() => {
-                        navigator.clipboard.writeText(`https://share.betterseqta/theme?id=${themeID}`);
-                        toast("Link copied to clipboard!");
-                      }}
-                    >
-                      <LinkIcon className="w-4 h-4" />
-                      Copy Link
-                    </button>
-                  </div>
-                </>
-              </>
-            ) : (
-              <>
-                <h2 className="mb-2 text-2xl font-bold">{theme.name}</h2>
-                <p className="mb-8">{theme.description}</p>
-                {
-                  currentThemes.includes((theme.theme as { id: string }).id) ?
-                  <button
-                      className="flex justify-center w-full gap-1 px-3 py-2 text-white transition cursor-not-allowed rounded-2xl ring-white/20 ring-1 bg-zinc-950/20"
-                  >
-                    Theme Installed!
-                  </button>
-                :
-                  <button
-                      className="flex justify-center w-full gap-1 px-3 py-2 text-white transition cursor-pointer rounded-2xl ring-white/20 hover:ring-white/10 ring-1 bg-zinc-950/20 hover:bg-zinc-950/40"
-                      onClick={() => {
-                        browser.runtime.sendMessage({ type: 'DownloadTheme', body: { theme } });
-                        setCurrentThemes([...currentThemes, (theme.theme as { id: string }).id]);
-                      }}
-                  >
-                    Install Theme
-                  </button>
-                }
-              </>
-            )}
-          </div>
-          <ToastContainer theme="dark" />
-        </div>
-      )}
-    </>
-  );
-};
-
-export default Theme;
-

src/seqta/ui/themes/shareTheme.ts

@@ -1,7 +1,17 @@
-import PocketBase from 'pocketbase';
 import { getTheme } from './getTheme';
 
-const pb = new PocketBase('https://betterseqta.pockethost.io');
+const saveThemeFile = (data: object, fileName: string) => {
+  const fileData = JSON.stringify(data, null, 2);
+  const blob = new Blob([fileData], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `${fileName}.theme`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+};
 
 const shareTheme = async (themeID: string) => {
   try {
@@ -14,48 +24,53 @@ const shareTheme = async (themeID: string) => {
 
     // Extract images and coverImage from themeData, if they exist
     const { CustomImages = [], coverImage, ...themeWithoutImages } = themeData;
+    console.log('themeData', themeData);
 
-    const finalCoverImage = await fetch(coverImage as string).then((res) => res.blob());
+    // Helper function to convert Blob to Base64
-    let finalImages: { id: string, data: Blob }[] = [];
+    const blobToBase64 = (blob: Blob) => new Promise<string>((resolve, reject) => {
-    
+      const reader = new FileReader();
-    for (const image of CustomImages) {
+      reader.onloadend = () => resolve(reader.result as string);
-      const finalImage = await fetch(image.url as string).then((res) => res.blob());
+      reader.onerror = reject;
+      reader.readAsDataURL(blob);
+    });
 
-      finalImages.push({
+    // Convert cover image to Base64
+    const coverImageBlob = await fetch(coverImage as string).then(res => res.blob());
+    const coverImageBase64 = await blobToBase64(coverImageBlob);
+
+    // Convert custom images to Base64
+    const finalImages = await Promise.all(CustomImages.map(async (image) => {
+      const imageBlob = await fetch(image.url as string).then(res => res.blob());
+      const imageBase64 = await blobToBase64(imageBlob);
+      return {
         id: image.id,
-        data: finalImage,
+        variableName: image.variableName,
-      });
+        data: imageBase64,
-    }
+      };
-
+    }));
 
     // Prepare the non-file data for uploading
     const data = {
       name: themeData.name || 'Unnamed Theme',
       description: themeData.description || 'No description',
-      downloads: '0', // Assuming initial value as 0
       theme: JSON.stringify({
         ...themeWithoutImages,
-        images: [
+        images: finalImages.map((image) => ({
-          ...CustomImages.map((image) => ({
+          id: image.id,
-            id: image.id,
+          variableName: image.variableName,
-            variableName: image.variableName,
+          data: image.data,
-          })),
+        })),
-        ],
+      }),
-      }), // Convert theme data (excluding images) to JSON string
       submitted: true,
-      coverImage: new File([finalCoverImage], 'coverImage.png'),
+      coverImage: coverImageBase64,
-      images: [ ...finalImages.map((image) => new File([image.data], `${image.id}.png`)) ],
+      images: finalImages,
     };
 
-    const record = await pb.collection('themes').create(data);
+    console.log('Final data', data);
-
+    
-    console.debug('record', record);
+    saveThemeFile(data, themeData.name || 'Unnamed_Theme');
-
-    return record.id;
   } catch (error) {
     console.error('Error sharing theme:', error);
-
-    return null;
   }
 };