remove note cc

small note fixes
dont back load global feed

src/components/icons.tsx

@@ -80,6 +80,12 @@ export const ArrowDownSIcon = createIcon({
   defaultProps,
 });
 
+export const ArrowUpSIcon = createIcon({
+  displayName: "arrow-up-s",
+  d: "M12 10.828l-4.95 4.95-1.414-1.414L12 8l6.364 6.364-1.414 1.414z",
+  defaultProps,
+});
+
 export const ArrowLeftSIcon = createIcon({
   displayName: "arrow-left-s",
   d: "M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z",

src/components/note/index.tsx

@@ -1,43 +1,26 @@
 import React from "react";
-import { Link as RouterLink, useNavigate } from "react-router-dom";
+import { Link as RouterLink } from "react-router-dom";
 import moment from "moment";
-import {
-  Box,
-  Button,
-  ButtonGroup,
-  Card,
-  CardBody,
-  CardFooter,
-  CardHeader,
-  Flex,
-  Heading,
-  HStack,
-  IconButton,
-  VStack,
-  Link,
-} from "@chakra-ui/react";
+import { Box, Card, CardBody, CardHeader, Flex, Heading, Link } from "@chakra-ui/react";
 import { NostrEvent } from "../../types/nostr-event";
-import { useUserMetadata } from "../../hooks/use-user-metadata";
 import { UserAvatarLink } from "../user-avatar-link";
-import { getUserDisplayName } from "../../helpers/user-metadata";
 import { Bech32Prefix, normalizeToBech32 } from "../../helpers/nip-19";
 
 import { NoteContents } from "./note-contents";
 import { NoteMenu } from "./note-menu";
-import { NoteCC } from "./note-cc";
-import { isReply } from "../../helpers/nostr-event";
 import useSubject from "../../hooks/use-subject";
 import identity from "../../services/identity";
 import { useUserContacts } from "../../hooks/use-user-contacts";
-import { ArrowDownSIcon } from "../icons";
 import { UserTipButton } from "../user-tip-button";
 import { NoteRelays } from "./note-relays";
+import { useIsMobile } from "../../hooks/use-is-mobile";
+import { UserLink } from "../user-link";
 
 export type NoteProps = {
   event: NostrEvent;
 };
 export const Note = React.memo(({ event }: NoteProps) => {
-  const metadata = useUserMetadata(event.pubkey);
+  const isMobile = useIsMobile();
 
   const pubkey = useSubject(identity.pubkey);
   const contacts = useUserContacts(pubkey);
@@ -48,18 +31,16 @@ export const Note = React.memo(({ event }: NoteProps) => {
       <CardHeader padding="0" mb="2">
         <Flex gap="2">
           <Flex flex="1" gap="2">
-            <UserAvatarLink pubkey={event.pubkey} size="sm" />
+            <UserAvatarLink pubkey={event.pubkey} size={isMobile ? "xs" : "sm"} />
 
             <Box>
               <Heading size="sm" display="inline">
-                <Link as={RouterLink} to={`/u/${normalizeToBech32(event.pubkey, Bech32Prefix.Pubkey)}`}>
-                  {getUserDisplayName(metadata, event.pubkey)}
-                </Link>
+                <UserLink pubkey={event.pubkey} />
               </Heading>
-              <Link as={RouterLink} to={`/n/${normalizeToBech32(event.id, Bech32Prefix.Note)}`} ml="2">
+              <span> </span>
+              <Link as={RouterLink} to={`/n/${normalizeToBech32(event.id, Bech32Prefix.Note)}`} whiteSpace="nowrap">
                 {moment(event.created_at * 1000).fromNow()}
               </Link>
-              {isReply(event) && <NoteCC event={event} />}
             </Box>
           </Flex>
           <UserTipButton pubkey={event.pubkey} size="xs" />
@@ -72,19 +53,6 @@ export const Note = React.memo(({ event }: NoteProps) => {
           <NoteContents event={event} trusted={following.includes(event.pubkey)} />
         </Box>
       </CardBody>
-      {/* <CardFooter padding="0" gap="2"> */}
-      {/* <Button
-          size="sm"
-          variant="link"
-          onClick={() => navigate(`/n/${normalizeToBech32(event.id, Bech32Prefix.Note)}`)}
-        >
-          Replies
-        </Button> */}
-      {/* <ButtonGroup size="sm" isAttached variant="outline" ml="auto">
-          <Button>Like</Button>
-          <IconButton aria-label="Show Likes" icon={<ArrowDownS />} />
-        </ButtonGroup> */}
-      {/* </CardFooter> */}
     </Card>
   );
 });

src/components/note/note-cc.tsx

@@ -1,23 +0,0 @@
-import { Text } from "@chakra-ui/react";
-import { isPTag, NostrEvent } from "../../types/nostr-event";
-import { UserLink } from "../user-link";
-
-export const NoteCC = ({ event }: { event: NostrEvent }) => {
-  const hasCC = event.tags.some(isPTag);
-  if (!hasCC) return null;
-
-  return (
-    <Text fontSize="sm" color="gray.500">
-      <span>Replying to: </span>
-      {event.tags
-        .filter(isPTag)
-        .map((t) => t[1] && <UserLink key={t[1]} pubkey={t[1]} />)
-        .reduce((arr, el, i, original) => {
-          if (i !== original.length - 1) {
-            return arr.concat([el, ", "]);
-          }
-          return arr.concat(el);
-        }, [] as any[])}
-    </Text>
-  );
-};

src/components/post-modal/post-form.tsx

@@ -21,7 +21,7 @@ export const PostForm = ({ onSubmit, onCancel, loading }: PostFormProps) => {
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <Textarea {...register("content")} mb="2" />
+      <Textarea {...register("content")} autoFocus mb="2" />
 
       <Flex gap="2" justifyContent="flex-end">
         <Button size="sm" onClick={onCancel} isDisabled={loading}>

src/components/user-link.tsx

@@ -13,7 +13,7 @@ export const UserLink = ({ pubkey, ...props }: UserLinkProps) => {
   const npub = normalizeToBech32(pubkey, Bech32Prefix.Pubkey);
 
   return (
-    <Link as={RouterLink} to={`/u/${npub}`} {...props}>
+    <Link as={RouterLink} to={`/u/${npub}`} whiteSpace="nowrap" {...props}>
       @{getUserDisplayName(metadata, pubkey)}
     </Link>
   );

src/views/home/global-tab.tsx

@@ -1,6 +1,5 @@
 import { Button, Flex, FormControl, FormLabel, Select, Spinner, Switch, useDisclosure } from "@chakra-ui/react";
 import moment from "moment";
-import { useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { Note } from "../../components/note";
 import { unique } from "../../helpers/array";
@@ -25,7 +24,7 @@ export const GlobalTab = () => {
   const { events, loading, loadMore, loader } = useTimelineLoader(
     `global`,
     selectedRelay ? [selectedRelay] : availableRelays,
-    { kinds: [1], since: moment().subtract(5, "minutes").unix() },
+    { kinds: [1], since: moment().unix() },
     { pageSize: moment.duration(5, "minutes").asSeconds() }
   );
 

src/views/note/thread-post.tsx

@@ -1,7 +1,9 @@
 import { Button, Flex, useDisclosure } from "@chakra-ui/react";
 import { useState } from "react";
+import { ArrowDownSIcon, ArrowUpSIcon } from "../../components/icons";
 import { Note } from "../../components/note";
 import { countReplies, ThreadItem as ThreadItemData } from "../../helpers/thread";
+import { useIsMobile } from "../../hooks/use-is-mobile";
 
 export type ThreadItemProps = {
   post: ThreadItemData;
@@ -9,6 +11,7 @@ export type ThreadItemProps = {
 };
 
 export const ThreadPost = ({ post, initShowReplies }: ThreadItemProps) => {
+  const isMobile = useIsMobile();
   const [showReplies, setShowReplies] = useState(initShowReplies ?? post.replies.length === 1);
   const toggle = () => setShowReplies((v) => !v);
 
@@ -21,9 +24,10 @@ export const ThreadPost = ({ post, initShowReplies }: ThreadItemProps) => {
         <>
           <Button variant="link" size="sm" alignSelf="flex-start" onClick={toggle}>
             {numberOfReplies} {numberOfReplies > 1 ? "Replies" : "Reply"}
+            {showReplies ? <ArrowDownSIcon /> : <ArrowUpSIcon />}
           </Button>
           {showReplies && (
-            <Flex direction="column" gap="2" pl="4" borderLeftColor="gray.500" borderLeftWidth="1px">
+            <Flex direction="column" gap="2" pl={isMobile ? 2 : 4} borderLeftColor="gray.500" borderLeftWidth="1px">
               {post.replies.map((child) => (
                 <ThreadPost key={child.event.id} post={child} />
               ))}