3b14a7c1d1
Left sidebar: - Groups now show recursive host count badges - Hosts in tree show up to 3 tags inline Right sidebar (Host Details panel): - Click any host card to open details panel on the right - Shows address, port, protocol, group, credential, tags, color, notes - Connect, Edit, Delete action buttons at bottom - Selected card gets ring highlight Terminal themes (10 prebuilt): - Wraith (default), Dracula, Nord, Solarized Dark, Monokai, One Dark, Gruvbox Dark, Tokyo Night, Catppuccin Mocha, Cyberpunk - Visual theme picker in Settings with color preview + sample text - Persisted to /api/settings and localStorage for immediate use - useTerminal reads theme on terminal creation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
99 lines
3.0 KiB
Vue
99 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
interface Host {
|
|
id: number
|
|
name: string
|
|
hostname: string
|
|
port: number
|
|
protocol: 'ssh' | 'rdp'
|
|
tags: string[]
|
|
notes: string | null
|
|
color: string | null
|
|
lastConnectedAt: string | null
|
|
group: { id: number; name: string } | null
|
|
}
|
|
|
|
const props = defineProps<{
|
|
host: Host
|
|
selected?: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'edit'): void
|
|
(e: 'delete'): void
|
|
(e: 'connect'): void
|
|
}>()
|
|
|
|
function formatLastConnected(ts: string | null): string {
|
|
if (!ts) return 'Never'
|
|
const d = new Date(ts)
|
|
const now = new Date()
|
|
const diffMs = now.getTime() - d.getTime()
|
|
const diffDays = Math.floor(diffMs / 86400000)
|
|
if (diffDays === 0) return 'Today'
|
|
if (diffDays === 1) return 'Yesterday'
|
|
if (diffDays < 30) return `${diffDays}d ago`
|
|
return d.toLocaleDateString()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="relative bg-gray-900 border rounded-lg p-4 hover:border-wraith-700 transition-colors group cursor-pointer"
|
|
:class="selected ? 'border-wraith-600 ring-1 ring-wraith-600/30' : 'border-gray-800'"
|
|
>
|
|
<!-- Color indicator strip -->
|
|
<div
|
|
v-if="host.color"
|
|
class="absolute top-0 left-0 w-1 h-full rounded-l-lg"
|
|
:style="{ backgroundColor: host.color }"
|
|
/>
|
|
|
|
<!-- Header row -->
|
|
<div class="flex items-start justify-between gap-2 pl-2">
|
|
<div class="min-w-0 flex-1">
|
|
<h3 class="font-semibold text-white truncate">{{ host.name }}</h3>
|
|
<p class="text-sm text-gray-500 truncate">{{ host.hostname }}:{{ host.port }}</p>
|
|
</div>
|
|
|
|
<!-- Protocol badge -->
|
|
<span
|
|
class="text-xs font-medium px-2 py-0.5 rounded shrink-0"
|
|
:class="host.protocol === 'rdp'
|
|
? 'bg-purple-900/50 text-purple-300 border border-purple-800'
|
|
: 'bg-wraith-900/50 text-wraith-300 border border-wraith-800'"
|
|
>{{ host.protocol.toUpperCase() }}</span>
|
|
</div>
|
|
|
|
<!-- Group + last connected -->
|
|
<div class="mt-2 pl-2 flex items-center justify-between text-xs text-gray-600">
|
|
<span v-if="host.group" class="truncate">{{ host.group.name }}</span>
|
|
<span v-else class="italic">Ungrouped</span>
|
|
<span>{{ formatLastConnected(host.lastConnectedAt) }}</span>
|
|
</div>
|
|
|
|
<!-- Tags -->
|
|
<div v-if="host.tags?.length" class="mt-2 pl-2 flex flex-wrap gap-1">
|
|
<span
|
|
v-for="tag in host.tags"
|
|
:key="tag"
|
|
class="text-xs bg-gray-800 text-gray-400 px-1.5 py-0.5 rounded"
|
|
>{{ tag }}</span>
|
|
</div>
|
|
|
|
<!-- Action buttons (show on hover) -->
|
|
<div
|
|
class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity flex gap-1"
|
|
@click.stop
|
|
>
|
|
<button
|
|
@click="emit('edit')"
|
|
class="text-xs bg-gray-800 hover:bg-gray-700 text-gray-400 hover:text-white px-2 py-1 rounded"
|
|
>Edit</button>
|
|
<button
|
|
@click="emit('delete')"
|
|
class="text-xs bg-gray-800 hover:bg-red-900 text-gray-400 hover:text-red-300 px-2 py-1 rounded"
|
|
>Delete</button>
|
|
</div>
|
|
</div>
|
|
</template>
|