Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

hover states

This commit is contained in:
Nate Kelley 2025-09-30 09:25:41 -06:00
parent d0e3b811e5
commit 71b795abc1
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
3 changed files with 33 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
apps/web/src/components/features/input/Mentions/ShortcutsSuggestions/ShortcutsSuggestions.tsx
View File

@ -26,6 +26,7 @@ export const useCreateShortcutsMentionsSuggestions = (
setOpenCreateShortcutModal: (open: boolean) => void setOpenCreateShortcutModal: (open: boolean) => void
) => { ) => {
const navigate = useNavigate(); const navigate = useNavigate();
const createShortcutForMention = useCreateShortcutForMention();
return useMemo( return useMemo(
() => () =>
@ -68,40 +69,45 @@ export const useCreateShortcutsMentionsSuggestions = (
); );
}; };
const createShortcutForMention = (shortcut: Shortcut): MentionTriggerItem<string> => { export const useCreateShortcutForMention = () => {
return { const createShortcutForMention = (shortcut: Shortcut): MentionTriggerItem<string> => {
value: shortcut.id, return {
label: shortcut.name, value: shortcut.id,
icon: <PenWriting />, label: shortcut.name,
secondaryContent: ( icon: <PenWriting />,
<MentionSecondaryContentDropdown secondaryContent: (
items={[ <MentionSecondaryContentDropdown
{ items={[
label: 'Edit', {
icon: <PenWriting />, label: 'Edit',
value: 'edit', icon: <PenWriting />,
onClick: () => { value: 'edit',
console.log('edit'); onClick: () => {
console.log('edit');
},
}, },
}, {
{ label: 'Delete',
label: 'Delete', icon: <Trash />,
icon: <Trash />, value: 'delete',
value: 'delete', onClick: () => {
onClick: () => { console.log('delete');
console.log('delete'); },
}, },
}, ]}
]} />
/> ),
), };
}; };
return createShortcutForMention;
}; };
export const useShortcutsSuggestions = ( export const useShortcutsSuggestions = (
shortcuts: ListShortcutsResponse['shortcuts'], shortcuts: ListShortcutsResponse['shortcuts'],
setOpenCreateShortcutModal: (open: boolean) => void, setOpenCreateShortcutModal: (open: boolean) => void,
mentionInputSuggestionsRef: React.RefObject<MentionInputSuggestionsRef | null> mentionInputSuggestionsRef: React.RefObject<MentionInputSuggestionsRef | null>
): MentionInputSuggestionsProps['suggestionItems'] => { ): MentionInputSuggestionsProps['suggestionItems'] => {
const createShortcutForMention = useCreateShortcutForMention();
return useMemo(() => { return useMemo(() => {
const shortcutsItems = shortcuts.map<MentionInputSuggestionsDropdownItem>((shortcut) => { const shortcutsItems = shortcuts.map<MentionInputSuggestionsDropdownItem>((shortcut) => {
return { return {

2
apps/web/src/components/ui/inputs/MentionInput/MentionSecondaryContentDropdown.tsx
View File

@ -17,7 +17,7 @@ export const MentionSecondaryContentDropdown = ({
<Button <Button
variant={'ghost'} variant={'ghost'}
className={cn( className={cn(
'hover:bg-item-active hidden group-data-[selected=true]/mention-list-item:flex -mr-1.5', 'hover:bg-item-active hidden group-hover/mention-list-item:flex group-data-[selected=true]/mention-list-item:flex -mr-1.5',
open && 'flex!' open && 'flex!'
)} )}
prefix={<Dots />} prefix={<Dots />}

3
apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsItem.tsx
View File

@ -1,6 +1,5 @@
import { Command, useCommandState } from 'cmdk'; import { Command } from 'cmdk';
import type React from 'react'; import type React from 'react';
import { useMount } from '@/hooks/useMount';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { Popover } from '../../popover'; import { Popover } from '../../popover';
import type { import type {