diff --git a/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx b/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
index 622d13831..5544fa7cb 100644
--- a/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
+++ b/frontend/app/components/Session_/EventsBlock/NoteEvent.tsx
@@ -45,7 +45,7 @@ function NoteEvent(props: Props) {
copy(
`${window.location.origin}/${window.location.pathname.split('/')[1]}${session(
props.note.sessionId
- )}${props.note.timestamp > 0 ? '?jumpto=' + props.note.timestamp : ''}`
+ )}${props.note.timestamp > 0 ? `?jumpto=${props.note.timestamp}¬e=${props.note.noteId}` : `?note=${props.note.noteId}`}`
);
toast.success('Note URL copied to clipboard');
};
diff --git a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
index 33108c0fe..4afda2e4f 100644
--- a/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/Notes/NoteItem.tsx
@@ -24,7 +24,7 @@ function NoteItem(props: Props) {
copy(
`${window.location.origin}/${window.location.pathname.split('/')[1]}${session(
props.note.sessionId
- )}${props.note.timestamp > 0 ? '?jumpto=' + props.note.timestamp : ''}`
+ )}${props.note.timestamp > 0 ? `?jumpto=${props.note.timestamp}¬e=${props.note.noteId}` : `?note=${props.note.noteId}`}`
);
toast.success('Note URL copied to clipboard');
};
@@ -49,7 +49,7 @@ function NoteItem(props: Props) {
session(props.note.sessionId) +
(props.note.timestamp > 0
? `?jumpto=${props.note.timestamp}¬e=${props.note.noteId}`
- : '')
+ : `?note=${props.note.noteId}`)
}
>
@@ -60,9 +60,6 @@ function NoteItem(props: Props) {
style={{
// @ts-ignore
background: tagProps[props.note.tag],
- // userSelect: 'none',
- // width: 'fit-content',
- // fontSize: 11,
padding: '1px 6px',
}}
className="rounded-full text-white text-xs select-none w-fit"
diff --git a/frontend/app/components/ui/ItemMenu/ItemMenu.tsx b/frontend/app/components/ui/ItemMenu/ItemMenu.tsx
new file mode 100644
index 000000000..ee9876503
--- /dev/null
+++ b/frontend/app/components/ui/ItemMenu/ItemMenu.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import { Icon } from 'UI';
+import styles from './itemMenu.module.css';
+import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
+import cn from 'classnames';
+
+interface Item {
+ icon: string;
+ text: string;
+ onClick: (args: any) => void;
+ hidden?: boolean;
+ disabled?: boolean;
+}
+
+interface Props {
+ bold?: boolean;
+ flat?: boolean;
+ items: Item[];
+ label?: React.ReactNode;
+ onToggle?: (args: any) => void;
+}
+
+export default class ItemMenu extends React.PureComponent
{
+ menuBtnRef: HTMLDivElement = null;
+
+ state = {
+ displayed: false,
+ };
+
+ handleEsc = (e: KeyboardEvent) => e.key === 'Escape' && this.closeMenu();
+
+ componentDidMount() {
+ document.addEventListener('keydown', this.handleEsc, false);
+ }
+ componentWillUnmount() {
+ document.removeEventListener('keydown', this.handleEsc, false);
+ }
+
+ onClick = (callback: Function) => (e: React.MouseEvent) => {
+ e.stopPropagation();
+ callback(e);
+ };
+
+ toggleMenu = () => {
+ const shouldDisplay = !this.state.displayed;
+ this.setState({ displayed: shouldDisplay });
+ this.props.onToggle?.(shouldDisplay);
+ };
+
+ closeMenu = () => {
+ this.setState({ displayed: false });
+ this.props.onToggle?.(false);
+ };
+
+ render() {
+ const { items, label = '', bold } = this.props;
+ const { displayed } = this.state;
+ const parentStyles = label ? 'rounded px-2 py-2 hover:bg-gray-light' : '';
+
+ return (
+
+
+
+ {label && (
+
+ {label}
+
+ )}
+ {this.props.flat ? null : (
+
{
+ this.menuBtnRef = ref;
+ }}
+ className={cn('rounded-full flex items-center justify-center', {
+ 'bg-gray-light': displayed,
+ 'w-10 h-10': !label,
+ })}
+ role="button"
+ >
+
+
+ )}
+
+
+
+ {items
+ .filter(({ hidden }) => !hidden)
+ .map(({ onClick, text, icon, disabled = false }) => (
+
{}}
+ className={disabled ? 'cursor-not-allowed' : ''}
+ role="menuitem"
+ >
+
+ {icon && (
+
+ {/* @ts-ignore */}
+
+
+ )}
+
{text}
+
+
+ ))}
+
+
+ );
+ }
+}