chore: Move open terminal in new tab to terminal component

.gitignore

@@ -144,4 +144,5 @@ dist
 .pnp.*
 
 #screenshots
-tests/cypress/screenshots
+tests/cypress/screenshots
+services/cmd-hook/cmd-hook

app/src/components/game/ControlPalette.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
-import useSession from '../../store/session'
+import { useSession } from '../../store/session'
 import { openBugReport, openQuestSurvey } from '../../utils/formbricks'
 
 const router = useRouter()

app/src/components/game/DescriptionPart.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import useSession from '../../store/session'
+import { useSession } from '../../store/session'
 import MarkdownText from '../MarkdownText.vue'
 
 const sessionStore = useSession()

app/src/components/game/QuestPart.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import MarkdownText from '../MarkdownText.vue'
-import useSession from '../../store/session'
+import { useSession } from '../../store/session'
 
 const sessionStore = useSession()
 const tasks = computed(() => {
@@ -22,11 +22,6 @@ const tasks = computed(() => {
   <div class="h-full w-full max-h-full">
     <p id="topic" class="text-text font-black" v-if="sessionStore.quest">
       {{ sessionStore.quest.title }}
-      <a
-        :href="`http://localhost/terminal/${sessionStore.session?.containerName}?token=${sessionStore.session?.token}`"
-      >
-        Open Terminal
-      </a>
     </p>
     <br />
     <div>

app/src/components/game/StartButton.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useToast } from 'vue-toastification'
 import { computed } from 'vue'
-import useSession from '../../store/session'
+import { useSession } from '../../store/session'
 
 const toast = useToast()
 const sessionStore = useSession()

app/src/components/game/TerminalPart.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
-import { useTerminal } from '../../store/session'
+import { useSession, useTerminal } from '../../store/session'
+
+const sessionStore = useSession()
 
 const terminal = ref<HTMLElement | null>(null)
 const term = useTerminal()
@@ -23,6 +25,14 @@ onMounted(() => {
     <div class="flex items-center gap-2 p-1">
       <font-awesome-icon :icon="['fas', 'terminal']" class="text-text" />
       <button id="Terminal" class="text-text">終端機</button>
+
+      <a
+        class="text-sm font-normal text-gray-200 ml-10"
+        :href="`/terminal/${sessionStore.session?.containerName}?token=${sessionStore.session?.token}`"
+        target="_blank"
+      >
+        Open Terminal in New Tab
+      </a>
     </div>
     <div
       id="terminal"

app/src/components/game/TreeChart.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import FileNode from '../FileNode.vue'
-import useSession from '../../store/session'
+import { useSession } from '../../store/session'
 
 const sessionStore = useSession()
 </script>

app/src/components/header/GameHeaderComponents.vue

@@ -5,7 +5,7 @@ import { useToast } from 'vue-toastification'
 import { logout } from '../../utils/auth'
 import { trpc } from '../../utils/trpc'
 import { openBugReport } from '../../utils/formbricks'
-import useSession from '../../store/session'
+import { useSession } from '../../store/session'
 import useUserProfile from '../../store/userProfile'
 
 const userStore = useUserProfile()

app/src/store/session.ts

@@ -34,7 +34,7 @@ interface Store {
   quest: QuestDetailResponse | null
 }
 
-const useSession = defineStore('session', {
+export const useSession = defineStore('session', {
   state: (): Store => ({
     session: null,
     questId: '',
@@ -126,5 +126,3 @@ const useSession = defineStore('session', {
 export function useTerminal() {
   return term
 }
-
-export default useSession

app/src/utils/formbricks.ts

@@ -1,5 +1,5 @@
 import formbricks from '@formbricks/js/website'
-import useSession from '../store/session'
+import { useSession } from '../store/session'
 import useUserProfile from '../store/userProfile'
 
 if (typeof window !== 'undefined') {

app/src/views/GamePage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, watch } from 'vue'
-import useSession from '../store/session'
+import { useSession } from '../store/session'
 import useUserProfile from '../store/userProfile'
 import HeaderPart from '../components/header/HeaderPart.vue'
 import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'

server/src/models/sessionManager.ts

@@ -8,6 +8,7 @@ import {
 } from '../containers/docker.js'
 import logger from '../utils/logger.js'
 import { questManager } from './quest.js'
+import config from '../config'
 
 async function deactivateSessions(userId: string, quest: string) {
   const sessions = await Session.find({
@@ -65,7 +66,7 @@ export async function createNewSession(
   })
 
   console.log('container', container.id)
-  console.log('containerName', `http://localhost/terminal/${containerName}`)
+  console.log('containerName', `${config.baseUrl}/terminal/${containerName}`)
 
   const progress = userProfile.progress.get(quest.id)
   if (!progress) {