fix(nostr-feed): Fix comment threading lines styling

- Change border-* to bg-* classes so threading lines actually display
- Tighten spacing to match Lemmy-style threading (ml-0.5, pl-2, py-1)
- Rename borderColor to depthColor for accuracy

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Patrick Mulligan 2026-01-01 20:39:39 +01:00
parent afdab94beb
commit ffd8dac719

View file

@ -50,19 +50,19 @@ function formatTime(timestamp: number): string {
return formatDistanceToNow(timestamp * 1000, { addSuffix: true }) return formatDistanceToNow(timestamp * 1000, { addSuffix: true })
} }
// Depth colors for threading lines // Depth colors for threading lines (using bg-* since we use width, not border)
const depthColors = [ const depthColors = [
'border-blue-400', 'bg-blue-400',
'border-green-400', 'bg-green-400',
'border-yellow-400', 'bg-yellow-400',
'border-red-400', 'bg-red-400',
'border-purple-400', 'bg-purple-400',
'border-pink-400', 'bg-pink-400',
'border-orange-400', 'bg-orange-400',
'border-cyan-400' 'bg-cyan-400'
] ]
const borderColor = computed(() => depthColors[props.depth % depthColors.length]) const depthColor = computed(() => depthColors[props.depth % depthColors.length])
// Is own comment // Is own comment
const isOwnComment = computed(() => const isOwnComment = computed(() =>
@ -74,7 +74,7 @@ const isOwnComment = computed(() =>
<div <div
:class="[ :class="[
'relative', 'relative',
depth > 0 ? 'ml-3' : '' depth > 0 ? 'ml-0.5' : ''
]" ]"
> >
<!-- Threading line --> <!-- Threading line -->
@ -82,7 +82,7 @@ const isOwnComment = computed(() =>
v-if="depth > 0" v-if="depth > 0"
:class="[ :class="[
'absolute left-0 top-0 bottom-0 w-0.5', 'absolute left-0 top-0 bottom-0 w-0.5',
borderColor, depthColor,
'hover:w-1 transition-all cursor-pointer' 'hover:w-1 transition-all cursor-pointer'
]" ]"
@click="emit('toggle-collapse', comment.id)" @click="emit('toggle-collapse', comment.id)"
@ -91,8 +91,8 @@ const isOwnComment = computed(() =>
<!-- Comment content --> <!-- Comment content -->
<div <div
:class="[ :class="[
'py-2', 'py-1',
depth > 0 ? 'pl-3' : '', depth > 0 ? 'pl-2' : '',
'hover:bg-accent/20 transition-colors' 'hover:bg-accent/20 transition-colors'
]" ]"
> >