Improve upload status loading and correct bolt site and project info.

Add open github repo button in Home

Author: mamertofabian

src/content/upload-status.ts

@@ -27,9 +27,6 @@ function initializeUI() {
   });
 }
 
-// Initialize UI
-initializeUI();
-
 // Cleanup on navigation
 window.addEventListener('unload', () => {
   if (app) {
@@ -42,3 +39,9 @@ window.addEventListener('unload', () => {
 chrome.runtime.onConnect.addListener(() => {
   initializeUI();
 });
+
+// Export initialization function for the loader
+export const onExecute = ({ perf }: { perf: { injectTime: number; loadTime: number } }) => {
+  console.log('🚀 Upload status initializing...', perf);
+  initializeUI();
+};

src/lib/components/NotBoltSite.svelte

@@ -3,33 +3,41 @@
     import { Button } from "$lib/components/ui/button";
   
     export let currentUrl: string = '';
+    export let noProjectLoaded: boolean = false;
   
     function openBolt() {
       chrome.tabs.create({ url: 'https://bolt.new' });
     }
-  </script>
+
+    $: isBoltSite = currentUrl.includes('bolt.new');
+</script>
 
-  <div class="flex flex-col items-center justify-center p-4 text-center space-y-6">
+<div class="flex flex-col items-center justify-center p-4 text-center space-y-6">
     <div class="rounded-full bg-slate-800 p-3">
       <AlertCircle class="w-6 h-6 text-slate-200" />
     </div>
 
     <div class="space-y-2">
-      <h3 class="text-lg font-semibold text-slate-200">Not a Bolt Website</h3>
+      <h3 class="text-lg font-semibold text-slate-200">Not a Bolt Project</h3>
       <p class="text-sm text-slate-400">
-        This extension only works with bolt.new websites.
-        {#if currentUrl}
+        This extension only works with bolt.new projects.
+        {#if currentUrl && !noProjectLoaded}
           <br/>Current site: <span class="text-slate-500">{currentUrl}</span>
         {/if}
       </p>
     </div>
 
-    <Button 
-      variant="outline" 
-      class="border-slate-800 hover:bg-slate-800 text-slate-200"
-      on:click={openBolt}
-    >
-      Go to bolt.new
-    </Button>
-  </div>
-  
+    {#if isBoltSite && noProjectLoaded}
+      <p class="text-sm text-amber-300 font-semibold">
+        Load a Bolt project to continue
+      </p>
+    {:else if !isBoltSite}
+      <Button
+        variant="outline"
+        class="border-slate-800 hover:bg-slate-800 text-slate-200"
+        on:click={openBolt}
+      >
+        Go to bolt.new
+      </Button>
+    {/if}
+</div>

src/lib/components/StatusAlert.svelte

@@ -9,6 +9,7 @@
 
   export let isSettingsValid: boolean;
   export let projectId: string | null;
+  export let gitHubUsername: string;
   export let repoName: string;
   export let branch: string;
 
@@ -23,6 +24,11 @@
     }
   }
 
+  function openGitHub(event: MouseEvent | KeyboardEvent) {
+    event.stopPropagation();
+    chrome.tabs.create({ url: `https://github.com/${gitHubUsername}/${repoName}` });
+  }
+
   $: console.log(`📄 StatusAlert: ${projectId}`);
 </script>
 
@@ -64,8 +70,13 @@
         <span class="font-mono">{repoName}</span>
         <span>Branch:</span>
         <span class="font-mono">{branch}</span>
-        <span class="col-span-2 text-sm text-slate-400 mt-1">Click to edit settings</span>
       </div>
+      <button
+        class="col-span-2 text-sm mt-2 border border-slate-700 rounded px-2 py-1 text-slate-400 hover:bg-slate-800 hover:text-slate-300 transition-colors"
+        on:click|stopPropagation={openGitHub}
+      >
+        Open GitHub repository
+      </button>
     </AlertDescription>
   </Alert>
 {/if}

src/popup/App.svelte

@@ -121,7 +121,7 @@
 </script>
 
 <main class="w-[400px] min-h-[400px] p-4 bg-slate-950 text-slate-50">
-  {#if isBoltSite}
+  {#if isBoltSite && parsedProjectId}
   <Tabs bind:value={activeTab} class="w-full">
     <Header />
 
@@ -140,6 +140,7 @@
           <StatusAlert 
             {isSettingsValid} 
             projectId={parsedProjectId}
+            gitHubUsername={repoOwner}
             {repoName}
             {branch}
             on:switchTab={handleSwitchTab}
@@ -182,7 +183,7 @@
   {:else}
   <Card class="border-slate-800 bg-slate-900">
     <CardContent>
-      <NotBoltSite {currentUrl} />
+      <NotBoltSite {currentUrl} noProjectLoaded={!parsedProjectId} />
     </CardContent>
     <Footer />
   </Card>