58 lines
2.0 KiB
Vue
58 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { useSessionStore } from '~/stores/session.store'
|
|
|
|
const sessions = useSessionStore()
|
|
|
|
// Sessions with pending-XXX IDs are mounting TerminalInstance which will get a real UUID.
|
|
// SFTP sidebar only connects once we have a real (non-pending) backend session ID.
|
|
function isRealSession(id: string) {
|
|
return !id.startsWith('pending-')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Session container — always in DOM when sessions exist, uses v-show for persistence -->
|
|
<div v-if="sessions.hasSessions" class="absolute inset-0 flex flex-col z-10 bg-gray-950">
|
|
<!-- Tab bar -->
|
|
<TerminalTabs />
|
|
|
|
<!-- Session panels — v-show keeps terminal alive when switching tabs -->
|
|
<div class="flex-1 overflow-hidden relative">
|
|
<div
|
|
v-for="session in sessions.sessions"
|
|
:key="session.id"
|
|
v-show="session.id === sessions.activeSessionId"
|
|
class="absolute inset-0 flex"
|
|
>
|
|
<!-- SSH session: SFTP sidebar + terminal -->
|
|
<template v-if="session.protocol === 'ssh'">
|
|
<!-- SFTP sidebar only renders once we have a real backend sessionId -->
|
|
<SftpSidebar
|
|
v-if="isRealSession(session.id)"
|
|
:session-id="session.id"
|
|
/>
|
|
<!-- Terminal — always renders, handles pending→real session ID transition internally -->
|
|
<div class="flex-1 overflow-hidden">
|
|
<TerminalInstance
|
|
:session-id="session.id"
|
|
:host-id="session.hostId"
|
|
:host-name="session.hostName"
|
|
:color="session.color"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- RDP session placeholder (Phase 3) -->
|
|
<template v-else-if="session.protocol === 'rdp'">
|
|
<div class="flex-1 flex items-center justify-center text-gray-600">
|
|
RDP — Phase 3
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transfer status bar -->
|
|
<TransferStatus :transfers="[]" />
|
|
</div>
|
|
</template>
|