feat: goto with osc

client/src/features/editors/list/EventBlock.jsx

@@ -14,6 +14,8 @@ import style from './EventBlock.module.css';
 const ExpandedBlock = (props) => {
   const { provided, data, next, delay, delayValue, actionHandler } = props;
 
+  const oscid = data.id.length > 4 ? '...' : data.id;
+
   return (
     <>
       <span className={style.drag} {...provided.dragHandleProps}>
@@ -69,6 +71,7 @@ const ExpandedBlock = (props) => {
             actionHandler('update', { field: 'note', value: v })
           }
         />
+        <span className={style.oscLabel}>{`OSC ID: ${oscid}`}</span>
       </div>
       <Icon
         className={style.more}

client/src/features/editors/list/EventBlock.module.css

@@ -138,9 +138,6 @@
 
 .titleContainer {
   grid-area: text;
-  display: inline-flex;
-  position: relative;
-  align-self: flex-start;
   height: 100%;
 
   background-color: rgba(255, 255, 255, 0.03);
@@ -149,6 +146,14 @@
   width: 100%;
   display: block;
 }
+
+.oscLabel {
+  color: #4bffabcc;
+  font-size: 0.8em;
+  float: right;
+  padding-right: 1em;
+}
+
 /* ================ MORE ================ */
 
 .more {

client/src/features/modals/SettingsModal.jsx

@@ -14,11 +14,7 @@ import {
   Button,
   Textarea,
 } from '@chakra-ui/react';
-import {
-  fetchEvent,
-  postEvent,
-  eventNamespace,
-} from '../../app/api/eventApi';
+import { fetchEvent, postEvent, eventNamespace } from '../../app/api/eventApi';
 import { useEffect, useState } from 'react';
 import { useFetch } from '../../app/hooks/useFetch';