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

fix: external link icon on the detail panel for non URL services

Browse Source
This commit is contained in:
findthelorax
2026-04-19 21:55:47 -04:00
committed by Pouzor
parent d181cef4c1
commit 340bd15099
1 changed files with 41 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/panels/DetailPanel.tsx
+21 -14
View File
@@ -662,22 +662,25 @@ const CATEGORY_COLORS: Record<string, string> = {
function ServiceBadge({ svc, host, onEdit, onRemove }: { svc: ServiceInfo; host?: string; onEdit: () => void; onRemove: () => void }) { function ServiceBadge({ svc, host, onEdit, onRemove }: { svc: ServiceInfo; host?: string; onEdit: () => void; onRemove: () => void }) {
const url = getServiceUrl(svc, host) const url = getServiceUrl(svc, host)
const color = CATEGORY_COLORS[svc.category ?? ''] ?? '#8b949e' const color = CATEGORY_COLORS[svc.category ?? ''] ?? '#8b949e'
const hasPort = svc.port != null const hasPort = svc.port != null
const portLabel = hasPort ? String(svc.port) : '' const portLabel = hasPort ? String(svc.port) : 'host'
const pathLabel = svc.path?.trim() ? svc.path.trim() : '' const pathLabel = svc.path?.trim() ? svc.path.trim() : ''
return ( return (
<div <div
className="group flex items-center gap-1 border rounded-md text-xs transition-colors px-2 py-1.5 min-w-0" className="group flex items-center justify-between gap-2 px-2 py-1.5 rounded-md border text-xs transition-colors min-w-0"
style={{ background: '#21262d', borderColor: '#30363d' }} style={{ background: '#21262d', borderColor: '#30363d' }}
> >
<div className="flex items-center gap-1.5 min-w-0 flex-1">
<span className="shrink-0 w-1.5 h-1.5 rounded-full" style={{ backgroundColor: color }} /> <span className="shrink-0 w-1.5 h-1.5 rounded-full" style={{ backgroundColor: color }} />
{url ? ( {url ? (
<a <a
href={url} href={url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="font-medium truncate min-w-0 flex-1" className="font-medium truncate"
style={{ color }} style={{ color }}
title={svc.service_name} title={svc.service_name}
onClick={e => e.stopPropagation()} onClick={e => e.stopPropagation()}
@@ -686,14 +689,14 @@ function ServiceBadge({ svc, host, onEdit, onRemove }: { svc: ServiceInfo; host?
</a> </a>
) : ( ) : (
<span <span
className="font-medium truncate min-w-0 flex-1" className="font-medium truncate"
style={{ color }} style={{ color }}
title={svc.service_name} title={svc.service_name}
> >
{svc.service_name} {svc.service_name}
</span> </span>
)} )}
<div className="flex items-center gap-1 shrink-0">
{pathLabel && ( {pathLabel && (
<TooltipProvider> <TooltipProvider>
<Tooltip> <Tooltip>
@@ -710,34 +713,38 @@ function ServiceBadge({ svc, host, onEdit, onRemove }: { svc: ServiceInfo; host?
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
)} )}
{hasPort && ( </div>
<span className="font-mono text-[#8b949e] shrink-0">{portLabel}/{svc.protocol}</span>
)} <div className="flex items-center gap-1.5 shrink-0">
<span className="font-mono text-[#8b949e]">
{portLabel}/{svc.protocol}
</span>
{url ? ( {url ? (
<a <a
href={url} href={url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="inline-flex w-2.5 h-2.5 items-center justify-center shrink-0" className="inline-flex w-2.5 h-2.5 items-center justify-center"
aria-label="Open service link"
style={{ color: 'inherit' }}
onClick={e => e.stopPropagation()} onClick={e => e.stopPropagation()}
> >
<ExternalLink size={10} className="text-muted-foreground" /> <ExternalLink size={10} className="text-muted-foreground" />
</a> </a>
) : ( ) : (
<span className="w-2.5 shrink-0" /> <span className="w-2.5" />
)} )}
<button <button
onClick={(e) => { e.preventDefault(); e.stopPropagation(); onEdit() }} onClick={(e) => { e.preventDefault(); e.stopPropagation(); onEdit() }}
className="opacity-100 transition-opacity text-[#8b949e] hover:text-[#00d4ff] ml-0.5" className="opacity-0 group-hover:opacity-100 transition-opacity text-[#8b949e] hover:text-[#00d4ff] ml-0.5"
title="Edit service" title="Edit service"
> >
<Pencil size={10} /> <Pencil size={10} />
</button> </button>
<button <button
onClick={(e) => { e.preventDefault(); e.stopPropagation(); onRemove() }} onClick={(e) => { e.preventDefault(); e.stopPropagation(); onRemove() }}
className="opacity-100 transition-opacity text-[#8b949e] hover:text-[#f85149] ml-0.5" className="opacity-0 group-hover:opacity-100 transition-opacity text-[#8b949e] hover:text-[#f85149] ml-0.5"
title="Remove service" title="Remove service"
> >
<X size={10} /> <X size={10} />