fix(frontend): improve default id of the components of the topbar (#4222)

frontend/src/lib/components/apps/editor/appUtils.ts

@@ -244,10 +244,11 @@ export function createNewGridItem(
 	data: AppComponent,
 	columns?: Record<number, any>,
 	initialPosition: { x: number; y: number } = { x: 0, y: 0 },
-	recOverride?: Record<number, Size>
+	recOverride?: Record<number, Size>,
+	fixed?: boolean
 ): GridItem {
 	const newComponent = {
-		fixed: false,
+		fixed: fixed ?? false,
 		x: initialPosition.x,
 		y: initialPosition.y,
 		fullHeight: false
@@ -389,7 +390,9 @@ export function insertNewGridItem(
 	columns?: Record<string, any>,
 	keepId?: string,
 	initialPosition: { x: number; y: number } = { x: 0, y: 0 },
-	recOverride?: Record<number, Size>
+	recOverride?: Record<number, Size>,
+	keepSubgrids?: boolean,
+	fixed?: boolean
 ): string {
 	const id = keepId ?? getNextGridItemId(app)
 
@@ -404,7 +407,7 @@ export function insertNewGridItem(
 	}
 
 	// We only want to set subgrids when we are not moving
-	if (!keepId) {
+	if (!keepId || keepSubgrids) {
 		for (let i = 0; i < (data.numberOfSubgrids ?? 0); i++) {
 			app.subgrids[`${id}-${i}`] = []
 		}
@@ -436,7 +439,7 @@ export function insertNewGridItem(
 
 	let grid = focusedGrid ? app.subgrids[key!] : app.grid
 
-	const newItem = createNewGridItem(grid, id, data, columns, initialPosition, recOverride)
+	const newItem = createNewGridItem(grid, id, data, columns, initialPosition, recOverride, fixed)
 	grid.push(newItem)
 	return id
 }
@@ -1094,7 +1097,7 @@ export function setUpTopBarComponentContent(id: string, app: App) {
 			subGridIndex: 0
 		},
 		undefined,
-		undefined,
+		'title',
 		undefined,
 		{
 			3: {
@@ -1118,7 +1121,7 @@ export function setUpTopBarComponentContent(id: string, app: App) {
 			subGridIndex: 0
 		},
 		undefined,
-		undefined,
+		'recomputeall',
 		undefined,
 		{
 			3: {

frontend/src/lib/components/details/createAppFromScript.ts

@@ -56,9 +56,9 @@ export function createAppFromScript(path: string, schema: Record<string, any> |
 					},
 					actions: [],
 					numberOfSubgrids: 1,
-					id: 'g'
+					id: 'topbar'
 				},
-				id: 'g'
+				id: 'topbar'
 			}
 		],
 		fullscreen: false,
@@ -410,7 +410,7 @@ export function createAppFromScript(path: string, schema: Record<string, any> |
 					id: 'f'
 				}
 			],
-			'g-0': [
+			'topbar-0': [
 				{
 					'3': {
 						fixed: false,
@@ -481,9 +481,9 @@ export function createAppFromScript(path: string, schema: Record<string, any> |
 						actions: [],
 						horizontalAlignment: 'left',
 						verticalAlignment: 'center',
-						id: 'h'
+						id: 'title'
 					},
-					id: 'h'
+					id: 'title'
 				},
 				{
 					'3': {
@@ -515,9 +515,9 @@ export function createAppFromScript(path: string, schema: Record<string, any> |
 						menuItems: [],
 						horizontalAlignment: 'right',
 						verticalAlignment: 'center',
-						id: 'i'
+						id: 'recomputeall'
 					},
-					id: 'i'
+					id: 'recomputeall'
 				}
 			]
 		}
@@ -592,7 +592,7 @@ export function createAppFromFlow(path: string, schema: Record<string, any> | un
 			},
 			{
 				'3': {
-					fixed: false,
+					fixed: true,
 					x: 0,
 					y: 8,
 					fullHeight: false,
@@ -600,7 +600,7 @@ export function createAppFromFlow(path: string, schema: Record<string, any> | un
 					h: 2
 				},
 				'12': {
-					fixed: false,
+					fixed: true,
 					x: 0,
 					y: 0,
 					fullHeight: false,
@@ -618,9 +618,9 @@ export function createAppFromFlow(path: string, schema: Record<string, any> | un
 					},
 					actions: [],
 					numberOfSubgrids: 1,
-					id: 'g'
+					id: 'topbar'
 				},
-				id: 'g'
+				id: 'topbar'
 			}
 		],
 		fullscreen: false,
@@ -973,7 +973,7 @@ export function createAppFromFlow(path: string, schema: Record<string, any> | un
 					id: 'f'
 				}
 			],
-			'g-0': [
+			'topbar-0': [
 				{
 					'3': {
 						fixed: false,
@@ -1044,9 +1044,9 @@ export function createAppFromFlow(path: string, schema: Record<string, any> | un
 						actions: [],
 						horizontalAlignment: 'left',
 						verticalAlignment: 'center',
-						id: 'h'
+						id: 'title'
 					},
-					id: 'h'
+					id: 'title'
 				},
 				{
 					'3': {
@@ -1078,9 +1078,9 @@ export function createAppFromFlow(path: string, schema: Record<string, any> | un
 						menuItems: [],
 						horizontalAlignment: 'right',
 						verticalAlignment: 'center',
-						id: 'i'
+						id: 'recomputeall'
 					},
-					id: 'i'
+					id: 'recomputeall'
 				}
 			]
 		}

frontend/src/routes/(root)/(logged)/apps/add/+page.svelte

@@ -130,12 +130,14 @@
 				}) as (id: string) => AppComponent,
 				undefined,
 				undefined,
-				undefined,
+				'topbar',
 				{ x: 0, y: 0 },
 				{
 					3: processDimension(preset.dims, 3),
 					12: processDimension(preset.dims, 12)
-				}
+				},
+				true,
+				true
 			)
 
 			setUpTopBarComponentContent(id, value)