Merge pull request 'Modal quick keys, profile picture & banner modal' (#640) from mmalmi/snort:main into main

Reviewed-on: #640

packages/app/config/default.json

@@ -3,5 +3,6 @@
   "appNameCapitalized": "Snort",
   "appTitle": "Snort - Nostr",
   "nip05Domain": "snort.social",
-  "favicon": "public/favicon.ico"
+  "favicon": "public/favicon.ico",
+  "appleTouchIconUrl": "/nostrich_512.png"
 }

packages/app/config/iris.json

@@ -3,5 +3,6 @@
   "appNameCapitalized": "Iris",
   "appTitle": "iris",
   "nip05Domain": "iris.to",
-  "favicon": "public/iris.ico"
+  "favicon": "public/iris/favicon.ico",
+  "appleTouchIconUrl": "/img/apple-touch-icon.png"
 }

packages/app/public/index.html

@@ -9,7 +9,7 @@
       name="keywords"
       content="nostr snort fast decentralized social media censorship resistant open source software" />
     <link rel="preconnect" href="https://imgproxy.snort.social" />
-    <link rel="apple-touch-icon" href="/nostrich_512.png" />
+    <link rel="apple-touch-icon" href="<%= htmlWebpackPlugin.options.templateParameters.appleTouchIconUrl %>" />
     <link rel="manifest" href="/manifest.json" />
     <title><%= htmlWebpackPlugin.options.templateParameters.appTitle %></title>
   </head>

packages/app/public/iris/.well-known/assetlinks.json

@@ -0,0 +1,12 @@
+[
+  {
+    "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "to.iris.twa",
+      "sha256_cert_fingerprints": [
+        "63:B5:70:E8:F1:75:7E:D6:EF:81:11:66:F4:9D:47:AB:49:3C:2E:00:B9:67:92:40:89:A5:03:0B:96:B9:40:09"
+      ]
+    }
+  }
+]

packages/app/public/iris/manifest_iris.json

@@ -0,0 +1,41 @@
+{
+  "short_name": "Iris",
+  "name": "Iris",
+  "description": "Fast nostr web ui",
+  "id": "/",
+  "icons": [
+    {
+      "src": "/img/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/img/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/img/maskable_icon.png",
+      "sizes": "640x640",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/img/maskable_icon_x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "start_url": "/",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#000000",
+  "protocol_handlers": [
+    {
+      "protocol": "web+nostr",
+      "url": "/%s"
+    }
+  ]
+}

packages/app/src/Element/Deck/SpotlightMedia.tsx

@@ -1,5 +1,5 @@
 import "./SpotlightMedia.css";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import Modal from "Element/Modal";
 import Icon from "Icons/Icon";
 import { ProxyImg } from "Element/ProxyImg";
@@ -17,6 +17,24 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
     return props.images.at(idx % props.images.length);
   }, [idx, props]);
 
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case "ArrowLeft":
+        case "ArrowUp":
+          dec();
+          break;
+        case "ArrowRight":
+        case "ArrowDown":
+          inc();
+          break;
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
   function dec() {
     setIdx(s => {
       if (s - 1 === -1) {
@@ -36,6 +54,7 @@ export function SpotlightMedia(props: SpotlightMediaProps) {
       }
     });
   }
+
   return (
     <div className="spotlight">
       <ProxyImg src={image} />

packages/app/src/Element/Modal.tsx

@@ -4,14 +4,25 @@ import { ReactNode, useEffect } from "react";
 export interface ModalProps {
   id: string;
   className?: string;
-  onClose?: (e: React.MouseEvent) => void;
+  onClose?: (e: React.MouseEvent | KeyboardEvent) => void;
   children: ReactNode;
 }
 
 export default function Modal(props: ModalProps) {
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape" && props.onClose) {
+      props.onClose(e);
+    }
+  };
+
   useEffect(() => {
     document.body.classList.add("scroll-lock");
-    return () => document.body.classList.remove("scroll-lock");
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.body.classList.remove("scroll-lock");
+      document.removeEventListener("keydown", handleKeyDown);
+    };
   }, []);
 
   return (

packages/app/src/Element/User/Avatar.tsx

@@ -15,9 +15,10 @@ interface AvatarProps {
   image?: string;
   imageOverlay?: ReactNode;
   icons?: ReactNode;
+  className?: string;
 }
 
-const Avatar = ({ pubkey, user, size, onClick, image, imageOverlay, icons }: AvatarProps) => {
+const Avatar = ({ pubkey, user, size, onClick, image, imageOverlay, icons, className }: AvatarProps) => {
   const [url, setUrl] = useState("");
   const { proxy } = useImgProxy();
 
@@ -43,7 +44,7 @@ const Avatar = ({ pubkey, user, size, onClick, image, imageOverlay, icons }: Ava
     <div
       onClick={onClick}
       style={style}
-      className={`avatar${imageOverlay ? " with-overlay" : ""}`}
+      className={`avatar${imageOverlay ? " with-overlay" : ""} ${className ?? ""}`}
       data-domain={domain?.toLowerCase()}
       title={getDisplayName(user, "")}>
       {icons && <div className="icons">{icons}</div>}

packages/app/src/Pages/ProfilePage.tsx

@@ -58,6 +58,7 @@ import { ZapTarget } from "Zapper";
 import { useStatusFeed } from "Feed/StatusFeed";
 
 import messages from "./messages";
+import { SpotlightMediaModal } from "../Element/Deck/SpotlightMedia";
 
 const NOTES = 0;
 const REACTIONS = 1;
@@ -120,6 +121,7 @@ export default function ProfilePage() {
   const isMe = loginPubKey === id;
   const [showLnQr, setShowLnQr] = useState<boolean>(false);
   const [showProfileQr, setShowProfileQr] = useState<boolean>(false);
+  const [modalImage, setModalImage] = useState<string>("");
   const aboutText = user?.about || "";
   const npub = !id?.startsWith(NostrPrefix.PublicKey) ? hexToBech32(NostrPrefix.PublicKey, id || undefined) : id;
 
@@ -428,7 +430,7 @@ export default function ProfilePage() {
   function avatar() {
     return (
       <div className="avatar-wrapper w-max">
-        <Avatar pubkey={id ?? ""} user={user} />
+        <Avatar pubkey={id ?? ""} user={user} onClick={() => setModalImage(user?.picture || "")} className="pointer" />
         <div className="profile-actions">
           {renderIcons()}
           {!isMe && id && <FollowButton className="primary" pubkey={id} />}
@@ -506,7 +508,15 @@ export default function ProfilePage() {
   return (
     <>
       <div className="profile">
-        {user?.banner && <ProxyImg alt="banner" className="banner" src={user.banner} size={w} />}
+        {user?.banner && (
+          <ProxyImg
+            alt="banner"
+            className="banner pointer"
+            src={user.banner}
+            size={w}
+            onClick={() => setModalImage(user.banner || "")}
+          />
+        )}
         <div className="profile-wrapper w-max">
           {avatar()}
           {userDetails()}
@@ -520,6 +530,7 @@ export default function ProfilePage() {
         </div>
       </div>
       <div className="main-content">{tabContent()}</div>
+      {modalImage && <SpotlightMediaModal onClose={() => setModalImage("")} images={[modalImage]} idx={0} />}
     </>
   );
 }

packages/app/webpack.config.js

@@ -14,6 +14,23 @@ const appConfig = require("config");
 
 const isProduction = process.env.NODE_ENV == "production";
 
+const appTitle = appConfig.get("appTitle");
+
+const copyPatterns = [
+  { from: "public/robots.txt" },
+  { from: "public/nostrich_512.png" },
+  { from: "public/nostrich_256.png" },
+  { from: "_headers" },
+];
+
+if (appTitle === "iris") {
+  copyPatterns.push({ from: "public/iris/manifest_iris.json", to: "manifest.json" });
+  copyPatterns.push({ from: "public/iris/img", to: "img" });
+  copyPatterns.push({ from: "public/iris/.well-known", to: ".well-known" });
+} else {
+  copyPatterns.push({ from: "public/manifest.json" });
+}
+
 const config = {
   entry: {
     main: "./src/index.tsx",
@@ -39,20 +56,15 @@ const config = {
   },
   plugins: [
     new CopyPlugin({
-      patterns: [
-        { from: "public/manifest.json" },
-        { from: "public/robots.txt" },
-        { from: "public/nostrich_512.png" },
-        { from: "public/nostrich_256.png" },
-        { from: "_headers" },
-      ],
+      patterns: copyPatterns,
     }),
     new HtmlWebpackPlugin({
       template: "public/index.html",
       favicon: appConfig.get("favicon"),
       excludeChunks: ["pow", "bench"],
       templateParameters: {
-        appTitle: appConfig.get("appTitle"),
+        appTitle,
+        appleTouchIconUrl: appConfig.get("appleTouchIconUrl"),
       },
     }),
     new HtmlWebpackPlugin({