mirror
/
front-end-interview-handbook
mirror of https://github.com/yangshun/front-end-interview-handbook.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[socialmon] inbox: change keyboard char appearance

This commit is contained in:
Yangshun 2025-07-16 09:52:48 +08:00
parent ead0800134
commit c1b6feb2a6
5 changed files with 87 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/socialmon/src/components/common/KeyboardChar.tsx Normal file
View File

@ -0,0 +1,14 @@
import clsx from 'clsx';
export default function KeyboardChar({ char }: { char: string }) {
return (
<kbd
className={clsx(
'inline-flex items-center justify-center',
'size-5',
'rounded border border-gray-500',
)}>
{char}
</kbd>
);
}

25
apps/socialmon/src/components/posts/InterceptedPostDetailClient.tsx
View File

@ -9,6 +9,7 @@ import {
RiExternalLinkLine,
} from 'react-icons/ri';
import KeyboardChar from '~/components/common/KeyboardChar';
import { useIsMobileModal } from '~/components/ui/MobilePostModal';
import type { PostExtended } from '~/types';
@ -75,7 +76,13 @@ export default function InterceptedPostDetailClient({
<div className="sticky bottom-0 left-0 right-0 z-10 flex items-center justify-between border-t border-gray-200 bg-white px-4 pb-3 pt-3">
{/* Navigation buttons */}
<div className="flex items-center gap-2">
<Tooltip label="Previous post (K)" withArrow={true}>
<Tooltip
label={
<>
Previous post <KeyboardChar char="K" />
</>
}
withArrow={true}>
<ActionIcon
aria-label="Previous post"
disabled={!adjacentPosts.prev}
@ -85,7 +92,13 @@ export default function InterceptedPostDetailClient({
<RiArrowLeftSLine />
</ActionIcon>
</Tooltip>
<Tooltip label="Next post (J)" withArrow={true}>
<Tooltip
label={
<>
Next post <KeyboardChar char="J" />
</>
}
withArrow={true}>
<ActionIcon
aria-label="Next post"
disabled={!adjacentPosts.next}
@ -108,7 +121,13 @@ export default function InterceptedPostDetailClient({
postId={post.id}
replyStatus={post.replied}
/>
<Tooltip label="View on Reddit (E)" withArrow={true}>
<Tooltip
label={
<>
View on Reddit <KeyboardChar char="E" />
</>
}
withArrow={true}>
<ActionIcon
aria-label="View on Reddit"
color="orange"

33
apps/socialmon/src/components/posts/PostList/PostList.tsx
View File

@ -9,6 +9,7 @@ import { trpc } from '~/hooks/trpc';
import useCurrentProjectSlug from '~/hooks/useCurrentProjectSlug';
import RelativeTimestamp from '~/components/common/datetime/RelativeTimestamp';
import KeyboardChar from '~/components/common/KeyboardChar';
import { usePostTabShortcuts } from '~/components/posts/hooks/usePostTabShortcuts';
import { usePostsContext } from '~/components/posts/PostsContext';
@ -67,22 +68,46 @@ export default function PostList() {
variant="outline"
onChange={(value) => setActiveTab(value as PostListTab)}>
<Tabs.List>
<Tooltip label="Pending (Shortcut: G + P)" withArrow={true}>
<Tooltip
label={
<>
<KeyboardChar char="G" /> then <KeyboardChar char="P" />
</>
}
withArrow={true}>
<Tabs.Tab fw={500} value="PENDING">
Pending
</Tabs.Tab>
</Tooltip>
<Tooltip label="Replied (Shortcut: G + R)" withArrow={true}>
<Tooltip
label={
<>
<KeyboardChar char="G" /> then <KeyboardChar char="R" />
</>
}
withArrow={true}>
<Tabs.Tab fw={500} value="REPLIED">
Replied
</Tabs.Tab>
</Tooltip>
<Tooltip label="Irrelevant (Shortcut: G + T)" withArrow={true}>
<Tooltip
label={
<>
<KeyboardChar char="G" /> then <KeyboardChar char="T" />
</>
}
withArrow={true}>
<Tabs.Tab fw={500} value="IRRELEVANT">
Irrelevant
</Tabs.Tab>
</Tooltip>
<Tooltip label="All (Shortcut: G + A)" withArrow={true}>
<Tooltip
label={
<>
<KeyboardChar char="G" /> then <KeyboardChar char="A" />
</>
}
withArrow={true}>
<Tabs.Tab fw={500} value="ALL">
All
</Tabs.Tab>

14
apps/socialmon/src/components/posts/PostRelevanceActionButton.tsx
View File

@ -6,6 +6,8 @@ import { RiCheckLine, RiForbidLine } from 'react-icons/ri';
import { trpc } from '~/hooks/trpc';
import useCurrentProjectSlug from '~/hooks/useCurrentProjectSlug';
import KeyboardChar from '~/components/common/KeyboardChar';
import { PostRelevancy } from '~/prisma/client';
type Props = Readonly<{
iconOnly?: boolean;
@ -51,13 +53,19 @@ export default function PostRelevanceActionButton({
};
const label =
(relevancy === PostRelevancy.IRRELEVANT
relevancy === PostRelevancy.IRRELEVANT
? 'Mark as relevant'
: 'Mark as irrelevant') + ' (T)';
: 'Mark as irrelevant';
if (iconOnly) {
return (
<Tooltip label={label} withArrow={true}>
<Tooltip
label={
<>
{label} <KeyboardChar char="T" />
</>
}
withArrow={true}>
<ActionIcon
aria-label={label}
size="lg"

14
apps/socialmon/src/components/posts/PostReplyStatusActionButton.tsx
View File

@ -6,6 +6,8 @@ import { RiReplyFill, RiReplyLine } from 'react-icons/ri';
import { trpc } from '~/hooks/trpc';
import useCurrentProjectSlug from '~/hooks/useCurrentProjectSlug';
import KeyboardChar from '~/components/common/KeyboardChar';
import { PostRepliedStatus } from '~/prisma/client';
type Props = Readonly<{
@ -59,13 +61,19 @@ export default function PostReplyStatusActionButton({
}
const label =
(replyStatus === PostRepliedStatus.NOT_REPLIED
replyStatus === PostRepliedStatus.NOT_REPLIED
? 'Mark as replied'
: 'Mark as not replied') + ' (R)';
: 'Mark as not replied';
if (iconOnly) {
return (
<Tooltip label={label} withArrow={true}>
<Tooltip
label={
<>
{label} <KeyboardChar char="R" />
</>
}
withArrow={true}>
<ActionIcon
aria-label={label}
size="lg"