Improve mission name usage experience

src/App.vue

@@ -54,7 +54,14 @@
           <v-card class="pa-2">
             <v-card-title>Mission configuration</v-card-title>
             <v-card-text>
-              <v-text-field v-model="store.missionName" hide-details="auto" label="Mission name" />
+              <div class="flex">
+                <v-text-field
+                  v-model="store.missionName"
+                  label="Mission name"
+                  append-inner-icon="mdi-restore"
+                  @click:append-inner="store.missionName = store.lastMissionName"
+                />
+              </div>
             </v-card-text>
           </v-card>
         </v-dialog>
@@ -66,16 +73,21 @@
             <button class="flex items-center justify-center h-full aspect-square" @click="showMainMenu = true">
               <span class="text-3xl transition-all mdi mdi-menu text-slate-300 hover:text-slate-50" />
             </button>
-            <div class="flex items-center justify-center h-full ml-3 mr-1">
-              <p
-                class="overflow-hidden text-lg font-medium leading-none text-white cursor-pointer select-none max-h-9"
-                @click="showMissionOptionsDialog = true"
-              >
-                {{ store.missionName }}
-              </p>
+            <div
+              class="flex items-center justify-start h-full px-4 ml-3 mr-1 transition-all cursor-pointer hover:bg-slate-200/30 min-w-[20%] select-none"
+              @click="showMissionOptionsDialog = true"
+            >
+              <div class="flex items-center h-full overflow-hidden text-lg font-medium leading-none text-white">
+                <p v-if="store.missionName">{{ store.missionName }}</p>
+                <p v-else>
+                  {{ randomMissionName }}
+                  <FontAwesomeIcon icon="fa-pen-to-square" size="md" class="ml-2 text-slate-200/30" />
+                </p>
+              </div>
             </div>
             <div class="grow" />
             <Alerter class="max-w-sm min-w-fit" />
+            <div class="grow" />
             <div class="flex-1">
               <MiniWidgetContainer
                 :container="widgetStore.currentMiniWidgetsProfile.containers[0]"
@@ -135,6 +147,7 @@ import {
 import { useRoute } from 'vue-router'
 
 import ConfigurationMenu from '@/components/ConfigurationMenu.vue'
+import { coolMissionNames } from '@/libs/funny-name/words'
 import { CockpitAction, registerActionCallback, unregisterActionCallback } from '@/libs/joystick/protocols'
 import { useMissionStore } from '@/stores/mission'
 
@@ -169,6 +182,7 @@ const fullScreenToggleIcon = computed(() => (isFullscreen.value ? 'mdi-fullscree
 // Mission identification
 const store = useMissionStore()
 const showMissionOptionsDialog = ref(false)
+const randomMissionName = coolMissionNames.random()
 
 // Clock
 const timeNow = useTimestamp({ interval: 1000 })

src/libs/funny-name/words.ts

@@ -671,3 +671,38 @@ export const animalsOcean = [
   'worm',
   'wrasse',
 ]
+
+export const coolMissionNames = [
+  'Diving into the Abyss Explorer',
+  "Embarking on Neptune's Quest",
+  'Exploring the Mariana Mirage',
+  'Embarking on an Oceanic Odyssey',
+  'Discovering Seabed Serenity',
+  'Ascending to Atlantis',
+  "Conquering Leviathan's Lair",
+  'Quest for the Deep Blue',
+  'Triumph of Tidal Exploration',
+  'Navigating the Nautical Nexus',
+  'Venturing into the Sublime Seafloor',
+  'Plumbing the Azure Abyss',
+  "Entering Poseidon's Portal",
+  'Decrypting the Coral Cryptic',
+  'Venturing into the Vortex',
+  "Keeping Watch on Kraken's Lair",
+  'Investigating the Aqua Anomaly',
+  'Symphony with the Sirens',
+  "Diving into Davy Jones' Abyss",
+  'Embarking on a Subaquatic Saga',
+  'Consulting the Oceanic Oracle',
+  'Navigating the Mystical Maelstrom',
+  'Sojourning through the Seastorm',
+  'Unlocking Sublime Secrets',
+  'Finding Tidal Tranquility',
+  'Alchemy of the Abyss',
+  "Navigating Neptune's Nexus",
+  "Unraveling the Mariner's Mystery",
+  'Symphony of the Submerged',
+  "Legends in Leviathan's Legacy",
+  'Discovering the Deep Blue',
+  'Solving the Nautical Enigma',
+]

src/stores/mission.ts

@@ -1,13 +1,16 @@
 import { useStorage } from '@vueuse/core'
 import { defineStore } from 'pinia'
-import { reactive } from 'vue'
+import { reactive, ref, watch } from 'vue'
 
 import type { Waypoint, WaypointCoordinates } from '@/types/mission'
 
 export const useMissionStore = defineStore('mission', () => {
-  const missionName = useStorage('cockpit-mission-name', '')
+  const missionName = ref('')
+  const lastMissionName = useStorage('cockpit-last-mission-name', '')
   const missionStartTime = useStorage('cockpit-mission-start-time', new Date())
 
+  watch(missionName, () => (lastMissionName.value = missionName.value))
+
   const currentPlanningWaypoints = reactive<Waypoint[]>([])
 
   const moveWaypoint = (id: string, newCoordinates: WaypointCoordinates): void => {
@@ -21,5 +24,5 @@ export const useMissionStore = defineStore('mission', () => {
     )
   }
 
-  return { missionName, missionStartTime, currentPlanningWaypoints, moveWaypoint }
+  return { missionName, lastMissionName, missionStartTime, currentPlanningWaypoints, moveWaypoint }
 })