Make new document with doubleclicking on empty tab space

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

@@ -41,6 +41,7 @@
 	export let panelType: PanelType | undefined = undefined;
 	export let clickAction: ((index: number) => void) | undefined = undefined;
 	export let closeAction: ((index: number) => void) | undefined = undefined;
+	export let dblclickEmptySpaceAction: (() => void) | undefined = undefined;
 
 	let className = "";
 	export { className as class };
@@ -148,6 +149,7 @@
 					{/if}
 				</LayoutRow>
 			{/each}
+			<LayoutRow class="tab-group-empty-space" on:dblclick={dblclickEmptySpaceAction}></LayoutRow>
 		</LayoutRow>
 		<!-- <PopoverButton style="VerticalEllipsis">
 			<TextLabel bold={true}>Panel Options</TextLabel>
@@ -218,13 +220,14 @@
 		background: var(--color-1-nearblack);
 		border-radius: 6px;
 		overflow: hidden;
-
 		.tab-bar {
 			height: 28px;
 			min-height: auto;
 			background: var(--color-1-nearblack); // Needed for the viewport hole punch on desktop
 			flex-shrink: 0;
-
+			.tab-group-empty-space {
+				width: 100%;
+			}
 			&.min-widths .tab-group .tab {
 				min-width: 120px;
 				max-width: 360px;

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

@@ -142,6 +142,7 @@
 					tabCloseButtons={true}
 					tabMinWidths={true}
 					tabLabels={documentTabLabels}
+					dblclickEmptySpaceAction={() => editor.handle.newDocumentDialog()}
 					clickAction={(tabIndex) => editor.handle.selectDocument($portfolio.documents[tabIndex].id)}
 					closeAction={(tabIndex) => editor.handle.closeDocumentWithConfirmation($portfolio.documents[tabIndex].id)}
 					tabActiveIndex={$portfolio.activeDocumentIndex}