Move project name (#9132)

Closes #8672.

Before:
![image](https://github.com/enso-org/enso/assets/1047859/9d95178f-24c1-4e82-bf90-a37c3d1ca450)

After:
![image](https://github.com/enso-org/enso/assets/1047859/84e6dae9-e309-46c5-9be8-6b82dcb9ddc4)

# Important Notes
- The execution context controls are no longer aligned nicely, but we are about to make major changes to their display anyway: #8673

app/gui2/e2e/collapsingAndEntering.spec.ts

@@ -11,16 +11,16 @@ test('Entering nodes', async ({ page }) => {
   await actions.goToGraph(page)
   await mockCollapsedFunctionInfo(page, 'final', 'func1')
   await expectInsideMain(page)
-  await expect(locate.navBreadcrumb(page)).toHaveText(['main'])
+  await expect(locate.navBreadcrumb(page)).toHaveText(['Mock Project'])
 
   await locate.graphNodeByBinding(page, 'final').dblclick()
   await mockCollapsedFunctionInfo(page, 'f2', 'func2')
   await expectInsideFunc1(page)
-  await expect(locate.navBreadcrumb(page)).toHaveText(['main', 'func1'])
+  await expect(locate.navBreadcrumb(page)).toHaveText(['Mock Project', 'func1'])
 
   await locate.graphNodeByBinding(page, 'f2').dblclick()
   await expectInsideFunc2(page)
-  await expect(locate.navBreadcrumb(page)).toHaveText(['main', 'func1', 'func2'])
+  await expect(locate.navBreadcrumb(page)).toHaveText(['Mock Project', 'func1', 'func2'])
 })
 
 test('Leaving entered nodes', async ({ page }) => {
@@ -42,7 +42,7 @@ test('Using breadcrumbs to navigate', async ({ page }) => {
   await page.mouse.dblclick(100, 100)
   await expectInsideMain(page)
   // Breadcrumbs still have all the crumbs, but the last two are dimmed.
-  await expect(locate.navBreadcrumb(page)).toHaveText(['main', 'func1', 'func2'])
+  await expect(locate.navBreadcrumb(page)).toHaveText(['Mock Project', 'func1', 'func2'])
   await expect(locate.navBreadcrumb(page, (f) => f.class('inactive'))).toHaveText([
     'func1',
     'func2',
@@ -51,7 +51,7 @@ test('Using breadcrumbs to navigate', async ({ page }) => {
   await locate.navBreadcrumb(page).filter({ hasText: 'func2' }).click()
   await expectInsideFunc2(page)
 
-  await locate.navBreadcrumb(page).filter({ hasText: 'main' }).click()
+  await locate.navBreadcrumb(page).filter({ hasText: 'Mock Project' }).click()
   await expectInsideMain(page)
 
   await locate.navBreadcrumb(page).filter({ hasText: 'func1' }).click()

app/gui2/src/components/GraphEditor.vue

@@ -658,7 +658,6 @@ function handleEdgeDrop(source: AstId, position: Vec2) {
     />
     <TopBar
       v-model:mode="projectStore.executionMode"
-      :title="projectStore.displayName"
       :modes="EXECUTION_MODES"
       :breadcrumbs="stackNavigator.breadcrumbLabels.value"
       :allowNavigationLeft="stackNavigator.allowNavigationLeft.value"

app/gui2/src/components/ProjectTitle.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import ExecutionModeSelector from '@/components/ExecutionModeSelector.vue'
-
-const props = defineProps<{ title: string; modes: string[]; mode: string }>()
-const emit = defineEmits<{ execute: []; 'update:mode': [mode: string] }>()
-</script>
-
-<template>
-  <div class="ProjectTitle" @pointerdown.stop @pointerup.stop @click.stop>
-    <span class="title" v-text="props.title"></span>
-    <ExecutionModeSelector
-      :modes="props.modes"
-      :modelValue="props.mode"
-      @execute="emit('execute')"
-      @update:modelValue="emit('update:mode', $event)"
-    />
-  </div>
-</template>
-
-<style scoped>
-.ProjectTitle {
-  user-select: none;
-  display: flex;
-  align-items: center;
-  background: var(--color-frame-bg);
-  border-radius: var(--radius-full);
-  backdrop-filter: var(--blur-app-bg);
-  gap: 8px;
-  padding-left: 10px;
-  padding-right: 4px;
-  padding-top: 4px;
-  padding-bottom: 4px;
-
-  > .title {
-    display: inline-block;
-    height: 24px;
-    padding: 1px 0px;
-  }
-}
-</style>

app/gui2/src/components/TopBar.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
+import ExecutionModeSelector from '@/components/ExecutionModeSelector.vue'
 import ExtendedMenu from '@/components/ExtendedMenu.vue'
 import NavBar from '@/components/NavBar.vue'
 import type { BreadcrumbItem } from '@/components/NavBreadcrumbs.vue'
-import ProjectTitle from '@/components/ProjectTitle.vue'
 import { injectGuiConfig } from '@/providers/guiConfig'
 import { computed } from 'vue'
 
 const props = defineProps<{
-  title: string
   breadcrumbs: BreadcrumbItem[]
   modes: string[]
   mode: string
@@ -40,11 +39,10 @@ const barStyle = computed(() => {
 
 <template>
   <div class="TopBar" :style="barStyle">
-    <ProjectTitle
-      :title="props.title"
+    <ExecutionModeSelector
       :modes="props.modes"
-      :mode="props.mode"
-      @update:mode="emit('update:mode', $event)"
+      :modelValue="props.mode"
+      @update:modelValue="emit('update:mode', $event)"
       @execute="emit('execute')"
     />
     <NavBar

app/gui2/src/composables/stackNavigator.ts

@@ -3,7 +3,7 @@ import { useGraphStore } from '@/stores/graph'
 import { useProjectStore } from '@/stores/project'
 import type { AstId } from '@/util/ast/abstract.ts'
 import { qnLastSegment, tryQualifiedName } from '@/util/qualifiedName'
-import type { StackItem } from 'shared/languageServerTypes.ts'
+import { methodPointerEquals, type StackItem } from 'shared/languageServerTypes'
 import { computed, onMounted, ref } from 'vue'
 
 export function useStackNavigator() {
@@ -15,7 +15,7 @@ export function useStackNavigator() {
   const breadcrumbLabels = computed(() => {
     const activeStackLength = projectStore.executionContext.desiredStack.length
     return breadcrumbs.value.map((item, index) => {
-      const label = stackItemToLabel(item)
+      const label = stackItemToLabel(item, index === 0)
       const isActive = index < activeStackLength
       return { label, active: isActive } satisfies BreadcrumbItem
     })
@@ -29,8 +29,17 @@ export function useStackNavigator() {
     return projectStore.executionContext.desiredStack.length < breadcrumbs.value.length
   })
 
-  function stackItemToLabel(item: StackItem): string {
-    return graphStore.db.stackItemToMethodName(item) ?? 'unknown'
+  function isProjectEntryPoint(item: StackItem) {
+    return (
+      item.type === 'ExplicitCall' &&
+      methodPointerEquals(item.methodPointer, projectStore.entryPoint)
+    )
+  }
+
+  function stackItemToLabel(item: StackItem, isStackRoot: boolean): string {
+    if (isStackRoot && isProjectEntryPoint(item)) return projectStore.displayName
+    const methodName = graphStore.db.stackItemToMethodName(item)
+    return methodName ?? 'unknown'
   }
 
   function handleBreadcrumbClick(index: number) {

app/gui2/src/stores/project/index.ts

@@ -32,6 +32,7 @@ import type {
   ExplicitCall,
   ExpressionId,
   ExpressionUpdate,
+  MethodPointer,
   StackItem,
   VisualizationConfiguration,
 } from 'shared/languageServerTypes'
@@ -548,12 +549,15 @@ export const useProjectStore = defineStore('project', () => {
     return mod
   })
 
-  function createExecutionContextForMain(): ExecutionContext {
+  const entryPoint = computed<MethodPointer>(() => {
     const projectName = fullName.value
     const mainModule = `${projectName}.Main`
-    const entryPoint = { module: mainModule, definedOnType: mainModule, name: 'main' }
+    return { module: mainModule, definedOnType: mainModule, name: 'main' }
+  })
+
+  function createExecutionContextForMain(): ExecutionContext {
     return new ExecutionContext(lsRpcConnection, {
-      methodPointer: entryPoint,
+      methodPointer: entryPoint.value,
       positionalArgumentsExpressions: [],
     })
   }
@@ -693,6 +697,7 @@ export const useProjectStore = defineStore('project', () => {
     diagnostics,
     module,
     modulePath,
+    entryPoint,
     projectModel,
     contentRoots,
     awareness: markRaw(awareness),