url/homelable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

services styling in node and detail panel

Browse Source
This commit is contained in:
findthelorax
2026-04-23 22:22:07 -04:00
committed by Pouzor
parent c165b8b016
commit d9d4be9a53
2 changed files with 45 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/canvas/nodes/BaseNode.tsx
+30 -4
View File
@@ -156,11 +156,37 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
color: theme.colors.nodeSubtextColor,
}}
>
<span className="font-medium truncate min-w-0" title={svc.service_name}>{svc.service_name}</span>
<span className="font-mono shrink-0 opacity-80 flex items-center gap-1">
<span>{svc.port}</span>
<ExternalLink size={9} className={`shrink-0 ${url ? '' : 'opacity-0'}`} />
<div className="flex items-center justify-between gap-2 w-full min-w-0">
{/* LEFT: service name */}
<span
className="font-medium truncate"
style={{ minWidth: 0 }}
title={svc.service_name}
>
{svc.service_name}
</span>
{/* RIGHT: path + port */}
<div className="flex items-center gap-2 shrink-0 min-w-0">
{svc.path && (
<span
className="truncate text-[#8b949e] text-right max-w-[80px]"
title={svc.path}
>
{svc.path}
</span>
)}
<span className="font-mono opacity-80 flex items-center gap-1">
<span>{svc.port}</span>
<ExternalLink
size={9}
className={`shrink-0 ${url ? '' : 'opacity-0'}`}
/>
</span>
</div>
</div>
</div>
)
frontend/src/components/panels/DetailPanel.tsx
+8 -17
View File
@@ -2,7 +2,7 @@ import { createElement, useState } from 'react'
import { X, Edit, Trash2, ExternalLink, Plus, Pencil, Layers, Ungroup, Eye, EyeOff } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip'
import { useCanvasStore } from '@/stores/canvasStore'
import { NODE_TYPE_LABELS, STATUS_COLORS, type ServiceInfo, type NodeData, type NodeProperty } from '@/types'
import { getServiceUrl } from '@/utils/serviceUrl'
@@ -662,9 +662,6 @@ const CATEGORY_COLORS: Record<string, string> = {
function ServiceBadge({ svc, host, onEdit, onRemove }: { svc: ServiceInfo; host?: string; onEdit: () => void; onRemove: () => void }) {
const url = getServiceUrl(svc, host)
const color = CATEGORY_COLORS[svc.category ?? ''] ?? '#8b949e'
const hasPort = svc.port != null
const portLabel = hasPort ? String(svc.port) : 'host'
const pathLabel = svc.path?.trim() ? svc.path.trim() : ''
return (
@@ -680,7 +677,7 @@ function ServiceBadge({ svc, host, onEdit, onRemove }: { svc: ServiceInfo; host?
href={url}
target="_blank"
rel="noopener noreferrer"
className="font-medium truncate"
className="font-medium truncate min-w-0 flex-1"
style={{ color }}
title={svc.service_name}
onClick={e => e.stopPropagation()}
@@ -689,7 +686,7 @@ function ServiceBadge({ svc, host, onEdit, onRemove }: { svc: ServiceInfo; host?
</a>
) : (
<span
className="font-medium truncate"
className="font-medium truncate min-w-0 flex-1"
style={{ color }}
title={svc.service_name}
>
@@ -698,27 +695,21 @@ function ServiceBadge({ svc, host, onEdit, onRemove }: { svc: ServiceInfo; host?
)}
{pathLabel && (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<span
className="truncate text-[#8b949e] max-w-[80px]"
tabIndex={0}
aria-label={pathLabel}
className="shrink-0 text-[#8b949e] text-right w-16 truncate"
title={pathLabel}
>
{pathLabel}
</span>
</TooltipTrigger>
<TooltipContent side="top">{pathLabel}</TooltipContent>
</Tooltip>
</TooltipProvider>
)}
</div>
<div className="flex items-center gap-1.5 shrink-0">
{svc.port != null && (
<span className="font-mono text-[#8b949e]">
{portLabel}/{svc.protocol}
{svc.port}/{svc.protocol}
</span>
)}
{url ? (
<a