chore: tweaks

packages/app/src/Element/Embed/MediaElement.tsx

@@ -18,16 +18,12 @@ export function MediaElement(props: MediaElementProps) {
 
   if (props.mime.startsWith("image/")) {
     return (
-      // constant height container avoids layout shift when images load
+      <ProxyImg key={props.url} src={props.url} onClick={props.onMediaClick} className="max-h-[80vh] mx-auto" />
-      <div className="-mx-4 md:mx-0 my-3 md:h-80 flex items-center justify-center">
-        <ProxyImg key={props.url} src={props.url} onClick={props.onMediaClick} className="max-h-[80vh] md:max-h-80" />
-      </div>
     );
   } else if (props.mime.startsWith("audio/")) {
     return <audio key={props.url} src={props.url} controls />;
   } else if (props.mime.startsWith("video/")) {
     return (
-      <div className="-mx-4 md:mx-0 my-3 md:h-80 flex items-center justify-center">
       <video
         autoPlay={autoplay}
         loop={true}
@@ -36,9 +32,8 @@ export function MediaElement(props: MediaElementProps) {
         src={props.url}
         controls
         poster={proxy(props.url)}
-          className="max-h-[80vh] md:max-h-80"
+        className="max-h-[80vh] mx-auto"
       />
-      </div>
     );
   } else {
     return (

packages/app/src/Pages/DonatePage.tsx

@@ -1,17 +1,19 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useSyncExternalStore } from "react";
 import { FormattedMessage } from "react-intl";
 import { HexKey } from "@snort/system";
 
 import { ApiHost, DeveloperAccounts, SnortPubKey } from "@/Const";
 import ProfilePreview from "@/Element/User/ProfilePreview";
 import ZapButton from "@/Element/Event/ZapButton";
-import { bech32ToHex } from "@/SnortUtils";
+import { bech32ToHex, unwrap } from "@/SnortUtils";
 import SnortApi, { RevenueSplit, RevenueToday } from "@/External/SnortApi";
 import Modal from "@/Element/Modal";
 import AsyncButton from "@/Element/Button/AsyncButton";
 import QrCode from "@/Element/QrCode";
 import Copy from "@/Element/Copy";
 import { Link } from "react-router-dom";
+import { ZapPoolController, ZapPoolRecipientType } from "@/ZapPoolController";
+import { ZapPoolTarget } from "./ZapPool";
 
 const Contributors = [
   bech32ToHex("npub10djxr5pvdu97rjkde7tgcsjxzpdzmdguwacfjwlchvj7t88dl7nsdl54nf"), // ivan
@@ -59,6 +61,10 @@ const DonatePage = () => {
   const [today, setSumToday] = useState<RevenueToday>();
   const [onChain, setOnChain] = useState("");
   const api = new SnortApi(ApiHost);
+  const zapPool = useSyncExternalStore(
+    c => unwrap(ZapPoolController).hook(c),
+    () => unwrap(ZapPoolController).snapshot(),
+  );
 
   async function getOnChainAddress() {
     const { address } = await api.onChainDonation();
@@ -95,14 +101,11 @@ const DonatePage = () => {
       </h2>
       <p>
         <FormattedMessage
-          defaultMessage="{site} is an open source project built by passionate people in their free time"
+          defaultMessage="{site} is an open source project built by passionate people in their free time, your donations are greatly appreciated"
-          id="6TfgXX"
+          id="XhpBfA"
           values={{ site: CONFIG.appNameCapitalized }}
         />
       </p>
-      <p>
-        <FormattedMessage defaultMessage="Your donations are greatly appreciated" id="nn1qb3" />
-      </p>
       <p>
         <FormattedMessage
           defaultMessage="Check out the code here: {link}"
@@ -129,12 +132,6 @@ const DonatePage = () => {
           }}
         />
       </p>
-      <p>
-        <FormattedMessage
-          defaultMessage="Each contributor will get paid a percentage of all donations and NIP-05 orders, you can see the split amounts below"
-          id="mH91FY"
-        />
-      </p>
       <div className="flex flex-col g12">
         <div className="b br p">
           <div className="flex items-center justify-between">
@@ -173,6 +170,29 @@ const DonatePage = () => {
           </div>
         </Modal>
       )}
+      {CONFIG.features.zapPool && <>
+        <h3>
+          <FormattedMessage defaultMessage="ZapPool" id="pRess9" />
+        </h3>
+        <p>
+          <FormattedMessage defaultMessage="Fund the services that you use by splitting a portion of all your zaps into a pool of funds!" id="x/Fx2P" />
+        </p>
+        <p>
+          <Link to="/zap-pool" className="underline">
+            <FormattedMessage defaultMessage="Configure zap pool" id="kqPQJD" />
+          </Link>
+        </p>
+        <ZapPoolTarget
+          target={
+            zapPool.find(b => b.pubkey === bech32ToHex(SnortPubKey) && b.type === ZapPoolRecipientType.Generic) ?? {
+              type: ZapPoolRecipientType.Generic,
+              pubkey: bech32ToHex(SnortPubKey),
+              split: 0,
+              sum: 0,
+            }
+          }
+        />
+      </>}
       <h3>
         <FormattedMessage defaultMessage="Primary Developers" id="4IPzdn" />
       </h3>

packages/app/src/Pages/Layout/NavSidebar.tsx

@@ -100,7 +100,7 @@ export default function NavSidebar({ narrow = false }) {
         <div
           className={classNames(
             { "xl:items-start": !narrow, "xl:gap-2": !narrow },
-            "gap-1 flex flex-col items-center text-lg",
+            "gap-1 flex flex-col items-center text-lg font-bold",
           )}>
           {MENU_ITEMS.filter(a => {
             if ((CONFIG.hideFromNavbar ?? []).includes(a.link)) {

packages/app/src/Pages/Profile/ProfilePage.tsx

@@ -58,6 +58,7 @@ import { useMuteList, usePinList } from "@/Hooks/useLists";
 
 import messages from "../messages";
 import FollowedBy from "@/Element/User/FollowedBy";
+import AsyncButton from "@/Element/Button/AsyncButton";
 
 interface ProfilePageProps {
   id?: string;
@@ -299,6 +300,9 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
         <div className="profile-actions">
           {renderIcons()}
           {!isMe && id && <FollowButton pubkey={id} />}
+          {isMe && id && <AsyncButton className="secondary">
+            <FormattedMessage defaultMessage="Edit" id="wEQDC6" />
+          </AsyncButton>}
         </div>
       </div>
     );

packages/app/src/Pages/ZapPool.tsx

@@ -21,7 +21,7 @@ const DataProviders = [
   },
 ];
 
-function ZapTarget({ target }: { target: ZapPoolRecipient }) {
+export function ZapPoolTarget({ target }: { target: ZapPoolRecipient }) {
   if (!ZapPoolController) return;
   const login = useLogin();
   const profile = useUserProfile(target.pubkey);
@@ -158,7 +158,7 @@ export default function ZapPoolPage() {
         )}
       </p>
       <div>
-        <ZapTarget
+        <ZapPoolTarget
           target={
             zapPool.find(b => b.pubkey === bech32ToHex(SnortPubKey) && b.type === ZapPoolRecipientType.Generic) ?? {
               type: ZapPoolRecipientType.Generic,
@@ -175,7 +175,7 @@ export default function ZapPoolPage() {
       {relayConnections.map(a => (
         <div>
           <h4>{getRelayName(a.address)}</h4>
-          <ZapTarget
+          <ZapPoolTarget
             target={
               zapPool.find(b => b.pubkey === a.pubkey && b.type === ZapPoolRecipientType.Relay) ?? {
                 type: ZapPoolRecipientType.Relay,
@@ -193,7 +193,7 @@ export default function ZapPoolPage() {
       {UploaderServices.map(a => (
         <div>
           <h4>{a.name}</h4>
-          <ZapTarget
+          <ZapPoolTarget
             target={
               zapPool.find(b => b.pubkey === a.owner && b.type === ZapPoolRecipientType.FileHost) ?? {
                 type: ZapPoolRecipientType.FileHost,
@@ -211,7 +211,7 @@ export default function ZapPoolPage() {
       {DataProviders.map(a => (
         <div>
           <h4>{a.name}</h4>
-          <ZapTarget
+          <ZapPoolTarget
             target={
               zapPool.find(b => b.pubkey === a.owner && b.type === ZapPoolRecipientType.DataProvider) ?? {
                 type: ZapPoolRecipientType.DataProvider,