fix: various Nav Bar fixes

packages/app/cypress/e2e/integration/settings.spec.ts

@@ -72,7 +72,7 @@ describe('Settings', { viewportWidth: 600 }, () => {
 
     // navigate away and come back
     // preferred editor selected from dropdown should have been persisted
-    cy.get('[href="#/"]').click()
+    cy.visitApp()
     cy.get('[href="#/settings"]').click()
     cy.wait(100)
     cy.get('[data-cy="Device Settings"]').click()

packages/app/src/layouts/default.vue

@@ -1,15 +1,16 @@
 <template>
-  <div class="h-screen min-w-728px layout-grid">
+  <div class="h-screen min-w-728px grid grid-rows-[64px,1fr] grid-cols-[auto,1fr]">
     <SidebarNavigation class="row-span-full" />
 
     <HeaderBar
       v-if="showHeader"
       :show-browsers="true"
-      :page-name="pageName"
+      :page-name="currentRoute.name?.toString()"
     />
 
     <main
       aria-labelledby="primary-heading"
+      class="overflow-auto"
     >
       <router-view v-slot="{ Component, route }">
         <h1
@@ -41,16 +42,4 @@ const currentRoute = useRoute()
 const showHeader = computed(() => {
   return currentRoute.meta.header !== false
 })
-
-const pageName = computed((): string | undefined => {
-  return currentRoute.meta?.title as string
-})
 </script>
-
-<style lang="scss" scoped>
-.layout-grid {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-template-rows: 64px 1fr;
-}
-</style>

packages/app/src/navigation/SidebarNavigation.spec.tsx

@@ -4,7 +4,7 @@ import SidebarNavigation from './SidebarNavigation.vue'
 function mountComponent (initialNavExpandedVal = true) {
   const mainStore = useMainStore()
 
-  mainStore.navBarExpanded = initialNavExpandedVal
+  mainStore.setNavBarExpandedByUser(initialNavExpandedVal)
 
   cy.mount(() => {
     return (

packages/app/src/navigation/SidebarNavigation.vue

@@ -5,7 +5,8 @@
     :class="mainStore.navBarExpanded ? 'w-248px' : 'w-64px'"
   >
     <button
-      class="cursor-pointer left-full top-0 bottom-0 w-16px absolute group hocus:outline-transparent"
+      v-if="navIsAlwaysCollapsed"
+      class="cursor-pointer left-full top-0 bottom-0 w-16px z-1 absolute group hocus:outline-transparent"
       role="button"
       aria-label="toggle navigation"
       @click="mainStore.toggleNavBar"
@@ -117,11 +118,12 @@ import { useMainStore } from '../store'
 import { SideBarNavigationDocument } from '../generated/graphql'
 import CypressLogo from '@packages/frontend-shared/src/assets/logos/cypress_s.png'
 import { useI18n } from '@cy/i18n'
+import { useRoute } from 'vue-router'
 
 const { t } = useI18n()
 
 const navigation = [
-  { name: 'Specs', icon: CodeIcon, href: '/' },
+  { name: 'Specs', icon: CodeIcon, href: '/specs' },
   { name: 'Runs', icon: RunsIcon, href: '/runs' },
   { name: 'Settings', icon: SettingsIcon, href: '/settings' },
 ]
@@ -145,4 +147,8 @@ const bindingsOpen = ref(false)
 
 const mainStore = useMainStore()
 
+const route = useRoute()
+
+const navIsAlwaysCollapsed = computed(() => route.meta?.navBarExpandedAllowed !== false)
+
 </script>

packages/app/src/pages/Runs.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative p-24px h-full">
+  <div class="h-full p-24px relative">
     <TransitionQuickFade>
       <RunsSkeleton v-if="query.fetching.value || !query.data.value" />
       <RunsPage
@@ -24,12 +24,3 @@ query Runs {
 
 const query = useQuery({ query: RunsDocument })
 </script>
-
-<route>
-{
-  name: "Runs",
-  meta: {
-    title: "Runs"
-  }
-}
-</route>

packages/app/src/pages/Settings.vue

@@ -29,12 +29,3 @@ function reconfigure () {
   openElectron.executeMutation({})
 }
 </script>
-
-<route>
-{
-  name: "Settings Page",
-  meta: {
-    title: "Settings"
-  }
-}
-</route>

packages/app/src/pages/Specs.vue

@@ -0,0 +1,11 @@
+<template>
+  <router-view />
+</template>
+
+<route>
+{
+  meta: {
+    default: true,
+  }
+}
+</route>

packages/app/src/pages/Index.vue → packages/app/src/pages/Specs/Index.vue

@@ -18,12 +18,12 @@
 </template>
 
 <script lang="ts" setup>
-import { gql, useQuery } from '@urql/vue'
-import SpecsList from '../specs/SpecsList.vue'
-import { SpecsPageContainerDocument } from '../generated/graphql'
-import NoSpecsPage from '../specs/NoSpecsPage.vue'
 import { computed, ref } from 'vue'
+import { gql, useQuery } from '@urql/vue'
 import { useI18n } from '@cy/i18n'
+import SpecsList from '../../specs/SpecsList.vue'
+import NoSpecsPage from '../../specs/NoSpecsPage.vue'
+import { SpecsPageContainerDocument } from '../../generated/graphql'
 const { t } = useI18n()
 
 gql`
@@ -45,12 +45,3 @@ const title = computed(() => {
 })
 
 </script>
-
-<route>
-{
-  name: "Specs Page",
-  meta: {
-    title: "Specs"
-  }
-}
-</route>

packages/app/src/pages/Runner.vue → packages/app/src/pages/Specs/Runner.vue

@@ -7,8 +7,8 @@
 
 <script lang="ts" setup>
 import { gql, useQuery } from '@urql/vue'
-import { SpecPageContainerDocument } from '../generated/graphql'
-import SpecRunnerContainer from '../runner/SpecRunnerContainer.vue'
+import { SpecPageContainerDocument } from '../../generated/graphql'
+import SpecRunnerContainer from '../../runner/SpecRunnerContainer.vue'
 
 gql`
 query SpecPageContainer {
@@ -22,7 +22,8 @@ const query = useQuery({ query: SpecPageContainerDocument })
 <route>
   {
     meta: {
-      header: false
+      header: false,
+      navBarExpandedAllowed: false
     }
   }
 </route>

packages/app/src/pages/[...all].vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-center mt-20 w-400px mx-auto p-20px border-1 rounded-md">
+  <div class="rounded-md mx-auto border-1 mt-20 text-center p-20px w-400px">
     <h1 class="text-2xl">
       You seem to have gotten lost...
     </h1>
@@ -10,7 +10,7 @@
       <li
         v-for="route in routes"
         :key="route.path"
-        class="text-left underline underline-2 underline-offset-1 underline-indigo-700 text-indigo-700 hover:text-indigo-500 hover:underline-indigo-500"
+        class="text-left text-indigo-700 underline underline-2 underline-offset-1 underline-indigo-700 hover:text-indigo-500 hover:underline-indigo-500"
       >
         <RouterLink :to="route.path">
           {{ route.name }}
@@ -36,7 +36,6 @@ const routes = computed(() => {
     layout: "default",
     error: true
   },
-  name: "404 Page",
   meta: {
     title: "404"
   }

packages/app/src/router/router.ts

@@ -5,6 +5,15 @@ import { setupLayouts } from 'virtual:generated-layouts'
 export const createRouter = () => {
   const routes = setupLayouts(generatedRoutes)
 
+  const defaultRoute = generatedRoutes.find((route) => route.meta?.default)
+
+  if (defaultRoute) {
+    routes.push({
+      path: '/',
+      redirect: defaultRoute.path,
+    })
+  }
+
   return _createRouter({
     history: createWebHashHistory(),
     routes,

packages/app/src/specs/InlineSpecListTree.vue

@@ -34,7 +34,7 @@
           :class="{'before:border-r-indigo-300 before:border-r-4': isCurrentSpec(row.data),
                    'group-hocus:bg-gray-900 focus:bg-gray-900 before:focus-within:(border-r-0) before:(border-r-gray-1000) before:group-hover:(h-26px border-r-gray-900)': !isCurrentSpec(row.data)
           }"
-          :to="{ path: 'runner', query: { file: row.data.data?.relative } }"
+          :to="{ path: '/specs/runner', query: { file: row.data.data?.relative } }"
           @focus="resetFocusIfNecessary(row, row.index)"
           @click.capture.prevent="submit(row.data, row.index)"
           @keydown.enter.space.prevent.stop="submit(row.data, row.index)"
@@ -124,7 +124,7 @@ const submit = (row: UseCollapsibleTreeNode<SpecTreeNode<FuzzyFoundSpec>>, idx:
       return
     }
 
-    router.push({ path: 'runner', query: { file: row.data.relative } })
+    router.push({ path: '/specs/runner', query: { file: row.data.relative } })
   } else {
     row.toggle()
   }

packages/app/src/specs/SpecItem.vue

@@ -3,8 +3,7 @@
     class="h-full grid gap-8px grid-cols-[16px,auto,auto] items-center"
     data-cy="spec-item"
   >
-    <component
-      :is="DocumentIconBlank"
+    <i-cy-document-blank_x16
       class="icon-light-gray-50 icon-dark-gray-200"
     />
 
@@ -26,7 +25,6 @@
 </template>
 
 <script lang="ts" setup>
-import DocumentIconBlank from '~icons/cy/document-blank_x16'
 import HighlightedText from './HighlightedText.vue'
 
 withDefaults(defineProps<{

packages/app/src/specs/SpecsList.vue

@@ -41,7 +41,7 @@
             <RouterLink
               v-if="row.data.isLeaf && row.data"
               :key="row.data.data?.absolute"
-              :to="{ path: 'runner', query: { file: row.data.data?.relative } }"
+              :to="{ path: '/specs/runner', query: { file: row.data.data?.relative } }"
             >
               <SpecItem
                 :file-name="row.data.data?.fileName || row.data.name"

packages/app/src/specs/generators/component/ComponentGeneratorStepOne.vue

@@ -2,9 +2,9 @@
   <div class="flex-grow">
     <div
       v-if="mutation.fetching.value"
-      class="inline-flex items-center w-full justify-center mt-48px"
+      class="mt-48px w-full inline-flex items-center justify-center"
     >
-      <i-cy-loading_x16 class="animate-spin w-48px h-48px mr-12px" />
+      <i-cy-loading_x16 class="h-48px mr-12px animate-spin w-48px" />
       <p class="text-lg">
         Loading
       </p>
@@ -24,15 +24,15 @@
   <div>
     <div
       v-if="!result"
-      class="rounded-b w-full h-24px"
+      class="rounded-b h-24px w-full"
     />
     <StandardModalFooter
       v-else
-      class="h-72px flex gap-16px"
+      class="flex h-72px gap-16px"
     >
       <router-link
         class="outline-none"
-        :to="{ path: 'runner', query: { file: result.spec.relative } }
+        :to="{ path: '/specs/runner', query: { file: result.spec.relative } }
         "
       >
         <Button

packages/app/src/specs/generators/story/StoryGeneratorStepOne.vue

@@ -2,9 +2,9 @@
   <div class="flex-grow">
     <div
       v-if="mutation.fetching.value"
-      class="inline-flex items-center w-full justify-center mt-48px"
+      class="mt-48px w-full inline-flex items-center justify-center"
     >
-      <i-cy-loading_x16 class="animate-spin w-48px h-48px mr-12px" />
+      <i-cy-loading_x16 class="h-48px mr-12px animate-spin w-48px" />
       <p class="text-lg">
         Loading
       </p>
@@ -24,15 +24,15 @@
   <div>
     <div
       v-if="!result"
-      class="rounded-b w-full h-24px"
+      class="rounded-b h-24px w-full"
     />
     <StandardModalFooter
       v-else
-      class="h-72px flex gap-16px"
+      class="flex h-72px gap-16px"
     >
       <router-link
         class="outline-none"
-        :to="{ path: 'runner', query: { file: result.spec.relative } }
+        :to="{ path: 'specs/runner', query: { file: result.spec.relative } }
         "
       >
         <Button

packages/app/src/store/main-store.ts

@@ -1,7 +1,8 @@
 import { defineStore } from 'pinia'
+import { useRoute } from 'vue-router'
 
 export interface MainStoreState {
-  navBarExpanded: boolean
+  navBarExpandedByUser: boolean
 }
 
 /**
@@ -13,12 +14,22 @@ export const useMainStore = defineStore({
   id: 'main',
   state: (): MainStoreState => {
     return {
-      navBarExpanded: true,
+      navBarExpandedByUser: true,
     }
   },
   actions: {
     toggleNavBar () {
-      this.navBarExpanded = !this.navBarExpanded
+      this.navBarExpandedByUser = !this.navBarExpandedByUser
+    },
+    setNavBarExpandedByUser (value: boolean) {
+      this.navBarExpandedByUser = value
+    },
+  },
+  getters: {
+    navBarExpanded: (state) => {
+      const route = useRoute()
+
+      return state.navBarExpandedByUser && route.meta?.navBarExpandedAllowed !== false
     },
   },
 })

packages/server/lib/project_utils.ts

@@ -86,7 +86,7 @@ export const getSpecUrl = ({
   specType ??= 'integration'
   browserUrl ??= ''
 
-  // App routes to spec with convention {browserUrl}#/runner?file={relativeSpecPath}
+  // App routes to spec with convention {browserUrl}#/specs/runner?file={relativeSpecPath}
   if (process.env.LAUNCHPAD) {
     if (!absoluteSpecPath) {
       return browserUrl
@@ -95,7 +95,7 @@ export const getSpecUrl = ({
     const relativeSpecPath = path.relative(projectRoot, path.resolve(projectRoot, absoluteSpecPath))
     .replace(backSlashesRe, '/')
 
-    return `${browserUrl}/#/runner?file=${relativeSpecPath}`
+    return `${browserUrl}/#/specs/runner?file=${relativeSpecPath}`
     .replace(multipleForwardSlashesRe, multipleForwardSlashesReplacer)
   }