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

Fix keyboard shortcuts activating when replying to notification

Browse Source
This commit is contained in:
hzrd149 2024-09-04 08:14:17 -05:00
parent 5f5ebc085b
commit 3768645bae
4 changed files with 83 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/tricky-rivers-think.md Normal file
View File

@ -0,0 +1,5 @@
---
"nostrudel": patch
---
Fixed keyboard shortcuts activating when replying to notification

34
src/hooks/use-key-press-nav.ts Normal file
View File

@ -0,0 +1,34 @@
import { useKeyPressEvent } from "react-use";
import { Handler } from "react-use/lib/useKey";
export default function useKeyPressNav(key: string, keydown?: Handler | null, keyup?: Handler | null) {
return useKeyPressEvent(
key,
keydown
? (e) => {
// ignore if the user is focused on an input
if (
document.activeElement instanceof HTMLInputElement ||
document.activeElement instanceof HTMLTextAreaElement
) {
return;
}
keydown(e);
}
: undefined,
keyup
? (e) => {
// ignore if the user is focused on an input
if (
document.activeElement instanceof HTMLInputElement ||
document.activeElement instanceof HTMLTextAreaElement
) {
return;
}
keyup(e);
}
: undefined,
);
}

44
src/views/notifications/components/notification-item.tsx
View File

@ -8,7 +8,7 @@ import { NostrEvent, isATag, isETag } from "../../../types/nostr-event";
import { getParsedZap } from "../../../helpers/nostr/zaps";
import { readablizeSats } from "../../../helpers/bolt11";
import { getThreadReferences, parseCoordinate } from "../../../helpers/nostr/event";
import { EmbedEventPointer } from "../../../components/embed-event";
import { EmbedEvent, EmbedEventPointer } from "../../../components/embed-event";
import EmbeddedUnknown from "../../../components/embed-event/event-types/embedded-unknown";
import { ErrorBoundary } from "../../../components/error-boundary";
import { TrustProvider } from "../../../providers/local/trust-provider";
@ -33,6 +33,7 @@ import UserAvatar from "../../../components/user/user-avatar";
import UserName from "../../../components/user/user-name";
import { truncateId } from "../../../helpers/string";
import TextNoteContents from "../../../components/note/timeline-note/text-note-contents";
import ArticleCard from "../../articles/components/article-card";
export const ExpandableToggleButton = ({
toggle,
@ -73,19 +74,34 @@ const ReplyNotification = forwardRef<HTMLDivElement, { event: NostrEvent; onClic
);
const MentionNotification = forwardRef<HTMLDivElement, { event: NostrEvent; onClick?: () => void }>(
({ event, onClick }, ref) => (
<NotificationIconEntry
ref={ref}
icon={<AtIcon boxSize={8} color="purple.400" />}
id={event.id}
pubkey={event.pubkey}
timestamp={event.created_at}
summary={event.content}
onClick={onClick}
>
<TimelineNote event={event} showReplyButton />
</NotificationIconEntry>
),
({ event, onClick }, ref) => {
let content: ReactNode;
switch (event.kind) {
case kinds.LongFormArticle:
content = <ArticleCard article={event} />;
break;
case kinds.ShortTextNote:
content = <TimelineNote event={event} showReplyButton />;
break;
default:
content = <EmbedEvent event={event} />;
break;
}
return (
<NotificationIconEntry
ref={ref}
icon={<AtIcon boxSize={8} color="purple.400" />}
id={event.id}
pubkey={event.pubkey}
timestamp={event.created_at}
summary={event.content}
onClick={onClick}
>
{content}
</NotificationIconEntry>
);
},
);
const RepostNotification = forwardRef<HTMLDivElement, { event: NostrEvent; onClick?: () => void }>(

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

@ -1,8 +1,7 @@
import { memo, ReactNode, useCallback, useContext, useMemo } from "react";
import { BreadcrumbLink, Button, ButtonGroup, Divider, Flex, Switch, Text } from "@chakra-ui/react";
import { Button, ButtonGroup, Divider, Flex, Text } from "@chakra-ui/react";
import { Link as RouterLink } from "react-router-dom";
import dayjs, { Dayjs } from "dayjs";
import { useKeyPressEvent } from "react-use";
import RequireCurrentAccount from "../../providers/route/require-current-account";
import IntersectionObserverProvider from "../../providers/local/intersection-observer";
@ -20,6 +19,7 @@ import TimelineActionAndStatus from "../../components/timeline/timeline-action-a
import FocusedContext from "./focused-context";
import useRouteStateValue from "../../hooks/use-route-state-value";
import readStatusService from "../../services/read-status";
import useKeyPressNav from "../../hooks/use-key-press-nav";
// const DATE_FORMAT = "YYYY-MM-DD";
@ -142,18 +142,18 @@ const NotificationsTimeline = memo(
const navigateTop = () => setFocus(filteredEvents[0]?.id ?? "");
const navigateEnd = () => setFocus(filteredEvents[filteredEvents.length - 1]?.id ?? "");
useKeyPressEvent("ArrowUp", navigatePrev);
useKeyPressEvent("ArrowDown", navigateNext);
useKeyPressEvent("ArrowLeft", navigatePrevUnread);
useKeyPressEvent("ArrowRight", navigateNextUnread);
useKeyPressEvent("k", navigatePrev);
useKeyPressEvent("h", navigatePrevUnread);
useKeyPressEvent("j", navigateNext);
useKeyPressEvent("l", navigateNextUnread);
useKeyPressEvent("H", navigateTop);
useKeyPressEvent("Home", navigateTop);
useKeyPressEvent("L", navigateEnd);
useKeyPressEvent("End", navigateEnd);
useKeyPressNav("ArrowUp", navigatePrev);
useKeyPressNav("ArrowDown", navigateNext);
useKeyPressNav("ArrowLeft", navigatePrevUnread);
useKeyPressNav("ArrowRight", navigateNextUnread);
useKeyPressNav("k", navigatePrev);
useKeyPressNav("h", navigatePrevUnread);
useKeyPressNav("j", navigateNext);
useKeyPressNav("l", navigateNextUnread);
useKeyPressNav("H", navigateTop);
useKeyPressNav("Home", navigateTop);
useKeyPressNav("L", navigateEnd);
useKeyPressNav("End", navigateEnd);
if (filteredEvents.length === 0)
return (