From 343dde5b8902312c28c2c050550e8d7e343a348a Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Sat, 11 Nov 2023 10:13:50 +0100
Subject: [PATCH 01/41] added dnd

---
 frontend/package.json          |  1 +
 frontend/src/pages/MAMPage.jsx | 24 ++++++++++++++++--------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 81a96e45..cd9efe33 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@devbookhq/splitter": "^1.4.0",
+    "@dnd-kit/core": "^6.0.8",
     "@reduxjs/toolkit": "^1.8.5",
     "@wfoxall/timeframe": "^1.2.0",
     "axios": "^0.27.2",
diff --git a/frontend/src/pages/MAMPage.jsx b/frontend/src/pages/MAMPage.jsx
index fc2d25b1..a5909206 100644
--- a/frontend/src/pages/MAMPage.jsx
+++ b/frontend/src/pages/MAMPage.jsx
@@ -9,6 +9,8 @@ import { setFocusedAsset, setSelectedAssets } from '/src/actions'
 import Browser from '/src/containers/Browser'
 import AssetEditor from '/src/pages/AssetEditor'
 
+import { DndContext } from "@dnd-kit/core";
+
 const MAMContainer = styled.div`
   flex-grow: 1;
 
@@ -74,16 +76,22 @@ const MAMPage = () => {
     setSplitterSizes(size)
   }
 
+  const onDragEnd = (event) => {
+    console.log(event)
+  }
+
   return (
     <MAMContainer>
-      <Splitter
-        direction={SplitDirection.Horizontal}
-        onResizeFinished={onResize}
-        initialSizes={splitterSizes}
-      >
-        <Browser />
-        {moduleComponent}
-      </Splitter>
+      <DndContext onDragEnd={onDragEnd}>
+        <Splitter
+          direction={SplitDirection.Horizontal}
+          onResizeFinished={onResize}
+          initialSizes={splitterSizes}
+        >
+          <Browser />
+          {moduleComponent}
+        </Splitter>
+      </DndContext>
     </MAMContainer>
   )
 }

From 0740e234c5e8d9f91ed8fc1173de9fb8f0b40b7b Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Fri, 27 Sep 2024 21:47:28 +0200
Subject: [PATCH 02/41] feat: scheduler skeleton

---
 frontend/src/containers/Calendar/Calendar.jsx | 191 ++++++++++++++++++
 .../containers/Calendar/CalendarWrapper.jsx   |  43 ++++
 .../src/containers/Calendar/ZoomControl.jsx   |  14 ++
 frontend/src/containers/Calendar/index.jsx    |   2 +
 frontend/src/containers/Navbar.jsx            |   2 +
 frontend/src/pages/MAMPage.jsx                |   6 +-
 frontend/src/pages/Rundown/Rundown.jsx        |  15 ++
 frontend/src/pages/Rundown/index.jsx          |   2 +
 frontend/src/pages/Scheduler/Scheduler.jsx    |  46 +++++
 frontend/src/pages/Scheduler/SchedulerNav.jsx |  13 ++
 frontend/src/pages/Scheduler/index.jsx        |   2 +
 11 files changed, 335 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/containers/Calendar/Calendar.jsx
 create mode 100644 frontend/src/containers/Calendar/CalendarWrapper.jsx
 create mode 100644 frontend/src/containers/Calendar/ZoomControl.jsx
 create mode 100644 frontend/src/containers/Calendar/index.jsx
 create mode 100644 frontend/src/pages/Rundown/Rundown.jsx
 create mode 100644 frontend/src/pages/Rundown/index.jsx
 create mode 100644 frontend/src/pages/Scheduler/Scheduler.jsx
 create mode 100644 frontend/src/pages/Scheduler/SchedulerNav.jsx
 create mode 100644 frontend/src/pages/Scheduler/index.jsx

diff --git a/frontend/src/containers/Calendar/Calendar.jsx b/frontend/src/containers/Calendar/Calendar.jsx
new file mode 100644
index 00000000..1e26d2fb
--- /dev/null
+++ b/frontend/src/containers/Calendar/Calendar.jsx
@@ -0,0 +1,191 @@
+import styled from 'styled-components'
+import { useRef, useEffect, useState } from 'react'
+import CalendarWrapper from './CalendarWrapper'
+import ZoomControl from './ZoomControl'
+
+const CalendarCanvas = styled.canvas`
+  background-color: #24202e;
+`
+
+const Calendar = () => {
+  const calendarRef = useRef(null)
+  const dayRef = useRef(null)
+  const wrapperRef = useRef(null)
+
+  const [scrollbarWidth, setScrollbarWidth] = useState(0)
+  const [zoom, setZoom] = useState(1)
+  const [currentTime, setCurrentTime] = useState(null)
+  const [mousePos, setMousePos] = useState(null)
+
+  const clockWidth = 100
+  const offsetHours = 7
+  const offsetMinutes = 0
+
+  const pos2time = (x, y) => {
+    if (!dayRef.current || !calendarRef.current) {
+      return
+    }
+    const dayWidth = dayRef.current.clientWidth
+    const hourHeight = calendarRef.current.clientHeight / 24
+    const day = Math.floor(x / dayWidth)
+    let hour = Math.floor(y / hourHeight) + offsetHours
+    let minute =
+      Math.floor(((y % hourHeight) / hourHeight) * 60) + offsetMinutes
+    // round to nearest 5 minutes
+    minute = Math.round(minute / 5) * 5
+    if (minute >= 60) {
+      minute = 0
+      hour += 1
+    }
+    return { day, hour, minute }
+  }
+
+  const drawCalendar = () => {
+    if (!dayRef.current || !calendarRef.current) {
+      return
+    }
+
+    const dayWidth = dayRef.current.clientWidth
+
+    const canvas = calendarRef.current
+    const ctx = canvas.getContext('2d')
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+    for (let i = 0; i < 24; i++) {
+      let y = (ctx.canvas.height / 24) * i
+      if (i === 0) {
+        continue
+      }
+      y += 4
+      ctx.font = '14px Arial'
+      ctx.fillStyle = '#c0c0c0'
+      const hours = (i + offsetHours).toString().padStart(2, '0')
+      const minutes = offsetMinutes.toString().padStart(2, '0')
+      const clock = `${hours}:${minutes}`
+      ctx.fillText(clock, 14, y)
+    }
+
+    for (let i = 0; i < 7; i++) {
+      let x = ((ctx.canvas.width - clockWidth) / 7) * i
+      x += 2
+      x += clockWidth
+
+      for (let j = 0; j < 24; j++) {
+        const hourHeight = ctx.canvas.height / 24
+        const y = hourHeight * j
+
+        if (j > 0) {
+          ctx.beginPath()
+          ctx.strokeStyle = '#d7d4d5'
+          ctx.lineWidth = 1
+          ctx.moveTo(x, y)
+          ctx.lineTo(x + dayWidth - 4, y)
+          ctx.stroke()
+        }
+
+        if (ctx.canvas.height / 24 > 40) {
+          for (let k = 1; k < 4; k++) {
+            const qy = y + (hourHeight / 4) * k
+
+            ctx.beginPath()
+            ctx.strokeStyle = '#646464'
+            ctx.lineWidth = 1
+            ctx.moveTo(x, qy)
+            ctx.lineTo(x + dayWidth - 4, qy)
+            ctx.stroke()
+          }
+        }
+      }
+    }
+
+    if (currentTime && mousePos) {
+      const { day, hour, minute } = currentTime
+      const { x, y } = mousePos
+      const dayName = [
+        'Monday',
+        'Tuesday',
+        'Wednesday',
+        'Thursday',
+        'Friday',
+        'Saturday',
+        'Sunday',
+      ][day - 1]
+      ctx.fillText(`${dayName} ${hour}:${minute}`, x, y)
+    }
+  }
+
+  useEffect(() => {
+    //drawCalendar()
+  }, [currentTime])
+
+  const resizeCanvas = () => {
+    const canvas = calendarRef.current
+    canvas.width = canvas.parentElement.clientWidth
+    canvas.height = canvas.parentElement.clientHeight * zoom
+
+    const bodyWrapper = calendarRef.current.parentElement
+    const scrollbarWidth = bodyWrapper.offsetWidth - bodyWrapper.clientWidth
+    setScrollbarWidth(scrollbarWidth)
+
+    drawCalendar()
+  }
+
+  const onMouseMove = (e) => {
+    if (!calendarRef?.current) {
+      return
+    }
+    const rect = calendarRef.current.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+    const newTime = pos2time(x, y)
+    setMousePos({ x, y })
+
+    if (JSON.stringify(newTime) !== JSON.stringify(currentTime)) {
+      setCurrentTime(newTime)
+    }
+  }
+
+  useEffect(() => {
+    resizeCanvas()
+  }, [zoom])
+
+  useEffect(() => {
+    if (!wrapperRef.current) return
+
+    const resizeObserver = new ResizeObserver(() => resizeCanvas())
+    resizeObserver.observe(wrapperRef.current)
+
+    return () => {
+      if (wrapperRef.current) {
+        resizeObserver.unobserve(wrapperRef.current)
+      }
+    }
+  }, [wrapperRef.current])
+
+  return (
+    <CalendarWrapper scrollbarWidth={scrollbarWidth} clockWidth={clockWidth}>
+      <div className="calendar-header">
+        <div className="calendar-day" ref={dayRef}>
+          Monday
+        </div>
+        <div className="calendar-day">Tuesday</div>
+        <div className="calendar-day">Wednesday</div>
+        <div className="calendar-day">Thursday</div>
+        <div className="calendar-day">Friday</div>
+        <div className="calendar-day">Saturday</div>
+        <div className="calendar-day">Sunday</div>
+      </div>
+      <div className="calendar-body">
+        <div className="calendar-body-wrapper" ref={wrapperRef}>
+          <CalendarCanvas id="calendar" ref={calendarRef} />
+        </div>
+      </div>
+      <div className="calendar-footer">
+        <ZoomControl zoom={zoom} setZoom={setZoom} />
+      </div>
+    </CalendarWrapper>
+  )
+}
+
+export default Calendar
diff --git a/frontend/src/containers/Calendar/CalendarWrapper.jsx b/frontend/src/containers/Calendar/CalendarWrapper.jsx
new file mode 100644
index 00000000..6750b017
--- /dev/null
+++ b/frontend/src/containers/Calendar/CalendarWrapper.jsx
@@ -0,0 +1,43 @@
+import styled from 'styled-components'
+
+const CalendarWrapper = styled.div`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  font-family: Arial;
+  background-color: #19161f;
+
+  .calendar-header {
+    user-select: none;
+    user-drag: none;
+    display: flex;
+    margin-right: ${(props) =>
+      props.scrollbarWidth}px; /* Dynamic padding to account for scrollbar */
+    margin-left: ${(props) =>
+      props.clockWidth}px; /* Dynamic padding to account for scrollbar */
+
+    .calendar-day {
+      flex: 1;
+      padding: 8px 2px;
+      text-align: center;
+      color: #c0c0c0;
+    }
+  }
+
+  .calendar-body {
+    display: flex;
+    flex-grow: 1;
+    position: relative;
+
+    .calendar-body-wrapper {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      overflow-x: hidden;
+      overflow-y: scroll;
+    }
+  }
+`
+export default CalendarWrapper
diff --git a/frontend/src/containers/Calendar/ZoomControl.jsx b/frontend/src/containers/Calendar/ZoomControl.jsx
new file mode 100644
index 00000000..d29f96ca
--- /dev/null
+++ b/frontend/src/containers/Calendar/ZoomControl.jsx
@@ -0,0 +1,14 @@
+const ZoomControl = ({ zoom, setZoom }) => {
+  return (
+    <input
+      type="range"
+      min="1"
+      max="5"
+      step=".4"
+      onChange={(e) => setZoom(e.target.value)}
+      value={zoom}
+    />
+  )
+}
+
+export default ZoomControl
diff --git a/frontend/src/containers/Calendar/index.jsx b/frontend/src/containers/Calendar/index.jsx
new file mode 100644
index 00000000..315cefb7
--- /dev/null
+++ b/frontend/src/containers/Calendar/index.jsx
@@ -0,0 +1,2 @@
+import Calendar from './Calendar';
+export default Calendar;
diff --git a/frontend/src/containers/Navbar.jsx b/frontend/src/containers/Navbar.jsx
index e8fd5641..77db405d 100644
--- a/frontend/src/containers/Navbar.jsx
+++ b/frontend/src/containers/Navbar.jsx
@@ -85,6 +85,8 @@ const NavBar = () => {
         {false && nebula.settings.system.ui_asset_preview && (
           <NavLink to={`/mam/preview`}>Preview</NavLink>
         )}
+        <NavLink to={`/mam/scheduler`}>Scheduler</NavLink>
+        <NavLink to={`/mam/rundown`}>Rundown</NavLink>
         <NavLink to="/jobs">Jobs</NavLink>
         {!nebula.user.is_limited && (
           <>
diff --git a/frontend/src/pages/MAMPage.jsx b/frontend/src/pages/MAMPage.jsx
index a5909206..c25d7357 100644
--- a/frontend/src/pages/MAMPage.jsx
+++ b/frontend/src/pages/MAMPage.jsx
@@ -6,10 +6,13 @@ import styled from 'styled-components'
 
 import { useLocalStorage } from '/src/hooks'
 import { setFocusedAsset, setSelectedAssets } from '/src/actions'
+
 import Browser from '/src/containers/Browser'
 import AssetEditor from '/src/pages/AssetEditor'
+import Scheduler from '/src/pages/Scheduler'
+import Rundown from './Rundown'
 
-import { DndContext } from "@dnd-kit/core";
+import { DndContext } from '@dnd-kit/core'
 
 const MAMContainer = styled.div`
   flex-grow: 1;
@@ -67,6 +70,7 @@ const MAMPage = () => {
 
   const moduleComponent = useMemo(() => {
     if (module == 'editor') return <AssetEditor {...componentProps} />
+    if (module == 'scheduler') return <Scheduler {...componentProps} />
 
     return 'Not implemented'
   }, [module])
diff --git a/frontend/src/pages/Rundown/Rundown.jsx b/frontend/src/pages/Rundown/Rundown.jsx
new file mode 100644
index 00000000..d5da3731
--- /dev/null
+++ b/frontend/src/pages/Rundown/Rundown.jsx
@@ -0,0 +1,15 @@
+import { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+import { setPageTitle } from '/src/actions'
+
+const Rundown = () => {
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    dispatch(setPageTitle({ title: 'Scheduler' }))
+  }, [])
+
+  return <h1>not implemented</h1>
+}
+
+export default Rundown
diff --git a/frontend/src/pages/Rundown/index.jsx b/frontend/src/pages/Rundown/index.jsx
new file mode 100644
index 00000000..5226502c
--- /dev/null
+++ b/frontend/src/pages/Rundown/index.jsx
@@ -0,0 +1,2 @@
+import Rundown from './Rundown'
+export default Rundown
diff --git a/frontend/src/pages/Scheduler/Scheduler.jsx b/frontend/src/pages/Scheduler/Scheduler.jsx
new file mode 100644
index 00000000..90af4de1
--- /dev/null
+++ b/frontend/src/pages/Scheduler/Scheduler.jsx
@@ -0,0 +1,46 @@
+import { useState, useEffect, useMemo } from 'react'
+import { useDispatch } from 'react-redux'
+import { setPageTitle } from '/src/actions'
+
+import Calendar from '/src/containers/Calendar'
+import SchedulerNav from './SchedulerNav'
+
+const getWeekStart = () => {
+  const now = new Date()
+  const dayOfWeek = now.getDay()
+  const diff = now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1)
+  const weekStart = new Date(now.setDate(diff))
+  weekStart.setHours(0, 0, 0, 0)
+  return weekStart
+}
+
+const Scheduler = () => {
+  const dispatch = useDispatch()
+  const [startDate, setStartDate] = useState(getWeekStart())
+
+  const pageTitle = useMemo(() => {
+    const start = startDate.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+    })
+    const end = new Date(
+      startDate.getTime() + 6 * 24 * 60 * 60 * 1000
+    ).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+    return `Scheduler (${start} - ${end})`
+  }, [startDate])
+
+  useEffect(() => {
+    dispatch(setPageTitle({ title: pageTitle }))
+  }, [])
+
+  return (
+    <main className="column">
+      <SchedulerNav />
+      <section className="grow nopad">
+        <Calendar />
+      </section>
+    </main>
+  )
+}
+
+export default Scheduler
diff --git a/frontend/src/pages/Scheduler/SchedulerNav.jsx b/frontend/src/pages/Scheduler/SchedulerNav.jsx
new file mode 100644
index 00000000..8ad2ea1c
--- /dev/null
+++ b/frontend/src/pages/Scheduler/SchedulerNav.jsx
@@ -0,0 +1,13 @@
+import { NavLink } from 'react-router-dom'
+import { Navbar, InputText, Button, Spacer } from '/src/components'
+
+const SchedulerNav = ({}) => {
+  return (
+    <Navbar>
+      <Button icon="chevron_left" onClick={() => {}} />
+      <Button icon="chevron_right" onClick={() => {}} />
+    </Navbar>
+  )
+}
+
+export default SchedulerNav
diff --git a/frontend/src/pages/Scheduler/index.jsx b/frontend/src/pages/Scheduler/index.jsx
new file mode 100644
index 00000000..d336f499
--- /dev/null
+++ b/frontend/src/pages/Scheduler/index.jsx
@@ -0,0 +1,2 @@
+import Scheduler from './Scheduler'
+export default Scheduler

From a41da0619245c956971c9669809831b4379afc59 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Fri, 27 Sep 2024 21:58:36 +0200
Subject: [PATCH 03/41] feat: scheduler date switching

---
 frontend/src/containers/Calendar/Calendar.jsx |  1 +
 frontend/src/pages/Scheduler/Scheduler.jsx    | 28 ++++---------------
 frontend/src/pages/Scheduler/SchedulerNav.jsx | 16 +++++++++--
 frontend/src/pages/Scheduler/utils.js         | 21 ++++++++++++++
 4 files changed, 40 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/pages/Scheduler/utils.js

diff --git a/frontend/src/containers/Calendar/Calendar.jsx b/frontend/src/containers/Calendar/Calendar.jsx
index 1e26d2fb..ea67ae7b 100644
--- a/frontend/src/containers/Calendar/Calendar.jsx
+++ b/frontend/src/containers/Calendar/Calendar.jsx
@@ -147,6 +147,7 @@ const Calendar = () => {
   }
 
   useEffect(() => {
+    console.log('Zoom', zoom)
     resizeCanvas()
   }, [zoom])
 
diff --git a/frontend/src/pages/Scheduler/Scheduler.jsx b/frontend/src/pages/Scheduler/Scheduler.jsx
index 90af4de1..47070ced 100644
--- a/frontend/src/pages/Scheduler/Scheduler.jsx
+++ b/frontend/src/pages/Scheduler/Scheduler.jsx
@@ -4,38 +4,20 @@ import { setPageTitle } from '/src/actions'
 
 import Calendar from '/src/containers/Calendar'
 import SchedulerNav from './SchedulerNav'
-
-const getWeekStart = () => {
-  const now = new Date()
-  const dayOfWeek = now.getDay()
-  const diff = now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1)
-  const weekStart = new Date(now.setDate(diff))
-  weekStart.setHours(0, 0, 0, 0)
-  return weekStart
-}
+import { getWeekStart, createTitle } from './utils'
 
 const Scheduler = () => {
   const dispatch = useDispatch()
-  const [startDate, setStartDate] = useState(getWeekStart())
-
-  const pageTitle = useMemo(() => {
-    const start = startDate.toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-    })
-    const end = new Date(
-      startDate.getTime() + 6 * 24 * 60 * 60 * 1000
-    ).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
-    return `Scheduler (${start} - ${end})`
-  }, [startDate])
+  const [startTime, setStartTime] = useState(getWeekStart())
 
   useEffect(() => {
+    const pageTitle = createTitle(startTime)
     dispatch(setPageTitle({ title: pageTitle }))
-  }, [])
+  }, [startTime])
 
   return (
     <main className="column">
-      <SchedulerNav />
+      <SchedulerNav startTime={startTime} setStartTime={setStartTime} />
       <section className="grow nopad">
         <Calendar />
       </section>
diff --git a/frontend/src/pages/Scheduler/SchedulerNav.jsx b/frontend/src/pages/Scheduler/SchedulerNav.jsx
index 8ad2ea1c..8cb0a370 100644
--- a/frontend/src/pages/Scheduler/SchedulerNav.jsx
+++ b/frontend/src/pages/Scheduler/SchedulerNav.jsx
@@ -1,11 +1,21 @@
 import { NavLink } from 'react-router-dom'
 import { Navbar, InputText, Button, Spacer } from '/src/components'
 
-const SchedulerNav = ({}) => {
+const SchedulerNav = ({ startTime, setStartTime }) => {
+  const prevWeek = () => {
+    console.log('prevWeek')
+    setStartTime(new Date(startTime.getTime() - 7 * 24 * 60 * 60 * 1000))
+  }
+
+  const nextWeek = () => {
+    console.log('nextWeek')
+    setStartTime(new Date(startTime.getTime() + 7 * 24 * 60 * 60 * 1000))
+  }
+
   return (
     <Navbar>
-      <Button icon="chevron_left" onClick={() => {}} />
-      <Button icon="chevron_right" onClick={() => {}} />
+      <Button icon="chevron_left" onClick={prevWeek} />
+      <Button icon="chevron_right" onClick={nextWeek} />
     </Navbar>
   )
 }
diff --git a/frontend/src/pages/Scheduler/utils.js b/frontend/src/pages/Scheduler/utils.js
new file mode 100644
index 00000000..3a69b7c5
--- /dev/null
+++ b/frontend/src/pages/Scheduler/utils.js
@@ -0,0 +1,21 @@
+const getWeekStart = () => {
+  const now = new Date()
+  const dayOfWeek = now.getDay()
+  const diff = now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1)
+  const weekStart = new Date(now.setDate(diff))
+  weekStart.setHours(0, 0, 0, 0)
+  return weekStart
+}
+
+const createTitle = (startTime) => {
+  const start = startTime.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+  })
+  const end = new Date(
+    startTime.getTime() + 6 * 24 * 60 * 60 * 1000
+  ).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+  return `Scheduler (${start} - ${end})`
+}
+
+export { getWeekStart, createTitle }

From afbc89d9fbff03f2d3a3e68af2ecfe92c74d4691 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Fri, 27 Sep 2024 22:30:19 +0200
Subject: [PATCH 04/41] fix: default scaling

---
 frontend/src/components/theme.js              |  4 ++--
 frontend/src/containers/Calendar/Calendar.jsx |  7 ++++++-
 frontend/src/index.sass                       | 17 ++++++++---------
 frontend/src/pages/Scheduler/Scheduler.jsx    |  1 +
 4 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/theme.js b/frontend/src/components/theme.js
index 871f6d4d..a1f08a4d 100644
--- a/frontend/src/components/theme.js
+++ b/frontend/src/components/theme.js
@@ -22,10 +22,10 @@ const colors = {
 
 const defaultTheme = {
   colors,
-  inputHeight: '32px',
+  inputHeight: '28px',
   inputBorder: 0,
   inputBorderRadius: '4px',
-  inputPadding: '6px',
+  inputPadding: '3px',
   inputBackground: colors.surface04,
   fontSize: '0.9rem',
   gapSize: '6px',
diff --git a/frontend/src/containers/Calendar/Calendar.jsx b/frontend/src/containers/Calendar/Calendar.jsx
index 630f4e31..a44ba43b 100644
--- a/frontend/src/containers/Calendar/Calendar.jsx
+++ b/frontend/src/containers/Calendar/Calendar.jsx
@@ -107,7 +107,11 @@ const Calendar = ({ startTime }) => {
 
     if (currentTime && mousePos) {
       const { x, y } = mousePos
-      ctx.fillText(currentTime.toLocaleTimeString(), x + 10, y + 50)
+      ctx.fillText(
+        `${Math.round(x)}:${Math.round(y)} ${currentTime.toLocaleString()}`,
+        x + 10,
+        y + 50
+      )
     }
   }
 
@@ -138,6 +142,7 @@ const Calendar = ({ startTime }) => {
     if (!calendarRef.current) return
     calendarRef.current.addEventListener('mousemove', onMouseMove)
     return () => {
+      if (!calendarRef.current) return
       calendarRef.current.removeEventListener('mousemove', onMouseMove)
     }
   }, [calendarRef.current])
diff --git a/frontend/src/index.sass b/frontend/src/index.sass
index ec977c01..be32da85 100644
--- a/frontend/src/index.sass
+++ b/frontend/src/index.sass
@@ -22,12 +22,12 @@
   --color-green: #5fff5f
 
   --input-height: 32px
-  --font-size: 0.9rem
+  --font-size: 0.8rem
   --gap-size: 6px
   --section-gap: 8px
 
 
-// Hacks 
+// Hacks
 
 ::-webkit-scrollbar
   width: 20px
@@ -60,7 +60,7 @@ html
   color: var(--color-text)
   font-size: var(--font-size)
   font-family: var(--font-family)
-  
+
 
 #root
   position: fixed
@@ -72,10 +72,10 @@ html
   flex-direction: column
   padding: var(--section-gap)
   gap: var(--section-gap)
-  zoom: .9
+  zoom: 1
 
 
-a 
+a
   color: var(--color-text)
   text-decoration: none
   cursor: pointer
@@ -108,12 +108,12 @@ section
 
 .nopad
   padding: 0
-   
+
 .row
   display: flex
   flex-direction: row
   gap: var(--section-gap)
-    
+
 .column
   display: flex
   flex-direction: column
@@ -123,7 +123,7 @@ section
   display: flex
   align-items: center
   justify-content: center
-    
+
 .grow
   position: relative
   flex-grow: 1
@@ -140,4 +140,3 @@ section
   left: 0
   right: 0
   bottom: 0
-
diff --git a/frontend/src/pages/Scheduler/Scheduler.jsx b/frontend/src/pages/Scheduler/Scheduler.jsx
index ab62723a..9f88faa4 100644
--- a/frontend/src/pages/Scheduler/Scheduler.jsx
+++ b/frontend/src/pages/Scheduler/Scheduler.jsx
@@ -11,6 +11,7 @@ const Scheduler = () => {
   const [startTime, setStartTime] = useState(getWeekStart())
 
   useEffect(() => {
+    console.log('Week start time changed', startTime)
     const pageTitle = createTitle(startTime)
     dispatch(setPageTitle({ title: pageTitle }))
   }, [startTime])

From 4383e3d5527e6b7a6494db20bbaed07c7ae031d8 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Sat, 28 Sep 2024 21:58:58 +0200
Subject: [PATCH 05/41] feat: scheduler - basic time drawing functions

---
 frontend/src/containers/Calendar/Calendar.jsx | 160 +++++++++---------
 frontend/src/pages/Scheduler/utils.js         |   2 +-
 2 files changed, 85 insertions(+), 77 deletions(-)

diff --git a/frontend/src/containers/Calendar/Calendar.jsx b/frontend/src/containers/Calendar/Calendar.jsx
index a44ba43b..30c9054f 100644
--- a/frontend/src/containers/Calendar/Calendar.jsx
+++ b/frontend/src/containers/Calendar/Calendar.jsx
@@ -7,6 +7,8 @@ const CalendarCanvas = styled.canvas`
   background-color: #24202e;
 `
 
+const CLOCK_WIDTH = 100
+
 const Calendar = ({ startTime }) => {
   const calendarRef = useRef(null)
   const dayRef = useRef(null)
@@ -17,101 +19,104 @@ const Calendar = ({ startTime }) => {
   const [currentTime, setCurrentTime] = useState(null)
   const [mousePos, setMousePos] = useState(null)
 
-  const clockWidth = 100
+  // Drawing parameters
 
-  const pos2time = (x, y) => {
-    if (!dayRef.current || !calendarRef.current) {
-      return
-    }
-    const dayWidth = dayRef.current.clientWidth
-    const hourHeight = calendarRef.current.clientHeight / 24
-    const dayOfWeek = Math.floor(x / dayWidth)
-
-    let hour = Math.floor(y / hourHeight)
-    let minute = Math.floor(((y % hourHeight) / hourHeight) * 60)
-    // round to nearest 5 minutes
-    minute = Math.round(minute / 5) * 5
-    if (minute >= 60) {
-      minute = 0
-      hour += 1
-    }
+  const drawParams = useRef({})
+
+  useEffect(() => {
+    if (!dayRef.current) return
+    drawParams.current.dayWidth = dayRef.current.clientWidth
+  }, [drawParams.current, dayRef.current])
+
+  useEffect(() => {
+    if (!calendarRef.current) return
+    drawParams.current.hourHeight = calendarRef.current.clientHeight / 24
+  }, [drawParams.current, calendarRef.current, zoom])
 
-    // Calculate the offset from the startTime
-    const startDate = new Date(startTime)
-    const resultDate = new Date(startDate)
-    resultDate.setDate(startDate.getDate() + dayOfWeek)
-    resultDate.setHours(startDate.getHours() + hour)
-    resultDate.setMinutes(startDate.getMinutes() + minute)
+  //
+  //
+  //
 
+  const pos2time = (x, y) => {
+    if (x < CLOCK_WIDTH) return null
+    if (y < 0) return null
+    const _x = x - CLOCK_WIDTH
+    const { dayWidth, hourHeight } = drawParams.current
+    if (!dayRef.current || !calendarRef.current) return null
+    let offsetSeconds = Math.floor((y / hourHeight) * 60 * 60) // vertical offset
+    offsetSeconds += Math.floor(_x / dayWidth) * 24 * 60 * 60 // day offset
+    offsetSeconds = Math.round(offsetSeconds / 300) * 300 // round to 5 minutes
+    const resultDate = new Date(startTime.getTime() + offsetSeconds * 1000)
     return resultDate
   }
 
-  const drawCalendar = () => {
-    if (!dayRef.current || !calendarRef.current) {
-      return
-    }
+  const time2pos = (time) => {
+    const { dayWidth, hourHeight } = drawParams.current
+    const offsetSeconds = (time - startTime) / 1000
+    const dayOffset = Math.floor(offsetSeconds / (24 * 60 * 60))
+    const x = CLOCK_WIDTH + dayOffset * dayWidth
+    const y = ((offsetSeconds % (24 * 60 * 60)) / (60 * 60)) * hourHeight
+    return { x, y }
+  }
 
-    const dayWidth = dayRef.current.clientWidth
+  const drawMarks = (ctx) => {
+    const { dayWidth, hourHeight } = drawParams.current
+
+    const startHour = startTime.getHours()
+    const startMinute = startTime.getMinutes()
+
+    // get the first time AFTER the start time that
+    // is a multiple of 15 minutes
+
+    const firstTime = new Date(startTime)
+    firstTime.setMinutes(startMinute + ((15 - (startMinute % 15)) % 15))
+    firstTime.setHours(
+      startHour + (startMinute + ((15 - (startMinute % 15)) % 15)) / 60
+    )
+
+    for (let i = 0; i < 24 * 4; i++) {
+      const timeMarker = new Date(firstTime.getTime() + i * 15 * 60000)
+      const { x, y } = time2pos(timeMarker)
+
+      for (let i = 0; i < 7; i++) {
+        const x1 = x + i * dayWidth + 5
+        const x2 = x1 + dayWidth - 5
+        ctx.beginPath()
+        ctx.strokeStyle = '#444'
+        ctx.setLineDash([5, 5])
+        ctx.moveTo(x1, y)
+        ctx.lineTo(x2, y)
+        ctx.stroke()
+        ctx.setLineDash([]) // Reset to solid lines for other drawings
+      }
+    }
+  }
 
+  const drawCalendar = () => {
+    if (!dayRef.current || !calendarRef.current) return
     const canvas = calendarRef.current
     const ctx = canvas.getContext('2d')
-
+    const { dayWidth, hourHeight } = drawParams.current
     ctx.clearRect(0, 0, canvas.width, canvas.height)
 
-    for (let i = 0; i < 24; i++) {
-      let y = (ctx.canvas.height / 24) * i
-      if (i === 0) {
-        continue
-      }
-      y += 4
-      ctx.font = '14px Arial'
-      ctx.fillStyle = '#c0c0c0'
-      const hours = i.toString().padStart(2, '0')
-      const minutes = '00'
-      const clock = `${hours}:${minutes}`
-      ctx.fillText(clock, 14, y)
-    }
-
-    for (let i = 0; i < 7; i++) {
-      let x = ((ctx.canvas.width - clockWidth) / 7) * i
-      x += 2
-      x += clockWidth
-
-      for (let j = 0; j < 24; j++) {
-        const hourHeight = ctx.canvas.height / 24
-        const y = hourHeight * j
-
-        if (j > 0) {
-          ctx.beginPath()
-          ctx.strokeStyle = '#d7d4d5'
-          ctx.lineWidth = 1
-          ctx.moveTo(x, y)
-          ctx.lineTo(x + dayWidth - 4, y)
-          ctx.stroke()
-        }
-
-        if (ctx.canvas.height / 24 > 40) {
-          for (let k = 1; k < 4; k++) {
-            const qy = y + (hourHeight / 4) * k
-
-            ctx.beginPath()
-            ctx.strokeStyle = '#646464'
-            ctx.lineWidth = 1
-            ctx.moveTo(x, qy)
-            ctx.lineTo(x + dayWidth - 4, qy)
-            ctx.stroke()
-          }
-        }
-      }
-    }
+    drawMarks(ctx)
 
     if (currentTime && mousePos) {
       const { x, y } = mousePos
+
+      ctx.fillStyle = '#fff'
       ctx.fillText(
         `${Math.round(x)}:${Math.round(y)} ${currentTime.toLocaleString()}`,
         x + 10,
         y + 50
       )
+
+      const timePos = time2pos(currentTime)
+      ctx.strokeStyle = 'red'
+      ctx.beginPath()
+      ctx.moveTo(timePos.x, timePos.y)
+      ctx.lineTo(timePos.x + drawParams.current.dayWidth, timePos.y)
+      ctx.stroke()
     }
   }
 
@@ -160,6 +165,9 @@ const Calendar = ({ startTime }) => {
     const scrollbarWidth = bodyWrapper.offsetWidth - bodyWrapper.clientWidth
     setScrollbarWidth(scrollbarWidth)
 
+    drawParams.current.dayWidth = dayRef.current.clientWidth
+    drawParams.current.hourHeight = calendarRef.current.clientHeight / 24
+
     drawCalendar()
   }
 
@@ -184,7 +192,7 @@ const Calendar = ({ startTime }) => {
   //
 
   return (
-    <CalendarWrapper scrollbarWidth={scrollbarWidth} clockWidth={clockWidth}>
+    <CalendarWrapper scrollbarWidth={scrollbarWidth} clockWidth={CLOCK_WIDTH}>
       <div className="calendar-header">
         <div className="calendar-day" ref={dayRef}>
           Monday
diff --git a/frontend/src/pages/Scheduler/utils.js b/frontend/src/pages/Scheduler/utils.js
index 3a69b7c5..3a62b80a 100644
--- a/frontend/src/pages/Scheduler/utils.js
+++ b/frontend/src/pages/Scheduler/utils.js
@@ -3,7 +3,7 @@ const getWeekStart = () => {
   const dayOfWeek = now.getDay()
   const diff = now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1)
   const weekStart = new Date(now.setDate(diff))
-  weekStart.setHours(0, 0, 0, 0)
+  weekStart.setHours(7, 30, 0, 0)
   return weekStart
 }
 

From 35f0bc76d4c6def60064d88b02646945c47527e6 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Sun, 6 Oct 2024 19:15:01 +0200
Subject: [PATCH 06/41] chore: increased day span in calendar

---
 frontend/src/containers/Calendar/Calendar.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/containers/Calendar/Calendar.jsx b/frontend/src/containers/Calendar/Calendar.jsx
index 30c9054f..7d343aa6 100644
--- a/frontend/src/containers/Calendar/Calendar.jsx
+++ b/frontend/src/containers/Calendar/Calendar.jsx
@@ -79,8 +79,8 @@ const Calendar = ({ startTime }) => {
       const { x, y } = time2pos(timeMarker)
 
       for (let i = 0; i < 7; i++) {
-        const x1 = x + i * dayWidth + 5
-        const x2 = x1 + dayWidth - 5
+        const x1 = x + i * dayWidth + 10
+        const x2 = x1 + dayWidth - 10
         ctx.beginPath()
         ctx.strokeStyle = '#444'
         ctx.setLineDash([5, 5])

From a6123903834dc245960df5953669fb7cde71955c Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Sun, 6 Oct 2024 19:33:39 +0200
Subject: [PATCH 07/41] feat: display time markers in calendar

---
 frontend/src/containers/Calendar/Calendar.jsx | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/frontend/src/containers/Calendar/Calendar.jsx b/frontend/src/containers/Calendar/Calendar.jsx
index 7d343aa6..b7589952 100644
--- a/frontend/src/containers/Calendar/Calendar.jsx
+++ b/frontend/src/containers/Calendar/Calendar.jsx
@@ -7,7 +7,7 @@ const CalendarCanvas = styled.canvas`
   background-color: #24202e;
 `
 
-const CLOCK_WIDTH = 100
+const CLOCK_WIDTH = 40
 
 const Calendar = ({ startTime }) => {
   const calendarRef = useRef(null)
@@ -74,20 +74,35 @@ const Calendar = ({ startTime }) => {
       startHour + (startMinute + ((15 - (startMinute % 15)) % 15)) / 60
     )
 
-    for (let i = 0; i < 24 * 4; i++) {
-      const timeMarker = new Date(firstTime.getTime() + i * 15 * 60000)
-      const { x, y } = time2pos(timeMarker)
+    for (let rday = 0; rday < 7; rday++) {
+      for (let rtime = 0; rtime < 24 * 4; rtime++) {
+        const timeMarker = new Date(firstTime.getTime() + rtime * 15 * 60000)
+        const minutes = timeMarker.getMinutes()
+        const { x, y } = time2pos(timeMarker)
 
-      for (let i = 0; i < 7; i++) {
-        const x1 = x + i * dayWidth + 10
+        if (hourHeight < 50 && minutes !== 0) {
+          continue
+        }
+
+        const x1 = x + rday * dayWidth + 10
         const x2 = x1 + dayWidth - 10
+
         ctx.beginPath()
         ctx.strokeStyle = '#444'
-        ctx.setLineDash([5, 5])
+        if (minutes === 0) {
+          ctx.setLineDash([1, 0])
+        } else {
+          ctx.setLineDash([5, 5])
+        }
         ctx.moveTo(x1, y)
         ctx.lineTo(x2, y)
         ctx.stroke()
         ctx.setLineDash([]) // Reset to solid lines for other drawings
+        if (rday === 0 && minutes === 0) {
+          ctx.font = '12px Arial'
+          ctx.fillStyle = '#fff'
+          ctx.fillText(timeMarker.toTimeString().slice(0, 5), 10, y + 4)
+        }
       }
     }
   }

From 828e55e93063468ce03dfa8d8ed05c96a25f213f Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Sun, 6 Oct 2024 20:50:45 +0200
Subject: [PATCH 08/41] feat: browser drag p.o.c.

---
 frontend/src/components/table/cells.jsx     | 12 +++-
 frontend/src/components/table/container.jsx |  2 +-
 frontend/src/containers/Browser/Browser.jsx | 11 +--
 frontend/src/index.scss                     |  7 ++
 frontend/src/pages/MAMPage.jsx              | 76 +++++++++++++++++++--
 5 files changed, 95 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/table/cells.jsx b/frontend/src/components/table/cells.jsx
index d26fdbda..f59ef35c 100644
--- a/frontend/src/components/table/cells.jsx
+++ b/frontend/src/components/table/cells.jsx
@@ -1,4 +1,5 @@
 import { useMemo } from 'react'
+import { useDraggable } from '@dnd-kit/core'
 
 const HeaderCell = ({ name, width, title, sortDirection, onSort }) => {
   let sortArrowElement = null
@@ -49,6 +50,9 @@ const DataRow = ({
   rowHighlightStyle,
   selected = false,
 }) => {
+  const { attributes, listeners, setNodeRef, transform, isDragging } =
+    useDraggable({ id: rowData.id })
+
   const handleClick = (event) => {
     if (event.type === 'contextmenu' || event.button === 2) {
       // if we're right-clicking, and the row is already selected,
@@ -58,7 +62,10 @@ const DataRow = ({
 
     if (onRowClick) onRowClick(rowData, event)
   }
-  const rowStyle = {}
+
+  const rowStyle = {
+    opacity: isDragging ? 0.5 : 1,
+  }
 
   // Left-border highlight color
   let highlightColor = null
@@ -95,8 +102,11 @@ const DataRow = ({
 
   return (
     <tr
+      ref={setNodeRef}
       onClick={handleClick}
       onContextMenu={handleClick}
+      {...attributes}
+      {...listeners}
       className={selected ? 'selected' : ''}
       style={rowStyle}
     >
diff --git a/frontend/src/components/table/container.jsx b/frontend/src/components/table/container.jsx
index 71abb08b..ebfc29bf 100644
--- a/frontend/src/components/table/container.jsx
+++ b/frontend/src/components/table/container.jsx
@@ -69,7 +69,7 @@ const TableWrapper = styled.div`
         display: block;
         z-index: 0;
         width: 0;
-        opacity: 0; 
+        opacity: 0;
         content: "";
       }
     }
diff --git a/frontend/src/containers/Browser/Browser.jsx b/frontend/src/containers/Browser/Browser.jsx
index f65123a1..005496a5 100644
--- a/frontend/src/containers/Browser/Browser.jsx
+++ b/frontend/src/containers/Browser/Browser.jsx
@@ -3,6 +3,7 @@ import { useEffect, useState, useRef } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { toast } from 'react-toastify'
 import { debounce } from 'lodash'
+import clsx from 'clsx'
 
 import { Table } from '/src/components'
 import Pagination from '/src/containers/Pagination'
@@ -25,7 +26,7 @@ import {
 
 const ROWS_PER_PAGE = 200
 
-const BrowserTable = () => {
+const BrowserTable = ({ isDragging }) => {
   const currentView = useSelector((state) => state.context.currentView?.id)
   const searchQuery = useSelector((state) => state.context.searchQuery)
   const selectedAssets = useSelector((state) => state.context.selectedAssets)
@@ -263,13 +264,15 @@ const BrowserTable = () => {
     },
   ]
 
+  const tableClass = clsx('contained', isDragging && 'no-scroll')
+
   return (
     <>
       <section className="grow">
         <Table
           data={data}
           columns={columns}
-          className="contained"
+          className={tableClass}
           keyField="id"
           selection={selectedAssets}
           onRowClick={onRowClick}
@@ -292,11 +295,11 @@ const BrowserTable = () => {
   )
 }
 
-const Browser = () => {
+const Browser = ({ isDragging }) => {
   return (
     <>
       <BrowserNav />
-      <BrowserTable />
+      <BrowserTable isDragging={isDragging} />
     </>
   )
 }
diff --git a/frontend/src/index.scss b/frontend/src/index.scss
index a8c3b08d..7a3dd061 100644
--- a/frontend/src/index.scss
+++ b/frontend/src/index.scss
@@ -163,3 +163,10 @@ section {
   right: 0;
   bottom: 0;
 }
+
+.no-scroll {
+  overflow: hidden !important;
+  tr {
+    cursor: grabbing !important;
+  }
+}
diff --git a/frontend/src/pages/MAMPage.jsx b/frontend/src/pages/MAMPage.jsx
index 750f4d31..5c6f34e9 100644
--- a/frontend/src/pages/MAMPage.jsx
+++ b/frontend/src/pages/MAMPage.jsx
@@ -1,4 +1,4 @@
-import { useMemo, useEffect } from 'react'
+import { useMemo, useEffect, useState } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { useParams, useSearchParams } from 'react-router-dom'
 import Splitter, { SplitDirection } from '@devbookhq/splitter'
@@ -11,7 +11,13 @@ import Browser from '/src/containers/Browser'
 import AssetEditor from '/src/pages/AssetEditor'
 import Scheduler from '/src/pages/Scheduler'
 import Rundown from './Rundown'
-import { DndContext } from '@dnd-kit/core'
+import {
+  DndContext,
+  DragOverlay,
+  MouseSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core'
 import SendToDialog from '/src/containers/SendTo'
 
 const MAMContainer = styled.div`
@@ -47,6 +53,51 @@ const MAMPage = () => {
     null
   )
 
+  // Drag and drop from the browser
+
+  const [activeId, setActiveId] = useState(null)
+  const [isDragging, setIsDragging] = useState(false)
+
+  const mouseSensor = useSensor(MouseSensor, {
+    // Require the mouse to move by 10 pixels before activating
+    activationConstraint: {
+      distance: 10,
+    },
+  })
+
+  const sensors = useSensors(mouseSensor)
+
+  const setBodyCursor = (cursor) => {
+    document.body.style.setProperty('cursor', cursor, 'important')
+  }
+
+  const onDragStart = (event) => {
+    setIsDragging(true)
+    setActiveId(event.active.id)
+    setBodyCursor('grabbing')
+  }
+
+  const onDragEnd = (event) => {
+    setIsDragging(false)
+    setActiveId(null)
+    const { active, over } = event
+    setBodyCursor('auto')
+    if (over) {
+      console.log(`Dragged ${active.id} to ${over.id}`)
+      // Handle the drop logic here
+    }
+  }
+
+  const onDragCancel = () => {
+    setIsDragging(false)
+    setActiveId(null)
+    setBodyCursor('auto')
+  }
+
+  //
+  // URL handling
+  //
+
   useEffect(() => {
     if (searchParams.get('asset')) {
       const assetId = parseInt(searchParams.get('asset'))
@@ -66,6 +117,10 @@ const MAMPage = () => {
     setSearchParams({ asset: focusedAsset })
   }, [focusedAsset])
 
+  //
+  // MAM Module
+  //
+
   const componentProps = {}
 
   const moduleComponent = useMemo(() => {
@@ -81,21 +136,28 @@ const MAMPage = () => {
     setSplitterSizes(size)
   }
 
-  const onDragEnd = (event) => {
-    console.log(event)
-  }
+  //
+  // Render
+  //
 
   return (
     <MAMContainer>
-      <DndContext onDragEnd={onDragEnd}>
+      <DndContext
+        onDragEnd={onDragEnd}
+        onDragStart={onDragStart}
+        sensors={sensors}
+      >
         <Splitter
           direction={SplitDirection.Horizontal}
           onResizeFinished={onResize}
           initialSizes={splitterSizes}
         >
-          <Browser />
+          <Browser isDragging={isDragging} />
           {moduleComponent}
         </Splitter>
+        {/* <DragOverlay>
+          {activeId ? <DraggableRow id={activeId} /> : null}
+        </DragOverlay> */}
       </DndContext>
       <SendToDialog />
     </MAMContainer>

From 1a2b184697ca335a3bf93338e259e6b9afd23285 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Sun, 6 Oct 2024 21:28:08 +0200
Subject: [PATCH 09/41] feat: drop to calendar p.o.c.

---
 frontend/src/components/table/cells.jsx       | 10 ++++-
 frontend/src/containers/Calendar/Calendar.jsx | 41 ++++++++++++++-----
 frontend/src/pages/MAMPage.jsx                | 30 +++++++-------
 frontend/src/pages/Scheduler/Scheduler.jsx    |  4 +-
 4 files changed, 57 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/table/cells.jsx b/frontend/src/components/table/cells.jsx
index f59ef35c..13bc7b09 100644
--- a/frontend/src/components/table/cells.jsx
+++ b/frontend/src/components/table/cells.jsx
@@ -51,7 +51,15 @@ const DataRow = ({
   selected = false,
 }) => {
   const { attributes, listeners, setNodeRef, transform, isDragging } =
-    useDraggable({ id: rowData.id })
+    useDraggable({
+      id: rowData.id,
+      data: {
+        type: 'asset',
+        duration: rowData.duration,
+        title: rowData.title,
+        subtitle: rowData.subtitle,
+      },
+    })
 
   const handleClick = (event) => {
     if (event.type === 'contextmenu' || event.button === 2) {
diff --git a/frontend/src/containers/Calendar/Calendar.jsx b/frontend/src/containers/Calendar/Calendar.jsx
index b7589952..c27c912e 100644
--- a/frontend/src/containers/Calendar/Calendar.jsx
+++ b/frontend/src/containers/Calendar/Calendar.jsx
@@ -2,6 +2,7 @@ import styled from 'styled-components'
 import { useRef, useEffect, useState } from 'react'
 import CalendarWrapper from './CalendarWrapper'
 import ZoomControl from './ZoomControl'
+import { useDroppable } from '@dnd-kit/core'
 
 const CalendarCanvas = styled.canvas`
   background-color: #24202e;
@@ -9,7 +10,7 @@ const CalendarCanvas = styled.canvas`
 
 const CLOCK_WIDTH = 40
 
-const Calendar = ({ startTime }) => {
+const Calendar = ({ startTime, draggedAsset }) => {
   const calendarRef = useRef(null)
   const dayRef = useRef(null)
   const wrapperRef = useRef(null)
@@ -65,9 +66,6 @@ const Calendar = ({ startTime }) => {
     const startHour = startTime.getHours()
     const startMinute = startTime.getMinutes()
 
-    // get the first time AFTER the start time that
-    // is a multiple of 15 minutes
-
     const firstTime = new Date(startTime)
     firstTime.setMinutes(startMinute + ((15 - (startMinute % 15)) % 15))
     firstTime.setHours(
@@ -116,22 +114,29 @@ const Calendar = ({ startTime }) => {
 
     drawMarks(ctx)
 
-    if (currentTime && mousePos) {
+    if (currentTime && mousePos && draggedAsset) {
       const { x, y } = mousePos
+      console.log(draggedAsset)
 
       ctx.fillStyle = '#fff'
       ctx.fillText(
-        `${Math.round(x)}:${Math.round(y)} ${currentTime.toLocaleString()}`,
+        `${Math.round(x)}:${Math.round(y)} ${currentTime.toLocaleString()}: ${
+          draggedAsset.title
+        }`,
         x + 10,
         y + 50
       )
 
       const timePos = time2pos(currentTime)
-      ctx.strokeStyle = 'red'
       ctx.beginPath()
-      ctx.moveTo(timePos.x, timePos.y)
-      ctx.lineTo(timePos.x + drawParams.current.dayWidth, timePos.y)
-      ctx.stroke()
+      ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
+      ctx.rect(
+        timePos.x + 10,
+        timePos.y,
+        dayWidth - 10,
+        hourHeight * (draggedAsset.duration / 3600)
+      )
+      ctx.fill()
     }
   }
 
@@ -143,6 +148,7 @@ const Calendar = ({ startTime }) => {
     if (!calendarRef?.current) {
       return
     }
+
     const rect = calendarRef.current.getBoundingClientRect()
     const x = e.clientX - rect.left
     const y = e.clientY - rect.top
@@ -158,6 +164,14 @@ const Calendar = ({ startTime }) => {
   // Mouse position within the calendar (Track current time)
   //
 
+  const onMouseUp = (e) => {
+    console.log(e)
+    if (!calendarRef?.current) return
+    if (draggedAsset && currentTime) {
+      console.log('Dropped', draggedAsset, currentTime)
+    }
+  }
+
   useEffect(() => {
     if (!calendarRef.current) return
     calendarRef.current.addEventListener('mousemove', onMouseMove)
@@ -173,6 +187,7 @@ const Calendar = ({ startTime }) => {
 
   const resizeCanvas = () => {
     const canvas = calendarRef.current
+    if (!canvas?.parentElement) return
     canvas.width = canvas.parentElement.clientWidth
     canvas.height = canvas.parentElement.clientHeight * zoom
 
@@ -221,7 +236,11 @@ const Calendar = ({ startTime }) => {
       </div>
       <div className="calendar-body">
         <div className="calendar-body-wrapper" ref={wrapperRef}>
-          <CalendarCanvas id="calendar" ref={calendarRef} />
+          <CalendarCanvas
+            id="calendar"
+            ref={calendarRef}
+            onMouseUp={onMouseUp}
+          />
         </div>
       </div>
       <div className="calendar-footer">
diff --git a/frontend/src/pages/MAMPage.jsx b/frontend/src/pages/MAMPage.jsx
index 5c6f34e9..89f69f70 100644
--- a/frontend/src/pages/MAMPage.jsx
+++ b/frontend/src/pages/MAMPage.jsx
@@ -55,7 +55,8 @@ const MAMPage = () => {
 
   // Drag and drop from the browser
 
-  const [activeId, setActiveId] = useState(null)
+  // const [activeId, setActiveId] = useState(null)
+  const [draggedAsset, setDraggedAsset] = useState(null)
   const [isDragging, setIsDragging] = useState(false)
 
   const mouseSensor = useSensor(MouseSensor, {
@@ -73,25 +74,27 @@ const MAMPage = () => {
 
   const onDragStart = (event) => {
     setIsDragging(true)
-    setActiveId(event.active.id)
+    // setActiveId(event.active.id)
+    setDraggedAsset(event.active.data.current)
     setBodyCursor('grabbing')
+
+    if (event.active.id === focusedAsset) return
+    dispatch(setFocusedAsset(event.active.id))
+    dispatch(setSelectedAssets([event.active.id]))
   }
 
   const onDragEnd = (event) => {
     setIsDragging(false)
-    setActiveId(null)
+    // setActiveId(null)
+    setDraggedAsset(null)
     const { active, over } = event
     setBodyCursor('auto')
-    if (over) {
-      console.log(`Dragged ${active.id} to ${over.id}`)
-      // Handle the drop logic here
-    }
   }
 
   const onDragCancel = () => {
     setIsDragging(false)
-    setActiveId(null)
-    setBodyCursor('auto')
+    // setActiveId(null)
+    setDraggedAsset(null)
   }
 
   //
@@ -121,7 +124,9 @@ const MAMPage = () => {
   // MAM Module
   //
 
-  const componentProps = {}
+  const componentProps = {
+    draggedAsset,
+  }
 
   const moduleComponent = useMemo(() => {
     if (module == 'editor') return <AssetEditor {...componentProps} />
@@ -129,7 +134,7 @@ const MAMPage = () => {
     if (module == 'rundown') return <Rundown {...componentProps} />
 
     return 'Not implemented'
-  }, [module])
+  }, [module, draggedAsset])
 
   // eslint-disable-next-line no-unused-vars
   const onResize = (gutter, size) => {
@@ -155,9 +160,6 @@ const MAMPage = () => {
           <Browser isDragging={isDragging} />
           {moduleComponent}
         </Splitter>
-        {/* <DragOverlay>
-          {activeId ? <DraggableRow id={activeId} /> : null}
-        </DragOverlay> */}
       </DndContext>
       <SendToDialog />
     </MAMContainer>
diff --git a/frontend/src/pages/Scheduler/Scheduler.jsx b/frontend/src/pages/Scheduler/Scheduler.jsx
index 9f88faa4..0ee51ebe 100644
--- a/frontend/src/pages/Scheduler/Scheduler.jsx
+++ b/frontend/src/pages/Scheduler/Scheduler.jsx
@@ -6,7 +6,7 @@ import Calendar from '/src/containers/Calendar'
 import SchedulerNav from './SchedulerNav'
 import { getWeekStart, createTitle } from './utils'
 
-const Scheduler = () => {
+const Scheduler = ({ draggedAsset }) => {
   const dispatch = useDispatch()
   const [startTime, setStartTime] = useState(getWeekStart())
 
@@ -20,7 +20,7 @@ const Scheduler = () => {
     <main className="column">
       <SchedulerNav startTime={startTime} setStartTime={setStartTime} />
       <section className="grow nopad">
-        <Calendar startTime={startTime} />
+        <Calendar startTime={startTime} draggedAsset={draggedAsset} />
       </section>
     </main>
   )

From f2101710c5fcbc59b15a6c7d9b245fce8cf690e5 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Sun, 6 Oct 2024 22:31:58 +0200
Subject: [PATCH 10/41] feat: draw existing events

---
 frontend/src/containers/Calendar/Calendar.jsx | 108 ++++++++----------
 frontend/src/containers/Calendar/drawing.js   |  47 ++++++++
 frontend/src/pages/Scheduler/Scheduler.jsx    |  24 +++-
 3 files changed, 115 insertions(+), 64 deletions(-)
 create mode 100644 frontend/src/containers/Calendar/drawing.js

diff --git a/frontend/src/containers/Calendar/Calendar.jsx b/frontend/src/containers/Calendar/Calendar.jsx
index c27c912e..2be78a58 100644
--- a/frontend/src/containers/Calendar/Calendar.jsx
+++ b/frontend/src/containers/Calendar/Calendar.jsx
@@ -3,6 +3,7 @@ import { useRef, useEffect, useState } from 'react'
 import CalendarWrapper from './CalendarWrapper'
 import ZoomControl from './ZoomControl'
 import { useDroppable } from '@dnd-kit/core'
+import { drawMarks } from './drawing'
 
 const CalendarCanvas = styled.canvas`
   background-color: #24202e;
@@ -10,7 +11,7 @@ const CalendarCanvas = styled.canvas`
 
 const CLOCK_WIDTH = 40
 
-const Calendar = ({ startTime, draggedAsset }) => {
+const Calendar = ({ startTime, draggedAsset, events }) => {
   const calendarRef = useRef(null)
   const dayRef = useRef(null)
   const wrapperRef = useRef(null)
@@ -24,20 +25,6 @@ const Calendar = ({ startTime, draggedAsset }) => {
 
   const drawParams = useRef({})
 
-  useEffect(() => {
-    if (!dayRef.current) return
-    drawParams.current.dayWidth = dayRef.current.clientWidth
-  }, [drawParams.current, dayRef.current])
-
-  useEffect(() => {
-    if (!calendarRef.current) return
-    drawParams.current.hourHeight = calendarRef.current.clientHeight / 24
-  }, [drawParams.current, calendarRef.current, zoom])
-
-  //
-  //
-  //
-
   const pos2time = (x, y) => {
     if (x < CLOCK_WIDTH) return null
     if (y < 0) return null
@@ -60,50 +47,27 @@ const Calendar = ({ startTime, draggedAsset }) => {
     return { x, y }
   }
 
-  const drawMarks = (ctx) => {
-    const { dayWidth, hourHeight } = drawParams.current
+  useEffect(() => {
+    if (!dayRef.current) return
+    drawParams.current.dayWidth = dayRef.current.clientWidth
+    drawParams.current.pos2time = pos2time
+    drawParams.current.time2pos = time2pos
+  }, [drawParams.current, dayRef.current])
 
-    const startHour = startTime.getHours()
-    const startMinute = startTime.getMinutes()
-
-    const firstTime = new Date(startTime)
-    firstTime.setMinutes(startMinute + ((15 - (startMinute % 15)) % 15))
-    firstTime.setHours(
-      startHour + (startMinute + ((15 - (startMinute % 15)) % 15)) / 60
-    )
-
-    for (let rday = 0; rday < 7; rday++) {
-      for (let rtime = 0; rtime < 24 * 4; rtime++) {
-        const timeMarker = new Date(firstTime.getTime() + rtime * 15 * 60000)
-        const minutes = timeMarker.getMinutes()
-        const { x, y } = time2pos(timeMarker)
-
-        if (hourHeight < 50 && minutes !== 0) {
-          continue
-        }
-
-        const x1 = x + rday * dayWidth + 10
-        const x2 = x1 + dayWidth - 10
-
-        ctx.beginPath()
-        ctx.strokeStyle = '#444'
-        if (minutes === 0) {
-          ctx.setLineDash([1, 0])
-        } else {
-          ctx.setLineDash([5, 5])
-        }
-        ctx.moveTo(x1, y)
-        ctx.lineTo(x2, y)
-        ctx.stroke()
-        ctx.setLineDash([]) // Reset to solid lines for other drawings
-        if (rday === 0 && minutes === 0) {
-          ctx.font = '12px Arial'
-          ctx.fillStyle = '#fff'
-          ctx.fillText(timeMarker.toTimeString().slice(0, 5), 10, y + 4)
-        }
-      }
-    }
-  }
+  useEffect(() => {
+    if (!calendarRef.current) return
+    drawParams.current.hourHeight = calendarRef.current.clientHeight / 24
+    drawParams.current.pos2time = pos2time
+    drawParams.current.time2pos = time2pos
+  }, [drawParams.current, calendarRef.current, zoom])
+
+  useEffect(() => {
+    drawParams.current.startTime = startTime
+  }, [drawParams.current, startTime])
+
+  //
+  // Draw calendar
+  //
 
   const drawCalendar = () => {
     if (!dayRef.current || !calendarRef.current) return
@@ -112,12 +76,27 @@ const Calendar = ({ startTime, draggedAsset }) => {
     const { dayWidth, hourHeight } = drawParams.current
     ctx.clearRect(0, 0, canvas.width, canvas.height)
 
-    drawMarks(ctx)
+    drawMarks(ctx, drawParams)
+
+    for (const event of events) {
+      const { start, title, duration } = event
+
+      const startPos = time2pos(start * 1000)
+      ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
+      ctx.fillRect(
+        startPos.x + 10,
+        startPos.y,
+        dayWidth - 10,
+        hourHeight * (event.duration / 3600)
+      )
+
+      ctx.font = '12px Arial'
+      ctx.fillStyle = '#fff'
+      ctx.fillText(title, startPos.x + 15, startPos.y + 15)
+    }
 
     if (currentTime && mousePos && draggedAsset) {
       const { x, y } = mousePos
-      console.log(draggedAsset)
-
       ctx.fillStyle = '#fff'
       ctx.fillText(
         `${Math.round(x)}:${Math.round(y)} ${currentTime.toLocaleString()}: ${
@@ -140,9 +119,13 @@ const Calendar = ({ startTime, draggedAsset }) => {
     }
   }
 
+  //
+  // Event handlers
+  //
+
   useEffect(() => {
     drawCalendar()
-  }, [currentTime])
+  }, [currentTime, events])
 
   const onMouseMove = (e) => {
     if (!calendarRef?.current) {
@@ -165,7 +148,6 @@ const Calendar = ({ startTime, draggedAsset }) => {
   //
 
   const onMouseUp = (e) => {
-    console.log(e)
     if (!calendarRef?.current) return
     if (draggedAsset && currentTime) {
       console.log('Dropped', draggedAsset, currentTime)
diff --git a/frontend/src/containers/Calendar/drawing.js b/frontend/src/containers/Calendar/drawing.js
new file mode 100644
index 00000000..8c524953
--- /dev/null
+++ b/frontend/src/containers/Calendar/drawing.js
@@ -0,0 +1,47 @@
+const drawMarks = (ctx, drawParams) => {
+  const { dayWidth, hourHeight, startTime, pos2time, time2pos } =
+    drawParams.current
+
+  const startHour = startTime.getHours()
+  const startMinute = startTime.getMinutes()
+
+  const firstTime = new Date(startTime)
+  firstTime.setMinutes(startMinute + ((15 - (startMinute % 15)) % 15))
+  firstTime.setHours(
+    startHour + (startMinute + ((15 - (startMinute % 15)) % 15)) / 60
+  )
+
+  for (let rday = 0; rday < 7; rday++) {
+    for (let rtime = 0; rtime < 24 * 4; rtime++) {
+      const timeMarker = new Date(firstTime.getTime() + rtime * 15 * 60000)
+      const minutes = timeMarker.getMinutes()
+      const { x, y } = time2pos(timeMarker)
+
+      if (hourHeight < 50 && minutes !== 0) {
+        continue
+      }
+
+      const x1 = x + rday * dayWidth + 10
+      const x2 = x1 + dayWidth - 10
+
+      ctx.beginPath()
+      ctx.strokeStyle = '#444'
+      if (minutes === 0) {
+        ctx.setLineDash([1, 0])
+      } else {
+        ctx.setLineDash([5, 5])
+      }
+      ctx.moveTo(x1, y)
+      ctx.lineTo(x2, y)
+      ctx.stroke()
+      ctx.setLineDash([]) // Reset to solid lines for other drawings
+      if (rday === 0 && minutes === 0) {
+        ctx.font = '12px Arial'
+        ctx.fillStyle = '#fff'
+        ctx.fillText(timeMarker.toTimeString().slice(0, 5), 10, y + 4)
+      }
+    }
+  }
+}
+
+export { drawMarks }
diff --git a/frontend/src/pages/Scheduler/Scheduler.jsx b/frontend/src/pages/Scheduler/Scheduler.jsx
index 0ee51ebe..cf4e5cf6 100644
--- a/frontend/src/pages/Scheduler/Scheduler.jsx
+++ b/frontend/src/pages/Scheduler/Scheduler.jsx
@@ -5,10 +5,28 @@ import { setPageTitle } from '/src/actions'
 import Calendar from '/src/containers/Calendar'
 import SchedulerNav from './SchedulerNav'
 import { getWeekStart, createTitle } from './utils'
+import nebula from '/src/nebula'
+import { DateTime } from 'luxon'
 
 const Scheduler = ({ draggedAsset }) => {
   const dispatch = useDispatch()
   const [startTime, setStartTime] = useState(getWeekStart())
+  const [events, setEvents] = useState([])
+
+  const requestParams = {
+    id_channel: 1,
+    date: DateTime.fromJSDate(startTime).toFormat('yyyy-MM-dd'),
+  }
+
+  const loadEvents = () => {
+    nebula.request('scheduler', requestParams).then((response) => {
+      setEvents(response.data.events)
+    })
+  }
+
+  useEffect(() => {
+    loadEvents()
+  }, [startTime])
 
   useEffect(() => {
     console.log('Week start time changed', startTime)
@@ -20,7 +38,11 @@ const Scheduler = ({ draggedAsset }) => {
     <main className="column">
       <SchedulerNav startTime={startTime} setStartTime={setStartTime} />
       <section className="grow nopad">
-        <Calendar startTime={startTime} draggedAsset={draggedAsset} />
+        <Calendar
+          startTime={startTime}
+          events={events}
+          draggedAsset={draggedAsset}
+        />
       </section>
     </main>
   )

From dcdc6eecddf36776edde67b16329faed5d4b286a Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Mon, 7 Oct 2024 20:32:40 +0200
Subject: [PATCH 11/41] feat: moving events around

---
 frontend/src/components/table/cells.jsx       |   1 +
 frontend/src/containers/Calendar/Calendar.jsx | 100 ++++++++++++++----
 frontend/src/pages/Scheduler/Scheduler.jsx    |   8 ++
 3 files changed, 89 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/table/cells.jsx b/frontend/src/components/table/cells.jsx
index 13bc7b09..81ed53b3 100644
--- a/frontend/src/components/table/cells.jsx
+++ b/frontend/src/components/table/cells.jsx
@@ -54,6 +54,7 @@ const DataRow = ({
     useDraggable({
       id: rowData.id,
       data: {
+        id: rowData.id,
         type: 'asset',
         duration: rowData.duration,
         title: rowData.title,
diff --git a/frontend/src/containers/Calendar/Calendar.jsx b/frontend/src/containers/Calendar/Calendar.jsx
index 2be78a58..c074ff18 100644
--- a/frontend/src/containers/Calendar/Calendar.jsx
+++ b/frontend/src/containers/Calendar/Calendar.jsx
@@ -11,7 +11,7 @@ const CalendarCanvas = styled.canvas`
 
 const CLOCK_WIDTH = 40
 
-const Calendar = ({ startTime, draggedAsset, events }) => {
+const Calendar = ({ startTime, draggedAsset, events, setEvent }) => {
   const calendarRef = useRef(null)
   const dayRef = useRef(null)
   const wrapperRef = useRef(null)
@@ -20,6 +20,7 @@ const Calendar = ({ startTime, draggedAsset, events }) => {
   const [zoom, setZoom] = useState(1)
   const [currentTime, setCurrentTime] = useState(null)
   const [mousePos, setMousePos] = useState(null)
+  const [draggedEvent, setDraggedEvent] = useState(null)
 
   // Drawing parameters
 
@@ -47,6 +48,17 @@ const Calendar = ({ startTime, draggedAsset, events }) => {
     return { x, y }
   }
 
+  const eventAtPos = () => {
+    const currentTs = currentTime.getTime() / 1000
+    for (const event of events) {
+      const { start, duration, title } = event
+      if (currentTs >= start && currentTs <= start + duration) {
+        return event
+      }
+    }
+    return null
+  }
+
   useEffect(() => {
     if (!dayRef.current) return
     drawParams.current.dayWidth = dayRef.current.clientWidth
@@ -81,6 +93,8 @@ const Calendar = ({ startTime, draggedAsset, events }) => {
     for (const event of events) {
       const { start, title, duration } = event
 
+      if (draggedEvent?.id === event?.id) continue
+
       const startPos = time2pos(start * 1000)
       ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
       ctx.fillRect(
@@ -95,27 +109,50 @@ const Calendar = ({ startTime, draggedAsset, events }) => {
       ctx.fillText(title, startPos.x + 15, startPos.y + 15)
     }
 
-    if (currentTime && mousePos && draggedAsset) {
+    if (currentTime && mousePos) {
       const { x, y } = mousePos
-      ctx.fillStyle = '#fff'
-      ctx.fillText(
-        `${Math.round(x)}:${Math.round(y)} ${currentTime.toLocaleString()}: ${
-          draggedAsset.title
-        }`,
-        x + 10,
-        y + 50
-      )
 
-      const timePos = time2pos(currentTime)
-      ctx.beginPath()
-      ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
-      ctx.rect(
-        timePos.x + 10,
-        timePos.y,
-        dayWidth - 10,
-        hourHeight * (draggedAsset.duration / 3600)
-      )
-      ctx.fill()
+      if (draggedAsset) {
+        ctx.fillStyle = '#fff'
+        ctx.fillText(
+          `${Math.round(x)}:${Math.round(y)} ${currentTime.toLocaleString()}: ${
+            draggedAsset.title
+          }`,
+          x + 10,
+          y + 50
+        )
+
+        const timePos = time2pos(currentTime)
+        ctx.beginPath()
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
+        ctx.rect(
+          timePos.x + 10,
+          timePos.y,
+          dayWidth - 10,
+          hourHeight * (draggedAsset.duration / 3600)
+        )
+        ctx.fill()
+      } else if (draggedEvent) {
+        ctx.fillStyle = '#cff'
+        ctx.fillText(
+          `${Math.round(x)}:${Math.round(y)} ${currentTime.toLocaleString()}: ${
+            draggedEvent.title
+          }`,
+          x + 10,
+          y + 50
+        )
+
+        const timePos = time2pos(currentTime)
+        ctx.beginPath()
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
+        ctx.rect(
+          timePos.x + 10,
+          timePos.y,
+          dayWidth - 10,
+          hourHeight * (draggedEvent.duration / 3600)
+        )
+        ctx.fill()
+      }
     }
   }
 
@@ -148,9 +185,31 @@ const Calendar = ({ startTime, draggedAsset, events }) => {
   //
 
   const onMouseUp = (e) => {
+    console.log('mouseup', e)
     if (!calendarRef?.current) return
     if (draggedAsset && currentTime) {
       console.log('Dropped', draggedAsset, currentTime)
+      setEvent({
+        id_asset: draggedAsset.id,
+        start: currentTime.getTime() / 1000,
+      })
+    } else if (draggedEvent) {
+      console.log('Dropped event', draggedEvent)
+
+      setEvent({
+        id: draggedEvent.id,
+        start: currentTime.getTime() / 1000,
+      })
+    }
+
+    setDraggedEvent(null)
+  }
+
+  const onMouseDown = (evt) => {
+    const pos = { x: evt.clientX, y: evt.clientY }
+    const event = eventAtPos(pos.x, pos.y)
+    if (event) {
+      setDraggedEvent(event)
     }
   }
 
@@ -222,6 +281,7 @@ const Calendar = ({ startTime, draggedAsset, events }) => {
             id="calendar"
             ref={calendarRef}
             onMouseUp={onMouseUp}
+            onMouseDown={onMouseDown}
           />
         </div>
       </div>
diff --git a/frontend/src/pages/Scheduler/Scheduler.jsx b/frontend/src/pages/Scheduler/Scheduler.jsx
index cf4e5cf6..d5f0b5d6 100644
--- a/frontend/src/pages/Scheduler/Scheduler.jsx
+++ b/frontend/src/pages/Scheduler/Scheduler.jsx
@@ -24,6 +24,13 @@ const Scheduler = ({ draggedAsset }) => {
     })
   }
 
+  const setEvent = (event) => {
+    const params = { ...requestParams, events: [event] }
+    nebula.request('scheduler', params).then((response) => {
+      setEvents(response.data.events)
+    })
+  }
+
   useEffect(() => {
     loadEvents()
   }, [startTime])
@@ -41,6 +48,7 @@ const Scheduler = ({ draggedAsset }) => {
         <Calendar
           startTime={startTime}
           events={events}
+          setEvent={setEvent}
           draggedAsset={draggedAsset}
         />
       </section>

From 69296425b33c60c062da88913e7d04bd1aee8851 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Mon, 7 Oct 2024 22:32:56 +0200
Subject: [PATCH 12/41] fix: scheduler drawing functions

---
 frontend/src/containers/Calendar/Calendar.jsx | 57 ++++++++-----------
 .../src/containers/Calendar/drawEvents.js     | 44 ++++++++++++++
 .../Calendar/{drawing.js => drawMarks.js}     |  6 +-
 3 files changed, 71 insertions(+), 36 deletions(-)
 create mode 100644 frontend/src/containers/Calendar/drawEvents.js
 rename frontend/src/containers/Calendar/{drawing.js => drawMarks.js} (91%)

diff --git a/frontend/src/containers/Calendar/Calendar.jsx b/frontend/src/containers/Calendar/Calendar.jsx
index c074ff18..5aebdd57 100644
--- a/frontend/src/containers/Calendar/Calendar.jsx
+++ b/frontend/src/containers/Calendar/Calendar.jsx
@@ -1,9 +1,10 @@
 import styled from 'styled-components'
-import { useRef, useEffect, useState } from 'react'
+import { useRef, useEffect, useState, useCallback } from 'react'
 import CalendarWrapper from './CalendarWrapper'
 import ZoomControl from './ZoomControl'
 import { useDroppable } from '@dnd-kit/core'
-import { drawMarks } from './drawing'
+import drawMarks from './drawMarks'
+import drawEvents from './drawEvents'
 
 const CalendarCanvas = styled.canvas`
   background-color: #24202e;
@@ -25,6 +26,11 @@ const Calendar = ({ startTime, draggedAsset, events, setEvent }) => {
   // Drawing parameters
 
   const drawParams = useRef({})
+  const eventsRef = useRef([])
+
+  useEffect(() => {
+    eventsRef.current = events
+  }, [events])
 
   const pos2time = (x, y) => {
     if (x < CLOCK_WIDTH) return null
@@ -49,10 +55,15 @@ const Calendar = ({ startTime, draggedAsset, events, setEvent }) => {
   }
 
   const eventAtPos = () => {
+    if (!currentTime) return null
     const currentTs = currentTime.getTime() / 1000
+    let i = 0
     for (const event of events) {
+      i += 1
       const { start, duration, title } = event
-      if (currentTs >= start && currentTs <= start + duration) {
+      const nextEvent = events[i]
+      const nextStart = nextEvent?.start || start + duration
+      if (currentTs >= start && currentTs <= nextStart) {
         return event
       }
     }
@@ -61,21 +72,14 @@ const Calendar = ({ startTime, draggedAsset, events, setEvent }) => {
 
   useEffect(() => {
     if (!dayRef.current) return
+    if (!startTime) return
+    drawParams.current.hourHeight =
+      (calendarRef.current?.clientHeight || 0) / 24
     drawParams.current.dayWidth = dayRef.current.clientWidth
     drawParams.current.pos2time = pos2time
     drawParams.current.time2pos = time2pos
-  }, [drawParams.current, dayRef.current])
-
-  useEffect(() => {
-    if (!calendarRef.current) return
-    drawParams.current.hourHeight = calendarRef.current.clientHeight / 24
-    drawParams.current.pos2time = pos2time
-    drawParams.current.time2pos = time2pos
-  }, [drawParams.current, calendarRef.current, zoom])
-
-  useEffect(() => {
     drawParams.current.startTime = startTime
-  }, [drawParams.current, startTime])
+  }, [drawParams.current, dayRef.current, zoom, startTime])
 
   //
   // Draw calendar
@@ -89,24 +93,8 @@ const Calendar = ({ startTime, draggedAsset, events, setEvent }) => {
     ctx.clearRect(0, 0, canvas.width, canvas.height)
 
     drawMarks(ctx, drawParams)
-
-    for (const event of events) {
-      const { start, title, duration } = event
-
-      if (draggedEvent?.id === event?.id) continue
-
-      const startPos = time2pos(start * 1000)
-      ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
-      ctx.fillRect(
-        startPos.x + 10,
-        startPos.y,
-        dayWidth - 10,
-        hourHeight * (event.duration / 3600)
-      )
-
-      ctx.font = '12px Arial'
-      ctx.fillStyle = '#fff'
-      ctx.fillText(title, startPos.x + 15, startPos.y + 15)
+    if (eventsRef.current) {
+      drawEvents(ctx, drawParams, eventsRef.current, draggedEvent)
     }
 
     if (currentTime && mousePos) {
@@ -149,7 +137,7 @@ const Calendar = ({ startTime, draggedAsset, events, setEvent }) => {
           timePos.x + 10,
           timePos.y,
           dayWidth - 10,
-          hourHeight * (draggedEvent.duration / 3600)
+          hourHeight * ((draggedEvent.duration || 300) / 3600)
         )
         ctx.fill()
       }
@@ -165,6 +153,7 @@ const Calendar = ({ startTime, draggedAsset, events, setEvent }) => {
   }, [currentTime, events])
 
   const onMouseMove = (e) => {
+    const { pos2time } = drawParams.current
     if (!calendarRef?.current) {
       return
     }
@@ -287,6 +276,8 @@ const Calendar = ({ startTime, draggedAsset, events, setEvent }) => {
       </div>
       <div className="calendar-footer">
         <ZoomControl zoom={zoom} setZoom={setZoom} />
+        {draggedAsset && <span>{draggedAsset.title}</span>}
+        {draggedEvent && <span>{draggedEvent.title}</span>}
       </div>
     </CalendarWrapper>
   )
diff --git a/frontend/src/containers/Calendar/drawEvents.js b/frontend/src/containers/Calendar/drawEvents.js
new file mode 100644
index 00000000..6296d6a2
--- /dev/null
+++ b/frontend/src/containers/Calendar/drawEvents.js
@@ -0,0 +1,44 @@
+const drawEvents = (ctx, drawParams, events, draggedEvent) => {
+  const { dayWidth, hourHeight, time2pos } = drawParams.current
+  const maxY = ctx.canvas.height
+
+  let i = 0
+  for (const event of events) {
+    const { start, title, duration } = event
+    const nextEvent = events[i + 1]
+    const nextStart = nextEvent?.start || start + duration
+
+    i += 1
+    if (draggedEvent?.id === event?.id) continue
+
+    const startPos = time2pos(start * 1000)
+    const endPos = time2pos(nextStart * 1000)
+    const eventDuration = (nextStart - start) * 1000
+
+    const gradientEnd = endPos.x > startPos.x ? maxY : endPos.y
+    const eventHeight =
+      endPos.x > startPos.x
+        ? maxY - startPos.y
+        : (eventDuration / 3600) * hourHeight
+
+    // Set the fill style to the gradient
+
+    const usedHeight = hourHeight * (duration / 3600)
+    const gradient = ctx.createLinearGradient(0, startPos.y, 0, gradientEnd)
+    gradient.addColorStop(0, '#885bff')
+    gradient.addColorStop(1, 'transparent')
+
+    ctx.fillStyle = gradient
+    ctx.fillRect(startPos.x + 10, startPos.y, dayWidth - 10, eventHeight)
+
+    ctx.fillStyle = duration - 30 > nextStart - start ? '#ff2404' : '#5fff5f'
+
+    ctx.fillRect(startPos.x + 10, startPos.y, 3, usedHeight)
+
+    ctx.font = '12px Arial'
+    ctx.fillStyle = '#fff'
+    ctx.fillText(title, startPos.x + 15, startPos.y + 15)
+  }
+}
+
+export default drawEvents
diff --git a/frontend/src/containers/Calendar/drawing.js b/frontend/src/containers/Calendar/drawMarks.js
similarity index 91%
rename from frontend/src/containers/Calendar/drawing.js
rename to frontend/src/containers/Calendar/drawMarks.js
index 8c524953..edcc2f22 100644
--- a/frontend/src/containers/Calendar/drawing.js
+++ b/frontend/src/containers/Calendar/drawMarks.js
@@ -2,8 +2,8 @@ const drawMarks = (ctx, drawParams) => {
   const { dayWidth, hourHeight, startTime, pos2time, time2pos } =
     drawParams.current
 
-  const startHour = startTime.getHours()
-  const startMinute = startTime.getMinutes()
+  const startHour = startTime?.getHours() || 0
+  const startMinute = startTime?.getMinutes() || 0
 
   const firstTime = new Date(startTime)
   firstTime.setMinutes(startMinute + ((15 - (startMinute % 15)) % 15))
@@ -44,4 +44,4 @@ const drawMarks = (ctx, drawParams) => {
   }
 }
 
-export { drawMarks }
+export default drawMarks

From 8ae0d069fb3f980a946905805080aad5af0563d0 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Mon, 7 Oct 2024 22:49:41 +0200
Subject: [PATCH 13/41] chore: linting

---
 backend/setup/metatypes.py                 | 2 +-
 frontend/src/containers/Calendar/index.jsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/backend/setup/metatypes.py b/backend/setup/metatypes.py
index 77ffa4fe..3618aeed 100644
--- a/backend/setup/metatypes.py
+++ b/backend/setup/metatypes.py
@@ -15,7 +15,7 @@ async def setup_metatypes(meta_types: dict[str, Any], db: DatabaseConnection) ->
         aliases[lang] = {}
         trans_table_fname = os.path.join("schema", f"meta-aliases-{lang}.json")
 
-        async with aiofiles.open(trans_table_fname, "r") as f:
+        async with aiofiles.open(trans_table_fname) as f:
             adata = json_loads(await f.read())
 
         for key, alias, header, description in adata:
diff --git a/frontend/src/containers/Calendar/index.jsx b/frontend/src/containers/Calendar/index.jsx
index 315cefb7..4bf6abe9 100644
--- a/frontend/src/containers/Calendar/index.jsx
+++ b/frontend/src/containers/Calendar/index.jsx
@@ -1,2 +1,2 @@
-import Calendar from './Calendar';
-export default Calendar;
+import Calendar from './Calendar'
+export default Calendar

From 6dbb295cbadcd3c5e943e1270af40962e70089fe Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Tue, 8 Oct 2024 20:49:15 +0200
Subject: [PATCH 14/41] fix: dragging events

---
 frontend/src/containers/Calendar/Calendar.jsx | 89 +++++++++++++++----
 1 file changed, 72 insertions(+), 17 deletions(-)

diff --git a/frontend/src/containers/Calendar/Calendar.jsx b/frontend/src/containers/Calendar/Calendar.jsx
index 5aebdd57..4a302d60 100644
--- a/frontend/src/containers/Calendar/Calendar.jsx
+++ b/frontend/src/containers/Calendar/Calendar.jsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { useRef, useEffect, useState, useCallback } from 'react'
+import { useRef, useMemo, useEffect, useState, useCallback } from 'react'
 import CalendarWrapper from './CalendarWrapper'
 import ZoomControl from './ZoomControl'
 import { useDroppable } from '@dnd-kit/core'
@@ -11,6 +11,7 @@ const CalendarCanvas = styled.canvas`
 `
 
 const CLOCK_WIDTH = 40
+const DRAG_THRESHOLD = 20
 
 const Calendar = ({ startTime, draggedAsset, events, setEvent }) => {
   const calendarRef = useRef(null)
@@ -21,16 +22,32 @@ const Calendar = ({ startTime, draggedAsset, events, setEvent }) => {
   const [zoom, setZoom] = useState(1)
   const [currentTime, setCurrentTime] = useState(null)
   const [mousePos, setMousePos] = useState(null)
+
+  // Reference to events
+
+  useEffect(() => {
+    eventsRef.current = events
+  }, [events])
+
+  // Dragging support
+
   const [draggedEvent, setDraggedEvent] = useState(null)
+  const initialMousePos = useRef(null)
+  const lastClickedEvent = useRef(null)
 
   // Drawing parameters
 
   const drawParams = useRef({})
   const eventsRef = useRef([])
 
-  useEffect(() => {
-    eventsRef.current = events
-  }, [events])
+  // Time functions
+
+  const dayStartOffsetSeconds = useMemo(() => {
+    const midnight = new Date(startTime)
+    midnight.setHours(0, 0, 0, 0)
+    const offset = (startTime.getTime() - midnight.getTime()) / 1000
+    return offset
+  }, [startTime])
 
   const pos2time = (x, y) => {
     if (x < CLOCK_WIDTH) return null
@@ -57,19 +74,34 @@ const Calendar = ({ startTime, draggedAsset, events, setEvent }) => {
   const eventAtPos = () => {
     if (!currentTime) return null
     const currentTs = currentTime.getTime() / 1000
+    const currentMidnight = new Date((currentTs - dayStartOffsetSeconds) * 1000)
+    currentMidnight.setHours(0, 0, 0, 0)
+
     let i = 0
     for (const event of events) {
       i += 1
       const { start, duration, title } = event
+
       const nextEvent = events[i]
       const nextStart = nextEvent?.start || start + duration
       if (currentTs >= start && currentTs <= nextStart) {
+        // skip events that are not on the current day
+        // (empty space at the beginning of the day)
+        if (
+          new Date((start - dayStartOffsetSeconds) * 1000).getDate() !==
+          currentMidnight.getDate()
+        ) {
+          continue
+        }
+
         return event
       }
     }
     return null
   }
 
+  // Update drawParams reference
+
   useEffect(() => {
     if (!dayRef.current) return
     if (!startTime) return
@@ -144,40 +176,56 @@ const Calendar = ({ startTime, draggedAsset, events, setEvent }) => {
     }
   }
 
-  //
-  // Event handlers
-  //
+  // When to draw?
 
   useEffect(() => {
     drawCalendar()
   }, [currentTime, events])
 
+  // Event handlers
+
   const onMouseMove = (e) => {
+    if (!calendarRef?.current) return
+
+    // get pos2time from drawParams to avoid stale closure
     const { pos2time } = drawParams.current
-    if (!calendarRef?.current) {
-      return
-    }
 
+    // Calculate mouse position
     const rect = calendarRef.current.getBoundingClientRect()
     const x = e.clientX - rect.left
     const y = e.clientY - rect.top
     const newTime = pos2time(x, y)
     setMousePos({ x, y })
 
+    // Update current time
+
     if (newTime !== currentTime) {
       setCurrentTime(newTime)
     }
-  }
+
+    // Start dragging after reaching some distance
+
+    if (initialMousePos.current) {
+      const distance = Math.sqrt(
+        Math.pow(x - initialMousePos.current.x, 2) +
+          Math.pow(y - initialMousePos.current.y, 2)
+      )
+      if (distance > DRAG_THRESHOLD) {
+        setDraggedEvent(lastClickedEvent.current)
+      } else {
+        setDraggedEvent(null)
+      }
+    } // start dragging
+  } // onMouseMove
 
   //
-  // Mouse position within the calendar (Track current time)
+  // Clicking
   //
 
   const onMouseUp = (e) => {
-    console.log('mouseup', e)
     if (!calendarRef?.current) return
     if (draggedAsset && currentTime) {
-      console.log('Dropped', draggedAsset, currentTime)
+      console.log('Dropped asset', draggedAsset, currentTime)
       setEvent({
         id_asset: draggedAsset.id,
         start: currentTime.getTime() / 1000,
@@ -192,14 +240,21 @@ const Calendar = ({ startTime, draggedAsset, events, setEvent }) => {
     }
 
     setDraggedEvent(null)
+    lastClickedEvent.current = null
+    initialMousePos.current = null
   }
 
+  // Keep track where the mouse is
+  // and what event was clicked last
+
   const onMouseDown = (evt) => {
     const pos = { x: evt.clientX, y: evt.clientY }
+    const rect = calendarRef.current.getBoundingClientRect()
+    const x = evt.clientX - rect.left
+    const y = evt.clientY - rect.top
+    initialMousePos.current = { x, y }
     const event = eventAtPos(pos.x, pos.y)
-    if (event) {
-      setDraggedEvent(event)
-    }
+    if (event) lastClickedEvent.current = event
   }
 
   useEffect(() => {

From be3bb1961ed9050b379dcaadfc274b64ae0a3dc8 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Tue, 8 Oct 2024 21:07:34 +0200
Subject: [PATCH 15/41] fix: filter out out-of-bouds events

---
 frontend/src/pages/Scheduler/Scheduler.jsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/Scheduler/Scheduler.jsx b/frontend/src/pages/Scheduler/Scheduler.jsx
index d5f0b5d6..657ed9f5 100644
--- a/frontend/src/pages/Scheduler/Scheduler.jsx
+++ b/frontend/src/pages/Scheduler/Scheduler.jsx
@@ -13,22 +13,25 @@ const Scheduler = ({ draggedAsset }) => {
   const [startTime, setStartTime] = useState(getWeekStart())
   const [events, setEvents] = useState([])
 
+  const startTs = useMemo(() => startTime.getTime() / 1000, [startTime])
+
+  const onResponse = (response) => {
+    const events = response.data.events
+    setEvents(events.filter((e) => e.start >= startTs))
+  }
+
   const requestParams = {
     id_channel: 1,
     date: DateTime.fromJSDate(startTime).toFormat('yyyy-MM-dd'),
   }
 
   const loadEvents = () => {
-    nebula.request('scheduler', requestParams).then((response) => {
-      setEvents(response.data.events)
-    })
+    nebula.request('scheduler', requestParams).then(onResponse)
   }
 
   const setEvent = (event) => {
     const params = { ...requestParams, events: [event] }
-    nebula.request('scheduler', params).then((response) => {
-      setEvents(response.data.events)
-    })
+    nebula.request('scheduler', params).then(onResponse)
   }
 
   useEffect(() => {

From da22ce5bc22d01132693ff79cf0a8b6574c94305 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Tue, 8 Oct 2024 21:38:24 +0200
Subject: [PATCH 16/41] feat: event context menu (delete)

---
 frontend/src/components/ContextMenu.jsx       |  2 +-
 frontend/src/containers/Calendar/Calendar.jsx | 28 +++++++++++++++-
 frontend/src/pages/Scheduler/Scheduler.jsx    | 32 ++++++++++++++++++-
 3 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ContextMenu.jsx b/frontend/src/components/ContextMenu.jsx
index 4b39828a..603ac930 100644
--- a/frontend/src/components/ContextMenu.jsx
+++ b/frontend/src/components/ContextMenu.jsx
@@ -120,7 +120,7 @@ const ContextMenu = ({ target, options }) => {
             icon={option.icon}
             onClick={() => {
               setContextData({ ...contextData, visible: false })
-              option.onClick && option.onClick()
+              option.onClick && option.onClick(contextData)
             }}
           />
         </span>
diff --git a/frontend/src/containers/Calendar/Calendar.jsx b/frontend/src/containers/Calendar/Calendar.jsx
index 4a302d60..a7adc715 100644
--- a/frontend/src/containers/Calendar/Calendar.jsx
+++ b/frontend/src/containers/Calendar/Calendar.jsx
@@ -2,6 +2,7 @@ import styled from 'styled-components'
 import { useRef, useMemo, useEffect, useState, useCallback } from 'react'
 import CalendarWrapper from './CalendarWrapper'
 import ZoomControl from './ZoomControl'
+import ContextMenu from '/src/components/ContextMenu'
 import { useDroppable } from '@dnd-kit/core'
 import drawMarks from './drawMarks'
 import drawEvents from './drawEvents'
@@ -13,7 +14,13 @@ const CalendarCanvas = styled.canvas`
 const CLOCK_WIDTH = 40
 const DRAG_THRESHOLD = 20
 
-const Calendar = ({ startTime, draggedAsset, events, setEvent }) => {
+const Calendar = ({
+  startTime,
+  draggedAsset,
+  events,
+  setEvent,
+  contextMenu,
+}) => {
   const calendarRef = useRef(null)
   const dayRef = useRef(null)
   const wrapperRef = useRef(null)
@@ -302,6 +309,22 @@ const Calendar = ({ startTime, draggedAsset, events, setEvent }) => {
     }
   }, [wrapperRef.current])
 
+  const contextMenuItems = useCallback(() => {
+    const result = []
+    for (const item of contextMenu) {
+      result.push({
+        label: item.label,
+        icon: item.icon,
+        onClick: (e) => {
+          const event = eventAtPos(e.posX, e.posY)
+          if (!event) return
+          item.onClick(event)
+        },
+      })
+    }
+    return result
+  }, [contextMenu, eventAtPos])
+
   //
   // Render
   //
@@ -334,6 +357,9 @@ const Calendar = ({ startTime, draggedAsset, events, setEvent }) => {
         {draggedAsset && <span>{draggedAsset.title}</span>}
         {draggedEvent && <span>{draggedEvent.title}</span>}
       </div>
+      {contextMenuItems && (
+        <ContextMenu target={calendarRef} options={contextMenuItems} />
+      )}
     </CalendarWrapper>
   )
 }
diff --git a/frontend/src/pages/Scheduler/Scheduler.jsx b/frontend/src/pages/Scheduler/Scheduler.jsx
index 657ed9f5..c5f2b703 100644
--- a/frontend/src/pages/Scheduler/Scheduler.jsx
+++ b/frontend/src/pages/Scheduler/Scheduler.jsx
@@ -25,6 +25,10 @@ const Scheduler = ({ draggedAsset }) => {
     date: DateTime.fromJSDate(startTime).toFormat('yyyy-MM-dd'),
   }
 
+  //
+  // API calls
+  //
+
   const loadEvents = () => {
     nebula.request('scheduler', requestParams).then(onResponse)
   }
@@ -34,16 +38,41 @@ const Scheduler = ({ draggedAsset }) => {
     nebula.request('scheduler', params).then(onResponse)
   }
 
+  const deleteEvent = (eventId) => {
+    const params = { ...requestParams, delete: [eventId] }
+    nebula.request('scheduler', params).then(onResponse)
+  }
+
+  //
+  // Load data
+  //
+
   useEffect(() => {
     loadEvents()
   }, [startTime])
 
   useEffect(() => {
-    console.log('Week start time changed', startTime)
+    // console.log('Week start time changed', startTime)
     const pageTitle = createTitle(startTime)
     dispatch(setPageTitle({ title: pageTitle }))
   }, [startTime])
 
+  //
+  // Context menu
+  //
+
+  const contextMenu = [
+    {
+      label: 'Delete',
+      icon: 'delete',
+      onClick: (event) => deleteEvent(event.id),
+    },
+  ]
+
+  //
+  // Render
+  //
+
   return (
     <main className="column">
       <SchedulerNav startTime={startTime} setStartTime={setStartTime} />
@@ -53,6 +82,7 @@ const Scheduler = ({ draggedAsset }) => {
           events={events}
           setEvent={setEvent}
           draggedAsset={draggedAsset}
+          contextMenu={contextMenu}
         />
       </section>
     </main>

From 4997f291b56351bf7640152e1bf14cee18b329f8 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Wed, 9 Oct 2024 20:21:20 +0200
Subject: [PATCH 17/41] feat: add rangeslider and icon components

---
 frontend/src/components/Icon.jsx        |  9 +++++
 frontend/src/components/RangeSlider.jsx | 44 +++++++++++++++++++++++++
 frontend/src/components/index.jsx       | 20 ++++++-----
 3 files changed, 64 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/components/Icon.jsx
 create mode 100644 frontend/src/components/RangeSlider.jsx

diff --git a/frontend/src/components/Icon.jsx b/frontend/src/components/Icon.jsx
new file mode 100644
index 00000000..69108b68
--- /dev/null
+++ b/frontend/src/components/Icon.jsx
@@ -0,0 +1,9 @@
+const Icon = ({ icon, style }) => {
+  return (
+    <span className="icon material-symbols-outlined" style={style}>
+      {icon}
+    </span>
+  )
+}
+
+export default Icon
diff --git a/frontend/src/components/RangeSlider.jsx b/frontend/src/components/RangeSlider.jsx
new file mode 100644
index 00000000..50ae9d43
--- /dev/null
+++ b/frontend/src/components/RangeSlider.jsx
@@ -0,0 +1,44 @@
+import { forwardRef } from 'react'
+import styled from 'styled-components'
+import defaultTheme from './theme'
+
+const StyledRange = styled.input`
+  border: 0;
+  border-radius: ${(props) => props.theme.inputBorderRadius};
+  background: ${(props) => props.theme.inputBackground};
+
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+
+  cursor: pointer;
+  width: 150px;
+  outline: none;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: ${(props) => props.theme.colors.surface08};
+  }
+
+  &::-webkit-slider-runnable-track {
+    width: 100%;
+    cursor: pointer;
+    background: ${(props) => props.theme.colors.surface04};
+    border-radius: 8px;
+  }
+`
+
+StyledRange.defaultProps = {
+  theme: defaultTheme,
+  type: 'range',
+}
+
+const RangeSlider = forwardRef((props, ref) => {
+  return <StyledRange ref={ref} type="range" {...props} />
+})
+
+export default RangeSlider
diff --git a/frontend/src/components/index.jsx b/frontend/src/components/index.jsx
index 9b574baa..6ea033d5 100644
--- a/frontend/src/components/index.jsx
+++ b/frontend/src/components/index.jsx
@@ -1,22 +1,24 @@
-export { default as Table } from './table'
+export { default as Button } from './Button'
+export { default as Canvas } from './Canvas'
+export { default as DatePicker } from './DatePicker'
 export { default as Dialog } from './Dialog'
 export { default as Dropdown } from './Dropdown'
 export { default as ErrorBanner } from './ErrorBanner'
-export { default as Loader } from './Loader'
-export { default as Progress } from './Progress'
-export { default as Select } from './Select'
-export { default as SelectDialog } from './SelectDialog'
+export { default as Icon } from './Icon'
 export { default as InputDatetime } from './InputDatetime'
 export { default as InputInteger } from './InputInteger'
 export { default as InputNumber } from './InputNumber'
 export { default as InputPassword } from './InputPassword'
+export { default as InputSwitch } from './InputSwitch'
 export { default as InputText } from './InputText'
 export { default as InputTimecode } from './InputTimecode'
-export { default as InputSwitch } from './InputSwitch'
+export { default as Loader } from './Loader'
+export { default as Progress } from './Progress'
+export { default as RangeSlider } from './RangeSlider'
+export { default as Select } from './Select'
+export { default as SelectDialog } from './SelectDialog'
+export { default as Table } from './table'
 export { default as TextArea } from './TextArea'
-export { default as Button } from './Button'
-export { default as DatePicker } from './DatePicker'
-export { default as Canvas } from './Canvas'
 
 export { DateTime, Timestamp } from './Fields'
 export { Form, FormRow } from './Form'

From 85d697b39604fabbc69535171faa6ac7d6849a3b Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Wed, 9 Oct 2024 20:21:47 +0200
Subject: [PATCH 18/41] fix: styling & event jumping

---
 frontend/src/containers/Calendar/Calendar.jsx |  2 --
 .../containers/Calendar/CalendarWrapper.jsx   |  9 +++--
 .../src/containers/Calendar/ZoomControl.jsx   | 34 ++++++++++++++-----
 frontend/src/pages/MAMPage.jsx                |  2 +-
 frontend/src/pages/Scheduler/Scheduler.jsx    |  9 +++++
 5 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/frontend/src/containers/Calendar/Calendar.jsx b/frontend/src/containers/Calendar/Calendar.jsx
index a7adc715..83396f18 100644
--- a/frontend/src/containers/Calendar/Calendar.jsx
+++ b/frontend/src/containers/Calendar/Calendar.jsx
@@ -354,8 +354,6 @@ const Calendar = ({
       </div>
       <div className="calendar-footer">
         <ZoomControl zoom={zoom} setZoom={setZoom} />
-        {draggedAsset && <span>{draggedAsset.title}</span>}
-        {draggedEvent && <span>{draggedEvent.title}</span>}
       </div>
       {contextMenuItems && (
         <ContextMenu target={calendarRef} options={contextMenuItems} />
diff --git a/frontend/src/containers/Calendar/CalendarWrapper.jsx b/frontend/src/containers/Calendar/CalendarWrapper.jsx
index 6750b017..d3736903 100644
--- a/frontend/src/containers/Calendar/CalendarWrapper.jsx
+++ b/frontend/src/containers/Calendar/CalendarWrapper.jsx
@@ -5,7 +5,7 @@ const CalendarWrapper = styled.div`
   flex-grow: 1;
   flex-direction: column;
   font-family: Arial;
-  background-color: #19161f;
+  gap: 6px;
 
   .calendar-header {
     user-select: none;
@@ -18,9 +18,12 @@ const CalendarWrapper = styled.div`
 
     .calendar-day {
       flex: 1;
-      padding: 8px 2px;
-      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 6px 0;
       color: #c0c0c0;
+      font-weight: bold;
     }
   }
 
diff --git a/frontend/src/containers/Calendar/ZoomControl.jsx b/frontend/src/containers/Calendar/ZoomControl.jsx
index d29f96ca..76ad1b13 100644
--- a/frontend/src/containers/Calendar/ZoomControl.jsx
+++ b/frontend/src/containers/Calendar/ZoomControl.jsx
@@ -1,13 +1,31 @@
+import { RangeSlider, Icon } from '/src/components'
+
 const ZoomControl = ({ zoom, setZoom }) => {
+  const divStyle = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '5px',
+    width: 200,
+  }
+
+  const iconStyle = {
+    fontSize: '1rem',
+  }
+
   return (
-    <input
-      type="range"
-      min="1"
-      max="5"
-      step=".4"
-      onChange={(e) => setZoom(e.target.value)}
-      value={zoom}
-    />
+    <div style={divStyle}>
+      <Icon icon="zoom_out_map" style={iconStyle} />
+      <RangeSlider
+        min="1"
+        max="5"
+        step=".4"
+        onChange={(e) => setZoom(e.target.value)}
+        value={zoom}
+      />
+      <Icon icon="zoom_in_map" style={iconStyle} />
+    </div>
   )
 }
 
diff --git a/frontend/src/pages/MAMPage.jsx b/frontend/src/pages/MAMPage.jsx
index 89f69f70..94f4643f 100644
--- a/frontend/src/pages/MAMPage.jsx
+++ b/frontend/src/pages/MAMPage.jsx
@@ -30,7 +30,7 @@ const MAMContainer = styled.div`
   .__dbk__child-wrapper {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: var(--section-gap);
     min-width: 400px;
   }
 
diff --git a/frontend/src/pages/Scheduler/Scheduler.jsx b/frontend/src/pages/Scheduler/Scheduler.jsx
index c5f2b703..bd412595 100644
--- a/frontend/src/pages/Scheduler/Scheduler.jsx
+++ b/frontend/src/pages/Scheduler/Scheduler.jsx
@@ -34,6 +34,15 @@ const Scheduler = ({ draggedAsset }) => {
   }
 
   const setEvent = (event) => {
+    // Prevent jumping during server-side update
+    if (event.id) {
+      for (let i = 0; i < events.length; i++) {
+        if (events[i].id === event.id) {
+          events[i] = event
+          break
+        }
+      }
+    }
     const params = { ...requestParams, events: [event] }
     nebula.request('scheduler', params).then(onResponse)
   }

From b490686527c5a189c7448c233148b129b02385b3 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Wed, 9 Oct 2024 20:50:18 +0200
Subject: [PATCH 19/41] feat: highlight past/future days in calendar

---
 frontend/src/containers/Calendar/Calendar.jsx | 57 ++++++++++++++++---
 .../containers/Calendar/CalendarWrapper.jsx   |  1 -
 .../src/containers/Calendar/ZoomControl.jsx   |  4 +-
 3 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/frontend/src/containers/Calendar/Calendar.jsx b/frontend/src/containers/Calendar/Calendar.jsx
index 83396f18..65ef7d91 100644
--- a/frontend/src/containers/Calendar/Calendar.jsx
+++ b/frontend/src/containers/Calendar/Calendar.jsx
@@ -3,9 +3,9 @@ import { useRef, useMemo, useEffect, useState, useCallback } from 'react'
 import CalendarWrapper from './CalendarWrapper'
 import ZoomControl from './ZoomControl'
 import ContextMenu from '/src/components/ContextMenu'
-import { useDroppable } from '@dnd-kit/core'
 import drawMarks from './drawMarks'
 import drawEvents from './drawEvents'
+import { useLocalStorage } from '/src/hooks'
 
 const CalendarCanvas = styled.canvas`
   background-color: #24202e;
@@ -26,7 +26,7 @@ const Calendar = ({
   const wrapperRef = useRef(null)
 
   const [scrollbarWidth, setScrollbarWidth] = useState(0)
-  const [zoom, setZoom] = useState(1)
+  const [zoom, setZoom] = useLocalStorage(1)
   const [currentTime, setCurrentTime] = useState(null)
   const [mousePos, setMousePos] = useState(null)
 
@@ -329,18 +329,57 @@ const Calendar = ({
   // Render
   //
 
+  const dstyles = useMemo(() => {
+    const weekStartTs = startTime.getTime() / 1000
+    const todayStartTs =
+      new Date().setHours(0, 0, 0, 0) / 1000 + dayStartOffsetSeconds
+
+    const dayStyles = []
+    for (let i = 0; i < 7; i++) {
+      const dayStartTs = weekStartTs + i * 24 * 3600
+
+      if (todayStartTs === dayStartTs) {
+        dayStyles.push({
+          borderBottom: '1px solid var(--color-text)',
+          fontWeight: 'bold',
+        })
+        continue
+      }
+
+      const color =
+        todayStartTs > dayStartTs ? 'var(--color-red)' : 'var(--color-green)'
+      const style = {
+        borderBottom: `1px solid ${color}`,
+      }
+      dayStyles.push(style)
+    }
+    return dayStyles
+  }, [startTime])
+
   return (
     <CalendarWrapper scrollbarWidth={scrollbarWidth} clockWidth={CLOCK_WIDTH}>
       <div className="calendar-header">
-        <div className="calendar-day" ref={dayRef}>
+        <div className="calendar-day" style={dstyles[0]} ref={dayRef}>
           Monday
         </div>
-        <div className="calendar-day">Tuesday</div>
-        <div className="calendar-day">Wednesday</div>
-        <div className="calendar-day">Thursday</div>
-        <div className="calendar-day">Friday</div>
-        <div className="calendar-day">Saturday</div>
-        <div className="calendar-day">Sunday</div>
+        <div className="calendar-day" style={dstyles[1]}>
+          Tuesday
+        </div>
+        <div className="calendar-day" style={dstyles[2]}>
+          Wednesday
+        </div>
+        <div className="calendar-day" style={dstyles[3]}>
+          Thursday
+        </div>
+        <div className="calendar-day" style={dstyles[4]}>
+          Friday
+        </div>
+        <div className="calendar-day" style={dstyles[5]}>
+          Saturday
+        </div>
+        <div className="calendar-day" style={dstyles[6]}>
+          Sunday
+        </div>
       </div>
       <div className="calendar-body">
         <div className="calendar-body-wrapper" ref={wrapperRef}>
diff --git a/frontend/src/containers/Calendar/CalendarWrapper.jsx b/frontend/src/containers/Calendar/CalendarWrapper.jsx
index d3736903..736aeec3 100644
--- a/frontend/src/containers/Calendar/CalendarWrapper.jsx
+++ b/frontend/src/containers/Calendar/CalendarWrapper.jsx
@@ -23,7 +23,6 @@ const CalendarWrapper = styled.div`
       justify-content: center;
       padding: 6px 0;
       color: #c0c0c0;
-      font-weight: bold;
     }
   }
 
diff --git a/frontend/src/containers/Calendar/ZoomControl.jsx b/frontend/src/containers/Calendar/ZoomControl.jsx
index 76ad1b13..1e1a21a1 100644
--- a/frontend/src/containers/Calendar/ZoomControl.jsx
+++ b/frontend/src/containers/Calendar/ZoomControl.jsx
@@ -19,8 +19,8 @@ const ZoomControl = ({ zoom, setZoom }) => {
       <Icon icon="zoom_out_map" style={iconStyle} />
       <RangeSlider
         min="1"
-        max="5"
-        step=".4"
+        max="4"
+        step=".1"
         onChange={(e) => setZoom(e.target.value)}
         value={zoom}
       />

From c2facf3f269f2141c3bf3147525d4b3463ebb6a3 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Wed, 9 Oct 2024 20:57:30 +0200
Subject: [PATCH 20/41] feat: persist calendar scroll position

---
 frontend/src/containers/Calendar/Calendar.jsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/src/containers/Calendar/Calendar.jsx b/frontend/src/containers/Calendar/Calendar.jsx
index 65ef7d91..14f5b1aa 100644
--- a/frontend/src/containers/Calendar/Calendar.jsx
+++ b/frontend/src/containers/Calendar/Calendar.jsx
@@ -27,6 +27,7 @@ const Calendar = ({
 
   const [scrollbarWidth, setScrollbarWidth] = useState(0)
   const [zoom, setZoom] = useLocalStorage(1)
+  const [scrollPosition, setScrollPosition] = useLocalStorage(0)
   const [currentTime, setCurrentTime] = useState(null)
   const [mousePos, setMousePos] = useState(null)
 
@@ -294,7 +295,6 @@ const Calendar = ({
   }
 
   useEffect(() => {
-    console.log('Zoom', zoom)
     resizeCanvas()
   }, [zoom])
 
@@ -325,6 +325,17 @@ const Calendar = ({
     return result
   }, [contextMenu, eventAtPos])
 
+  const onScroll = (e) => {
+    setScrollPosition(e.target.scrollTop)
+  }
+
+  useEffect(() => {
+    if (!wrapperRef.current) return
+    if (wrapperRef.current.scrollTop !== scrollPosition) {
+      wrapperRef.current.scrollTop = scrollPosition
+    }
+  }, [scrollPosition])
+
   //
   // Render
   //
@@ -382,7 +393,11 @@ const Calendar = ({
         </div>
       </div>
       <div className="calendar-body">
-        <div className="calendar-body-wrapper" ref={wrapperRef}>
+        <div
+          className="calendar-body-wrapper"
+          ref={wrapperRef}
+          onScroll={onScroll}
+        >
           <CalendarCanvas
             id="calendar"
             ref={calendarRef}

From 4c01709823a49a23613c563f42a75a0cca8c4d14 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Wed, 9 Oct 2024 21:12:57 +0200
Subject: [PATCH 21/41] refactor: separate MetadataEditor container

---
 .../MetadataEditor.jsx}                             | 13 +++++++------
 frontend/src/pages/AssetEditor/AssetEditor.jsx      |  8 ++++----
 2 files changed, 11 insertions(+), 10 deletions(-)
 rename frontend/src/{pages/AssetEditor/EditorForm.jsx => containers/MetadataEditor.jsx} (95%)

diff --git a/frontend/src/pages/AssetEditor/EditorForm.jsx b/frontend/src/containers/MetadataEditor.jsx
similarity index 95%
rename from frontend/src/pages/AssetEditor/EditorForm.jsx
rename to frontend/src/containers/MetadataEditor.jsx
index ccce92bc..3a1d25e2 100644
--- a/frontend/src/pages/AssetEditor/EditorForm.jsx
+++ b/frontend/src/containers/MetadataEditor.jsx
@@ -137,20 +137,21 @@ const EditorField = ({
   )
 }
 
-const EditorForm = ({
+const MetadataEditor = ({
   originalData,
-  assetData,
-  setAssetData,
+  objectData,
+  setObjectData,
   fields,
   onSave,
   disabled,
 }) => {
   const onFieldChanged = (key, value) =>
-    setAssetData((o) => {
+    setObjectData((o) => {
       return { ...o, [key]: value }
     })
 
   function handleKeyDown(event) {
+    if (!onSave) return
     if (event.ctrlKey && event.key === 's') {
       event.preventDefault() // prevent default browser behavior (saving the page)
       onSave()
@@ -163,7 +164,7 @@ const EditorForm = ({
         <EditorField
           key={field.name}
           field={field}
-          value={assetData[field.name]}
+          value={objectData[field.name]}
           originalValue={originalData[field.name]}
           onFieldChanged={onFieldChanged}
           disabled={disabled}
@@ -173,4 +174,4 @@ const EditorForm = ({
   )
 }
 
-export default EditorForm
+export default MetadataEditor
diff --git a/frontend/src/pages/AssetEditor/AssetEditor.jsx b/frontend/src/pages/AssetEditor/AssetEditor.jsx
index 9244e8b3..2ad0b340 100644
--- a/frontend/src/pages/AssetEditor/AssetEditor.jsx
+++ b/frontend/src/pages/AssetEditor/AssetEditor.jsx
@@ -17,7 +17,7 @@ import {
 import { Loader } from '/src/components'
 
 import AssetEditorNav from './EditorNav'
-import EditorForm from './EditorForm'
+import MetadataEditor from '/src/containers/MetadataEditor'
 import Preview from './Preview'
 
 const getEnabledActions = ({ assetData, isChanged }) => {
@@ -327,11 +327,11 @@ const AssetEditor = () => {
                     <Loader />
                   </div>
                 )}
-                <EditorForm
+                <MetadataEditor
                   onSave={onSave}
                   originalData={originalData}
-                  assetData={assetData}
-                  setAssetData={setAssetData}
+                  objectData={assetData}
+                  setObjectData={setAssetData}
                   fields={fields}
                   disabled={!enabledActions.edit}
                 />

From 22d74ffa608f8554bf170873fd9b154a48a56ce4 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Wed, 9 Oct 2024 21:35:13 +0200
Subject: [PATCH 22/41] feat: EventDialog w.i.p

---
 frontend/src/pages/Scheduler/EventDialog.jsx | 35 ++++++++++++++++++++
 frontend/src/pages/Scheduler/Scheduler.jsx   | 14 ++++++++
 2 files changed, 49 insertions(+)
 create mode 100644 frontend/src/pages/Scheduler/EventDialog.jsx

diff --git a/frontend/src/pages/Scheduler/EventDialog.jsx b/frontend/src/pages/Scheduler/EventDialog.jsx
new file mode 100644
index 00000000..614f73d1
--- /dev/null
+++ b/frontend/src/pages/Scheduler/EventDialog.jsx
@@ -0,0 +1,35 @@
+import React, { useMemo } from 'react'
+import { Dialog } from '/src/components'
+import MetadataEditor from '/src/containers/MetadataEditor'
+import nebula from '/src/nebula'
+
+const EventDialog = ({ data, setData, onHide }) => {
+  const header = useMemo(() => {
+    if (data.title) return data.title
+    if (!data.id) return 'New Event'
+    return '???'
+  }, [data])
+
+  const originalData = useMemo(() => {
+    return data
+  }, [])
+
+  const fields = useMemo(() => {
+    return nebula.settings.playout_channels[0].fields
+  }, [])
+
+  console.log(data)
+  console.log(fields)
+
+  return (
+    <Dialog header={header} onHide={onHide} style={{ minWidth: 600 }}>
+      <MetadataEditor
+        objectData={data}
+        originalData={originalData}
+        setObjectData={setData}
+        fields={fields}
+      />
+    </Dialog>
+  )
+}
+export default EventDialog
diff --git a/frontend/src/pages/Scheduler/Scheduler.jsx b/frontend/src/pages/Scheduler/Scheduler.jsx
index bd412595..00a8e4ae 100644
--- a/frontend/src/pages/Scheduler/Scheduler.jsx
+++ b/frontend/src/pages/Scheduler/Scheduler.jsx
@@ -4,6 +4,7 @@ import { setPageTitle } from '/src/actions'
 
 import Calendar from '/src/containers/Calendar'
 import SchedulerNav from './SchedulerNav'
+import EventDialog from './EventDialog'
 import { getWeekStart, createTitle } from './utils'
 import nebula from '/src/nebula'
 import { DateTime } from 'luxon'
@@ -12,6 +13,7 @@ const Scheduler = ({ draggedAsset }) => {
   const dispatch = useDispatch()
   const [startTime, setStartTime] = useState(getWeekStart())
   const [events, setEvents] = useState([])
+  const [editorData, setEditorData] = useState(null)
 
   const startTs = useMemo(() => startTime.getTime() / 1000, [startTime])
 
@@ -71,6 +73,11 @@ const Scheduler = ({ draggedAsset }) => {
   //
 
   const contextMenu = [
+    {
+      label: 'Edit',
+      icon: 'edit',
+      onClick: (event) => setEditorData(event),
+    },
     {
       label: 'Delete',
       icon: 'delete',
@@ -94,6 +101,13 @@ const Scheduler = ({ draggedAsset }) => {
           contextMenu={contextMenu}
         />
       </section>
+      {editorData && (
+        <EventDialog
+          data={editorData}
+          setData={setEditorData}
+          onHide={() => setEditorData()}
+        />
+      )}
     </main>
   )
 }

From bc679f85ea1f539abc468a4aee47c3b8f1a90a67 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Wed, 9 Oct 2024 23:05:32 +0200
Subject: [PATCH 23/41] chore: misc fixes

---
 frontend/src/components/Dialog.jsx            | 22 ++++++-
 frontend/src/components/Icon.jsx              | 11 +++-
 frontend/src/containers/Calendar/Calendar.jsx | 57 +++++++++++--------
 frontend/src/containers/SendTo.jsx            | 15 ++++-
 frontend/src/pages/Scheduler/EventDialog.jsx  |  3 -
 5 files changed, 74 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/Dialog.jsx b/frontend/src/components/Dialog.jsx
index ae0014e7..a2610961 100644
--- a/frontend/src/components/Dialog.jsx
+++ b/frontend/src/components/Dialog.jsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react'
 import styled from 'styled-components'
+import clsx from 'clsx'
 
 const StyledDialog = styled.dialog`
   color: var(--color-text);
@@ -15,13 +16,28 @@ const StyledDialog = styled.dialog`
   max-height: 80%;
   border: none;
 
+  // Animated parameters
+
   transition: all 0.3s ease;
+  opacity: 0;
+  transform: scale(0.9);
 
   &::backdrop {
-    background-color: rgba(0, 0, 0, 0.6);
-    backdrop-filter: blur(2px);
+    background-color: rgba(0, 0, 0, 0);
+    backdrop-filter: none;
   }
 
+  &[open] {
+    opacity: 1;
+    transform: scale(1);
+    &::backdrop {
+      background-color: rgba(0, 0, 0, 0.6);
+      backdrop-filter: blur(2px);
+    }
+  }
+
+  // Guts
+
   header,
   footer {
     padding: 12px 6px;
@@ -97,7 +113,7 @@ const Dialog = ({
 
   return (
     <StyledDialog
-      className={className}
+      className={clsx(className, 'enter-active')}
       style={style}
       ref={dialogRef}
       onClick={onShadeClick}
diff --git a/frontend/src/components/Icon.jsx b/frontend/src/components/Icon.jsx
index 69108b68..35735209 100644
--- a/frontend/src/components/Icon.jsx
+++ b/frontend/src/components/Icon.jsx
@@ -1,8 +1,15 @@
+import styled from 'styled-components'
+
+const StyledIcon = styled.span`
+  user-select: none !important;
+  user-drag: none !important;
+`
+
 const Icon = ({ icon, style }) => {
   return (
-    <span className="icon material-symbols-outlined" style={style}>
+    <StyledIcon className="icon material-symbols-outlined" style={style}>
       {icon}
-    </span>
+    </StyledIcon>
   )
 }
 
diff --git a/frontend/src/containers/Calendar/Calendar.jsx b/frontend/src/containers/Calendar/Calendar.jsx
index 14f5b1aa..6c2394d2 100644
--- a/frontend/src/containers/Calendar/Calendar.jsx
+++ b/frontend/src/containers/Calendar/Calendar.jsx
@@ -12,7 +12,7 @@ const CalendarCanvas = styled.canvas`
 `
 
 const CLOCK_WIDTH = 40
-const DRAG_THRESHOLD = 20
+const DRAG_THRESHOLD = 10
 
 const Calendar = ({
   startTime,
@@ -39,9 +39,9 @@ const Calendar = ({
 
   // Dragging support
 
-  const [draggedEvent, setDraggedEvent] = useState(null)
   const initialMousePos = useRef(null)
   const lastClickedEvent = useRef(null)
+  const draggedEvent = useRef(null)
 
   // Drawing parameters
 
@@ -59,11 +59,12 @@ const Calendar = ({
 
   const pos2time = (x, y) => {
     if (x < CLOCK_WIDTH) return null
-    if (y < 0) return null
+    //if (y < 0) return null
+    const _y = Math.max(y, 1)
     const _x = x - CLOCK_WIDTH
     const { dayWidth, hourHeight } = drawParams.current
     if (!dayRef.current || !calendarRef.current) return null
-    let offsetSeconds = Math.floor((y / hourHeight) * 60 * 60) // vertical offset
+    let offsetSeconds = Math.floor((_y / hourHeight) * 60 * 60) // vertical offset
     offsetSeconds += Math.floor(_x / dayWidth) * 24 * 60 * 60 // day offset
     offsetSeconds = Math.round(offsetSeconds / 300) * 300 // round to 5 minutes
     const resultDate = new Date(startTime.getTime() + offsetSeconds * 1000)
@@ -134,7 +135,7 @@ const Calendar = ({
 
     drawMarks(ctx, drawParams)
     if (eventsRef.current) {
-      drawEvents(ctx, drawParams, eventsRef.current, draggedEvent)
+      drawEvents(ctx, drawParams, eventsRef.current, draggedEvent.current)
     }
 
     if (currentTime && mousePos) {
@@ -160,14 +161,12 @@ const Calendar = ({
           hourHeight * (draggedAsset.duration / 3600)
         )
         ctx.fill()
-      } else if (draggedEvent) {
+      } else if (draggedEvent.current) {
         ctx.fillStyle = '#cff'
         ctx.fillText(
-          `${Math.round(x)}:${Math.round(y)} ${currentTime.toLocaleString()}: ${
-            draggedEvent.title
-          }`,
-          x + 10,
-          y + 50
+          `${currentTime.toLocaleString()}: ${draggedEvent.current.title}`,
+          x + 20,
+          y + 30
         )
 
         const timePos = time2pos(currentTime)
@@ -177,7 +176,7 @@ const Calendar = ({
           timePos.x + 10,
           timePos.y,
           dayWidth - 10,
-          hourHeight * ((draggedEvent.duration || 300) / 3600)
+          hourHeight * ((draggedEvent.current.duration || 300) / 3600)
         )
         ctx.fill()
       }
@@ -196,32 +195,44 @@ const Calendar = ({
     if (!calendarRef?.current) return
 
     // get pos2time from drawParams to avoid stale closure
-    const { pos2time } = drawParams.current
+    const { pos2time, hourHeight } = drawParams.current
 
     // Calculate mouse position
     const rect = calendarRef.current.getBoundingClientRect()
     const x = e.clientX - rect.left
     const y = e.clientY - rect.top
-    const newTime = pos2time(x, y)
+
+    // TODO align yoffset based on y position (subtract on top, add on bottom)
+    const yoffset = draggedEvent.current
+      ? hourHeight * (Math.max(draggedEvent.current?.duration || 1200) / 7200)
+      : 0
+
+    //console.log('yoffset', yoffset)
+
+    let newTime = pos2time(x, y - yoffset)
     setMousePos({ x, y })
 
     // Update current time
 
+    // if (draggedEvent.current) {
+    //   newTime = new Date(newTime - draggedEvent.current.duration * 500)
+    // }
+
     if (newTime !== currentTime) {
       setCurrentTime(newTime)
     }
 
     // Start dragging after reaching some distance
 
-    if (initialMousePos.current) {
+    if (initialMousePos.current && !draggedEvent.current) {
       const distance = Math.sqrt(
         Math.pow(x - initialMousePos.current.x, 2) +
           Math.pow(y - initialMousePos.current.y, 2)
       )
       if (distance > DRAG_THRESHOLD) {
-        setDraggedEvent(lastClickedEvent.current)
+        draggedEvent.current = lastClickedEvent.current
       } else {
-        setDraggedEvent(null)
+        draggedEvent.current = null
       }
     } // start dragging
   } // onMouseMove
@@ -236,18 +247,18 @@ const Calendar = ({
       console.log('Dropped asset', draggedAsset, currentTime)
       setEvent({
         id_asset: draggedAsset.id,
-        start: currentTime.getTime() / 1000,
+        start: Math.floor(currentTime.getTime() / 1000),
       })
-    } else if (draggedEvent) {
-      console.log('Dropped event', draggedEvent)
+    } else if (draggedEvent.current) {
+      console.log('Dropped event', draggedEvent.current, currentTime)
 
       setEvent({
-        id: draggedEvent.id,
-        start: currentTime.getTime() / 1000,
+        id: draggedEvent.current.id,
+        start: Math.floor(currentTime.getTime() / 1000),
       })
     }
 
-    setDraggedEvent(null)
+    draggedEvent.current = null
     lastClickedEvent.current = null
     initialMousePos.current = null
   }
diff --git a/frontend/src/containers/SendTo.jsx b/frontend/src/containers/SendTo.jsx
index 50e63785..5537101b 100644
--- a/frontend/src/containers/SendTo.jsx
+++ b/frontend/src/containers/SendTo.jsx
@@ -9,9 +9,14 @@ const SendToDialogBody = ({ selectedAssets, onHide }) => {
   const [sendToOptions, setSendToOptions] = useState(null)
 
   const loadOptions = () => {
-    nebula.request('actions', { ids: selectedAssets }).then((response) => {
-      setSendToOptions(response.data.actions)
-    })
+    nebula
+      .request('actions', { ids: selectedAssets })
+      .then((response) => {
+        setSendToOptions(response.data.actions)
+      })
+      .catch((error) => {
+        sendToOptions([])
+      })
   }
 
   useEffect(() => {
@@ -64,6 +69,10 @@ const SendToDialogBody = ({ selectedAssets, onHide }) => {
       ? 'the asset'
       : `${selectedAssets.length} assets`
 
+  if (!sendToOptions) {
+    return
+  }
+
   return (
     <Dialog
       onHide={onHide}
diff --git a/frontend/src/pages/Scheduler/EventDialog.jsx b/frontend/src/pages/Scheduler/EventDialog.jsx
index 614f73d1..ba14ce1b 100644
--- a/frontend/src/pages/Scheduler/EventDialog.jsx
+++ b/frontend/src/pages/Scheduler/EventDialog.jsx
@@ -18,9 +18,6 @@ const EventDialog = ({ data, setData, onHide }) => {
     return nebula.settings.playout_channels[0].fields
   }, [])
 
-  console.log(data)
-  console.log(fields)
-
   return (
     <Dialog header={header} onHide={onHide} style={{ minWidth: 600 }}>
       <MetadataEditor

From e2fb1ff84862325be5ea41660046fb194b265f7b Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Thu, 10 Oct 2024 20:48:38 +0200
Subject: [PATCH 24/41] feat: EventDialog MVP

---
 frontend/src/pages/Scheduler/EventDialog.jsx | 18 +++++++++++++++---
 frontend/src/pages/Scheduler/Scheduler.jsx   | 20 ++++++++++++++++++--
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/Scheduler/EventDialog.jsx b/frontend/src/pages/Scheduler/EventDialog.jsx
index ba14ce1b..554a31be 100644
--- a/frontend/src/pages/Scheduler/EventDialog.jsx
+++ b/frontend/src/pages/Scheduler/EventDialog.jsx
@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react'
-import { Dialog } from '/src/components'
+import { Button, Dialog } from '/src/components'
 import MetadataEditor from '/src/containers/MetadataEditor'
 import nebula from '/src/nebula'
 
-const EventDialog = ({ data, setData, onHide }) => {
+const EventDialog = ({ data, setData, onHide, onSave }) => {
   const header = useMemo(() => {
     if (data.title) return data.title
     if (!data.id) return 'New Event'
@@ -18,8 +18,20 @@ const EventDialog = ({ data, setData, onHide }) => {
     return nebula.settings.playout_channels[0].fields
   }, [])
 
+  const footer = (
+    <>
+      <Button onClick={() => onHide()} label="Cancel" icon="close" />
+      <Button onClick={() => onSave(data)} label="Save" icon="check" />
+    </>
+  )
+
   return (
-    <Dialog header={header} onHide={onHide} style={{ minWidth: 600 }}>
+    <Dialog
+      header={header}
+      footer={footer}
+      onHide={onHide}
+      style={{ minWidth: 600, minHeight: 500 }}
+    >
       <MetadataEditor
         objectData={data}
         originalData={originalData}
diff --git a/frontend/src/pages/Scheduler/Scheduler.jsx b/frontend/src/pages/Scheduler/Scheduler.jsx
index 00a8e4ae..58070368 100644
--- a/frontend/src/pages/Scheduler/Scheduler.jsx
+++ b/frontend/src/pages/Scheduler/Scheduler.jsx
@@ -36,16 +36,31 @@ const Scheduler = ({ draggedAsset }) => {
   }
 
   const setEvent = (event) => {
+    const payload = {
+      start: event.start,
+      meta: {},
+    }
+
     // Prevent jumping during server-side update
     if (event.id) {
+      payload.id = event.id
       for (let i = 0; i < events.length; i++) {
         if (events[i].id === event.id) {
           events[i] = event
           break
         }
       }
+      // close event dialog if needed
+      setEditorData(null)
     }
-    const params = { ...requestParams, events: [event] }
+
+    for (const field of nebula.settings.playout_channels[0].fields) {
+      const key = field.name
+      if (event[key] === undefined) continue
+      payload.meta[key] = event[key]
+    }
+
+    const params = { ...requestParams, events: [payload] }
     nebula.request('scheduler', params).then(onResponse)
   }
 
@@ -105,7 +120,8 @@ const Scheduler = ({ draggedAsset }) => {
         <EventDialog
           data={editorData}
           setData={setEditorData}
-          onHide={() => setEditorData()}
+          onHide={() => setEditorData(null)}
+          onSave={setEvent}
         />
       )}
     </main>

From 24c10b74a9a690b748e79adba71963a69d3c8329 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Thu, 10 Oct 2024 22:02:02 +0200
Subject: [PATCH 25/41] feat(rundown): day-by-day navigation

---
 frontend/src/pages/MAMPage.jsx            | 12 +++--
 frontend/src/pages/Rundown/Rundown.jsx    | 19 ++++----
 frontend/src/pages/Rundown/RundownNav.jsx | 53 +++++++++++++++++++++++
 3 files changed, 72 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/pages/Rundown/RundownNav.jsx

diff --git a/frontend/src/pages/MAMPage.jsx b/frontend/src/pages/MAMPage.jsx
index 94f4643f..8b009338 100644
--- a/frontend/src/pages/MAMPage.jsx
+++ b/frontend/src/pages/MAMPage.jsx
@@ -105,7 +105,6 @@ const MAMPage = () => {
     if (searchParams.get('asset')) {
       const assetId = parseInt(searchParams.get('asset'))
       if (assetId === focusedAsset) return
-
       dispatch(setFocusedAsset(assetId))
       dispatch(setSelectedAssets([assetId]))
     }
@@ -114,10 +113,17 @@ const MAMPage = () => {
   useEffect(() => {
     if (focusedAsset === searchParams.get('asset')) return
     if (focusedAsset === null) {
-      setSearchParams({})
+      setSearchParams((o) => {
+        o.delete('asset')
+        return o
+      })
       return
     }
-    setSearchParams({ asset: focusedAsset })
+    console.log('set asset')
+    setSearchParams((o) => {
+      o.set('asset', focusedAsset)
+      return o
+    })
   }, [focusedAsset])
 
   //
diff --git a/frontend/src/pages/Rundown/Rundown.jsx b/frontend/src/pages/Rundown/Rundown.jsx
index d5da3731..cc0307b6 100644
--- a/frontend/src/pages/Rundown/Rundown.jsx
+++ b/frontend/src/pages/Rundown/Rundown.jsx
@@ -1,15 +1,16 @@
-import { useEffect } from 'react'
-import { useDispatch } from 'react-redux'
-import { setPageTitle } from '/src/actions'
+import { useState, useEffect, useMemo } from 'react'
 
-const Rundown = () => {
-  const dispatch = useDispatch()
+import RundownNav from './RundownNav'
 
-  useEffect(() => {
-    dispatch(setPageTitle({ title: 'Scheduler' }))
-  }, [])
+const Rundown = () => {
+  const [startTime, setStartTime] = useState(null)
 
-  return <h1>not implemented</h1>
+  return (
+    <main className="column">
+      <RundownNav startTime={startTime} setStartTime={setStartTime} />
+      <section className="grow nopad">{startTime?.toISOString()}</section>
+    </main>
+  )
 }
 
 export default Rundown
diff --git a/frontend/src/pages/Rundown/RundownNav.jsx b/frontend/src/pages/Rundown/RundownNav.jsx
new file mode 100644
index 00000000..7a6fe295
--- /dev/null
+++ b/frontend/src/pages/Rundown/RundownNav.jsx
@@ -0,0 +1,53 @@
+import { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+import { NavLink, useSearchParams } from 'react-router-dom'
+
+import { Navbar, InputText, Button, Spacer } from '/src/components'
+import { setPageTitle } from '/src/actions'
+
+const DAY = 24 * 60 * 60 * 1000
+
+const RundownNav = ({ startTime, setStartTime }) => {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const dispatch = useDispatch()
+
+  useEffect(() => {
+    const dateParam = searchParams.get('date')
+    if (dateParam) {
+      const newStartTime = new Date(dateParam)
+      newStartTime.setHours(7, 30, 0, 0)
+      if (newStartTime.getTime() !== startTime?.getTime()) {
+        setStartTime(newStartTime)
+      }
+    } else {
+      const defaultDate = new Date()
+      defaultDate.setHours(7, 30, 0, 0)
+      setStartTime(defaultDate)
+    }
+  }, [searchParams])
+
+  useEffect(() => {
+    if (!startTime) return
+    const dateParam = searchParams.get('date')
+    const formattedDate = startTime.toISOString().split('T')[0]
+    if (dateParam !== formattedDate) {
+      setSearchParams((o) => {
+        o.set('date', formattedDate)
+        return o
+      })
+    }
+    dispatch(setPageTitle({ title: `Rundown ${formattedDate}` }))
+  }, [startTime, setSearchParams])
+
+  const prevDay = () => setStartTime(new Date(startTime.getTime() - DAY))
+  const nextDay = () => setStartTime(new Date(startTime.getTime() + DAY))
+
+  return (
+    <Navbar>
+      <Button icon="chevron_left" onClick={prevDay} />
+      <Button icon="chevron_right" onClick={nextDay} />
+    </Navbar>
+  )
+}
+
+export default RundownNav

From 5299653592b22006bd3c03f4561566de80e16af8 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Thu, 17 Oct 2024 19:08:54 +0200
Subject: [PATCH 26/41] fix: missing event primary asset

---
 frontend/src/pages/Scheduler/Scheduler.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/pages/Scheduler/Scheduler.jsx b/frontend/src/pages/Scheduler/Scheduler.jsx
index 58070368..5de1a795 100644
--- a/frontend/src/pages/Scheduler/Scheduler.jsx
+++ b/frontend/src/pages/Scheduler/Scheduler.jsx
@@ -41,6 +41,8 @@ const Scheduler = ({ draggedAsset }) => {
       meta: {},
     }
 
+    if (event.id_asset) payload.id_asset = event.id_asset
+
     // Prevent jumping during server-side update
     if (event.id) {
       payload.id = event.id

From 07c36f2961323be118cbe06255c276a3e00cd7e3 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Thu, 17 Oct 2024 21:26:18 +0200
Subject: [PATCH 27/41] fix: event drawing + handle dragging edge cases

---
 frontend/src/containers/Calendar/Calendar.jsx | 10 ++++++--
 .../src/containers/Calendar/drawEvents.js     | 24 ++++++++++---------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/frontend/src/containers/Calendar/Calendar.jsx b/frontend/src/containers/Calendar/Calendar.jsx
index 6c2394d2..250bceaf 100644
--- a/frontend/src/containers/Calendar/Calendar.jsx
+++ b/frontend/src/containers/Calendar/Calendar.jsx
@@ -92,7 +92,14 @@ const Calendar = ({
       const { start, duration, title } = event
 
       const nextEvent = events[i]
-      const nextStart = nextEvent?.start || start + duration
+      let nextStart = nextEvent?.start
+
+      // if nextStart is not defined, use the end of the day
+
+      if (!nextStart) {
+        nextStart = currentMidnight.getTime() / 1000 + 24 * 60 * 60
+      }
+
       if (currentTs >= start && currentTs <= nextStart) {
         // skip events that are not on the current day
         // (empty space at the beginning of the day)
@@ -102,7 +109,6 @@ const Calendar = ({
         ) {
           continue
         }
-
         return event
       }
     }
diff --git a/frontend/src/containers/Calendar/drawEvents.js b/frontend/src/containers/Calendar/drawEvents.js
index 6296d6a2..4cc0f63d 100644
--- a/frontend/src/containers/Calendar/drawEvents.js
+++ b/frontend/src/containers/Calendar/drawEvents.js
@@ -6,35 +6,37 @@ const drawEvents = (ctx, drawParams, events, draggedEvent) => {
   for (const event of events) {
     const { start, title, duration } = event
     const nextEvent = events[i + 1]
-    const nextStart = nextEvent?.start || start + duration
+    const nextStart = nextEvent?.start
 
     i += 1
     if (draggedEvent?.id === event?.id) continue
 
     const startPos = time2pos(start * 1000)
-    const endPos = time2pos(nextStart * 1000)
-    const eventDuration = (nextStart - start) * 1000
+    const endPos = nextStart ? time2pos(nextStart * 1000) : null
+    const eventDuration = nextStart ? (nextStart - start) * 1000 : null
 
-    const gradientEnd = endPos.x > startPos.x ? maxY : endPos.y
-    const eventHeight =
-      endPos.x > startPos.x
-        ? maxY - startPos.y
-        : (eventDuration / 3600) * hourHeight
+    let eventHeight
+    if (!endPos) eventHeight = maxY - startPos.y
+    else if (endPos.x > startPos.x) eventHeight = maxY - startPos.y
+    else eventHeight = (eventDuration / (3600 * 1000)) * hourHeight
 
     // Set the fill style to the gradient
 
-    const usedHeight = hourHeight * (duration / 3600)
+    const gradientEnd = startPos.y + eventHeight
     const gradient = ctx.createLinearGradient(0, startPos.y, 0, gradientEnd)
     gradient.addColorStop(0, '#885bff')
     gradient.addColorStop(1, 'transparent')
 
     ctx.fillStyle = gradient
-    ctx.fillRect(startPos.x + 10, startPos.y, dayWidth - 10, eventHeight)
+    //ctx.fillStyle = '#885bff99'
+    ctx.fillRect(startPos.x + 10, startPos.y, dayWidth - 10, eventHeight - 2)
 
+    // draw actual duration
+    const usedHeight = hourHeight * (duration / 3600)
     ctx.fillStyle = duration - 30 > nextStart - start ? '#ff2404' : '#5fff5f'
-
     ctx.fillRect(startPos.x + 10, startPos.y, 3, usedHeight)
 
+    // event title
     ctx.font = '12px Arial'
     ctx.fillStyle = '#fff'
     ctx.fillText(title, startPos.x + 15, startPos.y + 15)

From 16bd44a1e89cf9dcd1f9e09a72802c1653aa06b3 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Thu, 17 Oct 2024 22:04:28 +0200
Subject: [PATCH 28/41] fix: more event dragging edge cases

---
 frontend/src/containers/Calendar/Calendar.jsx | 78 +++++++++----------
 .../src/containers/Calendar/drawEvents.js     |  5 +-
 2 files changed, 43 insertions(+), 40 deletions(-)

diff --git a/frontend/src/containers/Calendar/Calendar.jsx b/frontend/src/containers/Calendar/Calendar.jsx
index 250bceaf..f7f1d6c7 100644
--- a/frontend/src/containers/Calendar/Calendar.jsx
+++ b/frontend/src/containers/Calendar/Calendar.jsx
@@ -24,11 +24,11 @@ const Calendar = ({
   const calendarRef = useRef(null)
   const dayRef = useRef(null)
   const wrapperRef = useRef(null)
+  const cursorTime = useRef(null)
 
   const [scrollbarWidth, setScrollbarWidth] = useState(0)
   const [zoom, setZoom] = useLocalStorage(1)
   const [scrollPosition, setScrollPosition] = useLocalStorage(0)
-  const [currentTime, setCurrentTime] = useState(null)
   const [mousePos, setMousePos] = useState(null)
 
   // Reference to events
@@ -81,37 +81,40 @@ const Calendar = ({
   }
 
   const eventAtPos = () => {
-    if (!currentTime) return null
-    const currentTs = currentTime.getTime() / 1000
+    if (!cursorTime.current) return null
+    const currentTs = cursorTime.current.getTime() / 1000
+
+    // Get the current day midnight (for comparing dates)
     const currentMidnight = new Date((currentTs - dayStartOffsetSeconds) * 1000)
     currentMidnight.setHours(0, 0, 0, 0)
 
+    // When the next day starts (unix timestamp)
+    const nextDayStartTs = currentTs - dayStartOffsetSeconds + 24 * 60 * 60
+
     let i = 0
     for (const event of events) {
       i += 1
-      const { start, duration, title } = event
+      // start and nextStart are unix timestamps
+      const { start } = event
 
+      // Get the next event start time
       const nextEvent = events[i]
       let nextStart = nextEvent?.start
 
-      // if nextStart is not defined, use the end of the day
+      // if nextStart is not defined or is in the next day, use the end of the day
+      if (!nextStart || nextStart > nextDayStartTs) nextStart = nextDayStartTs
 
-      if (!nextStart) {
-        nextStart = currentMidnight.getTime() / 1000 + 24 * 60 * 60
-      }
-
-      if (currentTs >= start && currentTs <= nextStart) {
+      if (currentTs >= start && currentTs < nextStart) {
         // skip events that are not on the current day
         // (empty space at the beginning of the day)
-        if (
-          new Date((start - dayStartOffsetSeconds) * 1000).getDate() !==
-          currentMidnight.getDate()
-        ) {
-          continue
-        }
+        const edate = new Date((start - dayStartOffsetSeconds) * 1000).getDate()
+        if (edate !== currentMidnight.getDate()) continue
+
+        // event fits, returning
         return event
       }
     }
+    // no valid event under the cursor
     return null
   }
 
@@ -144,20 +147,20 @@ const Calendar = ({
       drawEvents(ctx, drawParams, eventsRef.current, draggedEvent.current)
     }
 
-    if (currentTime && mousePos) {
+    if (cursorTime.current && mousePos) {
       const { x, y } = mousePos
 
       if (draggedAsset) {
         ctx.fillStyle = '#fff'
         ctx.fillText(
-          `${Math.round(x)}:${Math.round(y)} ${currentTime.toLocaleString()}: ${
-            draggedAsset.title
-          }`,
+          `${Math.round(x)}:${Math.round(
+            y
+          )} ${cursorTime.current.toLocaleString()}: ${draggedAsset.title}`,
           x + 10,
           y + 50
         )
 
-        const timePos = time2pos(currentTime)
+        const timePos = time2pos(cursorTime.current)
         ctx.beginPath()
         ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
         ctx.rect(
@@ -170,12 +173,14 @@ const Calendar = ({
       } else if (draggedEvent.current) {
         ctx.fillStyle = '#cff'
         ctx.fillText(
-          `${currentTime.toLocaleString()}: ${draggedEvent.current.title}`,
+          `${cursorTime.current.toLocaleString()}: ${
+            draggedEvent.current.title
+          }`,
           x + 20,
           y + 30
         )
 
-        const timePos = time2pos(currentTime)
+        const timePos = time2pos(cursorTime.current)
         ctx.beginPath()
         ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
         ctx.rect(
@@ -193,7 +198,7 @@ const Calendar = ({
 
   useEffect(() => {
     drawCalendar()
-  }, [currentTime, events])
+  }, [cursorTime.current, events])
 
   // Event handlers
 
@@ -213,19 +218,13 @@ const Calendar = ({
       ? hourHeight * (Math.max(draggedEvent.current?.duration || 1200) / 7200)
       : 0
 
-    //console.log('yoffset', yoffset)
-
     let newTime = pos2time(x, y - yoffset)
     setMousePos({ x, y })
 
     // Update current time
 
-    // if (draggedEvent.current) {
-    //   newTime = new Date(newTime - draggedEvent.current.duration * 500)
-    // }
-
-    if (newTime !== currentTime) {
-      setCurrentTime(newTime)
+    if (newTime !== cursorTime.current) {
+      cursorTime.current = newTime
     }
 
     // Start dragging after reaching some distance
@@ -249,18 +248,18 @@ const Calendar = ({
 
   const onMouseUp = (e) => {
     if (!calendarRef?.current) return
-    if (draggedAsset && currentTime) {
-      console.log('Dropped asset', draggedAsset, currentTime)
+    if (draggedAsset && cursorTime.current) {
+      console.log('Dropped asset', draggedAsset, cursorTime.current)
       setEvent({
         id_asset: draggedAsset.id,
-        start: Math.floor(currentTime.getTime() / 1000),
+        start: Math.floor(cursorTime.current.getTime() / 1000),
       })
-    } else if (draggedEvent.current) {
-      console.log('Dropped event', draggedEvent.current, currentTime)
+    } else if (draggedEvent.current && cursorTime.current) {
+      console.log('Dropped event', draggedEvent.current, cursorTime.current)
 
       setEvent({
         id: draggedEvent.current.id,
-        start: Math.floor(currentTime.getTime() / 1000),
+        start: Math.floor(cursorTime.current.getTime() / 1000),
       })
     }
 
@@ -285,9 +284,11 @@ const Calendar = ({
   useEffect(() => {
     if (!calendarRef.current) return
     calendarRef.current.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup', onMouseUp)
     return () => {
       if (!calendarRef.current) return
       calendarRef.current.removeEventListener('mousemove', onMouseMove)
+      document.removeEventListener('mouseup', onMouseUp)
     }
   }, [calendarRef.current])
 
@@ -418,7 +419,6 @@ const Calendar = ({
           <CalendarCanvas
             id="calendar"
             ref={calendarRef}
-            onMouseUp={onMouseUp}
             onMouseDown={onMouseDown}
           />
         </div>
diff --git a/frontend/src/containers/Calendar/drawEvents.js b/frontend/src/containers/Calendar/drawEvents.js
index 4cc0f63d..3ba28e69 100644
--- a/frontend/src/containers/Calendar/drawEvents.js
+++ b/frontend/src/containers/Calendar/drawEvents.js
@@ -15,6 +15,8 @@ const drawEvents = (ctx, drawParams, events, draggedEvent) => {
     const endPos = nextStart ? time2pos(nextStart * 1000) : null
     const eventDuration = nextStart ? (nextStart - start) * 1000 : null
 
+    // Compute the event rectangle height
+
     let eventHeight
     if (!endPos) eventHeight = maxY - startPos.y
     else if (endPos.x > startPos.x) eventHeight = maxY - startPos.y
@@ -28,15 +30,16 @@ const drawEvents = (ctx, drawParams, events, draggedEvent) => {
     gradient.addColorStop(1, 'transparent')
 
     ctx.fillStyle = gradient
-    //ctx.fillStyle = '#885bff99'
     ctx.fillRect(startPos.x + 10, startPos.y, dayWidth - 10, eventHeight - 2)
 
     // draw actual duration
+
     const usedHeight = hourHeight * (duration / 3600)
     ctx.fillStyle = duration - 30 > nextStart - start ? '#ff2404' : '#5fff5f'
     ctx.fillRect(startPos.x + 10, startPos.y, 3, usedHeight)
 
     // event title
+
     ctx.font = '12px Arial'
     ctx.fillStyle = '#fff'
     ctx.fillText(title, startPos.x + 15, startPos.y + 15)

From b1ea816ac83cea710dcd5d77101bdc63b515603c Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Thu, 17 Oct 2024 22:19:10 +0200
Subject: [PATCH 29/41] feat: handle scheduler api errors

---
 frontend/src/pages/Scheduler/Scheduler.jsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/Scheduler/Scheduler.jsx b/frontend/src/pages/Scheduler/Scheduler.jsx
index 5de1a795..9d383ac2 100644
--- a/frontend/src/pages/Scheduler/Scheduler.jsx
+++ b/frontend/src/pages/Scheduler/Scheduler.jsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useMemo } from 'react'
 import { useDispatch } from 'react-redux'
 import { setPageTitle } from '/src/actions'
+import { toast } from 'react-toastify'
 
 import Calendar from '/src/containers/Calendar'
 import SchedulerNav from './SchedulerNav'
@@ -22,6 +23,17 @@ const Scheduler = ({ draggedAsset }) => {
     setEvents(events.filter((e) => e.start >= startTs))
   }
 
+  const onError = (error) => {
+    console.log(error.response)
+    toast.error(
+      <>
+        <strong>Scheduler API error</strong>
+        <br />
+        <p>{error.response?.data?.detail || 'Unknown error'}</p>
+      </>
+    )
+  }
+
   const requestParams = {
     id_channel: 1,
     date: DateTime.fromJSDate(startTime).toFormat('yyyy-MM-dd'),
@@ -32,7 +44,7 @@ const Scheduler = ({ draggedAsset }) => {
   //
 
   const loadEvents = () => {
-    nebula.request('scheduler', requestParams).then(onResponse)
+    nebula.request('scheduler', requestParams).then(onResponse).catch(onError)
   }
 
   const setEvent = (event) => {
@@ -63,12 +75,12 @@ const Scheduler = ({ draggedAsset }) => {
     }
 
     const params = { ...requestParams, events: [payload] }
-    nebula.request('scheduler', params).then(onResponse)
+    nebula.request('scheduler', params).then(onResponse).catch(onError)
   }
 
   const deleteEvent = (eventId) => {
     const params = { ...requestParams, delete: [eventId] }
-    nebula.request('scheduler', params).then(onResponse)
+    nebula.request('scheduler', params).then(onResponse).catch(onError)
   }
 
   //

From 4b7dec58debb66c1e84fc9de84453379f0ea3cbe Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Thu, 17 Oct 2024 22:43:41 +0200
Subject: [PATCH 30/41] feat: rundown table prototype

---
 frontend/src/pages/Rundown/Rundown.jsx      | 24 ++++++++++++-
 frontend/src/pages/Rundown/RundownTable.jsx | 38 +++++++++++++++++++++
 2 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/pages/Rundown/RundownTable.jsx

diff --git a/frontend/src/pages/Rundown/Rundown.jsx b/frontend/src/pages/Rundown/Rundown.jsx
index cc0307b6..572afb66 100644
--- a/frontend/src/pages/Rundown/Rundown.jsx
+++ b/frontend/src/pages/Rundown/Rundown.jsx
@@ -1,14 +1,36 @@
 import { useState, useEffect, useMemo } from 'react'
+import nebula from '/src/nebula'
 
 import RundownNav from './RundownNav'
+import RundownTable from './RundownTable'
 
 const Rundown = () => {
   const [startTime, setStartTime] = useState(null)
+  const [rundown, setRundown] = useState(null)
+
+  const onResponse = (response) => {
+    setRundown(response.data.rows)
+  }
+
+  const onError = (error) => {
+    console.log(error.response)
+  }
+
+  useEffect(() => {
+    if (!startTime) return
+    const requestParams = {
+      date: startTime.toISOString().split('T')[0],
+      id_channel: 1,
+    }
+    nebula.request('rundown', requestParams).then(onResponse).catch(onError)
+  }, [startTime])
 
   return (
     <main className="column">
       <RundownNav startTime={startTime} setStartTime={setStartTime} />
-      <section className="grow nopad">{startTime?.toISOString()}</section>
+      <section className="grow nopad">
+        <RundownTable data={rundown} />
+      </section>
     </main>
   )
 }
diff --git a/frontend/src/pages/Rundown/RundownTable.jsx b/frontend/src/pages/Rundown/RundownTable.jsx
new file mode 100644
index 00000000..9ead43ab
--- /dev/null
+++ b/frontend/src/pages/Rundown/RundownTable.jsx
@@ -0,0 +1,38 @@
+import Table from '/src/components/table'
+import { useMemo } from 'react'
+
+const formatTime = (rowData, key) => {
+  const timestamp = rowData[key]
+  const date = new Date(timestamp * 1000)
+  // format to hh:mm:ss
+  const ftime = date.toTimeString().split(' ')[0]
+  return <td>{ftime}</td>
+}
+
+const RundownTable = ({ data }) => {
+  const columns = useMemo(
+    () => [
+      {
+        title: 'Title',
+        name: 'title',
+      },
+      {
+        title: 'Scheduled',
+        name: 'scheduled_time',
+        width: 100,
+        formatter: formatTime,
+      },
+      {
+        title: 'Broacast',
+        name: 'broadcast_time',
+        width: 100,
+        formatter: formatTime,
+      },
+    ],
+    []
+  )
+
+  return <Table columns={columns} data={data} className="contained" />
+}
+
+export default RundownTable

From 2a1510faca1bcf56c9902df86893435a178c39fa Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Fri, 18 Oct 2024 20:57:45 +0200
Subject: [PATCH 31/41] feat: color picker

---
 frontend/src/components/InputColor.jsx     | 56 ++++++++++++++++++++++
 frontend/src/components/index.jsx          |  1 +
 frontend/src/containers/MetadataEditor.jsx | 14 ++++--
 3 files changed, 68 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/InputColor.jsx

diff --git a/frontend/src/components/InputColor.jsx b/frontend/src/components/InputColor.jsx
new file mode 100644
index 00000000..a970e176
--- /dev/null
+++ b/frontend/src/components/InputColor.jsx
@@ -0,0 +1,56 @@
+import { useMemo } from 'react'
+import styled from 'styled-components'
+import defaultTheme from './theme'
+import BaseInput from './BaseInput'
+
+const BaseColorInput = styled(BaseInput)`
+  width: 30px;
+`
+
+const InputColor = ({ value, onChange, tooltip, ...props }) => {
+  /*
+  Nebula stores color as integer so we need to convert it to hex
+  */
+
+  const hexValue = useMemo(() => {
+    if (!value) return '#885bff'
+    const hval = `#${value.toString(16).padStart(6, '0')}`
+    console.log('hexValue', value, '->', hval)
+    return hval
+  }, [value])
+
+  const setColor = (hex) => {
+    if (!hex) return null
+    const intVal = parseInt(hex.slice(1), 16)
+    console.log('setColor', hex, '->', intVal)
+    onChange(intVal)
+  }
+
+  const presetColors = useMemo(() => {
+    return Object.keys(defaultTheme.colors)
+      .filter(
+        (color) => !(color.startsWith('surface') || color.startsWith('text'))
+      )
+      .map((color) => defaultTheme[color])
+  }, [])
+
+  return (
+    <>
+      <BaseColorInput
+        type="color"
+        value={hexValue}
+        title={tooltip}
+        list="presetColors"
+        onChange={(e) => setColor(e.target.value)}
+        {...props}
+      />
+      <datalist id="presetColors">
+        {presetColors.map((color) => (
+          <option key={color} value={color} />
+        ))}
+      </datalist>
+    </>
+  )
+}
+
+export default InputColor
diff --git a/frontend/src/components/index.jsx b/frontend/src/components/index.jsx
index 6ea033d5..20bbc32e 100644
--- a/frontend/src/components/index.jsx
+++ b/frontend/src/components/index.jsx
@@ -5,6 +5,7 @@ export { default as Dialog } from './Dialog'
 export { default as Dropdown } from './Dropdown'
 export { default as ErrorBanner } from './ErrorBanner'
 export { default as Icon } from './Icon'
+export { default as InputColor } from './InputColor'
 export { default as InputDatetime } from './InputDatetime'
 export { default as InputInteger } from './InputInteger'
 export { default as InputNumber } from './InputNumber'
diff --git a/frontend/src/containers/MetadataEditor.jsx b/frontend/src/containers/MetadataEditor.jsx
index 3a1d25e2..9e41ddde 100644
--- a/frontend/src/containers/MetadataEditor.jsx
+++ b/frontend/src/containers/MetadataEditor.jsx
@@ -4,11 +4,12 @@ import { useMemo } from 'react'
 
 import { Form, FormRow, Select } from '/src/components'
 import {
-  InputText,
-  InputInteger,
-  TextArea,
+  InputColor,
   InputDatetime,
+  InputInteger,
   InputSwitch,
+  InputText,
+  TextArea,
 } from '/src/components'
 
 const EditorField = ({
@@ -47,6 +48,8 @@ const EditorField = ({
         return 0
       case 'boolean':
         return false
+      case 'color':
+        return 0
       default:
         return undefined
     }
@@ -120,6 +123,11 @@ const EditorField = ({
         <InputInteger value={value} onChange={onChange} disabled={disabled} />
       )
       break
+    case 'color':
+      editor = (
+        <InputColor value={value} onChange={onChange} disabled={disabled} />
+      )
+      break
     default:
       editor = <InputText value={value} onChange={onChange} disabled={true} />
   }

From dd8611c2d08d8a41bdc685cc83dc6f0af695df08 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Fri, 18 Oct 2024 22:12:39 +0200
Subject: [PATCH 32/41] feat(calendar): truncating event titles, colorized
 events

---
 frontend/src/containers/Calendar/Calendar.jsx |  3 +-
 .../src/containers/Calendar/drawEvents.js     | 20 +++++++--
 frontend/src/containers/Calendar/drawUtils.js | 43 +++++++++++++++++++
 3 files changed, 62 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/containers/Calendar/drawUtils.js

diff --git a/frontend/src/containers/Calendar/Calendar.jsx b/frontend/src/containers/Calendar/Calendar.jsx
index f7f1d6c7..32d569d9 100644
--- a/frontend/src/containers/Calendar/Calendar.jsx
+++ b/frontend/src/containers/Calendar/Calendar.jsx
@@ -290,7 +290,7 @@ const Calendar = ({
       calendarRef.current.removeEventListener('mousemove', onMouseMove)
       document.removeEventListener('mouseup', onMouseUp)
     }
-  }, [calendarRef.current])
+  }, [calendarRef.current, startTime])
 
   //
   // Handle calendar resizing
@@ -420,6 +420,7 @@ const Calendar = ({
             id="calendar"
             ref={calendarRef}
             onMouseDown={onMouseDown}
+            onMouseUp={onMouseUp}
           />
         </div>
       </div>
diff --git a/frontend/src/containers/Calendar/drawEvents.js b/frontend/src/containers/Calendar/drawEvents.js
index 3ba28e69..376d91ee 100644
--- a/frontend/src/containers/Calendar/drawEvents.js
+++ b/frontend/src/containers/Calendar/drawEvents.js
@@ -1,3 +1,5 @@
+import { drawTruncatedText } from './drawUtils'
+
 const drawEvents = (ctx, drawParams, events, draggedEvent) => {
   const { dayWidth, hourHeight, time2pos } = drawParams.current
   const maxY = ctx.canvas.height
@@ -26,7 +28,11 @@ const drawEvents = (ctx, drawParams, events, draggedEvent) => {
 
     const gradientEnd = startPos.y + eventHeight
     const gradient = ctx.createLinearGradient(0, startPos.y, 0, gradientEnd)
-    gradient.addColorStop(0, '#885bff')
+    const eventColor = event.color
+      ? `#${event.color.toString(16).padStart(6, '0')}`
+      : '#7287fd'
+
+    gradient.addColorStop(0, eventColor)
     gradient.addColorStop(1, 'transparent')
 
     ctx.fillStyle = gradient
@@ -40,9 +46,17 @@ const drawEvents = (ctx, drawParams, events, draggedEvent) => {
 
     // event title
 
-    ctx.font = '12px Arial'
+    ctx.font = '12px Noto Sans'
     ctx.fillStyle = '#fff'
-    ctx.fillText(title, startPos.x + 15, startPos.y + 15)
+    drawTruncatedText(
+      ctx,
+      startPos.x + 15,
+      startPos.y + 15,
+      dayWidth - 20,
+      title
+    )
+
+    //ctx.fillText(title, startPos.x + 15, startPos.y + 15)
   }
 }
 
diff --git a/frontend/src/containers/Calendar/drawUtils.js b/frontend/src/containers/Calendar/drawUtils.js
new file mode 100644
index 00000000..04aa9326
--- /dev/null
+++ b/frontend/src/containers/Calendar/drawUtils.js
@@ -0,0 +1,43 @@
+function drawTruncatedText(ctx, x, y, width, text) {
+  function removeLastVowel(str) {
+    return str.replace(/([aeiouAEIOU])(?!.*[aeiouAEIOU\s])/g, '')
+  }
+  const deterministicRm = (str) => {
+    const words = str.split(' ')
+    const totalLength = str.length
+    const wordIndex = totalLength % words.length
+    const wordToModify = words[wordIndex]
+    const charIndex = Math.max(totalLength % wordToModify.length, 1)
+    const newWord =
+      wordToModify.slice(0, charIndex) + wordToModify.slice(charIndex + 1)
+    return words
+      .map((word, index) => (index === wordIndex ? newWord : word))
+      .join(' ')
+  }
+
+  let truncatedText = text
+
+  let i = 0
+  while (ctx.measureText(truncatedText).width > width) {
+    let newText = removeLastVowel(truncatedText)
+    if (newText.length == truncatedText.length) {
+      newText = deterministicRm(truncatedText)
+      if (newText.length == truncatedText.length) {
+        newText = truncatedText.slice(0, -1)
+      }
+    }
+
+    if (newText.length === 0) {
+      truncatedText =
+        text.slice(0, Math.floor(width / ctx.measureText('W').width)) + '...'
+      break
+    }
+    truncatedText = newText
+    i++
+    if (i > 40) break
+  }
+
+  ctx.fillText(truncatedText, x, y)
+}
+
+export { drawTruncatedText }

From ffe0e07b243f747260de4193f04dcf14ae863051 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Fri, 18 Oct 2024 22:14:48 +0200
Subject: [PATCH 33/41] feat: catppuccin color preset for InputColor

---
 frontend/src/components/InputColor.jsx | 38 +++++++++++++++-----------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/InputColor.jsx b/frontend/src/components/InputColor.jsx
index a970e176..5d68a6dc 100644
--- a/frontend/src/components/InputColor.jsx
+++ b/frontend/src/components/InputColor.jsx
@@ -7,33 +7,39 @@ const BaseColorInput = styled(BaseInput)`
   width: 30px;
 `
 
+const COLOR_PRESETS = [
+  '#dc8a78',
+  '#dd7878',
+  '#ea76cb',
+  '#8839ef',
+  '#d20f39',
+  '#e64553',
+  '#fe640b',
+  '#df8e1d',
+  '#40a02b',
+  '#179299',
+  '#04a5e5',
+  '#209fb5',
+  '#1e66f5',
+  '#7287fd',
+  '#4c4f69',
+]
+
 const InputColor = ({ value, onChange, tooltip, ...props }) => {
   /*
   Nebula stores color as integer so we need to convert it to hex
   */
 
   const hexValue = useMemo(() => {
-    if (!value) return '#885bff'
-    const hval = `#${value.toString(16).padStart(6, '0')}`
-    console.log('hexValue', value, '->', hval)
-    return hval
+    if (!value) return '#7287fd'
+    return `#${value.toString(16).padStart(6, '0')}`
   }, [value])
 
   const setColor = (hex) => {
     if (!hex) return null
-    const intVal = parseInt(hex.slice(1), 16)
-    console.log('setColor', hex, '->', intVal)
-    onChange(intVal)
+    onChange(parseInt(hex.slice(1), 16))
   }
 
-  const presetColors = useMemo(() => {
-    return Object.keys(defaultTheme.colors)
-      .filter(
-        (color) => !(color.startsWith('surface') || color.startsWith('text'))
-      )
-      .map((color) => defaultTheme[color])
-  }, [])
-
   return (
     <>
       <BaseColorInput
@@ -45,7 +51,7 @@ const InputColor = ({ value, onChange, tooltip, ...props }) => {
         {...props}
       />
       <datalist id="presetColors">
-        {presetColors.map((color) => (
+        {COLOR_PRESETS.map((color) => (
           <option key={color} value={color} />
         ))}
       </datalist>

From a6526991f7bca3444485f988b8a37c8c35b59dc2 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Fri, 18 Oct 2024 22:15:02 +0200
Subject: [PATCH 34/41] chore: scheduler clean-up

---
 frontend/src/pages/Scheduler/Scheduler.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/pages/Scheduler/Scheduler.jsx b/frontend/src/pages/Scheduler/Scheduler.jsx
index 9d383ac2..0fa5121b 100644
--- a/frontend/src/pages/Scheduler/Scheduler.jsx
+++ b/frontend/src/pages/Scheduler/Scheduler.jsx
@@ -16,15 +16,13 @@ const Scheduler = ({ draggedAsset }) => {
   const [events, setEvents] = useState([])
   const [editorData, setEditorData] = useState(null)
 
-  const startTs = useMemo(() => startTime.getTime() / 1000, [startTime])
-
   const onResponse = (response) => {
     const events = response.data.events
+    const startTs = startTime.getTime() / 1000
     setEvents(events.filter((e) => e.start >= startTs))
   }
 
   const onError = (error) => {
-    console.log(error.response)
     toast.error(
       <>
         <strong>Scheduler API error</strong>

From bf6199e8c0d55cd8ec4734c1116cb58cb6ca9531 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Fri, 18 Oct 2024 22:33:46 +0200
Subject: [PATCH 35/41] chore: prefer dark color scheme

---
 frontend/src/index.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/index.scss b/frontend/src/index.scss
index 7a3dd061..26c1427d 100644
--- a/frontend/src/index.scss
+++ b/frontend/src/index.scss
@@ -24,6 +24,7 @@
   --font-size: 0.9rem;
   --gap-size: 6px;
   --section-gap: 6px;
+  color-scheme: dark;
 }
 
 // Hacks

From f044b11c519d0b0a6dd870f1e20cfd14decaea78 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Sat, 19 Oct 2024 17:53:56 +0200
Subject: [PATCH 36/41] refactor: table formatting

---
 frontend/src/components/table/cells.jsx       |  7 +-
 frontend/src/components/table/index.jsx       |  2 +
 frontend/src/containers/Browser/Browser.jsx   |  2 +-
 frontend/src/pages/Rundown/Rundown.jsx        |  4 +-
 frontend/src/pages/Rundown/RundownTable.jsx   | 85 +++++++++++++------
 .../Formatting.jsx => tableFormatting.jsx}    | 79 ++++++++++++-----
 frontend/src/tableFormatting.scss             | 69 +++++++++++++++
 7 files changed, 193 insertions(+), 55 deletions(-)
 rename frontend/src/{containers/Browser/Formatting.jsx => tableFormatting.jsx} (72%)
 create mode 100644 frontend/src/tableFormatting.scss

diff --git a/frontend/src/components/table/cells.jsx b/frontend/src/components/table/cells.jsx
index 81ed53b3..9dac1f09 100644
--- a/frontend/src/components/table/cells.jsx
+++ b/frontend/src/components/table/cells.jsx
@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import { useDraggable } from '@dnd-kit/core'
+import clsx from 'clsx'
 
 const HeaderCell = ({ name, width, title, sortDirection, onSort }) => {
   let sortArrowElement = null
@@ -48,6 +49,7 @@ const DataRow = ({
   onRowClick,
   rowHighlightColor,
   rowHighlightStyle,
+  rowClass,
   selected = false,
 }) => {
   const { attributes, listeners, setNodeRef, transform, isDragging } =
@@ -76,11 +78,14 @@ const DataRow = ({
     opacity: isDragging ? 0.5 : 1,
   }
 
+  let rowClassName = ''
+
   // Left-border highlight color
   let highlightColor = null
   let highlightStyle = null
   if (rowHighlightColor) highlightColor = rowHighlightColor(rowData)
   if (rowHighlightStyle) highlightStyle = rowHighlightStyle(rowData)
+  if (rowClass) rowClassName = rowClass(rowData)
   if (highlightColor) rowStyle['borderLeftColor'] = highlightColor
   if (highlightStyle) rowStyle['borderLeftStyle'] = highlightStyle
 
@@ -116,7 +121,7 @@ const DataRow = ({
       onContextMenu={handleClick}
       {...attributes}
       {...listeners}
-      className={selected ? 'selected' : ''}
+      className={clsx(selected && 'selected', rowClassName)}
       style={rowStyle}
     >
       {rowContent}
diff --git a/frontend/src/components/table/index.jsx b/frontend/src/components/table/index.jsx
index a8876af3..ede6e9d5 100644
--- a/frontend/src/components/table/index.jsx
+++ b/frontend/src/components/table/index.jsx
@@ -16,6 +16,7 @@ const Table = ({
   selection,
   rowHighlightColor,
   rowHighlightStyle,
+  rowClass,
   sortBy,
   sortDirection,
   onSort,
@@ -57,6 +58,7 @@ const Table = ({
             onRowClick={onRowClick}
             rowHighlightColor={rowHighlightColor}
             rowHighlightStyle={rowHighlightStyle}
+            rowClass={rowClass}
             selected={selection && selection.includes(rowData[keyField])}
             key={keyField ? rowData[keyField] : idx}
           />
diff --git a/frontend/src/containers/Browser/Browser.jsx b/frontend/src/containers/Browser/Browser.jsx
index 005496a5..9f15c78d 100644
--- a/frontend/src/containers/Browser/Browser.jsx
+++ b/frontend/src/containers/Browser/Browser.jsx
@@ -22,7 +22,7 @@ import {
   getFormatter,
   formatRowHighlightColor,
   formatRowHighlightStyle,
-} from './Formatting.jsx'
+} from '/src/tableFormatting.jsx'
 
 const ROWS_PER_PAGE = 200
 
diff --git a/frontend/src/pages/Rundown/Rundown.jsx b/frontend/src/pages/Rundown/Rundown.jsx
index 572afb66..6f3f17bd 100644
--- a/frontend/src/pages/Rundown/Rundown.jsx
+++ b/frontend/src/pages/Rundown/Rundown.jsx
@@ -28,9 +28,7 @@ const Rundown = () => {
   return (
     <main className="column">
       <RundownNav startTime={startTime} setStartTime={setStartTime} />
-      <section className="grow nopad">
-        <RundownTable data={rundown} />
-      </section>
+      <RundownTable data={rundown} />
     </main>
   )
 }
diff --git a/frontend/src/pages/Rundown/RundownTable.jsx b/frontend/src/pages/Rundown/RundownTable.jsx
index 9ead43ab..d0d910e6 100644
--- a/frontend/src/pages/Rundown/RundownTable.jsx
+++ b/frontend/src/pages/Rundown/RundownTable.jsx
@@ -1,38 +1,67 @@
 import Table from '/src/components/table'
 import { useMemo } from 'react'
+import styled from 'styled-components'
+import nebula from '/src/nebula'
 
-const formatTime = (rowData, key) => {
-  const timestamp = rowData[key]
-  const date = new Date(timestamp * 1000)
-  // format to hh:mm:ss
-  const ftime = date.toTimeString().split(' ')[0]
-  return <td>{ftime}</td>
+import {
+  getColumnWidth,
+  getFormatter,
+  formatRowHighlightColor,
+  formatRowHighlightStyle,
+} from '/src/tableFormatting.jsx'
+
+const RundownWrapper = styled.section`
+  tbody {
+    .event-row {
+      background-color: black;
+      font-weight: bold;
+    }
+  }
+`
+
+const getRowClass = (rowData) => {
+  if (rowData.type === 'event') {
+    return 'event-row'
+  }
 }
 
+const COLUMNS = [
+  'title',
+  'id_folder',
+  'status',
+  'duration',
+  'scheduled_time',
+  'broadcast_time',
+  'mark_in',
+  'mark_out',
+]
+
 const RundownTable = ({ data }) => {
-  const columns = useMemo(
-    () => [
-      {
-        title: 'Title',
-        name: 'title',
-      },
-      {
-        title: 'Scheduled',
-        name: 'scheduled_time',
-        width: 100,
-        formatter: formatTime,
-      },
-      {
-        title: 'Broacast',
-        name: 'broadcast_time',
-        width: 100,
-        formatter: formatTime,
-      },
-    ],
-    []
-  )
+  const columns = useMemo(() => {
+    return COLUMNS.map((key) => {
+      return {
+        key: key,
+        title: nebula.metaHeader(key),
+        name: key,
+        width: getColumnWidth(key),
+        formatter: getFormatter(key),
+      }
+    })
+  }, [])
 
-  return <Table columns={columns} data={data} className="contained" />
+  return (
+    <RundownWrapper className="grow nopad">
+      <Table
+        keyField="id"
+        columns={columns}
+        data={data}
+        className="contained"
+        rowClass={getRowClass}
+        rowHighlightColor={formatRowHighlightColor}
+        rowHighlightStyle={formatRowHighlightStyle}
+      />
+    </RundownWrapper>
+  )
 }
 
 export default RundownTable
diff --git a/frontend/src/containers/Browser/Formatting.jsx b/frontend/src/tableFormatting.jsx
similarity index 72%
rename from frontend/src/containers/Browser/Formatting.jsx
rename to frontend/src/tableFormatting.jsx
index 7c283a91..2788991d 100644
--- a/frontend/src/containers/Browser/Formatting.jsx
+++ b/frontend/src/tableFormatting.jsx
@@ -1,22 +1,33 @@
 import nebula from '/src/nebula'
+import clsx from 'clsx'
 import styled from 'styled-components'
 import { Timecode } from '@wfoxall/timeframe'
 import { Timestamp } from '/src/components'
 
-const QCState = styled.div`
-  display: inline-block;
-  &::before {
-    content: '⚑';
-  }
-
-  &.qc-state-3 {
-    color: var(--color-red);
-  }
-
-  &.qc-state-4 {
-    color: var(--color-green);
-  }
-`
+import './tableFormatting.scss'
+
+const QC_STATES = [
+  'new',
+  'auto_rejected',
+  'auto_accepted',
+  'rejected',
+  'accepted',
+]
+
+const STATUSES = [
+  'offline',
+  'online',
+  'creating',
+  'trashed',
+  'archived',
+  'reset',
+  'corrupted',
+  'remote',
+  'unknown',
+  'aired',
+  'onair',
+  'retrieving',
+]
 
 const formatRowHighlightColor = (rowData) => {
   switch (rowData['status']) {
@@ -32,6 +43,8 @@ const formatRowHighlightColor = (rowData) => {
       return 'var(--color-yellow)' // reset
     case 6:
       return 'var(--color-red)' // corrupted
+    case 7:
+      return 'var(--color-yellow)' // ready
     case 11:
       return 'var(--color-yellow)' // retrieving
     default:
@@ -45,6 +58,8 @@ const formatRowHighlightStyle = (rowData) => {
       return 'dashed'
     case 6:
       return 'dashed'
+    case 7:
+      return 'dashed'
     default:
       return 'solid'
   }
@@ -69,7 +84,7 @@ const getDefaultFormatter = (key) => {
       // eslint-disable-next-line
       return (rowData, key) => (
         <td>
-          <Timestamp timestamp={rowData[key]} mode={metaType.mode} />{' '}
+          <Timestamp timestamp={rowData[key]} mode={metaType.mode} />
         </td>
       )
 
@@ -109,11 +124,14 @@ const getFormatter = (key) => {
   switch (key) {
     case 'qc/state':
       // eslint-disable-next-line
-      return (rowData, key) => (
-        <td>
-          <QCState className={`qc-state-${rowData[key]}`} />
-        </td>
-      )
+      return (rowData, key) => {
+        const qcState = QC_STATES[rowData[key]]
+        return (
+          <td className={clsx('qc-state', qcState)}>
+            <div />
+          </td>
+        )
+      }
 
     case 'id_folder':
       // eslint-disable-next-line
@@ -128,9 +146,26 @@ const getFormatter = (key) => {
       // eslint-disable-next-line
       return (rowData, key) => {
         const fps = rowData['video/fps_f'] || 25
-        const duration = rowData[key] || 0
+        let duration = rowData[key] || 0
+        if (rowData.mark_out) duration = rowData.mark_out
+        if (rowData.mark_in) duration -= rowData.mark_in
+        const trimmed = duration < rowData.duration
         const timecode = new Timecode(duration * fps, fps)
-        return <td>{timecode.toString().substring(0, 11)}</td>
+        const title =
+          trimmed &&
+          `Original duration ${new Timecode(rowData.duration * fps, fps)}`
+        return (
+          <td title={title || ''}>
+            {timecode.toString().substring(0, 11)}
+            {trimmed && '*'}
+          </td>
+        )
+      }
+
+    case 'status':
+      return (rowData, key) => {
+        const status = STATUSES[rowData[key]]
+        return <td className={clsx('status', status)}>{status}</td>
       }
 
     case 'created_by':
diff --git a/frontend/src/tableFormatting.scss b/frontend/src/tableFormatting.scss
new file mode 100644
index 00000000..5c22649a
--- /dev/null
+++ b/frontend/src/tableFormatting.scss
@@ -0,0 +1,69 @@
+// Coloring stuff
+
+.qc-state {
+  div {
+    display: inline-block;
+    &::before {
+      content: '⚑';
+    }
+  }
+
+  &.new {
+    color: var(--color-text);
+  }
+  &.rejected {
+    color: var(--color-red);
+  }
+  &.accepted {
+    color: var(--color-green);
+  }
+}
+
+.qc-state-3 {
+  color: var(--color-red);
+}
+
+.qc-state-4 {
+  color: var(--color-green);
+}
+
+.status {
+  text-transform: uppercase;
+  &.offline {
+    color: var(--color-red) !important;
+  }
+  &.online {
+    color: var(--color-green) !important;
+  }
+  &.creating {
+    color: var(--color-yellow) !important;
+  }
+  &.trashed {
+    color: var(--color-text-dim) !important;
+  }
+  &.archived {
+    color: var(--color-blue) !important;
+  }
+  &.reset {
+    color: var(--color-yellow) !important;
+  }
+  &.corrupted {
+    color: var(--color-red) !important;
+  }
+  &.remote {
+    color: var(--color-yellow) !important;
+  }
+  &.unknown {
+    color: var(--color-yellow) !important;
+  }
+  &.aired {
+    color: var(--color-text-dim) !important;
+  }
+  &.onair {
+    background-color: var(--color-red) !important;
+    color: white !important;
+  }
+  &.retrieving {
+    color: var(--color-yellow) !important;
+  }
+}

From 29939401a68215c127860f0f770207c810d459c8 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Sat, 19 Oct 2024 19:30:24 +0200
Subject: [PATCH 37/41] feat: add id_folder to rundown row model

---
 backend/api/rundown/get_rundown.py | 1 +
 backend/api/rundown/models.py      | 1 +
 2 files changed, 2 insertions(+)

diff --git a/backend/api/rundown/get_rundown.py b/backend/api/rundown/get_rundown.py
index 4dc4ec20..b0692ed3 100644
--- a/backend/api/rundown/get_rundown.py
+++ b/backend/api/rundown/get_rundown.py
@@ -172,6 +172,7 @@ async def get_rundown(request: RundownRequestModel) -> RundownResponseModel:
             id_asset=id_asset,
             id_bin=id_bin,
             id_event=id_event,
+            id_folder=asset["id_folder"] if asset else None,
             duration=duration,
             status=istatus,
             transfer_progress=transfer_progress,
diff --git a/backend/api/rundown/models.py b/backend/api/rundown/models.py
index 4f54f06b..27a1533b 100644
--- a/backend/api/rundown/models.py
+++ b/backend/api/rundown/models.py
@@ -26,6 +26,7 @@ class RundownRow(ResponseModel):
     title: str | None = Field(None)
     subtitle: str | None = Field(None)
     id_asset: int | None = Field(None)
+    id_folder: int | None = Field(None)
     asset_mtime: float | None = Field(None)
     status: ObjectStatus | None = Field(None)
     transfer_progress: int | None = Field(None)

From 0f5f0706d4b58686330f0f64f96a02a73ac193b0 Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Sat, 19 Oct 2024 19:30:41 +0200
Subject: [PATCH 38/41] chore: unified mark in/out headers

---
 backend/schema/meta-aliases-cs.json | 4 ++--
 backend/schema/meta-aliases-en.json | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/backend/schema/meta-aliases-cs.json b/backend/schema/meta-aliases-cs.json
index e1e4a8da..bc2f13f1 100644
--- a/backend/schema/meta-aliases-cs.json
+++ b/backend/schema/meta-aliases-cs.json
@@ -118,7 +118,7 @@
   ["atmosphere"             , "Atmosféra"              , null                , ""],
   ["video/index"            , "Index video stopy"      , "Index video"       , ""],
   ["video/height"           , "Výška"                  , null                , "Výška obrazu v pixelech"],
-  ["mark_out"               , "Mark out"               , "Out"               , ""],
+  ["mark_out"               , "Mark out"               , "Mark out"          , ""],
   ["description/original"   , "Původní popis"          , "Pův. popis"        , ""],
   ["language"               , "Jazyk"                  , null                , ""],
   ["audio/r128/lra/t"       , "LRA T"                  , null                , ""],
@@ -127,7 +127,7 @@
   ["audio/r128/lra/l"       , "LRA L"                  , null                , ""],
   ["id/main"                , "IDEC"                   , null                , ""],
   ["subtitle/original"      , "Původní podtitul"       , "Pův. podtitul"     , "Podtitul díla v původním jazyce"],
-  ["mark_in"                , "Mark in"                , "In"                , ""],
+  ["mark_in"                , "Mark in"                , "Mark out"          , ""],
   ["commercial/client"      , "Klient"                 , null                , "Zadavatel reklamy"],
   ["title/original"         , "Původní název"          , "Pův. název"        , "Název díla v původním jazyce"],
   ["id_storage"             , "Úložiště"               , null                , ""],
diff --git a/backend/schema/meta-aliases-en.json b/backend/schema/meta-aliases-en.json
index 6fd389a1..b11097d3 100644
--- a/backend/schema/meta-aliases-en.json
+++ b/backend/schema/meta-aliases-en.json
@@ -118,7 +118,7 @@
   ["atmosphere"             , "Atmosphere"             , null                , "Feeling summarising the atmosphere"],
   ["video/index"            , "Video track index"      , "Video index"       , ""],
   ["video/height"           , "Height"                 , null                , ""],
-  ["mark_out"               , "Mark out"               , null                , "The point in time the content proposed for editorial use starts"],
+  ["mark_out"               , "Mark out"               , "Mark out"          , "The point in time the content proposed for editorial use starts"],
   ["description/original"   , "Original description"   , "Orig. description" , ""],
   ["language"               , "Language"               , null                , "Language version of the asset"],
   ["audio/r128/lra/t"       , "LRA T"                  , null                , ""],
@@ -127,7 +127,7 @@
   ["audio/r128/lra/l"       , "LRA L"                  , null                , ""],
   ["id/main"                , "IDEC"                   , null                , "An unambiguous reference to the resource within a given context"],
   ["subtitle/original"      , "Original subtitle"      , "Orig. subtitle"    , ""],
-  ["mark_in"                , "Mark in"                , "In"                , "The point in time the content proposed for editorial use ends"],
+  ["mark_in"                , "Mark in"                , "Mark in"           , "The point in time the content proposed for editorial use ends"],
   ["commercial/client"      , "Client"                 , null                , ""],
   ["title/original"         , "Original title"         , "Orig. title"       , ""],
   ["id_storage"             , "Storage"                , null                , ""],

From d4d854a86616ed6906fc60d404ac74c5919478df Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Sat, 19 Oct 2024 19:50:52 +0200
Subject: [PATCH 39/41] fix: better time formatting

---
 backend/setup/defaults/meta_types.py        | 2 ++
 frontend/src/components/Fields.jsx          | 9 +++++----
 frontend/src/index.scss                     | 6 ++++++
 frontend/src/pages/Rundown/RundownTable.jsx | 1 -
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/backend/setup/defaults/meta_types.py b/backend/setup/defaults/meta_types.py
index 9c85aaed..b21569e5 100644
--- a/backend/setup/defaults/meta_types.py
+++ b/backend/setup/defaults/meta_types.py
@@ -90,11 +90,13 @@
     "broadcast_time": {
         "ns": "v",
         "type": T.DATETIME,
+        "mode": "time",
         "format": "%H:%M:%S",
     },
     "scheduled_time": {
         "ns": "v",
         "type": T.DATETIME,
+        "mode": "time",
         "format": "%H:%M:%S",
     },
     "rundown_difference": {
diff --git a/frontend/src/components/Fields.jsx b/frontend/src/components/Fields.jsx
index d2958694..ee82b29c 100644
--- a/frontend/src/components/Fields.jsx
+++ b/frontend/src/components/Fields.jsx
@@ -6,9 +6,10 @@ const DateTime = styled.div`
   flex-direction: row;
   gap: 8px;
   align-items: center;
-  font-size: 0.9rem;
-  > span:first-child {
-    color: ${(props) => props.theme.colors.textDim};
+  font-size: 1rem;
+  color: ${(props) => props.theme.colors.textDim};
+  > span:last-child {
+    color: ${(props) => props.theme.colors.text};
   }
 `
 
@@ -39,7 +40,7 @@ const Timestamp = ({ timestamp, mode, ...props }) => {
 
   return (
     <DateTime {...props}>
-      <span>{localDate}</span>
+      {!(mode === 'time') && <span>{localDate}</span>}
       {!(mode === 'date') && <span>{localTime}</span>}
     </DateTime>
   )
diff --git a/frontend/src/index.scss b/frontend/src/index.scss
index 26c1427d..103b64ec 100644
--- a/frontend/src/index.scss
+++ b/frontend/src/index.scss
@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,300;0,400;0,600;0,700;1,300;1,400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&display=swap');
 
 :root {
   --font-family: 'Noto Sans', Roboto, Arial, sans-serif;
@@ -11,6 +12,7 @@
   --color-text: #d7d4d5;
   --color-text-hl: #fbfbfb;
   --color-text-dim: #ababab;
+  --color-text-muted: #6b6b6b;
 
   --color-cyan: #0ed3fe;
   --color-blue: #4600ff;
@@ -171,3 +173,7 @@ section {
     cursor: grabbing !important;
   }
 }
+
+.monospace {
+  font-family: 'Noto Sans Mono', monospace;
+}
diff --git a/frontend/src/pages/Rundown/RundownTable.jsx b/frontend/src/pages/Rundown/RundownTable.jsx
index d0d910e6..2f78578f 100644
--- a/frontend/src/pages/Rundown/RundownTable.jsx
+++ b/frontend/src/pages/Rundown/RundownTable.jsx
@@ -14,7 +14,6 @@ const RundownWrapper = styled.section`
   tbody {
     .event-row {
       background-color: black;
-      font-weight: bold;
     }
   }
 `

From 0fd2baa9590702d448adcaed20494feedab66adb Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Sat, 19 Oct 2024 20:12:16 +0200
Subject: [PATCH 40/41] feat: unify title and subtitle columns in tables

---
 frontend/src/containers/Browser/Browser.jsx |  4 +++-
 frontend/src/index.scss                     |  2 +-
 frontend/src/tableFormatting.jsx            | 21 ++++++++++++++++++++-
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/frontend/src/containers/Browser/Browser.jsx b/frontend/src/containers/Browser/Browser.jsx
index 9f15c78d..4e4c212b 100644
--- a/frontend/src/containers/Browser/Browser.jsx
+++ b/frontend/src/containers/Browser/Browser.jsx
@@ -109,13 +109,15 @@ const BrowserTable = ({ isDragging }) => {
           setSortDirection(response.data.order_dir)
 
         let cols = []
-        for (const colName of response.data.columns)
+        for (const colName of response.data.columns) {
+          if (colName == 'subtitle') continue // added automatically
           cols.push({
             name: colName,
             title: nebula.metaHeader(colName),
             formatter: getFormatter(colName),
             width: getColumnWidth(colName),
           })
+        }
         setColumns(cols)
         setHasMore(hasMore)
       })
diff --git a/frontend/src/index.scss b/frontend/src/index.scss
index 103b64ec..9b02feb7 100644
--- a/frontend/src/index.scss
+++ b/frontend/src/index.scss
@@ -11,7 +11,7 @@
   --color-surface-06: #3a3544;
   --color-text: #d7d4d5;
   --color-text-hl: #fbfbfb;
-  --color-text-dim: #ababab;
+  --color-text-dim: #9c9c9c;
   --color-text-muted: #6b6b6b;
 
   --color-cyan: #0ed3fe;
diff --git a/frontend/src/tableFormatting.jsx b/frontend/src/tableFormatting.jsx
index 2788991d..7190fbdc 100644
--- a/frontend/src/tableFormatting.jsx
+++ b/frontend/src/tableFormatting.jsx
@@ -117,11 +117,30 @@ const getDefaultFormatter = (key) => {
 }
 
 const getFormatter = (key) => {
-  if (['title', 'subtitle', 'description'].includes(key))
+  if (['subtitle', 'description'].includes(key))
     // eslint-disable-next-line
     return (rowData, key) => <td>{rowData[key]}</td>
 
   switch (key) {
+    case 'title':
+      return (rowData, key) => {
+        const title = rowData[key]
+        const subtitle = rowData.subtitle
+        return (
+          <td>
+            <span>{title}</span>
+            {subtitle && (
+              <>
+                <span style={{ color: 'var(--color-text-dim)' }}>
+                  {nebula.settings.system.subtitle_separator}
+                  {subtitle}
+                </span>
+              </>
+            )}
+          </td>
+        )
+      }
+
     case 'qc/state':
       // eslint-disable-next-line
       return (rowData, key) => {

From e7e80cf4eb21ec57748ef8d15194fa225c101c1b Mon Sep 17 00:00:00 2001
From: Martastain <martas@imm.cz>
Date: Sun, 20 Oct 2024 13:04:18 +0200
Subject: [PATCH 41/41] chore: hide experimental features

---
 frontend/src/app.jsx               | 1 +
 frontend/src/containers/Navbar.jsx | 9 +++++----
 frontend/src/nebula.js             | 1 +
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app.jsx b/frontend/src/app.jsx
index f9162366..0a1f66d5 100644
--- a/frontend/src/app.jsx
+++ b/frontend/src/app.jsx
@@ -32,6 +32,7 @@ const App = () => {
       .then((response) => {
         setInitData(response.data)
         nebula.settings = response.data.settings
+        nebula.experimental = response.data.experimental || false
         nebula.plugins = response.data.frontend_plugins || []
         nebula.scopedEndpoints = response.data.scoped_endpoints || []
         nebula.user = response.data.user || {}
diff --git a/frontend/src/containers/Navbar.jsx b/frontend/src/containers/Navbar.jsx
index 5d7da21f..c9a09da6 100644
--- a/frontend/src/containers/Navbar.jsx
+++ b/frontend/src/containers/Navbar.jsx
@@ -119,11 +119,12 @@ const NavBar = () => {
       <div className="left">
         <Logo />
         <NavLink to={`/mam/editor${mamSuffix}`}>Assets</NavLink>
-        {false && nebula.settings.system.ui_asset_preview && (
-          <NavLink to={`/mam/preview${mamSuffix}`}>Preview</NavLink>
+        {nebula.experimental && (
+          <>
+            <NavLink to={`/mam/scheduler`}>Scheduler</NavLink>
+            <NavLink to={`/mam/rundown`}>Rundown</NavLink>
+          </>
         )}
-        <NavLink to={`/mam/scheduler`}>Scheduler</NavLink>
-        <NavLink to={`/mam/rundown`}>Rundown</NavLink>
         <NavLink to="/jobs">Jobs</NavLink>
         {!nebula.user.is_limited && (
           <>
diff --git a/frontend/src/nebula.js b/frontend/src/nebula.js
index 8a7ae4fe..54427446 100644
--- a/frontend/src/nebula.js
+++ b/frontend/src/nebula.js
@@ -11,6 +11,7 @@ const nebula = {
   language: 'en',
   senderId: uuidv4(),
   users: [],
+  experimental: false,
 
   // API