Mobile styles and some styling consistency fixes

src/components/feeds/MessageInput.js

@@ -38,8 +38,8 @@ const MessageInput = ({ onMessageSent }) => {
     const headerTemplate = (options) => {
         return (
             <div className="flex align-items-center justify-content-between my-1 py-2">
-                <GenericButton outlined severity="primary" size="small" className="py-1" onClick={options.onTogglerClick} icon={options.collapsed ? 'pi pi-chevron-down' : 'pi pi-chevron-up'} />
+                <GenericButton outlined severity="primary" size="small" className="py-0" onClick={options.onTogglerClick} icon={options.collapsed ? 'pi pi-chevron-down' : 'pi pi-chevron-up'} />
-                <h3 className="m-0 ml-2">New Message</h3>
+                <h2 className="m-0 ml-2">New Message</h2>
             </div>
         );
     };

src/components/feeds/NostrFeed.js

@@ -103,16 +103,6 @@ const NostrFeed = ({ searchQuery }) => {
                             platform="nostr"
                             platformIcon={<Image src={NostrIcon} alt="Nostr" width={14} height={14} className='mr-[1px]' />}
                             platformLink={`https://nostr.band/${nip19.noteEncode(message.id)}`}
-                            additionalFooter={
-                                session?.user?.pubkey && (
-                                    <ZapThreadsWrapper
-                                        anchor={nip19.noteEncode(message.id)}
-                                        user={npub}
-                                        relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://nostr.mutinywallet.com/, wss://relay.mutinywallet.com/, wss://relay.primal.net/"
-                                        disable=""
-                                    />
-                                )
-                            }
                         />
                     ))
                 ) : (

src/components/feeds/messages/CommunityMessage.js

@@ -1,21 +1,51 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Card } from 'primereact/card';
 import { Avatar } from 'primereact/avatar';
 import { Tag } from 'primereact/tag';
+import { Panel } from 'primereact/panel';
 import GenericButton from '@/components/buttons/GenericButton';
 import { highlightText } from '@/utils/text';
+import { useSession } from 'next-auth/react';
 import NostrIcon from '../../../../public/images/nostr.png';
 import Image from 'next/image';
 import { nip19 } from 'nostr-tools';
+import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
 
 const StackerNewsIconComponent = () => (
-	<svg width="16" height="16" className='mr-2' viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg width="16" height="16" className='mr-2' viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
-		<path fill="#facc15" fillRule="evenodd" d="m41.7 91.4 41.644 59.22-78.966 69.228L129.25 155.94l-44.083-58.14 54.353-65.441Z"/>
+        <path fill="#facc15" fillRule="evenodd" d="m41.7 91.4 41.644 59.22-78.966 69.228L129.25 155.94l-44.083-58.14 54.353-65.441Z" />
-		<path fill="#facc15" fillRule="evenodd" d="m208.355 136.74-54.358-64.36-38.4 128.449 48.675-74.094 64.36 65.175L251.54 42.497Z"/>
+        <path fill="#facc15" fillRule="evenodd" d="m208.355 136.74-54.358-64.36-38.4 128.449 48.675-74.094 64.36 65.175L251.54 42.497Z" />
-	</svg>
+    </svg>
 );
 
+const headerTemplate = (options, windowWidth, platform, id) => {
+    return (
+        <div className="flex flex-row justify-between items-end mb-2">
+            <GenericButton outlined severity="primary" size="small" className="py-0" onClick={options.onTogglerClick} icon={options.collapsed ? 'pi pi-chevron-down' : 'pi pi-chevron-up'} tooltip={'comments'} tooltipOptions={{ position: 'right' }} />
+            <GenericButton
+                label={windowWidth > 768 ? `View in ${platform}` : null}
+                icon="pi pi-external-link"
+                outlined
+                size="small"
+                onClick={() => window.open(getPlatformLink(platform, id), '_blank')}
+                tooltip={windowWidth < 768 ? `View in ${platform}` : null}
+                tooltipOptions={{ position: 'left' }}
+            />
+        </div>
+    );
+};
+
 const CommunityMessage = ({ message, searchQuery, windowWidth, platform }) => {
+    const [npub, setNpub] = useState(null);
+    const [collapsed, setCollapsed] = useState(true);
+    const { data: session } = useSession();
+
+    useEffect(() => {
+        if (session?.user?.pubkey) {
+            setNpub(nip19.npubEncode(session.user.pubkey));
+        }
+    }, [session]);
+
     const header = (
         <div className="flex flex-row w-full items-center justify-between p-4 bg-gray-800 rounded-t-lg">
             <div className="flex flex-row items-center">
@@ -32,20 +62,50 @@ const CommunityMessage = ({ message, searchQuery, windowWidth, platform }) => {
     );
 
     const footer = (
-        <div className="w-full flex justify-between items-center">
+        <div className='w-full flex flex-col justify-between items-start'>
-            <span className="rounded-lg text-sm text-gray-300">
+            {
-                {new Date(message.timestamp).toLocaleString()}
+                platform === 'nostr' ? (
-            </span>
+                    <p className="rounded-lg text-sm text-gray-300">
-            <GenericButton
+                        {new Date(message.timestamp).toLocaleString()}
-                label={windowWidth > 768 ? `View in ${platform}` : null}
+                    </p>
-                icon="pi pi-external-link"
+                ) : null
-                outlined
+            }
-                size="small"
+            <div className="w-full flex flex-row justify-between items-end">
-                className='my-2'
+                {
-                onClick={() => window.open(getPlatformLink(platform, message.id), '_blank')}
+                    session?.user?.pubkey && platform === 'nostr' ? (
-                tooltip={windowWidth < 768 ? `View in ${platform}` : null}
+                        <Panel
-                tooltipOptions={{ position: 'left' }}
+                            headerTemplate={() => headerTemplate({ onTogglerClick: () => setCollapsed(!collapsed) }, windowWidth, platform, message.id)}
-            />
+                            toggleable
+                            collapsed={collapsed}
+                            onToggle={(e) => setCollapsed(e.value)}
+                            className="w-full"
+                        >
+
+                            <ZapThreadsWrapper
+                                anchor={nip19.noteEncode(message.id)}
+                                user={npub}
+                                relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://nostr.mutinywallet.com/, wss://relay.mutinywallet.com/, wss://relay.primal.net/"
+                                disable=""
+                            />
+                        </Panel>
+                    ) : (
+                        <div className="w-full flex flex-row justify-between items-end">
+                            <p className="rounded-lg text-sm text-gray-300">
+                                {new Date(message.timestamp).toLocaleString()}
+                            </p>
+                            <GenericButton
+                                label={windowWidth > 768 ? `View in ${platform}` : null}
+                                icon="pi pi-external-link"
+                                outlined
+                                size="small"
+                                onClick={() => window.open(getPlatformLink(platform, message.id), '_blank')}
+                                tooltip={windowWidth < 768 ? `View in ${platform}` : null}
+                                tooltipOptions={{ position: 'left' }}
+                            />
+                        </div>
+                    )
+                }
+            </div>
         </div>
     );
 

src/components/profile/UserContent.js

@@ -11,6 +11,7 @@ import { useContentIdsQuery } from "@/hooks/apiQueries/useContentIdsQuery";
 import { useSession } from "next-auth/react";
 import { useToast } from "@/hooks/useToast";
 import { Divider } from "primereact/divider";
+import useWindowWidth from "@/hooks/useWindowWidth";
 import ContentList from "@/components/content/lists/ContentList";
 import { parseEvent } from "@/utils/nostr";
 import { ProgressSpinner } from "primereact/progressspinner";
@@ -23,7 +24,7 @@ const UserContent = () => {
     const [isClient, setIsClient] = useState(false);
     const [content, setContent] = useState([]);
     const [publishedContent, setPublishedContent] = useState([]);
-
+    const windowWidth = useWindowWidth();
     const { data: session, status } = useSession();
     const [user, setUser] = useState(null);
     const router = useRouter();
@@ -116,7 +117,11 @@ const UserContent = () => {
 
     return (
         <div className="p-4">
-            <h1 className="text-3xl font-bold mb-6">My Content</h1>
+            {
+                windowWidth < 768 && (
+                    <h1 className="text-3xl font-bold mb-6">My Content</h1>
+                )
+            }
             <div className="flex flex-row w-full justify-between px-8 max-tab:flex-col max-tab:px-0">
                 <MenuTab
                     items={contentItems}
@@ -128,10 +133,12 @@ const UserContent = () => {
                     label="Create"
                     severity="success"
                     outlined
-                    className="mt-2"
+                    className="mt-2 max-tab:w-[50%]"
                 />
             </div>
-            <Divider />
+            <div className="w-full px-8 max-tab:px-0">
+                <Divider />
+            </div>
             <div className="w-full mx-auto my-8">
                 <div className="w-full mx-auto px-8 max-tab:px-0">
                     {isLoading ? (

src/components/profile/UserProfile.js

@@ -1,7 +1,5 @@
 import React, { useRef, useState, useEffect } from "react";
 import { DataTable } from "primereact/datatable";
-import { Button } from "primereact/button";
-import { Avatar } from "primereact/avatar";
 import { Menu } from "primereact/menu";
 import { Column } from "primereact/column";
 import { useImageProxy } from "@/hooks/useImageProxy";
@@ -10,12 +8,12 @@ import { ProgressSpinner } from "primereact/progressspinner";
 import PurchasedListItem from "@/components/profile/PurchasedListItem";
 import { useNDKContext } from "@/context/NDKContext";
 import { formatDateTime } from "@/utils/time";
-import { findKind0Fields } from "@/utils/nostr";
 import Image from "next/image";
-import BitcoinConnectButton from "@/components/bitcoinConnect/BitcoinConnect";
-import UserContent from "@/components/profile/UserContent";
 import SubscribeModal from "@/components/profile/subscription/SubscribeModal";
+import useWindowWidth from "@/hooks/useWindowWidth";
+
 const UserProfile = () => {
+    const windowWidth = useWindowWidth();
     const [user, setUser] = useState(null);
     const { data: session } = useSession();
     const { returnImageProxy } = useImageProxy();
@@ -53,7 +51,12 @@ const UserProfile = () => {
 
     return (
         user && (
-            <div className="h-full w-full min-bottom-bar:w-[86vw] max-sidebar:w-[100vw] mx-auto">
+            <div className="p-4">
+                {
+                    windowWidth < 768 && (
+                        <h1 className="text-3xl font-bold mb-6">Profile</h1>
+                    )
+                }
                 <div className="w-full flex flex-col justify-center mx-auto">
                     <div className="relative flex w-full items-center justify-center">
                         <Image
@@ -87,7 +90,7 @@ const UserProfile = () => {
                         emptyMessage="No purchases"
                         value={session.user?.purchased}
                         header={header}
-                        style={{ maxWidth: "90%", margin: "0 auto", borderRadius: "10px" }}
+                        style={{ maxWidth: windowWidth < 768 ? "100%" : "90%", margin: "0 auto", borderRadius: "10px" }}
                         pt={{
                             wrapper: {
                                 className: "rounded-lg rounded-t-none"

src/components/profile/UserSettings.js

@@ -6,6 +6,7 @@ import { useImageProxy } from "@/hooks/useImageProxy";
 import { useSession } from 'next-auth/react';
 import { ProgressSpinner } from "primereact/progressspinner";
 import { useNDKContext } from "@/context/NDKContext";
+import useWindowWidth from "@/hooks/useWindowWidth";
 import Image from "next/image";
 import BitcoinConnectButton from "@/components/bitcoinConnect/BitcoinConnect";
 
@@ -14,6 +15,7 @@ const UserSettings = () => {
     const { data: session } = useSession();
     const { returnImageProxy } = useImageProxy();
     const { ndk } = useNDKContext();
+    const windowWidth = useWindowWidth();
 
     useEffect(() => {
         if (session?.user) {
@@ -62,7 +64,12 @@ const UserSettings = () => {
 
     return (
         user && (
-            <div className="h-full w-full min-bottom-bar:w-[86vw] max-sidebar:w-[100vw] mx-auto">
+            <div className="p-4">
+                {
+                    windowWidth < 768 && (
+                        <h1 className="text-3xl font-bold mb-6">Settings</h1>
+                    )
+                }
                 <div className="w-full flex flex-col justify-center mx-auto">
                     <div className="relative flex w-full items-center justify-center">
                         <Image

src/components/profile/subscription/UserSubscription.js

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
 import { useToast } from '@/hooks/useToast';
 import axios from 'axios';
 import { Card } from 'primereact/card';
-import { Button } from "primereact/button";
+import useWindowWidth from '@/hooks/useWindowWidth';
 import { Menu } from "primereact/menu";
 import { Message } from "primereact/message";
 import { ProgressSpinner } from 'primereact/progressspinner';
@@ -14,6 +14,7 @@ const UserSubscription = ({ user }) => {
     const { data: session, update } = useSession();
     const { showToast } = useToast();
     const router = useRouter();
+    const windowWidth = useWindowWidth();
     const [isProcessing, setIsProcessing] = useState(false);
     const [subscribed, setSubscribed] = useState(false);
     const [subscribedUntil, setSubscribedUntil] = useState(null);
@@ -117,7 +118,11 @@ const UserSubscription = ({ user }) => {
 
     return (
         <div className="p-4">
-            <h1 className="text-3xl font-bold mb-6">Subscription Management</h1>
+            {
+                windowWidth < 768 && (
+                    <h1 className="text-3xl font-bold mb-6">Subscription Management</h1>
+                )
+            }
             <Card title={subscriptionCardTitle} className="mb-6">
                 {subscribed && (
                     <div className="flex flex-col">

src/pages/details/[slug]/index.js

@@ -204,13 +204,13 @@ export default function Details() {
 
     const renderContent = () => {
         if (decryptedContent) {
-            return <MDDisplay className='p-4 rounded-lg' source={decryptedContent} />;
+            return <MDDisplay className='p-4 rounded-lg w-full' source={decryptedContent} />;
         }
         if (paidResource && !decryptedContent) {
             return <p className="text-center text-xl text-red-500">This content is paid and needs to be purchased before viewing.</p>;
         }
         if (processedEvent?.content) {
-            return <MDDisplay className='p-4 rounded-lg' source={processedEvent.content} />;
+            return <MDDisplay className='p-4 rounded-lg w-full' source={processedEvent.content} />;
         }
         return null;
     }
@@ -262,7 +262,7 @@ export default function Details() {
                     />
                 </div>
             )}
-            <div className='w-[75vw] mx-auto mt-12 p-12 border-t-2 border-gray-300 max-tab:p-0 max-mob:p-0 max-tab:max-w-[100vw] max-mob:max-w-[100vw]'>
+            <div className='w-[75vw] mx-auto mt-12 p-12 border-t-2 border-gray-300 max-tab:p-0 max-mob:p-0 max-tab:w-[100vw] max-mob:w-[100vw]'>
                 {
                     processedEvent && processedEvent.content && renderContent()
                 }

src/pages/feed.js

@@ -58,7 +58,7 @@ const Feed = () => {
         <div className="bg-gray-900 h-[100vh] w-[100vw] min-bottom-bar:w-[86vw]">
             <div className="w-[100vw] min-bottom-bar:w-[86vw] px-4 pt-4 flex flex-col items-start">
                 <div className='mb-4 flex flex-row items-end'>
-                    <h2 className="font-bold mb-0">Community</h2>
+                    <h1 className="font-bold mb-0">Community</h1>
                     <GenericButton
                         icon={getTagIcon(title)}
                         className='ml-2 text-sm p-2 py-1 flex items-center cursor-default hover:bg-transparent'