Skip to content

Commit 59700fe

Browse files
xypnoxxypnox
authored
RHSidebar redesign (#429)
#429 * Fix hiding of rhsidebar when notes are open and nav * Fix: Ignore f/Shift F in enableShortcutHandler for dropdown menu * Merge suggestions with related notes and show in datainfobar * Add forwardlinks toggleable in backlinks * Use simplified reminder sidebar ui * Setup empty last used snippets, and basic snippet card sidebar * Add snippet tags and onInsertSnippet in snippetCard * Add snippet preview * Add snippet last used to sidebar snippet card and sort by last used * Revert filter for task based on tag inside task instead of in note * Add managed state for collapsible components * Use wrapper ref for checking overflow * Fix some heights and gap lengths * Remove logs, organize import * Rename suggested toggle function to snippet toggle * Update shortcut to snippet sidebar * Scroll to block
1 parent 148e026 commit 59700fe

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1142
-261
lines changed

‎src/components/icons/Icons.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,25 @@ export const SharedNodeIconify = {
6161
<path fill="currentColor" d="M16.5386 19.7171L13.2456 17.9211C12.9296 18.2349 12.5276 18.448 12.0906 18.5337C11.6535 18.6194 11.2009 18.5738 10.7897 18.4026C10.3786 18.2314 10.0273 17.9423 9.7802 17.5717C9.53311 17.2012 9.40125 16.7658 9.40125 16.3204C9.40125 15.875 9.53311 15.4396 9.7802 15.069C10.0273 14.6985 10.3786 14.4094 10.7897 14.2382C11.2009 14.067 11.6535 14.0214 12.0906 14.1071C12.5276 14.1927 12.9296 14.4059 13.2456 14.7197L16.5386 12.9237C16.4257 12.3938 16.5072 11.841 16.7684 11.3663C17.0296 10.8916 17.4529 10.5268 17.9609 10.3385C18.4689 10.1503 19.0278 10.1512 19.5352 10.3412C20.0426 10.5311 20.4646 10.8973 20.7242 11.3728C20.9838 11.8484 21.0636 12.4015 20.9489 12.931C20.8342 13.4605 20.5327 13.931 20.0996 14.2565C19.6665 14.582 19.1307 14.7407 18.5902 14.7037C18.0497 14.6666 17.5406 14.4362 17.156 14.0546L13.863 15.8506C13.9287 16.1603 13.9287 16.4804 13.863 16.7902L17.156 18.5861C17.5406 18.2046 18.0497 17.9742 18.5902 17.9371C19.1307 17.9 19.6665 18.0588 20.0996 18.3843C20.5327 18.7098 20.8342 19.1803 20.9489 19.7098C21.0636 20.2393 20.9838 20.7924 20.7242 21.2679C20.4646 21.7435 20.0426 22.1097 19.5352 22.2996C19.0278 22.4895 18.4689 22.4905 17.9609 22.3022C17.4529 22.114 17.0296 21.7492 16.7684 21.2745C16.5072 20.7998 16.4257 20.247 16.5386 19.7171Z" />`
6262
}
6363

64+
export const BacklinkIcon = {
65+
height: 24,
66+
width: 24,
67+
body: `
68+
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 20.86a2 2 0 0 1-1.388-.56 1 1 0 0 1 1.128-.474c.082.022.169.034.26.034h1a1 1 0 0 1 1 1H4zm8 0a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1h4zm5.388-.56a1 1 0 0 0-1.128-.474 1.005 1.005 0 0 1-.26.034h-1a1 1 0 0 0-1 1h2a2 2 0 0 0 1.388-.56zM18 16.86a1 1 0 0 0-1 1v1a1 1 0 0 1-.034.26 1 1 0 0 0 .474 1.129A2.005 2.005 0 0 0 18 18.86v-2zm0-6a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v-4zm-.56-5.388a1 1 0 0 0-.474 1.129 1 1 0 0 1 .034.26v1a1 1 0 0 0 1 1v-2a2 2 0 0 0-.56-1.39zM14 4.86a1 1 0 0 0 1 1h1c.091 0 .178.012.26.034a1 1 0 0 0 1.128-.473A2.004 2.004 0 0 0 16 4.86h-2zm-6 0a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1H8zm-2 0a1 1 0 0 1-1 1H4c-.091 0-.178.012-.26.034a1 1 0 0 1-1.128-.473A2.007 2.007 0 0 1 4 4.86h2zm-4 4a1 1 0 0 0 1-1v-1c0-.09.012-.178.034-.26a1 1 0 0 0-.474-1.128A2.007 2.007 0 0 0 2 6.86v2zm0 6a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1v4zm.56 5.389a1 1 0 0 0 .474-1.13A1.003 1.003 0 0 1 3 18.86v-1a1 1 0 0 0-1-1v2a2.003 2.003 0 0 0 .56 1.389z" fill="currentColor"/>
69+
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.675 1.754a1 1 0 0 1 1 1c0 2.574-.38 4.594-1.58 6.168-1.194 1.568-3.07 2.52-5.632 3.29l-.013.004-5.8 1.57 3.368 2.081a1 1 0 0 1-1.052 1.701l-6.12-3.782 3.224-6.18a1 1 0 1 1 1.773.924l-1.738 3.332 5.796-1.57c2.43-.73 3.8-1.527 4.604-2.582.8-1.05 1.17-2.53 1.17-4.956a1 1 0 0 1 1-1z" fill="currentColor"/>`
70+
}
71+
72+
export const ForwardlinkIcon = {
73+
height: 24,
74+
width: 24,
75+
body: `
76+
<g clip-path="url(#a)" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor"><path d="M4 20.86a2 2 0 0 1-1.388-.56 1 1 0 0 1 1.128-.474c.082.022.169.034.26.034h1a1 1 0 0 1 1 1H4zm8 0a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1h4zm5.388-.56a1 1 0 0 0-1.128-.474 1.005 1.005 0 0 1-.26.034h-1a1 1 0 0 0-1 1h2a2 2 0 0 0 1.388-.56zM18 16.86a1 1 0 0 0-1 1v1a1 1 0 0 1-.034.26 1 1 0 0 0 .474 1.129A2.005 2.005 0 0 0 18 18.86v-2zm0-6a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v-4zm-.56-5.388a1 1 0 0 0-.474 1.129 1 1 0 0 1 .034.26v1a1 1 0 0 0 1 1v-2a2 2 0 0 0-.56-1.39zM14 4.86a1 1 0 0 0 1 1h1c.091 0 .178.012.26.034a1 1 0 0 0 1.128-.473A2.004 2.004 0 0 0 16 4.86h-2zm-6 0a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1H8zm-2 0a1 1 0 0 1-1 1H4c-.091 0-.178.012-.26.034a1 1 0 0 1-1.128-.473A2.007 2.007 0 0 1 4 4.86h2zm-4 4a1 1 0 0 0 1-1v-1c0-.09.012-.178.034-.26a1 1 0 0 0-.474-1.128A2.007 2.007 0 0 0 2 6.86v2zm0 6a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1v4zm.56 5.389a1 1 0 0 0 .474-1.13A1.003 1.003 0 0 1 3 18.86v-1a1 1 0 0 0-1-1v2a2.003 2.003 0 0 0 .56 1.389z"/><path d="M8.032 16.421a1 1 0 0 1-1-1c0-2.574.38-4.594 1.58-6.168 1.194-1.568 3.07-2.52 5.633-3.29l.013-.003 5.799-1.571-3.367-2.08A1 1 0 0 1 17.74.606l6.12 3.782-3.224 6.181a1 1 0 0 1-1.773-.925l1.738-3.332-5.795 1.57c-2.43.73-3.8 1.527-4.604 2.582-.8 1.05-1.17 2.53-1.17 4.956a1 1 0 0 1-1 1z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs>`
77+
}
78+
6479
export const addIconsToIconify = () => {
6580
addIcon('mex:shared-note', SharedNodeIconify)
81+
addIcon('mex:backlink', BacklinkIcon)
82+
addIcon('mex:forwardlink', ForwardlinkIcon)
6683
}
6784

6885
export const SharedNodeIcon: React.FC<SharedNodeIconProps> = ({ fill, margin = '0', height = 24, width = 24 }) => {

‎src/components/layouts/Tabs.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,10 @@ type TabsProps = {
2626
openedTab: SingleTabType
2727
onChange: (tabType: SingleTabType) => void
2828
visible?: boolean
29+
wrapperRef?: React.RefObject<HTMLDivElement>
2930
}
3031

31-
const Tabs: React.FC<TabsProps> = ({ tabs, openedTab, onChange, visible }) => {
32+
const Tabs: React.FC<TabsProps> = ({ tabs, openedTab, wrapperRef, onChange, visible }) => {
3233
const [previousTab, setPreviousTab] = useState(openedTab)
3334

3435
const animationProps = useSpring({
@@ -64,7 +65,9 @@ const Tabs: React.FC<TabsProps> = ({ tabs, openedTab, onChange, visible }) => {
6465
</TabsWrapper>
6566
</TabHeaderContainer>
6667
<TabPanel style={bodyAnimation}>
67-
<TabBody onClick={() => onChange(openedTab)}>{tabs[index]?.component}</TabBody>
68+
<TabBody ref={wrapperRef} onClick={() => onChange(openedTab)}>
69+
{tabs[index]?.component}
70+
</TabBody>
6871
</TabPanel>
6972
</TabsContainer>
7073
)

‎src/components/mex/Backlinks/Backlinks.style.tsx

+24-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Button, IconButton } from '@workduck-io/mex-components'
12
import { transparentize } from 'polished'
23
import styled, { css } from 'styled-components'
34
import { HoverSubtleGlow, SubtleGlow } from '../../../style/helpers'
@@ -14,13 +15,19 @@ export const NodeLinkWrapper = styled.div`
1415
background: none;
1516
`
1617

18+
export const NodeLinkTitleWrapper = styled.div<{ selected?: boolean }>`
19+
display: flex;
20+
align-items: center;
21+
gap: ${({ theme }) => theme.spacing.tiny};
22+
`
23+
1724
export const NodeLinkStyled = styled.div<{ selected?: boolean }>`
1825
display: flex;
1926
align-items: center;
27+
justify-content: space-between;
2028
gap: ${({ theme }) => theme.spacing.small};
2129
cursor: pointer;
2230
border-radius: ${({ theme }) => theme.borderRadius.tiny};
23-
/* margin-bottom: ${({ theme }) => theme.spacing.small}; */
2431
background: ${({ theme }) => transparentize(0.75, theme.colors.gray[8])};
2532
padding: ${({ theme }) => `${theme.spacing.small} ${theme.spacing.medium}`};
2633
@@ -30,12 +37,28 @@ export const NodeLinkStyled = styled.div<{ selected?: boolean }>`
3037
height: 16px;
3138
}
3239
40+
${Button} {
41+
padding: ${({ theme }) => theme.spacing.tiny};
42+
}
43+
44+
&:hover {
45+
${Button} {
46+
color: ${({ theme }) => theme.colors.text.oppositePrimary};
47+
&:hover {
48+
color: ${({ theme }) => theme.colors.primary};
49+
}
50+
}
51+
}
52+
3353
${({ selected, theme }) =>
3454
selected
3555
? css`
3656
background: ${theme.colors.primary};
3757
color: ${theme.colors.text.oppositePrimary};
3858
${SubtleGlow}
59+
svg {
60+
fill: ${theme.colors.text.oppositePrimary};
61+
}
3962
`
4063
: css`
4164
&:nth-child(2n + 1) {

‎src/components/mex/Backlinks/index.tsx

+27-14
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,55 @@
11
import { FloatingDelayGroup } from '@floating-ui/react-dom-interactions'
2-
import arrowGoBackLine from '@iconify/icons-ri/arrow-go-back-line'
3-
import { Icon } from '@iconify/react'
2+
import { ManagedOpenState } from '@ui/sidebar/Sidebar.types'
3+
import { capitalize } from '@workduck-io/mex-utils'
44
import React from 'react'
5-
import { BacklinksHelp } from '../../../data/Defaults/helpText'
5+
import { BacklinksHelp, ForwardlinksHelp } from '../../../data/Defaults/helpText'
66
import { useLinks } from '../../../hooks/useLinks'
7-
import { InfoWidgetScroll, InfoWidgetWrapper } from '../../../style/infobar'
7+
import { InfoWidgetWrapper } from '../../../style/infobar'
88
import { Note } from '../../../style/Typography'
99
import Collapse from '../../../ui/layout/Collapse/Collapse'
1010
import NodeLink from '../NodeLink/NodeLink'
1111

1212
interface BackLinkProps {
1313
nodeid: string
14+
managedOpenState?: ManagedOpenState
1415
}
1516

16-
const Backlinks = ({ nodeid }: BackLinkProps) => {
17-
const { getBacklinks } = useLinks()
17+
const Backlinks = ({ nodeid, managedOpenState }: BackLinkProps) => {
18+
const { getBacklinks, getForwardlinks } = useLinks()
19+
const [state, setState] = React.useState<'backlink' | 'forwardlink'>('backlink')
1820
const backlinks = getBacklinks(nodeid)
21+
const forwardlinks = getForwardlinks(nodeid)
22+
23+
const toggleState = () => {
24+
setState((s) => (s === 'backlink' ? 'forwardlink' : 'backlink'))
25+
}
26+
27+
const linksToShow = state === 'backlink' ? backlinks : forwardlinks
1928

2029
return (
2130
<InfoWidgetWrapper>
2231
<FloatingDelayGroup delay={{ open: 1000 }}>
2332
<Collapse
2433
maximumHeight="40vh"
2534
defaultOpen
26-
icon={arrowGoBackLine}
27-
title="Backlinks"
35+
icon={`mex:${state}`}
36+
title={state === 'backlink' ? 'Backlinks' : 'Forwardlinks'}
37+
onTitleClick={toggleState}
38+
managedOpenState={managedOpenState}
2839
infoProps={{
29-
text: BacklinksHelp
40+
text: state === 'backlink' ? BacklinksHelp : ForwardlinksHelp
3041
}}
3142
>
32-
{backlinks.length === 0 && (
43+
{linksToShow.length === 0 && (
3344
<>
34-
<Note>No backlinks found.</Note>
35-
<Note>Link from other notes to view them here.</Note>
45+
<Note>No {capitalize(state)}s found.</Note>
46+
<Note>
47+
Link {state === 'backlink' ? 'this note from other notes' : 'from this note'} to view them here.
48+
</Note>
3649
</>
3750
)}
38-
{backlinks.map((l, i) => (
39-
<NodeLink key={`backlink_${l.nodeid}_${i}`} keyStr={`backlink_${l.nodeid}_${i}`} nodeid={l.nodeid} />
51+
{linksToShow.map((l, i) => (
52+
<NodeLink key={`backforlink_${l.nodeid}_${i}`} keyStr={`backforlink_${l.nodeid}_${i}`} nodeid={l.nodeid} />
4053
))}
4154
</Collapse>
4255
</FloatingDelayGroup>

‎src/components/mex/NodeLink/NodeLink.tsx

+26-6
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,30 @@ import { useLinks } from '../../../hooks/useLinks'
1111
import { useNavigation } from '../../../hooks/useNavigation'
1212
import { NodeType } from '../../../types/Types'
1313
import { NavigationType, ROUTE_PATHS, useRouting } from '../../../views/routes/urls'
14-
import { NodeLinkStyled, NodeLinkWrapper } from '../Backlinks/Backlinks.style'
14+
import { NodeLinkStyled, NodeLinkTitleWrapper, NodeLinkWrapper } from '../Backlinks/Backlinks.style'
1515

1616
interface NodeLinkProps {
1717
keyStr: string
1818
nodeid: string
1919

20+
blockId?: string
21+
2022
// Show preview (default true)
2123
preview?: boolean
2224
icon?: boolean
25+
26+
/**
27+
* Replace the default onclick action on node link
28+
*/
29+
onClick?: (ev: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
30+
31+
/**
32+
* RenderActions
33+
*/
34+
RenderActions?: () => JSX.Element
2335
}
2436

25-
const NodeLink = ({ nodeid, preview = true, icon, keyStr }: NodeLinkProps) => {
37+
const NodeLink = ({ nodeid, blockId, preview = true, icon, keyStr, onClick, RenderActions }: NodeLinkProps) => {
2638
const [visible, setVisible] = React.useState(false)
2739
const isEditorPresent = useMultipleEditors((store) => store.editors)?.[nodeid]
2840
const { getPathFromNodeid } = useLinks()
@@ -39,8 +51,12 @@ const NodeLink = ({ nodeid, preview = true, icon, keyStr }: NodeLinkProps) => {
3951
ev.stopPropagation()
4052

4153
if (ev.detail === 2) {
42-
push(nodeid)
43-
goTo(ROUTE_PATHS.node, NavigationType.push, nodeid)
54+
if (onClick) {
55+
onClick(ev)
56+
} else {
57+
push(nodeid)
58+
goTo(ROUTE_PATHS.node, NavigationType.push, nodeid)
59+
}
4460
}
4561

4662
addPreviewInEditors(nodeid)
@@ -74,14 +90,18 @@ const NodeLink = ({ nodeid, preview = true, icon, keyStr }: NodeLinkProps) => {
7490
label={nodeid}
7591
setPreview={setVisible}
7692
allowClosePreview={!isEditorPresent}
93+
blockId={blockId}
7794
hover
7895
nodeid={nodeid}
7996
placement="auto-start"
8097
>
8198
<NodeLinkWrapper onClick={onClickProps}>
8299
<NodeLinkStyled selected={!!isEditorPresent} key={`NodeLink_${keyStr}`}>
83-
{nodeType === NodeType.SHARED && <SharedNodeIcon />}
84-
{getPathFromNodeid(nodeid, true)}
100+
<NodeLinkTitleWrapper>
101+
{nodeType === NodeType.SHARED && <SharedNodeIcon />}
102+
{getPathFromNodeid(nodeid, true)}
103+
</NodeLinkTitleWrapper>
104+
{RenderActions && <RenderActions />}
85105
</NodeLinkStyled>
86106
</NodeLinkWrapper>
87107
</EditorPreview>

‎src/components/mex/Outline/Outline.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import listUnordered from '@iconify/icons-ri/list-unordered'
55
import taskLine from '@iconify/icons-ri/task-line'
66
import { Icon } from '@iconify/react'
77
import { ELEMENT_OL, ELEMENT_UL } from '@udecode/plate'
8+
import { ManagedOpenState } from '@ui/sidebar/Sidebar.types'
89
import React from 'react'
910
import { OutlineHelp } from '../../../data/Defaults/helpText'
1011
import { ELEMENTS_IN_OUTLINE } from '../../../data/outline'
@@ -16,7 +17,11 @@ import { Note } from '../../../style/Typography'
1617
import Collapse from '../../../ui/layout/Collapse/Collapse'
1718
import { OutlineIconWrapper, OutlineItemRender, OutlineItemText, OutlineWrapper } from './Outline.styles'
1819

19-
const Outline = () => {
20+
interface OutlineProps {
21+
managedOpenState?: ManagedOpenState
22+
}
23+
24+
const Outline = ({ managedOpenState }: OutlineProps) => {
2025
const outline = useAnalysisStore((state) => state.analysis.outline)
2126

2227
const { selectBlock } = useFocusBlock()
@@ -29,6 +34,7 @@ const Outline = () => {
2934
defaultOpen
3035
icon={fileList3Line}
3136
title="Outline"
37+
managedOpenState={managedOpenState}
3238
infoProps={{
3339
text: OutlineHelp
3440
}}

‎src/components/mex/RHSidebar/InfoBar.tsx

+25-22
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,47 @@
1-
import { MexIcon } from '@style/Layouts'
2-
import React, { useEffect, useMemo, useState } from 'react'
3-
import { tinykeys } from '@workduck-io/tinykeys'
1+
import Tabs, { TabType } from '@components/layouts/Tabs'
2+
import Graph from '@components/mex/Graph/Graph'
3+
import RemindersInfobar from '@components/mex/Reminders/Reminders'
4+
import DataInfoBar from '@components/mex/Sidebar/DataInfoBar'
45
import { useGraphData } from '@hooks/useGraphData'
56
import useLayout from '@hooks/useLayout'
67
import { useKeyListener } from '@hooks/useShortcutListener'
78
import useToggleElements from '@hooks/useToggleElements'
9+
import bubbleChartLine from '@iconify/icons-ri/bubble-chart-line'
10+
import quillPenLine from '@iconify/icons-ri/quill-pen-line'
11+
import timerFlashLine from '@iconify/icons-ri/timer-flash-line'
812
import { useHelpStore } from '@store/useHelpStore'
913
import { InfobarMode, useLayoutStore } from '@store/useLayoutStore'
1014
import useSuggestionStore from '@store/useSuggestionStore'
1115
import { InfoBarWrapper } from '@style/infobar'
12-
import Graph from '@components/mex/Graph/Graph'
13-
import RemindersInfobar from '@components/mex/Reminders/Reminders'
14-
import DataInfoBar from '@components/mex/Sidebar/DataInfoBar'
15-
import SuggestionInfoBar from '@components/mex/Suggestions'
16-
import Tabs, { TabType } from '@components/layouts/Tabs'
17-
import bubbleChartLine from '@iconify/icons-ri/bubble-chart-line'
18-
import lightbulbFlashLine from '@iconify/icons-ri/lightbulb-flash-line'
19-
import timerFlashLine from '@iconify/icons-ri/timer-flash-line'
20-
import { useShortcutStore } from '@store/useShortcutStore'
16+
import { MexIcon } from '@style/Layouts'
17+
import { mog } from '@workduck-io/mex-utils'
18+
import { tinykeys } from '@workduck-io/tinykeys'
19+
import React, { useEffect, useMemo } from 'react'
20+
import SnippetSidebar from '../Sidebar/SnippetSidebar'
2121

2222
const InfoBarItems = () => {
2323
const graphData = useGraphData()
2424
const infobar = useLayoutStore((s) => s.infobar)
2525
const shortcuts = useHelpStore((store) => store.shortcuts)
2626
const setInfobarMode = useLayoutStore((s) => s.setInfobarMode)
27+
const wrapperRef = React.useRef<HTMLDivElement>(null)
2728

29+
mog('infobar', { shortcuts })
2830
// Ensure the tabs have InfobarType in type
2931
const tabs: Array<TabType> = useMemo(
3032
() => [
3133
{
3234
label: <MexIcon noHover icon="fluent:content-view-gallery-24-regular" width={24} height={24} />,
3335
type: 'default',
34-
component: <DataInfoBar />,
36+
component: <DataInfoBar wrapRef={wrapperRef} />,
3537
tooltip: 'Context'
3638
},
3739
{
38-
label: <MexIcon noHover icon={lightbulbFlashLine} width={24} height={24} />,
39-
type: 'suggestions',
40-
component: <SuggestionInfoBar />,
41-
tooltip: 'Suggestions',
42-
shortcut: shortcuts.showSuggestedNodes.keystrokes
40+
label: <MexIcon noHover icon={quillPenLine} width={24} height={24} />,
41+
type: 'snippets',
42+
component: <SnippetSidebar />,
43+
tooltip: 'Snippets',
44+
shortcut: shortcuts.showSnippetSidebar.keystrokes
4345
},
4446
{
4547
label: <MexIcon noHover icon={timerFlashLine} width={24} height={24} />,
@@ -62,6 +64,7 @@ const InfoBarItems = () => {
6264
<Tabs
6365
visible={true}
6466
openedTab={infobar.mode}
67+
wrapperRef={wrapperRef}
6568
onChange={(tab) => {
6669
setInfobarMode(tab as InfobarMode)
6770
}}
@@ -77,7 +80,7 @@ const InfoBar = () => {
7780

7881
const infobar = useLayoutStore((s) => s.infobar)
7982
const pinnedSuggestions = useSuggestionStore((s) => s.pinnedSuggestions)
80-
const { toggleGraph, toggleSuggestedNodes, toggleReminder } = useToggleElements()
83+
const { toggleGraph, toggleSnippets, toggleReminder } = useToggleElements()
8184
const { shortcutHandler } = useKeyListener()
8285

8386
useEffect(() => {
@@ -94,10 +97,10 @@ const InfoBar = () => {
9497
// toggleSyncBlocks()
9598
// })
9699
// },
97-
[shortcuts.showSuggestedNodes.keystrokes]: (event) => {
100+
[shortcuts.showSnippetSidebar.keystrokes]: (event) => {
98101
event.preventDefault()
99-
shortcutHandler(shortcuts.showSuggestedNodes, () => {
100-
toggleSuggestedNodes()
102+
shortcutHandler(shortcuts.showSnippetSidebar, () => {
103+
toggleSnippets()
101104
})
102105
},
103106
[shortcuts.showReminder.keystrokes]: (event) => {

0 commit comments

Comments
 (0)