From f3dfeab0f8e1b95dfd58114f230d67daf5f7e3d5 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Sun, 3 Dec 2023 14:06:40 +0000
Subject: [PATCH] fix: close ok row

---
 .../src/Element/Event/Create/NoteCreator.tsx  | 28 +++++++++----------
 .../Element/Event/Create/OkResponseRow.tsx    |  5 +++-
 packages/app/src/Pages/Layout/LogoHeader.tsx  |  5 ++--
 packages/app/src/Pages/Root.tsx               |  2 +-
 packages/app/src/Toaster.tsx                  | 12 +++++---
 5 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/packages/app/src/Element/Event/Create/NoteCreator.tsx b/packages/app/src/Element/Event/Create/NoteCreator.tsx
index a4be4fe9..3e81a08f 100644
--- a/packages/app/src/Element/Event/Create/NoteCreator.tsx
+++ b/packages/app/src/Element/Event/Create/NoteCreator.tsx
@@ -157,7 +157,7 @@ export function NoteCreator() {
           if (CONFIG.noteCreatorToast) {
             r.forEach(rr => {
               Toastore.push({
-                element: <OkResponseRow rsp={rr} />,
+                element: c => <OkResponseRow rsp={rr} close={c} />,
                 expire: unixNow() + (rr.ok ? 5 : 55555),
               });
             });
@@ -329,18 +329,18 @@ export function NoteCreator() {
                   onChange={e => {
                     note.update(
                       v =>
-                        (v.selectedCustomRelays =
-                          // set false if all relays selected
-                          e.target.checked &&
+                      (v.selectedCustomRelays =
+                        // set false if all relays selected
+                        e.target.checked &&
                           note.selectedCustomRelays &&
                           note.selectedCustomRelays.length == a.length - 1
-                            ? undefined
-                            : // otherwise return selectedCustomRelays with target relay added / removed
-                              a.filter(el =>
-                                el === r
-                                  ? e.target.checked
-                                  : !note.selectedCustomRelays || note.selectedCustomRelays.includes(el),
-                              )),
+                          ? undefined
+                          : // otherwise return selectedCustomRelays with target relay added / removed
+                          a.filter(el =>
+                            el === r
+                              ? e.target.checked
+                              : !note.selectedCustomRelays || note.selectedCustomRelays.includes(el),
+                          )),
                     );
                   }}
                 />
@@ -409,9 +409,9 @@ export function NoteCreator() {
                     onChange={e =>
                       note.update(
                         v =>
-                          (v.zapSplits = arr.map((vv, ii) =>
-                            ii === i ? { ...vv, weight: Number(e.target.value) } : vv,
-                          )),
+                        (v.zapSplits = arr.map((vv, ii) =>
+                          ii === i ? { ...vv, weight: Number(e.target.value) } : vv,
+                        )),
                       )
                     }
                   />
diff --git a/packages/app/src/Element/Event/Create/OkResponseRow.tsx b/packages/app/src/Element/Event/Create/OkResponseRow.tsx
index fc2088f1..8387bc8c 100644
--- a/packages/app/src/Element/Event/Create/OkResponseRow.tsx
+++ b/packages/app/src/Element/Event/Create/OkResponseRow.tsx
@@ -1,4 +1,5 @@
 import AsyncButton from "@/Element/Button/AsyncButton";
+import IconButton from "@/Element/Button/IconButton";
 import useEventPublisher from "@/Hooks/useEventPublisher";
 import useLogin from "@/Hooks/useLogin";
 import Icon from "@/Icons/Icon";
@@ -10,7 +11,7 @@ import { OkResponse } from "@snort/system";
 import { useState } from "react";
 import { useIntl } from "react-intl";
 
-export function OkResponseRow({ rsp }: { rsp: OkResponse }) {
+export function OkResponseRow({ rsp, close }: { rsp: OkResponse, close: () => void }) {
   const [r, setResult] = useState(rsp);
   const { formatMessage } = useIntl();
   const { publisher, system } = useEventPublisher();
@@ -21,6 +22,7 @@ export function OkResponseRow({ rsp }: { rsp: OkResponse }) {
       removeRelay(login, unwrap(sanitizeRelayUrl(r.relay)));
       await saveRelays(system, publisher, login.relays.item);
     }
+    close();
   }
 
   async function retryPublish(r: OkResponse) {
@@ -57,6 +59,7 @@ export function OkResponseRow({ rsp }: { rsp: OkResponse }) {
           </AsyncButton>
         </div>
       )}
+      <IconButton icon={{name: "x"}} onClick={close} />
     </div>
   );
 }
diff --git a/packages/app/src/Pages/Layout/LogoHeader.tsx b/packages/app/src/Pages/Layout/LogoHeader.tsx
index 5dff2804..5a1aeeed 100644
--- a/packages/app/src/Pages/Layout/LogoHeader.tsx
+++ b/packages/app/src/Pages/Layout/LogoHeader.tsx
@@ -6,6 +6,7 @@ import { mapPlanName } from "../subscribe";
 import Icon from "@/Icons/Icon";
 import { unixNowMs } from "@snort/shared";
 import { Birthday, Day } from "@/Const";
+
 export function LogoHeader({ showText = false }) {
   const { subscriptions } = useLogin();
   const currentSubscription = getCurrentSubscription(subscriptions);
@@ -26,7 +27,7 @@ export function LogoHeader({ showText = false }) {
 
   return (
     <Link to="/" className="logo" onClick={handleLogoClick}>
-      <h1 className="flex flex-row items-center">
+      <h1 className="flex flex-row items-center md:justify-center">
         {CONFIG.navLogo && <img src={CONFIG.navLogo} className="w-8" />}
         {!CONFIG.navLogo && (
           <span className="text-2xl p-5 hidden md:flex xl:hidden w-8 h-8 rounded-xl bg-dark text-xl font-bold flex items-center justify-center">
@@ -41,7 +42,7 @@ export function LogoHeader({ showText = false }) {
         )}
       </h1>
       {currentSubscription && (
-        <div className="flex items-center g4 text-sm font-semibold tracking-wider ml-2">
+        <div className="flex items-center g4 text-sm font-semibold tracking-wider xl:ml-2">
           <Icon name="diamond" size={16} className="text-pro" />
           {mapPlanName(currentSubscription.type)}
         </div>
diff --git a/packages/app/src/Pages/Root.tsx b/packages/app/src/Pages/Root.tsx
index 312fd8d8..d187f2fd 100644
--- a/packages/app/src/Pages/Root.tsx
+++ b/packages/app/src/Pages/Root.tsx
@@ -33,7 +33,7 @@ export default function RootPage() {
   const code = getCurrentRefCode();
   return (
     <>
-      <div className="main-content p">
+      <div className="main-content sm:px-4 sm:py-3">
         <RootTabs base="" />
       </div>
       <div className="main-content">
diff --git a/packages/app/src/Toaster.tsx b/packages/app/src/Toaster.tsx
index 8e143b96..bf37728b 100644
--- a/packages/app/src/Toaster.tsx
+++ b/packages/app/src/Toaster.tsx
@@ -1,13 +1,12 @@
+import "./Toaster.css";
 import { ReactNode, useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
 import { v4 as uuid } from "uuid";
 import { ExternalStore, unixNow } from "@snort/shared";
-
 import Icon from "@/Icons/Icon";
-import "./Toaster.css";
 
 interface ToastNotification {
-  element: ReactNode;
+  element: ReactNode | ((remove: () => void) => ReactNode);
   expire?: number;
   icon?: string;
   id?: string;
@@ -28,6 +27,11 @@ class ToasterSlots extends ExternalStore<Array<ToastNotification>> {
     return [...this.#stack];
   }
 
+  remove(id?: string) {
+    this.#stack = this.#stack.filter(a => a.id !== id);
+    this.notifyChange();
+  }
+
   #eatToast() {
     const now = unixNow();
     this.#stack = this.#stack.filter(a => (a.expire ?? 0) > now);
@@ -48,7 +52,7 @@ export default function Toaster() {
       {toast.map(a => (
         <div className="p br b flex bg-dark g8 fade-in" key={a.id}>
           {a.icon && <Icon name={a.icon} />}
-          {a.element}
+          {typeof a.element === "function" ? a.element(() => Toastore.remove(a.id)) : a.element}
         </div>
       ))}
     </div>,