davidl/tolaria
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: relationship item input height consistency + X button overlay on hover

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
lucaronin
2026-02-28 10:50:54 +01:00
parent 0cfce651a8
commit fe79e6131e
1 changed files with 11 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/InspectorPanels.tsx
View File

@@ -2,7 +2,7 @@ import { useMemo, useCallback, useState, useRef } from 'react'
import type { ComponentType, SVGAttributes } from 'react'
import { wikilinkTarget, wikilinkDisplay } from '../utils/wikilink'
import type { VaultEntry, GitCommit } from '../types'
import { Trash, X, Plus } from '@phosphor-icons/react'
import { Trash, X } from '@phosphor-icons/react'
import type { ParsedFrontmatter } from '../utils/frontmatter'
import { RELATIONSHIP_KEYS, containsWikilinks } from './DynamicPropertiesPanel'
import { getTypeColor, getTypeLightColor } from '../utils/typeColors'
@@ -48,9 +48,9 @@ function LinkButton({ label, typeColor, bgColor, isArchived, isTrashed, onClick,
const isDimmed = isArchived || isTrashed
const color = isDimmed ? 'var(--muted-foreground)' : typeColor
return (
<div className="group/link flex items-center gap-1">
<div className="group/link relative flex items-center">
<button
className="flex flex-1 items-center justify-between gap-2 border-none text-left cursor-pointer hover:opacity-80 min-w-0"
className="flex w-full items-center justify-between gap-2 border-none text-left cursor-pointer hover:opacity-80 min-w-0"
style={{
background: isDimmed ? 'var(--muted)' : (bgColor ?? 'transparent'),
color, borderRadius: 6, padding: bgColor ? '6px 10px' : '4px 0',
@@ -68,7 +68,7 @@ function LinkButton({ label, typeColor, bgColor, isArchived, isTrashed, onClick,
</button>
{onRemove && (
<button
className="shrink-0 border-none bg-transparent p-0.5 text-muted-foreground opacity-0 transition-opacity hover:text-destructive group-hover/link:opacity-100"
className="absolute right-1 top-1/2 -translate-y-1/2 border-none bg-transparent p-0.5 text-muted-foreground opacity-0 transition-opacity hover:text-destructive group-hover/link:opacity-100"
onClick={onRemove}
title="Remove from relation"
data-testid="remove-relation-ref"
@@ -149,25 +149,24 @@ function InlineAddNote({ entries, onAdd }: {
if (!active) {
return (
<button
className="mt-1 flex items-center gap-1 border-none bg-transparent p-0 text-muted-foreground cursor-pointer hover:text-foreground"
style={{ fontSize: 11 }}
className="mt-1 w-full border border-dashed border-border bg-transparent text-left text-muted-foreground cursor-pointer hover:border-foreground hover:text-foreground"
style={{ borderRadius: 6, padding: '6px 10px', fontSize: 12 }}
onClick={() => setActive(true)}
data-testid="add-relation-ref"
>
<Plus size={10} />
<span>Add</span>
Add
</button>
)
}
return (
<div className="relative mt-1">
<div className="flex items-center gap-1">
<div className="group/add relative flex items-center">
<input
ref={inputRef}
autoFocus
className="flex-1 border border-border bg-transparent px-2 py-0.5 text-xs text-foreground"
style={{ borderRadius: 4, outline: 'none', minWidth: 0 }}
className="w-full border border-border bg-transparent text-foreground"
style={{ borderRadius: 6, outline: 'none', minWidth: 0, padding: '6px 10px', fontSize: 12 }}
placeholder="Note title"
value={query}
onChange={e => setQuery(e.target.value)}
@@ -175,14 +174,7 @@ function InlineAddNote({ entries, onAdd }: {
data-testid="add-relation-ref-input"
/>
<button
className="shrink-0 border-none bg-transparent p-0.5 text-muted-foreground hover:text-foreground"
onClick={handleConfirm}
disabled={!query.trim()}
>
<Plus size={12} />
</button>
<button
className="shrink-0 border-none bg-transparent p-0.5 text-muted-foreground hover:text-foreground"
className="absolute right-1 top-1/2 -translate-y-1/2 border-none bg-transparent p-0.5 text-muted-foreground opacity-0 transition-opacity hover:text-foreground group-hover/add:opacity-100"
onClick={() => { setQuery(''); setActive(false) }}
>
<X size={12} />