Feat/55 v2 (#225)

* chore: upgrade relevant libraries
* feat(skip): add skip styling to paginated items
* chore: upgrade relevant libraries
* Fix: issue with text colour (#214)
* fix: adjust text colour from context
* fix: issue with wrong proptype
* fix issue with vite migration (#217)
* hotfix: 1.8.2 issues vite migration
* fix: file import options
* feat(55): styling
* refactor: remove onhover option for entry block
* refactor: relocate logging provider
* refactor: convert to typescript
* feat(55): add event editor
* refactor: extract event actions
* fix: bad import
* feat(55): redesign components
* fix: issues with not awaiting async
* refactor: replace socket with subscription
* refactor: remove unused
* style: small tweaks
* refactor: extract event actions
* refactor: cleanup debug
* refactor: chakra imports
* fix: optimistic mutations
* refactor: handle promise rejections
* refactor: validation
* fix: rq optimistic mutations
* feat: add playback feedback to block
* refactor: no optimistic adding of events
* refactor: simplify cursor state
* styles: cleanup editor style
* refactor: cleanup duration update
* fix: revert package upgrade (issues with vitest)
* fix: prevent cyclic imports
* refactor: extract data fetcher
* refactor: typescript migration
* chore: update tests

client/src/common/components/paginator/TodayItem.tsx

@@ -0,0 +1,37 @@
+import { formatTime } from '../../utils/time';
+
+import './Paginator.scss';
+
+interface TodayItemProps {
+  selected: number;
+  timeStart: number;
+  timeEnd: number;
+  title: string;
+  backstageEvent: boolean;
+  colour: string;
+  skip: boolean;
+}
+
+export default function TodayItem(props: TodayItemProps) {
+  const { selected, timeStart, timeEnd, title, backstageEvent, colour, skip } = props;
+
+  // Format timers
+  const start = formatTime(timeStart, { format: 'hh:mm' });
+  const end = formatTime(timeEnd, { format: 'hh:mm' });
+
+  // user colours
+  const userColour = colour !== '' ? colour : 'transparent';
+
+  let selectStyle = 'entry--past';
+  if (selected === 1) selectStyle = 'entry--now';
+  else if (selected === 2) selectStyle = 'entry--future';
+  return (
+    <div className={`entry ${selectStyle} ${skip ? 'skip': ''}}`} style={{ borderLeft: `4px solid ${userColour}` }}>
+      <div className='entry-times'>
+        {`${start} · ${end}`}
+      </div>
+      <div className='entry-title'>{title}</div>
+      {backstageEvent && <div className='backstage-indicator' />}
+    </div>
+  );
+}