fix(ui): fix note url copy

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}&note=${props.note.noteId}` : `?note=${props.note.noteId}`}`
     );
     toast.success('Note URL copied to clipboard');
   };

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}&note=${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}&note=${props.note.noteId}`
-            : '')
+            : `?note=${props.note.noteId}`)
         }
       >
         <div className="flex flex-col gap-1 p-2 rounded cursor-pointer note-hover">
@@ -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"

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<Props> {
+  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<HTMLDivElement>) => {
+    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 (
+      <div className={styles.wrapper}>
+        <OutsideClickDetectingDiv onClickOutside={this.closeMenu}>
+          <div
+            onClick={this.toggleMenu}
+            className={cn(
+              'flex items-center cursor-pointer select-none hover rounded-full',
+              !this.props.flat ? parentStyles : '',
+              { 'bg-gray-light': !this.props.flat && displayed && label }
+            )}
+          >
+            {label && (
+              <span
+                className={cn(
+                  'mr-1',
+                  bold ? 'font-medium color-gray-darkest' : 'color-gray-medium'
+                )}
+              >
+                {label}
+              </span>
+            )}
+            {this.props.flat ? null : (
+              <div
+                ref={(ref) => {
+                  this.menuBtnRef = ref;
+                }}
+                className={cn('rounded-full flex items-center justify-center', {
+                  'bg-gray-light': displayed,
+                  'w-10 h-10': !label,
+                })}
+                role="button"
+              >
+                <Icon name="ellipsis-v" size="16" />
+              </div>
+            )}
+          </div>
+        </OutsideClickDetectingDiv>
+        <div
+          className={cn(styles.menu, { [styles.menuDim]: !bold })}
+          style={{
+            top: this.props.flat ? 24 : undefined,
+          }}
+          data-displayed={displayed}
+        >
+          {items
+            .filter(({ hidden }) => !hidden)
+            .map(({ onClick, text, icon, disabled = false }) => (
+              <div
+                key={text}
+                onClick={!disabled ? this.onClick(onClick) : () => {}}
+                className={disabled ? 'cursor-not-allowed' : ''}
+                role="menuitem"
+              >
+                <div className={cn(styles.menuItem, 'text-neutral-700', { disabled: disabled })}>
+                  {icon && (
+                    <div className={styles.iconWrapper}>
+                      {/* @ts-ignore */}
+                      <Icon name={icon} size="13" color="gray-dark" />
+                    </div>
+                  )}
+                  <div>{text}</div>
+                </div>
+              </div>
+            ))}
+        </div>
+      </div>
+    );
+  }
+}