highperfocused/nostrudel
1
0
Fork 0
mirror of https://github.com/hzrd149/nostrudel.git synced 2025-04-03 09:28:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

small UI improvements

Browse Source
This commit is contained in:
hzrd149 2023-03-11 09:10:24 -06:00
parent a4194c1a73
commit 917023e576
9 changed files with 68 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/connected-relays.tsx
View File

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

46
src/components/icons.tsx
View File

@ -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,
});

22
src/components/page/mobile-bottom-nav.tsx
View File

@ -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={<ChatIcon />} aria-label="Messages" onClick={() => navigate(`/dm`)} flexGrow="1" size="lg" />
<IconButton icon={<HomeIcon />} aria-label="Home" onClick={() => navigate("/")} flexGrow="1" size="md" />
<IconButton
icon={<SettingsIcon />}
aria-label="Settings"
onClick={() => navigate("/settings")}
icon={<SearchIcon />}
aria-label="Search"
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>
);

12
src/components/page/mobile-header.tsx
View File

@ -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} />
</>

10
src/components/page/mobile-side-drawer.tsx
View File

@ -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>

8
src/services/relay-scoreboard.ts
View File

@ -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){
return this.relayConnectionTime.get(relay).getCount(since)>0;
hasConnected(relay: string, since?: Date) {
return this.relayConnectionTime.get(relay).getCount(since) > 0;
}
getResponseTimeScore(relay: string, since?: Date) {
const responseTime = this.getAverageResponseTime(relay, since);

4
src/views/home/global-tab.tsx
View File

@ -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) => {

16
src/views/notifications/index.tsx
View File

@ -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>
<CardBody>
<Flex gap="4">
<Card size="sm" variant="outline">
<CardHeader>
<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}`)} size="sm" ml="auto">
View
<Button onClick={() => navigate(`/n/${event.id}`)} ml="auto" variant="link">
{moment(convertTimestampToDate(event.created_at)).fromNow()}
</Button>
</Flex>
</CardHeader>
<CardBody pt={0}>
<Text>{event.content.replace("\n", " ").slice(0, 64)}</Text>
</CardBody>
</Card>
);

7
src/views/relays/index.tsx
View File

@ -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>