46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
session: {
|
|
id: string
|
|
hostName: string
|
|
protocol: 'ssh' | 'rdp'
|
|
color: string | null
|
|
active: boolean
|
|
}
|
|
isActive: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'activate'): void
|
|
(e: 'close'): void
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
@click="emit('activate')"
|
|
class="flex items-center gap-2 px-3 h-full text-sm shrink-0 border-r border-gray-800 transition-colors"
|
|
:class="isActive ? 'bg-gray-900 text-white' : 'bg-gray-950 text-gray-500 hover:text-gray-300 hover:bg-gray-900'"
|
|
>
|
|
<!-- Color dot -->
|
|
<span
|
|
class="w-2 h-2 rounded-full shrink-0"
|
|
:style="session.color ? `background-color: ${session.color}` : ''"
|
|
:class="!session.color ? 'bg-wraith-500' : ''"
|
|
/>
|
|
<!-- Protocol badge -->
|
|
<span
|
|
class="text-xs font-mono uppercase px-1 rounded"
|
|
:class="session.protocol === 'rdp' ? 'text-orange-400 bg-orange-950' : 'text-wraith-400 bg-wraith-950'"
|
|
>{{ session.protocol }}</span>
|
|
<!-- Host name -->
|
|
<span class="max-w-[120px] truncate">{{ session.hostName }}</span>
|
|
<!-- Close -->
|
|
<button
|
|
@click.stop="emit('close')"
|
|
class="ml-1 text-gray-600 hover:text-red-400 text-xs leading-none"
|
|
title="Close session"
|
|
>×</button>
|
|
</button>
|
|
</template>
|