From c0d562717089a590ae737860a5b6eada14a4ba1e Mon Sep 17 00:00:00 2001
From: Mamerto Fabian Jr <mfabianjr@gmail.com>
Date: Mon, 25 Nov 2024 17:58:22 +0800
Subject: [PATCH] Improve upload status loading and correct bolt site and
 project info. Add open github repo button in Home

---
 src/content/upload-status.ts          |  9 ++++---
 src/lib/components/NotBoltSite.svelte | 36 ++++++++++++++++-----------
 src/lib/components/StatusAlert.svelte | 13 +++++++++-
 src/popup/App.svelte                  |  5 ++--
 4 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/src/content/upload-status.ts b/src/content/upload-status.ts
index 369df75..3d8053b 100644
--- a/src/content/upload-status.ts
+++ b/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();
+};
diff --git a/src/lib/components/NotBoltSite.svelte b/src/lib/components/NotBoltSite.svelte
index c109193..361d6a4 100644
--- a/src/lib/components/NotBoltSite.svelte
+++ b/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>
-  
\ No newline at end of file
+    {#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>
diff --git a/src/lib/components/StatusAlert.svelte b/src/lib/components/StatusAlert.svelte
index 4e959c7..f0da6bb 100644
--- a/src/lib/components/StatusAlert.svelte
+++ b/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}
diff --git a/src/popup/App.svelte b/src/popup/App.svelte
index ba26e1e..9060e65 100644
--- a/src/popup/App.svelte
+++ b/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>