From f966586ae8cdb490e2962c4e9b1ecf3bc1b8f7d1 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Tue, 5 Dec 2023 10:19:01 +0200
Subject: [PATCH] mobile sign-in btn, save msg draft, more subtle error

---
 packages/app/src/Element/ErrorOrOffline.tsx          |  8 +++++++-
 .../app/src/Element/Event/Create/NoteCreator.tsx     | 12 ++++++++++--
 packages/app/src/Element/Feed/Timeline.tsx           |  2 +-
 packages/app/src/Login/Functions.ts                  |  1 +
 .../app/src/Pages/Layout/NotificationsHeader.tsx     |  5 ++---
 packages/app/src/index.css                           |  4 ----
 6 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/app/src/Element/ErrorOrOffline.tsx b/packages/app/src/Element/ErrorOrOffline.tsx
index 79031f40..7db9dafc 100644
--- a/packages/app/src/Element/ErrorOrOffline.tsx
+++ b/packages/app/src/Element/ErrorOrOffline.tsx
@@ -1,6 +1,7 @@
 import { OfflineError } from "@snort/shared";
 import { Offline } from "./Offline";
 import classNames from "classnames";
+import Icon from "@/Icons/Icon";
 
 export function ErrorOrOffline({
   error,
@@ -14,6 +15,11 @@ export function ErrorOrOffline({
   if (error instanceof OfflineError) {
     return <Offline onRetry={onRetry} className={className} />;
   } else {
-    return <b className={classNames("error", className)}>{error.message}</b>;
+    return (
+      <div className={classNames("flex flex-row items-center px-4 py-3 gap-2", className)}>
+        <Icon name="alert-circle" size={24} />
+        <b>{error.message}</b>
+      </div>
+    );
   }
 }
diff --git a/packages/app/src/Element/Event/Create/NoteCreator.tsx b/packages/app/src/Element/Event/Create/NoteCreator.tsx
index a0315db3..4a1430bc 100644
--- a/packages/app/src/Element/Event/Create/NoteCreator.tsx
+++ b/packages/app/src/Element/Event/Create/NoteCreator.tsx
@@ -13,7 +13,7 @@ import ProfileImage from "@/Element/User/ProfileImage";
 import useFileUpload from "@/Upload";
 import Note from "@/Element/Event/Note";
 
-import { ClipboardEventHandler, DragEvent } from "react";
+import { ClipboardEventHandler, DragEvent, useEffect } from "react";
 import useLogin from "@/Hooks/useLogin";
 import { GetPowWorker } from "@/index";
 import AsyncButton from "@/Element/Button/AsyncButton";
@@ -37,6 +37,13 @@ export function NoteCreator() {
   const note = useNoteCreator();
   const relays = login.relays;
 
+  useEffect(() => {
+    const draft = localStorage.getItem("msgDraft");
+    if (draft) {
+      note.update(n => (n.note = draft));
+    }
+  }, []);
+
   async function buildNote() {
     try {
       note.update(v => (v.error = ""));
@@ -165,6 +172,7 @@ export function NoteCreator() {
         }),
       );
       note.update(n => n.reset());
+      localStorage.removeItem("msgDraft");
     }
   }
 
@@ -228,6 +236,7 @@ export function NoteCreator() {
   function onChange(ev: React.ChangeEvent<HTMLTextAreaElement>) {
     const { value } = ev.target;
     note.update(n => (n.note = value));
+    localStorage.setItem("msgDraft", value);
   }
 
   function cancel() {
@@ -647,7 +656,6 @@ export function NoteCreator() {
 
   function reset() {
     note.update(v => {
-      v.reset();
       v.show = false;
     });
   }
diff --git a/packages/app/src/Element/Feed/Timeline.tsx b/packages/app/src/Element/Feed/Timeline.tsx
index b63fc616..65299574 100644
--- a/packages/app/src/Element/Feed/Timeline.tsx
+++ b/packages/app/src/Element/Feed/Timeline.tsx
@@ -95,7 +95,7 @@ const Timeline = (props: TimelineProps) => {
         displayAs={displayAs}
       />
       {(props.loadMore === undefined || props.loadMore === true) && (
-        <div className="flex items-center">
+        <div className="flex items-center px-3 py-4">
           <button type="button" onClick={() => feed.loadMore()}>
             <FormattedMessage defaultMessage="Load more" id="00LcfG" />
           </button>
diff --git a/packages/app/src/Login/Functions.ts b/packages/app/src/Login/Functions.ts
index d5e79bea..012c8db1 100644
--- a/packages/app/src/Login/Functions.ts
+++ b/packages/app/src/Login/Functions.ts
@@ -71,6 +71,7 @@ export function logout(id: string) {
   FollowsFeed.clear();
   Chats.clear();
   deleteRefCode();
+  localStorage.clear();
 }
 
 export function markNotificationsRead(state: LoginSession) {
diff --git a/packages/app/src/Pages/Layout/NotificationsHeader.tsx b/packages/app/src/Pages/Layout/NotificationsHeader.tsx
index 74b72d89..09084679 100644
--- a/packages/app/src/Pages/Layout/NotificationsHeader.tsx
+++ b/packages/app/src/Pages/Layout/NotificationsHeader.tsx
@@ -1,7 +1,6 @@
 import { useNavigate } from "react-router-dom";
 import { base64 } from "@scure/base";
 import { unwrap } from "@snort/shared";
-import { FormattedMessage } from "react-intl";
 import Icon from "@/Icons/Icon";
 import useKeyboardShortcut from "@/Hooks/useKeyboardShortcut";
 import { isFormElement } from "@/SnortUtils";
@@ -63,8 +62,8 @@ const NotificationsHeader = () => {
 
   if (!publicKey) {
     return (
-      <button type="button" className="mr-3" onClick={() => navigate("/login/sign-up")}>
-        <FormattedMessage defaultMessage="Sign Up" id="39AHJm" />
+      <button onClick={() => navigate("/login/sign-up")} className="mr-3 primary p-2">
+        <Icon name="sign-in" size={20} className="md:hidden" />
       </button>
     );
   }
diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index 30d70310..fcb5f430 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -647,10 +647,6 @@ div.form-col {
   gap: 10px;
 }
 
-.error {
-  color: var(--error);
-}
-
 .warning {
   color: var(--warning);
 }