From deae44f141aa8f9fc341b73166f8d5fb3c3e8ee7 Mon Sep 17 00:00:00 2001
From: Kasper Olsson Hans <github@olzzon.dk>
Date: Fri, 13 Dec 2024 10:22:21 +0100
Subject: [PATCH] Properties Panel (bbc/sofie-core #22)

* wip: initial draft implementation of userEditPanel

* wip: userEditPanel grouping

* wip: userEditPanel cleanup remove schema as it's replaces by schemas

* wip: userEditPanel styling and use <select> for list

* wip: userEditPanel - make groupType optional to allow empty slots

* wip: userEditPanel - convert to FC

* wip: userEditPanel - uncomment context menu

* wip: UserEditPanel - Add DefaultUserOperationsTypes for revert buttons in panel

* wip: UserEditPanel - Default revert button on panel

* wip: UserEditPanel - tracker on part and segment

* wip: UserEditPanel - only render Segment or Part in panel

* wip: UserEditPanel - initial header for part and segment

* wip: UserEditPanel - comment for the usage of getTimePosition

* wip: UserEditPanel - add Icons in header

* wip: UserEditPanel - add button type in UserEditingDefinitions

* wip: UserEditPanel - rename revert button to "Revert Changes"

* wip: UserEditPanel - add support for SVG icons in grouping (e.g for split or DVE backgrounds)

* wip: UserEditPanel - center revert button

* wip: Renaming UserEditPanel to PropertiesPanel

* wip: UI selection - Context for SelectedElements

* wip: UI selection - refactor from useState() to useReducer()

* wip: UI selection - use type for SelectedElement

* wip: UI selection -Segment not updating upon selection

* feat: unit tests for SelectedElementsContext

* wip: UI selection - add isSelected to withSegmentTiming

* wip: fix props withSelection

* wip: fix props withSelection

* wip: remove componentDidUpdate - leftover from previous debugging

* fix: added listSelectedElements() instead of exposing the selectedElements

* fix: add assertNever() to selectionReducer

* fix: remove id and use ElementId as reference in context provider

* fix: clean up isSelected should parse boolean not function as props

* chore: update package with @testing-library/react

* fix: tests for SelecedElementsContext updated and type fixed

* fix: listSelectedElements is af function not an array

* wip: implement useSelection in PropertiesPanel

* wip: useSelection on Parts

* fix: missing rundown id in propertiespanel actions

* feat: add enabling of userediting in settings

* feat: doubleclick on part selection for properties panel

* fix: properties panel crash when no selection was made

* feat: segment selection

* feat: dbl click anywhere in segment header to select properties

* feat: select part by double clicking a piece

* feat: properties panel commit button for pending changes

* feat: select/deselect an element - fix flickering upen commit changes

* fix: render all userEditOperations when part is selected

* feat: move Properties panel out of notification center logic

* feat: use context.consumer instead of wrapping

* feat: refactor userEditing structure

* feat: properties panel with refactored data structure.

* feat: Schema selection implemented in commit button logic

* feat: implement Layer colors in group selectors

* feat: only parse the selected source on useraction commit

* feat: simplify structure for userEditing source

* fix: rerender group selection when selecting new part

* fix: read the SourceLayerType into UserEditingDefinition

* feat: selected element indicator

* feat: properties panel styling - is edited indication

* wip: add close propterties icon (sketch)

* wip: properties panel css dim commit+revert when not active

* wip: properties panel clean up first iteration selector

* wip: properties panel add close upper right

* fix: crash UI - remove transiongroup

* feat: properties panel animate in and shrink rundown view

* fix: cleanup using notificationpanel for properties panel

* wip: properties panel, rightbar icon color

* fix: re-run only if part.segmentId has changed

* wip: tests for properties panel

* wip: properties panel tests - useFaketimers and implement mock useTracker()

* wip: properties panel - element selection styling

* wip: properties panel styling edit pencil icon

* wip: properties panel close when notification is open

* wip: properties panel selection glow on segment header

* feat: StyledSchemaFormInPlace schema component

* fix: Properties panel - StyledSchemaFormInPlace schema for normal form

* feat: Properties panel is edited pencil styling

* feat: Properties header styling

* wip: Properties tests - more mocking to get correct rendering in test to work

* chore: fix unit tests

* feat: refactor form action to properties field

* chore: update styles

* chore: add actions back into property panel

* chore: support translations for properties panel

* chore: fix some build issues

* feat: allow editing piece properties

* chore: various review comments

* chore: fix tests

* chore: remove unused parameter

* chore: removed commented styles

---------

Co-authored-by: Mint de Wit <mint@superfly.tv>
---
 meteor/server/api/rest/v1/typeConversion.ts   |   2 +
 meteor/server/lib/rest/v1/studios.ts          |   1 +
 .../src/documents/part.ts                     |   8 +-
 .../src/documents/piece.ts                    |   8 +-
 .../src/documents/segment.ts                  |   8 +-
 packages/blueprints-integration/src/ingest.ts |  34 +-
 .../blueprints-integration/src/userEditing.ts |  56 ++-
 packages/corelib/src/dataModel/Part.ts        |   8 +-
 packages/corelib/src/dataModel/Piece.ts       |  12 +-
 packages/corelib/src/dataModel/Segment.ts     |   8 +-
 .../src/dataModel/UserEditingDefinitions.ts   |  59 ++-
 .../docs/for-developers/json-config-schema.md |   7 +-
 .../job-worker/src/blueprints/context/lib.ts  |  66 +++
 .../PartAndPieceInstanceActionService.ts      |   1 +
 .../job-worker/src/blueprints/postProcess.ts  |   3 +-
 .../src/ingest/generationSegment.ts           |   8 +-
 .../PlayoutPartInstanceModelImpl.ts           |  19 +-
 .../src/core/model/StudioSettings.ts          |   5 +
 packages/shared-lib/src/lib/JSONSchemaUtil.ts |   1 +
 packages/webui/jest.config.cjs                |  10 +-
 packages/webui/package.json                   |   4 +
 .../webui/src/client/__tests__/jest-setup.cjs |   1 +
 .../client/lib/Components/DropdownInput.tsx   |   2 +-
 .../client/lib/forms/SchemaFormInPlace.scss   |  75 +++
 .../client/lib/forms/SchemaFormInPlace.tsx    |   1 +
 .../lib/forms/SchemaFormWithOverrides.tsx     |  20 +-
 .../client/lib/forms/SchemaFormWithState.tsx  |  72 +++
 .../src/client/lib/ui/icons/useredits.tsx     |  23 +
 .../src/client/lib/ui/pieceUiClassNames.ts    |   3 +
 .../webui/src/client/styles/_variables.scss   |   1 +
 .../src/client/styles/elementSelected.scss    |  18 +
 packages/webui/src/client/styles/main.scss    |   2 +
 .../src/client/styles/notifications.scss      |   2 +-
 .../src/client/styles/propertiesPanel.scss    | 255 ++++++++++
 .../webui/src/client/styles/rundownView.scss  |  10 +
 packages/webui/src/client/ui/RundownView.tsx  | 451 +++++++++---------
 .../RundownView/RundownRightHandControls.tsx  |  26 +
 .../RundownView/SelectedElementsContext.tsx   | 242 ++++++++++
 .../selectedElementsContext.test.tsx          | 132 +++++
 .../ui/SegmentContainer/PieceElement.tsx      |   1 +
 .../ui/SegmentTimeline/SegmentContextMenu.tsx |  32 +-
 .../ui/SegmentTimeline/SegmentTimeline.tsx    | 153 +++---
 .../SegmentTimelineContainer.tsx              |   4 +-
 .../ui/SegmentTimeline/SourceLayerItem.tsx    | 105 ++--
 .../webui/src/client/ui/Settings/Forms.scss   |   8 +
 .../src/client/ui/Settings/Studio/Generic.tsx |  10 +
 .../ui/UserEditOperations/PropertiesPanel.tsx | 390 +++++++++++++++
 .../RenderUserEditOperations.tsx              |   5 +-
 .../__tests__/PropertiesPanel.test.tsx        | 433 +++++++++++++++++
 packages/yarn.lock                            | 154 +++++-
 50 files changed, 2604 insertions(+), 355 deletions(-)
 create mode 100644 packages/webui/src/client/lib/forms/SchemaFormInPlace.scss
 create mode 100644 packages/webui/src/client/lib/forms/SchemaFormWithState.tsx
 create mode 100644 packages/webui/src/client/lib/ui/icons/useredits.tsx
 create mode 100644 packages/webui/src/client/styles/elementSelected.scss
 create mode 100644 packages/webui/src/client/styles/propertiesPanel.scss
 create mode 100644 packages/webui/src/client/ui/RundownView/SelectedElementsContext.tsx
 create mode 100644 packages/webui/src/client/ui/RundownView/__tests__/selectedElementsContext.test.tsx
 create mode 100644 packages/webui/src/client/ui/UserEditOperations/PropertiesPanel.tsx
 create mode 100644 packages/webui/src/client/ui/UserEditOperations/__tests__/PropertiesPanel.test.tsx

diff --git a/meteor/server/api/rest/v1/typeConversion.ts b/meteor/server/api/rest/v1/typeConversion.ts
index e1ec97bea5..329a977a3b 100644
--- a/meteor/server/api/rest/v1/typeConversion.ts
+++ b/meteor/server/api/rest/v1/typeConversion.ts
@@ -367,6 +367,7 @@ export function studioSettingsFrom(apiStudioSettings: APIStudioSettings): Comple
 		enableQuickLoop: apiStudioSettings.enableQuickLoop,
 		forceQuickLoopAutoNext: forceQuickLoopAutoNextFrom(apiStudioSettings.forceQuickLoopAutoNext),
 		fallbackPartDuration: apiStudioSettings.fallbackPartDuration ?? DEFAULT_FALLBACK_PART_DURATION,
+		enableUserEdits: apiStudioSettings.enableUserEdits,
 		allowAdlibTestingSegment: apiStudioSettings.allowAdlibTestingSegment,
 		allowHold: apiStudioSettings.allowHold ?? true, // Backwards compatible
 		allowPieceDirectPlay: apiStudioSettings.allowPieceDirectPlay ?? true, // Backwards compatible
@@ -390,6 +391,7 @@ export function APIStudioSettingsFrom(settings: IStudioSettings): Complete<APISt
 		enableQuickLoop: settings.enableQuickLoop,
 		forceQuickLoopAutoNext: APIForceQuickLoopAutoNextFrom(settings.forceQuickLoopAutoNext),
 		fallbackPartDuration: settings.fallbackPartDuration,
+		enableUserEdits: settings.enableUserEdits,
 		allowAdlibTestingSegment: settings.allowAdlibTestingSegment,
 		allowHold: settings.allowHold,
 		allowPieceDirectPlay: settings.allowPieceDirectPlay,
diff --git a/meteor/server/lib/rest/v1/studios.ts b/meteor/server/lib/rest/v1/studios.ts
index 8c94d71cc7..f4c77db86f 100644
--- a/meteor/server/lib/rest/v1/studios.ts
+++ b/meteor/server/lib/rest/v1/studios.ts
@@ -216,6 +216,7 @@ export interface APIStudioSettings {
 	forceQuickLoopAutoNext?: 'disabled' | 'enabled_when_valid_duration' | 'enabled_forcing_min_duration'
 	minimumTakeSpan?: number
 	fallbackPartDuration?: number
+	enableUserEdits?: boolean
 	allowAdlibTestingSegment?: boolean
 	allowHold?: boolean
 	allowPieceDirectPlay?: boolean
diff --git a/packages/blueprints-integration/src/documents/part.ts b/packages/blueprints-integration/src/documents/part.ts
index 72a836f47c..31b030869b 100644
--- a/packages/blueprints-integration/src/documents/part.ts
+++ b/packages/blueprints-integration/src/documents/part.ts
@@ -1,4 +1,4 @@
-import type { UserEditingDefinition } from '../userEditing'
+import { UserEditingDefinition, UserEditingProperties } from '../userEditing'
 import type { NoteSeverity } from '../lib'
 import type { ITranslatableMessage } from '../translations'
 
@@ -88,6 +88,12 @@ export interface IBlueprintMutatablePart<TPrivateData = unknown, TPublicData = u
 	 * User editing definitions for this part
 	 */
 	userEditOperations?: UserEditingDefinition[]
+
+	/**
+	 * Properties that are user editable from the properties panel in the Sofie UI, if the user saves changes to these
+	 * it will trigger a user edit operation of type DefaultUserOperationEditProperties
+	 */
+	userEditProperties?: UserEditingProperties
 }
 
 export interface HackPartMediaObjectSubscription {
diff --git a/packages/blueprints-integration/src/documents/piece.ts b/packages/blueprints-integration/src/documents/piece.ts
index 69011e1463..7c7456badc 100644
--- a/packages/blueprints-integration/src/documents/piece.ts
+++ b/packages/blueprints-integration/src/documents/piece.ts
@@ -1,4 +1,4 @@
-import type { UserEditingDefinition } from '../userEditing'
+import { UserEditingDefinition, UserEditingProperties } from '../userEditing'
 import type { IBlueprintPieceGeneric } from './pieceGeneric'
 
 /** Special types of pieces. Some are not always used in all circumstances */
@@ -36,6 +36,12 @@ export interface IBlueprintPiece<TPrivateData = unknown, TPublicData = unknown>
 	 */
 	userEditOperations?: UserEditingDefinition[]
 
+	/**
+	 * Properties that are user editable from the properties panel in the Sofie UI, if the user saves changes to these
+	 * it will trigger a user edit operation of type DefaultUserOperationEditProperties
+	 */
+	userEditProperties?: UserEditingProperties
+
 	/**
 	 * Whether to stop this piece before the 'keepalive' period of the part
 	 */
diff --git a/packages/blueprints-integration/src/documents/segment.ts b/packages/blueprints-integration/src/documents/segment.ts
index 0253b43e8c..36502a893a 100644
--- a/packages/blueprints-integration/src/documents/segment.ts
+++ b/packages/blueprints-integration/src/documents/segment.ts
@@ -1,4 +1,4 @@
-import type { UserEditingDefinition } from '../userEditing'
+import { UserEditingDefinition, UserEditingProperties } from '../userEditing'
 
 export enum SegmentDisplayMode {
 	Timeline = 'timeline',
@@ -52,6 +52,12 @@ export interface IBlueprintSegment<TPrivateData = unknown, TPublicData = unknown
 	 * User editing definitions for this segment
 	 */
 	userEditOperations?: UserEditingDefinition[]
+
+	/**
+	 * Properties that are user editable from the properties panel in the Sofie UI, if the user saves changes to these
+	 * it will trigger a user edit operation of type DefaultUserOperationEditProperties
+	 */
+	userEditProperties?: UserEditingProperties
 }
 /** The Segment sent from Core */
 export interface IBlueprintSegmentDB<TPrivateData = unknown, TPublicData = unknown>
diff --git a/packages/blueprints-integration/src/ingest.ts b/packages/blueprints-integration/src/ingest.ts
index f2511241fd..7ca21420af 100644
--- a/packages/blueprints-integration/src/ingest.ts
+++ b/packages/blueprints-integration/src/ingest.ts
@@ -124,11 +124,41 @@ export interface UserOperationTarget {
 	pieceExternalId: string | undefined
 }
 
-export type DefaultUserOperations = {
-	id: '__sofie-move-segment' // Future: define properly
+export enum DefaultUserOperationsTypes {
+	REVERT_SEGMENT = '__sofie-revert-segment',
+	REVERT_PART = '__sofie-revert-part',
+	REVERT_RUNDOWN = '__sofie-revert-rundown',
+	UPDATE_PROPS = '__sofie-update-props',
+}
+
+export interface DefaultUserOperationRevertRundown {
+	id: DefaultUserOperationsTypes.REVERT_RUNDOWN
+	payload: Record<string, never>
+}
+
+export interface DefaultUserOperationRevertSegment {
+	id: DefaultUserOperationsTypes.REVERT_SEGMENT
 	payload: Record<string, never>
 }
 
+export interface DefaultUserOperationRevertPart {
+	id: DefaultUserOperationsTypes.REVERT_PART
+}
+
+export interface DefaultUserOperationEditProperties {
+	id: DefaultUserOperationsTypes.UPDATE_PROPS
+	payload: {
+		pieceTypeProperties: { type: string; value: Record<string, any> }
+		globalProperties: Record<string, any>
+	}
+}
+
+export type DefaultUserOperations =
+	| DefaultUserOperationRevertRundown
+	| DefaultUserOperationRevertSegment
+	| DefaultUserOperationRevertPart
+	| DefaultUserOperationEditProperties
+
 export interface UserOperationChange<TCustomBlueprintOperations extends { id: string } = never> {
 	/** Indicate that this change is from user operations */
 	source: IngestChangeType.User
diff --git a/packages/blueprints-integration/src/userEditing.ts b/packages/blueprints-integration/src/userEditing.ts
index 7d2c2718ea..607998cef7 100644
--- a/packages/blueprints-integration/src/userEditing.ts
+++ b/packages/blueprints-integration/src/userEditing.ts
@@ -1,6 +1,7 @@
 import type { JSONBlob } from '@sofie-automation/shared-lib/dist/lib/JSONBlob'
 import type { ITranslatableMessage } from './translations'
-import type { JSONSchema } from '@sofie-automation/shared-lib/dist/lib/JSONSchemaTypes'
+import { JSONSchema } from '@sofie-automation/shared-lib/dist/lib/JSONSchemaTypes'
+import { SourceLayerType } from './content'
 
 /**
  * Description of a user performed editing operation allowed on an document
@@ -16,8 +17,10 @@ export interface UserEditingDefinitionAction {
 	id: string
 	/** Label to show to the user for this operation */
 	label: ITranslatableMessage
-	/** Icon to show to when this action is 'active' */
+	/** Icon to show when this action is 'active' */
 	svgIcon?: string
+	/** Icon to show when this action is 'disabled' */
+	svgIconInactive?: string
 	/** Whether this action should be indicated as being active */
 	isActive?: boolean
 }
@@ -40,6 +43,53 @@ export interface UserEditingDefinitionForm {
 export enum UserEditingType {
 	/** Action */
 	ACTION = 'action',
-	/** Form of selections */
+	/** Form */
 	FORM = 'form',
 }
+
+export interface UserEditingSourceLayer {
+	sourceLayerLabel: string
+	sourceLayerType: SourceLayerType
+	schema: JSONBlob<JSONSchema>
+	defaultValue?: Record<string, any>
+}
+
+export interface UserEditingProperties {
+	/**
+	 * These properties are dependent on the (primary) piece type, the user will get the option
+	 * to select the type of piece (from the SourceLayerTypes i.e. Camera or Split etc.) and then
+	 * be presented the corresponding form
+	 *
+	 * example:
+	 * {
+	 * 	 schema: {
+	 * 	   camera: '{ "type": "object", "properties": { "input": { "type": "number" } } }',
+	 * 	   split: '{ "type": "object", ... }',
+	 * 	 },
+	 *   currentValue: {
+	 *     type: 'camera',
+	 *     value: {
+	 *       input: 3
+	 *     },
+	 *   }
+	 * }
+	 */
+	pieceTypeProperties?: {
+		schema: Record<string, UserEditingSourceLayer>
+		currentValue: { type: string; value: Record<string, any> }
+	}
+
+	/**
+	 * These are properties that are available to edit regardless of the piece type, examples
+	 * could be whether it an element is locked from NRCS updates
+	 *
+	 * if you do not want the piece type to be changed, then use only this field.
+	 */
+	globalProperties?: { schema: JSONBlob<JSONSchema>; currentValue: Record<string, any> }
+
+	/**
+	 * A list of id's of operations to be exposed on the properties panel as buttons. These operations
+	 * must be available on the element
+	 */
+	operations?: UserEditingDefinitionAction[]
+}
diff --git a/packages/corelib/src/dataModel/Part.ts b/packages/corelib/src/dataModel/Part.ts
index 5194cb98b8..9712dbe43d 100644
--- a/packages/corelib/src/dataModel/Part.ts
+++ b/packages/corelib/src/dataModel/Part.ts
@@ -3,7 +3,7 @@ import { ITranslatableMessage } from '../TranslatableMessage'
 import { PartId, RundownId, SegmentId } from './Ids'
 import { PartNote } from './Notes'
 import { ReadonlyDeep } from 'type-fest'
-import { CoreUserEditingDefinition } from './UserEditingDefinitions'
+import { CoreUserEditingDefinition, CoreUserEditingProperties } from './UserEditingDefinitions'
 
 export interface PartInvalidReason {
 	message: ITranslatableMessage
@@ -41,6 +41,12 @@ export interface DBPart extends Omit<IBlueprintPart, 'userEditOperations'> {
 	 * User editing definitions for this part
 	 */
 	userEditOperations?: CoreUserEditingDefinition[]
+
+	/**
+	 * Properties that are user editable from the properties panel in the Sofie UI, if the user saves changes to these
+	 * it will trigger a user edit operation of type DefaultUserOperationEditProperties
+	 */
+	userEditProperties?: CoreUserEditingProperties
 }
 
 export function isPartPlayable(part: Pick<ReadonlyDeep<DBPart>, 'invalid' | 'floated'>): boolean {
diff --git a/packages/corelib/src/dataModel/Piece.ts b/packages/corelib/src/dataModel/Piece.ts
index 88d8e95865..17a864341b 100644
--- a/packages/corelib/src/dataModel/Piece.ts
+++ b/packages/corelib/src/dataModel/Piece.ts
@@ -7,7 +7,7 @@ import {
 } from '@sofie-automation/blueprints-integration'
 import { ProtectedString, protectString, unprotectString } from '../protectedString'
 import { PieceId, RundownId, SegmentId, PartId } from './Ids'
-import { CoreUserEditingDefinition } from './UserEditingDefinitions'
+import { CoreUserEditingDefinition, CoreUserEditingProperties } from './UserEditingDefinitions'
 
 /** A generic list of playback availability statuses for a Piece */
 export enum PieceStatusCode {
@@ -50,7 +50,9 @@ export interface PieceGeneric extends Omit<IBlueprintPieceGeneric, 'content'> {
 	/** Stringified timelineObjects */
 	timelineObjectsString: PieceTimelineObjectsBlob
 }
-export interface Piece extends PieceGeneric, Omit<IBlueprintPieceDB, '_id' | 'content' | 'userEditOperations'> {
+export interface Piece
+	extends PieceGeneric,
+		Omit<IBlueprintPieceDB, '_id' | 'content' | 'userEditOperations' | 'userEditProperties'> {
 	/**
 	 * This is the id of the rundown this piece starts playing in.
 	 * Currently this is the only rundown the piece could be playing in
@@ -77,6 +79,12 @@ export interface Piece extends PieceGeneric, Omit<IBlueprintPieceDB, '_id' | 'co
 	 * User editing definitions for this piece
 	 */
 	userEditOperations?: CoreUserEditingDefinition[]
+
+	/**
+	 * Properties that are user editable from the properties panel in the Sofie UI, if the user saves changes to these
+	 * it will trigger a user edit operation of type DefaultUserOperationEditProperties
+	 */
+	userEditProperties?: CoreUserEditingProperties
 }
 
 export type PieceTimelineObjectsBlob = ProtectedString<'PieceTimelineObjectsBlob'>
diff --git a/packages/corelib/src/dataModel/Segment.ts b/packages/corelib/src/dataModel/Segment.ts
index f755b57efb..f07e59706d 100644
--- a/packages/corelib/src/dataModel/Segment.ts
+++ b/packages/corelib/src/dataModel/Segment.ts
@@ -1,7 +1,7 @@
 import { SegmentDisplayMode, SegmentTimingInfo } from '@sofie-automation/blueprints-integration'
 import { SegmentId, RundownId } from './Ids'
 import { SegmentNote } from './Notes'
-import { CoreUserEditingDefinition } from './UserEditingDefinitions'
+import { CoreUserEditingDefinition, CoreUserEditingProperties } from './UserEditingDefinitions'
 
 export enum SegmentOrphanedReason {
 	/** Segment is deleted from the NRCS but we still need it */
@@ -51,4 +51,10 @@ export interface DBSegment {
 	 * User editing definitions for this segment
 	 */
 	userEditOperations?: CoreUserEditingDefinition[]
+
+	/**
+	 * Properties that are user editable from the properties panel in the Sofie UI, if the user saves changes to these
+	 * it will trigger a user edit operation of type DefaultUserOperationEditProperties
+	 */
+	userEditProperties?: CoreUserEditingProperties
 }
diff --git a/packages/corelib/src/dataModel/UserEditingDefinitions.ts b/packages/corelib/src/dataModel/UserEditingDefinitions.ts
index 4930fbfbda..194b604054 100644
--- a/packages/corelib/src/dataModel/UserEditingDefinitions.ts
+++ b/packages/corelib/src/dataModel/UserEditingDefinitions.ts
@@ -1,4 +1,9 @@
-import type { UserEditingType, JSONBlob, JSONSchema } from '@sofie-automation/blueprints-integration'
+import type {
+	UserEditingType,
+	JSONBlob,
+	JSONSchema,
+	UserEditingSourceLayer,
+} from '@sofie-automation/blueprints-integration'
 import type { ITranslatableMessage } from '../TranslatableMessage'
 
 export type CoreUserEditingDefinition = CoreUserEditingDefinitionAction | CoreUserEditingDefinitionForm
@@ -9,12 +14,17 @@ export interface CoreUserEditingDefinitionAction {
 	id: string
 	/** Label to show to the user for this operation */
 	label: ITranslatableMessage
-	/** Icon to show to when this action is 'active' */
+	/** Icon to show when this action is 'active' */
 	svgIcon?: string
+	/** Icon to show when this action is 'disabled' */
+	svgIconInactive?: string
 	/** Whether this action should be indicated as being active */
 	isActive?: boolean
 }
 
+/**
+ * A simple form based operation
+ */
 export interface CoreUserEditingDefinitionForm {
 	type: UserEditingType.FORM
 	/** Id of this operation */
@@ -28,3 +38,48 @@ export interface CoreUserEditingDefinitionForm {
 	/** Translation namespaces to use when rendering this form */
 	translationNamespaces: string[]
 }
+
+export interface CoreUserEditingProperties {
+	/**
+	 * These properties are dependent on the (primary) piece type, the user will get the option
+	 * to select the type of piece (from the SourceLayerTypes i.e. Camera or Split etc.) and then
+	 * be presented the corresponding form
+	 *
+	 * example:
+	 * {
+	 * 	 schema: {
+	 * 	   camera: '{ "type": "object", "properties": { "input": { "type": "number" } } }',
+	 * 	   split: '{ "type": "object", ... }',
+	 * 	 },
+	 *   currentValue: {
+	 *     type: 'camera',
+	 *     value: {
+	 *       input: 3
+	 *     },
+	 *   }
+	 * }
+	 */
+	pieceTypeProperties?: {
+		schema: Record<string, UserEditingSourceLayer>
+		currentValue: { type: string; value: Record<string, any> }
+	}
+
+	/**
+	 * These are properties that are available to edit regardless of the piece type, examples
+	 * could be whether it an element is locked from NRCS updates
+	 *
+	 * if you do not want the piece type to be changed, then use only this field.
+	 */
+	globalProperties?: { schema: JSONBlob<JSONSchema>; currentValue: Record<string, any> }
+
+	/**
+	 * A list of id's of operations to be exposed on the properties panel as buttons. These operations
+	 * must be available on the element
+	 *
+	 * note - perhaps these should have their own full definitions?
+	 */
+	operations?: CoreUserEditingDefinitionAction[]
+
+	/** Translation namespaces to use when rendering this form */
+	translationNamespaces: string[]
+}
diff --git a/packages/documentation/docs/for-developers/json-config-schema.md b/packages/documentation/docs/for-developers/json-config-schema.md
index b56e6e6ee7..862a5dd31f 100644
--- a/packages/documentation/docs/for-developers/json-config-schema.md
+++ b/packages/documentation/docs/for-developers/json-config-schema.md
@@ -43,7 +43,12 @@ If an integer property, whether to treat it as zero-based
 ### `ui:displayType`
 
 Override the presentation with a special mode.
-Currently only valid for string properties. Valid values are 'json'.
+
+Currently only valid for:
+
+- object properties. Valid values are 'json'.
+- string properties. Valid values are 'base64-image'.
+- boolean properties. Valid values are 'switch'.
 
 ### `tsEnumNames`
 
diff --git a/packages/job-worker/src/blueprints/context/lib.ts b/packages/job-worker/src/blueprints/context/lib.ts
index 8159c41c82..60539616ec 100644
--- a/packages/job-worker/src/blueprints/context/lib.ts
+++ b/packages/job-worker/src/blueprints/context/lib.ts
@@ -13,6 +13,7 @@ import {
 	CoreUserEditingDefinition,
 	CoreUserEditingDefinitionAction,
 	CoreUserEditingDefinitionForm,
+	CoreUserEditingProperties,
 } from '@sofie-automation/corelib/dist/dataModel/UserEditingDefinitions'
 import { DBSegment } from '@sofie-automation/corelib/dist/dataModel/Segment'
 import { assertNever, clone, Complete, literal, omit } from '@sofie-automation/corelib/dist/lib'
@@ -56,6 +57,7 @@ import {
 	UserEditingDefinition,
 	UserEditingDefinitionAction,
 	UserEditingDefinitionForm,
+	UserEditingProperties,
 	UserEditingType,
 } from '@sofie-automation/blueprints-integration/dist/userEditing'
 import type { PlayoutMutatablePart } from '../../playout/model/PlayoutPartInstanceModel'
@@ -97,6 +99,7 @@ export const IBlueprintPieceObjectsSampleKeys = allKeysOfObject<IBlueprintPiece>
 	notInVision: true,
 	abSessions: true,
 	userEditOperations: true,
+	userEditProperties: true,
 	excludeDuringPartKeepalive: true,
 })
 
@@ -121,6 +124,7 @@ export const PlayoutMutatablePartSampleKeys = allKeysOfObject<PlayoutMutatablePa
 	identifier: true,
 	hackListenToMediaObjectUpdates: true,
 	userEditOperations: true,
+	userEditProperties: true,
 })
 
 /*
@@ -240,6 +244,7 @@ export function convertPieceToBlueprints(piece: ReadonlyDeep<PieceInstancePiece>
 		extendOnHold: piece.extendOnHold,
 		notInVision: piece.notInVision,
 		userEditOperations: translateUserEditsToBlueprint(piece.userEditOperations),
+		userEditProperties: translateUserEditPropertiesToBlueprint(piece.userEditProperties),
 		excludeDuringPartKeepalive: piece.excludeDuringPartKeepalive,
 	}
 
@@ -282,6 +287,7 @@ export function convertPartToBlueprints(part: ReadonlyDeep<DBPart>): IBlueprintP
 			part.hackListenToMediaObjectUpdates
 		),
 		userEditOperations: translateUserEditsToBlueprint(part.userEditOperations),
+		userEditProperties: translateUserEditPropertiesToBlueprint(part.userEditProperties),
 	}
 
 	return obj
@@ -351,6 +357,7 @@ export function convertSegmentToBlueprints(segment: ReadonlyDeep<DBSegment>): IB
 		showShelf: segment.showShelf,
 		segmentTiming: segment.segmentTiming,
 		userEditOperations: translateUserEditsToBlueprint(segment.userEditOperations),
+		userEditProperties: translateUserEditPropertiesToBlueprint(segment.userEditProperties),
 	}
 
 	return obj
@@ -514,6 +521,7 @@ function translateUserEditsToBlueprint(
 						id: userEdit.id,
 						label: omit(userEdit.label, 'namespaces'),
 						svgIcon: userEdit.svgIcon,
+						svgIconInactive: userEdit.svgIconInactive,
 						isActive: userEdit.isActive,
 					} satisfies Complete<UserEditingDefinitionAction>
 				case UserEditingType.FORM:
@@ -532,6 +540,29 @@ function translateUserEditsToBlueprint(
 	)
 }
 
+function translateUserEditPropertiesToBlueprint(
+	props: ReadonlyDeep<CoreUserEditingProperties> | undefined
+): UserEditingProperties | undefined {
+	if (!props) return undefined
+
+	return {
+		globalProperties: props.globalProperties,
+		pieceTypeProperties: props.pieceTypeProperties,
+
+		operations: props.operations?.map(
+			(userEdit) =>
+				({
+					type: UserEditingType.ACTION,
+					id: userEdit.id,
+					label: omit(userEdit.label, 'namespaces'),
+					svgIcon: userEdit.svgIcon,
+					svgIconInactive: userEdit.svgIconInactive,
+					isActive: userEdit.isActive,
+				} satisfies Complete<UserEditingDefinitionAction>)
+		),
+	}
+}
+
 export function translateUserEditsFromBlueprint(
 	userEdits: UserEditingDefinition[] | undefined,
 	blueprintIds: BlueprintId[]
@@ -547,6 +578,7 @@ export function translateUserEditsFromBlueprint(
 						id: userEdit.id,
 						label: wrapTranslatableMessageFromBlueprints(userEdit.label, blueprintIds),
 						svgIcon: userEdit.svgIcon,
+						svgIconInactive: userEdit.svgIconInactive,
 						isActive: userEdit.isActive,
 					} satisfies Complete<CoreUserEditingDefinitionAction>
 				case UserEditingType.FORM:
@@ -566,6 +598,32 @@ export function translateUserEditsFromBlueprint(
 	)
 }
 
+export function translateUserEditPropertiesFromBlueprint(
+	props: UserEditingProperties | undefined,
+	blueprintIds: BlueprintId[]
+): CoreUserEditingProperties | undefined {
+	if (!props) return undefined
+
+	return {
+		globalProperties: clone(props.globalProperties),
+		pieceTypeProperties: clone(props.pieceTypeProperties),
+
+		operations: props.operations?.map(
+			(userEdit) =>
+				({
+					type: UserEditingType.ACTION,
+					id: userEdit.id,
+					label: wrapTranslatableMessageFromBlueprints(userEdit.label, blueprintIds),
+					svgIcon: userEdit.svgIcon,
+					svgIconInactive: userEdit.svgIconInactive,
+					isActive: userEdit.isActive,
+				} satisfies Complete<UserEditingDefinitionAction>)
+		),
+
+		translationNamespaces: blueprintIds.map((id) => `blueprint_${id}`),
+	}
+}
+
 /**
  * Converts a BlueprintMutatablePart into a PlayoutMutatablePart
  */
@@ -586,6 +644,14 @@ export function convertPartialBlueprintMutablePartToCore(
 		delete playoutUpdatePart.userEditOperations
 	}
 
+	if ('userEditProperties' in updatePart) {
+		playoutUpdatePart.userEditProperties = translateUserEditPropertiesFromBlueprint(updatePart.userEditProperties, [
+			blueprintId,
+		])
+	} else {
+		delete playoutUpdatePart.userEditOperations
+	}
+
 	return playoutUpdatePart
 }
 
diff --git a/packages/job-worker/src/blueprints/context/services/PartAndPieceInstanceActionService.ts b/packages/job-worker/src/blueprints/context/services/PartAndPieceInstanceActionService.ts
index 849b95c2b0..66dd99cbfb 100644
--- a/packages/job-worker/src/blueprints/context/services/PartAndPieceInstanceActionService.ts
+++ b/packages/job-worker/src/blueprints/context/services/PartAndPieceInstanceActionService.ts
@@ -394,6 +394,7 @@ export class PartAndPieceInstanceActionService {
 			floated: false,
 			expectedDurationWithTransition: undefined, // Filled in later
 			userEditOperations: [], // Adlibbed parts can't be edited by ingest
+			userEditProperties: undefined,
 		}
 
 		const pieces = postProcessPieces(
diff --git a/packages/job-worker/src/blueprints/postProcess.ts b/packages/job-worker/src/blueprints/postProcess.ts
index 52889f9189..90afdb2fc9 100644
--- a/packages/job-worker/src/blueprints/postProcess.ts
+++ b/packages/job-worker/src/blueprints/postProcess.ts
@@ -44,7 +44,7 @@ import { setDefaultIdOnExpectedPackages } from '../ingest/expectedPackages'
 import { logger } from '../logging'
 import { validateTimeline } from 'superfly-timeline'
 import { ReadonlyDeep } from 'type-fest'
-import { translateUserEditsFromBlueprint } from './context/lib'
+import { translateUserEditPropertiesFromBlueprint, translateUserEditsFromBlueprint } from './context/lib'
 
 function getIdHash(docType: string, usedIds: Map<string, number>, uniqueId: string): string {
 	const count = usedIds.get(uniqueId)
@@ -110,6 +110,7 @@ export function postProcessPieces(
 			invalid: setInvalid ?? false,
 			timelineObjectsString: EmptyPieceTimelineObjectsBlob,
 			userEditOperations: translateUserEditsFromBlueprint(orgPiece.userEditOperations, [blueprintId]),
+			userEditProperties: translateUserEditPropertiesFromBlueprint(orgPiece.userEditProperties, [blueprintId]),
 		}
 
 		if (piece.pieceType !== IBlueprintPieceType.Normal) {
diff --git a/packages/job-worker/src/ingest/generationSegment.ts b/packages/job-worker/src/ingest/generationSegment.ts
index 2898cef866..5842047f3c 100644
--- a/packages/job-worker/src/ingest/generationSegment.ts
+++ b/packages/job-worker/src/ingest/generationSegment.ts
@@ -24,7 +24,7 @@ import { IngestReplacePartType, IngestSegmentModel } from './model/IngestSegment
 import { ReadonlyDeep } from 'type-fest'
 import { Rundown } from '@sofie-automation/corelib/dist/dataModel/Rundown'
 import { WrappedShowStyleBlueprint } from '../blueprints/cache'
-import { translateUserEditsFromBlueprint } from '../blueprints/context/lib'
+import { translateUserEditPropertiesFromBlueprint, translateUserEditsFromBlueprint } from '../blueprints/context/lib'
 
 async function getWatchedPackagesHelper(
 	context: JobContext,
@@ -293,6 +293,9 @@ function updateModelWithGeneratedSegment(
 			userEditOperations: translateUserEditsFromBlueprint(blueprintSegment.segment.userEditOperations, [
 				blueprintId,
 			]),
+			userEditProperties: translateUserEditPropertiesFromBlueprint(blueprintSegment.segment.userEditProperties, [
+				blueprintId,
+			]),
 		})
 	)
 
@@ -376,6 +379,9 @@ function updateModelWithGeneratedPart(
 			  }
 			: undefined,
 		userEditOperations: translateUserEditsFromBlueprint(blueprintPart.part.userEditOperations, [blueprintId]),
+		userEditProperties: translateUserEditPropertiesFromBlueprint(blueprintPart.part.userEditProperties, [
+			blueprintId,
+		]),
 	})
 
 	// Update pieces
diff --git a/packages/job-worker/src/playout/model/implementation/PlayoutPartInstanceModelImpl.ts b/packages/job-worker/src/playout/model/implementation/PlayoutPartInstanceModelImpl.ts
index 319b3644bb..79454df589 100644
--- a/packages/job-worker/src/playout/model/implementation/PlayoutPartInstanceModelImpl.ts
+++ b/packages/job-worker/src/playout/model/implementation/PlayoutPartInstanceModelImpl.ts
@@ -539,14 +539,17 @@ export class PlayoutPartInstanceModelImpl implements PlayoutPartInstanceModel {
 		const trimmedProps: Partial<PlayoutMutatablePart> = filterPropsToAllowed(props)
 		if (Object.keys(trimmedProps).length === 0) return false
 
-		this.#compareAndSetPartInstanceValue(
-			'part',
-			{
-				...this.partInstanceImpl.part,
-				...trimmedProps,
-			},
-			true
-		)
+		const newPart: DBPart = {
+			...this.partInstanceImpl.part,
+			...trimmedProps,
+			userEditOperations: this.partInstanceImpl.part.userEditOperations, // Replaced below if changed
+			userEditProperties: this.partInstanceImpl.part.userEditProperties,
+		}
+
+		// Only replace `userEditOperations` if new values were provided
+		if ('userEditOperations' in trimmedProps) newPart.userEditOperations = props.userEditOperations
+
+		this.#compareAndSetPartInstanceValue('part', newPart, true)
 
 		return true
 	}
diff --git a/packages/shared-lib/src/core/model/StudioSettings.ts b/packages/shared-lib/src/core/model/StudioSettings.ts
index f964362679..a4b2ec5aad 100644
--- a/packages/shared-lib/src/core/model/StudioSettings.ts
+++ b/packages/shared-lib/src/core/model/StudioSettings.ts
@@ -81,4 +81,9 @@ export interface IStudioSettings {
 	 * Enable buckets - the default behavior is to have buckets.
 	 */
 	enableBuckets: boolean
+
+	/**
+	 * Doubleclick changes behaviour as selector for userediting
+	 */
+	enableUserEdits?: boolean
 }
diff --git a/packages/shared-lib/src/lib/JSONSchemaUtil.ts b/packages/shared-lib/src/lib/JSONSchemaUtil.ts
index 02feb95420..49e6380de0 100644
--- a/packages/shared-lib/src/lib/JSONSchemaUtil.ts
+++ b/packages/shared-lib/src/lib/JSONSchemaUtil.ts
@@ -29,6 +29,7 @@ export enum SchemaFormUIField {
 	 * Currently only valid for:
 	 * - object properties. Valid values are 'json'.
 	 * - string properties. Valid values are 'base64-image'.
+	 * - boolean properties. Valid values are 'switch'.
 	 */
 	DisplayType = 'ui:displayType',
 	/**
diff --git a/packages/webui/jest.config.cjs b/packages/webui/jest.config.cjs
index 060062dd60..6458660efb 100644
--- a/packages/webui/jest.config.cjs
+++ b/packages/webui/jest.config.cjs
@@ -1,7 +1,11 @@
 module.exports = {
-	setupFilesAfterEnv: ['./src/__mocks__/_setupMocks.ts', '<rootDir>/src/client/__tests__/jest-setup.cjs'],
+	setupFilesAfterEnv: [
+		'./src/__mocks__/_setupMocks.ts',
+		'<rootDir>/src/client/__tests__/jest-setup.cjs',
+		'@testing-library/jest-dom',
+	],
 	globals: {},
-	moduleFileExtensions: ['js', 'ts'],
+	moduleFileExtensions: ['js', 'ts', 'tsx'],
 	moduleNameMapper: {
 		'meteor/(.*)': '<rootDir>/src/meteor/$1',
 	},
@@ -15,7 +19,7 @@ module.exports = {
 		'^.+\\.(js|jsx)$': ['babel-jest', { presets: ['@babel/preset-env'] }],
 	},
 	transformIgnorePatterns: ['node_modules/(?!(nanoid)/)', '\\.pnp\\.[^\\/]+$'],
-	testMatch: ['**/__tests__/**/*.(spec|test).(ts|js)'],
+	testMatch: ['**/__tests__/**/*.(spec|test).(ts|tsx|js)'],
 	testPathIgnorePatterns: ['integrationTests'],
 	testEnvironment: 'jsdom',
 	// coverageThreshold: {
diff --git a/packages/webui/package.json b/packages/webui/package.json
index 0a1ee41445..1865b82dfb 100644
--- a/packages/webui/package.json
+++ b/packages/webui/package.json
@@ -46,6 +46,7 @@
 		"@sofie-automation/meteor-lib": "1.52.0-in-development",
 		"@sofie-automation/shared-lib": "1.52.0-in-development",
 		"@sofie-automation/sorensen": "^1.4.3",
+		"@testing-library/user-event": "^14.5.2",
 		"@types/sinon": "^10.0.20",
 		"classnames": "^2.5.1",
 		"cubic-spline": "^3.0.3",
@@ -85,6 +86,9 @@
 	},
 	"devDependencies": {
 		"@babel/preset-env": "^7.24.8",
+		"@testing-library/dom": "^10.4.0",
+		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/react": "^16.0.1",
 		"@types/classnames": "^2.3.1",
 		"@types/deep-extend": "^0.6.2",
 		"@types/react": "^18.3.3",
diff --git a/packages/webui/src/client/__tests__/jest-setup.cjs b/packages/webui/src/client/__tests__/jest-setup.cjs
index bb36d10e75..8856ce9d6a 100644
--- a/packages/webui/src/client/__tests__/jest-setup.cjs
+++ b/packages/webui/src/client/__tests__/jest-setup.cjs
@@ -1,4 +1,5 @@
 /* eslint-disable node/no-unpublished-require */
+require('@testing-library/jest-dom')
 
 // used by code creating XML with the DOM API to return an XML string
 global.XMLSerializer = require('@xmldom/xmldom').XMLSerializer
diff --git a/packages/webui/src/client/lib/Components/DropdownInput.tsx b/packages/webui/src/client/lib/Components/DropdownInput.tsx
index cdc0769042..a35294aca1 100644
--- a/packages/webui/src/client/lib/Components/DropdownInput.tsx
+++ b/packages/webui/src/client/lib/Components/DropdownInput.tsx
@@ -112,7 +112,7 @@ export function DropdownInputControl<TValue>({
 			const newOptions = [
 				...options,
 				{
-					name: 'Value: ' + value,
+					name: String(value),
 					value: value,
 					i: options.length,
 				},
diff --git a/packages/webui/src/client/lib/forms/SchemaFormInPlace.scss b/packages/webui/src/client/lib/forms/SchemaFormInPlace.scss
new file mode 100644
index 0000000000..bb18be6023
--- /dev/null
+++ b/packages/webui/src/client/lib/forms/SchemaFormInPlace.scss
@@ -0,0 +1,75 @@
+// This styling has a lot of force added, and should be seen as a workaround
+// to get styling on the current Sofie UI schema/overrides components
+// without changing current look and behavior in other places of Sofie
+.styled-schema-form {
+	width: 100%;
+
+	// Force the base input-l class
+	.input-l {
+		width: 100% !important;
+		max-width: none !important;
+		margin-left: 0px;
+		border: none;
+	}
+
+	// Force the select/text-input defaults
+	.select,
+	.inline-select,
+	.text-input {
+		display: block !important;
+		position: relative;
+		width: 100% !important;
+	}
+
+	.input {
+		border: 1px solid #e5e7eb;
+		border-radius: 0.375rem;
+		padding: 0.5rem 0.75rem;
+		width: 100%;
+
+		&:focus {
+			outline: none;
+			border-color: #3b82f6;
+			box-shadow: 0 0 0 1px #3b82f6;
+			background-color: unset !important; // origo >.>
+		}
+	}
+
+	.label-text {
+		&:before {
+			content: none !important;
+		}
+	}
+
+	.dropdown {
+		background: white;
+		border: 1px solid #e5e7eb;
+		border-radius: 0.375rem;
+		width: 100%;
+		max-width: 100%;
+
+		.input,
+		.input-l {
+			border: none;
+			outline: none;
+			box-shadow: none;
+		}
+
+		&:focus-within {
+			border-color: #3b82f6;
+			box-shadow: 0 0 0 1px #3b82f6;
+		}
+	}
+
+	// Force the label over selector
+	.label-actual {
+		margin-bottom: 0.5rem !important; // Increased spacing between label and selector
+	}
+
+	.label {
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #374151;
+		display: block;
+	}
+}
diff --git a/packages/webui/src/client/lib/forms/SchemaFormInPlace.tsx b/packages/webui/src/client/lib/forms/SchemaFormInPlace.tsx
index 9afc265469..8e3f4d74f2 100644
--- a/packages/webui/src/client/lib/forms/SchemaFormInPlace.tsx
+++ b/packages/webui/src/client/lib/forms/SchemaFormInPlace.tsx
@@ -6,6 +6,7 @@ import {
 } from '../../ui/Settings/util/OverrideOpHelper'
 import { SchemaFormCommonProps } from './schemaFormUtil'
 import { SchemaFormWithOverrides } from './SchemaFormWithOverrides'
+import './SchemaFormInPlace.scss'
 
 interface SchemaFormInPlaceProps extends Omit<SchemaFormCommonProps, 'isRequired'> {
 	/** The object to be modified in place */
diff --git a/packages/webui/src/client/lib/forms/SchemaFormWithOverrides.tsx b/packages/webui/src/client/lib/forms/SchemaFormWithOverrides.tsx
index 2e9779a076..64c2213981 100644
--- a/packages/webui/src/client/lib/forms/SchemaFormWithOverrides.tsx
+++ b/packages/webui/src/client/lib/forms/SchemaFormWithOverrides.tsx
@@ -24,6 +24,7 @@ import { SchemaFormObjectTable } from './SchemaFormTable/ObjectTable'
 import { getSchemaUIField, SchemaFormUIField } from '@sofie-automation/blueprints-integration'
 import { SchemaFormSectionHeader } from './SchemaFormSectionHeader'
 import { Base64ImageInputControl } from '../Components/Base64ImageInput'
+import { ToggleSwitchControl } from '../Components/ToggleSwitch'
 
 interface SchemaFormWithOverridesProps extends SchemaFormCommonProps {
 	/** Base path of the schema within the document */
@@ -56,7 +57,7 @@ interface FormComponentProps {
 
 function useChildPropsForFormComponent(props: Readonly<SchemaFormWithOverridesProps>): FormComponentProps {
 	return useMemo(() => {
-		const title = getSchemaUIField(props.schema, SchemaFormUIField.Title) || props.attr
+		const title = getSchemaUIField(props.schema, SchemaFormUIField.Title) || props.schema.title || props.attr
 		const description = getSchemaUIField(props.schema, SchemaFormUIField.Description)
 
 		return {
@@ -113,7 +114,11 @@ export function SchemaFormWithOverrides(props: Readonly<SchemaFormWithOverridesP
 		case TypeName.Number:
 			return <NumberFormWithOverrides {...childProps} />
 		case TypeName.Boolean:
-			return <BooleanFormWithOverrides {...childProps} />
+			if (getSchemaUIField(props.schema, SchemaFormUIField.DisplayType) === 'switch') {
+				return <SwitchFormWithOverrides {...childProps} />
+			} else {
+				return <BooleanFormWithOverrides {...childProps} />
+			}
 		case TypeName.String:
 			if (getSchemaUIField(props.schema, SchemaFormUIField.DisplayType) === 'base64-image') {
 				return <Base64ImagePickerWithOverrides {...childProps} />
@@ -349,6 +354,17 @@ const BooleanFormWithOverrides = ({ commonAttrs }: Readonly<FormComponentProps>)
 	)
 }
 
+const SwitchFormWithOverrides = ({ commonAttrs }: Readonly<FormComponentProps>) => {
+	return (
+		<LabelAndOverridesForCheckbox {...commonAttrs}>
+			{(value, handleUpdate) => (
+				// <CheckboxControl classNames="input" value={value ?? false} handleUpdate={handleUpdate} />
+				<ToggleSwitchControl value={value ?? false} handleUpdate={handleUpdate} />
+			)}
+		</LabelAndOverridesForCheckbox>
+	)
+}
+
 const StringFormWithOverrides = ({ schema, commonAttrs }: Readonly<FormComponentProps>) => {
 	return (
 		<LabelAndOverrides {...commonAttrs}>
diff --git a/packages/webui/src/client/lib/forms/SchemaFormWithState.tsx b/packages/webui/src/client/lib/forms/SchemaFormWithState.tsx
new file mode 100644
index 0000000000..77e84b75ee
--- /dev/null
+++ b/packages/webui/src/client/lib/forms/SchemaFormWithState.tsx
@@ -0,0 +1,72 @@
+import { useCallback, useMemo } from 'react'
+import {
+	OverrideOpHelperForItemContentsBatcher,
+	WrappedOverridableItemNormal,
+} from '../../ui/Settings/util/OverrideOpHelper'
+import { SchemaFormCommonProps } from './schemaFormUtil'
+import { SchemaFormWithOverrides } from './SchemaFormWithOverrides'
+import { literal, objectPathSet } from '@sofie-automation/corelib/dist/lib'
+import { AnyARecord } from 'dns'
+
+interface SchemaFormWithStateProps extends Omit<SchemaFormCommonProps, 'isRequired'> {
+	object: any
+
+	onUpdate: (object: any) => void
+}
+
+export function SchemaFormWithState({
+	object,
+	onUpdate,
+	...commonProps
+}: Readonly<SchemaFormWithStateProps>): JSX.Element {
+	const helper = useCallback(
+		() =>
+			new OverrideOpHelperWithState(object, (object) => {
+				onUpdate(object)
+			}),
+		[object, onUpdate]
+	)
+
+	const wrappedItem = useMemo(
+		() =>
+			literal<WrappedOverridableItemNormal<any>>({
+				type: 'normal',
+				id: 'not-used',
+				computed: object,
+				defaults: undefined,
+				overrideOps: [],
+			}),
+		[object]
+	)
+
+	return <SchemaFormWithOverrides {...commonProps} attr="" item={wrappedItem} overrideHelper={helper} isRequired />
+}
+
+/**
+ * An alternate OverrideOpHelper designed to directly mutate an object, instead of using the `ObjectWithOverrides` system.
+ * This allows us to have one SchemaForm implementation that can handle working with `ObjectWithOverrides`, and simpler options
+ */
+class OverrideOpHelperWithState implements OverrideOpHelperForItemContentsBatcher {
+	readonly #object: any
+	readonly #onUpdate: (object: any) => void
+
+	constructor(object: AnyARecord, onUpdate: (object: any) => void) {
+		this.#object = object
+		this.#onUpdate = onUpdate
+	}
+
+	clearItemOverrides(_itemId: string, _subPath: string): this {
+		// Not supported as this is faking an item with overrides
+
+		return this
+	}
+	setItemValue(_itemId: string, subPath: string, value: any): this {
+		objectPathSet(this.#object, subPath, value)
+
+		return this
+	}
+
+	commit(): void {
+		this.#onUpdate(this.#object)
+	}
+}
diff --git a/packages/webui/src/client/lib/ui/icons/useredits.tsx b/packages/webui/src/client/lib/ui/icons/useredits.tsx
new file mode 100644
index 0000000000..79d913d1c9
--- /dev/null
+++ b/packages/webui/src/client/lib/ui/icons/useredits.tsx
@@ -0,0 +1,23 @@
+import { JSX } from 'react'
+
+export function UserEditsIcon(): JSX.Element {
+	return (
+		<svg width="25" height="28" viewBox="0 0 25 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M11 0C14 0 16 2.5 16 5H20V9C22.5 9 25 11.5 25 14C25 16.5 22.5 19 20 19V23H16C16 25.5 13.5 28 11 28C7.5 28 6 25.5 6 23H0V17H2C3.5 17 5 15.5 5 14C5 12.5 3.5 11 2 11H0V5H6C6 2.5 8 0 11 0ZM11 2C9 2 8 3.80859 8 5V7H2V9C4.5 9 7 11.5 7 14C7 16.5 4.5 19 2 19V21H8V23C8 24.5 9.5 26 11 26C12.5 26 14 24.5 14 23V21H18V17H20C21.5 17 23 15.5 23 14C23 12.5 21.5 11 20 11H18V7H14V5C14 3.80859 13 2 11 2Z"
+				fill="white"
+			/>
+		</svg>
+	)
+}
+
+export function UserEditsCloseIcon(): JSX.Element {
+	return (
+		<svg width="25" height="28" viewBox="0 0 25 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path
+				d="M11 0C14 0 16 2.5 16 5H20V9C22.5 9 25 11.5 25 14C25 16.5 22.5 19 20 19V23H16C16 25.5 13.5 28 11 28C7.5 28 6 25.5 6 23H0V17H2C3.5 17 5 15.5 5 14C5 12.5 3.5 11 2 11H0V5H6C6 2.5 8 0 11 0ZM11 2C9 2 8 3.80859 8 5V7H2V9C4.5 9 7 11.5 7 14C7 16.5 4.5 19 2 19V21H8V23C8 24.5 9.5 26 11 26C12.5 26 14 24.5 14 23V21H18V17H20C21.5 17 23 15.5 23 14C23 12.5 21.5 11 20 11H18V7H14V5C14 3.80859 13 2 11 2Z"
+				fill="grey"
+			/>
+		</svg>
+	)
+}
diff --git a/packages/webui/src/client/lib/ui/pieceUiClassNames.ts b/packages/webui/src/client/lib/ui/pieceUiClassNames.ts
index 4d91cb014f..a66a68e8fc 100644
--- a/packages/webui/src/client/lib/ui/pieceUiClassNames.ts
+++ b/packages/webui/src/client/lib/ui/pieceUiClassNames.ts
@@ -11,6 +11,7 @@ export function pieceUiClassNames(
 	pieceInstance: PieceUi,
 	contentStatus: ReadonlyDeep<PieceContentStatusObj> | undefined,
 	baseClassName: string,
+	selected: boolean,
 	layerType?: SourceLayerType,
 	partId?: PartId,
 	highlight?: boolean,
@@ -54,5 +55,7 @@ export function pieceUiClassNames(
 		disabled: pieceInstance.instance.disabled,
 
 		'invert-flash': highlight,
+
+		'element-selected': selected,
 	})
 }
diff --git a/packages/webui/src/client/styles/_variables.scss b/packages/webui/src/client/styles/_variables.scss
index 3db82ffacc..060ea24d42 100644
--- a/packages/webui/src/client/styles/_variables.scss
+++ b/packages/webui/src/client/styles/_variables.scss
@@ -3,6 +3,7 @@ $fullscreen-controls__button--radius: 3.125rem;
 
 $statusbar-width: 3.6rem;
 $notification-center-width: 25rem;
+$properties-panel-width: 550px;
 
 $browser-context: 16px; // Default browser font size in pixels
 
diff --git a/packages/webui/src/client/styles/elementSelected.scss b/packages/webui/src/client/styles/elementSelected.scss
new file mode 100644
index 0000000000..ed37ae296c
--- /dev/null
+++ b/packages/webui/src/client/styles/elementSelected.scss
@@ -0,0 +1,18 @@
+@import '_variables';
+
+$glow-color: rgba(255, 255, 255, 0.58);
+
+.element-selected {
+    box-shadow: inset 0 0 15px $glow-color;
+    animation: subtle-glow 1s ease-in-out infinite;
+
+    @keyframes subtle-glow {
+        0%, 100% {
+            box-shadow: inset 0 0 15px $glow-color;
+        }
+        50% {
+            box-shadow: inset 0 0 25px $glow-color,
+                        inset 0 0 35px $glow-color;
+        }
+    }
+}
\ No newline at end of file
diff --git a/packages/webui/src/client/styles/main.scss b/packages/webui/src/client/styles/main.scss
index a1d77edf9c..ee7be076bb 100644
--- a/packages/webui/src/client/styles/main.scss
+++ b/packages/webui/src/client/styles/main.scss
@@ -27,6 +27,7 @@ input {
 @import 'modalDialog';
 @import 'multiSelect';
 @import 'notifications';
+@import 'propertiesPanel';
 @import 'organization';
 @import 'overflowingContainer';
 @import 'pieceStatusIcon';
@@ -43,6 +44,7 @@ input {
 @import 'testtools';
 @import 'tooltips';
 @import 'utils';
+@import 'elementSelected';
 
 @import 'countdown/overlay';
 @import 'countdown/presenter';
diff --git a/packages/webui/src/client/styles/notifications.scss b/packages/webui/src/client/styles/notifications.scss
index 3feba6fd81..2b63a0dc9f 100644
--- a/packages/webui/src/client/styles/notifications.scss
+++ b/packages/webui/src/client/styles/notifications.scss
@@ -397,7 +397,7 @@
 .rundown-view .notification-center-panel {
 	background: #acacad;
 	color: #000;
-	top: 4rem;
+	top: 3.1rem;
 
 	&::before {
 		content: ' ';
diff --git a/packages/webui/src/client/styles/propertiesPanel.scss b/packages/webui/src/client/styles/propertiesPanel.scss
new file mode 100644
index 0000000000..e8ecd5d9ce
--- /dev/null
+++ b/packages/webui/src/client/styles/propertiesPanel.scss
@@ -0,0 +1,255 @@
+@import '../styles/itemTypeColors';
+@import '_colorScheme';
+@import '_variables';
+
+.properties-panel {
+	position: fixed;
+	background: #7b7b7b;
+	color: #000;
+	top: 4rem;
+	right: 0;
+	bottom: 0;
+	width: $properties-panel-width;
+	z-index: 292;
+
+	transform: translateX(100%);
+	animation: show 200ms 0ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
+
+	@keyframes show {
+		100% {
+			transform: unset;
+		}
+	}
+
+	&::before {
+		content: ' ';
+		display: block;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: -0.625rem;
+		width: 0.625rem;
+		background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.15) 100%);
+	}
+
+	.propertiespanel-pop-up {
+		background: #2e2e2e;
+		border-radius: 1px;
+		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
+		height: 100%;
+		width: calc(100% - 3.75rem);
+		position: relative;
+
+		display: flex;
+		flex-direction: column;
+
+		> .propertiespanel-pop-up__header {
+			background: #0a20ed;
+			color: #ddd;
+
+			max-width: 100%;
+
+			display: flex;
+			padding: 1em;
+			align-items: center;
+			gap: 0.2em;
+			align-self: stretch;
+
+			text-shadow: 0.5px 0.5px 8px rgba(0, 0, 0, 0.8);
+			font-family: Roboto;
+			font-size: 1em;
+			font-style: normal;
+			font-weight: 500;
+			line-height: normal;
+			letter-spacing: 0.5px;
+
+			> .svg {
+				width: 1em;
+				height: 1.2em;
+				flex-shrink: 0;
+			}
+			> .title {
+				flex-grow: 1;
+				flex-shrink: 1;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				overflow: hidden;
+				min-width: 0;
+			}
+			> .properties {
+				color: #fff;
+				font-family: Roboto;
+				font-size: 16px;
+				font-style: normal;
+				font-weight: 300;
+				line-height: normal;
+				letter-spacing: -0.1px;
+				flex-shrink: 0;
+			}
+			> .propertiespanel-pop-up_close {
+				height: 1em;
+				margin-left: 1em;
+				background-color: unset;
+				border: none;
+			}
+		}
+
+		> .propertiespanel-pop-up__footer {
+			flex: 1;
+			flex: 0 0 0;
+			padding: 10px;
+			display: flex;
+			justify-content: space-between;
+			gap: 12px;
+
+			> .propertiespanel-pop-up__button-group {
+				display: inherit;
+				gap: inherit;
+			}
+
+			> .propertiespanel-pop-up__button,
+			.propertiespanel-pop-up__button-group .propertiespanel-pop-up__button {
+				display: block;
+
+				border-radius: 5px;
+				border: 1px solid #7f7f7f;
+				background: #636363;
+				padding: 10px;
+
+				color: #dfdfdf;
+				font-size: 0.875em;
+				font-weight: 500;
+
+				&:active {
+					transform: scale(0.95);
+					top: 2px;
+				}
+
+				&:disabled {
+					cursor: not-allowed;
+					opacity: 0.3;
+
+					&:active {
+						transform: none;
+						top: 0;
+					}
+				}
+
+				> svg {
+					margin-top: -0.1em;
+					vertical-align: middle;
+					margin-right: -0.4em;
+					width: 1em;
+					height: 1em;
+				}
+
+				svg {
+					width: 1.3em;
+					height: 0.875em;
+				}
+
+				.label {
+					margin-left: 10px;
+					margin-right: 10px;
+					margin-top: 2px;
+					line-height: inherit;
+				}
+
+				&.start {
+					justify-self: start;
+				}
+				&.end {
+					justify-self: end;
+				}
+			}
+		}
+
+		> .propertiespanel-pop-up__contents {
+			flex: 1;
+			padding: 0.525rem 0.6375rem;
+			cursor: default;
+			overflow: hidden auto;
+			overflow-wrap: break-word;
+
+			flex: 1 0;
+
+			> hr {
+				margin-left: 0px;
+				width: 100%;
+				border-color: #7f7f7f;
+			}
+
+			> .propertiespanel-pop-up__groupselector {
+				display: flex;
+				flex-wrap: wrap;
+				margin-top: 0.5em;
+				margin-bottom: 0.5em;
+
+				> .propertiespanel-pop-up__groupselector__button {
+					@include item-type-colors();
+
+					width: 50px;
+					height: 30px;
+					border: 0px;
+					margin: 3px;
+					gap: 10px;
+					color: #ddd;
+					opacity: 0.2;
+
+					&.splits {
+						background: linear-gradient(
+							to right,
+							$segment-layer-background-camera 50%,
+							$segment-layer-background-remote 50.0001%
+						);
+					}
+
+					&.active {
+						color: #fff;
+						opacity: 1;
+					}
+				}
+			}
+
+			> .propertiespanel-pop-up__action {
+				margin-top: 15px;
+				color: #ddd;
+				padding: 4px 4px;
+			}
+
+			> .properties-panel-pop-up__form {
+				color: #ddd;
+			}
+
+			.propertiespanel-pop-up__button {
+				// margin-top: 10px;
+				background: #636363;
+				padding: 10px;
+				gap: 10px;
+				border-radius: 5px;
+				border: 1px solid #7f7f7f;
+				color: #dfdfdf;
+
+				font-size: 0.875em;
+				font-weight: 500;
+
+				&:active {
+					transform: scale(0.95);
+					top: 2px;
+				}
+
+				svg {
+					width: 1em;
+					height: 0.875em;
+				}
+
+				.label {
+					margin-left: 10px;
+					margin-right: 10px;
+					margin-top: 2px;
+					line-height: inherit;
+				}
+			}
+		}
+	}
+}
diff --git a/packages/webui/src/client/styles/rundownView.scss b/packages/webui/src/client/styles/rundownView.scss
index b454a90287..d73a06c36f 100644
--- a/packages/webui/src/client/styles/rundownView.scss
+++ b/packages/webui/src/client/styles/rundownView.scss
@@ -154,6 +154,16 @@ $break-width: 35rem;
 			transition: 0s padding-right 1s;
 		}
 	}
+
+	&.properties-panel-open {
+		padding-right: $properties-panel-width;
+		transition: 0s padding-right 1s;
+
+		> .header .rundown-overview {
+			padding-right: calc(#{$properties-panel-width} + 1.5em);
+			transition: 0s padding-right 1s;
+		}
+	}
 }
 
 body.vertical-overflow-only {
diff --git a/packages/webui/src/client/ui/RundownView.tsx b/packages/webui/src/client/ui/RundownView.tsx
index 8dd1c411a6..502d3d19f7 100644
--- a/packages/webui/src/client/ui/RundownView.tsx
+++ b/packages/webui/src/client/ui/RundownView.tsx
@@ -170,6 +170,8 @@ import { UserPermissionsContext, UserPermissions } from './UserPermissions'
 import * as RundownResolver from '../lib/RundownResolver'
 
 import { MAGIC_TIME_SCALE_FACTOR } from './SegmentTimeline/Constants'
+import { SelectedElementProvider, SelectedElementsContext } from './RundownView/SelectedElementsContext'
+import { PropertiesPanel } from './UserEditOperations/PropertiesPanel'
 
 const REHEARSAL_MARGIN = 1 * 60 * 1000
 const HIDE_NOTIFICATIONS_AFTER_MOUNT: number | undefined = 5000
@@ -3016,221 +3018,242 @@ const RundownViewContent = translateWithTracker<IPropsWithReady, IState, ITracke
 			return (
 				<RundownTimingProvider playlist={playlist} defaultDuration={Settings.defaultDisplayDuration}>
 					<StudioContext.Provider value={studio}>
-						<div
-							className={ClassNames('rundown-view', {
-								'notification-center-open': this.state.isNotificationsCenterOpen !== undefined,
-								'rundown-view--studio-mode': this.props.userPermissions.studio,
-							})}
-							style={this.getStyle()}
-							onWheelCapture={this.onWheel}
-							onContextMenu={this.onContextMenuTop}
-						>
-							{this.renderSegmentsList()}
-							<ErrorBoundary>
-								{this.props.matchedSegments &&
-									this.props.matchedSegments.length > 0 &&
-									this.props.userPermissions.studio && <AfterBroadcastForm playlist={playlist} />}
-							</ErrorBoundary>
-							<ErrorBoundary>
-								<RundownHeader
-									playlist={playlist}
-									studio={studio}
-									rundownIds={this.props.rundowns.map((r) => r._id)}
-									firstRundown={this.props.rundowns[0]}
-									onActivate={this.onActivate}
-									userPermissions={this.props.userPermissions}
-									inActiveRundownView={this.props.inActiveRundownView}
-									currentRundown={this.state.currentRundown || this.props.rundowns[0]}
-									layout={this.state.rundownHeaderLayout}
-									showStyleBase={showStyleBase}
-									showStyleVariant={showStyleVariant}
-								/>
-							</ErrorBoundary>
-							<ErrorBoundary>
-								{this.props.userPermissions.studio && !Settings.disableBlurBorder && (
-									<KeyboardFocusIndicator userPermissions={this.props.userPermissions}>
+						<SelectedElementProvider>
+							<SelectedElementsContext.Consumer>
+								{(selectionContext) => {
+									return (
 										<div
-											className={ClassNames('rundown-view__focus-lost-frame', {
-												'rundown-view__focus-lost-frame--reduce-animation': import.meta.env.DEV,
+											className={ClassNames('rundown-view', {
+												'notification-center-open': this.state.isNotificationsCenterOpen !== undefined,
+												'rundown-view--studio-mode': this.props.userPermissions.studio,
+												'properties-panel-open': selectionContext.listSelectedElements().length > 0,
 											})}
-										></div>
-									</KeyboardFocusIndicator>
-								)}
-							</ErrorBoundary>
-							<ErrorBoundary>
-								<RundownRightHandControls
-									playlistId={playlist._id}
-									isFollowingOnAir={this.state.followLiveSegments}
-									onFollowOnAir={this.onGoToLiveSegment}
-									onRewindSegments={this.onRewindSegments}
-									isNotificationCenterOpen={this.state.isNotificationsCenterOpen}
-									onToggleNotifications={this.onToggleNotifications}
-									isSupportPanelOpen={this.state.isSupportPanelOpen}
-									onToggleSupportPanel={this.onToggleSupportPanel}
-									isStudioMode={this.props.userPermissions.studio}
-									onTake={this.onTake}
-									studioRouteSets={studio.routeSets}
-									studioRouteSetExclusivityGroups={studio.routeSetExclusivityGroups}
-									onStudioRouteSetSwitch={this.onStudioRouteSetSwitch}
-									onSegmentViewMode={this.onSegmentViewModeChange}
-								/>
-							</ErrorBoundary>
-							<ErrorBoundary>{this.renderSorensenContext()}</ErrorBoundary>
-							<ErrorBoundary>
-								<VelocityReact.VelocityTransitionGroup
-									enter={{
-										animation: {
-											translateX: ['0%', '100%'],
-										},
-										easing: 'ease-out',
-										duration: 300,
-									}}
-									leave={{
-										animation: {
-											translateX: ['100%', '0%'],
-										},
-										easing: 'ease-in',
-										duration: 500,
-									}}
-								>
-									{this.state.isNotificationsCenterOpen && (
-										<NotificationCenterPanel filter={this.state.isNotificationsCenterOpen} />
-									)}
-								</VelocityReact.VelocityTransitionGroup>
-								<VelocityReact.VelocityTransitionGroup
-									enter={{
-										animation: {
-											translateX: ['0%', '100%'],
-										},
-										easing: 'ease-out',
-										duration: 300,
-									}}
-									leave={{
-										animation: {
-											translateX: ['100%', '0%'],
-										},
-										easing: 'ease-in',
-										duration: 500,
-									}}
-								>
-									{this.state.isSupportPanelOpen && (
-										<SupportPopUp>
-											<hr />
-											<button className="btn btn-secondary" onClick={this.onToggleHotkeys}>
-												{t('Show Hotkeys')}
-											</button>
-											<hr />
-											<PromiseButton
-												className="btn btn-secondary"
-												onClick={this.onTakeRundownSnapshot}
-												disableDuringFeedback={true}
-											>
-												{t('Take a Snapshot')}
-											</PromiseButton>
-											<hr />
-											{this.props.userPermissions.studio && (
-												<>
-													<button className="btn btn-secondary" onClick={this.onRestartPlayout}>
-														{t('Restart Playout')}
-													</button>
-													<hr />
-												</>
-											)}
-											{this.props.userPermissions.studio &&
-												this.props.casparCGPlayoutDevices &&
-												this.props.casparCGPlayoutDevices.map((i) => (
-													<React.Fragment key={unprotectString(i._id)}>
-														<button className="btn btn-secondary" onClick={(e) => this.onRestartCasparCG(e, i)}>
-															{t('Restart {{device}}', { device: i.name })}
-														</button>
-														<hr />
-													</React.Fragment>
-												))}
-										</SupportPopUp>
-									)}
-								</VelocityReact.VelocityTransitionGroup>
-							</ErrorBoundary>
-							<ErrorBoundary>
-								{this.props.userPermissions.studio && (
-									<Prompt
-										when={!!playlist.activationId}
-										message={t('This rundown is now active. Are you sure you want to exit this screen?')}
-									/>
-								)}
-							</ErrorBoundary>
-							<ErrorBoundary>
-								<NoraPreviewRenderer />
-							</ErrorBoundary>
-							<ErrorBoundary>
-								<SegmentContextMenu
-									contextMenuContext={this.state.contextMenuContext}
-									playlist={playlist}
-									onSetNext={this.onSetNext}
-									onSetNextSegment={this.onSetNextSegment}
-									onQueueNextSegment={this.onQueueNextSegment}
-									onSetQuickLoopStart={this.onSetQuickLoopStart}
-									onSetQuickLoopEnd={this.onSetQuickLoopEnd}
-									studioMode={this.props.userPermissions.studio}
-									enablePlayFromAnywhere={!!studio.settings.enablePlayFromAnywhere}
-									enableQuickLoop={!!studio.settings.enableQuickLoop}
-								/>
-							</ErrorBoundary>
-							<ErrorBoundary>
-								{this.state.isClipTrimmerOpen &&
-									this.state.selectedPiece &&
-									RundownUtils.isPieceInstance(this.state.selectedPiece) &&
-									(selectedPieceRundown === undefined ? (
-										<ModalDialog
-											onAccept={() => this.setState({ selectedPiece: undefined })}
-											title={t('Rundown not found')}
-											acceptText={t('Close')}
+											style={this.getStyle()}
+											onWheelCapture={this.onWheel}
+											onContextMenu={this.onContextMenuTop}
 										>
-											{t('Rundown for piece "{{pieceLabel}}" could not be found.', {
-												pieceLabel: this.state.selectedPiece.instance.piece.name,
-											})}
-										</ModalDialog>
-									) : (
-										<ClipTrimDialog
-											studio={studio}
-											playlistId={playlist._id}
-											rundown={selectedPieceRundown}
-											selectedPiece={this.state.selectedPiece.instance.piece}
-											onClose={() => this.setState({ isClipTrimmerOpen: false })}
-										/>
-									))}
-							</ErrorBoundary>
-							<ErrorBoundary>
-								<PointerLockCursor />
-							</ErrorBoundary>
-							<ErrorBoundary>
-								<Shelf
-									buckets={this.props.buckets}
-									isExpanded={
-										this.state.isInspectorShelfExpanded ||
-										(!this.state.wasShelfResizedByUser && this.state.shelfLayout?.openByDefault)
-									}
-									onChangeExpanded={this.onShelfChangeExpanded}
-									hotkeys={this.defaultHotkeys(t)}
-									playlist={this.props.playlist}
-									showStyleBase={this.props.showStyleBase}
-									showStyleVariant={this.props.showStyleVariant}
-									studioMode={this.props.userPermissions.studio}
-									onChangeBottomMargin={this.onChangeBottomMargin}
-									rundownLayout={this.state.shelfLayout}
-									shelfDisplayOptions={this.props.shelfDisplayOptions}
-									bucketDisplayFilter={this.props.bucketDisplayFilter}
-									studio={this.props.studio}
-								/>
-							</ErrorBoundary>
-							<ErrorBoundary>
-								{this.props.playlist && this.props.studio && this.props.showStyleBase && (
-									<RundownNotifier playlistId={this.props.playlist._id} studio={this.props.studio} />
-								)}
-							</ErrorBoundary>
-						</div>
-						{
-							// USE IN CASE OF DEBUGGING EMERGENCY
-							/* getDeveloperMode() && <div id='debug-console' className='debug-console' style={{
+											{this.renderSegmentsList()}
+											<ErrorBoundary>
+												{this.props.matchedSegments &&
+													this.props.matchedSegments.length > 0 &&
+													this.props.userPermissions.studio && <AfterBroadcastForm playlist={playlist} />}
+											</ErrorBoundary>
+											<ErrorBoundary>
+												<RundownHeader
+													playlist={playlist}
+													studio={studio}
+													rundownIds={this.props.rundowns.map((r) => r._id)}
+													firstRundown={this.props.rundowns[0]}
+													onActivate={this.onActivate}
+													userPermissions={this.props.userPermissions}
+													inActiveRundownView={this.props.inActiveRundownView}
+													currentRundown={this.state.currentRundown || this.props.rundowns[0]}
+													layout={this.state.rundownHeaderLayout}
+													showStyleBase={showStyleBase}
+													showStyleVariant={showStyleVariant}
+												/>
+											</ErrorBoundary>
+											<ErrorBoundary>
+												{this.props.userPermissions.studio && !Settings.disableBlurBorder && (
+													<KeyboardFocusIndicator userPermissions={this.props.userPermissions}>
+														<div
+															className={ClassNames('rundown-view__focus-lost-frame', {
+																'rundown-view__focus-lost-frame--reduce-animation': import.meta.env.DEV,
+															})}
+														></div>
+													</KeyboardFocusIndicator>
+												)}
+											</ErrorBoundary>
+											<ErrorBoundary>
+												<RundownRightHandControls
+													playlistId={playlist._id}
+													isFollowingOnAir={this.state.followLiveSegments}
+													onFollowOnAir={this.onGoToLiveSegment}
+													onRewindSegments={this.onRewindSegments}
+													isNotificationCenterOpen={this.state.isNotificationsCenterOpen}
+													onToggleNotifications={this.onToggleNotifications}
+													isSupportPanelOpen={this.state.isSupportPanelOpen}
+													onToggleSupportPanel={this.onToggleSupportPanel}
+													isStudioMode={this.props.userPermissions.studio}
+													isUserEditsEnabled={this.props.studio?.settings.enableUserEdits ?? false}
+													onTake={this.onTake}
+													studioRouteSets={studio.routeSets}
+													studioRouteSetExclusivityGroups={studio.routeSetExclusivityGroups}
+													onStudioRouteSetSwitch={this.onStudioRouteSetSwitch}
+													onSegmentViewMode={this.onSegmentViewModeChange}
+												/>
+											</ErrorBoundary>
+											<ErrorBoundary>{this.renderSorensenContext()}</ErrorBoundary>
+											<ErrorBoundary>
+												<VelocityReact.VelocityTransitionGroup
+													enter={{
+														animation: {
+															translateX: ['0%', '100%'],
+														},
+														easing: 'ease-out',
+														duration: 300,
+													}}
+													leave={{
+														animation: {
+															translateX: ['100%', '0%'],
+														},
+														easing: 'ease-in',
+														duration: 500,
+													}}
+												>
+													{this.state.isNotificationsCenterOpen && (
+														<NotificationCenterPanel filter={this.state.isNotificationsCenterOpen} />
+													)}
+												</VelocityReact.VelocityTransitionGroup>
+												{!this.state.isNotificationsCenterOpen &&
+													selectionContext.listSelectedElements().length > 0 && (
+														<div>
+															<PropertiesPanel />
+														</div>
+													)}
+												<VelocityReact.VelocityTransitionGroup
+													enter={{
+														animation: {
+															translateX: ['0%', '100%'],
+														},
+														easing: 'ease-out',
+														duration: 300,
+													}}
+													leave={{
+														animation: {
+															translateX: ['100%', '0%'],
+														},
+														easing: 'ease-in',
+														duration: 500,
+													}}
+												>
+													{this.state.isSupportPanelOpen && (
+														<SupportPopUp>
+															<hr />
+															<button className="btn btn-secondary" onClick={this.onToggleHotkeys}>
+																{t('Show Hotkeys')}
+															</button>
+															<hr />
+															<PromiseButton
+																className="btn btn-secondary"
+																onClick={this.onTakeRundownSnapshot}
+																disableDuringFeedback={true}
+															>
+																{t('Take a Snapshot')}
+															</PromiseButton>
+															<hr />
+															{this.props.userPermissions.studio && (
+																<>
+																	<button className="btn btn-secondary" onClick={this.onRestartPlayout}>
+																		{t('Restart Playout')}
+																	</button>
+																	<hr />
+																</>
+															)}
+															{this.props.userPermissions.studio &&
+																this.props.casparCGPlayoutDevices &&
+																this.props.casparCGPlayoutDevices.map((i) => (
+																	<React.Fragment key={unprotectString(i._id)}>
+																		<button className="btn btn-secondary" onClick={(e) => this.onRestartCasparCG(e, i)}>
+																			{t('Restart {{device}}', { device: i.name })}
+																		</button>
+																		<hr />
+																	</React.Fragment>
+																))}
+														</SupportPopUp>
+													)}
+												</VelocityReact.VelocityTransitionGroup>
+											</ErrorBoundary>
+											<ErrorBoundary>
+												{this.props.userPermissions.studio && (
+													<Prompt
+														when={!!playlist.activationId}
+														message={t('This rundown is now active. Are you sure you want to exit this screen?')}
+													/>
+												)}
+											</ErrorBoundary>
+											<ErrorBoundary>
+												<NoraPreviewRenderer />
+											</ErrorBoundary>
+											<ErrorBoundary>
+												<SegmentContextMenu
+													contextMenuContext={this.state.contextMenuContext}
+													playlist={playlist}
+													onSetNext={this.onSetNext}
+													onSetNextSegment={this.onSetNextSegment}
+													onQueueNextSegment={this.onQueueNextSegment}
+													onSetQuickLoopStart={this.onSetQuickLoopStart}
+													onSetQuickLoopEnd={this.onSetQuickLoopEnd}
+													onEditSegmentProps={(id) =>
+														selectionContext.clearAndSetSelection({ type: 'segment', elementId: id })
+													}
+													onEditPartProps={(id) =>
+														selectionContext.clearAndSetSelection({ type: 'part', elementId: id })
+													}
+													studioMode={this.props.userPermissions.studio}
+													enablePlayFromAnywhere={!!studio.settings.enablePlayFromAnywhere}
+													enableQuickLoop={!!studio.settings.enableQuickLoop}
+													enableUserEdits={!!studio.settings.enableUserEdits}
+												/>
+											</ErrorBoundary>
+											<ErrorBoundary>
+												{this.state.isClipTrimmerOpen &&
+													this.state.selectedPiece &&
+													RundownUtils.isPieceInstance(this.state.selectedPiece) &&
+													(selectedPieceRundown === undefined ? (
+														<ModalDialog
+															onAccept={() => this.setState({ selectedPiece: undefined })}
+															title={t('Rundown not found')}
+															acceptText={t('Close')}
+														>
+															{t('Rundown for piece "{{pieceLabel}}" could not be found.', {
+																pieceLabel: this.state.selectedPiece.instance.piece.name,
+															})}
+														</ModalDialog>
+													) : (
+														<ClipTrimDialog
+															studio={studio}
+															playlistId={playlist._id}
+															rundown={selectedPieceRundown}
+															selectedPiece={this.state.selectedPiece.instance.piece}
+															onClose={() => this.setState({ isClipTrimmerOpen: false })}
+														/>
+													))}
+											</ErrorBoundary>
+											<ErrorBoundary>
+												<PointerLockCursor />
+											</ErrorBoundary>
+											<ErrorBoundary>
+												<Shelf
+													buckets={this.props.buckets}
+													isExpanded={
+														this.state.isInspectorShelfExpanded ||
+														(!this.state.wasShelfResizedByUser && this.state.shelfLayout?.openByDefault)
+													}
+													onChangeExpanded={this.onShelfChangeExpanded}
+													hotkeys={this.defaultHotkeys(t)}
+													playlist={this.props.playlist}
+													showStyleBase={this.props.showStyleBase}
+													showStyleVariant={this.props.showStyleVariant}
+													studioMode={this.props.userPermissions.studio}
+													onChangeBottomMargin={this.onChangeBottomMargin}
+													rundownLayout={this.state.shelfLayout}
+													shelfDisplayOptions={this.props.shelfDisplayOptions}
+													bucketDisplayFilter={this.props.bucketDisplayFilter}
+													studio={this.props.studio}
+												/>
+											</ErrorBoundary>
+											<ErrorBoundary>
+												{this.props.playlist && this.props.studio && this.props.showStyleBase && (
+													<RundownNotifier playlistId={this.props.playlist._id} studio={this.props.studio} />
+												)}
+											</ErrorBoundary>
+										</div>
+									)
+								}}
+								{
+									// USE IN CASE OF DEBUGGING EMERGENCY
+									/* getDeveloperMode() && <div id='debug-console' className='debug-console' style={{
 							background: 'rgba(255,255,255,0.7)',
 							color: '#000',
 							position: 'fixed',
@@ -3240,7 +3263,9 @@ const RundownViewContent = translateWithTracker<IPropsWithReady, IState, ITracke
 							pointerEvents: 'none'
 						}}>
 						</div> */
-						}
+								}
+							</SelectedElementsContext.Consumer>
+						</SelectedElementProvider>
 					</StudioContext.Provider>
 				</RundownTimingProvider>
 			)
diff --git a/packages/webui/src/client/ui/RundownView/RundownRightHandControls.tsx b/packages/webui/src/client/ui/RundownView/RundownRightHandControls.tsx
index 7063581d2b..974415f5fd 100644
--- a/packages/webui/src/client/ui/RundownView/RundownRightHandControls.tsx
+++ b/packages/webui/src/client/ui/RundownView/RundownRightHandControls.tsx
@@ -24,6 +24,8 @@ import { SegmentViewMode } from '../../lib/ui/icons/listView'
 import { RundownPlaylistId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { MediaStatusPopUp } from './MediaStatusPopUp'
 import { MediaStatusIcon } from '../../lib/ui/icons/mediaStatus'
+import { SelectedElementsContext } from './SelectedElementsContext'
+import { UserEditsCloseIcon, UserEditsIcon } from '../../lib/ui/icons/useredits'
 
 interface IProps {
 	playlistId: RundownPlaylistId
@@ -39,6 +41,7 @@ interface IProps {
 	isNotificationCenterOpen: NoticeLevel | undefined
 	isSupportPanelOpen: boolean
 	isStudioMode: boolean
+	isUserEditsEnabled: boolean
 	onToggleNotifications?: (e: React.MouseEvent<HTMLButtonElement>, filter: NoticeLevel) => void
 	onToggleSupportPanel?: (e: React.MouseEvent<HTMLButtonElement>) => void
 	onTake?: (e: React.MouseEvent<HTMLButtonElement>) => void
@@ -153,6 +156,9 @@ export function RundownRightHandControls(props: Readonly<IProps>): JSX.Element {
 					className="type-notification"
 					title={t('Notes')}
 				/>
+				{props.isUserEditsEnabled && (
+					<PropertiesPanelToggle isNotificationCenterOpen={props.isNotificationCenterOpen} />
+				)}
 				<button
 					className="status-bar__controls__button"
 					role="button"
@@ -300,3 +306,23 @@ export function RundownRightHandControls(props: Readonly<IProps>): JSX.Element {
 		</div>
 	)
 }
+
+function PropertiesPanelToggle(props: { isNotificationCenterOpen: NoticeLevel | undefined }) {
+	return (
+		<SelectedElementsContext.Consumer>
+			{(context) => {
+				const isOpen = context.listSelectedElements().length > 0 && !props.isNotificationCenterOpen
+				return (
+					<button
+						onClick={context.clearSelections}
+						className={classNames('status-bar__controls__button', {
+							'status-bar__controls__button--open': isOpen,
+						})}
+					>
+						{isOpen ? <UserEditsIcon /> : <UserEditsCloseIcon />}
+					</button>
+				)
+			}}
+		</SelectedElementsContext.Consumer>
+	)
+}
diff --git a/packages/webui/src/client/ui/RundownView/SelectedElementsContext.tsx b/packages/webui/src/client/ui/RundownView/SelectedElementsContext.tsx
new file mode 100644
index 0000000000..679ef0a067
--- /dev/null
+++ b/packages/webui/src/client/ui/RundownView/SelectedElementsContext.tsx
@@ -0,0 +1,242 @@
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useState } from 'react'
+import {
+	AdLibActionId,
+	PartId,
+	PartInstanceId,
+	PieceId,
+	RundownId,
+	SegmentId,
+} from '@sofie-automation/corelib/dist/dataModel/Ids'
+import { assertNever } from '@sofie-automation/corelib/dist/lib'
+import { DBPart } from '@sofie-automation/corelib/dist/dataModel/Part'
+import { Piece } from '@sofie-automation/corelib/dist/dataModel/Piece'
+import { DBSegment } from '@sofie-automation/corelib/dist/dataModel/Segment'
+import { Tracker } from 'meteor/tracker'
+import { Pieces, Segments } from '../../collections'
+import { UIParts } from '../Collections'
+
+interface RundownElement {
+	type: 'rundown'
+	elementId: RundownId
+}
+
+interface SegmentElement {
+	type: 'segment'
+	elementId: SegmentId
+}
+
+interface PartElement {
+	type: 'part'
+	elementId: PartId
+}
+
+interface PartInstanceElement {
+	type: 'partInstance'
+	elementId: PartInstanceId
+}
+
+interface PieceElement {
+	type: 'piece'
+	elementId: PieceId
+}
+
+interface AdlibActionElement {
+	type: 'adlibAction'
+	elementId: AdLibActionId
+}
+
+// Union types for all possible elements
+export type SelectedElement =
+	| RundownElement
+	| SegmentElement
+	| PartElement
+	| PartInstanceElement
+	| PieceElement
+	| AdlibActionElement
+type ElementId = SelectedElement['elementId']
+
+export interface SelectionContextType {
+	isSelected: (elementId: ElementId) => boolean
+	listSelectedElements: () => SelectedElement[]
+	clearAndSetSelection: (element: SelectedElement) => void
+	toggleSelection: (element: SelectedElement) => void
+	addSelection: (element: SelectedElement) => void
+	removeSelection: (elementId: ElementId) => void
+	clearSelections: () => void
+	getSelectedCount: () => number
+}
+
+type SelectionAction =
+	| { type: 'CLEAR_AND_SET_SELECTION'; payload: SelectedElement }
+	| { type: 'TOGGLE_SELECTION'; payload: SelectedElement }
+	| { type: 'ADD_SELECTION'; payload: SelectedElement }
+	| { type: 'REMOVE_SELECTION'; payload: ElementId }
+	| { type: 'CLEAR_SELECTIONS' }
+
+// Reducer function
+const selectionReducer = (
+	state: Map<ElementId, SelectedElement>,
+	action: SelectionAction,
+	maxSelections: number
+): Map<ElementId, SelectedElement> => {
+	switch (action.type) {
+		case 'CLEAR_AND_SET_SELECTION': {
+			const newMap = new Map([[action.payload.elementId, action.payload]])
+			return newMap
+		}
+		case 'TOGGLE_SELECTION': {
+			const next = new Map(state)
+			if (next.has(action.payload.elementId)) {
+				next.delete(action.payload.elementId)
+			} else if (next.size < maxSelections) {
+				next.set(action.payload.elementId, action.payload)
+			}
+			return next
+		}
+		case 'ADD_SELECTION': {
+			if (state.size >= maxSelections) return state
+			const next = new Map(state)
+			next.set(action.payload.elementId, action.payload)
+			return next
+		}
+		case 'REMOVE_SELECTION': {
+			const next = new Map(state)
+			next.delete(action.payload)
+			return next
+		}
+		case 'CLEAR_SELECTIONS': {
+			return new Map()
+		}
+		default:
+			assertNever(action)
+			return state
+	}
+}
+
+const defaultSelectionContext: SelectionContextType = {
+	isSelected: () => false,
+	listSelectedElements: () => [],
+	clearAndSetSelection: () => {
+		throw new Error('Method "clearAndSetSelection" not implemented on default SelectedElementsContext')
+	},
+	toggleSelection: () => {
+		throw new Error('Method "toggleSelection" not implemented on default SelectedElementsContext')
+	},
+	addSelection: () => {
+		throw new Error('Method "addSelection" not implemented on default SelectedElementsContext')
+	},
+	removeSelection: () => {
+		throw new Error('Method "removeSelection" not implemented on default SelectedElementsContext')
+	},
+	clearSelections: () => {
+		throw new Error('Method "clearSelections" not implemented on default SelectedElementsContext')
+	},
+	getSelectedCount: () => 0,
+}
+
+export const SelectedElementsContext = createContext<SelectionContextType>(defaultSelectionContext)
+
+export const SelectedElementProvider: React.FC<{
+	children: React.ReactNode
+	maxSelections?: number // Optional prop to limit maximum selections
+}> = ({ children, maxSelections = 10 }) => {
+	const [selectedElements, dispatch] = useReducer(
+		(state: Map<ElementId, SelectedElement>, action: SelectionAction) => selectionReducer(state, action, maxSelections),
+		new Map()
+	)
+
+	const value = useMemo(
+		() => ({
+			isSelected: (elementId: ElementId) => {
+				return selectedElements.has(elementId)
+			},
+
+			listSelectedElements: () => {
+				return Array.from(selectedElements.values())
+			},
+
+			clearAndSetSelection: (element: SelectedElement) => {
+				dispatch({ type: 'CLEAR_AND_SET_SELECTION', payload: element })
+			},
+
+			toggleSelection: (element: SelectedElement) => {
+				dispatch({ type: 'TOGGLE_SELECTION', payload: element })
+			},
+
+			addSelection: (element: SelectedElement) => {
+				dispatch({ type: 'ADD_SELECTION', payload: element })
+			},
+
+			removeSelection: (elementId: ElementId) => {
+				dispatch({ type: 'REMOVE_SELECTION', payload: elementId })
+			},
+
+			clearSelections: () => {
+				dispatch({ type: 'CLEAR_SELECTIONS' })
+			},
+			getSelectedCount: () => {
+				return selectedElements.size
+			},
+		}),
+		[selectedElements, maxSelections]
+	)
+
+	return <SelectedElementsContext.Provider value={value}>{children}</SelectedElementsContext.Provider>
+}
+
+// Custom hook for using the selection context
+export const useSelectedElementsContext = (): SelectionContextType => {
+	const context = useContext(SelectedElementsContext)
+
+	return context
+}
+
+// Helper hook for common selection patterns
+export const useElementSelection = (element: SelectedElement): { isSelected: boolean; toggleSelection: () => void } => {
+	const { isSelected, toggleSelection } = useSelectedElementsContext()
+
+	return {
+		isSelected: useMemo(() => isSelected(element.elementId), [isSelected, element.elementId]),
+		toggleSelection: useCallback(() => toggleSelection(element), [toggleSelection, element]),
+	}
+}
+
+export function useSelectedElements(
+	selectedElement: SelectedElement,
+	clearPendingChange: () => void
+): {
+	piece: Piece | undefined
+	part: DBPart | undefined
+	segment: DBSegment | undefined
+	rundownId: RundownId | undefined
+} {
+	const [piece, setPiece] = useState<Piece | undefined>(undefined)
+	const [part, setPart] = useState<DBPart | undefined>(undefined)
+	const [segment, setSegment] = useState<DBSegment | undefined>(undefined)
+	const rundownId = piece ? piece.startRundownId : part ? part.rundownId : segment?.rundownId
+
+	useEffect(() => {
+		clearPendingChange() // element id changed so any pending change is for an old element
+
+		const computation = Tracker.nonreactive(() =>
+			Tracker.autorun(() => {
+				const piece = Pieces.findOne(selectedElement?.elementId)
+				const part = UIParts.findOne({ _id: piece ? piece.startPartId : selectedElement?.elementId })
+				const segment = Segments.findOne({ _id: part ? part.segmentId : selectedElement?.elementId })
+
+				setPiece(piece)
+				setPart(part)
+				setSegment(segment)
+			})
+		)
+
+		return () => computation.stop()
+	}, [selectedElement?.elementId])
+
+	return {
+		piece,
+		part,
+		segment,
+		rundownId,
+	}
+}
diff --git a/packages/webui/src/client/ui/RundownView/__tests__/selectedElementsContext.test.tsx b/packages/webui/src/client/ui/RundownView/__tests__/selectedElementsContext.test.tsx
new file mode 100644
index 0000000000..d17952dfc8
--- /dev/null
+++ b/packages/webui/src/client/ui/RundownView/__tests__/selectedElementsContext.test.tsx
@@ -0,0 +1,132 @@
+import React from 'react'
+// eslint-disable-next-line node/no-unpublished-import
+import { renderHook, act } from '@testing-library/react'
+import { SelectedElementProvider, useSelectedElementsContext, useElementSelection } from '../SelectedElementsContext'
+import { protectString } from '@sofie-automation/corelib/dist/protectedString'
+import { RundownId, SegmentId, PartInstanceId } from '@sofie-automation/corelib/dist/dataModel/Ids'
+
+describe('SelectedElementProvider', () => {
+	const createRundownElement = (id: string) => ({
+		type: 'rundown' as const,
+		elementId: protectString<RundownId>(id),
+	})
+
+	const createSegmentElement = (id: string) => ({
+		type: 'segment' as const,
+		elementId: protectString<SegmentId>(id),
+	})
+
+	const createPartInstanceElement = (id: string) => ({
+		type: 'partInstance' as const,
+		elementId: protectString<PartInstanceId>(id),
+	})
+
+	describe('useSelection hook', () => {
+		const wrapper = ({ children }: { children: React.ReactNode }) => (
+			<SelectedElementProvider>{children}</SelectedElementProvider>
+		)
+
+		test('init with no selections', () => {
+			const { result } = renderHook(() => useSelectedElementsContext(), { wrapper })
+
+			expect(result.current.listSelectedElements().length).toBe(0)
+			expect(result.current.getSelectedCount()).toBe(0)
+		})
+
+		test('clearAndSetSelection', () => {
+			const { result } = renderHook(() => useSelectedElementsContext(), { wrapper })
+			const element1 = createRundownElement('rundown1')
+			const element2 = createRundownElement('rundown2')
+
+			act(() => {
+				result.current.clearAndSetSelection(element1)
+			})
+			expect(result.current.listSelectedElements().length).toBe(1)
+			expect(result.current.isSelected(element1.elementId)).toBe(true)
+
+			act(() => {
+				result.current.clearAndSetSelection(element2)
+			})
+			expect(result.current.listSelectedElements().length).toBe(1)
+			expect(result.current.isSelected(element1.elementId)).toBe(false)
+			expect(result.current.isSelected(element2.elementId)).toBe(true)
+		})
+
+		test('toggleSelection', () => {
+			const { result } = renderHook(() => useSelectedElementsContext(), { wrapper })
+			const element = createSegmentElement('segment1')
+
+			act(() => {
+				result.current.toggleSelection(element)
+			})
+			expect(result.current.isSelected(element.elementId)).toBe(true)
+
+			act(() => {
+				result.current.toggleSelection(element)
+			})
+			expect(result.current.isSelected(element.elementId)).toBe(false)
+		})
+
+		test('respect maxSelections limit', () => {
+			const wrapper = ({ children }: { children: React.ReactNode }) => (
+				<SelectedElementProvider maxSelections={2}>{children}</SelectedElementProvider>
+			)
+			const { result } = renderHook(() => useSelectedElementsContext(), { wrapper })
+
+			const elements = [
+				createRundownElement('rundown1'),
+				createRundownElement('rundown2'),
+				createRundownElement('rundown3'),
+			]
+
+			act(() => {
+				elements.forEach((element) => {
+					result.current.addSelection(element)
+				})
+			})
+
+			expect(result.current.getSelectedCount()).toBe(2)
+			expect(result.current.isSelected(elements[0].elementId)).toBe(true)
+			expect(result.current.isSelected(elements[1].elementId)).toBe(true)
+			expect(result.current.isSelected(elements[2].elementId)).toBe(false)
+		})
+
+		test('clearSelections removes all selections', () => {
+			const { result } = renderHook(() => useSelectedElementsContext(), { wrapper })
+
+			act(() => {
+				result.current.addSelection(createRundownElement('rundown1'))
+				result.current.addSelection(createSegmentElement('segment1'))
+			})
+			expect(result.current.getSelectedCount()).toBe(2)
+
+			act(() => {
+				result.current.clearSelections()
+			})
+			expect(result.current.getSelectedCount()).toBe(0)
+		})
+	})
+
+	describe('useElementSelection hook', () => {
+		const wrapper = ({ children }: { children: React.ReactNode }) => (
+			<SelectedElementProvider>{children}</SelectedElementProvider>
+		)
+
+		test('provide isSelected and toggleSelection for specific element', () => {
+			const element = createPartInstanceElement('part1')
+			const { result } = renderHook(() => useElementSelection(element), { wrapper })
+
+			expect(result.current.isSelected).toBe(false)
+
+			act(() => {
+				result.current.toggleSelection()
+			})
+			expect(result.current.isSelected).toBe(true)
+
+			act(() => {
+				result.current.toggleSelection()
+			})
+			expect(result.current.isSelected).toBe(false)
+		})
+	})
+})
diff --git a/packages/webui/src/client/ui/SegmentContainer/PieceElement.tsx b/packages/webui/src/client/ui/SegmentContainer/PieceElement.tsx
index cc14b3b9e2..99cdf9f13e 100644
--- a/packages/webui/src/client/ui/SegmentContainer/PieceElement.tsx
+++ b/packages/webui/src/client/ui/SegmentContainer/PieceElement.tsx
@@ -45,6 +45,7 @@ export const PieceElement = React.forwardRef<HTMLDivElement, React.PropsWithChil
 				piece,
 				contentStatus,
 				className,
+				false,
 				layer?.type,
 				partId,
 				highlight,
diff --git a/packages/webui/src/client/ui/SegmentTimeline/SegmentContextMenu.tsx b/packages/webui/src/client/ui/SegmentTimeline/SegmentContextMenu.tsx
index 4bd028a3b0..a1603a598a 100644
--- a/packages/webui/src/client/ui/SegmentTimeline/SegmentContextMenu.tsx
+++ b/packages/webui/src/client/ui/SegmentTimeline/SegmentContextMenu.tsx
@@ -12,7 +12,7 @@ import { Translated } from '../../lib/ReactMeteorData/ReactMeteorData'
 import { RundownUtils } from '../../lib/rundown'
 import { IContextMenuContext } from '../RundownView'
 import { PartUi, SegmentUi } from './SegmentTimelineContainer'
-import { SegmentId } from '@sofie-automation/corelib/dist/dataModel/Ids'
+import { PartId, SegmentId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { SegmentOrphanedReason } from '@sofie-automation/corelib/dist/dataModel/Segment'
 import { UserEditOperationMenuItems } from '../UserEditOperations/RenderUserEditOperations'
 import * as RundownResolver from '../../lib/RundownResolver'
@@ -23,11 +23,14 @@ interface IProps {
 	onQueueNextSegment: (segmentId: SegmentId | null, e: any) => void
 	onSetQuickLoopStart: (marker: QuickLoopMarker | null, e: any) => void
 	onSetQuickLoopEnd: (marker: QuickLoopMarker | null, e: any) => void
+	onEditSegmentProps: (id: SegmentId) => void
+	onEditPartProps: (id: PartId) => void
 	playlist?: DBRundownPlaylist
 	studioMode: boolean
 	contextMenuContext: IContextMenuContext | null
 	enablePlayFromAnywhere: boolean
 	enableQuickLoop: boolean
+	enableUserEdits: boolean
 }
 interface IState {}
 
@@ -40,7 +43,12 @@ export const SegmentContextMenu = withTranslation()(
 		render(): JSX.Element | null {
 			const { t } = this.props
 
-			if (!this.props.studioMode || !this.props.playlist || !this.props.playlist.activationId) return null
+			if (
+				!this.props.studioMode ||
+				!this.props.playlist ||
+				(!this.props.enableUserEdits && !this.props.playlist.activationId)
+			)
+				return null
 
 			const part = this.getPartFromContext()
 			const segment = this.getSegmentFromContext()
@@ -98,6 +106,14 @@ export const SegmentContextMenu = withTranslation()(
 									/>
 								)}
 								<hr />
+								{this.props.enableUserEdits && (
+									<>
+										<hr />
+										<MenuItem onClick={() => this.props.onEditSegmentProps(part.instance.segmentId)}>
+											<span>{t('Edit Segment Properties')}</span>
+										</MenuItem>
+									</>
+								)}
 							</>
 						)}
 						{part && !part.instance.part.invalid && timecode !== null && (
@@ -178,6 +194,18 @@ export const SegmentContextMenu = withTranslation()(
 									userEditOperations={part.instance.part.userEditOperations}
 									isFormEditable={isPartEditAble}
 								/>
+
+								{this.props.enableUserEdits && (
+									<>
+										<hr />
+										<MenuItem onClick={() => this.props.onEditSegmentProps(part.instance.segmentId)}>
+											<span>{t('Edit Segment Properties')}</span>
+										</MenuItem>
+										<MenuItem onClick={() => this.props.onEditPartProps(part.instance.part._id)}>
+											<span>{t('Edit Part Properties')}</span>
+										</MenuItem>
+									</>
+								)}
 							</>
 						)}
 					</ContextMenu>
diff --git a/packages/webui/src/client/ui/SegmentTimeline/SegmentTimeline.tsx b/packages/webui/src/client/ui/SegmentTimeline/SegmentTimeline.tsx
index 57a64c969e..ba0f018fe6 100644
--- a/packages/webui/src/client/ui/SegmentTimeline/SegmentTimeline.tsx
+++ b/packages/webui/src/client/ui/SegmentTimeline/SegmentTimeline.tsx
@@ -56,6 +56,7 @@ import { SegmentTimeAnchorTime } from '../RundownView/RundownTiming/SegmentTimeA
 import { logger } from '../../lib/logging'
 import * as RundownResolver from '../../lib/RundownResolver'
 import { DBSegment } from '@sofie-automation/corelib/dist/dataModel/Segment'
+import { SelectedElementsContext } from '../RundownView/SelectedElementsContext'
 
 interface IProps {
 	id: string
@@ -91,8 +92,8 @@ interface IProps {
 	onFollowLiveLine?: (state: boolean, event: any) => void
 	onShowEntireSegment?: (event: React.MouseEvent | undefined) => void
 	onContextMenu?: (contextMenuContext: IContextMenuContext) => void
-	onItemClick?: (piece: PieceUi, e: React.MouseEvent<HTMLDivElement>) => void
-	onItemDoubleClick?: (item: PieceUi, e: React.MouseEvent<HTMLDivElement>) => void
+	onPieceClick?: (piece: PieceUi, e: React.MouseEvent<HTMLDivElement>) => void
+	onPieceDoubleClick?: (piece: PieceUi, e: React.MouseEvent<HTMLDivElement>) => void
 	onHeaderNoteClick?: (segmentId: SegmentId, level: NoteSeverity) => void
 	onSwitchViewMode?: (newViewMode: SegmentViewMode) => void
 	segmentRef?: (el: SegmentTimelineClass, segmentId: SegmentId) => void
@@ -115,6 +116,7 @@ interface IStateHeader {
 		}
 	>
 	useTimeOfDayCountdowns: boolean
+	// isSelected: boolean
 }
 
 interface IZoomPropsHeader {
@@ -266,6 +268,7 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 				`segment.${props.segment._id}.useTimeOfDayCountdowns`,
 				!!props.playlist.timeOfDayCountdowns
 			),
+			// isSelected: props.isSelected,
 		}
 	}
 
@@ -778,8 +781,8 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 						onCollapseOutputToggle={this.props.onCollapseOutputToggle}
 						onFollowLiveLine={this.props.onFollowLiveLine}
 						onContextMenu={this.props.onContextMenu}
-						onPieceClick={this.props.onItemClick}
-						onPieceDoubleClick={this.props.onItemDoubleClick}
+						onPieceClick={this.props.onPieceClick}
+						onPieceDoubleClick={this.props.onPieceDoubleClick}
 						onPartTooSmallChanged={this.onPartTooSmallChanged}
 						scrollWidth={this.state.timelineWidth / this.props.timeScale}
 						firstPartInSegment={firstPartInSegment}
@@ -855,8 +858,8 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 				onCollapseOutputToggle={this.props.onCollapseOutputToggle}
 				onFollowLiveLine={this.props.onFollowLiveLine}
 				onContextMenu={this.props.onContextMenu}
-				onPieceClick={this.props.onItemClick}
-				onPieceDoubleClick={this.props.onItemDoubleClick}
+				onPieceClick={this.props.onPieceClick}
+				onPieceDoubleClick={this.props.onPieceDoubleClick}
 				scrollWidth={this.state.timelineWidth / this.props.timeScale}
 				firstPartInSegment={firstPartInSegment}
 				lastPartInSegment={this.props.parts[this.props.parts.length - 1]}
@@ -1040,67 +1043,87 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 				aria-roledescription={t('segment')}
 				aria-labelledby={`segment-name-${this.props.segment._id}`}
 			>
-				<ContextMenuTrigger
-					id="segment-timeline-context-menu"
-					collect={this.getSegmentContext}
-					attributes={{
-						className: 'segment-timeline__title',
-					}}
-					holdToDisplay={contextMenuHoldToDisplayTime()}
-					renderTag="div"
-				>
-					<h2
-						id={`segment-name-${this.props.segment._id}`}
-						className={'segment-timeline__title__label' + (this.props.segment.identifier ? ' identifier' : '')}
-						data-identifier={this.props.segment.identifier}
-					>
-						{this.props.segment.name}
-					</h2>
-					{(criticalNotes > 0 || warningNotes > 0) && (
-						<div className="segment-timeline__title__notes">
-							{criticalNotes > 0 && (
-								<div
-									className="segment-timeline__title__notes__note segment-timeline__title__notes__note--critical"
-									onClick={() =>
-										this.props.onHeaderNoteClick &&
-										this.props.onHeaderNoteClick(this.props.segment._id, NoteSeverity.ERROR)
-									}
-									aria-label={t('Critical problems')}
-								>
-									<CriticalIconSmall />
-									<div className="segment-timeline__title__notes__count">{criticalNotes}</div>
-								</div>
-							)}
-							{warningNotes > 0 && (
-								<div
-									className="segment-timeline__title__notes__note segment-timeline__title__notes__note--warning"
-									onClick={() =>
-										this.props.onHeaderNoteClick &&
-										this.props.onHeaderNoteClick(this.props.segment._id, NoteSeverity.WARNING)
+				<SelectedElementsContext.Consumer>
+					{(selectElementContext) => (
+						<ContextMenuTrigger
+							id="segment-timeline-context-menu"
+							collect={this.getSegmentContext}
+							attributes={{
+								className: ClassNames('segment-timeline__title', {
+									'element-selected': selectElementContext.isSelected(this.props.segment._id),
+								}),
+							}}
+							holdToDisplay={contextMenuHoldToDisplayTime()}
+							renderTag="div"
+						>
+							<div
+								onDoubleClick={() => {
+									if (this.props.studio.settings.enableUserEdits) {
+										if (!selectElementContext.isSelected(this.props.segment._id)) {
+											selectElementContext.clearAndSetSelection({ type: 'segment', elementId: this.props.segment._id })
+										} else {
+											selectElementContext.clearSelections()
+										}
 									}
-									aria-label={t('Warnings')}
-								>
-									<WarningIconSmall />
-									<div className="segment-timeline__title__notes__count">{warningNotes}</div>
-								</div>
-							)}
-						</div>
-					)}
-					{identifiers.length > 0 && (
-						<div className="segment-timeline__part-identifiers">
-							{identifiers.map((ident) => (
-								<div
-									className="segment-timeline__part-identifiers__identifier"
-									key={ident.partId + ''}
-									onClick={() => this.onClickPartIdent(ident.partId)}
+								}}
+							>
+								<h2
+									id={`segment-name-${this.props.segment._id}`}
+									className={ClassNames('segment-timeline__title__label', {
+										identifier: this.props.segment.identifier,
+									})}
+									data-identifier={this.props.segment.identifier}
 								>
-									{ident.ident}
-								</div>
-							))}
-						</div>
+									{this.props.segment.name}
+								</h2>
+								{(criticalNotes > 0 || warningNotes > 0) && (
+									<div className="segment-timeline__title__notes">
+										{criticalNotes > 0 && (
+											<div
+												className="segment-timeline__title__notes__note segment-timeline__title__notes__note--critical"
+												onClick={() =>
+													this.props.onHeaderNoteClick &&
+													this.props.onHeaderNoteClick(this.props.segment._id, NoteSeverity.ERROR)
+												}
+												aria-label={t('Critical problems')}
+											>
+												<CriticalIconSmall />
+												<div className="segment-timeline__title__notes__count">{criticalNotes}</div>
+											</div>
+										)}
+										{warningNotes > 0 && (
+											<div
+												className="segment-timeline__title__notes__note segment-timeline__title__notes__note--warning"
+												onClick={() =>
+													this.props.onHeaderNoteClick &&
+													this.props.onHeaderNoteClick(this.props.segment._id, NoteSeverity.WARNING)
+												}
+												aria-label={t('Warnings')}
+											>
+												<WarningIconSmall />
+												<div className="segment-timeline__title__notes__count">{warningNotes}</div>
+											</div>
+										)}
+									</div>
+								)}
+								{identifiers.length > 0 && (
+									<div className="segment-timeline__part-identifiers">
+										{identifiers.map((ident) => (
+											<div
+												className="segment-timeline__part-identifiers__identifier"
+												key={ident.partId + ''}
+												onClick={() => this.onClickPartIdent(ident.partId)}
+											>
+												{ident.ident}
+											</div>
+										))}
+									</div>
+								)}
+								<HeaderEditStates userEditOperations={this.props.segment.userEditOperations} />
+							</div>
+						</ContextMenuTrigger>
 					)}
-					<HeaderEditStates userEditOperations={this.props.segment.userEditOperations} />
-				</ContextMenuTrigger>
+				</SelectedElementsContext.Consumer>
 				<div className="segment-timeline__duration" tabIndex={0}>
 					{this.props.playlist &&
 						this.props.parts &&
@@ -1241,7 +1264,7 @@ function HeaderEditStates({ userEditOperations }: HeaderEditStatesProps) {
 		<div className="segment-timeline__title__user-edit-states">
 			{userEditOperations &&
 				userEditOperations.map((operation) => {
-					if (operation.type === UserEditingType.FORM || !operation.svgIcon || !operation.isActive) return null
+					if (operation.type !== UserEditingType.ACTION || !operation.svgIcon || !operation.isActive) return null
 
 					return (
 						<div
diff --git a/packages/webui/src/client/ui/SegmentTimeline/SegmentTimelineContainer.tsx b/packages/webui/src/client/ui/SegmentTimeline/SegmentTimelineContainer.tsx
index a1b13698bc..780a31b162 100644
--- a/packages/webui/src/client/ui/SegmentTimeline/SegmentTimelineContainer.tsx
+++ b/packages/webui/src/client/ui/SegmentTimeline/SegmentTimelineContainer.tsx
@@ -656,8 +656,8 @@ const SegmentTimelineContainerContent = withResolvedSegment(
 							maxTimeScale={this.state.maxTimeScale}
 							onRecalculateMaxTimeScale={this.updateMaxTimeScale}
 							showingAllSegment={this.state.showingAllSegment}
-							onItemClick={this.props.onPieceClick}
-							onItemDoubleClick={this.props.onPieceDoubleClick}
+							onPieceClick={this.props.onPieceClick}
+							onPieceDoubleClick={this.props.onPieceDoubleClick}
 							onCollapseOutputToggle={this.onCollapseOutputToggle}
 							collapsedOutputs={this.state.collapsedOutputs}
 							scrollLeft={this.state.scrollLeft}
diff --git a/packages/webui/src/client/ui/SegmentTimeline/SourceLayerItem.tsx b/packages/webui/src/client/ui/SegmentTimeline/SourceLayerItem.tsx
index 94b71a6590..baf426a0b4 100644
--- a/packages/webui/src/client/ui/SegmentTimeline/SourceLayerItem.tsx
+++ b/packages/webui/src/client/ui/SegmentTimeline/SourceLayerItem.tsx
@@ -23,6 +23,7 @@ import { TransitionSourceRenderer } from './Renderers/TransitionSourceRenderer'
 import { UIStudio } from '@sofie-automation/meteor-lib/dist/api/studios'
 import { ReadonlyDeep } from 'type-fest'
 import { PieceContentStatusObj } from '@sofie-automation/meteor-lib/dist/api/pieceContentStatus'
+import { SelectedElementsContext } from '../RundownView/SelectedElementsContext'
 const LEFT_RIGHT_ANCHOR_SPACER = 15
 const MARGINAL_ANCHORED_WIDTH = 5
 
@@ -102,11 +103,15 @@ interface ISourceLayerItemState {
 	/** Set to `true` when the segment is "highlighted" (in focus, generally from a scroll event) */
 	highlight: boolean
 }
+
 export const SourceLayerItem = withTranslation()(
-	class SourceLayerItem extends React.Component<ISourceLayerItemProps & WithTranslation, ISourceLayerItemState> {
+	class SourceLayerItem extends React.Component<
+		ISourceLayerItemProps & WithTranslation & ISourceLayerItemProps,
+		ISourceLayerItemState
+	> {
 		animFrameHandle: number | undefined
 
-		constructor(props: ISourceLayerItemProps & WithTranslation) {
+		constructor(props: ISourceLayerItemProps & WithTranslation & ISourceLayerItemProps) {
 			super(props)
 			this.state = {
 				showMiniInspector: false,
@@ -663,42 +668,70 @@ export const SourceLayerItem = withTranslation()(
 				const elementWidth = this.getElementAbsoluteWidth()
 
 				return (
-					<div
-						className={pieceUiClassNames(
-							piece,
-							this.props.contentStatus,
-							'segment-timeline__piece',
-							this.props.layer.type,
-							this.props.part.partId,
-							this.state.highlight,
-							elementWidth,
-							this.state
-						)}
-						data-obj-id={piece.instance._id}
-						ref={this.setRef}
-						onClick={this.itemClick}
-						onDoubleClick={this.itemDblClick}
-						onMouseUp={this.itemMouseUp}
-						onMouseMove={this.moveMiniInspector}
-						onMouseEnter={this.toggleMiniInspectorOn}
-						onMouseLeave={this.toggleMiniInspectorOff}
-						style={this.getItemStyle()}
-					>
-						{this.renderInsideItem(typeClass)}
-						{DEBUG_MODE && this.props.studio && (
-							<div className="segment-timeline__debug-info">
-								{innerPiece.enable.start} /{' '}
-								{RundownUtils.formatTimeToTimecode(this.props.studio.settings, this.props.partDuration).substr(-5)} /{' '}
-								{piece.renderedDuration
-									? RundownUtils.formatTimeToTimecode(this.props.studio.settings, piece.renderedDuration).substr(-5)
-									: 'X'}{' '}
-								/{' '}
-								{typeof innerPiece.enable.duration === 'number'
-									? RundownUtils.formatTimeToTimecode(this.props.studio.settings, innerPiece.enable.duration).substr(-5)
-									: ''}
+					<SelectedElementsContext.Consumer>
+						{(selectElementContext) => (
+							<div
+								className={pieceUiClassNames(
+									piece,
+									this.props.contentStatus,
+									'segment-timeline__piece',
+									selectElementContext.isSelected(this.props.piece.instance.piece._id) ||
+										selectElementContext.isSelected(this.props.part.instance.part._id),
+									this.props.layer.type,
+									this.props.part.partId,
+									this.state.highlight,
+									elementWidth,
+									this.state
+								)}
+								data-obj-id={piece.instance._id}
+								ref={this.setRef}
+								onClick={this.itemClick}
+								onDoubleClick={(e) => {
+									if (this.props.studio?.settings.enableUserEdits) {
+										const pieceId = this.props.piece.instance.piece._id
+										if (!selectElementContext.isSelected(pieceId)) {
+											selectElementContext.clearAndSetSelection({ type: 'piece', elementId: pieceId })
+										} else {
+											selectElementContext.clearSelections()
+										}
+										// Until a proper data structure, the only reference is a part.
+										// const partId = this.props.part.instance.part._id
+										// if (!selectElementContext.isSelected(partId)) {
+										// 	selectElementContext.clearAndSetSelection({ type: 'part', elementId: partId })
+										// } else {
+										// 	selectElementContext.clearSelections()
+										// }
+									} else {
+										this.itemDblClick(e)
+									}
+								}}
+								onMouseUp={this.itemMouseUp}
+								onMouseMove={this.moveMiniInspector}
+								onMouseEnter={this.toggleMiniInspectorOn}
+								onMouseLeave={this.toggleMiniInspectorOff}
+								style={this.getItemStyle()}
+							>
+								{this.renderInsideItem(typeClass)}
+								{DEBUG_MODE && this.props.studio && (
+									<div className="segment-timeline__debug-info">
+										{innerPiece.enable.start} /{' '}
+										{RundownUtils.formatTimeToTimecode(this.props.studio.settings, this.props.partDuration).substr(-5)}{' '}
+										/{' '}
+										{piece.renderedDuration
+											? RundownUtils.formatTimeToTimecode(this.props.studio.settings, piece.renderedDuration).substr(-5)
+											: 'X'}{' '}
+										/{' '}
+										{typeof innerPiece.enable.duration === 'number'
+											? RundownUtils.formatTimeToTimecode(
+													this.props.studio.settings,
+													innerPiece.enable.duration
+											  ).substr(-5)
+											: ''}
+									</div>
+								)}
 							</div>
 						)}
-					</div>
+					</SelectedElementsContext.Consumer>
 				)
 			} else {
 				// render a placeholder
diff --git a/packages/webui/src/client/ui/Settings/Forms.scss b/packages/webui/src/client/ui/Settings/Forms.scss
index 9d5849c0aa..a31b5f5453 100644
--- a/packages/webui/src/client/ui/Settings/Forms.scss
+++ b/packages/webui/src/client/ui/Settings/Forms.scss
@@ -7,6 +7,14 @@
 	&:not(:first-child) {
 		margin-top: 20px;
 	}
+
+	&.form-dark {
+		color: white;
+
+		> .text-input.bghl {
+			color: black !important;
+		}
+	}
 }
 
 .properties-grid > :not(.field) {
diff --git a/packages/webui/src/client/ui/Settings/Studio/Generic.tsx b/packages/webui/src/client/ui/Settings/Studio/Generic.tsx
index bb2302f832..8faf2747b0 100644
--- a/packages/webui/src/client/ui/Settings/Studio/Generic.tsx
+++ b/packages/webui/src/client/ui/Settings/Studio/Generic.tsx
@@ -380,6 +380,16 @@ function StudioSettings({ studio }: { studio: DBStudio }): JSX.Element {
 				{(value, handleUpdate) => <CheckboxControl value={!!value} handleUpdate={handleUpdate} />}
 			</LabelAndOverridesForCheckbox>
 
+			<LabelAndOverridesForCheckbox
+				label={t('Double click selection for properties panel')}
+				item={wrappedItem}
+				itemKey={'enableUserEdits'}
+				overrideHelper={overrideHelper}
+				hint={t('This feature enables user edits')}
+			>
+				{(value, handleUpdate) => <CheckboxControl value={!!value} handleUpdate={handleUpdate} />}
+			</LabelAndOverridesForCheckbox>
+
 			<LabelAndOverridesForCheckbox
 				label={t('Enable QuickLoop')}
 				item={wrappedItem}
diff --git a/packages/webui/src/client/ui/UserEditOperations/PropertiesPanel.tsx b/packages/webui/src/client/ui/UserEditOperations/PropertiesPanel.tsx
new file mode 100644
index 0000000000..cd395cf6e0
--- /dev/null
+++ b/packages/webui/src/client/ui/UserEditOperations/PropertiesPanel.tsx
@@ -0,0 +1,390 @@
+import * as React from 'react'
+import { doUserAction, UserAction } from '../../lib/clientUserAction'
+import { MeteorCall } from '../../lib/meteorApi'
+import {
+	DefaultUserOperationEditProperties,
+	DefaultUserOperationsTypes,
+	JSONBlob,
+	JSONBlobParse,
+	JSONSchema,
+	UserEditingDefinitionAction,
+	UserEditingProperties,
+	UserEditingSourceLayer,
+	UserEditingType,
+} from '@sofie-automation/blueprints-integration'
+import { literal } from '@sofie-automation/corelib/dist/lib'
+import classNames from 'classnames'
+import { useTranslation } from 'react-i18next'
+import { useSelectedElements, useSelectedElementsContext } from '../RundownView/SelectedElementsContext'
+import { RundownUtils } from '../../lib/rundown'
+import * as CoreIcon from '@nrk/core-icons/jsx'
+import { useCallback, useMemo, useState } from 'react'
+import { SchemaFormWithState } from '../../lib/forms/SchemaFormWithState'
+import { translateMessage } from '@sofie-automation/corelib/dist/TranslatableMessage'
+
+type PendingChange = DefaultUserOperationEditProperties['payload']
+
+export function PropertiesPanel(): JSX.Element {
+	const { listSelectedElements, clearSelections } = useSelectedElementsContext()
+	const selectedElement = listSelectedElements()?.[0]
+	const { t } = useTranslation()
+
+	const [pendingChange, setPendingChange] = useState<PendingChange | undefined>(undefined)
+	const hasPendingChanges = !!pendingChange
+
+	const { piece, part, segment, rundownId } = useSelectedElements(selectedElement, () => setPendingChange(undefined))
+
+	const handleCommitChanges = async (e: React.MouseEvent) => {
+		if (!rundownId || !selectedElement || !pendingChange) return
+
+		doUserAction(
+			t,
+			e,
+			UserAction.EXECUTE_USER_OPERATION,
+			(e, ts) =>
+				MeteorCall.userAction.executeUserChangeOperation(
+					e,
+					ts,
+					rundownId,
+					{
+						segmentExternalId: segment?.externalId,
+						partExternalId: part?.externalId,
+						pieceExternalId: piece?.externalId,
+					},
+					literal<DefaultUserOperationEditProperties>({
+						id: DefaultUserOperationsTypes.UPDATE_PROPS,
+						payload: pendingChange,
+					})
+				),
+			() => setPendingChange(undefined)
+		)
+	}
+
+	const handleRevertChanges = (e: React.MouseEvent) => {
+		if (!rundownId || !selectedElement) return
+		setPendingChange(undefined)
+		doUserAction(t, e, UserAction.EXECUTE_USER_OPERATION, (e, ts) =>
+			MeteorCall.userAction.executeUserChangeOperation(
+				e,
+				ts,
+				rundownId,
+				{
+					segmentExternalId: segment?.externalId,
+					partExternalId: part?.externalId,
+					pieceExternalId: undefined,
+				},
+				{
+					id:
+						selectedElement.type === 'segment'
+							? DefaultUserOperationsTypes.REVERT_SEGMENT
+							: DefaultUserOperationsTypes.REVERT_PART,
+				}
+			)
+		)
+	}
+
+	const handleCancel = () => {
+		setPendingChange(undefined)
+		clearSelections()
+	}
+
+	const executeAction = (e: React.MouseEvent, id: string) => {
+		if (!rundownId || !selectedElement) return
+		doUserAction(t, e, UserAction.EXECUTE_USER_OPERATION, (e, ts) =>
+			MeteorCall.userAction.executeUserChangeOperation(
+				e,
+				ts,
+				rundownId,
+				{
+					segmentExternalId: segment?.externalId,
+					partExternalId: part?.externalId,
+					pieceExternalId: piece?.externalId,
+				},
+				{
+					id,
+				}
+			)
+		)
+	}
+
+	const userEditOperations =
+		selectedElement?.type === 'piece'
+			? piece?.userEditOperations
+			: selectedElement?.type === 'part'
+			? part?.userEditOperations
+			: selectedElement?.type === 'segment'
+			? segment?.userEditOperations
+			: undefined
+	const userEditProperties =
+		selectedElement?.type === 'piece'
+			? piece?.userEditProperties
+			: selectedElement?.type === 'part'
+			? part?.userEditProperties
+			: selectedElement?.type === 'segment'
+			? segment?.userEditProperties
+			: undefined
+	const change = pendingChange ?? {
+		pieceTypeProperties: userEditProperties?.pieceTypeProperties?.currentValue ?? { type: '', value: {} },
+		globalProperties: userEditProperties?.globalProperties?.currentValue ?? {},
+	}
+
+	const title =
+		selectedElement?.type === 'piece'
+			? piece?.name
+			: selectedElement?.type === 'part'
+			? part?.title
+			: selectedElement?.type === 'segment'
+			? segment?.name
+			: undefined
+
+	return (
+		<div className={'properties-panel'}>
+			<div className="propertiespanel-pop-up">
+				<div className="propertiespanel-pop-up__header">
+					{userEditOperations &&
+						userEditOperations.map((operation) => {
+							if (operation.type !== UserEditingType.ACTION || !operation.svgIcon || !operation.isActive) return null
+							return (
+								<div
+									key={operation.id}
+									className="svg"
+									dangerouslySetInnerHTML={{
+										__html: operation.svgIcon,
+									}}
+								></div>
+							)
+						})}
+					<div className="title">{title}</div>
+					<span className="properties">{t('Properties')}</span>
+					<button
+						className="propertiespanel-pop-up_close"
+						title={t('Close Properties Panel')}
+						onClick={clearSelections}
+					>
+						<CoreIcon.NrkClose width="1em" height="1em" />
+					</button>
+				</div>
+
+				<div className="propertiespanel-pop-up__contents">
+					{userEditProperties?.pieceTypeProperties && (
+						<PropertiesEditor
+							properties={userEditProperties.pieceTypeProperties}
+							change={change}
+							setChange={setPendingChange}
+							translationNamespace={userEditProperties.translationNamespaces}
+						/>
+					)}
+					{userEditProperties?.globalProperties && (
+						<GlobalPropertiesEditor
+							schema={userEditProperties.globalProperties.schema}
+							change={change}
+							setChange={setPendingChange}
+							translationNamespace={userEditProperties.translationNamespaces}
+						/>
+					)}
+					{userEditProperties?.operations && (
+						<ActionList actions={userEditProperties?.operations} executeAction={executeAction} />
+					)}
+				</div>
+
+				<div className="propertiespanel-pop-up__footer">
+					<button
+						className="propertiespanel-pop-up__button start"
+						title={selectedElement?.type === 'segment' ? t('Restore Segment from NRCS') : t('Restore Part from NRCS')}
+						disabled={!selectedElement}
+						onClick={handleRevertChanges}
+					>
+						<span className="svg">
+							<svg viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+								<path
+									d="M2 14.5251H15C16.3261 14.5251 17.5979 13.9984 18.5355 13.0607C19.4732 12.123 20 10.8512 20 9.52515C20 8.19906 19.4732 6.92729 18.5355 5.98961C17.5979 5.05193 16.3261 4.52515 15 4.52515H10V0.475147L5 5.47515L10 10.4751V6.52515H15C15.7956 6.52515 16.5587 6.84122 17.1213 7.40383C17.6839 7.96643 18 8.7295 18 9.52515C18 10.3208 17.6839 11.0839 17.1213 11.6465C16.5587 12.2091 15.7956 12.5251 15 12.5251H2V14.5251Z"
+									fill="#979797"
+								/>
+							</svg>
+						</span>
+						<span className="propertiespanel-pop-up__label">
+							{selectedElement?.type === 'segment' ? t('Restore Segment from NRCS') : t('Restore Part from NRCS')}
+						</span>
+					</button>
+
+					<div className="propertiespanel-pop-up__button-group">
+						<button
+							className="propertiespanel-pop-up__button end"
+							onClick={handleCancel}
+							disabled={!hasPendingChanges}
+							title={t('Cancel')}
+						>
+							<span className="propertiespanel-pop-up__label">{t('Cancel')}</span>
+						</button>
+						<button
+							className="propertiespanel-pop-up__button end"
+							onClick={handleCommitChanges}
+							disabled={!hasPendingChanges}
+							title={t('Save')}
+						>
+							<span className="propertiespanel-pop-up__label">{t('Save')}</span>
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+function PropertiesEditor({
+	properties,
+	change,
+	setChange,
+	translationNamespace,
+}: {
+	properties: UserEditingProperties['pieceTypeProperties']
+	change: PendingChange
+	setChange: React.Dispatch<React.SetStateAction<PendingChange | undefined>>
+	translationNamespace: string[]
+}): JSX.Element {
+	if (!properties) return <></>
+
+	const selectedGroupId = change.pieceTypeProperties.type
+	const selectedGroupSchema = properties.schema[selectedGroupId]?.schema
+	const parsedSchema = useMemo(
+		() => (selectedGroupSchema ? JSONBlobParse(selectedGroupSchema) : undefined),
+		[selectedGroupSchema]
+	)
+
+	const updateGroup = useCallback(
+		(key: string) => {
+			setChange({
+				...change,
+				pieceTypeProperties: {
+					type: key,
+					value: properties.schema[key]?.defaultValue ?? {},
+				},
+			})
+		},
+		[change]
+	)
+	const onUpdate = useCallback(
+		(update: Record<string, any>) => {
+			setChange({
+				...change,
+				pieceTypeProperties: {
+					type: change.pieceTypeProperties.type,
+					value: update,
+				},
+			})
+		},
+		[change]
+	)
+	const value = change.pieceTypeProperties.value
+
+	return (
+		<>
+			<div className="propertiespanel-pop-up__groupselector">
+				{Object.entries<UserEditingSourceLayer>(properties.schema).map(([key, group]) => {
+					return (
+						<button
+							className={classNames(
+								'propertiespanel-pop-up__groupselector__button',
+								RundownUtils.getSourceLayerClassName(group.sourceLayerType),
+								selectedGroupId === key && 'active'
+							)}
+							key={key}
+							onClick={() => {
+								updateGroup(key)
+							}}
+						>
+							{group.sourceLayerLabel}
+						</button>
+					)
+				})}
+			</div>
+			<hr />
+			{parsedSchema && (
+				<div className="properties-panel-pop-up__form styled-schema-form">
+					<SchemaFormWithState
+						key={(selectedGroupSchema as any as string) ?? 'key'}
+						schema={parsedSchema}
+						object={value}
+						onUpdate={onUpdate}
+						translationNamespaces={translationNamespace}
+					/>
+				</div>
+			)}
+			<hr />
+		</>
+	)
+}
+
+function GlobalPropertiesEditor({
+	schema,
+	change,
+	setChange,
+	translationNamespace,
+}: {
+	schema: JSONBlob<JSONSchema>
+	change: PendingChange
+	setChange: React.Dispatch<React.SetStateAction<PendingChange | undefined>>
+	translationNamespace: string[]
+}): JSX.Element {
+	const parsedSchema = schema ? JSONBlobParse(schema) : undefined
+	const currentValue = change.globalProperties
+
+	const onUpdate = useCallback(
+		(update: Record<string, any>) => {
+			setChange({
+				...change,
+				globalProperties: update,
+			})
+		},
+		[change]
+	)
+
+	return (
+		<div className="properties-panel-pop-up__form styled-schema-form" style={{ color: 'white' }}>
+			{parsedSchema ? (
+				<SchemaFormWithState
+					key={(schema as any as string) ?? 'key'}
+					schema={parsedSchema}
+					object={currentValue}
+					onUpdate={onUpdate}
+					translationNamespaces={translationNamespace}
+				/>
+			) : (
+				<></>
+			)}
+		</div>
+	)
+}
+
+function ActionList({
+	actions,
+	executeAction,
+}: {
+	actions: UserEditingDefinitionAction[]
+	executeAction: (e: any, id: string) => void
+}) {
+	const { t } = useTranslation()
+
+	return (
+		<div>
+			{actions.map((action) => (
+				<button
+					title={'User Operation: ' + translateMessage(action.label, t)}
+					className="propertiespanel-pop-up__button"
+					onClick={(e) => executeAction(e, action.id)}
+					key={action.id}
+				>
+					{action.svgIcon && (
+						<span
+							className="svg"
+							dangerouslySetInnerHTML={{
+								__html: action.svgIcon,
+							}}
+						></span>
+					)}
+					<span className="propertiespanel-pop-up__label">{translateMessage(action.label, t)}</span>
+				</button>
+			))}
+		</div>
+	)
+}
diff --git a/packages/webui/src/client/ui/UserEditOperations/RenderUserEditOperations.tsx b/packages/webui/src/client/ui/UserEditOperations/RenderUserEditOperations.tsx
index a9cfcda12f..f33ab76b4e 100644
--- a/packages/webui/src/client/ui/UserEditOperations/RenderUserEditOperations.tsx
+++ b/packages/webui/src/client/ui/UserEditOperations/RenderUserEditOperations.tsx
@@ -21,7 +21,6 @@ interface UserEditOperationMenuItemsProps {
 
 export function UserEditOperationMenuItems({
 	rundownId,
-	targetName,
 	operationTarget,
 	userEditOperations,
 	isFormEditable,
@@ -62,9 +61,8 @@ export function UserEditOperationMenuItems({
 									const schema = JSONBlobParse(userEditOperation.schema)
 									const values = clone(userEditOperation.currentValues)
 
-									// TODO:
 									doModalDialog({
-										title: t(`Edit {{targetName}}`, { targetName }),
+										title: translateMessage(userEditOperation.label, t),
 										message: (
 											<SchemaFormInPlace
 												schema={schema}
@@ -72,7 +70,6 @@ export function UserEditOperationMenuItems({
 												translationNamespaces={userEditOperation.translationNamespaces}
 											/>
 										),
-										// acceptText: 'OK',
 										yes: t('Save Changes'),
 										no: t('Cancel'),
 										onAccept: () => {
diff --git a/packages/webui/src/client/ui/UserEditOperations/__tests__/PropertiesPanel.test.tsx b/packages/webui/src/client/ui/UserEditOperations/__tests__/PropertiesPanel.test.tsx
new file mode 100644
index 0000000000..a35e8b3f04
--- /dev/null
+++ b/packages/webui/src/client/ui/UserEditOperations/__tests__/PropertiesPanel.test.tsx
@@ -0,0 +1,433 @@
+import React from 'react'
+// eslint-disable-next-line node/no-unpublished-import
+import { renderHook, act, render, screen, waitFor, RenderOptions } from '@testing-library/react'
+// eslint-disable-next-line node/no-unpublished-import
+import '@testing-library/jest-dom'
+import { MeteorCall } from '../../../lib/meteorApi'
+import { TFunction } from 'i18next'
+
+import userEvent from '@testing-library/user-event'
+import { protectString } from '@sofie-automation/corelib/dist/protectedString'
+import { UIParts } from '../../Collections'
+import { Segments } from '../../../../client/collections'
+import { DBSegment } from '@sofie-automation/corelib/dist/dataModel/Segment'
+import { DBPart } from '@sofie-automation/corelib/dist/dataModel/Part'
+import { UserEditingType } from '@sofie-automation/blueprints-integration'
+import {
+	SelectedElementProvider,
+	SelectedElementsContext,
+	SelectionContextType,
+	useSelectedElementsContext,
+} from '../../RundownView/SelectedElementsContext'
+import { MongoMock } from '../../../../__mocks__/mongo'
+import { PropertiesPanel } from '../PropertiesPanel'
+import { UserAction } from '../../../lib/clientUserAction'
+
+jest.mock('meteor/tracker', (...args) => require('../../../../__mocks__/tracker').setup(args), { virtual: true })
+
+jest.mock('react-i18next', () => ({
+	// this mock makes sure any components using the translate hook can use it without a warning being shown
+	useTranslation: () => {
+		return {
+			t: (str: string) => str,
+			i18n: {
+				changeLanguage: () =>
+					new Promise(() => {
+						// satisfy linter - by making it uglier? ¯\_(ツ)_/¯
+					}),
+			},
+		}
+	},
+	initReactI18next: {
+		type: '3rdParty',
+		init: () => {
+			// satisfy linter - by making it uglier? ¯\_(ツ)_/¯
+		},
+	},
+}))
+
+// Mock the ReactiveDataHelper:
+jest.mock('../../../lib/reactiveData/reactiveDataHelper', () => {
+	interface MockSubscription {
+		stop: () => void
+		ready: () => boolean
+	}
+
+	class MockReactiveDataHelper {
+		protected _subs: MockSubscription[] = []
+		protected _computations: any[] = []
+
+		protected subscribe(_name: string, ..._args: any[]): MockSubscription {
+			const sub: MockSubscription = {
+				stop: jest.fn(),
+				ready: jest.fn().mockReturnValue(true),
+			}
+			this._subs.push(sub)
+			return sub
+		}
+
+		protected autorun(f: () => void) {
+			// Execute the function immediately
+			f()
+			const computation = {
+				stop: jest.fn(),
+				_recompute: () => f(),
+				invalidate: function () {
+					this._recompute()
+				},
+				onInvalidate: jest.fn(),
+			}
+			this._computations.push(computation)
+			return computation
+		}
+
+		destroy() {
+			this._subs.forEach((sub) => sub.stop())
+			this._computations.forEach((comp) => comp.stop())
+			this._subs = []
+			this._computations = []
+		}
+	}
+
+	class MockWithManagedTracker extends MockReactiveDataHelper {
+		constructor() {
+			super()
+		}
+
+		triggerUpdate() {
+			this._computations.forEach((comp) => comp.invalidate())
+		}
+	}
+
+	return {
+		__esModule: true,
+		WithManagedTracker: MockWithManagedTracker,
+		meteorSubscribe: jest.fn().mockReturnValue({
+			stop: jest.fn(),
+			ready: jest.fn().mockReturnValue(true),
+		}),
+	}
+})
+
+jest.mock('i18next', () => ({
+	use: jest.fn().mockReturnThis(),
+	init: jest.fn().mockImplementation(() => Promise.resolve()),
+	t: (key: string) => key,
+	changeLanguage: jest.fn().mockImplementation(() => Promise.resolve()),
+	language: 'en',
+	exists: jest.fn(),
+	on: jest.fn(),
+	off: jest.fn(),
+	options: {},
+}))
+
+// React-i18next with Promise support
+jest.mock('react-i18next', () => ({
+	useTranslation: () => ({
+		t: (key: string) => key,
+		i18n: {
+			changeLanguage: jest.fn().mockImplementation(() => Promise.resolve()),
+			language: 'en',
+			exists: jest.fn(),
+			use: jest.fn().mockReturnThis(),
+			init: jest.fn().mockImplementation(() => Promise.resolve()),
+			on: jest.fn(),
+			off: jest.fn(),
+			options: {},
+		},
+	}),
+	initReactI18next: {
+		type: '3rdParty',
+		init: jest.fn(),
+	},
+}))
+
+const mockSegmentsCollection = MongoMock.getInnerMockCollection(Segments)
+const mockPartsCollection = MongoMock.getInnerMockCollection(UIParts)
+
+// Mock Client User Action:
+jest.mock('../../../lib/clientUserAction', () => ({
+	doUserAction: jest.fn((_t: TFunction, e: unknown, _action: UserAction, callback: Function) =>
+		callback(e, Date.now())
+	),
+	UserAction: {
+		EXECUTE_USER_OPERATION: 51,
+	},
+}))
+
+// Mock Userchange Operation:
+jest.mock('../../../lib/meteorApi', () => ({
+	__esModule: true,
+	MeteorCall: {
+		userAction: {
+			executeUserChangeOperation: jest.fn(),
+		},
+	},
+}))
+
+// Mock SchemaFormInPlace Component
+jest.mock('../../../lib/forms/SchemaFormInPlace', () => ({
+	SchemaFormInPlace: () => <div data-testid="schema-form">Schema Form</div>,
+}))
+jest.mock('../../../lib/forms/SchemaFormWithState', () => ({
+	SchemaFormWithState: () => <div data-testid="schema-form">Schema Form</div>,
+}))
+
+describe('PropertiesPanel', () => {
+	const wrapper = ({ children }: { children: React.ReactNode }) => (
+		<SelectedElementProvider>{children}</SelectedElementProvider>
+	)
+
+	const renderWithContext = (
+		ui: React.ReactNode,
+		{ ctxValue, ...renderOptions }: RenderOptions & { ctxValue: SelectionContextType }
+	) => {
+		return render(
+			<SelectedElementsContext.Provider value={ctxValue}>{ui}</SelectedElementsContext.Provider>,
+			renderOptions
+		)
+	}
+
+	beforeEach(() => {
+		mockSegmentsCollection.remove({})
+		mockPartsCollection.remove({})
+		jest.clearAllMocks()
+		// jest.useFakeTimers()
+	})
+
+	afterEach(() => {
+		jest.useRealTimers()
+	})
+
+	const createMockSegment = (id: string): DBSegment => ({
+		_id: protectString(id),
+		_rank: 1,
+		name: `Segment ${id}`,
+		rundownId: protectString('rundown1'),
+		externalId: `ext_${id}`,
+		userEditOperations: [
+			{
+				id: 'operation1',
+				label: { key: 'TEST_LABEL', namespaces: ['blueprint_main-showstyle'] },
+				type: UserEditingType.ACTION,
+				isActive: false,
+				svgIcon: '<svg></svg>',
+			},
+		],
+		userEditProperties: {
+			operations: [
+				{
+					id: 'operation1',
+					label: { key: 'TEST_LABEL', namespaces: ['blueprint_main-showstyle'] },
+					type: UserEditingType.ACTION,
+					isActive: false,
+					svgIcon: '<svg></svg>',
+				},
+			],
+			translationNamespaces: ['blueprint_main-showstyle'],
+		},
+		isHidden: false,
+	})
+
+	const createMockPart = (id: string, segmentId: string): DBPart => ({
+		_id: protectString(id),
+		_rank: 1,
+		expectedDurationWithTransition: 0,
+		title: `Part ${id}`,
+		rundownId: protectString('rundown1'),
+		segmentId: protectString(segmentId),
+		externalId: `ext_${id}`,
+		userEditOperations: [
+			{
+				id: 'operation2',
+				label: { key: 'TEST_PART_LABEL', namespaces: ['blueprint_main-showstyle'] },
+				type: UserEditingType.ACTION,
+				isActive: true,
+			},
+		],
+	})
+
+	test('renders empty when no element selected', () => {
+		const { container } = render(<PropertiesPanel />, { wrapper })
+		expect(container.querySelector('.properties-panel')).toBeTruthy()
+		expect(container.querySelector('.properties-panel-pop-up__form')).toBeFalsy()
+	})
+
+	test('renders segment properties when segment is selected', async () => {
+		const mockSegment = createMockSegment('segment1')
+
+		const mockId = mockSegmentsCollection.insert(mockSegment)
+		const protectedMockId = protectString(mockId)
+
+		const verifySegment = mockSegmentsCollection.findOne({ _id: protectedMockId })
+		expect(verifySegment).toBeTruthy()
+		expect(mockSegmentsCollection.findOne({ _id: protectedMockId })).toBeTruthy()
+
+		const { result } = renderHook(() => useSelectedElementsContext(), { wrapper })
+
+		// Update selection and wait for component to update
+		await act(async () => {
+			result.current.clearAndSetSelection({
+				type: 'segment',
+				elementId: protectedMockId,
+			})
+		})
+
+		expect(result.current.listSelectedElements()).toHaveLength(1)
+		expect(result.current.listSelectedElements()).toEqual([{ type: 'segment', elementId: mockId }])
+
+		// Open component after segment is selected (as used in rundownview)
+		const { container } = renderWithContext(<PropertiesPanel />, { ctxValue: result.current })
+
+		expect(screen.getByText(`${mockSegment.name.slice(0, 30)}`)).toBeInTheDocument()
+
+		const button = container.querySelector('.propertiespanel-pop-up__button')
+		expect(button).toBeInTheDocument()
+	})
+
+	test('renders part properties when part is selected', async () => {
+		const mockSegment = createMockSegment('segment1')
+		const mockPart = createMockPart('part1', String(mockSegment._id))
+
+		mockSegmentsCollection.insert(mockSegment)
+		const mockId = mockPartsCollection.insert(mockPart)
+
+		const { result } = renderHook(() => useSelectedElementsContext(), { wrapper })
+
+		await act(async () => {
+			result.current.clearAndSetSelection({
+				type: 'part',
+				elementId: protectString(mockId),
+			})
+		})
+		// Open component after part is selected (as used in rundownview)
+		const { container } = renderWithContext(<PropertiesPanel />, { ctxValue: result.current })
+
+		await waitFor(
+			() => {
+				expect(screen.getByText(mockPart.title.slice(0, 30))).toBeInTheDocument()
+			},
+			{ timeout: 1000 }
+		)
+
+		const button = container.querySelector('.propertiespanel-pop-up__button')
+		expect(button).toBeInTheDocument()
+	})
+
+	test('handles user edit operations for segments', async () => {
+		const mockSegment = createMockSegment('segment1')
+		mockSegmentsCollection.insert(mockSegment)
+
+		const { result } = renderHook(() => useSelectedElementsContext(), { wrapper })
+
+		await act(async () => {
+			result.current.clearAndSetSelection({
+				type: 'segment',
+				elementId: mockSegment._id,
+			})
+		})
+
+		// Wait for the switch button to be available
+		renderWithContext(<PropertiesPanel />, { ctxValue: result.current })
+		const switchButton = await waitFor(() => screen.getByText('TEST_LABEL'))
+		expect(switchButton).toBeTruthy()
+
+		if (!switchButton) return // above would have thrown - this is a type guard
+
+		// Toggle the switch
+		await userEvent.click(switchButton)
+
+		// Check if commit button is enabled
+		const commitButton = screen.getByText('Save')
+		expect(commitButton).toBeEnabled()
+
+		// Commit changes
+		await act(async () => {
+			await userEvent.click(commitButton)
+		})
+
+		expect(MeteorCall.userAction.executeUserChangeOperation).toHaveBeenCalledWith(
+			expect.anything(),
+			expect.anything(),
+			protectString('rundown1'),
+			{
+				segmentExternalId: mockSegment.externalId,
+				partExternalId: undefined,
+				pieceExternalId: undefined,
+			},
+			{
+				id: 'operation1',
+				values: undefined,
+			}
+		)
+	})
+
+	test('handles revert changes', async () => {
+		const mockSegment = createMockSegment('segment1')
+		mockSegmentsCollection.insert(mockSegment)
+
+		const { result } = renderHook(() => useSelectedElementsContext(), { wrapper })
+
+		await act(async () => {
+			result.current.clearAndSetSelection({
+				type: 'segment',
+				elementId: mockSegment._id,
+			})
+		})
+
+		const { container } = renderWithContext(<PropertiesPanel />, { ctxValue: result.current })
+
+		// Wait for the switch button to be available
+		const switchButton = await waitFor(() => container.querySelector('.propertiespanel-pop-up__switchbutton'))
+
+		// Make a change
+		await act(async () => {
+			await userEvent.click(switchButton!)
+		})
+
+		// Click revert button
+		const revertButton = screen.getByText('Restore Segment from NRCS')
+		await act(async () => {
+			await userEvent.click(revertButton)
+		})
+
+		expect(MeteorCall.userAction.executeUserChangeOperation).toHaveBeenCalledWith(
+			expect.anything(),
+			expect.anything(),
+			protectString('rundown1'),
+			{
+				segmentExternalId: mockSegment.externalId,
+				partExternalId: undefined,
+				pieceExternalId: undefined,
+			},
+			{
+				id: '__sofie-revert-segment',
+			}
+		)
+	})
+
+	test('closes panel when close button is clicked', async () => {
+		const mockSegment = createMockSegment('segment1')
+		mockSegmentsCollection.insert(mockSegment)
+
+		const { result } = renderHook(() => useSelectedElementsContext(), { wrapper })
+		const { container } = render(<PropertiesPanel />, { wrapper })
+
+		await act(async () => {
+			result.current.clearAndSetSelection({
+				type: 'segment',
+				elementId: mockSegment._id,
+			})
+		})
+
+		const closeButton = await waitFor(() => container.querySelector('.propertiespanel-pop-up_close'))
+		expect(closeButton).toBeTruthy()
+
+		await act(async () => {
+			await userEvent.click(closeButton!)
+		})
+
+		// expect(container.querySelector('.propertiespanel-pop-up__contents')).toBeFalsy()
+		expect(container.querySelector('.properties-panel-pop-up__form')).toBeFalsy()
+	})
+})
diff --git a/packages/yarn.lock b/packages/yarn.lock
index 5928b1d4cc..ad6e1c286d 100644
--- a/packages/yarn.lock
+++ b/packages/yarn.lock
@@ -23,6 +23,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@adobe/css-tools@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "@adobe/css-tools@npm:4.4.0"
+  checksum: 1f08fb49bf17fc7f2d1a86d3e739f29ca80063d28168307f1b0a962ef37501c5667271f6771966578897f2e94e43c4770fd802728a6e6495b812da54112d506a
+  languageName: node
+  linkType: hard
+
 "@algolia/autocomplete-core@npm:1.9.3":
   version: 1.9.3
   resolution: "@algolia/autocomplete-core@npm:1.9.3"
@@ -5312,6 +5319,10 @@ __metadata:
     "@sofie-automation/meteor-lib": 1.52.0-in-development
     "@sofie-automation/shared-lib": 1.52.0-in-development
     "@sofie-automation/sorensen": ^1.4.3
+    "@testing-library/dom": ^10.4.0
+    "@testing-library/jest-dom": ^6.6.3
+    "@testing-library/react": ^16.0.1
+    "@testing-library/user-event": ^14.5.2
     "@types/classnames": ^2.3.1
     "@types/deep-extend": ^0.6.2
     "@types/react": ^18.3.3
@@ -5895,6 +5906,66 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/dom@npm:^10.4.0":
+  version: 10.4.0
+  resolution: "@testing-library/dom@npm:10.4.0"
+  dependencies:
+    "@babel/code-frame": ^7.10.4
+    "@babel/runtime": ^7.12.5
+    "@types/aria-query": ^5.0.1
+    aria-query: 5.3.0
+    chalk: ^4.1.0
+    dom-accessibility-api: ^0.5.9
+    lz-string: ^1.5.0
+    pretty-format: ^27.0.2
+  checksum: bb128b90be0c8cd78c5f5e67aa45f53de614cc048a2b50b230e736ec710805ac6c73375af354b83c74d710b3928d52b83a273a4cb89de4eb3efe49e91e706837
+  languageName: node
+  linkType: hard
+
+"@testing-library/jest-dom@npm:^6.6.3":
+  version: 6.6.3
+  resolution: "@testing-library/jest-dom@npm:6.6.3"
+  dependencies:
+    "@adobe/css-tools": ^4.4.0
+    aria-query: ^5.0.0
+    chalk: ^3.0.0
+    css.escape: ^1.5.1
+    dom-accessibility-api: ^0.6.3
+    lodash: ^4.17.21
+    redent: ^3.0.0
+  checksum: c1dc4260b05309a0084416639006cd105849acc5b102bef682a3b19bd6fce07ff6762085fc7f2599546c995a2fc66fdb1d70e50e22a634a0098524056cc9e511
+  languageName: node
+  linkType: hard
+
+"@testing-library/react@npm:^16.0.1":
+  version: 16.0.1
+  resolution: "@testing-library/react@npm:16.0.1"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+  peerDependencies:
+    "@testing-library/dom": ^10.0.0
+    "@types/react": ^18.0.0
+    "@types/react-dom": ^18.0.0
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 1837db473ea018cf2b5d0cbfffb7a30d0d759e5a7f23aad431441c77bcc3d2533250cd003a61878fd908267df47404cedcb5914f12d79e413002c659652b37fd
+  languageName: node
+  linkType: hard
+
+"@testing-library/user-event@npm:^14.5.2":
+  version: 14.5.2
+  resolution: "@testing-library/user-event@npm:14.5.2"
+  peerDependencies:
+    "@testing-library/dom": ">=7.21.4"
+  checksum: d76937dffcf0082fbf3bb89eb2b81a31bf5448048dd61c33928c5f10e33a58e035321d39145cefd469bb5a499c68a5b4086b22f1a44e3e7c7e817dc5f6782867
+  languageName: node
+  linkType: hard
+
 "@tokenizer/token@npm:^0.3.0":
   version: 0.3.0
   resolution: "@tokenizer/token@npm:0.3.0"
@@ -6005,6 +6076,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/aria-query@npm:^5.0.1":
+  version: 5.0.4
+  resolution: "@types/aria-query@npm:5.0.4"
+  checksum: ad8b87e4ad64255db5f0a73bc2b4da9b146c38a3a8ab4d9306154334e0fc67ae64e76bfa298eebd1e71830591fb15987e5de7111bdb36a2221bdc379e3415fb0
+  languageName: node
+  linkType: hard
+
 "@types/babel__core@npm:^7.1.14, @types/babel__core@npm:^7.20.5":
   version: 7.20.5
   resolution: "@types/babel__core@npm:7.20.5"
@@ -7794,6 +7872,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-query@npm:5.3.0":
+  version: 5.3.0
+  resolution: "aria-query@npm:5.3.0"
+  dependencies:
+    dequal: ^2.0.3
+  checksum: 305bd73c76756117b59aba121d08f413c7ff5e80fa1b98e217a3443fcddb9a232ee790e24e432b59ae7625aebcf4c47cb01c2cac872994f0b426f5bdfcd96ba9
+  languageName: node
+  linkType: hard
+
+"aria-query@npm:^5.0.0":
+  version: 5.3.2
+  resolution: "aria-query@npm:5.3.2"
+  checksum: d971175c85c10df0f6d14adfe6f1292409196114ab3c62f238e208b53103686f46cc70695a4f775b73bc65f6a09b6a092fd963c4f3a5a7d690c8fc5094925717
+  languageName: node
+  linkType: hard
+
 "array-buffer-byte-length@npm:^1.0.1":
   version: 1.0.1
   resolution: "array-buffer-byte-length@npm:1.0.1"
@@ -9142,6 +9236,16 @@ asn1@evs-broadcast/node-asn1:
   languageName: node
   linkType: hard
 
+"chalk@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "chalk@npm:3.0.0"
+  dependencies:
+    ansi-styles: ^4.1.0
+    supports-color: ^7.1.0
+  checksum: 8e3ddf3981c4da405ddbd7d9c8d91944ddf6e33d6837756979f7840a29272a69a5189ecae0ff84006750d6d1e92368d413335eab4db5476db6e6703a1d1e0505
+  languageName: node
+  linkType: hard
+
 "char-regex@npm:^1.0.2":
   version: 1.0.2
   resolution: "char-regex@npm:1.0.2"
@@ -10426,6 +10530,13 @@ asn1@evs-broadcast/node-asn1:
   languageName: node
   linkType: hard
 
+"css.escape@npm:^1.5.1":
+  version: 1.5.1
+  resolution: "css.escape@npm:1.5.1"
+  checksum: f6d38088d870a961794a2580b2b2af1027731bb43261cfdce14f19238a88664b351cc8978abc20f06cc6bbde725699dec8deb6fe9816b139fc3f2af28719e774
+  languageName: node
+  linkType: hard
+
 "cssesc@npm:^3.0.0":
   version: 3.0.0
   resolution: "cssesc@npm:3.0.0"
@@ -11375,7 +11486,7 @@ asn1@evs-broadcast/node-asn1:
   languageName: node
   linkType: hard
 
-"dequal@npm:^2.0.0":
+"dequal@npm:^2.0.0, dequal@npm:^2.0.3":
   version: 2.0.3
   resolution: "dequal@npm:2.0.3"
   checksum: 8679b850e1a3d0ebbc46ee780d5df7b478c23f335887464023a631d1b9af051ad4a6595a44220f9ff8ff95a8ddccf019b5ad778a976fd7bbf77383d36f412f90
@@ -11558,6 +11669,20 @@ asn1@evs-broadcast/node-asn1:
   languageName: node
   linkType: hard
 
+"dom-accessibility-api@npm:^0.5.9":
+  version: 0.5.16
+  resolution: "dom-accessibility-api@npm:0.5.16"
+  checksum: 005eb283caef57fc1adec4d5df4dd49189b628f2f575af45decb210e04d634459e3f1ee64f18b41e2dcf200c844bc1d9279d80807e686a30d69a4756151ad248
+  languageName: node
+  linkType: hard
+
+"dom-accessibility-api@npm:^0.6.3":
+  version: 0.6.3
+  resolution: "dom-accessibility-api@npm:0.6.3"
+  checksum: c325b5144bb406df23f4affecffc117dbaec9af03daad9ee6b510c5be647b14d28ef0a4ea5ca06d696d8ab40bb777e5fed98b985976fdef9d8790178fa1d573f
+  languageName: node
+  linkType: hard
+
 "dom-converter@npm:^0.2.0":
   version: 0.2.0
   resolution: "dom-converter@npm:0.2.0"
@@ -17724,6 +17849,15 @@ asn1@evs-broadcast/node-asn1:
   languageName: node
   linkType: hard
 
+"lz-string@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "lz-string@npm:1.5.0"
+  bin:
+    lz-string: bin/bin.js
+  checksum: 1ee98b4580246fd90dd54da6e346fb1caefcf05f677c686d9af237a157fdea3fd7c83a4bc58f858cd5b10a34d27afe0fdcbd0505a47e0590726a873dc8b8f65d
+  languageName: node
+  linkType: hard
+
 "magic-string@npm:^0.30.3":
   version: 0.30.10
   resolution: "magic-string@npm:0.30.10"
@@ -22228,6 +22362,17 @@ asn1@evs-broadcast/node-asn1:
   languageName: node
   linkType: hard
 
+"pretty-format@npm:^27.0.2":
+  version: 27.5.1
+  resolution: "pretty-format@npm:27.5.1"
+  dependencies:
+    ansi-regex: ^5.0.1
+    ansi-styles: ^5.0.0
+    react-is: ^17.0.1
+  checksum: cf610cffcb793885d16f184a62162f2dd0df31642d9a18edf4ca298e909a8fe80bdbf556d5c9573992c102ce8bf948691da91bf9739bee0ffb6e79c8a8a6e088
+  languageName: node
+  linkType: hard
+
 "pretty-format@npm:^29.0.0, pretty-format@npm:^29.7.0":
   version: 29.7.0
   resolution: "pretty-format@npm:29.7.0"
@@ -23000,6 +23145,13 @@ asn1@evs-broadcast/node-asn1:
   languageName: node
   linkType: hard
 
+"react-is@npm:^17.0.1":
+  version: 17.0.2
+  resolution: "react-is@npm:17.0.2"
+  checksum: 9d6d111d8990dc98bc5402c1266a808b0459b5d54830bbea24c12d908b536df7883f268a7868cfaedde3dd9d4e0d574db456f84d2e6df9c4526f99bb4b5344d8
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^18.0.0, react-is@npm:^18.2.0":
   version: 18.3.1
   resolution: "react-is@npm:18.3.1"