feat(PrPage): display event not found error

using daisyui alert component

src/routes/repo/[repo_id]/pr/[pr_id]/+page.svelte

@@ -21,31 +21,65 @@
 
     ensureSelectedRepo(repo_id);
     ensurePRFull(repo_id, pr_id);
+
+    let repo_error = false;
+    let pr_error = false;
+    $: {
+        repo_error =
+            !$selected_repo.loading && $selected_repo.name.length === 0;
+        pr_error =
+            !$selected_pr_full.summary.loading &&
+            $selected_pr_full.summary.created_at === 0;
+    }
 </script>
 
-<RepoHeader {...$selected_repo} />
-<PrHeader {...$selected_pr_full.summary} />
+{#if !repo_error}
+    <RepoHeader {...$selected_repo} />
+{/if}
 
-<Container>
-    <div class="md:flex">
-        <div class="md:w-2/3 md:mr-2">
-            <div class="prose my-3">
-                {$selected_pr_full.summary.descritpion}
+{#if pr_error}
+    <Container>
+        <div role="alert" class="alert alert-error mt-6 w-full max-w-xs m-auto">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="stroke-current shrink-0 h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                ><path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+                /></svg
+            >
+            <span
+                >Error! cannot find PR {repo_error ? "or repo " : ""}event</span
+            >
+        </div>
+    </Container>
+{:else}
+    <PrHeader {...$selected_pr_full.summary} />
+    <Container>
+        <div class="md:flex">
+            <div class="md:w-2/3 md:mr-2">
+                <div class="prose my-3">
+                    {$selected_pr_full.summary.descritpion}
+                </div>
+                {#if $selected_pr_full.pr_event}
+                    <Thread
+                        event={$selected_pr_full.pr_event}
+                        replies={$selected_pr_replies}
+                    />
+                {/if}
             </div>
-            {#if $selected_pr_full.pr_event}
-                <Thread
-                    event={$selected_pr_full.pr_event}
-                    replies={$selected_pr_replies}
+            <div class="w-1/3 ml-2 prose hidden md:flex">
+                <PrDetails
+                    summary={$selected_pr_full.summary}
+                    status={$selected_pr_full.status}
+                    labels={$selected_pr_full.labels}
+                    loading={$selected_pr_full.loading}
                 />
-            {/if}
-        </div>
-        <div class="w-1/3 ml-2 prose hidden md:flex">
-            <PrDetails
-                summary={$selected_pr_full.summary}
-                status={$selected_pr_full.status}
-                labels={$selected_pr_full.labels}
-                loading={$selected_pr_full.loading}
-            />
+            </div>
         </div>
-    </div>
-</Container>
+    </Container>
+{/if}