local error impl: errors shown fixed position that are wiped when moved from the view

2 files changed, 44 insertions, 1 deletions

diff --git a/packages/demobank-ui/src/components/Attention.tsx b/packages/demobank-ui/src/components/Attention.tsx
index 3313e5796..57d0a4199 100644
--- a/packages/demobank-ui/src/components/Attention.tsx
+++ b/packages/demobank-ui/src/components/Attention.tsx
@@ -9,7 +9,7 @@ interface Props {
   children?: ComponentChildren ,
 }
 export function Attention({ type = "info", title, children, onClose }: Props): VNode {
-  return <div class={`group attention-${type} mt-2`}>
+  return <div class={`group attention-${type} mt-2 shadow-lg`}>
     <div class="rounded-md group-[.attention-info]:bg-blue-50 group-[.attention-warning]:bg-yellow-50 group-[.attention-danger]:bg-red-50 group-[.attention-success]:bg-green-50 p-4 shadow">
       <div class="flex">
         <div >
diff --git a/packages/demobank-ui/src/components/ShowLocalNotification.tsx b/packages/demobank-ui/src/components/ShowLocalNotification.tsx
new file mode 100644
index 000000000..bb62a48f0
--- /dev/null
+++ b/packages/demobank-ui/src/components/ShowLocalNotification.tsx
@@ -0,0 +1,43 @@
+import { Notification } from "@gnu-taler/web-util/browser";
+import { h, Fragment, VNode } from "preact";
+import { Attention } from "./Attention.js";
+import { useSettings } from "../hooks/settings.js";
+
+export function ShowLocalNotification({ notification }: { notification?: Notification }): VNode {
+  if (!notification) return <Fragment />
+  switch (notification.message.type) {
+    case "error":
+      return <div class="relative">
+        <div class="fixed top-0 left-0 right-0 z-20 w-full p-4">
+          <Attention type="danger" title={notification.message.title} onClose={() => {
+            notification.remove()
+          }}>
+            {notification.message.description &&
+              <div class="mt-2 text-sm text-red-700">
+                {notification.message.description}
+              </div>
+            }
+            <MaybeShowDebugInfo info={notification.message.debug} />
+          </Attention>
+        </div>
+      </div>
+    case "info":
+      return <div class="relative">
+        <div class="fixed top-0 left-0 right-0 z-20 w-full p-4">
+          <Attention type="success" title={notification.message.title} onClose={() => {
+            notification.remove();
+          }} /></div></div>
+  }
+}
+
+
+function MaybeShowDebugInfo({ info }: { info: any }): VNode {
+  const [settings] = useSettings()
+  if (settings.showDebugInfo) {
+    return <pre class="whitespace-break-spaces ">
+      {info}
+    </pre>
+  }
+  return <Fragment />
+}
+