Replace the Spreadsheet panel with an improved Data panel (#3037)

* Improve the table data panel

* Add the "Window" menu bar section and polish everything

frontend/src/components/panels/Data.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { getContext, onMount, onDestroy } from "svelte";
+
+	import type { Editor } from "@graphite/editor";
+	import { defaultWidgetLayout, patchWidgetLayout, UpdateDataPanelLayout } from "@graphite/messages";
+
+	import LayoutCol from "@graphite/components/layout/LayoutCol.svelte";
+	import WidgetLayout from "@graphite/components/widgets/WidgetLayout.svelte";
+
+	const editor = getContext<Editor>("editor");
+
+	let dataPanelLayout = defaultWidgetLayout();
+
+	onMount(() => {
+		editor.subscriptions.subscribeJsMessage(UpdateDataPanelLayout, (updateDataPanelLayout) => {
+			patchWidgetLayout(dataPanelLayout, updateDataPanelLayout);
+			dataPanelLayout = dataPanelLayout;
+		});
+	});
+
+	onDestroy(() => {
+		editor.subscriptions.unsubscribeJsMessage(UpdateDataPanelLayout);
+	});
+</script>
+
+<LayoutCol class="data-panel">
+	<LayoutCol class="body" scrollableY={true}>
+		<WidgetLayout layout={dataPanelLayout} />
+	</LayoutCol>
+</LayoutCol>
+
+<style lang="scss" global>
+	.data-panel {
+		flex-grow: 1;
+		padding: 4px;
+
+		table {
+			margin: -4px;
+			width: calc(100% + 2 * 4px);
+
+			.text-label {
+				white-space: wrap;
+			}
+
+			&:not(:first-child) {
+				margin-top: 0;
+			}
+		}
+	}
+</style>