From 91a10024e09d0705a04b042ab2fadcc187d00eb2 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Thu, 30 Nov 2023 14:40:46 +0200
Subject: [PATCH] read-only mode nav avatar icon and text

---
 .../app/src/Pages/Layout/AccountHeader.tsx    | 12 ++++++++--
 packages/app/src/Pages/Layout/NavSidebar.tsx  | 23 ++++++++++++++-----
 packages/app/src/lang.json                    |  3 +++
 packages/app/src/translations/en.json         |  1 +
 4 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/packages/app/src/Pages/Layout/AccountHeader.tsx b/packages/app/src/Pages/Layout/AccountHeader.tsx
index fb1a5fbb..c632d5e6 100644
--- a/packages/app/src/Pages/Layout/AccountHeader.tsx
+++ b/packages/app/src/Pages/Layout/AccountHeader.tsx
@@ -3,7 +3,7 @@ import { useUserProfile } from "@snort/system-react";
 import { useMemo, useSyncExternalStore } from "react";
 import { base64 } from "@scure/base";
 import { unwrap } from "@snort/shared";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import SearchBox from "@/Element/SearchBox";
 import { ProfileLink } from "@/Element/User/ProfileLink";
 import Avatar from "@/Element/User/Avatar";
@@ -17,6 +17,7 @@ import { Notifications } from "@/Cache";
 
 const AccountHeader = () => {
   const navigate = useNavigate();
+  const { formatMessage } = useIntl();
 
   useKeyboardShortcut("/", event => {
     // if event happened in a form element, do nothing, otherwise focus on search input
@@ -76,6 +77,13 @@ const AccountHeader = () => {
       </button>
     );
   }
+
+  const readOnlyIcon = readonly && (
+    <span style={{ transform: "rotate(135deg)" }} title={formatMessage({ defaultMessage: "Read-only", id: "djNL6D" })}>
+      <Icon name="openeye" className="text-nostr-red" size={20} />
+    </span>
+  );
+
   return (
     <div className="header-actions">
       {!location.pathname.startsWith("/search") ? <SearchBox /> : <div className="grow"></div>}
@@ -90,7 +98,7 @@ const AccountHeader = () => {
         <HasNotificationsMarker />
       </Link>
       <ProfileLink pubkey={publicKey} user={profile}>
-        <Avatar pubkey={publicKey} user={profile} />
+        <Avatar pubkey={publicKey} user={profile} icons={readOnlyIcon} />
       </ProfileLink>
     </div>
   );
diff --git a/packages/app/src/Pages/Layout/NavSidebar.tsx b/packages/app/src/Pages/Layout/NavSidebar.tsx
index da87c9fa..28bfc80c 100644
--- a/packages/app/src/Pages/Layout/NavSidebar.tsx
+++ b/packages/app/src/Pages/Layout/NavSidebar.tsx
@@ -6,7 +6,7 @@ import Avatar from "../../Element/User/Avatar";
 import useLogin from "../../Hooks/useLogin";
 import { useUserProfile } from "@snort/system-react";
 import { NoteCreatorButton } from "../../Element/Event/Create/NoteCreatorButton";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import classNames from "classnames";
 import { HasNotificationsMarker } from "@/Pages/Layout/AccountHeader";
 import { getCurrentSubscription } from "@/Subscription";
@@ -65,19 +65,27 @@ const getNavLinkClass = (isActive: boolean, narrow: boolean) => {
 };
 
 export default function NavSidebar({ narrow = false }) {
-  const { publicKey, subscriptions } = useLogin(s => ({
+  const { publicKey, subscriptions, readonly } = useLogin(s => ({
     publicKey: s.publicKey,
     subscriptions: s.subscriptions,
+    readonly: s.readonly,
   }));
   const profile = useUserProfile(publicKey);
   const navigate = useNavigate();
   const sub = getCurrentSubscription(subscriptions);
+  const { formatMessage } = useIntl();
 
   const className = classNames(
     { "xl:w-56 xl:gap-3 xl:items-start": !narrow },
     "overflow-y-auto hide-scrollbar sticky items-center border-r border-neutral-900 top-0 z-20 h-screen max-h-screen hidden md:flex flex-col px-2 py-4 flex-shrink-0 gap-2",
   );
 
+  const readOnlyIcon = readonly && (
+    <span style={{ transform: "rotate(135deg)" }} title={formatMessage({ defaultMessage: "Read-only", id: "djNL6D" })}>
+      <Icon name="openeye" className="text-nostr-red" size={20} />
+    </span>
+  );
+
   return (
     <div className={className}>
       <LogoHeader showText={!narrow} />
@@ -121,17 +129,20 @@ export default function NavSidebar({ narrow = false }) {
           )}
         </div>
       </div>
-      {publicKey ? (
+      {publicKey && (
         <>
           <ProfileLink pubkey={publicKey} user={profile}>
             <div className="flex flex-row items-center font-bold text-md">
-              <Avatar pubkey={publicKey} user={profile} size={40} />
+              <Avatar pubkey={publicKey} user={profile} size={40} icons={readOnlyIcon} />
               {!narrow && <span className="hidden xl:inline ml-3">{profile?.name}</span>}
             </div>
           </ProfileLink>
+          {readonly && (
+            <div className="hidden xl:block text-nostr-red text-sm">
+              <FormattedMessage defaultMessage="Read-only" id="djNL6D" />
+            </div>
+          )}
         </>
-      ) : (
-        ""
       )}
     </div>
   );
diff --git a/packages/app/src/lang.json b/packages/app/src/lang.json
index 74b6f489..dedbb834 100644
--- a/packages/app/src/lang.json
+++ b/packages/app/src/lang.json
@@ -1032,6 +1032,9 @@
   "deEeEI": {
     "defaultMessage": "Register"
   },
+  "djNL6D": {
+    "defaultMessage": "Read-only"
+  },
   "dmsiLv": {
     "defaultMessage": "A default Zap Pool split of {n} has been configured for {site} developers, you can disable it at any time in {link}"
   },
diff --git a/packages/app/src/translations/en.json b/packages/app/src/translations/en.json
index fff4235a..8dc95a81 100644
--- a/packages/app/src/translations/en.json
+++ b/packages/app/src/translations/en.json
@@ -339,6 +339,7 @@
   "dOQCL8": "Display name",
   "ddd3JX": "Popular Hashtags",
   "deEeEI": "Register",
+  "djNL6D": "Read-only",
   "dmsiLv": "A default Zap Pool split of {n} has been configured for {site} developers, you can disable it at any time in {link}",
   "e61Jf3": "Coming soon",
   "e7VmYP": "Enter pin to unlock your private key",