Desktop: Add the transparent viewport hole punch and hook up window button plumbing (#2949)

frontend/src/components/window/workspace/Panel.svelte

@@ -42,6 +42,13 @@
 	export let clickAction: ((index: number) => void) | undefined = undefined;
 	export let closeAction: ((index: number) => void) | undefined = undefined;
 
+	let className = "";
+	export { className as class };
+	export let classes: Record<string, boolean> = {};
+	let styleName = "";
+	export { styleName as style };
+	export let styles: Record<string, string | number | undefined> = {};
+
 	let tabElements: (LayoutRow | undefined)[] = [];
 
 	function platformModifiers(reservedKey: boolean): LayoutKeysGroup {
@@ -90,7 +97,7 @@
 	}
 </script>
 
-<LayoutCol class="panel" on:pointerdown={() => panelType && editor.handle.setActivePanel(panelType)}>
+<LayoutCol on:pointerdown={() => panelType && editor.handle.setActivePanel(panelType)} class={`panel ${className}`.trim()} {classes} style={styleName} {styles}>
 	<LayoutRow class="tab-bar" classes={{ "min-widths": tabMinWidths }}>
 		<LayoutRow class="tab-group" scrollableX={true}>
 			{#each tabLabels as tabLabel, tabIndex}
@@ -194,6 +201,7 @@
 		.tab-bar {
 			height: 28px;
 			min-height: auto;
+			background: var(--color-1-nearblack); // Needed for the viewport hole punch on desktop
 
 			&.min-widths .tab-group .tab {
 				min-width: 120px;
@@ -336,5 +344,11 @@
 				}
 			}
 		}
+
+		// Needed for the viewport hole punch on desktop
+		.viewport-hole-punch &.document-panel,
+		.viewport-hole-punch &.document-panel .panel-body:not(:has(.empty-panel)) {
+			background: none;
+		}
 	}
 </style>