From 7ab6dd285adaf4060b381be834c6e426f82f4b3a Mon Sep 17 00:00:00 2001
From: DanConwayDev <DanConwayDev@protonmail.com>
Date: Thu, 23 May 2024 10:44:42 +0100
Subject: [PATCH] fix: error alert overflow

nostr references were overflowing
---
 src/lib/components/AlertError.svelte          | 19 +++++++++++++
 src/lib/wrappers/RepoPageWrapper.svelte       | 21 +++------------
 src/routes/e/[nostr_ref]/+page.svelte         | 23 ++++------------
 src/routes/p/[npub]/+page.svelte              | 25 ++++-------------
 .../issues/[issue_nip19]/+page.svelte         | 27 +++++--------------
 .../r/[repo_naddr]/issues/new/+page.svelte    | 24 ++++++-----------
 .../proposals/[proposal_nip19]/+page.svelte   | 27 +++++--------------
 7 files changed, 54 insertions(+), 112 deletions(-)
 create mode 100644 src/lib/components/AlertError.svelte

diff --git a/src/lib/components/AlertError.svelte b/src/lib/components/AlertError.svelte
new file mode 100644
index 0000000..1c6c6e3
--- /dev/null
+++ b/src/lib/components/AlertError.svelte
@@ -0,0 +1,19 @@
+<div role="alert" class="max-w-xl m-auto">
+    <div role="alert" class="alert alert-error m-auto mt-6">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-6 w-6 shrink-0 stroke-current"
+            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
+        >
+        <div>
+            <slot />
+        </div>
+    </div>
+</div>
diff --git a/src/lib/wrappers/RepoPageWrapper.svelte b/src/lib/wrappers/RepoPageWrapper.svelte
index c3e7a15..de6954d 100644
--- a/src/lib/wrappers/RepoPageWrapper.svelte
+++ b/src/lib/wrappers/RepoPageWrapper.svelte
@@ -11,6 +11,7 @@
   import { ensureIssueSummaries } from '$lib/stores/Issues'
   import type { RepoPage } from '$lib/components/repo/type'
   import { naddrToRepoA } from '$lib/components/repo/utils'
+  import AlertError from '$lib/components/AlertError.svelte'
 
   export let repo_naddr = ''
   export let selected_tab: RepoPage = 'about'
@@ -41,21 +42,7 @@
 
 {#if invalid_naddr || (waited_5_secs && !$selected_repo_collection.loading && $selected_repo_event.name.length === 0)}
   <Container>
-    <div role="alert" class="max-w-xl m-auto">
-      <div role="alert" class="alert alert-error m-auto mt-6 break-all">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-6 w-6 shrink-0 stroke-current"
-          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
-        >
-        <div>
+    <AlertError>
         {#if invalid_naddr}
           <div>Error! invalid naddr in url:</div>
           <div class="break-all">{repo_naddr}</div>
@@ -63,9 +50,7 @@
           <div>Error! cannot find repository event:</div>
           <div class="break-all">{repo_naddr}</div>
         {/if}
-        </div>
-      </div>
-    </div>
+    </AlertError>
   </Container>
 {:else}
   <RepoHeader {...$selected_repo_event} {selected_tab} />
diff --git a/src/routes/e/[nostr_ref]/+page.svelte b/src/routes/e/[nostr_ref]/+page.svelte
index 8ea6782..40ea70c 100644
--- a/src/routes/e/[nostr_ref]/+page.svelte
+++ b/src/routes/e/[nostr_ref]/+page.svelte
@@ -8,6 +8,7 @@
   import { aToNaddr } from '$lib/components/repo/utils'
   import { ensureIssueFull } from '$lib/stores/Issue'
   import { ensureProposalFull } from '$lib/stores/Proposal'
+  import AlertError from '$lib/components/AlertError.svelte'
 
   export let data: { nostr_ref: string }
 
@@ -98,24 +99,10 @@
 
 {#if error && waited}
   <Container>
-    <div
-      role="alert"
-      class="wrap alert alert-error m-auto mt-6 w-full max-w-lg"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="h-6 w-6 shrink-0 stroke-current"
-        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! {error_msg}: {data.nostr_ref}</span>
-    </div>
+    <AlertError>
+      <div>Error! {error_msg}:</div>
+      <div class="break-all">{data.nostr_ref}</div>
+    </AlertError>
   </Container>
 {:else}
   <Container>loading...</Container>
diff --git a/src/routes/p/[npub]/+page.svelte b/src/routes/p/[npub]/+page.svelte
index 976b90b..abd8e9a 100644
--- a/src/routes/p/[npub]/+page.svelte
+++ b/src/routes/p/[npub]/+page.svelte
@@ -9,6 +9,7 @@
   } from '$lib/stores/ReposPubkey'
   import { repoCollectionToSummary } from '$lib/stores/repos'
   import { summary_defaults } from '$lib/components/repo/type'
+  import AlertError from '$lib/components/AlertError.svelte'
 
   export let data: { npub: string }
 
@@ -29,26 +30,10 @@
 
 {#if error}
   <Container>
-    <div
-      role="alert"
-      class="wrap alert alert-error m-auto mt-6 w-full max-w-lg"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="h-6 w-6 shrink-0 stroke-current"
-        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! profile reference in URL is not a valid npub or nprofile: {data.npub}</span
-      >
-    </div>
+    <AlertError>
+      <div>Error! profile reference in URL is not a valid npub or nprofile::</div>
+      <div class="break-all">{data.npub}</div>
+    </AlertError>
   </Container>
 {:else if pubkey}
   <Container>
diff --git a/src/routes/r/[repo_naddr]/issues/[issue_nip19]/+page.svelte b/src/routes/r/[repo_naddr]/issues/[issue_nip19]/+page.svelte
index a39313f..da491df 100644
--- a/src/routes/r/[repo_naddr]/issues/[issue_nip19]/+page.svelte
+++ b/src/routes/r/[repo_naddr]/issues/[issue_nip19]/+page.svelte
@@ -10,6 +10,7 @@
   import ProposalDetails from '$lib/components/proposals/ProposalDetails.svelte'
   import RepoPageWrapper from '$lib/wrappers/RepoPageWrapper.svelte'
   import { naddrToRepoA, neventOrNoteToHexId } from '$lib/components/repo/utils'
+  import AlertError from '$lib/components/AlertError.svelte'
 
   export let data: {
     repo_naddr: string
@@ -55,28 +56,14 @@
 <RepoPageWrapper {repo_naddr} with_side_bar={false} selected_tab="issues">
   {#if invalid_issue_ref || (waited_5_secs && issue_error)}
     <Container>
-      <div role="alert" class="alert alert-error m-auto mt-6 w-full max-w-xs">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-6 w-6 shrink-0 stroke-current"
-          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
-        >
-        {#if invalid_issue_ref}<span
-            >Error! invalid Issue reference: {issue_id} '{issue_nip19}'</span
-          >
+      <AlertError>
+        {#if invalid_issue_ref}
+          <div>Error! invalid Issue reference: {issue_id}</div>
+          <div class="break-all">'{issue_nip19}'</div>
         {:else}
-          <span
-            >Error! cannot find Issue {repo_error ? 'or repo ' : ''}event</span
-          >
+          <div>Error! cannot find Issue {repo_error ? 'or repo ' : ''}event</div>
         {/if}
-      </div>
+      </AlertError>
     </Container>
   {:else}
     <ProposalHeader {...$selected_issue_full.summary} />
diff --git a/src/routes/r/[repo_naddr]/issues/new/+page.svelte b/src/routes/r/[repo_naddr]/issues/new/+page.svelte
index d3d2d77..1007586 100644
--- a/src/routes/r/[repo_naddr]/issues/new/+page.svelte
+++ b/src/routes/r/[repo_naddr]/issues/new/+page.svelte
@@ -9,6 +9,7 @@
   import Container from '$lib/components/Container.svelte'
   import ComposeIssue from '$lib/wrappers/ComposeIssue.svelte'
   import { naddrToRepoA } from '$lib/components/repo/utils'
+  import AlertError from '$lib/components/AlertError.svelte'
 
   export let data: { repo_naddr: string }
   let repo_naddr = data.repo_naddr
@@ -34,25 +35,16 @@
 
 {#if invalid_naddr || (waited_5_secs && $selected_repo_collection.loading && $selected_repo_event.name.length)}
   <Container>
-    <div role="alert" class="alert alert-error m-auto mt-6 w-full max-w-xs">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="h-6 w-6 shrink-0 stroke-current"
-        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
-      >
+    <AlertError>
       {#if invalid_naddr}
-        <span>Error! invalid naddr in url: {repo_naddr}</span>
+        <div>Error! invalid naddr in url:</div>
+        <div class="break-all">{repo_naddr}</div>
       {:else}
-        <span>Error! cannot find repository event: {repo_naddr}</span>
+        <div>Error! cannot find repository event:</div>
+        <div class="break-all">{repo_naddr}</div>
       {/if}
-    </div>
+
+    </AlertError>
   </Container>
 {:else}
   <RepoHeader {...$selected_repo_event} />
diff --git a/src/routes/r/[repo_naddr]/proposals/[proposal_nip19]/+page.svelte b/src/routes/r/[repo_naddr]/proposals/[proposal_nip19]/+page.svelte
index 61de9bc..3416381 100644
--- a/src/routes/r/[repo_naddr]/proposals/[proposal_nip19]/+page.svelte
+++ b/src/routes/r/[repo_naddr]/proposals/[proposal_nip19]/+page.svelte
@@ -10,6 +10,7 @@
   import ProposalDetails from '$lib/components/proposals/ProposalDetails.svelte'
   import RepoPageWrapper from '$lib/wrappers/RepoPageWrapper.svelte'
   import { naddrToRepoA, neventOrNoteToHexId } from '$lib/components/repo/utils'
+  import AlertError from '$lib/components/AlertError.svelte'
 
   export let data: {
     repo_naddr: string
@@ -55,28 +56,14 @@
 <RepoPageWrapper {repo_naddr} with_side_bar={false} selected_tab="proposals">
   {#if invalid_proposal_ref || (waited_5_secs && proposal_error)}
     <Container>
-      <div role="alert" class="alert alert-error m-auto mt-6 w-full max-w-xs">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-6 w-6 shrink-0 stroke-current"
-          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
-        >
-        {#if invalid_proposal_ref}<span
-            >Error! invalid Issue reference: {proposal_id} '{proposal_nip19}'</span
-          >
+      <AlertError>
+        {#if invalid_proposal_ref}
+          <div>Error! invalid Issue reference: {proposal_id}</div>
+          <div class="break-all">'{proposal_nip19}'</div>
         {:else}
-          <span
-            >Error! cannot find Issue {repo_error ? 'or repo ' : ''}event</span
-          >
+          <div>Error! cannot find Issue {repo_error ? 'or repo ' : ''}event</div>
         {/if}
-      </div>
+      </AlertError>
     </Container>
   {:else}
     <ProposalHeader {...$selected_proposal_full.summary} />