simplified interface; new message modal; performance tweaks; better a…

…ccount handling

client-web/src/components/bottom-bar.tsx

@@ -3,6 +3,7 @@ import {
  Button,
  HStack,
  Link,
+ Spacer,
  Text,
  useColorMode,
  useToast,
@@ -12,6 +13,7 @@ import { useEffect, useState } from "react";
 import { RELAY_MESSAGE_TYPE } from "@nostr-ts/common";
 import { excerpt } from "../lib/excerpt";
 import { NavLink } from "react-router-dom";
+import { EventFormModal } from "./event-form-modal";
 
 export function BottomBar() {
  const { colorMode, toggleColorMode } = useColorMode();
@@ -24,6 +26,7 @@ export function BottomBar() {
  const [lastCount, setLastCount] = useState(0);
  const [subscriptionsCount, setSubscriptionsCount] = useState<number>(0);
  const [relaysCount, setRelaysCount] = useState<number>(0);
+ const [queueItemsCount, setQueueItemsCount] = useState<number>(0);
 
  const toast = useToast();
 
@@ -40,6 +43,10 @@ export function BottomBar() {
  if (relays) {
  setRelaysCount(relays.length);
  }
+ const queue = await useNClient.getState().getQueueItems();
+ if (queue) {
+ setQueueItemsCount(queue.length);
+ }
  };
 
  useEffect(() => {
@@ -103,6 +110,11 @@ export function BottomBar() {
  >
  <HStack spacing={4}>
  <>
+ <Button variant={"outline"} size="sm" onClick={toggleColorMode}>
+ Toggle {colorMode === "light" ? "Dark" : "Light"}
+ </Button>
+ <EventFormModal buttonSize="sm" />
+ <Spacer />
  <HStack spacing={2}>
  <Text fontSize="sm">Events:</Text>
  <Text fontSize="xl" marginLeft={1}>
@@ -119,15 +131,18 @@ export function BottomBar() {
  <Text fontSize="xl">{relaysCount}</Text>
  </HStack>
  </Link>
+ <Link as={NavLink} to="/queue">
+ <HStack spacing={2}>
+ <Text fontSize="sm">Queue:</Text>
+ <Text fontSize="xl">{queueItemsCount}</Text>
+ </HStack>
+ </Link>
  <Link as={NavLink} to="/subscriptions">
  <HStack spacing={2}>
  <Text fontSize="sm">Subscriptions:</Text>
  <Text fontSize="xl">{subscriptionsCount}</Text>
  </HStack>
  </Link>
- <Button variant={"outline"} onClick={toggleColorMode}>
- Toggle {colorMode === "light" ? "Dark" : "Light"}
- </Button>
  </>
  </HStack>
  </Box>

client-web/src/components/connect-modal.tsx

@@ -13,6 +13,7 @@ import {
  Input,
  ModalFooter,
  useToast,
+ ButtonGroup,
 } from "@chakra-ui/react";
 import { useNClient } from "../state/client";
 import { useEffect, useState } from "react";
@@ -91,6 +92,10 @@ export function ConnectModal({ isOpen, onClose }: ConnectModalProps) {
  }
  };
 
+ const resetRelays = () => {
+ setInitialRelayUrls(objectOfRelaysToArray(DEFAULT_RELAYS));
+ };
+
  useEffect(() => {
  const relays = localStorage.getItem("nostr-client:relays");
  if (relays) {
@@ -189,14 +194,24 @@ export function ConnectModal({ isOpen, onClose }: ConnectModalProps) {
  </Button>
  </Flex>
 
- <Button
- isLoading={loadingRelaysNos2x}
- onClick={() => relaysFromExtention()}
- size="xs"
- marginTop={2}
- >
- Load from nos2x
- </Button>
+ <ButtonGroup>
+ <Button
+ isLoading={loadingRelaysNos2x}
+ onClick={() => relaysFromExtention()}
+ size="xs"
+ marginTop={2}
+ >
+ Load from nos2x
+ </Button>
+ <Button
+ isLoading={loadingRelaysNos2x}
+ onClick={resetRelays}
+ size="xs"
+ marginTop={2}
+ >
+ Reset
+ </Button>
+ </ButtonGroup>
  </ModalBody>
  <ModalFooter>
  <Button

client-web/src/components/create-event-form.tsx

@@ -42,11 +42,13 @@ interface CreateEventFormProps {
  inResponseTo?: NEvent | undefined;
  relayUrls?: string[];
  kind?: NKIND;
+ sendCallback?: (eventId: string) => void;
 }
 
 export const CreateEventForm = (props: CreateEventFormProps) => {
- const [isReady] = useNClient((state) => [
+ const [isReady, keypairIsLoaded] = useNClient((state) => [
  state.connected && state.keystore !== "none",
+ state.keypairIsLoaded,
  ]);
  const [isBusy, setBusy] = useState<boolean>(false);
  const [errors, setErrors] = useState<string[]>([]);
@@ -56,6 +58,11 @@ export const CreateEventForm = (props: CreateEventFormProps) => {
  state.keypair,
  ]);
 
+ const message =
+ isReady || keypairIsLoaded
+ ? undefined
+ : "Login and connect to send events.";
+
  /**
  * Event data
  */
@@ -98,7 +105,9 @@ export const CreateEventForm = (props: CreateEventFormProps) => {
 
  const toast = useToast();
 
- const relayUrls = props.relayUrls ? props.relayUrls : [];
+ const relayUrls = props.relayUrls ? props.relayUrls : undefined;
+
+ const relayUrl = relayUrls && relayUrls.length > 0 ? relayUrls[0] : "";
 
  /**
  * Create event from inputs
@@ -135,7 +144,7 @@ export const CreateEventForm = (props: CreateEventFormProps) => {
  case "NewRecommendRelay":
  return {
  event: NewRecommendRelay({
- relayUrl: relayUrls[0],
+ relayUrl: relayUrl,
  }),
  };
  case "NewQuoteRepost":
@@ -147,7 +156,7 @@ export const CreateEventForm = (props: CreateEventFormProps) => {
  return {
  event: NewQuoteRepost({
  inResponseTo: props.inResponseTo,
- relayUrl: relayUrls[0],
+ relayUrl: relayUrl,
  }),
  };
  default:
@@ -230,6 +239,9 @@ export const CreateEventForm = (props: CreateEventFormProps) => {
 
  reset();
  setBusy(false);
+ if (props.sendCallback) {
+ props.sendCallback(evId);
+ }
  }
  } catch (e) {
  let error = "";
@@ -302,6 +314,11 @@ export const CreateEventForm = (props: CreateEventFormProps) => {
  {error}
  </Box>
  ))}
+ {message && (
+ <Box color="red.500" paddingBottom={2}>
+ {message}
+ </Box>
+ )}
  <Button
  type="submit"
  variant={"solid"}

client-web/src/components/event-form-modal.tsx

@@ -0,0 +1,48 @@
+import {
+ useDisclosure,
+ Modal,
+ ModalOverlay,
+ ModalContent,
+ ModalHeader,
+ ModalCloseButton,
+ ModalBody,
+ ModalFooter,
+ Button,
+} from "@chakra-ui/react";
+import { CreateEventForm } from "./create-event-form";
+
+interface EventFormModalProps {
+ buttonSize: string;
+}
+
+export function EventFormModal(props?: EventFormModalProps) {
+ const { isOpen, onOpen, onClose } = useDisclosure();
+
+ const sendCallback = () => {
+ onClose();
+ };
+
+ return (
+ <>
+ <Button size={props?.buttonSize || "md"} onClick={onOpen}>
+ Post message
+ </Button>
+ <Modal isOpen={isOpen} onClose={onClose}>
+ <ModalOverlay />
+ <ModalContent>
+ <ModalHeader>Broadcast to the Network</ModalHeader>
+ <ModalCloseButton />
+ <ModalBody>
+ <CreateEventForm sendCallback={sendCallback} />
+ </ModalBody>
+
+ <ModalFooter>
+ <Button colorScheme="blue" mr={3} onClick={onClose}>
+ Close
+ </Button>
+ </ModalFooter>
+ </ModalContent>
+ </Modal>
+ </>
+ );
+}

client-web/src/components/event.tsx

@@ -116,6 +116,10 @@ export function Event({
  onOpen();
  };
 
+ const sendCallback = () => {
+ onReplyClose();
+ };
+
  const relatedRelay = async () => {
  const relays = await useNClient.getState().getRelays();
  const relay = relays.find((r) => eventRelayUrls.includes(r.url));
@@ -391,6 +395,23 @@ export function Event({
  return (
  <>
  {EventCard}
+ {isReplyOpen && (
+ <Box
+ padding={4}
+ marginBottom={2}
+ marginTop={2}
+ background="background"
+ borderRadius={4}
+ >
+ <CreateEventForm
+ isResponse={true}
+ inResponseTo={event}
+ relayUrls={eventRelayUrls}
+ kind="NewShortTextNoteResponse"
+ sendCallback={sendCallback}
+ />
+ </Box>
+ )}
  <HStack padding={2} flexWrap="wrap">
  {reactions && (
  <>
@@ -479,16 +500,6 @@ export function Event({
  })}
  {ImageModal}
  {EventModal}
- {isReplyOpen && (
- <Box padding={4} background="background" borderRadius={4}>
- <CreateEventForm
- isResponse={true}
- inResponseTo={event}
- relayUrls={eventRelayUrls}
- kind="NewShortTextNoteResponse"
- />
- </Box>
- )}
  </>
  );
 }

client-web/src/components/events.tsx

@@ -1,10 +1,10 @@
 import { Box, Button, Text } from "@chakra-ui/react";
+import { NFilters } from "@nostr-ts/common";
 import { useNClient } from "../state/client";
 import { Event } from "../components/event";
 import { useEffect, useState } from "react";
 import { MAX_EVENTS } from "../defaults";
 import { User } from "./user";
-import { NFilters } from "@nostr-ts/common";
 
 export function Events(props: {
  userComponent?: typeof User;
@@ -46,19 +46,19 @@ export function Events(props: {
  const newEvents = async () => {
  setMoreEventsCount(0);
  setFilters(props.filters);
- await useNClient.getState().setMaxEvents(MAX_EVENTS);
- await useNClient.getState().clearEvents();
- await useNClient.getState().setViewSubscription(props.view, filters);
+ await useNClient.getState().setViewSubscription(props.view, filters, {
+  reset: true,
+ });
  setShowButtonsAnyway(false);
  };
 
  const showButtons = events.length >= maxEvents || showButtonsAnyway;
 
  return (
  <Box style={{ overflowWrap: "break-word", wordWrap: "break-word" }}>
- {events.map((event) => {
+ {events.map((event, index) => {
  return (
- <Box padding={2} key={event.event.id}>
+ <Box padding={2} key={`${event.event.id}-${index}`}>
  <Event
  event={event.event}
  user={event.user}
@@ -67,7 +67,6 @@ export function Events(props: {
  mentions={event.mentions}
  replies={event.replies}
  eventRelayUrls={event.eventRelayUrls}
- key={event.event.id}
  userComponent={
  props && props.userComponent ? (
  event.user && event.user.pubkey ? (
@@ -96,7 +95,9 @@ export function Events(props: {
  );
  })}
  {events.length === 0 && (
- <Text>Waiting for fresh content ... hold on.</Text>
+ <Box marginTop={5} marginBottom={5} textAlign={"center"}>
+ <Text>Waiting for fresh content ... hold on.</Text>
+ </Box>
  )}
  {showButtons && (
  <Box display="flex" justifyContent="space-between" padding={2}>