Function AssetRow

packages/app-core/src/components/NoteList.tsx:1102–1145

({
  asset,
  vaultRoot,
  onOpen,
  onContextMenu
}: {
  asset: AssetMeta
  vaultRoot: string | null
  onOpen: () => void
  onContextMenu?: (e: React.MouseEvent) => void
})

}

function AssetRow({
  asset,
  vaultRoot,
  onOpen,
  onContextMenu
}: {
  asset: AssetMeta
  vaultRoot: string | null
  onOpen: () => void
  onContextMenu?: (e: React.MouseEvent) => void
}): JSX.Element {
  const url = assetUrl(vaultRoot, asset.path)

  return (
    <button
      type="button"
      onClick={onOpen}
      onContextMenu={onContextMenu}
      draggable
      onDragStart={(e) => setDragPayload(e, { kind: 'asset', path: asset.path })}
      className="flex h-[60px] items-center gap-3 rounded-lg border border-transparent px-3 py-2 text-left transition-colors hover:border-paper-300/70 hover:bg-paper-200/45"
    >
      <div className="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-paper-200/45">
        {asset.kind === 'image' && url ? (
          <img
            src={url}
            alt={asset.name}
            className="h-full w-full object-cover"
            loading="lazy"
          />
        ) : (
          <span className="text-2xs uppercase tracking-[0.16em] text-ink-500">{asset.kind}</span>
        )}
      </div>
      <div className="min-w-0 flex-1">
        <div className="truncate text-sm font-medium text-ink-900">{asset.name}</div>
        <div className="truncate text-xs text-ink-500">{asset.path}</div>
      </div>
      <div className="shrink-0 text-xs text-ink-500">
        {formatBytes(asset.size)}
      </div>
    </button>
  )
}