small UI improvements

src/components/connected-relays.tsx

@@ -43,15 +43,7 @@ export const ConnectedRelays = () => {
   return (
     <>
       <Button variant="link" onClick={onOpen} leftIcon={<RelayIcon />}>
-        {isMobile ? (
+        {connected.length}/{relays.length} of relays connected
-          <span>
-            {connected.length}/{relays.length}
-          </span>
-        ) : (
-          <span>
-            {connected.length}/{relays.length} of relays connected
-          </span>
-        )}
       </Button>
       <Modal isOpen={isOpen} onClose={onClose} size="5xl">
         <ModalOverlay />

src/components/icons.tsx

@@ -18,122 +18,128 @@ export const GlobalIcon = createIcon({
   defaultProps,
 });
 
+export const HomeIcon = createIcon({
+  displayName: "HomeIcon",
+  d: "M19 21H5a1 1 0 0 1-1-1v-9H1l10.327-9.388a1 1 0 0 1 1.346 0L23 11h-3v9a1 1 0 0 1-1 1zM6 19h12V9.157l-6-5.454-6 5.454V19z",
+  defaultProps,
+});
+
 export const FeedIcon = createIcon({
-  displayName: "feed-icon",
+  displayName: "FeedIcon",
   d: "M16 18v2H5v-2h11zm5-7v2H3v-2h18zm-2-7v2H8V4h11z",
   defaultProps,
 });
 
 export const MoreIcon = createIcon({
-  displayName: "more-icon",
+  displayName: "MoreIcon",
   d: "M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6 12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21 12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z",
   defaultProps,
 });
 
 export const CodeIcon = createIcon({
-  displayName: "code-icon",
+  displayName: "CodeIcon",
   d: `M23 12l-7.071 7.071-1.414-1.414L20.172 12l-5.657-5.657 1.414-1.414L23 12zM3.828 12l5.657 5.657-1.414 1.414L1 12l7.071-7.071 1.414 1.414L3.828 12z`,
   defaultProps,
 });
 
 export const SettingsIcon = createIcon({
-  displayName: "settings-2-line",
+  displayName: "SettingsIcon",
   d: "M8.686 4l2.607-2.607a1 1 0 0 1 1.414 0L15.314 4H19a1 1 0 0 1 1 1v3.686l2.607 2.607a1 1 0 0 1 0 1.414L20 15.314V19a1 1 0 0 1-1 1h-3.686l-2.607 2.607a1 1 0 0 1-1.414 0L8.686 20H5a1 1 0 0 1-1-1v-3.686l-2.607-2.607a1 1 0 0 1 0-1.414L4 8.686V5a1 1 0 0 1 1-1h3.686zM6 6v3.515L3.515 12 6 14.485V18h3.515L12 20.485 14.485 18H18v-3.515L20.485 12 18 9.515V6h-3.515L12 3.515 9.515 6H6zm6 10a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z",
   defaultProps,
 });
 
 export const LogoutIcon = createIcon({
-  displayName: "logout-box-line",
+  displayName: "LogoutIcon",
   d: "M4 18h2v2h12V4H6v2H4V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3zm2-7h7v2H6v3l-5-4 5-4v3z",
   defaultProps,
 });
 
 export const ProfileIcon = createIcon({
-  displayName: "user-line",
+  displayName: "ProfileIcon",
   d: "M4 22a8 8 0 1 1 16 0h-2a6 6 0 1 0-12 0H4zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z",
   defaultProps,
 });
 
 export const ClipboardIcon = createIcon({
-  displayName: "clipboard-line",
+  displayName: "ClipboardIcon",
   d: "M7 4V2h10v2h3.007c.548 0 .993.445.993.993v16.014a.994.994 0 0 1-.993.993H3.993A.994.994 0 0 1 3 21.007V4.993C3 4.445 3.445 4 3.993 4H7zm0 2H5v14h14V6h-2v2H7V6zm2-2v2h6V4H9z",
   defaultProps,
 });
 
 export const TrashIcon = createIcon({
-  displayName: "delete-bin-line",
+  displayName: "TrashIcon",
   d: "M17 6h5v2h-2v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8H2V6h5V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v3zm1 2H6v12h12V8zm-9 3h2v6H9v-6zm4 0h2v6h-2v-6zM9 4v2h6V4H9z",
   defaultProps,
 });
 
 export const AddIcon = createIcon({
-  displayName: "delete-bin-line",
+  displayName: "AddIcon",
   d: "M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z",
   defaultProps,
 });
 
 export const ArrowDownSIcon = createIcon({
-  displayName: "arrow-down-s",
+  displayName: "ArrowDownSIcon",
   d: "M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z",
   defaultProps,
 });
 
 export const ArrowUpSIcon = createIcon({
-  displayName: "arrow-up-s",
+  displayName: "ArrowUpSIcon",
   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",
+  displayName: "ArrowLeftSIcon",
   d: "M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z",
   defaultProps,
 });
 
 export const ArrowRightSIcon = createIcon({
-  displayName: "arrow-right-s",
+  displayName: "ArrowRightSIcon",
   d: "M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z",
   defaultProps,
 });
 
 export const LinkItem = createIcon({
-  displayName: "ri-link",
+  displayName: "LinkItem",
   d: "M18.364 15.536L16.95 14.12l1.414-1.414a5 5 0 1 0-7.071-7.071L9.879 7.05 8.464 5.636 9.88 4.222a7 7 0 0 1 9.9 9.9l-1.415 1.414zm-2.828 2.828l-1.415 1.414a7 7 0 0 1-9.9-9.9l1.415-1.414L7.05 9.88l-1.414 1.414a5 5 0 1 0 7.071 7.071l1.414-1.414 1.415 1.414zm-.708-10.607l1.415 1.415-7.071 7.07-1.415-1.414 7.071-7.07z",
   defaultProps,
 });
 
 export const LightningIcon = createIcon({
-  displayName: "lightning-icon",
+  displayName: "LightningIcon",
   d: "M13 10h7l-9 13v-9H4l9-13z",
   defaultProps,
 });
 
 export const RelayIcon = createIcon({
-  displayName: "relay-icon",
+  displayName: "RelayIcon",
   d: "M11 14v-3h2v3h5a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1h5zM2.51 8.837C3.835 4.864 7.584 2 12 2s8.166 2.864 9.49 6.837l-1.898.632a8.003 8.003 0 0 0-15.184 0l-1.897-.632zm3.796 1.265a6.003 6.003 0 0 1 11.388 0l-1.898.633a4.002 4.002 0 0 0-7.592 0l-1.898-.633z",
   defaultProps,
 });
 
 export const ExternalLinkIcon = createIcon({
-  displayName: "external-link-icon",
+  displayName: "ExternalLinkIcon",
   d: "M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z",
   defaultProps,
 });
 
 export const SearchIcon = createIcon({
-  displayName: "search-icon",
+  displayName: "SearchIcon",
   d: "M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z",
   defaultProps,
 });
 
 export const ShareIcon = createIcon({
-  displayName: "share-icon",
+  displayName: "ShareIcon",
   d: "M13.12 17.023l-4.199-2.29a4 4 0 1 1 0-5.465l4.2-2.29a4 4 0 1 1 .959 1.755l-4.2 2.29a4.008 4.008 0 0 1 0 1.954l4.199 2.29a4 4 0 1 1-.959 1.755zM6 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm11-6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4z",
   defaultProps,
 });
 
 export const ReplyIcon = createIcon({
-  displayName: "reply-icon",
+  displayName: "ReplyIcon",
   d: "M5.763 17H20V5H4v13.385L5.763 17zm.692 2L2 22.5V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6.455z",
   defaultProps,
 });

src/components/page/mobile-bottom-nav.tsx

@@ -1,21 +1,29 @@
 import { ChatIcon } from "@chakra-ui/icons";
 import { Flex, IconButton } from "@chakra-ui/react";
 import { useNavigate } from "react-router-dom";
-import { FeedIcon, SettingsIcon } from "../icons";
+import { FeedIcon, HomeIcon, NotificationIcon, SearchIcon, SettingsIcon } from "../icons";
 
 export default function MobileBottomNav() {
   const navigate = useNavigate();
 
   return (
     <Flex flexShrink={0} gap="2" padding="2">
-      <IconButton icon={<FeedIcon />} aria-label="Home" onClick={() => navigate("/")} flexGrow="1" size="lg" />
+      <IconButton icon={<HomeIcon />} aria-label="Home" onClick={() => navigate("/")} flexGrow="1" size="md" />
-      <IconButton icon={<ChatIcon />} aria-label="Messages" onClick={() => navigate(`/dm`)} flexGrow="1" size="lg" />
       <IconButton
-        icon={<SettingsIcon />}
+        icon={<SearchIcon />}
-        aria-label="Settings"
+        aria-label="Search"
-        onClick={() => navigate("/settings")}
+        onClick={() => navigate(`/search`)}
         flexGrow="1"
-        size="lg"
+        size="md"
+        disabled
+      />
+      <IconButton icon={<ChatIcon />} aria-label="Messages" onClick={() => navigate(`/dm`)} flexGrow="1" size="md" />
+      <IconButton
+        icon={<NotificationIcon />}
+        aria-label="Notifications"
+        onClick={() => navigate("/notifications")}
+        flexGrow="1"
+        size="md"
       />
     </Flex>
   );

src/components/page/mobile-header.tsx

@@ -23,18 +23,6 @@ export default function MobileHeader() {
             Readonly Mode
           </Text>
         )}
-        <Flex gap="2">
-          <ConnectedRelays />
-          <IconButton
-            as={Link}
-            variant="ghost"
-            icon={<NotificationIcon />}
-            aria-label="Notifications"
-            title="Notifications"
-            size="sm"
-            to="/notifications"
-          />
-        </Flex>
       </Flex>
       <MobileSideDrawer isOpen={isOpen} onClose={onClose} />
     </>

src/components/page/mobile-side-drawer.tsx

@@ -15,7 +15,8 @@ import { getUserDisplayName } from "../../helpers/user-metadata";
 import { useCurrentAccount } from "../../hooks/use-current-account";
 import { useUserMetadata } from "../../hooks/use-user-metadata";
 import accountService from "../../services/account";
-import { LogoutIcon, ProfileIcon, RelayIcon, SettingsIcon } from "../icons";
+import { ConnectedRelays } from "../connected-relays";
+import { HomeIcon, LogoutIcon, ProfileIcon, RelayIcon, SearchIcon, SettingsIcon } from "../icons";
 import { UserAvatar } from "../user-avatar";
 import { UserLink } from "../user-link";
 import AccountSwitcher from "./account-switcher";
@@ -39,6 +40,12 @@ export default function MobileSideDrawer({ ...props }: Omit<DrawerProps, "childr
         <DrawerBody padding={0} overflowY="auto" overflowX="hidden">
           <AccountSwitcher />
           <Flex direction="column" gap="2" padding="2">
+            <Button onClick={() => navigate(`/`)} leftIcon={<HomeIcon />}>
+              Home
+            </Button>
+            <Button onClick={() => navigate(`/search`)} leftIcon={<SearchIcon />} disabled>
+              Search
+            </Button>
             <Button onClick={() => navigate(`/profile`)} leftIcon={<ProfileIcon />}>
               Profile
             </Button>
@@ -51,6 +58,7 @@ export default function MobileSideDrawer({ ...props }: Omit<DrawerProps, "childr
             <Button onClick={() => accountService.logout()} leftIcon={<LogoutIcon />}>
               Logout
             </Button>
+            <ConnectedRelays />
           </Flex>
         </DrawerBody>
       </DrawerContent>

src/services/relay-scoreboard.ts

@@ -73,9 +73,9 @@ class TimeMeasure implements RelayMeasure, PersistentMeasure {
   addTime(time: number, date: Date = new Date()) {
     this.measures.unshift([time, date]);
   }
-  getCount(since?: Date){
+  getCount(since?: Date) {
     const points = since ? this.measures.filter((m) => m[1] > since) : this.measures;
-    return points.length
+    return points.length;
   }
   getAverage(since?: Date, undef: number = Infinity) {
     const points = since ? this.measures.filter((m) => m[1] > since) : this.measures;
@@ -141,8 +141,8 @@ class RelayScoreboardService {
   //   return this.relayTimeouts.get(relay).getCount(since);
   // }
 
-  hasConnected(relay: string, since?: Date){
+  hasConnected(relay: string, since?: Date) {
-    return this.relayConnectionTime.get(relay).getCount(since)>0;
+    return this.relayConnectionTime.get(relay).getCount(since) > 0;
   }
   getResponseTimeScore(relay: string, since?: Date) {
     const responseTime = this.getAverageResponseTime(relay, since);

src/views/home/global-tab.tsx

@@ -24,7 +24,7 @@ export default function GlobalTab() {
   const { isOpen: showReplies, onToggle } = useDisclosure();
   const { events, loading, loadMore, loader } = useTimelineLoader(
     `global`,
-    selectedRelay ? [selectedRelay] : availableRelays,
+    selectedRelay ? [selectedRelay] : [],
     { kinds: [1] },
     { pageSize: moment.duration(5, "minutes").asSeconds() }
   );
@@ -35,7 +35,7 @@ export default function GlobalTab() {
     <Flex direction="column" gap="2">
       <Flex gap="2">
         <Select
-          placeholder="All Relays"
+          placeholder="Select Relay"
           maxWidth="250"
           value={selectedRelay}
           onChange={(e) => {

src/views/notifications/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, CardBody, Flex, Spinner, Text } from "@chakra-ui/react";
+import { Button, Card, CardBody, CardHeader, Flex, Spinner, Text } from "@chakra-ui/react";
 import moment from "moment";
 import { memo } from "react";
 import { useNavigate } from "react-router-dom";
@@ -14,16 +14,18 @@ const Kind1Notification = ({ event }: { event: NostrEvent }) => {
   const navigate = useNavigate();
 
   return (
-    <Card>
+    <Card size="sm" variant="outline">
-      <CardBody>
+      <CardHeader>
-        <Flex gap="4">
+        <Flex gap="4" alignItems="center">
           <UserAvatar pubkey={event.pubkey} size="sm" />
           <UserLink pubkey={event.pubkey} />
-          <Text>{moment(convertTimestampToDate(event.created_at)).fromNow()}</Text>
+          <Button onClick={() => navigate(`/n/${event.id}`)} ml="auto" variant="link">
-          <Button onClick={() => navigate(`/n/${event.id}`)} size="sm" ml="auto">
+            {moment(convertTimestampToDate(event.created_at)).fromNow()}
-            View
           </Button>
         </Flex>
+      </CardHeader>
+      <CardBody pt={0}>
+        <Text>{event.content.replace("\n", " ").slice(0, 64)}</Text>
       </CardBody>
     </Card>
   );

src/views/relays/index.tsx

@@ -76,7 +76,7 @@ export default function RelaysView() {
 
   return (
     <Flex direction="column" pt="2" pb="2" overflow="auto">
-      <TableContainer mb="4">
+      <TableContainer mb="4" overflowY="initial">
         <Table variant="simple" size="sm">
           <Thead>
             <Tr>
@@ -96,7 +96,7 @@ export default function RelaysView() {
                   </Flex>
                 </Td>
                 <Td>
-                  <RelayScoreBreakdown relay={relay.url}/>
+                  <RelayScoreBreakdown relay={relay.url} />
                 </Td>
                 <Td>
                   <RelayStatus url={relay.url} />
@@ -145,9 +145,6 @@ export default function RelaysView() {
       </form>
 
       <Flex justifyContent="flex-end" gap="2">
-        <Button type="submit" onClick={savePending} isDisabled={saving || !hasPending}>
-          Reset
-        </Button>
         <Button type="submit" isLoading={saving} onClick={savePending} isDisabled={!hasPending}>
           Save Changes
         </Button>